/* =========================================================
   Nikam Tuition Classes — Custom Styles
   ========================================================= */

:root{
  --navy: #0B3C6F;
  --navy-dark: #082a4f;
  --sky: #4DA8DA;
  --sky-light: #eaf5fc;
  --white: #ffffff;
  --black: #1a1a1a;
  --gray: #6c757d;
  --radius: 14px;
  --shadow-sm: 0 4px 15px rgba(11,60,111,0.08);
  --shadow-md: 0 10px 30px rgba(11,60,111,0.12);
  --shadow-lg: 0 20px 45px rgba(11,60,111,0.18);
  --transition: all .35s ease;
}

html{ scroll-behavior: smooth; }

body{
  font-family: 'Roboto', sans-serif;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Poppins', sans-serif;
  color: var(--navy);
}

a{ text-decoration: none; }

section{ position: relative; }
.section-pad{ padding: 90px 0; }
.bg-light-soft{ background: #f6faff; }

.section-tag{
  display:inline-block;
  color: var(--sky);
  background: var(--sky-light);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 30px;
  margin-bottom: 14px;
}
.section-tag-light{
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(4px);
}
.section-title{
  font-weight: 700;
  font-size: 2.3rem;
  margin-bottom: 18px;
}
.section-sub{ color: var(--gray); max-width: 650px; margin: 0 auto; }
.section-text{ color: #444; line-height: 1.8; margin-bottom: 16px; }

/* Buttons */
.btn-navy{
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color:#fff;
  border:none;
  font-weight: 600;
  transition: var(--transition);
}
.btn-navy:hover{
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color:#fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.btn-outline-navy{
  border:2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-navy:hover{
  background: var(--navy);
  color:#fff;
  transform: translateY(-3px);
}
.btn-sm-round{
  border-radius: 30px;
  padding: 8px 20px;
  font-size: .9rem;
}
.btn-lg-round{
  border-radius: 30px;
  padding: 13px 20px;
  font-size: 1rem;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.main-navbar{
  padding: 14px 0;
  transition: var(--transition);
  box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
.main-navbar.scrolled{ padding: 8px 0; }

.navbar-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand-logo{
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--navy), var(--sky));
  color:#fff;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.brand-text{
  display:flex;
  flex-direction: column;
  line-height: 1.2;
  font-weight:700;
  font-size: 1.2rem;
  color: var(--navy);
}
.brand-text small{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: .68rem;
  color: var(--sky);
  letter-spacing: .5px;
}

.navbar-nav .nav-link{
  color: var(--black);
  font-weight: 500;
  margin: 0 10px;
  position: relative;
  transition: var(--transition);
}
.navbar-nav .nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--sky);
  transition: var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--navy); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ width:100%; }

.navbar-toggler{ border:none; box-shadow:none; color: var(--navy); font-size: 1.3rem; }

@media (max-width: 991px){
  .nav-cta{ margin-top: 15px; }
  .navbar-collapse{ padding-bottom: 10px; }
}

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-section{
  position: relative;
  margin-top: 0;
}
.hero-section .carousel-item,
.hero-section .carousel-item.active{
  background-size: cover;
  background-position: center;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 600px;
  display: flex !important; /* Bootstrap's .carousel-item.active{display:block} otherwise wins on specificity and breaks vertical centering */
  align-items: center;
  padding-top: 92px; /* clears the fixed navbar so centered content never sits under it */
  box-sizing: border-box;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(11,60,111,0.88) 0%, rgba(11,60,111,0.55) 55%, rgba(11,60,111,0.35) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  color:#fff;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}
.hero-desc{ margin-left:auto; margin-right:auto; }
.hero-badge{
  display:inline-block;
  background: rgba(77,168,218,0.2);
  border: 1px solid var(--sky);
  color:#fff;
  padding: 6px 18px;
  border-radius: 30px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.hero-title{
  font-size: 3.2rem;
  font-weight: 800;
  color:#fff;
  line-height: 1.25;
  margin-bottom: 20px;
}
.hero-desc{
  font-size: 1.15rem;
  color: #e8f1fb;
  margin-bottom: 32px;
  max-width: 600px;
  line-height: 1.7;
}
.btn-hero{
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color:#fff;
  font-weight: 600;
  padding: 14px 34px;
  border-radius: 40px;
  font-size: 1.05rem;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: var(--transition);
}
.btn-hero:hover{
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
  color:#fff;
}


.hero-arrow{
  width:48px; height:48px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: var(--transition);
}
.carousel-control-prev, .carousel-control-next{
  width:8%;
  align-items: flex-end; /* keeps the arrow icon low, clear of the fixed center-right Enquire button */
  padding-bottom: 70px;
}
.carousel-control-prev:hover .hero-arrow,
.carousel-control-next:hover .hero-arrow{ background: var(--sky); }

.hero-indicators{ bottom: 25px; }
.hero-indicators button{
  width:10px; height:10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  opacity: 1;
}
.hero-indicators button.active{ background: var(--sky); width:28px; border-radius: 10px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-img-wrap{ position: relative; }
.about-img{
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  object-fit: cover;
  max-height: 520px;
}
.about-badge{
  position:absolute;
  bottom: -25px;
  right: -20px;
  background: linear-gradient(135deg, var(--navy), var(--sky));
  color:#fff;
  padding: 18px 24px;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow: var(--shadow-lg);
}
.about-badge i, .about-badge svg{ font-size: 2rem; }
.about-badge strong{ display:block; font-size: 1.2rem; }
.about-badge span{ font-size: .8rem; opacity:.9; }

.counters-row{ text-align:center; }
.counter-box{
  background: var(--sky-light);
  border-radius: var(--radius);
  padding: 18px 10px;
  transition: var(--transition);
  height: 100%;
}
.counter-box:hover{ background: var(--navy); }
.counter-box:hover h3, .counter-box:hover p{ color:#fff; }
.counter-box h3{
  font-weight:700;
  font-size: 1.6rem;
  color: var(--navy);
  margin-bottom:4px;
}
.counter-box h3 i, .counter-box h3 svg{ color: var(--sky); font-size: 1.5rem; }
.counter-box:hover h3 i, .counter-box:hover h3 svg{ color:#fff; }
.counter-box p{
  font-size: .82rem;
  color: var(--gray);
  margin:0;
  font-weight: 500;
}

/* =========================================================
   MISSION & VISION
   ========================================================= */
.mission-section{ background: linear-gradient(180deg, #fff, #f2f8fd); }
.mv-card{
  background: linear-gradient(145deg, var(--navy), var(--navy-dark));
  color:#fff;
  border-radius: var(--radius);
  padding: 45px 35px;
  height: 100%;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  position: relative;
  overflow:hidden;
}
.mv-card::before{
  content:'';
  position:absolute;
  width:180px; height:180px;
  background: radial-gradient(circle, rgba(77,168,218,0.35), transparent 70%);
  top:-60px; right:-60px;
  border-radius: 50%;
}
.mv-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.mv-icon{
  width:70px; height:70px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.7rem;
  color: var(--sky);
  margin-bottom: 22px;
}
.mv-card h3{ color:#fff; font-weight:700; margin-bottom: 14px; }
.mv-card p{ color: #d7e6f5; line-height: 1.7; margin:0; }

/* =========================================================
   COURSES
   ========================================================= */
.course-card{
  position: relative;
  background:#fff;
  border-radius: var(--radius);
  overflow:visible;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  height: 100%;
  display:flex;
  flex-direction: column;
}
.course-card:hover{
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.course-img-wrap{
  position: relative;
  overflow: hidden;
  height: 220px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.course-img-wrap img{
  width:100%; height:100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.course-card:hover .course-img-wrap img{ transform: scale(1.1); }
.course-icon{
  position:absolute;
  top: 198px;
  left: 24px;
  width:52px; height:52px;
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color:#fff;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem;
  box-shadow: var(--shadow-md);
  border: 3px solid #fff;
}
.course-body{
  padding: 40px 24px 26px;
  flex:1;
  display:flex;
  flex-direction: column;
}
.course-body h3{ font-size: 1.25rem; font-weight:700; margin-bottom: 12px; }
.course-body p{ color: var(--gray); font-size: .93rem; line-height: 1.7; flex:1; margin-bottom: 20px; }
.course-btns{ display:flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-card{
  background:#fff;
  border: 1px solid #e7f0f9;
  border-radius: var(--radius);
  padding: 30px 15px;
  text-align:center;
  height:100%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.why-card:hover{
  background: linear-gradient(145deg, var(--navy), var(--sky));
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}
.why-card i, .why-card svg{
  font-size: 2rem;
  color: var(--sky);
  margin-bottom: 16px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  transition: var(--transition);
}
.why-card:hover i, .why-card:hover svg{ color:#fff; }
.why-card p{
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
  margin:0;
  transition: var(--transition);
}
.why-card:hover p{ color:#fff; }

/* =========================================================
   RESULTS / SUCCESS
   ========================================================= */
.results-section{
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 100px 0;
  position: relative;
}
.results-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(11,60,111,0.92), rgba(11,60,111,0.75));
}
.results-title{
  color:#fff;
  font-weight: 800;
  font-size: 2.4rem;
  margin-bottom: 16px;
}
.results-desc{ color: #dbeaf7; font-size: 1.1rem; }
.result-box{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 35px 25px;
  text-align:center;
  backdrop-filter: blur(6px);
  transition: var(--transition);
  height:100%;
}
.result-box:hover{ background: rgba(255,255,255,0.16); transform: translateY(-8px); }
.result-box i, .result-box svg{ font-size: 2.3rem; color: var(--sky); margin-bottom: 18px; display:block; margin-left:auto; margin-right:auto; }
.result-box h4{ color:#fff; font-weight:700; margin-bottom: 10px; }
.result-box p{ color:#dbeaf7; margin:0; font-size: .93rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-info-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
  height:100%;
}
.contact-info-card h3{ font-weight:700; margin-bottom: 26px; }
.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom: 22px;
}
.contact-list i, .contact-list svg{
  width: 46px; height:46px;
  background: var(--sky-light);
  color: var(--navy);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  padding: 13px;
  box-sizing: border-box;
  font-size:1.1rem;
  flex-shrink:0;
}
.contact-list strong{ display:block; font-size: .82rem; color: var(--gray); text-transform: uppercase; letter-spacing:.5px; }
.contact-list a, .contact-list span{ color: var(--black); font-weight: 500; }
.map-wrap{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.map-wrap-lg{ height: 100%; min-height: 420px; }

.form-label{ font-weight:600; color: var(--navy); font-size: .9rem; }
.form-control, .form-select{
  border-radius: 10px;
  border: 1px solid #dde8f2;
  padding: 12px 15px;
  font-size: .95rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(77,168,218,0.2);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: linear-gradient(180deg, var(--navy-dark), #061c33);
  color: #cfe0f0;
  padding: 25px 0;
  text-align: center;
}
.site-footer p{ margin:0; font-size: .9rem; color:#cfe0f0; }

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.floating-btn{
  position: fixed;
  right: 22px;
  z-index: 999;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow: var(--shadow-lg);
  border: none;
  transition: var(--transition);
}
.call-btn{
  bottom: 22px;
  width:58px; height:58px;
  border-radius:50%;
  background: var(--navy);
  font-size:1.5rem;
  animation: floatPulse 2.4s infinite;
}
.call-btn:hover{ background: var(--sky); color:#fff; transform: translateY(-3px); }
.enquire-btn{
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 4px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--navy));
  font-size: 1.2rem;
}
.enquire-btn span{
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1;
}
.enquire-btn:hover{ transform: translateY(-50%) scale(1.08); }
@keyframes floatPulse{
  0%{ box-shadow: 0 0 0 0 rgba(11,60,111,0.4); }
  70%{ box-shadow: 0 0 0 14px rgba(11,60,111,0); }
  100%{ box-shadow: 0 0 0 0 rgba(11,60,111,0); }
}

@media (max-width: 576px){
  .call-btn{ width:50px; height:50px; font-size:1.3rem; right:16px; bottom:16px; }
  .enquire-btn{ width:58px; height:58px; right:16px; }
}

/* =========================================================
   ENQUIRY MODAL
   ========================================================= */
.enquiry-modal-content{
  border-radius: var(--radius);
  border:none;
  overflow:hidden;
}
.enquiry-header{
  text-align:center;
  margin-bottom: 20px;
}
.enquiry-header i, .enquiry-header svg{
  font-size: 2.5rem;
  color: var(--sky);
  margin-bottom: 10px;
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.enquiry-header h4{ font-weight:700; margin-bottom:6px; }
.enquiry-header p{ color: var(--gray); font-size: .9rem; }
.enquiry-close{ position:absolute; top: 18px; right: 18px; z-index: 5; }
.modal-body{ padding: 35px 32px; }

/* =========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================= */
.reveal{
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
}
.reveal[data-reveal="up"]{ transform: translateY(40px); }
.reveal[data-reveal="left"]{ transform: translateX(-50px); }
.reveal[data-reveal="right"]{ transform: translateX(50px); }
.reveal.in-view{
  opacity:1;
  transform: translate(0,0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
  .hero-title{ font-size: 2.2rem; }
  .hero-desc{ font-size: 1rem; }
  .section-title{ font-size: 1.8rem; }
  .about-badge{ right: 10px; bottom: -20px; padding: 12px 18px; }
  .results-section{ background-attachment: scroll; }
}

@media (max-width: 576px){
  .section-pad{ padding: 60px 0; }
  .carousel-item{
    height: 90vh;
    height: calc(var(--vh, 1vh) * 90);
    padding-top: 80px;
  }
  .hero-title{ font-size: 1.7rem; }
  .btn-hero{ padding: 12px 24px; font-size: .95rem; }
  .about-badge{ position: static; margin-top: 15px; display:inline-flex; }
}

/* Below the lg breakpoint, two-column rows stack to full width. A left/right
   horizontal slide-in on a full-width element pushes it past the viewport
   edge and causes real horizontal scroll, so fall back to a vertical
   fade-up instead once columns are no longer side-by-side. */
@media (max-width: 991.98px){
  .reveal[data-reveal="left"],
  .reveal[data-reveal="right"]{ transform: translateY(40px); }
}