/* ================= ROOT VARIABLES ================= */
         :root{
         --primary:#1abc9c;
         --secondary:#3498db;
         --dark:#2c3e50;
         --bg:#f6f9fc;
         --light:#ffffff;
         --accent:#f1c40f;
         }
         /* ================= GLOBAL ================= */
         body{
         font-family:'Segoe UI',sans-serif;
         background:var(--bg);
         color:var(--dark);
         scroll-behavior:smooth;
         }
         a{
         text-decoration:none;
         transition:all .3s ease;
         }

         /* Donation modal responsiveness */
         #donateModal .modal-dialog {
            max-width: 980px;
         }

         #donateModal .random-sponsors .card {
            min-height: 100%;
         }

         #donateModal .random-sponsors img {
            width: 100%;
            height: 170px;
            object-fit: cover;
         }

         #donateModal .donate-amount {
            min-width: 90px;
         }

         @media (max-width: 992px) {
            #donateModal .modal-dialog {
               max-width: 100%;
            }
            #donateModal .donate-amount {
               width: calc(50% - 0.75rem);
            }
         }

         @media (max-width: 768px) {
            #donateModal .thermometer {
               max-width: 220px;
            }
            #donateModal .random-sponsors .card-body {
               padding: 0.75rem;
            }
         }
      
         /* ================= HERO SECTION ================= */
         .hero-content{
         max-width:700px;
         margin:auto;
         }
         .hero-slider .carousel-item{
         height:85vh;
         position:relative;
         }
         .hero-img{
         width:100%;
         height:100%;
         object-fit:cover;
         }
         /* Overlay */
         .hero-slider .carousel-item::before{
         content:"";
         position:absolute;
         inset:0;
         background:rgba(0,0,0,0.45);
         z-index:1;
         }
         .hero-slider .carousel-caption{
         z-index:2;
         }
         /* Buttons */
         .hero-buttons{
         display:flex;
         justify-content:center;
         gap:15px;
         flex-wrap:wrap;
         margin-top:20px;
         }
         /* ===== LEADERSHIP TEAM ===== */
         .leadership-img{
         height:260px;
         object-fit:cover;
         border-top-left-radius:15px;
         border-top-right-radius:15px;
         }
         .leadership-card{
         border-radius:15px;
         transition:all .4s ease;
         overflow:hidden;
         }
         .leadership-card:hover{
         transform:translateY(-10px);
         box-shadow:0 15px 35px rgba(0,0,0,0.2);
         }
         .leadership-social a{
         color:#555;
         margin:0 8px;
         font-size:18px;
         transition:all .3s ease;
         }
         .leadership-social a:hover{
         color:var(--primary);
         transform:scale(1.2);
         }
         /* ================= CARDS ================= */
         .card,
         .category-box,
         .blog-card{
         border-radius:15px;
         opacity:0;
         transform:translateY(20px);
         transition:all .6s ease;
         }
         .card.show,
         .category-box.show,
         .blog-card.show{
         opacity:1;
         transform:translateY(0);
         }
         .card:hover,
         .category-box:hover,
         .blog-card:hover{
         transform:translateY(-8px) scale(1.03);
         box-shadow:0 12px 35px rgba(0,0,0,.15);
         }
         .course-rating{
         color:var(--accent);
         }
         /* Category Box */
         .category-box{
         background:var(--light);
         padding:30px;
         text-align:center;
         cursor:pointer;
         }
         /* ================= NEWSLETTER ================= */
         .newsletter{
         background:var(--secondary);
         color:white;
         padding:60px 20px;
         text-align:center;
         }
         .newsletter input{
         max-width:400px;
         margin-right:10px;
         }
         /* ================= VIDEO SECTION ================= */
         .video-section{
         background:linear-gradient(135deg,#1abc9c,#3498db);
         color:white;
         }
         .video-thumbnail{
         position:relative;
         border-radius:15px;
         overflow:hidden;
         cursor:pointer;
         }
         .video-thumbnail img{
         width:100%;
         transition:transform .5s ease;
         }
         .video-thumbnail:hover img{
         transform:scale(1.05);
         }
         /* Play Button */
         .play-btn{
         position:absolute;
         top:50%;
         left:50%;
         transform:translate(-50%,-50%);
         width:80px;
         height:80px;
         background:white;
         color:var(--secondary);
         border-radius:50%;
         display:flex;
         align-items:center;
         justify-content:center;
         font-size:30px;
         box-shadow:0 10px 30px rgba(0,0,0,.3);
         animation:pulse 2s infinite;
         }
         @keyframes pulse{
         0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}
         70%{box-shadow:0 0 0 25px rgba(255,255,255,0);}
         100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
         }
         /* ================= FAQ ================= */
         .accordion-button{
         transition:all .3s ease;
         }
         .accordion-button:not(.collapsed):hover{
         transform:scale(1.02);
         }
         /* ================= BUTTON EFFECT ================= */
         .btn:hover{
         transform:translateY(-3px) scale(1.05);
         transition:transform .3s ease;
         }
         /* ================= FULL GALLERY STYLES ================= */
         .gallery-item {
         position: relative;
         overflow: hidden;
         border-radius: 15px;
         cursor: pointer;
         opacity: 0;
         transform: translateY(20px);
         transition: all 0.6s ease;
         }
         .gallery-item.show {
         opacity: 1;
         transform: translateY(0) scale(1);
         }
         .gallery-img {
         width: 100%;
         display: block;
         transition: transform .5s ease;
         }
         .gallery-item:hover .gallery-img {
         transform: scale(1.1);
         }
         /* TEXT OVERLAY ON IMAGE */
         .gallery-text{
         position:absolute;
         bottom:0;
         left:0;
         right:0;
         background:rgba(0,0,0,0.6);
         color:#fff;
         padding:12px;
         font-size:1.2rem;
         text-align:center;
         opacity:0;
         transform:translateY(20px);
         transition:all .4s ease;
         border-bottom-left-radius:15px;
         border-bottom-right-radius:15px;
         z-index:2;
         }
         /* SHOW TEXT ONLY ON HOVER */
         .gallery-item:hover .gallery-text{
         opacity:1;
         transform:translateY(0);
         }
         .gallery-item:hover .gallery-text,
         .gallery-item.show .gallery-text {
         opacity: 1;
         transform: translateY(0);
         }
         /* FILTER BUTTON ACTIVE STATE */
         .filter-btn.active {
         background-color: var(--primary);
         color: white;
         }
         /* ================= COUNTER ================= */
         .counter{
         font-size:2.5rem;
         font-weight:700;
         }
         /* ================= FLOAT BUTTON ================= */
         #courses-trigger{
         position:fixed;
         bottom:25px;
         right:25px;
         display:none;
         z-index:1000;
         transition:all .4s ease;
         }
         /* ================= FOOTER START================= */
         /* ===========================
         FOOTER BASE
         =========================== */
         .footer {
         background: linear-gradient(135deg,#1a2a3a,#1abc9c);
         color: #fff;
         position: relative;
         overflow: hidden;
         padding-bottom: 50px;
         }
         /* VERTICAL DIVIDER */
         @media(min-width:768px){
         .border-md-end {
         position: relative;
         }
         .border-md-end::after {
         content: "";
         position: absolute;
         right: 0;
         top: 0;
         height: 100%;
         width: 2px; /* base width */
         border-radius: 2px;
         background: linear-gradient(
         to bottom,
         transparent 0%,
         rgba(26, 188, 156, 0.6) 30%,
         rgba(26, 188, 156, 1) 50%,
         rgba(26, 188, 156, 0.6) 70%,
         transparent 100%
         );
         box-shadow: 0 0 5px #1abc9c, 0 0 15px #1abc9c;
         animation: neonScan 3s linear infinite, neonPulse 1.5s ease-in-out infinite alternate;
         }
         }
         /* Scanning movement down the column */
         @keyframes neonScan {
         0% { transform: translateY(-100%); opacity: 0.4; }
         50% { transform: translateY(50%); opacity: 1; }
         100% { transform: translateY(100%); opacity: 0.4; }
         }
         /* Pulsing width & glow intensity for futuristic effect */
         @keyframes neonPulse {
         0% { width: 2px; box-shadow: 0 0 5px #1abc9c, 0 0 15px #1abc9c; }
         50% { width: 3px; box-shadow: 0 0 10px #1abc9c, 0 0 25px #1abc9c; }
         100% { width: 2px; box-shadow: 0 0 5px #1abc9c, 0 0 15px #1abc9c; }
         }
         /* FOOTER COLUMNS */
         .footer-col {
         background: rgba(255,255,255,0.02);
         border-radius: 15px;
         padding: 25px;
         backdrop-filter: blur(10px);
         transition: all 0.4s ease;
         }
         .footer-col:hover {
         transform: translateY(-6px) scale(1.02);
         background: rgba(255,255,255,0.08);
         }
         /* SOCIAL ICONS */
         .social-icons a {
         display: inline-flex;
         width: 42px; height: 42px;
         align-items: center; justify-content: center;
         border-radius: 50%; margin-right: 8px;
         background: rgba(255,255,255,0.1);
         color: #fff; text-decoration: none;
         transition: all 0.3s ease;
         }
         .social-icons a:hover {
         background: #1abc9c; transform: scale(1.2);
         box-shadow: 0 0 15px #1abc9c;
         }
         /* LINKS */
         .footer-links a {
         display: block; padding: 6px 0;
         color: #fff; text-decoration: none;
         transition: 0.3s;
         }
         .footer-links a:hover { color: #ffd166; transform: translateX(6px); }
         /* NEWSLETTER */
         .newsletter-form {
         display: flex; border-radius: 30px;
         overflow: hidden; background: rgba(255,255,255,0.1);
         }
         .newsletter-form input {
         flex:1; border:none; padding:10px 15px;
         background:transparent; color:#fff;
         }
         .newsletter-form button {
         border:none; padding:10px 20px;
         background:#1abc9c; color:#fff; cursor:pointer;
         transition:0.3s;
         }
         .newsletter-form button:hover { background:#16a085; }
         /* LANGUAGE SWITCHER */
         .language-switcher select {
         border-radius:15px; border:none;
         padding:5px 10px; background:rgba(255,255,255,0.1);
         color:#fff;
         }
         /* ===========================
         PARTICLES & BUBBLES
         =========================== */
         /* Background particles behind content */
         .particles::before,
         .particles::after {
         content:"";
         position:absolute;
         width:200%; height:200%;
         background-image: radial-gradient(#ffffff22 1px, transparent 1px);
         background-size: 50px 50px;
         animation: moveParticles 30s linear infinite;
         z-index:1;  /* behind footer content */
         }
         /* Floating bubbles on top of everything */
         .bubbles {
         position:absolute; /* or fixed if you want it above entire viewport */
         top:0; left:0;
         width:100%; height:100%;
         pointer-events:none;
         z-index:999999; /* extremely high to float above all */
         transform: translateZ(0);
         }
         /* Individual bubble floats */
         .bubbles span {
         position:absolute;
         display:flex; align-items:center; justify-content:center;
         width:40px; height:40px;
         font-size:1.2rem;
         color: rgba(255,255,255,0.3);
         pointer-events:none;
         animation: floatBubble linear infinite;
         z-index:100000;
         }
         /* Randomized bubbles (nth-child) */
         .bubbles span:nth-child(1){ left:5%; animation-duration:25s; animation-delay:0s; }
         .bubbles span:nth-child(2){ left:20%; animation-duration:28s; animation-delay:3s; }
         .bubbles span:nth-child(3){ left:40%; animation-duration:30s; animation-delay:1s; }
         .bubbles span:nth-child(4){ left:60%; animation-duration:27s; animation-delay:5s; }
         .bubbles span:nth-child(5){ left:80%; animation-duration:32s; animation-delay:2s; }
         .bubbles span:nth-child(6){ left:90%; animation-duration:26s; animation-delay:4s; }
         /* Floating animation */
         @keyframes floatBubble {
         0%   { transform: translateY(100%) translateX(0) rotate(0deg); opacity:0; }
         10%  { opacity:0.3; }
         50%  { transform: translateY(50%) translateX(20px) rotate(180deg); opacity:0.5; }
         90%  { opacity:0.3; }
         100% { transform: translateY(-100%) translateX(-10px) rotate(360deg); opacity:0; }
         }
         /* Particle movement behind */
         @keyframes moveParticles {
         0%   { transform: translateY(0) translateX(0); }
         50%  { transform: translateY(-120px) translateX(60px); }
         100% { transform: translateY(-240px) translateX(0); }
         }
         /* Map iframe below bubbles */
         .footer iframe { position:relative; z-index:1; }
         /* RESPONSIVE */
         @media(max-width:768px){
         .footer { text-align:center; }
         .footer-col:hover { transform:none; }
         .border-md-end::after { display:none; }
         }
         /* Scroll button start here */
         #scrollTopBtn {
         position: fixed;
         bottom: 150px;
         right: 40px;
         z-index: 9999;
         background: linear-gradient(135deg, #0dcaf0, #0b7285);
         color: white;
         border: none;
         outline: none;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         font-size: 20px;
         cursor: pointer;
         /* Hidden by default (but still in DOM) */
         opacity: 0;
         visibility: hidden;
         box-shadow: 0 4px 15px rgba(0,0,0,0.3);
         transition: 
         opacity 0.4s ease, 
         visibility 0.4s ease, 
         transform 0.3s ease, 
         box-shadow 0.3s ease, 
         background-color 0.3s ease;
         transform: translateY(20px) scale(0.9);
         /* Floating animation */
         animation: float 3s ease-in-out infinite;
         }
         /* When visible */
         #scrollTopBtn.show {
         opacity: 1;
         visibility: visible;
         transform: translateY(0) scale(1);
         }
         /* Hover effect */
         #scrollTopBtn:hover {
         transform: scale(1.2) rotate(10deg);
         box-shadow: 0 8px 25px rgba(0,0,0,0.5);
         background: linear-gradient(135deg, #0bf, #06a);
         animation-play-state: paused;
         }
         /* Icon animation */
         #scrollTopBtn i {
         transition: transform 0.3s;
         }
         #scrollTopBtn:hover i {
         transform: translateY(-4px) rotate(-10deg);
         }
         /* Floating animation */
         @keyframes float {
         0%, 100% { transform: translateY(0) scale(1); }
         50% { transform: translateY(-8px) scale(1.02); }
         }
         /* ================= FOOTER ENDS================= */
         /* ================= MOBILE ================= */
         @media(max-width:768px){
         .hero-slider .carousel-item{
         height:75vh;
         }
         .hero-slider h1{
         font-size:1.9rem;
         line-height:1.3;
         }
         .hero-slider p{
         font-size:1rem;
         }
         .hero-buttons{
         flex-direction:column;
         align-items:center;
         }
         .hero-buttons .btn{
         width:100%;
         max-width:280px;
         }
         }
         /* Donation css start here  */
         /* PROGRESS BAR ANIMATION */
         .progress-bar{
         transition: width 1s ease-in-out;
         font-weight:600;
         }
         /* THERMOMETER */
         .thermometer-container{
         display:flex;
         flex-direction:column;
         align-items:center;
         }
         .thermometer{
         width:30px;
         height:200px;
         border-radius:20px;
         background:#eee;
         position:relative;
         overflow:hidden;
         border:3px solid #ccc;
         }
         #thermometerFill{
         position:absolute;
         bottom:0;
         width:100%;
         height:25%;
         background:linear-gradient(to top,#27ae60,#2ecc71);
         transition:height 1s ease;
         }
         .thermometer-bulb{
         width:50px;
         height:50px;
         background:#27ae60;
         border-radius:50%;
         margin-top:-5px;
         }
         /* Donation css ends here  */
         /* START LEARNING BUTTON EFFECT START*/
         /* PREMIUM START LEARNING BUTTON */
         .start-learning-btn{
         background:linear-gradient(135deg,#1abc9c,#3498db);
         color:white;
         border:none;
         border-radius:50px;
         font-weight:600;
         position:relative;
         overflow:hidden;
         transition:all .3s ease;
         }
         /* Glow */
         .start-learning-btn:hover{
         transform:translateY(-4px) scale(1.05);
         box-shadow:0 15px 40px rgba(0,0,0,0.4),
         0 0 20px rgba(26,188,156,0.7),
         0 0 40px rgba(52,152,219,0.5);
         }
         /* Icon animation */
         .start-learning-btn i{
         transition:all .3s ease;
         }
         .start-learning-btn:hover i{
         transform:translateX(5px) scale(1.2);
         }
         /* Shine effect */
         .start-learning-btn::before{
         content:"";
         position:absolute;
         top:0;
         left:-75%;
         width:50%;
         height:100%;
         background:linear-gradient(
         120deg,
         transparent,
         rgba(255,255,255,0.5),
         transparent
         );
         transform:skewX(-25deg);
         }
         .start-learning-btn:hover::before{
         animation:shine 1s;
         }
         @keyframes shine{
         100%{
         left:125%;
         }
         }
         /* BOUNCING ICON */
         .bounce-icon{
         display:inline-block;
         animation:bounceIcon 1.5s infinite;
         }
         @keyframes bounceIcon{
         0%,20%,50%,80%,100%{
         transform:translateY(0);
         }
         40%{
         transform:translateY(-8px);
         }
         60%{
         transform:translateY(-4px);
         }
         }
         /* START LEARNING BUTTON EFFECT ENDS*/
         /* KINGSTAR INTRO LOADER ================================= */
         #logo-loader{
         position:fixed;
         top:0;
         left:0;
         width:100%;
         height:100%;
         background:linear-gradient(135deg,#0a2342,#001233);
         display:flex;
         align-items:center;
         justify-content:center;
         z-index:9999;
         transition:opacity .7s ease, visibility .7s ease;
         }
         #logo-loader.hide{
         opacity:0;
         visibility:hidden;
         }
         .logo-container{
         text-align:center;
         position:relative;
         animation:fadeUp 1.5s ease;
         border-radius: 10px; /* Add this for rounded corners */
         overflow: hidden;    /* Important to clip shine effect */
         }
         .intro-logo{
         width:400px;
         animation:floatLogo 3s ease-in-out infinite;
         /* optional: border-radius on image itself */
         border-radius: 10px;
         }
         /* SHINE EFFECT */
         .shine{
         position:absolute;
         top:0;
         left:-75%;
         width:50%;
         height:100%;
         background:linear-gradient(
         120deg,
         transparent,
         rgba(255,255,255,0.6),
         transparent
         );
         transform:skewX(-25deg);
         animation:shineMove 3s infinite;
         }
         /* TEXT */
         .school-name{
         color:#ffffff;
         margin-top:20px;
         font-weight:700;
         letter-spacing:1px;
         }
         .tagline{
         color:#cbd5e1;
         font-size:14px;
         }
         /* FLOATING LOGO */
         @keyframes floatLogo{
         0%{transform:translateY(0);}
         50%{transform:translateY(-10px);}
         100%{transform:translateY(0);}
         }
         /* SHINE ANIMATION */
         @keyframes shineMove{
         0%{left:-75%;}
         100%{left:125%;}
         }
         /* FADE UP */
         @keyframes fadeUp{
         from{
         opacity:0;
         transform:translateY(30px);
         }
         to{
         opacity:1;
         transform:translateY(0);
         }
         }
         /* Kingstar logo intro ends here */
         /* Website logo start here  */
         .navbar-brand img {
            height: 50px;
            width: auto;
            border-radius: 6px;
            margin-right: 10px;
            transition: box-shadow 0.3s ease;
            }

            .navbar-brand img:hover {
            animation: bounceScale 0.4s ease forwards; /* keep final state */
            transform: scale(1.2); /* ensures size stays increased */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 
                        0 0 10px rgba(255, 255, 255, 0.6);
               height: 400px;
               width: 500px;
            }

            @keyframes bounceScale {
            0%   { transform: scale(1); }
            50%  { transform: scale(1.35); } /* slightly bigger bounce */
            70%  { transform: scale(1.15); }
            100% { transform: scale(1.2); }
            }
         /* Website logo start here  */
         /* PREMIUM ABOUT SECTION */
         /* FAITH SECTION */
         .faith-section{
         background:#ffffff;
         }
         /* CARD */
         .faith-card{
         border-radius:20px;
         transition:all .5s ease;
         }
         .faith-card:hover{
         transform:translateY(-5px);
         box-shadow:0 20px 40px rgba(0,0,0,0.2);
         }
         /* IMAGE */
         .faith-img{
         overflow:hidden;
         }
         .faith-img img{
         height:100%;
         min-height:350px;
         object-fit:cover;
         transition:transform .8s ease;
         }
         /* IMAGE ZOOM HOVER */
         .faith-img:hover img{
         transform:scale(1.1);
         }
         /* BUTTON ON IMAGE */
         .image-modal-btn{
         position:absolute;
         bottom:25px;
         left:25px;
         border-radius:30px;
         font-weight:600;
         padding:10px 18px;
         box-shadow:0 10px 25px rgba(0,0,0,0.3);
         transition:all .3s ease;
         }
         .image-modal-btn:hover{
         background:#1abc9c;
         color:white;
         transform:translateY(-3px);
         }
         /* TEXT ANIMATION */
         .faith-text{
         opacity:0;
         transform:translateX(-40px);
         transition:all 1s ease;
         }
         .faith-text.show{
         opacity:1;
         transform:translateX(0);
         }
         /* About premium section ends here */
         /* BOUNCING EYE ICON */
         /* ZOOMING EYE ICON */
         .zoom-eye{
         display:inline-block;
         animation:zoomEye 1.5s infinite ease-in-out;
         }
         @keyframes zoomEye{
         0%,100%{
         transform:scale(1);
         }
         50%{
         transform:scale(1.3);
         }
         }
         /* Bouncing eye icon ends here */
         /* HANDWRITING EFFECT */
         .handwriting-text{
         font-family: "Courier New", monospace;
         letter-spacing: 1px;
         padding: 20px;
         border-radius: 10px;
         }
         .cursor{
         display:inline-block;
         animation: blink 0.9s infinite;
         }
         @keyframes blink{
         0%{opacity:1;}
         50%{opacity:0;}
         100%{opacity:1;}
         }
         /* Handwritting effect ends here */
         /* ---------- Navbar Scroll Effect start here---------- */
         /* ---------- Navbar Scroll Effect ---------- */
         .animated-navbar {
         transition: all 0.4s ease-in-out;
         }
         .animated-navbar.scrolled {
         background-color: #111;
         box-shadow: 0 4px 15px rgba(0,0,0,0.4);
         padding: 0.8rem 0; 
         }
         /* ---------- Logo Animation ---------- */
         .navbar-logo {
         width: 50px;
         transition: transform 0.3s ease-in-out;
         }
         .navbar-logo:hover {
         transform: rotate(15deg) scale(1.1);
         }
         /* ---------- Nav Link Hover ---------- */
         .nav-link-hover {
         position: relative;
         transition: color 0.3s ease;
         }
         .nav-link-hover::after {
         content: '';
         position: absolute;
         width: 0%;
         height: 2px;
         bottom: 0;
         left: 0;
         background-color: #0dcaf0;
         transition: width 0.3s ease-in-out;
         }
         .nav-link-hover:hover {
         color: #0dcaf0;
         }
         .nav-link-hover:hover::after {
         width: 100%;
         }
         /* ---------- Button Animation ---------- */
         .animated-btn {
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
         .animated-btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 20px rgba(0,0,0,0.3);
         }
         /* ---------- Hamburger Animation ---------- */
         .navbar-toggler-animated {
         border: none;
         background: transparent;
         position: relative;
         width: 30px;
         height: 25px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         cursor: pointer;
         transition: transform 0.3s ease;
         z-index: 1050;
         }
         .toggler-icon {
         display: block;
         height: 3px;
         width: 100%;
         background-color: #fff;
         border-radius: 2px;
         transition: all 0.3s ease;
         }
         .navbar-toggler-animated:not(.collapsed) span:nth-child(1) {
         transform: rotate(45deg) translate(5px, 5px);
         }
         .navbar-toggler-animated:not(.collapsed) span:nth-child(2) {
         opacity: 0;
         }
         .navbar-toggler-animated:not(.collapsed) span:nth-child(3) {
         transform: rotate(-45deg) translate(5px, -5px);
         }
         /* ---------- Mobile Menu Slide ---------- */
         @media (max-width: 991.98px) {
         .collapse.navbar-collapse {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.5s ease, opacity 0.5s ease;
         opacity: 0;
         }
         .collapse.navbar-collapse.show {
         max-height: 500px;
         opacity: 1;
         transition: max-height 0.5s ease, opacity 0.5s ease;
         }
         .collapse.navbar-collapse.show ul.navbar-nav {
         transform: translateY(0);
         transition: transform 0.5s ease;
         }
         .collapse.navbar-collapse ul.navbar-nav {
         transform: translateY(-20px);
         }
         /* Staggered animation */
         .collapse.navbar-collapse.show .nav-item {
         opacity: 0;
         transform: translateY(-20px);
         animation: slideFadeIn 0.4s forwards;
         }
         .collapse.navbar-collapse.show .nav-item:nth-child(1) { animation-delay: 0.05s; }
         .collapse.navbar-collapse.show .nav-item:nth-child(2) { animation-delay: 0.1s; }
         .collapse.navbar-collapse.show .nav-item:nth-child(3) { animation-delay: 0.15s; }
         .collapse.navbar-collapse.show .nav-item:nth-child(4) { animation-delay: 0.2s; }
         .collapse.navbar-collapse.show .nav-item:nth-child(5) { animation-delay: 0.25s; }
         .collapse.navbar-collapse.show .nav-item:nth-child(6) { animation-delay: 0.3s; }
         .collapse.navbar-collapse.show .nav-item:nth-child(7) { animation-delay: 0.35s; }
         }
         @keyframes slideFadeIn {
         to { opacity: 1; transform: translateY(0); }
         }
         /* ---------- Navbar Scroll Effect ends here---------- */
         /* buble css start here  */
         /* Bubble base */
         /* Footer base */
         .footer {
         position: relative;
         overflow: hidden;
         perspective: 1000px;
         }
         /* Keep content above bubbles */
         .footer .container {
         position: relative;
         z-index: 2;
         }
         /* Bubble container */
         .bubbles {
         position: absolute;
         width: 100%;
         height: 100%;
         transform-style: preserve-3d;
         z-index: 1;
         }
         /* Bubble style */
         .bubbles span {
         position: absolute;
         bottom: -80px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         cursor: pointer;
         background: radial-gradient(circle at 30% 30%, #ffffff, rgba(0,150,255,0.3));
         box-shadow:
         inset -5px -5px 15px rgba(0,0,0,0.2),
         inset 5px 5px 15px rgba(255,255,255,0.3),
         0 10px 25px rgba(0,150,255,0.4);
         animation: float3D linear infinite;
         }
         /* Icons */
         .bubbles span i {
         color: #003366;
         font-size: 14px;
         }
         /* Sizes + positions + depth */
         .bubbles span:nth-child(1) { left: 10%; width: 40px; height: 40px; animation-duration: 12s; }
         .bubbles span:nth-child(2) { left: 20%; width: 50px; height: 50px; animation-duration: 15s; }
         .bubbles span:nth-child(3) { left: 30%; width: 30px; height: 30px; animation-duration: 10s; }
         .bubbles span:nth-child(4) { left: 40%; width: 55px; height: 55px; animation-duration: 18s; }
         .bubbles span:nth-child(5) { left: 50%; width: 35px; height: 35px; animation-duration: 11s; }
         .bubbles span:nth-child(6) { left: 60%; width: 45px; height: 45px; animation-duration: 14s; }
         .bubbles span:nth-child(7) { left: 70%; width: 32px; height: 32px; animation-duration: 9s; }
         .bubbles span:nth-child(8) { left: 80%; width: 48px; height: 48px; animation-duration: 16s; }
         .bubbles span:nth-child(9) { left: 90%; width: 38px; height: 38px; animation-duration: 13s; }
         .bubbles span:nth-child(10){ left: 25%; width: 42px; height: 42px; animation-duration: 12s; }
         /* Floating animation */
         @keyframes float3D {
         0% {
         transform: translateY(0) scale(1);
         opacity: 0.8;
         }
         100% {
         transform: translateY(-1000px) scale(1.3);
         opacity: 0;
         }
         }
         /* Pop animation */
         .pop {
         animation: pop 0.4s forwards !important;
         }
         @keyframes pop {
         0% { transform: scale(1); opacity: 1; }
         50% { transform: scale(1.8); opacity: 0.5; }
         100% { transform: scale(0); opacity: 0; }
         }
         /* buble css ends here */
         /* Count up css start here  */
         /* Card base */
         .impact-card {
         position: relative;
         padding: 2px; /* needed for gradient border */
         border-radius: 12px;
         background: linear-gradient(white, white) padding-box,
         linear-gradient(45deg, var(--bs-primary), #6f42c1) border-box;
         border: 2px solid transparent;
         transition: all 0.4s ease;
         }
         /* Inner content fix (since we added padding trick) */
         /* .impact-card > * {
         background: blue;
         border-radius: 10px;
         } */
         /* Icon styling */
         .impact-card .icon i {
         font-size: 2.5rem;
         color: var(--bs-primary);
         transition: transform 0.4s ease, color 0.3s ease;
         }
         /* Counter styling */
         .counter {
         font-weight: bold;
         color: var(--bs-primary);
         transition: color 0.3s ease;
         }
         /* Hover effects */
         .impact-card:hover {
         transform: translateY(-10px) scale(1.02);
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
         }
         /* Icon animation on hover */
         .impact-card:hover .icon i {
         transform: scale(1.2) rotate(8deg);
         color: #6f42c1; /* secondary accent */
         }
         /* Counter color change */
         .impact-card:hover .counter {
         color: #6f42c1;
         }
         /* Optional pulse animation */
         @keyframes pulse {
         0% { transform: scale(1); }
         50% { transform: scale(1.1); }
         100% { transform: scale(1); }
         }
         /* Apply subtle pulse continuously */
         .impact-card .icon i {
         animation: pulse 2s infinite;
         }
         /* Count up css start here  */
         /* Instructor slide css start here  */
         /* Container hides overflow */
         .instructor-marquee {
         overflow: hidden;
         width: 100%;
         position: relative;
         }
         /* Track flex container for animation */
         .instructor-track {
         display: flex;
         gap: 1rem;
         animation: scroll-left 12s linear infinite;
         transform: translateZ(0);           /* GPU acceleration for clarity */
         backface-visibility: hidden;        /* prevents blurriness */
         will-change: transform;             /* hints browser to optimize */
         }
         /* Card sizing */
         .instructor-card {
            flex: 0 0 auto;
            min-width: 200px;
            max-width: 250px;
            display: flex;
            flex-direction: column;
            height: 100%;
            transform: translateZ(0); /* Ensures card content stays clear */
         }

         /* Uniform image sizing */
         .instructor-card .card-img-top {
            width: 100%;
            height: 260px;          /* Same height for every image */
            object-fit: cover;      /* Crop instead of stretching */
            object-position: top center;
            display: block;
         }

         /* Equal card body height */
         .instructor-card .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
         }

         /* Infinite scroll animation */
         @keyframes scroll-left {
            0% {
               transform: translateX(0);
            }
            100% {
               transform: translateX(-50%);
            }
         }

         /* Responsive adjustments */
         @media (max-width: 768px) {
            .instructor-card {
               min-width: 160px;
               max-width: 200px;
            }

            .instructor-card .card-img-top {
               height: 220px;
            }

            .instructor-track {
               gap: 0.75rem;
            }
         }

         @media (max-width: 480px) {
            .instructor-card {
               min-width: 140px;
               max-width: 180px;
            }

            .instructor-card .card-img-top {
               height: 180px;
            }

            .instructor-track {
               gap: 0.5rem;
            }
         }
         /* Instructor slide css start here  */
         /* Form switch css start from here  */
         .form-container { display:none; opacity:0; transition: opacity 0.5s ease; }
         .form-container.active-form { display:block; opacity:1; }
         .input-error { border-color:#dc3545 !important; }
         .input-valid { border-color:#28a745 !important; }
         .progress-bar.strength-weak { background-color:#dc3545 !important; }
         .progress-bar.strength-medium { background-color:#fd7e14 !important; }
         .progress-bar.strength-strong { background-color:#28a745 !important; }
         .strength-text { font-size:0.85rem; font-weight:500; margin-bottom:2px; }
         /* Like/Unlike css */
         .image-wrapper{position:relative;cursor:pointer;}

            .heart-overlay{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%) scale(0);
            font-size:60px;
            opacity:0;
            transition:.3s;
            }

            .heart-overlay.show{
            transform:translate(-50%,-50%) scale(1.2);
            opacity:1;
            }
            .related-img {
            height: 220px;          /* adjust height as needed */
            object-fit: cover;
            width: 100%;
        }
        .toast-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -30px);

    min-width: 320px;
    max-width: 500px;

    padding: 14px 22px;
    border-radius: 10px;

    color: #fff;
    font-weight: 600;
    text-align: center;

    opacity: 0;
    transition: all 0.3s ease;

    z-index: 99999;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

    /* Default background (success) */
    background: #28a745;
}

/* Show animation */
      .toast-message.show {
         opacity: 1;
         transform: translate(-50%, 0);
      }

      /* Success */
      .toast-message.success {
         background: #198754;
      }

      /* Error */
      .toast-message.error {
         background: #dc3545;
      }

      /* Warning */
      .toast-message.warning {
         background: #fd7e14;
      }

      /* Info */
      .toast-message.info {
         background: #0d6efd;
      }

      /* Progress bar */
      .progress-bar {
         transition: width 0.3s;
      }
        #pageLoader {
         position: fixed;
         inset: 0;
         background: rgba(0,0,0,0.65);
         display: none;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         z-index: 99999;
         color: white;
         font-size: 18px;
      }

      .loader-circle {
         width: 55px;
         height: 55px;
         border: 6px solid #fff;
         border-top-color: transparent;
         border-radius: 50%;
         animation: spin 0.8s linear infinite;
         margin-bottom: 15px;
      }

      @keyframes spin {
         to {
            transform: rotate(360deg);
         }
      }