@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lobster&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lobster&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lobster&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
  /*------------------------------------
   Root Variables
   ------------------------------------- */

   :root {

  /* Brand Colors */
  --primary-color:#65b4e6; 
  --secondary-color: #1E3A8A; 
  --dark-color: #000000;    
  --light-color: #ffffff;   
  --text-color:#1E3A8A;    

  /* Typography */
  --font-family: 'Inter';
  --heading-font-weight: 700;
  --body-font-weight: 500;

  /* Font Sizes */
  --fs-h1: 2.5rem; 
  --fs-h2: 2rem;  
  --fs-h3: 1.5rem;
  --fs-body: 1rem; 
  --fs-small: 0.9rem;

  /* Buttons */
  --btn-radius: 6px;
  --btn-padding: 10px 20px;

}

/* Apply globally */
body {
  font-family: var(--font-family);
  font-weight: var(--body-font-weight);
  color: var(--text-color);
  background: var(--light-color);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--heading-font-weight);
  color: var(--dark-color);
}

a {
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  color: var(--primary-color);
}

.btn-custom {
  background: var(--primary-color);
  color: var(--light-color);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-weight: 500;
}
.btn-custom:hover {
  background: #034f51; 
  color: var(--light-color);
}

  /* Top Info Bar */
    .top-bar {
      background: var(--primary-color);
      color: var(--text-color);
      font-size:1rem;
      text-align: center;
      font-family: var(--font-family);
      font-weight:600;
    }
    .info-line span::before {
    content: "|";
    margin: 0 20px;
    }

    /* Navbar */
    .navbar {
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
   
    .navbar-nav .nav-link {
      color: var(--dark-color);
      font-weight: 500;
      margin-right: 30px;
      font-size:1.05rem;
    }
/*  hamburger */
.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}
 .navbar-brand img {
  height: 45px!important;  
  max-width:450px!important; 
 }
@media (max-width: 393px) {
  .navbar-brand img {
    height: 45px!important;  
    max-width:290px!important; 
  }
  .hero-section .carousel-item {
     min-height:70vh!important;
    }
     .hero-content h1 {
      font-size: 2.5rem!important;
      font-weight: 800;
      color:rgb(0, 0, 0,0.9)!important;
    }
    .hero-content p {
      font-size: 1rem!important;
      margin-top: 15px;
      color: #161616!important;
      line-height: 1.7!important;
      word-spacing: 3px; 
      font-weight: 400;
    }
    .about-title {
  font-weight: 800;
  font-size: 2rem;
  line-height:1.5 !important;
  color: #1a1a1a;
}
}
@media (min-width: 394px) and (max-width:720px){
  .navbar-brand img {
    height:50px!important;  
    max-width:420px!important; 
  }
   .hero-section .carousel-item {
     min-height:70vh!important;
    }
     .hero-content h1 {
      font-size: 2.5rem!important;
      font-weight: 800;
      color:rgb(0, 0, 0,0.9)!important;
    }
    .hero-content p {
      font-size: 1rem!important;
      margin-top: 15px;
      color: #161616!important;
      line-height: 1.7!important;
      word-spacing: 3px; 
      font-weight: 400;
    }
    .about-title {
  font-weight: 800;
  font-size: 2rem;
  line-height:1.5 !important;
  color: #1a1a1a;
}
}
@media (min-width:721px) and (max-width:1024px){
  .navbar-brand img {
    height:50px!important;  
    max-width:420px!important; 
  }
   .hero-section .carousel-item {
     min-height:70vh!important;
    }
     .hero-content h1 {
      font-size: 3rem!important;
      font-weight: 800;
      color:rgb(0, 0, 0,0.9)!important;
    }
    .hero-content p {
      font-size: 1rem!important;
      margin-top: 15px;
      color: #161616!important;
      line-height: 1.7!important;
      word-spacing: 3px; 
      font-weight: 400;
    }
    .about-title {
  font-weight: 800;
  font-size: 2rem;
  line-height:1.5 !important;
  color: #1a1a1a;
}
}

    /* Hero Section */
    .hero-section {
      position: relative;
    }
    .hero-section .carousel-item {
      min-height: 86vh;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
    }
    .hero-content {
      max-width: 600px;
      border-radius: 12px;
    }
    .hero-content h1 {
      font-size: 3.75rem;
      font-weight: 800;
    }
    .hero-content p {
      font-size: 1.1rem;
      margin-top: 15px;
      color: #4b4b4b;
      line-height: 1.8;
      word-spacing: 3px; 
      font-weight: 500;
    }
    .hero-btn {
      margin-top: 20px;
      background: rgba(0, 0, 0, 0.18);
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      transition: 0.3s;
    }
    .hero-btn:hover {
      background: rgba(36, 36, 36, 0.18);
      color: #fff;
    }
    .hero-btn i {
      margin-left: 8px;
    }

    /* Responsive */
    @media(max-width: 768px) {
      .hero-content {
        max-width: 100%;
        padding: 20px;
      }
      .hero-content h1 {
        font-size: 1.8rem;
      }
    }
    /* Overlay only for mobile */
@media (max-width: 767px) {
  #heroCarousel .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.01); 
    z-index: 1;
  }

  #heroCarousel .hero-content {
    position: relative;
    z-index: 2;
  }
}

    /* Subtitle */
.about-subtitle {
  color: var(--text-color); 
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: 'Roboto';
  font-size: 1.4rem;
}

/* Title */
.about-title {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.7;
  color: #1a1a1a;
}
.about_us img{
  max-height:500px;
}

.about-title .highlight {
  color: var(--text-color);
}

/* Paragraph text */
.about-text {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  text-align: justify;
  font-weight:400;
  
}
.about-text li{
  color: #555;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-weight:400;
}
/* Button style */
.btn-readmore {
  display: inline-block;
  padding: 10px 22px;
  background-color: #004aad;
  color: #fff;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* Button hover effect */
.btn-readmore:hover {
  background-color: #00337a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0px 4px 12px rgba(0, 74, 173, 0.3);
}

/* Small arrow spacing */
.btn-readmore span {
  margin-left: 6px;
  transition: margin-left 0.3s ease;
}

.btn-readmore:hover span {
  margin-left: 12px;
}


.success-section {
  position: relative;
  background: url('images/animation_counter_background_image.webp') no-repeat center center/cover;
  min-height: 360px;
}

.success-section .overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 33, 102, 0.8); 
}

.success-section h2 {
  font-family: 'Roboto';
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size:3rem;
}

.success-section h3 {

  font-size: 4rem;
  font-weight: 500;
  color: #fff;
}

.success-section p {
  margin: 0;
  font-size: 1.35rem;
  color: #fff;
  font-weight:400;
}

/* Paragraph */
.vision-text {
  color: #555;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.7;
}


/* Button */
.btn-readmore {
  display: inline-block;
  padding: 10px 22px;
  background-color: var(--secondary-color);
  color: #fff;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.btn-readmore:hover {
  background-color: #00337a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0px 4px 12px rgba(0, 74, 173, 0.3);
}
.btn-readmore span {
  margin-left: 6px;
  transition: margin-left 0.3s ease;
}
.btn-readmore:hover span {
  margin-left: 12px;
}
.sub_title{
  font-size:1.2rem;
  
}
/* Custom Tick List */
.custom-list {
  list-style: none;
  padding: 0;
}

.custom-list li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  line-height: 1.7;
}

.custom-list li::before {
  content: url('images/tick-icon.png'); 
  position: absolute;
  left: 0;
  top: 2px;
  width:15px;
  height: 10px;
}

/* Blue Line */
.blue-line {
  max-width: 350px;
  height: 7px;
  background-color: var(--secondary-color); 
  border-radius: 2px;
}
.target_heading {
  color:var(--text-color);
  font-weight:700;
}
.circle-bg {
      width: 350px;
      height: 350px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
     align-items: center;
 /* text goes to bottom */
      text-align: center;
      padding: 20px;
      margin: auto;
      background-size: cover;
      background-position: center;
    }
    .circle-bg p {
      font-size: 1.35rem;
      font-weight: 500;
      color: #242424;
      margin: 0;
      padding-top:60px;
    }

    /* Mobile responsiveness */
    @media(max-width:1024px) {
      .circle-bg {
        width: 300px;
        height: 300px;
        padding: 12px;
      }
      
    }

    /* Example: different backgrounds */
    .bg-students   { background-image: url('images/circle_1.png'); }
    .bg-teachers   { background-image: url('images/circle_2.png'); }
    .bg-parents    { background-image: url('images/circle_3.png'); }
    .bg-youth      { background-image: url('images/circle_4.png'); }
    .bg-community  { background-image: url('images/circle_5.png'); }
.footer {
  background: url('images/footer_background.png') no-repeat center center/cover;
  position: relative;
}

.footer h5 {
  color: #fff;
}
.footer p, 
.footer a {
  color: #dcdcdc;
  font-size: 1rem;
  line-height:1.85;
  text-align: left;
}
.footer a:hover {
  color: #dcdcdc;
}
.social-icons a:hover {
  color: #00d9ff;
}
.footer .list-unstyled li{
   font-size:1.2rem;
   margin-bottom:12px;
   color: #dcdcdc;
}
.footer h5{
  font-weight:500!important;
}
 .icon-circle {
    width: 70px;
    height: 70px;
    background: #1E3A8A; 

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }

  .icon-circle img {
    width: 35px;
    height: 35px;
  }

  .card {
    border-radius: 12px;

  }
 .card-body p{
  line-height:1.9;
 }
/* Section */
.approach-section {
  position: relative;
 
}

/* Blue top background */
.approach-bg {
  position: relative;
  height: 600px; 
  background: url('images/animation_counter_background_image.webp') no-repeat center center/cover;
  display: flex;               
  flex-direction: column;
  align-items: center;         
  padding-top: 60px;           
  text-align: center;
}

.approach-bg::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(8, 33, 102, 0.8); 
  z-index: 1;
}

.approach-bg h2,
.approach-bg p {
  position: relative;
  z-index: 2;
  color: #fff;
  margin: 0;
}
.approach-bg h2 {
  font-weight: 600;
  margin-bottom: 10px;
}
.approach-bg p {
  font-style: italic;
}


/* White card overlaps */
.approach-section .card {
  margin-top: -450px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}

.contact-box {
      text-align: center;
      padding: 20px;
      border-right:1px solid #dadada;
    }
    .contact-box:last-child {
  border-right: none;
}
    .contact-box img {
      width: 50px;  
      margin-bottom: 15px;
    }
    .contact-box h5 {
      font-weight: bold;
      color: #0a2d7c;
    }
    .contact-box a {
      text-decoration: none;
      color: #0a2d7c;
    }


    /* Mobile view adjustment */
    @media(max-width: 767px) {
      .contact-box {
        border-right: none;
        border-bottom: 1px solid #ddd;
      }
      .contact-box:last-child {
        border-bottom: none; 
      }
    }

    .contact-form h3 {
      font-weight: bold;
      color: #0a2d7c;
      margin-bottom: 20px;
    }
    .form-control, .form-select {
      border-radius: 8px;
      padding: 12px;
    }
    textarea {
      resize: none;
    }
    .btn-send {
      background-color: #0a2d7c;
      color: #fff;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 8px;
    }
    .btn-send:hover {
      background-color: #082c74;
       color: #fff;
    }
    iframe {
      border-radius: 12px;
      width: 100%;
      height: 100%;
      min-height: 400px;
    }
    .nav-link.active {
  color: #1580c2 !important;
  font-weight: 600;
}
.hero-btn-active {
  background-color: #2563EB;
}

.hero-btn-active:hover {
  border: solid 1px #2563EB;
}