/* =========================================================
   JHD EDU GUIDANCE - DESIGN SYSTEM / RESPONSIVE OVERRIDES
   Keeps existing HTML sections; improves visual hierarchy,
   cards, navigation, spacing, sliders and mobile UX.
   ========================================================= */

:root{
  --jhd-primary:#2563eb;
  --jhd-primary-dark:#1d4ed8;
  --jhd-secondary:#0f172a;
  --jhd-muted:#64748b;
  --jhd-bg:#f8fafc;
  --jhd-card:#ffffff;
  --jhd-border:#e2e8f0;
  --jhd-radius:18px;
  --jhd-shadow:0 10px 35px rgba(15,23,42,.08);
  --jhd-shadow-hover:0 18px 45px rgba(15,23,42,.14);
}

html{scroll-behavior:smooth}
body{
  background:var(--jhd-bg);
  color:#0f172a;
  overflow-x:hidden;
}
img{max-width:100%}

/* Sticky navigation */
.navbar, header .navbar{
  position:sticky !important;
  top:0;
  z-index:1035;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 18px rgba(15,23,42,.08);
}

/* Hero polish */
.hero-section,
.banner-section,
.hero{
  overflow:hidden;
}
.hero-section img,
.banner-section img{
  max-width:100%;
}

/* Section headings */
section h2, section h3{
  letter-spacing:-.02em;
}
.section-title{
  font-weight:800;
  color:var(--jhd-secondary);
}

/* Cards */
.course-card,
.college-card,
.card{
  border:1px solid rgba(226,232,240,.9);
  border-radius:var(--jhd-radius);
  background:var(--jhd-card);
  box-shadow:var(--jhd-shadow);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  overflow:hidden;
}
.course-card:hover,
.college-card:hover,
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--jhd-shadow-hover);
  border-color:rgba(37,99,235,.18);
}

/* Course/college images */
.course-card img,
.college-card img{
  transition:transform .4s ease;
}
.course-card:hover img,
.college-card:hover img{
  transform:scale(1.035);
}

/* Buttons */
.btn{
  border-radius:10px;
  font-weight:600;
  transition:all .2s ease;
}
.btn-primary{
  background:var(--jhd-primary);
  border-color:var(--jhd-primary);
}
.btn-primary:hover{
  background:var(--jhd-primary-dark);
  border-color:var(--jhd-primary-dark);
  transform:translateY(-1px);
}

/* Forms */
.form-control,
.form-select{
  min-height:46px;
  border-radius:10px;
  border-color:var(--jhd-border);
  box-shadow:none;
}
.form-control:focus,
.form-select:focus{
  border-color:var(--jhd-primary);
  box-shadow:0 0 0 .2rem rgba(37,99,235,.12);
}

/* Slider navigation */
.swiper{
  padding:8px 4px 45px !important;
}
.swiper-button-next,
.swiper-button-prev{
  width:42px !important;
  height:42px !important;
  border-radius:50%;
  background:#fff;
  box-shadow:0 7px 24px rgba(15,23,42,.14);
}
.swiper-button-next:after,
.swiper-button-prev:after{
  font-size:15px !important;
  font-weight:800;
}
.swiper-pagination-bullet{
  width:8px;
  height:8px;
  opacity:.35;
}
.swiper-pagination-bullet-active{
  width:22px;
  border-radius:10px;
  opacity:1;
}

/* College cards */
.college-card{
  height:100%;
}
.college-card .college-logo,
.college-card .college-logo img{
  width:74px;
  height:74px;
}
.college-card .college-logo img{
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  padding:7px;
  border:1px solid var(--jhd-border);
}
.college-info{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  color:var(--jhd-muted);
  font-size:.86rem;
}
.college-info span{
  display:inline-flex;
  align-items:center;
}

/* Course cards */
.course-card .course-image,
.course-card .card-img-top{
  aspect-ratio:16/9;
  object-fit:cover;
}
.course-meta{
  color:var(--jhd-muted);
  font-size:.86rem;
}

/* Tables */
.table{
  --bs-table-bg:transparent;
}
.table thead th{
  white-space:nowrap;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#475569;
  background:#f8fafc;
}
.table tbody tr{
  transition:background .2s ease;
}
.table tbody tr:hover{
  background:#f8fbff;
}

/* Search/filter areas */
.filter-card,
.search-card{
  background:#fff;
  border:1px solid var(--jhd-border);
  border-radius:var(--jhd-radius);
  box-shadow:var(--jhd-shadow);
}

/* Footer */
footer{
  background:#0f172a;
}

/* Floating actions */
.whatsapp-float,
.call-float{
  transition:transform .2s ease,box-shadow .2s ease;
}
.whatsapp-float:hover,
.call-float:hover{
  transform:translateY(-3px) scale(1.04);
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.28);
  outline-offset:2px;
}

/* Mobile */
@media (max-width:991.98px){
  .navbar .container,
  .navbar .container-fluid{
    padding-left:16px;
    padding-right:16px;
  }
  .swiper-button-next,
  .swiper-button-prev{
    width:36px !important;
    height:36px !important;
  }
}

@media (max-width:767.98px){
  .container,
  .container-fluid{
    --bs-gutter-x:1.25rem;
  }
  section{
    overflow:hidden;
  }
  h1{font-size:clamp(2rem,8vw,3rem)}
  h2{font-size:clamp(1.55rem,6vw,2.2rem)}
  .swiper{
    padding-bottom:38px !important;
  }
  .swiper-button-next,
  .swiper-button-prev{
    display:none;
  }
  .course-card,
  .college-card,
  .card{
    border-radius:14px;
  }
}

@media (max-width:575.98px){
  .college-info{
    gap:6px 10px;
    font-size:.78rem;
  }
  .btn{
    min-height:42px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}