/* Reset */
      * {box-sizing: border-box; margin:0; padding:0; font-family: "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;}
      html,body {background:#071022; color:#e6f0f2; line-height:1.4;}
      a {color:inherit; text-decoration:none;}
      img {max-width:100%; display:block;}

      /* Container */
      .container {max-width:1100px; margin:0 auto; padding:24px;}

      .top-fixed-banner {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 65px;
          background: #10A15E;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 30px;
          z-index: 9999;
          font-family: Arial, sans-serif;
      }

      /* center text */
      .banner-left {
          position: relative;
          font-size: 22px;
          font-weight: 700;
          color: #000;
      }

      /* red highlight */
      .highlight {
          background: #0271CD;
          color: #fff;
          padding: 4px 15px;
          border-radius: 20px;
      }
      

.top-fixed-banner-duration {
    position: fixed;
    left: 0;
    width: 100%;
    height: 40px;       
    background-color: gold;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 9999;
    top:65px;
}


.top-fixed-banner-duration span {
    display: inline-block;
    padding-left: 100%;                /* ⭐ KEY FIX */
    will-change: transform;            /* smoother on mobile */
    animation: scroll-right-left 50s linear infinite;
}

@keyframes scroll-right-left {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}



@media (max-width: 780px) {
    .top-fixed-banner-duration {
        height: 36px;
        font-size: 14px;
        top:65px;
    }

    .top-fixed-banner-duration span {
        animation-duration: 40s;
    }
    
    .hero{
        margin-top:70px;
    }
    
}

@media (max-width: 576px) {
    .top-fixed-banner-duration {
        height: 32px;
        font-size: 13px;
        top:80px;
    }
    
    .hero{
        margin-top:0px;
    }

    .top-fixed-banner-duration span {
        animation-duration: 40s;   /* slower */
    }
}









      /* date text */
      .date-text {
          margin-left: 6px;
          color: white;
      }

      /* right text */
      .banner-right {
          font-weight: 800;
          color: white;
          font-size: 18px;
      }

      @media (max-width: 576px) {
        .top-fixed-banner {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: auto;
            padding: 10px 12px;
            text-align: center;
        }

        .banner-left {
            font-size: 16px;
        }

        .banner-center {
            font-size: 16px;
            line-height: 1.3;
        }

        .highlight {
            display: inline-block;
            margin-bottom: 4px;
        }

        .underline {
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            bottom: -5px;
        }

        .banner-right {
            margin-top: 6px;
            font-size: 16px;
        }

        body {
            padding-top: 92px;
        }
    }



      /* Hero */
      .hero {
        padding:48px 0 64px;
        border-bottom: 6px solid #0f2740;
      }
      .hero-inner {display:flex; gap:24px; align-items:center; justify-content:space-between;}
      .hero-left {flex:1; max-width:640px;}
      .hero-title {font-size:36px; font-weight:700; color: gold; margin-bottom:8px;}
      .hero-sub {font-size:18px; color:#cfe9f5; margin-bottom:18px;}
      .cta-row {display:flex; gap:12px; margin-bottom:20px;}
      .btn {display:inline-block; padding:12px 18px; border-radius:8px; font-weight:600; cursor:pointer;}
      .btn-primary {background:#fff; color:#0b1b2a;}
      .btn-outline {background:transparent; border:1px solid rgba(255,255,255,0.12); color:#fff;}
      .hero-meta {display:flex; gap:12px; margin-top:12px;}
      .meta-pill {background:rgba(255,255,255,0.04); padding:8px 12px; border-radius:999px; font-size:14px;}

      .hero-right {max-width:340px; text-align:center;}

      .portrait {
        border-radius:12px; 
        overflow:hidden; 
      }




      /* Feature icons row */
      .features {
        display:flex; 
        gap:12px; 
        justify-content:center; 
        margin-top: -26px;
        
      }
      .feature {
        background:#072233; 
        padding:12px 14px; 
        text-align:center; 
        box-shadow:0 4px 18px rgba(0,0,0,0.5);
        overflow: hidden;
        position: relative;
      }

      /* Base border (hidden) */
      .feature::before,
      .feature::after,
      .feature span::before,
      .feature span::after {
        content: "";
        position: absolute;
        background: #9fe3ff;
      }

      /* TOP */
      .feature::before {
        height: 2px;
        width: 0;
        top: 0;
        left: 0;
        animation: topLine 4s linear infinite;
      }

      /* RIGHT */
      .feature::after {
        width: 2px;
        height: 0;
        top: 0;
        right: 0;
        animation: rightLine 4s linear infinite;
      }

      /* BOTTOM */
      .feature span::before {
        height: 2px;
        width: 0;
        bottom: 0;
        right: 0;
        animation: bottomLine 4s linear infinite;
      }

      /* LEFT */
      .feature span::after {
        width: 2px;
        height: 0;
        bottom: 0;
        left: 0;
        animation: leftLine 4s linear infinite;
      }

      /* Keyframes */
      @keyframes topLine {
        0% { width: 0; }
        20% { width: 100%; }
        100% { width: 100%; opacity: 0; }
      }

      @keyframes rightLine {
        0%,20% { height: 0; }
        40% { height: 100%; }
        100% { height: 100%; opacity: 0; }
      }

      @keyframes bottomLine {
        0%,40% { width: 0; }
        60% { width: 100%; }
        100% { width: 100%; opacity: 0; }
      }

      @keyframes leftLine {
        0%,60% { height: 0; }
        80% { height: 100%; }
        100% { height: 100%; opacity: 0; }
      }



      /* Info section */
      .info {
        padding:34px 24px;
        margin-top:24px;
        border-radius:10px;
      }
      .info-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
      .info-card {background:#003674; padding:14px; border-radius:8px; min-height:100px;}
      .info-card h4 {font-size:15px; margin-bottom:8px; color: gold; font-weight: 700;}
      .info-card p {font-size:13px; color:#cbe6ef;}


      /* Course modality / breakdown */
      .breakdown {
        background: #0271CD;
        color: #e6fff7;
        padding: 60px 20px;
        text-align: center;

        /* V-shaped bottom with inner curves at corners */
        clip-path: polygon(
          0 0,      /* top left */
          8.5% 100%, /* left inner curve */
          50% 80%,  /* middle point */
          91.5% 100%, /* right inner curve */
          100% 0    /* top right */
        );
      }

      .btn-breakdown{
        background-color: white;
        color: #10A15E;
      }

      .btn-breakdown:hover{
        background-color: #10A15E;
        color: white;
      }

      
      .breakdown-inner {max-width:900px; margin:0 auto; text-align:center;}
      .breakdown h3 {font-size:24px; margin-bottom:12px;}
      .breakdown p {max-width:760px; margin:0 auto 18px;}

      /* Mentor section */
      .mentor {
        display:flex; 
        gap:20px; 
        padding:36px 0 0px 0;
        border-bottom:4px solid #10A15E;

      }
      .mentor .bio {
        flex:1;
      }
      .mentor .bio h1 {
        color: gold; 
        margin-bottom:8px;
      }
      .mentor .bio p {
        color:#d9eef0; 
        font-size:14px;
      }
      .mentor .photo {
        width:45%; 
        overflow:hidden; 
      }

      .mentor .photo img {
        width:90%; 
        justify-content: end;
      }


      /* Curriculum / grid */
      .curriculum {
        background:#10A15E; 
        margin-top:18px; 
        border-radius:8px;
        width: 83%;

      }
      .curr-grid {
        display:grid; 
        grid-template-columns:repeat(3,1fr); 
        gap:12px;
      }
      .curr-card {background:#04121a; padding:14px; border-radius:8px; min-height:140px;}
      .curr-card h4 {color: gold; margin-bottom:8px;}


      /* get-together */
      .get-together{
        background:#0271CD; 
        margin-top:50px; 
        border-radius:8px;
        max-width: 83%;
      }

    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 10px;
    }

    .video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
    }



      /* Before/after / reasons */
      .reasons {
        padding:30px 14px; 
        margin-top:18px; 
        text-align:center;
      }
      .reason-grid {
        display:grid;
        grid-template-columns:repeat(2,1fr); 
        gap:18px; 
        max-width:98%; 
        margin:12px auto 0;
      }

      /* FAQ  */
        .faq{
        padding:28px 14px;
        margin-top:18px;
        border-radius:8px;
        background:#10A15E;
        color:#fff;
        }

        .faq-item{
        border-bottom:2px dashed rgb(0, 48, 6);
        }

        /* Hide checkbox */
        .faq-item input{
        display:none;
        }

        .faq-item label{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:12px 0;
        cursor:pointer;
        font-weight:600;
        }

        /* Plus / minus icon */
        .faq-item .icon{
        font-size:20px;
        transition:transform .3s ease;
        }

        /* Content hidden */
        .faq-content{
        max-height:0;
        overflow:hidden;
        font-size:14px;
        line-height:1.6;
        color:#cde8f1;
        transition:max-height .4s ease, padding .3s ease;
        }

        /* Open state */
        .faq-item input:checked ~ .faq-content{
        max-height:200px;
        padding-bottom:12px;
        }

        .faq-item input:checked + label .icon{
        transform:rotate(45deg);
        }



      /* Footer / order */
      footer {padding:28px 14px; text-align:center; margin-top:22px; color:#bcdfe3;}
      .order-box {background:#0b3440; padding:16px; border-radius:10px; display:inline-block; margin-top:12px;}

      .enrol-button{
          text-align: center;
      }

      /* Button style */
      .enrol-button .btn{
          padding: 14px 36px;
          font-size: 18px;
          font-weight: 600;
          border: 2px solid #0271CD;
          color: #ffffff;
          background: transparent;
          border-radius: 50px;
          animation: orderPulse 1.6s infinite;
          transition: all 0.3s ease;
      }

      /* Hover effect */
      .enrol-button .btn:hover{
          background: #0271CD;
          color: #fff;
      }


      /* Base Styles (you already have them) */
      .coruse-for {
        background: #10A15E;
        color: #e6fff7; 
        padding:40px 20px; 
        margin-top:28px;
      }

      .tab-wrapper{
        background:#0b1324;
        padding:20px;
        border-radius:10px;
        color:#fff;
        margin: 0 85px; /* will adjust in media queries */
      }

      .tabs{
        display:flex;
        gap:10px;
        margin-bottom:20px;
        justify-content: center;
        flex-wrap: wrap; /* allow wrapping on small screens */
      }

      .tab-btn{
        padding:10px 18px;
        border:none;
        cursor:pointer;
        font-weight:600;
        border-radius:4px;
        background:#10A15E;
        color:#000;
        flex: 1; /* make buttons stretch evenly */
        min-width: 120px; /* optional minimum width */
      }

      .tab-btn.active{
        background:#0271CD;
        color:#fff;
      }

      .tab-content{
        display:none;
      }

      .tab-content.active{
        display:block;
      }

      .tab-content ul{
        padding-left:20px;
      }

      .tab-content li{
        margin-bottom:8px;
      }

      /* Responsive: Tablets (768px) */
      @media (max-width: 1024px) {
        .tab-wrapper {
          margin: 0 40px; /* reduce side margin */
        }
      }

      /* Responsive: Mobile (480px) */
      @media (max-width: 768px) {
        .tab-wrapper {
          margin: 0 5px; /* smaller margin */
          padding: 15px;
        }

        .tabs {
          flex-direction: row; /* stack buttons vertically */
          gap: 10px;
        }

        .tab-btn {
          width: 100%; /* full width buttons */
          min-width: unset;
        }
      }


    
    /* Animation */
    @keyframes orderPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(13,110,253,0.6);
        }
        70% {
            transform: scale(1.08);
            box-shadow: 0 0 0 18px rgba(13,110,253,0);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(13,110,253,0);
        }
    }

    /* Responsive */
    @media (max-width:900px) {
      .hero-inner {flex-direction:column; align-items:flex-start;}
      .hero-right {width:100%;}
      .info-grid {grid-template-columns:repeat(2,1fr);}
      .curr-grid {grid-template-columns:1fr;}
      .mentor {flex-direction:column; align-items:center;}
      .breakdown-inner {padding:0 12px;}
    }
    @media (max-width:780px) {
        .top-fixed-banner .banner-left, .top-fixed-banner .banner-right {
            font-size:16px;
        }
        
    .hero .hero-inner{
        justify-content:center;
        align-items:center;
    }
      .hero-title {
        font-size:26px;
        text-align: center;
      }
      .hero-left {flex:1; max-width:100%;}

      .hero-right {
        max-width:100%; 
      }

      .hero-right .portrait img{
        margin: 0 auto;
      }


      .hero-meta {
        text-align: center;
        justify-content: center;
      }
      .hero-sub {
        text-align: center;
      }
      .cta-row {
        display:flex; 
        gap:12px; 
        margin-bottom:20px;
        justify-content: center;
      }
      
      .breakdown-inner p{
          padding:30px;
      }

      .mentor .photo, .mentor .bio {
        width:100%; 
        justify-content: center;
      }

      .mentor .bio a{ 
        justify-content: center;
        align-items: center;
        text-align: center;

      }

      .mentor .enroll-btn-border{
        text-align: center;
        margin-bottom:20px;
      }

      .curriculum {
        width: 90%;
      }

      .reasons{
        width: 98%;
      }

      .reason-grid {
        display:grid;
        grid-template-columns:repeat(1,1fr); 
        gap:18px; 
        max-width:98%; 
        margin:12px auto 0;
      }

      .get-together{
        max-width: 90%;
      }

    }


/* button-border-animation */
.btn-border-animate{
  position:relative;
  padding:12px 28px;
  color:#fff;
  text-decoration:none;
  background:transparent;
  border:none;
  border-radius:30px;
  overflow:hidden;
}

/* Base outline */
.btn-border-animate::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(255,255,255,0.25);
  border-radius:inherit;
}

/* Animated border */
.btn-border-animate::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid #fff;
  border-radius:inherit;
  clip-path: inset(0 100% 0 0);
  animation: drawBorder 2.5s linear infinite;
}

@keyframes drawBorder{
  0%{
    clip-path: inset(0 100% 0 0);
  }
  25%{
    clip-path: inset(0 0 100% 0);
  }
  50%{
    clip-path: inset(0 0 0 100%);
  }
  75%{
    clip-path: inset(100% 0 0 0);
  }
  100%{
    clip-path: inset(0 100% 0 0);
  }
}