/* Global reset */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, sans-serif;
}

/* Ensure the mobile menu system is consistent and doesn't get overridden (MOBILE ONLY) */
/* NOTE: Mobile menu is handled by the single stable block below. */
@media (max-width: 768px) {
  .nav-links{ display:none !important; }
  .menu-toggle{ display:block !important; }
}



/* ===============================
   Mobile drawer + overlay (single stable implementation)
   =============================== */
@media (max-width: 768px) {

  /* Mobile: single authoritative drawer + overlay + scroll lock */
  .nav-links{ display:none !important; }
  .menu-toggle{ display:block !important; }

  /* Drawer */
  #mobileMenu{
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    max-width: 90vw;
    background: linear-gradient(90deg, #a18902, #f1d60a, #9c8a05);
    z-index: 1000;
    padding: 80px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: -5px 0 25px rgba(0,0,0,0.4);
    overflow-y: auto;

    /* animation state */
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  #mobileMenu.active{ transform: translateX(0); }

  /* Overlay */
  .menu-overlay{
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .menu-overlay.active{
    opacity: 1;
    visibility: visible;
  }

  /* Scroll lock */
  body.menu-open{ overflow: hidden; }

  /* Ensure clickable/tappable drawer items */
  #mobileMenu a,
  #mobileMenu summary{
    pointer-events: auto;
  }
}






/* Full Width Banner */
.top-banner{
    width:100%;
    height: 600px;
    cursor:pointer;
    overflow:hidden;
}

.top-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.contact-bar{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 14px;
    padding:18px 25px;
    flex-wrap:wrap;
}

.contact-card{
    display:flex;
    align-items:right;
    gap: 14px;
    background:transparent;
    padding:20px 25px;
    min-width:auto;
    box-shadow:none;
    transform:none;
}

.contact-card:hover{
    transform:translateY(-2px);
}

.contact-card i{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#ffffff;
    color:#ffffff;
    display:flex;
    align-items:right;
    justify-content:right;
    font-size:22px;
    box-shadow:0 6px 15px rgba(0,0,0,0.18);
}

.contact-card h3{
    margin:0;
    font-size:15px;
    color:#000000;
    font-weight:600;
    letter-spacing:0.5px;
}

.contact-card p{
    margin:2px 0 0;
    font-size:19px;
    color:#000000;
    font-weight:700;
}
/* Navbar - Clean Responsive */
.menu-bar {
    width: 100%;
    background: linear-gradient(90deg, #a18902, #f1d60a, #9c8a05);
    padding: 15px 25px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.18);
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-logo {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
}

.nav-links {
    list-style: none;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.nav-links li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 8px;
    transition: 0.3s ease;
    white-space: nowrap;
}

.nav-links li a:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-3px);
}

/* Dropdown */
.avr-drop {
    position: relative;
}

.avr-drop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(90deg, #a18902, #f1d60a);
    min-width: 220px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 1000;
}

.avr-drop:hover .avr-drop-menu {
    display: block;
}

.avr-drop-menu a {
    display: block;
    padding: 12px 16px;
    color: #ffffff !important;
}

.avr-drop-menu a:hover {
    background: rgba(255,255,255,0.2);
}

/* Mobile Toggle */
/* 3 Dots Mobile Toggle - Single Clean Dot */
.menu-toggle {
    display: none;
    color: #ffffff;
    font-size: 32px;
    cursor: pointer;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 8px;
    padding: 12px;
    z-index: 1001;
    transition: all 0.3s ease;
    line-height: 1;
}

.menu-toggle:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Mobile Menu */
#mobileMenu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    max-width: 90vw;
    background: linear-gradient(90deg, #a18902, #f1d60a, #9c8a05);
    z-index: 1000;
    padding: 80px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: -5px 0 25px rgba(0,0,0,0.4);
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
}

#mobileMenu.active {
    transform: translateX(0);
}

/* Mobile overlay must be active for drawer state */
.menu-overlay.active{ display:block; }

.close-btn {

    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #ffffff;
    cursor: pointer;
    z-index: 1002;
    padding: 5px;
    border-radius: 50%;
    transition: 0.3s;
}

.close-btn:hover {
    background: rgba(255,255,255,0.2);
}

#mobileMenu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    padding: 15px;
    border-radius: 8px;
    transition: 0.3s;
}

#mobileMenu a:hover {
    background: rgba(255,255,255,0.2);
    padding-left: 25px;
}

/* Overlay / Scroll lock are defined in the single stable mobile block at the top of this file.
   This old conflicting block is removed to avoid CSS conflicts on mobile. */

/* Force-match drawer system for mobile (REMOVE duplicate to avoid conflicts) */


.menu-bar {

    width:100%;
    background:linear-gradient(90deg,#a18902,#f1d60a,#9c8a05);
    padding:15px 20px;
    box-shadow:0 6px 15px rgba(0,0,0,0.18);
    position:sticky;
    top:0;
    z-index:999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-logo {
    color:#ffffff;
    font-size:22px;
    font-weight:800;
    flex-shrink: 0;
}

.menu-bar ul.nav-links {
    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin:0;
    padding:0;
    flex: 1;
    max-width: 70%;
}

.menu-bar ul li a{
    text-decoration:none;
    color:#ffffff;
    font-size:17px;
    font-weight:700;
    padding:10px 16px;
    border-radius:8px;
    transition:0.3s ease;
    display:block;
}

.menu-bar ul li a:hover{
    background:rgba(255,255,255,0.18);
    transform:translateY(-3px);
}
.image-slider-section{
    width:100%;
    margin:0;
    padding:0;
}

.slider-box{
    width:100%;
    height: 800px;
    overflow:hidden;
    position:relative;
}

.slider-track{
    display:flex;
    width:300%;
    height:100%;
    animation:slideImages 9s infinite ease-in-out;
}

.slider-track img{
    width:100vw;
    height:100%;
    object-fit:contain;
    background:#fff;
    flex-shrink:0;
}

/* Sliding Animation */
@keyframes slideImages{
    0%, 30%{
        transform:translateX(0);
    }
    33%, 63%{
        transform:translateX(-100vw);
    }
    66%, 96%{
        transform:translateX(-200vw);
    }
    100%{
        transform:translateX(0);
    }
}
.latest-bar{
    width:100%;
    background:#ffffff;
    display:flex;
    align-items:center;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

.latest-title{
    background:#ff0000;
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    padding:10px 18px;
    white-space:nowrap;
}

.latest-news{
    flex:1;
    padding:0 10px;
    color:#222;
    font-size:16px;
    font-weight:600;
}

.latest-news marquee{
    width:100%;
    line-height:38px;
}
.center-image-section{
    width:100%;
    padding:30px 0;
    text-align:center;
    background:#ffffff;
}

.center-image-section img{
    width: 300px;
    height: 300px;;
    display:inline-block;
    border-radius:12px;
}
.welcome-section{
    width:100%;
    padding:50px 20px;
    text-align:center;
    background:#ffffff;
}

.welcome-section h1{
    font-size:38px;
    color:#0d0649;
    margin-bottom:18px;
    font-weight:800;
    text-transform:capitalize;
}

.welcome-section p{
    max-width:900px;
    margin:auto;
    font-size:18px;
    line-height:1.8;
    color:#444;
    margin-bottom:28px;
}

.read-btn{
    display:inline-block;
    padding:12px 28px;
    background:#070437;
    color:#ffffff;
    text-decoration:none;
    font-size:17px;
    font-weight:700;
    border-radius:8px;
    transition:0.3s ease;
}

.read-btn:hover{
    background:#070299;
    transform:translateY(-3px);
}
.four-image-section{
    width:100%;
    padding:30px 20px;
}

.image-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 40px;
}

.image-grid img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:12px;
    transition:0.3s ease;
}

.image-grid img:hover{
    transform:scale(1.05);
}

@media(max-width:992px){
    .image-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:576px){
    .image-grid{
        grid-template-columns:1fr;
    }
}
/* Faculty Section */
.faculty-section{
    width:100%;
    padding:40px 10px;
    background:#ffffff;
    overflow:hidden;
}

.faculty-heading{
    text-align:center;
    font-size:28px;
    color:#08165d;
    margin-bottom:25px;
    font-weight:800;
}

/* Slider */
.faculty-slider{
    width:100%;
    overflow:hidden;
}

.faculty-track{
    display:flex;
    width:300%;
    animation:facultySlide 12s infinite ease-in-out;
}

/* Card */
.faculty-card{
    width:100vw;
    min-width:100vw;
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.faculty-card{
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
    padding:20px 15px;
    max-width:320px;
    margin:auto;
    text-align:center;
}

/* Image Circle */
.faculty-img{
    width:110px;
    height:110px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #9f8506;
    margin-bottom:15px;
}

.faculty-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Text */
.faculty-card h3{
    font-size:22px;
    color:#06085b;
    margin-bottom:8px;
}

.faculty-card p{
    font-size:14px;
    color:#555;
    line-height:1.5;
}

/* Animation */
@keyframes facultySlide{
    0%,30%{
        transform:translateX(0);
    }
    33%,63%{
        transform:translateX(-100vw);
    }
    66%,96%{
        transform:translateX(-200vw);
    }
    100%{
        transform:translateX(0);
    }
}
.admission-section{
    width:100%;
    padding:70px 20px;
    background:linear-gradient(135deg,#e9fff1,#f5fffa,#eef7ff);
}

.admission-box{
    max-width:980px;
    margin:auto;
    background:#ffffff;
    padding:40px;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
    border-top:6px solid #a08b05;
}

.admission-heading{
    text-align:center;
    font-size:40px;
    color:#aa9404;
    margin-bottom:10px;
    font-weight:800;
}

.admission-subtext{
    text-align:center;
    color:#666;
    font-size:17px;
    margin-bottom:30px;
}

.admission-form .form-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

.admission-form input,
.admission-form select{
    width:100%;
    padding:15px 16px;
    border:1px solid #d9e8dd;
    border-radius:12px;
    font-size:16px;
    background:#f9fffb;
    outline:none;
    transition:0.3s;
}

.admission-form input:focus,
.admission-form select:focus{
    border-color:#9c9c03;
    box-shadow:0 0 0 4px rgba(22,193,114,0.12);
    background:#ffffff;
}

.submit-btn{
    width:100%;
    padding:16px;
    border:none;
    border-radius:12px;
    background:linear-gradient(90deg,#031d5c,#090451);
    color:#ffffff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.submit-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 20px rgba(15,157,88,0.25);
}

@media(max-width:768px){
    .admission-form .form-group{
        grid-template-columns:1fr;
    }

    .admission-box{
        padding:25px;
    }

    .admission-heading{
        font-size:30px;
    }
}
.footer-section{
    width:100%;
    background:linear-gradient(135deg,#0d1b2a,#102a43,#0f172a);
    color:#ffffff;
    display:grid;
    grid-template-columns:1.2fr 1fr 0.8fr;
    gap:25px;
    padding:50px 25px 30px;
}

.footer-box{
    background:rgba(255,255,255,0.05);
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.footer-left h2{
    font-size:30px;
    margin-bottom:15px;
    color:#050443;
}

.footer-left p{
    font-size:16px;
    line-height:1.8;
    color:#07336d;
}

.footer-contact{
    margin-top:18px;
}

.footer-contact p{
    margin:10px 0;
    font-size:16px;
}

.footer-contact i{
    color:#898b05;
    margin-right:8px;
}

.footer-map h3,
.footer-right h3{
    font-size:24px;
    margin-bottom:15px;
    color:#756c06;
    text-align:center;
}

.footer-map iframe{
    width:100%;
    height:250px;
    border:0;
    border-radius:14px;
}

.footer-right{
    text-align:center;
}

.footer-right img{
    width:180px;
    height:180px;
    object-fit:cover;
    background:#ffffff;
    padding:10px;
    border-radius:16px;
    box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

.footer-right p{
    margin-top:12px;
    color:#0f085b;
    font-size:15px;
}

.footer-bottom{
    width:100%;
    text-align:center;
    background:#08111f;
    color:#cbd5e1;
    padding:14px 10px;
    font-size:15px;
}

@media(max-width:992px){
    .footer-section{
        grid-template-columns:1fr;
    }
}

.gallery-section{
    width:100%;
    padding:60px 20px;
    background:#f8f9fa;
}

.gallery-heading{
    text-align:center;
    font-size:38px;
    color:#06064c;
    margin-bottom:30px;
    font-weight:800;
}

.gallery-grid{
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.gallery-grid img{
    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 8px 18px rgba(0,0,0,0.12);
    transition:0.35s ease;
    cursor:pointer;
}

.gallery-grid img:hover{
    transform:scale(1.05) rotate(1deg);
    box-shadow:0 12px 24px rgba(0,0,0,0.18);
}
.image-popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.image-popup img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

.close-img{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}

@media(max-width:992px){
    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    .gallery-grid{
        grid-template-columns:1fr;
    }
}
.why-avr-section{
    width:100%;
    padding:50px 20px;
    background:#f8f9fa;
}

.why-avr-box{
    max-width:900px;
    height:420px;
    margin:auto;
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,0.12);
    border:2px solid #150443;
}

.why-title{
    background:linear-gradient(90deg,#c1a716,#06034d);
    color:#ffffff;
    text-align:center;
    padding:16px;
    font-size:30px;
    font-weight:800;
    letter-spacing:1px;
}

.why-content{
    height:calc(100% - 68px);
    overflow:hidden;
    position:relative;
    padding:10px 20px;
}

.why-track{
    position:absolute;
    width:100%;
    animation:scrollUp 18s linear infinite;
}

.why-track p{
    background:#f4fff8;
    margin:12px 0;
    padding:14px 18px;
    border-left:5px solid #0b0347;
    border-radius:10px;
    font-size:18px;
    font-weight:600;
    color:#333;
    box-shadow:0 5px 12px rgba(0,0,0,0.06);
}

@keyframes scrollUp{
    0%{
        top:100%;
    }
    100%{
        top:-120%;
    }
}

.why-avr-box:hover .why-track{
    animation-play-state:paused;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#ffffff;
}

/* Menu Bar */
.menu-bar{
    width:100%;
    background:linear-gradient(90deg,#595503,#5f5102,#0d0446,#514201);
    padding:16px 20px;
    box-shadow:0 8px 18px rgba(0,0,0,0.15);
    position:sticky;
    top:0;
    z-index:999;
}

.menu-bar ul{
    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.menu-bar ul li a{
    text-decoration:none;
    color:white;
    font-size:17px;
    font-weight:700;
    padding:11px 18px;
    border-radius:10px;
    transition:0.3s;
}

.menu-bar ul li a:hover{
    background:rgba(255,255,255,0.18);
}

.menu-bar ul li a.active{
    background:white;
    color:#6d5e07;
}

/* Cloud Background */
.cloud-bg{
    position:relative;
    padding:70px 20px;
    background:linear-gradient(180deg,#564d03 0%,#e8fff4 15%,#ffffff 100%);
    overflow:hidden;
}

.cloud,
.cloud:before,
.cloud:after{
    background:white;
    position:absolute;
    border-radius:50px;
    content:"";
}

.cloud{
    width:180px;
    height:60px;
    top:40px;
    left:8%;
    box-shadow:
    250px 20px 0 0 white,
    500px 40px 0 10px white,
    780px 25px 0 0 white;
}

.cloud:before{
    width:70px;
    height:70px;
    top:-30px;
    left:25px;
}

.cloud:after{
    width:90px;
    height:90px;
    top:-40px;
    right:20px;
}

/* Layout */
.about-wrap{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center;
    position:relative;
    z-index:2;
}

/* Left Card */
.about-card{
    background:white;
    padding:40px;
    border-radius:25px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    transform:perspective(1000px) rotateX(4deg);
}

.about-card h1{
    font-size:40px;
    color:#061e7c;
    margin-bottom:20px;
}

.about-card p{
    font-size:18px;
    line-height:1.9;
    color:#333;
    margin-bottom:15px;
}

/* Points */
.points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:15px;
}

.points div{
    background:#f4fff8;
    padding:14px;
    border-radius:12px;
    font-weight:bold;
    color:#08086c;
    box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

/* Right Card */
.side-box{
    background:linear-gradient(135deg,#9c8d07,#037251);
    padding:35px;
    border-radius:28px;
    color:white;
    box-shadow:0 20px 40px rgba(0,0,0,0.18);
    transform:perspective(1000px) rotateY(-6deg);
}

.side-box h2{
    font-size:34px;
    margin-bottom:20px;
}

.side-box p{
    font-size:19px;
    line-height:2;
}

.badge{
    margin-top:20px;
    display:inline-block;
    background:white;
    color:#07b0de;
    padding:14px 20px;
    border-radius:50px;
    font-weight:bold;
}

/* Responsive */
@media(max-width:900px){
    .about-wrap{
        grid-template-columns:1fr;
    }

    .about-card,
    .side-box{
        transform:none;
    }

    .points{
        grid-template-columns:1fr;
    }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:linear-gradient(180deg,#f8fff9,#ffffff);
}

/* Menu */
.menu-bar{
    width:100%;
    background:linear-gradient(90deg,#645903,#6d6103,#b0a204,#03034d);
    padding:16px;
    position:sticky;
    top:0;
    z-index:999;
}

.menu-bar ul{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.menu-bar a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
    padding:10px 18px;
    border-radius:10px;
}

.menu-bar a:hover,
.menu-bar a.active{
    background:#fff;
    color:#0f9d58;
}

/* Section */
.course-section{
    padding:60px 20px;
    text-align:center;
}

.main-heading{
    font-size:42px;
    color:#0f9d58;
}

.sub-heading{
    color:#555;
    margin:12px 0 35px;
    font-size:18px;
}

.course-grid{
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.course-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 18px 35px rgba(0,0,0,0.12);
    transform:perspective(1000px) rotateX(4deg);
    transition:0.3s;
}

.course-card:hover{
    transform:translateY(-8px) scale(1.02);
}

.course-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.course-card h2{
    font-size:28px;
    color:#0f9d58;
    margin:18px 15px 10px;
}

.course-card p{
    font-size:16px;
    color:#444;
    line-height:1.7;
    padding:0 15px 20px;
}

.enroll-btn{
    display:block;
    margin:0 15px 20px;
    width:calc(100% - 30px);
    padding:14px;
    text-align:center;
    text-decoration:none;
    border-radius:12px;
    background:linear-gradient(90deg,#0b023e,#0a0131);
    color:#fff;
    font-size:17px;
    font-weight:700;
}

/* Popup */
.popup-form{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    justify-content:center;
    align-items:center;
    padding:20px;
}

.form-box{
    width:100%;
    max-width:500px;
    background:#fff;
    border-radius:20px;
    padding:30px;
    position:relative;
}

.close-btn{
    position:absolute;
    top:12px;
    right:18px;
    font-size:30px;
    cursor:pointer;
}

.form-box h2{
    text-align:center;
    color:#8a7403;
    margin-bottom:18px;
}

.form-box input,
.form-box textarea{
    width:100%;
    padding:14px;
    margin:8px 0;
    border:1px solid #ddd;
    border-radius:10px;
}

.form-box textarea{
    height:90px;
    resize:none;
}

.form-box button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,#574e02,#9d9a06);
    color:#fff;
    font-weight:700;
    margin-top:8px;
}
/* Apply Page Only CSS */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#ffffff;
}

.apply-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:linear-gradient(135deg,#eafff2,#ffffff,#e8fff4);
}

.apply-card{
    width:100%;
    max-width:560px;
    background:#ffffff;
    border-radius:28px;
    padding:35px 28px;
    position:relative;
    box-shadow:0 20px 45px rgba(0,0,0,0.15);
    border-top:8px solid #4d4709;
}

.close-btn{
    position:absolute;
    top:15px;
    right:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#f1f5f9;
    color:#111;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:22px;
}

.close-btn:hover{
    background:#ef4444;
    color:#ffffff;
}

.apply-card h1{
    text-align:center;
    color:#827205;
    font-size:36px;
    margin-bottom:8px;
}

.form-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:25px;
    line-height:1.6;
}

.input-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f8fafc;
    border:1px solid #dbe3ea;
    border-radius:15px;
    padding:0 15px;
    margin-bottom:14px;
}

.input-box i{
    color:#b29b08;
    font-size:18px;
}

.input-box input,
.input-box select,
.input-box textarea{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    padding:15px 0;
    font-size:16px;
}

.textarea-box{
    align-items:flex-start;
    padding-top:12px;
}

.textarea-box textarea{
    height:90px;
    resize:none;
}

.payment-box{
    display:none;
    text-align:center;
    padding:20px;
    margin:18px 0;
    border-radius:18px;
    background:#f4fff8;
    border:2px dashed #6f7213;
}

.payment-box h3{
    color:#646708;
    margin-bottom:8px;
}

.payment-box p{
    font-weight:bold;
    color:#333;
    margin-bottom:12px;
}

.payment-box img{
    width:220px;
    height:220px;
    object-fit:cover;
    background:white;
    padding:10px;
    border-radius:16px;
    box-shadow:0 10px 22px rgba(0,0,0,0.12);
}

.payment-box button{
    width:100%;
    margin-top:15px;
    padding:13px;
    border:none;
    border-radius:12px;
    background:#0f9d58;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.apply-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:15px;
    background:linear-gradient(90deg,#6e7006,#cac607);
    color:#ffffff;
    font-size:18px;
    font-weight:800;
    cursor:pointer;
}

.apply-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(15,157,88,0.22);
}

.success-popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:9999;
}

.success-card{
    max-width:420px;
    width:100%;
    background:white;
    text-align:center;
    border-radius:24px;
    padding:35px 25px;
}

.success-card i{
    font-size:60px;
    color:#0d0850;
    margin-bottom:15px;
}

.success-card h2{
    color:#061051;
    margin-bottom:10px;
}

.success-card p{
    color:#555;
    margin-bottom:20px;
}

.success-card a{
    display:inline-block;
    padding:12px 25px;
    background:#5f5705;
    color:white;
    text-decoration:none;
    border-radius:10px;
    font-weight:bold;
}

@media(max-width:600px){
    .apply-card{
        padding:30px 18px;
    }

    .apply-card h1{
        font-size:28px;
    }

    .payment-box img{
        width:190px;
        height:190px;
    }
}


/* Full Website Responsive Fix */

html, body{
    width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

/* Banner / Slider Fix */
.top-banner{
    width:100%;
    height:auto;
}

.top-banner img{
    width:100%;
    height:auto;
    display:block;
}

.slider-box{
    width:100%;
    height:auto;
}

.slider-track img{
    width:100vw;
    height:auto;
    object-fit:contain;
}

/* Menu Mobile Fix */
@media(max-width:768px){

    .menu-bar ul{
        flex-direction:column;
        gap:8px;
    }

    .menu-bar ul li a{
        width:100%;
        text-align:center;
        font-size:15px;
        padding:10px;
    }

    .contact-bar{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .contact-card{
        justify-content:center;
    }

    .welcome-section h1,
    .feature-heading,
    .gallery-heading,
    .admission-heading{
        font-size:28px;
    }

    .welcome-section p{
        font-size:16px;
        line-height:1.6;
    }

    .image-grid,
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .feature-card{
        flex-direction:column;
        text-align:center;
    }

    .admission-form .form-group{
        grid-template-columns:1fr;
    }

    .footer-section{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-map iframe{
        height:220px;
    }
}

/* Laptop Size Fix */
@media(min-width:769px) and (max-width:1200px){

    .gallery-grid,
    .image-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-section{
        grid-template-columns:1fr 1fr;
    }
}







/* Full Website Clean White Design */

body{
    background:#ffffff;
    color:#222;
    font-family:Arial, sans-serif;
}

/* Section Background Clean */
section{
    background:#ffffff;
}

/* Light Soft Section Alternate (optional modern look) */
section:nth-child(even){
    background:#f8f9fa;
}

/* Cards Stylish White */
.course-card,
.feature-card,
.admission-form,
.footer-box,
.form-container{
    background:#ffffff;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* Headings Color Improve */
h1, h2, h3{
    color:#050762;
}

/* Paragraph Soft Look */
p{
    color:#555;
}

/* Button Improve */
button, .enroll-btn, .read-btn{
    background:linear-gradient(90deg,#0d30a4,#061e5f);
    color:#fff;
}

/* Hover Effect */
button:hover, .enroll-btn:hover, .read-btn:hover{
    opacity:0.9;
}




.menu-bar{
    width:100%;
    background:linear-gradient(90deg,#8b8204,#dbcd07,#9b9107);
    padding:14px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:999;
}

.menu-logo{
    color:#fff;
    font-size:22px;
    font-weight:800;
}

.menu-bar ul{
    list-style:none;
    display:flex;
    gap:18px;
    margin:0;
    padding:0;
}

.menu-bar ul li a{
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    padding:10px 14px;
    border-radius:8px;
    display:block;
}

.menu-bar ul li a:hover{
    background:rgba(255,255,255,0.2);
}

.menu-toggle{
    display:none;
    color:#fff;
    font-size:32px;
    cursor:pointer;
    z-index: 1001;
}

/* Mobile Menu Styles */


#mobileMenu.active {
    right: 0;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1002;
}

#mobileMenu a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    padding: 12px;
    border-radius: 8px;
    transition: 0.3s;
}

#mobileMenu a:hover {
    background: rgba(255,255,255,0.2);
    padding-left: 20px;
}

/* Mobile Franchise dropdown (details/summary) - isolated so click/tap works */
.mobile-franchise {
  color: #fff;
}

/* IMPORTANT: prevent any conflicting legacy mobile-menu styles from overriding drawer */
@media (max-width: 768px) {
  .mobile-menu{ display:none !important; }
}







.mobile-franchise summary {
  font-weight: bold;
  cursor: pointer;
  display: list-item; /* improves tap reliability */
  list-style: none;
  user-select: none;
  z-index: 1002;
}


/* Smooth slide-down for submenu (mobile only)
   Note: desktop must remain unchanged, so keep under media query */
@media (max-width: 768px) {
  .mobile-franchise {
    width: 100%;
  }

  /* details element itself stays in flow */
  .mobile-franchise[open] {
    /* no special display needed */
  }

  /* Animate only the content area */
  .mobile-franchise > a,
  .mobile-franchise > div,
  .mobile-franchise > ul {
    /* ensure submenu elements are always measurable */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.22s ease;
  }

  .mobile-franchise[open] > a,
  .mobile-franchise[open] > div,
  .mobile-franchise[open] > ul {
    max-height: 420px; /* enough for submenu links */
    opacity: 1;
  }

  /* Make submenu links tappable and aligned */
  .mobile-franchise > a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 8px;
    position: relative;
    z-index: 1001;
  }

  .mobile-franchise > a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}


/* Overlay */
.menu-overlay {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive Media Query */
@media (max-width: 768px) {
    .menu-bar {
        padding: 15px 20px;
    }
    
    .nav-links {
        display: none;
    }
    
    .menu-toggle {
        display: block !important;
    }
    
    body.menu-open {
        overflow: hidden;
    }
}

/* Mobile Menu */
/* REMOVED CONFLICTING OLD MOBILE MENU */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #eef4ff;
  font-family: Arial, sans-serif;
  color: #222;
}

.main-header {
  width: 100%;
  background: linear-gradient(135deg, #062f6f, #0b5ed7);
  padding: 15px 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.brand {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.nav a {
  color: white;
  text-decoration: none;
  margin: 8px 12px;
  font-weight: bold;
  display: inline-block;
}

.nav a:hover {
  color: #ffe600;
}

.hero {
  padding: 80px 15px;
  text-align: center;
  background: linear-gradient(135deg, #9b7e0a, #001f54);
  color: white;
}

.hero h1 {
  font-size: 42px;
  margin-bottom: 12px;
}

.hero p {
  font-size: 18px;
}

.exam-result-section {
  display: none;
  padding: 55px 15px;
  background: linear-gradient(135deg, #f8fbff, #eaf2ff);
}

.section-title {
  text-align: center;
  margin-bottom: 35px;
}

.section-title span {
  background: #dbeafe;
  color: #0b3d91;
  padding: 8px 18px;
  border-radius: 30px;
  font-weight: bold;
}

.section-title h2 {
  margin-top: 18px;
  color: #063c88;
  font-size: 36px;
}

.section-title p {
  color: #555;
  margin-top: 8px;
}

.portal-grid {
  max-width: 1150px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.portal-card {
  background: white;
  padding: 28px;
  border-radius: 22px;
  box-shadow: 0 18px 35px rgba(0,0,0,0.14);
  border: 1px solid #dbeafe;
  transition: 0.3s;
}

.portal-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 45px rgba(0,0,0,0.2);
}

.card-icon {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #0b5ed7, #062f6f);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}

.portal-card h3 {
  color: #063c88;
  font-size: 23px;
  margin-bottom: 10px;
}

.small-text {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.portal-card input {
  width: 100%;
  padding: 14px;
  margin: 9px 0;
  border-radius: 12px;
  border: 1px solid #b6c5dd;
  font-size: 16px;
  outline: none;
}

.portal-card input:focus {
  border-color: #0b5ed7;
  box-shadow: 0 0 0 3px rgba(11,94,215,0.15);
}

.portal-card button {
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #063c88, #0b5ed7);
  color: white;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
}

.portal-card button:hover {
  background: linear-gradient(135deg, #001f54, #084fc2);
}

.note-card {
  background: linear-gradient(135deg, #fff8e6, #ffffff);
}

.note-card ul {
  padding-left: 20px;
}

.note-card li {
  margin-bottom: 12px;
  line-height: 1.5;
  color: #333;
}

/* Board Result Style */
.board-result {
  display: none;
  max-width: 1000px;
  margin: 40px auto 0;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  border: 2px solid #0b3d91;
}

.result-top {
  background: linear-gradient(135deg, #062f6f, #0b5ed7);
  color: white;
  text-align: center;
  padding: 24px;
}

.result-top h2 {
  font-size: 30px;
  letter-spacing: 1px;
}

.result-top p {
  margin-top: 6px;
  font-size: 16px;
}

.student-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #cbd5e1;
}

.student-info div {
  background: #f8fbff;
  padding: 16px;
}

.student-info b {
  display: block;
  color: #0b3d91;
  margin-bottom: 5px;
}

.student-info span {
  font-weight: bold;
}

.marks-table {
  width: 100%;
  border-collapse: collapse;
}

.marks-table th {
  background: #e0ecff;
  color: #063c88;
  padding: 14px;
  border: 1px solid #b6c5dd;
}

.marks-table td {
  padding: 13px;
  text-align: center;
  border: 1px solid #cbd5e1;
}

.marks-table td:first-child {
  text-align: left;
  font-weight: bold;
}

.final-result {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #eef5ff;
  border-top: 2px solid #0b3d91;
}

.final-result div {
  padding: 18px;
  text-align: center;
  border-right: 1px solid #cbd5e1;
}

.final-result b {
  display: block;
  color: #0b3d91;
  margin-bottom: 7px;
}

.final-result span {
  font-size: 20px;
  font-weight: bold;
}

.pass-text {
  color: green;
}

.congrats {
  text-align: center;
  background: #dcfce7;
  color: #15803d;
  padding: 18px;
  font-size: 20px;
  font-weight: bold;
}

/* Mobile */
@media (max-width: 900px) {
  .portal-grid {
    grid-template-columns: 1fr;
  }

  .portal-card {
    max-width: 650px;
    margin: auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .main-header {
    justify-content: center;
    text-align: center;
    padding: 15px;
  }

  .brand {
    width: 100%;
    margin-bottom: 10px;
    font-size: 21px;
  }

  .hero {
    padding: 55px 12px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .section-title h2 {
    font-size: 27px;
  }

  .student-info {
    grid-template-columns: 1fr;
  }

  .final-result {
    grid-template-columns: 1fr 1fr;
  }

  .result-top h2 {
    font-size: 22px;
  }

  .marks-table th,
  .marks-table td {
    font-size: 13px;
    padding: 10px;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #eef4ff;
}


.image-grid img {
    width: 100%;
    border-radius: 12px;
    transition: 0.3s;
    cursor: pointer;
}

.image-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}


.menu-bar {
    width: 100%;
    background: linear-gradient(135deg, #063c88, #1261d6);
    color: white;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 9999;
}

.menu-logo {
    font-size: 22px;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

/* MOBILE MENU */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    height: 100%;
    background: linear-gradient(135deg, #062f6f, #0b5ed7);
    display: flex;
    flex-direction: column;
    padding: 60px 20px;
    gap: 20px;
    transition: 0.4s ease;
    box-shadow: -5px 0 25px rgba(0,0,0,0.4);
}

.mobile-menu a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.mobile-menu a:hover {
    padding-left: 10px;
    color: yellow;
    transition: 0.3s;
}

/* .mobile-menu.active { right: 0; }
   Removed because this project uses #mobileMenu (transform drawer) for mobile. */


.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #f4f8ff;
}

/* Top Banner */
.top-banner {
    width: 100%;
}

.top-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Menu */
.menu-bar {
    background: #003b8e;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 35px;
    position: sticky;
    top: 0;
    z-index: 999;
}

.menu-logo {
    font-size: 24px;
    font-weight: bold;
}

.menu-bar ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

.menu-bar ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.menu-bar ul li a:hover {
    color: #ffdd00;
}

.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

/* Course Section */
.course-section {
    padding: 50px 20px;
    text-align: center;
}

.main-heading {
    font-size: 42px;
    color: #003b8e;
    margin-bottom: 10px;
}

.sub-heading {
    font-size: 18px;
    color: #444;
    margin-bottom: 25px;
}

/* Search Box */
.search-box {
    margin: 25px auto 35px;
    max-width: 500px;
}

.search-box input {
    width: 100%;
    padding: 15px 22px;
    border: 2px solid #003b8e;
    border-radius: 40px;
    font-size: 17px;
    outline: none;
    box-shadow: 0 6px 18px rgba(0, 59, 142, 0.18);
}

.search-box input:focus {
    border-color: #ff6600;
}

#noResult {
    display: none;
    color: red;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}

/* Course Cards */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: auto;
}

.course-card {
    background: white;
    padding: 22px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transition: 0.3s;
}

.course-card:hover {
    transform: translateY(-8px);
}

.course-card img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    margin-bottom: 15px;
}

.course-card h2 {
    color: #003b8e;
    margin-bottom: 10px;
}

.course-card p {
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

.enroll-btn {
    display: inline-block;
    background: #ff6600;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
}

.enroll-btn:hover {
    background: #003b8e;
}

/* Popup */
.popup-form {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.form-box {
    background: white;
    width: 90%;
    max-width: 420px;
    padding: 25px;
    border-radius: 15px;
    position: relative;
}

.close-btn {
    position: absolute;
    right: 18px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
}

.form-box h2 {
    margin-bottom: 20px;
    color: #003b8e;
}

.form-box input,
.form-box textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #aaa;
    border-radius: 8px;
}

.form-box button {
    width: 100%;
    padding: 13px;
    border: none;
    background: #003b8e;
    color: white;
    font-size: 17px;
    border-radius: 8px;
    cursor: pointer;
}

/* Footer */
.footer-section {
    background: #002b66;
    color: white;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    padding: 40px 30px;
}

.footer-box h2,
.footer-box h3 {
    margin-bottom: 15px;
}

.footer-contact p {
    margin: 10px 0;
}

.footer-map iframe {
    width: 100%;
    height: 220px;
    border: none;
    border-radius: 12px;
}

.footer-right img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: white;
    padding: 8px;
    border-radius: 12px;
}

.footer-bottom {
    background: #001b40;
    color: white;
    text-align: center;
    padding: 14px;
}

/* Mobile */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .menu-bar ul {
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        background: #003b8e;
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
    }

    .menu-bar ul.show {
        display: flex;
    }

    .main-heading {
        font-size: 32px;
    }
}
.menu-bar {
    background: #003b8e;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    position: relative;
    z-index: 9999;
}

.menu-logo {
    font-size: 22px;
    font-weight: bold;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links li {
    list-style: none;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Franchise Dropdown */
.avr-drop {
    position: relative;
}

.avr-drop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #003b8e;
    min-width: 250px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 99999;
}

/* Hover karne par open */
.avr-drop:hover .avr-drop-menu {
    display: block;
}

.avr-drop-menu a {
    display: block;
    padding: 14px 18px;
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.avr-drop-menu a:hover {
    background: #ff6600;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #003b8e;
    padding: 25px;
    transition: 0.3s;
    z-index: 100000;
}

.mobile-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 13px 0;
    font-weight: bold;
}

.close-btn {
    font-size: 30px;
    text-align: right;
    cursor: pointer;
    color: white;
}

.mobile-franchise summary {
    color: #ffdd00;
    font-weight: bold;
    padding: 13px 0;
    cursor: pointer;
}

.mobile-franchise a {
    padding-left: 15px;
}

/* Mobile */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }
}


#navLinks li ul {
  display: none;
}

#navLinks li.active > ul {
  display: block;
}
#navLinks {
  display: none;
}

#navLinks.show {
  display: block;
}

#navLinks li ul {
  display: none;
}

#navLinks li.active > ul {
  display: block;
}
#navLinks {
  display: none;
}

#navLinks.show {
  display: block;
}
/* (Disabled) Old mobile-menu implementation removed to avoid conflicts.
   Actual drawer uses #mobileMenu + transform/overlay controlled at the top of this file. */













/* =====================================================
   FINAL MOBILE MENU COMPLETE FIX
===================================================== */

body.menu-open{
overflow:hidden !important;
}

@media (max-width:768px){

.nav-links{
display:none !important;
}

.menu-toggle{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:48px !important;
height:48px !important;
background:#0f172a !important;
color:#fff !important;
border:none !important;
border-radius:12px !important;
font-size:32px !important;
cursor:pointer !important;
position:relative !important;
z-index:999999 !important;
}

#mobileMenu{
position:fixed !important;
top:0 !important;
right:0 !important;
width:320px !important;
max-width:85% !important;
height:100vh !important;
background:#0b1120 !important;
padding:20px !important;
overflow-y:auto !important;
transform:translateX(100%) !important;
transition:transform .35s ease !important;
z-index:999999 !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
box-shadow:-5px 0 25px rgba(0,0,0,.35) !important;
}

#mobileMenu.active{
transform:translateX(0) !important;
}

#mobileMenu ul{
display:block !important;
padding:0 !important;
margin:0 !important;
list-style:none !important;
}

#mobileMenu li{
display:block !important;
width:100% !important;
margin-bottom:10px !important;
}

#mobileMenu a,
#mobileMenu summary{
display:block !important;
width:100% !important;
padding:14px 16px !important;
background:#111827 !important;
color:#fff !important;
border-radius:12px !important;
text-decoration:none !important;
font-size:16px !important;
cursor:pointer !important;
border:none !important;
outline:none !important;
}

#mobileMenu a:hover,
#mobileMenu summary:hover{
background:#2563eb !important;
}

#mobileMenu details{
margin-bottom:10px !important;
}

#mobileMenu details ul{
display:block !important;
margin-top:10px !important;
padding-left:12px !important;
}

#mobileMenu details ul li{
margin-bottom:8px !important;
}

#mobileMenu details ul a{
background:#1e293b !important;
}

#mobileMenu .close-btn{
width:44px !important;
height:44px !important;
border:none !important;
border-radius:12px !important;
background:#1e293b !important;
color:#fff !important;
font-size:28px !important;
cursor:pointer !important;
margin-bottom:20px !important;
}

.menu-overlay{
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,.55) !important;
opacity:0 !important;
visibility:hidden !important;
transition:.3s !important;
z-index:999998 !important;
}

.menu-overlay.active{
opacity:1 !important;
visibility:visible !important;
}

}

/* =====================================================
   END FINAL MOBILE MENU COMPLETE FIX
===================================================== */



/* =========================================
   FINAL REAL MOBILE NAVBAR FIX
========================================= */


.menu-toggle{
display:none;
}

@media screen and (max-width:768px){

/* Desktop menu hide */
.nav-links{
display:none !important;
}

/* 3 DOT BUTTON */
.menu-toggle{
display:flex !important;
align-items:center !important;
justify-content:center !important;

position:fixed !important;
top:15px !important;
right:15px !important;

width:52px !important;
height:52px !important;

background:#0b1120 !important;
color:#fff !important;

font-size:34px !important;
font-weight:bold !important;

border:none !important;
border-radius:14px !important;

cursor:pointer !important;

z-index:999999999 !important;

box-shadow:0 5px 25px rgba(0,0,0,.35) !important;
}

/* MOBILE MENU */
#mobileMenu{
position:fixed !important;
top:0 !important;
right:0 !important;

width:320px !important;
max-width:85% !important;
height:100vh !important;

background:#0b1120 !important;

padding:20px !important;

overflow-y:auto !important;

transform:translateX(100%) !important;
transition:transform .35s ease !important;

z-index:999999998 !important;
}

/* OPEN MENU */
#mobileMenu.active{
transform:translateX(0) !important;
}

/* MENU LINKS */
#mobileMenu ul{
list-style:none !important;
padding:0 !important;
margin:0 !important;
}

#mobileMenu li{
margin-bottom:12px !important;
}

#mobileMenu a,
#mobileMenu summary{
display:block !important;
padding:14px 16px !important;

background:#111827 !important;
color:#fff !important;

border-radius:12px !important;

text-decoration:none !important;

font-size:16px !important;
}

/* CLOSE BUTTON */
.close-btn{
width:45px !important;
height:45px !important;

border:none !important;
border-radius:12px !important;

background:#1e293b !important;
color:#fff !important;

font-size:28px !important;

margin-bottom:20px !important;
}

/* DROPDOWN */
#mobileMenu details ul{
margin-top:10px !important;
padding-left:10px !important;
}

#mobileMenu details ul a{
background:#1e293b !important;
}

}

/* =========================================
   Authoritative mobile navigation fix
========================================= */
body.menu-open{
    overflow:hidden !important;
}

@media screen and (min-width:769px){
    .menu-toggle,
    #mobileMenu,
    .menu-overlay{
        display:none !important;
    }

    .nav-links{
        display:flex !important;
    }
}

@media screen and (max-width:768px){
    .menu-bar{
        position:sticky !important;
        top:0 !important;
        z-index:999997 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        min-height:70px !important;
        padding:12px 16px !important;
    }

    .menu-logo{
        max-width:calc(100% - 70px) !important;
        font-size:17px !important;
        line-height:1.25 !important;
    }

    .nav-links{
        display:none !important;
    }

    .menu-toggle{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        position:fixed !important;
        top:14px !important;
        right:14px !important;
        width:50px !important;
        height:50px !important;
        padding:0 !important;
        border:0 !important;
        border-radius:14px !important;
        background:#0b1120 !important;
        color:#fff !important;
        font-size:34px !important;
        line-height:1 !important;
        cursor:pointer !important;
        box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
        z-index:1000001 !important;
    }

    #mobileMenu.mobile-menu{
        display:block !important;
        visibility:visible !important;
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        width:320px !important;
        max-width:86vw !important;
        height:100vh !important;
        padding:20px !important;
        background:#0b1120 !important;
        overflow-y:auto !important;
        transform:translateX(105%) !important;
        transition:transform .3s ease !important;
        box-shadow:-10px 0 28px rgba(0,0,0,.35) !important;
        z-index:1000000 !important;
    }

    #mobileMenu.mobile-menu.active{
        transform:translateX(0) !important;
    }

    #mobileMenu ul,
    #mobileMenu details ul{
        display:block !important;
        list-style:none !important;
        margin:0 !important;
        padding:0 !important;
        width:100% !important;
    }

    #mobileMenu details ul{
        margin-top:10px !important;
        padding-left:10px !important;
    }

    #mobileMenu li{
        display:block !important;
        width:100% !important;
        margin:0 0 10px !important;
    }

    #mobileMenu a,
    #mobileMenu summary{
        display:block !important;
        width:100% !important;
        padding:14px 16px !important;
        border:0 !important;
        border-radius:10px !important;
        background:#111827 !important;
        color:#fff !important;
        font-size:16px !important;
        font-weight:700 !important;
        line-height:1.25 !important;
        text-align:left !important;
        text-decoration:none !important;
        cursor:pointer !important;
        box-sizing:border-box !important;
    }

    #mobileMenu a:hover,
    #mobileMenu summary:hover{
        background:#2563eb !important;
        color:#fff !important;
        padding-left:16px !important;
    }

    #mobileMenu .close-btn{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        position:static !important;
        width:44px !important;
        height:44px !important;
        margin:0 0 20px auto !important;
        padding:0 !important;
        border:0 !important;
        border-radius:12px !important;
        background:#1e293b !important;
        color:#fff !important;
        font-size:32px !important;
        line-height:1 !important;
        cursor:pointer !important;
    }

    .menu-overlay{
        display:block !important;
        position:fixed !important;
        inset:0 !important;
        background:rgba(0,0,0,.55) !important;
        opacity:0 !important;
        visibility:hidden !important;
        transition:opacity .3s ease, visibility .3s ease !important;
        z-index:999999 !important;
    }

    .menu-overlay.active{
        opacity:1 !important;
        visibility:visible !important;
    }
}












/* Subtle premium glass polish
   Keeps the existing layout/colors intact while adding a light iOS-style finish. */
:root {
    --avr-glass-light: rgba(255, 255, 255, 0.16);
    --avr-glass-card: rgba(255, 255, 255, 0.12);
    --avr-glass-border: rgba(255, 255, 255, 0.28);
    --avr-glass-shadow: 0 10px 30px rgba(18, 28, 45, 0.12);
    --avr-glass-hover-shadow: 0 14px 34px rgba(18, 28, 45, 0.16);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
    .top-banner,
    .course-card,
    .search-box input,
    .form-box,
    .footer-box {
        background-color: var(--avr-glass-card) !important;
        border: 1px solid var(--avr-glass-border) !important;
        box-shadow: var(--avr-glass-shadow) !important;
        -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
        backdrop-filter: blur(6px) saturate(115%) !important;
    }

    .course-card,
    .form-box,
    .footer-box {
        position: relative;
        overflow: hidden;
    }

    .course-card::before,
    .form-box::before,
    .footer-box::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 42%);
        opacity: 0.55;
    }

    .course-card > *,
    .form-box > *,
    .footer-box > * {
        position: relative;
        z-index: 1;
    }

    .search-box input,
    .form-box input,
    .form-box textarea {
        -webkit-backdrop-filter: blur(6px) saturate(110%);
        backdrop-filter: blur(6px) saturate(110%);
        background-color: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.26) !important;
    }
}

.course-card,
.enroll-btn,
.search-box input,
.form-box,
.form-box button,
.footer-box {
    box-sizing: border-box;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.course-card:hover {
    box-shadow: var(--avr-glass-hover-shadow) !important;
}

.enroll-btn,
.form-box button {
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 8px 18px rgba(18, 28, 45, 0.12) !important;
}

.enroll-btn:hover,
.form-box button:hover {
    box-shadow: 0 10px 22px rgba(18, 28, 45, 0.16) !important;
}

.popup-form {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.top-banner {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    :root {
        --avr-glass-shadow: 0 8px 22px rgba(18, 28, 45, 0.11);
        --avr-glass-hover-shadow: 0 10px 26px rgba(18, 28, 45, 0.14);
    }
}