body {
     background-color: white; /* Ensure the iframe has a white background */
     }

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
:root{
--primary-blue:#0B2545; /* Navy Blue */
--text:#1F2937; /* Charcoal */
--gold:#DAA520; /* Gold */
--green:#006A4E; /* Forest Green */
--white:#FFFFFF; /* Pure White */
}
body {
overflow-x: hidden; /* White space fix */
width: 100%;
background-color: var(--white);
color: var(--text);
}
/* =========================
PRELOADER
========================= */

#preloader{

    width:100%;
    height:100vh;

    background:var(--white);

    position:fixed;

    top:0;
    left:0;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    overflow:hidden;

    z-index:999999;
     box-shadow:0 0 25px rgba(218,165,32,.35);

}

/* =========================
LOADER CIRCLE
========================= */

.loader{

    width:150px;
    height:150px;

    border:4px solid #E5E7EB;

    border-top:4px solid var(--gold);

    border-radius:50%;

    position:absolute;

    animation:spin 1s linear infinite;

    box-shadow:
    0 0 25px rgba(218,165,32,.35);
}

/* =========================
LOGO
========================= */

.logo{

    width:130px;
    height:130px;

    object-fit:contain;

    position:relative;

    z-index:2;

    filter:
    
    drop-shadow(0 0 15px rgba(218,165,32,.7))

drop-shadow(0 0 50px rgba(11,37,69,.25));

    animation:logoFloat 2s ease-in-out infinite;
}

/* =========================
ROTATION
========================= */

@keyframes spin{

    100%{

        transform:rotate(360deg);
    }
}

/* =========================
LOGO FLOAT
========================= */

@keyframes logoFloat{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-6px);
    }

    100%{

        transform:translateY(0px);
    }
}

/* =========================
HIDE DURING LOAD
========================= */

.hide-during-load{

    opacity:0;
    visibility:hidden;

    transition:.5s ease;
}

/* SHOW */

.hide-during-load.show{

    opacity:1;
    visibility:visible;
}

/* =========================
LAPTOP
========================= */

@media(max-width:1200px){

    .loader{

        width:135px;
        height:135px;
    }

    .logo{

        width:120px;
        height:120px;
    }
}

/* =========================
TABLET
========================= */

@media(max-width:768px){

    .loader{

        width:115px;
        height:115px;

        border-width:3px;
    }

    .logo{

        width:95px;
        height:95px;
    }
}

/* =========================
MOBILE
========================= */

@media(max-width:576px){

    #preloader{

        padding:20px;
    }

    .loader{

        width:100px;
        height:100px;

        border-width:3px;
    }

    .logo{

        width:82px;
        height:82px;
    }
}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:400px){

    .loader{

        width:85px;
        height:85px;

        border-width:2px;
    }

    .logo{

        width:70px;
        height:70px;
    }
}

/* =========================
EXTRA SMALL MOBILE
========================= */

@media(max-width:320px){

    .loader{

        width:75px;
        height:75px;
    }

    .logo{

        width:60px;
        height:60px;
    }
}
 ul {
list-style: none; 

 }
a {
text-decoration: none;
}

/* NEWS TICKER - PROFESSIONAL DESIGN */
.news-ticker {
    width: 100%;
    background: var(--gold); /* Gold Brand Color */
    overflow: hidden;
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ticker-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.ticker-content {
    display: flex;
    gap: 80px; /* Increased gap for clarity */
    width: max-content;
    animation: tickerMove 60s linear infinite; /* Slow & Smooth */
}

/* Pause on hover */
.ticker-content:hover {
    animation-play-state: paused;
    cursor: pointer;
}

/* Font and Style */
.ticker-content span {
    color: var(--white);
    font-family: 'Segoe UI', 'Jamil Noori Nastaleeq', sans-serif;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Smooth Animation */
@keyframes tickerMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20%); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .ticker-content { gap: 40px; animation-duration: 45s; }
    .ticker-content span { font-size: 14px; }
}

/* ============================= */
/* ========= TOP BAR =========== */
/* ============================= */

.top-bar{
    width:100%;

    background:linear-gradient(
        135deg,
        #0B2545,
        #091C33
    );

    padding:10px 8%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    color:#fff;

    z-index:1001;
}

.top-left,
.top-right{
    display:flex;
    gap:20px;
    align-items:center;
}

.top-left span{
    font-size:13px;

    display:flex;
    align-items:center;

    gap:8px;

    color:#CBD5E1;
}

.top-right a{
    width:32px;
    height:32px;

    border-radius:50%;

    background:rgba(255,255,255,0.1);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    transition:0.3s ease;
}

.top-right a:hover{
    background:#DAA520;
    color:#0B2545;

    transform:translateY(-3px);
}

/* ============================= */
/* ========= NAVBAR ============ */
/* ============================= */

.navbar{
    width:100%;

    background:rgba(255,255,255,.98);

    backdrop-filter:blur(10px);

    position:sticky;
    top:48px;

    z-index:9999;

    border-bottom:1px solid rgba(0,0,0,.05);

    box-shadow:
    0 4px 25px rgba(0,0,0,.05);

    transition:.4s ease;
}


/* NAV CONTAINER */

.nav-container{
    max-width:1300px;

    height:85px;

    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 5%;
}

/* LOGO */

.nav-logo{
    display:flex;
    align-items:center;

    gap:12px;
}

.nav-logo img{
    width:55px;
    height:55px;

    object-fit:contain;
}

.logo-text h2{
    font-size:26px;

    color:var(--text);

    font-weight:800;

    line-height:1;
}

.logo-text span{
    font-size:12px;

    color:#64748B;

    font-weight:500;
}
/* HIDE NAVBAR + TICKER DURING PRELOADER */

.news-ticker,
.navbar{
    opacity:0;
    visibility:hidden;

    transition:.5s ease;
}

/* SHOW AFTER WEBSITE LOAD */

.news-ticker.show,
.navbar.show{
    opacity:1;
    visibility:visible;
}

/* ============================= */
/* ========= NAV MENU ========== */
/* ============================= */

.nav-menu{
    display:flex;
    align-items:center;

    gap:30px;
}

.nav-link{
    color:var(--text);

    font-weight:600;
    font-size:16px;

    padding:8px 0;

    position:relative;

    transition:.3s;
}

/* UNDERLINE EFFECT */

.nav-link::after{
    content:'';

    position:absolute;

    bottom:0;
    left:0;

    width:0;
    height:3px;

    background:#DAA520;

    border-radius:50px;

    transition:
    .4s cubic-bezier(
        0.68,
        -0.55,
        0.27,
        1.55
    );
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}

.nav-link:hover,
.nav-link.active{
    color:#DAA520;
}

/* ============================= */
/* ========= DROPDOWN ========== */
/* ============================= */

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;

    top:150%;
    left:0;

    width:230px;

    background:#fff;

    border-radius:12px;

    padding:15px 0;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.1);

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.4s ease;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;

    transform:translateY(0);

    /* top:100%; */
}

.dropdown-menu li a{
    display:block;

    padding:12px 25px;

    color:#334155;

    font-size:15px;

    transition:.3s;
}

.dropdown-menu li a:hover{
    background:#f5f5f5;

    color:#DAA520;

    padding-left:30px;
}

.dropdown-menu li a::after{
    display:none;
}

/* ============================= */
/* ======= APPLY BUTTON ======= */
/* ============================= */

.applys-btn{
    padding:12px 28px;

    background:linear-gradient(
        135deg,
        #DAA520,
        #b8860b
    );

    color:#fff !important;

    border-radius:10px;

    font-weight:700;

    display:inline-block;

    transition:.4s;

    box-shadow:
    0 8px 15px rgba(218,165,32,.2);
}

.applys-btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 12px 25px rgba(218,165,32,.35);
}

/* ============================= */
/* ========= HAMBURGER ========= */
/* ============================= */

.hamburger{
    display:none;

    cursor:pointer;

    flex-direction:column;

    gap:6px;
}

.hamburger span{
    width:28px;
    height:3px;

    background:var(--text);

    border-radius:5px;

    transition:.4s;
}

/* ============================= */
/* ========= MOBILE ============ */
/* ============================= */

@media(max-width:1024px){

    .top-bar{
        display:none;
    }

    .hamburger{
        display:flex;
        z-index:10002;
    }

    .navbar{
        top:48px;
    }

    .nav-menu{
        position:fixed;

        top:0;
        right:0;

        width:300px;
        height:100vh;

        background:#fff;

        flex-direction:column;

        align-items:flex-start;

        padding:100px 35px;

        box-shadow:
        -15px 0 40px rgba(0,0,0,0.1);

        transform:translateX(100%);

        visibility:hidden;

        transition:
        transform .5s cubic-bezier(
            0.77,
            0.2,
            0.05,
            1
        ),
        visibility .5s;
    }

    .nav-menu.active{
        transform:translateX(0);

        visibility:visible;
    }

    .nav-menu li{
        width:100%;
        margin-bottom:10px;
    }

    .dropdown-menu{
        position:relative;

        top:0;

        opacity:1;
        visibility:visible;

        display:none;

        transform:none;

        box-shadow:none;

        background:#F8FAFC;

        margin-top:10px;

        width:100%;
    }

    .dropdown.active .dropdown-menu{
        display:block;
    }

    /* HAMBURGER ANIMATION */

    .hamburger.active span:nth-child(1){
        transform:
        translateY(9px)
        rotate(45deg);
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:
        translateY(-9px)
        rotate(-45deg);
    }

}

/* ============================= */
/* ===== MOBILE TICKER ========= */
/* ============================= */

@media(max-width:768px){

    .ticker-content{
        gap:50px;

        padding:12px 0;

        animation:
        tickerMove 30s linear infinite;
    }

    .ticker-content span{
        font-size:13px;
    }

}

/* Again */
/* hero section /
/ --- FSP HERO STYLES --- */
/* ======================================================
HERO SECTION FINAL PREMIUM ANIMATIONS
====================================================== */
/* ===== HERO ===== */
.hero{
width:100%;
min-height:100vh;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
padding:120px 8% 80px;
position:relative;
overflow:hidden;
background:
linear-gradient(
    135deg,
    #091C33 0%,
    #0B2545 50%,
    #1F2937 100%
);
}
/* ===== OVERLAY ===== */
.overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,
rgba(218, 165, 32, 0.15),
transparent 35%),

radial-gradient(circle at bottom left,
rgba(255, 255, 255, 0.05),
transparent 30%);

z-index:1;
}
/* ======================================================
TEXT CONTENT ANIMATION
====================================================== */
.hero-content{
width:50%;
position:relative;
z-index:5;
color:#fff;
}
/* INITIAL STATES */
.small-title,
.hero-content h1,
.hero-text,
.hero-buttons,
.hero-stats{
opacity:0;

transform:
translateY(80px);

transition:
1.2s cubic-bezier(.19,1,.22,1);
}
/* SHOW ANIMATION */
.hero-content.show .small-title{
opacity:1;
transform:translateY(0);
transition-delay:.2s;
}
.hero-content.show h1{
opacity:1;
transform:translateY(0);
transition-delay:.5s;
}
.hero-content.show .hero-text{
opacity:1;
transform:translateY(0);
transition-delay:.8s;
}
.hero-content.show .hero-buttons{
opacity:1;
transform:translateY(0);
transition-delay:1.1s;
}
.hero-content.show .hero-stats{
opacity:1;
transform:translateY(0);
transition-delay:1.4s;
}
/* ===== SMALL TITLE ===== */
.small-title{
color:#E5E7EB;
font-size:15px;
letter-spacing:5px;
margin-bottom:22px;
text-transform:uppercase;
font-weight:600;
}
/* ===== HEADING ===== */
.hero-content h1{
font-size:72px;
line-height:1.05;
font-weight:900;
margin-bottom:25px;
}
.hero-content h1 span{
color:var(--gold);

display:inline-block;

animation:
textGlow 3s ease-in-out infinite;
}
/* ===== PARAGRAPH ===== */
.hero-text{
color:#D1D5DB;
font-size:18px;
line-height:1.9;
max-width:620px;
margin-bottom:45px;
}
/* ======================================================
BUTTONS
====================================================== */
.hero-buttons{
display:flex;
gap:20px;
margin-bottom:50px;
}
.btn{
padding:16px 34px;
border-radius:60px;
text-decoration:none;
font-weight:700;
font-size:15px;

transition:.5s;

position:relative;
overflow:hidden;
}
/* PRIMARY */
.primary-btn{
background:linear-gradient(
    135deg,
    var(--gold),
    #b8860b
);

color:#fff;

box-shadow:
0 10px 30px rgba(218, 165, 32, 0.35);
}
.primary-btn:hover{
transform:
translateY(-8px)
scale(1.04);

box-shadow:
0 20px 50px rgba(218, 165, 32, 0.5);
}
/* SECONDARY */
.secondary-btn{
border:1px solid rgba(255,255,255,.25);
color:#fff;

backdrop-filter:blur(12px);

background:rgba(255,255,255,.08);
}
.secondary-btn:hover{
background:#fff;
color:var(--text);

transform:
translateY(-8px)
scale(1.04);
}
/* ======================================================
STATS
====================================================== */
.hero-stats{
display:flex;
gap:20px;
flex-wrap:wrap;
}
.stat-box{
background:rgba(255,255,255,.08);
border:1px solid rgba(218, 165, 32, 0.3);

backdrop-filter:blur(12px);

padding:22px 30px;
border-radius:24px;

min-width:150px;

transition:.5s;
}
.stat-box:hover{
transform:
translateY(-12px)
rotate(-2deg);

background:rgba(255,255,255,.14);

box-shadow:
0 20px 40px rgba(0,0,0,.2);
}
.stat-box h2{
font-size:34px;
margin-bottom:5px;
color: var(--gold);
}
.stat-box p{
color:#e5e7eb;
}
/* ======================================================
IMAGE SECTION WOW ANIMATION
====================================================== */
.hero-image{
width:45%;
display:flex;
justify-content:center;
position:relative;
z-index:5;

opacity:0;

transform:
perspective(1200px)
rotateY(25deg)
scale(.7)
translateX(100px);

transition:
1.8s cubic-bezier(.19,1,.22,1);
}
.hero-image.show{
opacity:1;

transform:
perspective(1200px)
rotateY(0deg)
scale(1)
translateX(0);
}
/* ===== IMAGE BOX ===== */
.image-box{
position:relative;

width:430px;
height:540px;

border-radius:35px;
overflow:hidden;

animation:
imageFloat 5s ease-in-out infinite;

box-shadow:
0 25px 60px rgba(0,0,0,.35);

cursor:pointer;
}
/* ===== IMAGE ===== */
.image-box img{
width:100%;
height:100%;
object-fit:cover;

transition:1s ease;
}
/* HOVER */
.image-box:hover{
transform:
translateY(-15px)
rotate(-2deg)
scale(1.02);
}
.image-box:hover img{
transform:
scale(1.08);
}
/* ===== GLOW BORDER ===== */
.image-box::before{
content:"";

position:absolute;
inset:-3px;

border-radius:40px;

background:
linear-gradient(
    130deg,
    var(--gold),
    #b8860b,
    #0B2545,
    #091C33
);

background-size:300% 300%;

animation:borderGlow 6s linear infinite;

z-index:-1;

filter:blur(10px);
}
/* ===== SHINE EFFECT ===== */
.image-box::after{
content:"";

position:absolute;

top:-120%;
left:-40%;

width:70%;
height:250%;

background:
linear-gradient(
    90deg,
    transparent,
    rgba(218, 165, 32, 0.35),
    transparent
);

transform:rotate(25deg);

animation:shineMove 5s linear infinite;
}
/* ===== FLOATING CARD ===== */
.floating-card{
position:absolute;
bottom:25px;
left:25px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.18);

padding:18px 25px;

border-radius:22px;

color:#fff;

animation:
floatingCard 4s ease-in-out infinite;
}
/* ======================================================
KEYFRAMES
====================================================== */
@keyframes imageFloat{
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-20px);
}
}
@keyframes shineMove{
0%{
    left:-60%;
}

100%{
    left:130%;
}
}
@keyframes borderGlow{
0%{
    background-position:0% 50%;
}

100%{
    background-position:100% 50%;
}
}
@keyframes floatingCard{
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-12px);
}
}
@keyframes textGlow{
0%,100%{
    text-shadow:
    0 0 10px rgba(218, 165, 32, 0.2);
}

50%{
    text-shadow:
    0 0 25px rgba(218, 165, 32, 0.7),
    0 0 40px rgba(218, 165, 32, 0.5);
}
}
/* ======================================================
MOBILE RESPONSIVE
====================================================== */
@media(max-width:1100px){
.hero{
    flex-direction:column;
    text-align:center;
}

.hero-content,
.hero-image{
    width:100%;
}

.hero-buttons,
.hero-stats{
    justify-content:center;
}

.hero-content h1{
    font-size:56px;
}
}
@media(max-width:768px){
.hero{
    padding:120px 5% 80px;
}

.hero-content h1{
    font-size:42px;
}

.hero-text{
    font-size:16px;
}

.image-box{

    width:100%;
    max-width:340px;

    height:430px;

}
}
@media(max-width:480px){
.hero-content h1{
    font-size:34px;
}

.hero-buttons{
    flex-direction:column;
}

.btn{
    width:100%;
    text-align:center;
}

.hero-stats{
    flex-direction:column;
    align-items:center;
}

.stat-box{
    width:100%;
    max-width:250px;
}

.image-box{

    max-width:300px;
    height:390px;

    border-radius:25px;

}
}
/* ===== WHY CHOOSE SECTION ===== */
/* ======================================================
WHY CHOOSE US — PREMIUM WOW ANIMATIONS
====================================================== */
.why-choose{
width:100%;
padding:110px 8%;
background:var(--white);
position:relative;
overflow:hidden;
}
/* ===== BG GLOW ===== */
.why-choose::before{
content:"";
position:absolute;
width:500px;
height:500px;

background:
radial-gradient(circle,
rgba(11, 37, 69, 0.10),
transparent 70%);

top:-200px;
left:-150px;

animation:bgFloat 10s ease-in-out infinite;
}
.why-choose::after{
content:"";
position:absolute;
width:450px;
height:450px;

background:
radial-gradient(circle,
rgba(218, 165, 32, 0.10),
transparent 70%);

bottom:-200px;
right:-150px;

animation:bgFloat 12s ease-in-out infinite;
}
/* ======================================================
SECTION TITLE
====================================================== */
.section-title{
text-align:center;
margin-bottom:80px;
opacity:0;
transform:
translateY(100px);

transition:
1.2s cubic-bezier(.19,1,.22,1);

position:relative;
z-index:5;
}
.section-title.show-title{
opacity:1;
transform:translateY(0);
}
.section-title p{
color:var(--gold);
font-size:15px;
letter-spacing:5px;
font-weight:700;
margin-bottom:18px;
text-transform:uppercase;
}
.section-title h2{
font-size:52px;
color:var(--text);
font-weight:900;
line-height:1.2;
}
.section-title h2 span{
color:var(--primary-blue);

animation:textGlow 3s ease-in-out infinite;
}
.title-line{
width:130px;
height:6px;

background:
linear-gradient(
    to right,
    var(--gold),
    #b8860b,
    var(--primary-blue)
);

margin:22px auto 0;

border-radius:50px;

position:relative;

overflow:hidden;
}
/* MOVING SHINE */
.title-line::before{
content:"";

position:absolute;

top:0;
left:-40%;

width:40%;
height:100%;

background:
rgba(255,255,255,.6);

transform:skewX(-25deg);

animation:lineShine 3s linear infinite;
}
/* ======================================================
GRID
====================================================== */
.choose-container{
display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

position:relative;
z-index:5;
}
/* ======================================================
CARD
====================================================== */
.choose-card{
background:#fff;

border-radius:32px;

padding:45px 28px;

text-align:center;

position:relative;

overflow:hidden;

cursor:pointer;

border:
1px solid rgba(11, 37, 69, 0.08);

box-shadow:
0 10px 35px rgba(15,23,42,.06);

opacity:0;

transform:
translateY(120px)
scale(.8)
rotateX(15deg);

transition:
1.2s cubic-bezier(.19,1,.22,1);
}
/* SHOW ON SCROLL */
.choose-card.show-card{
opacity:1;

transform:
translateY(0)
scale(1)
rotateX(0);
}
/* DELAYS */
.choose-card:nth-child(1){
transition-delay:.1s;
}
.choose-card:nth-child(2){
transition-delay:.3s;
}
.choose-card:nth-child(3){
transition-delay:.5s;
}
.choose-card:nth-child(4){
transition-delay:.7s;
}
/* ===== TOP LIGHT ===== */
.choose-card::before{
content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:5px;

background:
linear-gradient(
    90deg,
    var(--gold),
    #b8860b,
    #0B2545
);

animation:borderMove 4s linear infinite;
}
/* ===== GLOW EFFECT ===== */
.choose-card::after{
content:"";

position:absolute;

width:280px;
height:280px;

background:
rgba(218, 165, 32, 0.08);

border-radius:50%;

top:-120px;
right:-120px;

filter:blur(70px);

transition:.7s;
}
.choose-card:hover::after{
transform:scale(1.5);
}
/* ======================================================
HOVER WOW EFFECT
====================================================== */
.choose-card:hover{
transform:
translateY(-22px)
rotateX(8deg)
rotateY(-5deg)
scale(1.04);

box-shadow:
0 20px 50px rgba(218, 165, 32, 0.20),
0 0 40px rgba(11, 37, 69, 0.15);
}
/* ======================================================
ICON
====================================================== */
.icon-box{
width:95px;
height:95px;

margin:auto;
margin-bottom:30px;

border-radius:30px;

background:
linear-gradient(
    135deg,
    var(--gold),
    #b8860b
);

display:flex;
align-items:center;
justify-content:center;

position:relative;

box-shadow:
0 15px 35px rgba(218, 165, 32, 0.25);

transition:.8s;
}
/* ROTATING RING */
.icon-box::before{
content:"";

position:absolute;

inset:-8px;

border-radius:35px;

border:
2px dashed rgba(11, 37, 69, 0.25);

animation:rotateRing 10s linear infinite;
}
/* ICON HOVER */
.choose-card:hover .icon-box{
transform:
rotateY(180deg)
rotateZ(10deg)
scale(1.08);

box-shadow:
0 0 35px rgba(218, 165, 32, 0.4),
0 0 60px rgba(218, 165, 32, 0.25);
}
.icon-box i{
color:#fff;
font-size:36px;
}
/* ======================================================
TEXT
====================================================== */
.choose-card h3{
font-size:28px;
color:var(--text);
margin-bottom:15px;
font-weight:800;

transition:.5s;
}
.choose-card p{
color:#64748B;
font-size:16px;
line-height:1.9;

transition:.5s;
}
/* TEXT HOVER */
.choose-card:hover h3{
color:var(--gold);

transform:
translateY(-3px);
}
.choose-card:hover p{
color:#334155;
}
/* ======================================================
ANIMATIONS
====================================================== */
@keyframes borderMove{
0%{
    left:-100%;
}

100%{
    left:100%;
}
}
@keyframes rotateRing{
0%{
    transform:rotate(0deg);
}

100%{
    transform:rotate(360deg);
}
}
@keyframes bgFloat{
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-30px);
}
}
@keyframes lineShine{
0%{
    left:-40%;
}

100%{
    left:140%;
}
}
@keyframes textGlow{
0%,100%{
    text-shadow:
    0 0 10px rgba(218, 165, 32, 0.2);
}

50%{
    text-shadow:
    0 0 25px rgba(218, 165, 32, 0.5),
    0 0 40px rgba(218, 165, 32, 0.3);
}
}
/* ======================================================
RESPONSIVE
====================================================== */
@media(max-width:1100px){
.choose-container{
    grid-template-columns:
    repeat(2,1fr);
}
}
@media(max-width:768px){
.section-title h2{
    font-size:38px;
}

.choose-container{
    grid-template-columns:1fr;
}
}
@media(max-width:480px){
.why-choose{
    padding:90px 5%;
}

.choose-card{
    padding:40px 24px;
}
}
/* ===== ABOUT SECTION ===== */
.about-section{
width:100%;
padding:100px 8%;
background:var(--white);
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;

overflow:hidden;
}
/* ===== LEFT IMAGES ===== */
.about-images{
width:48%;
position:relative;
}
/* MAIN IMAGE */
.main-image{
width:100%;
height:500px;
border-radius:0 0 120px 0;

overflow:hidden;

border:8px solid #fff;

box-shadow:
0 20px 50px rgba(15,23,42,.1);
}
.main-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}
.main-image:hover img{
transform:scale(1.08);
}
/* SMALL IMAGE */
.small-image{
width:75%;
height:260px;
margin-top:-40px;
margin-left:auto;

border-radius:120px 0 120px 0;

overflow:hidden;

border:8px solid #fff;

position:relative;
z-index:5;

box-shadow:
0 20px 50px rgba(15,23,42,.1);
}
.small-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}
.small-image:hover img{
transform:scale(1.08);
}
/* ===== ADMISSION CARD ===== */
.admission-card{
position:absolute;
left:30px;
bottom:40px;

width:300px;

background:
linear-gradient(
    135deg,
    var(--primary-blue),
    #091C33
);

padding:30px;

border-radius:25px;

color:#fff;

z-index:10;

box-shadow:
0 20px 50px rgba(11, 37, 69, 0.3);

animation:floatingCard 4s ease-in-out infinite;
}
.admission-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:25px;
}
.admission-top i{
font-size:45px;
color: var(--gold);
}
.students{
display:flex;
}
.students img{
width:50px;
height:50px;
border-radius:50%;

border:3px solid #fff;

margin-left:-10px;

object-fit:cover;
}
.admission-card h3{
font-size:32px;
font-weight:700;
}
/* ===== RIGHT CONTENT ===== */
.about-content{
width:50%;
}
/* TAG */
.section-tag{
color:var(--gold);
font-size:15px;
font-weight:600;

letter-spacing:2px;

margin-bottom:20px;

display:flex;
align-items:center;
gap:10px;
}
/* HEADING */
.about-content h2{
font-size:60px;
line-height:1.2;
color:var(--text);

margin-bottom:35px;
}
/* ===== TABS ===== */
.tabs{
display:flex;
gap:20px;
margin-bottom:25px;
}
/* BUTTONS */
.tab-btn{
padding:15px 30px;
border:none;

border-radius:14px;

background:#f0f0f0;

color:var(--text);

font-size:16px;
font-weight:600;

cursor:pointer;

transition:.4s;
}
/* ACTIVE */
.tab-btn.active{
background:
linear-gradient(
135deg,
var(--gold),
#b8860b
);
color:#fff;

box-shadow:
0 12px 30px rgba(218, 165, 32, 0.25);
}
.tab-btn:hover{
transform:translateY(-3px);
}
/* ===== CONTENT ===== */
.tab-content{
display:none;
background:#fff;

padding:30px;

border-radius:20px;

color:var(--text);

font-size:17px;

line-height:1.9;

box-shadow:
0 10px 30px rgba(15,23,42,.05);

animation:fadeContent .5s ease;
}
.tab-content.active{
display:block;
}
/* ===== FEATURES ===== */
.features{
margin-top:35px;
display:grid;
grid-template-columns:repeat(2,1fr);

gap:20px;
}
.feature-item{
display:flex;
align-items:center;
gap:12px;
color:var(--text);

font-size:18px;
font-weight:500;
}
.feature-item i{
color:var(--gold);
font-size:22px;
}
/* ===== BOTTOM ===== */
.bottom-content{
margin-top:40px;
display:flex;
align-items:center;
justify-content:space-between;

gap:30px;
}
/* BUTTON */
.about-btn{
padding:16px 35px;
border-radius:50px;

text-decoration:none;

background:
linear-gradient(
    135deg,
    var(--gold),
    #b8860b
);

color:#fff;

font-weight:600;

box-shadow:
0 15px 35px rgba(218, 165, 32, 0.25);

transition:.4s;
}
.about-btn:hover{
transform:translateY(-5px);
}
/* YEARS BOX */
.years-box{
display:flex;
align-items:center;
gap:18px;
}
.years-box img{
width:75px;
}
.years-box h3{
font-size:60px;
color:var(--text);
}
.years-box p{
color:#64748B;
font-size:18px;
}
/* ===== MARQUEE ===== */
.marquee{
width:100%;
background:
linear-gradient(
90deg,
var(--primary-blue),
#091C33
);
overflow:hidden;

padding:18px 0;
}
.marquee-content{
white-space:nowrap;
color:#fff;

font-size:18px;
font-weight:600;

animation:marqueeMove 18s linear infinite;
}
/* ===== ANIMATIONS ===== */
@keyframes marqueeMove{
0%{
    transform:translateX(100%);
}

100%{
    transform:translateX(-100%);
}
}
@keyframes fadeContent{
from{
    opacity:0;
    transform:translateY(20px);
}

to{
    opacity:1;
    transform:translateY(0);
}
}
@keyframes floatingCard{
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-10px);
}
}
/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
.about-section{
    flex-direction:column;
}

.about-images,
.about-content{
    width:100%;
}

.about-content h2{
    font-size:46px;
}
}
@media(max-width:768px){
.about-section{
    padding:80px 5%;
}

.about-content h2{
    font-size:38px;
}

.features{
    grid-template-columns:1fr;
}

.bottom-content{
    flex-direction:column;
    align-items:flex-start;
}
}
@media(max-width:480px){
.tabs{
    flex-wrap:wrap;
}

.about-content h2{
    font-size:30px;
}

.main-image{
    height:320px;
}

.small-image{
    height:200px;
}

.admission-card{
    width:230px;
    padding:20px;
}

.admission-card h3{
    font-size:24px;
}
}
/* acadmic section */
.academic-section {
background-color: var(--white);
padding: 80px 5%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
gap: 50px;
align-items: flex-start;
}
.content-side {
flex: 1;
position: sticky;
top: 100px; /* Text scroll nahi hoga jab tak images khatam nahi hoti */
}
.sub-heading {
color: var(--gold);
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 15px;
}
.content-side h1 {
font-size: 42px;
color: var(--text);
margin-bottom: 20px;
}
.content-side p {
color: #666;
margin-bottom: 30px;
}
.btn-explore {
background-color: var(--gold);
color: white;
padding: 12px 25px;
border-radius: 30px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: 0.3s;
}
.btn-explore:hover {
background-color: #b8860b;
}
/* --- Stacking Animation Logic --- */
.image-stack-container {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 30px; /* Images ke darmiyan gap */
}
.image-card {
position: sticky;
top: 50px; /* Har image screen ke top par yahan aakar rukegi */
width: 100%;
height: 400px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
background: white;
border: 4px solid #fff;
}
.image-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* Card Label Overlay */
.card-label {
position: absolute;
bottom: 30px;
left: 30px;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
/* Stacking sequence */
.card-1 { z-index: 1; }
.card-2 { z-index: 2; margin-top: 20px; }
.card-3 { z-index: 3; margin-top: 20px; }
/* Mobile Responsive */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.content-side {
position: relative;
top: 0;
margin-bottom: 40px;
}
}
/* courses section */
/* ================= COURSES SECTION ================= */
.courses-section{
width:100%;
padding:100px 8%;

background:var(--white);

position:relative;
overflow:hidden;
}
/* ================= SECTION TITLE ================= */
.courses-title{
text-align:center;
margin-bottom:70px;
}
.courses-title p{
color:var(--gold);

letter-spacing:4px;

font-size:14px;
font-weight:600;

margin-bottom:15px;

text-transform:uppercase;
}
.courses-title h2{
font-size:52px;
font-weight:800;

color:var(--text);

line-height:1.3;

animation:
textGlow 3s ease-in-out infinite alternate;
}
.courses-title h2 span{
color:var(--gold);
}
/* TITLE LINE */
.title-line{
width:120px;
height:5px;

margin:20px auto 0;

border-radius:50px;

background:linear-gradient(
    to right,
    var(--gold),
    #0B2545
);

animation:lineMove 3s linear infinite alternate;
}
/* ================= COURSES CONTAINER ================= */
.courses-container{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:35px;
}
/* ================= COURSE CARD ================= */
.course-card{
background:#fff;

padding:45px 35px;

border-radius:30px;

position:relative;

overflow:hidden;

border:1px solid rgba(11, 37, 69, 0.08);

cursor:pointer;

opacity:0;

transform:
translateY(80px)
scale(.9);

animation:
revealUp 1s ease forwards,
cardFloat 5s ease-in-out infinite;

box-shadow:
0 10px 30px rgba(15,23,42,.06);

transition:.5s ease;
}
/* DELAY */
.course-card:nth-child(1){
animation-delay:.1s;
}
.course-card:nth-child(2){
animation-delay:.2s;
}
.course-card:nth-child(3){
animation-delay:.3s;
}
.course-card:nth-child(4){
animation-delay:.4s;
}
.course-card:nth-child(5){
animation-delay:.5s;
}
.course-card:nth-child(6){
animation-delay:.6s;
}
/* TOP BORDER */
.course-card::before{
content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:5px;

background:linear-gradient(
    90deg,
    var(--gold),
    #b8860b,
    #0B2545
);

animation:borderMove 4s linear infinite;
}
/* GLOW EFFECT */
.course-card::after{
content:"";

position:absolute;

width:250px;
height:250px;

background:
rgba(218, 165, 32, 0.08);

border-radius:50%;

top:-120px;
right:-120px;

filter:blur(60px);

transition:.6s;
}
.course-card:hover::after{
transform:scale(1.4);
}
/* HOVER EFFECT */
.course-card:hover{
transform:
translateY(-18px)
scale(1.03);

box-shadow:
0 0 25px rgba(218, 165, 32, 0.20),
0 0 45px rgba(218, 165, 32, 0.15),
0 25px 60px rgba(11, 37, 69, 0.20);
}
/* ================= ICON ================= */
.course-icon{
width:90px;
height:90px;

border-radius:28px;

background:linear-gradient(
    135deg,
    var(--gold),
    #b8860b
);

display:flex;
align-items:center;
justify-content:center;

margin-bottom:30px;

position:relative;

transition:.6s;

animation:
iconPulse 3s infinite;

box-shadow:
0 15px 35px rgba(218, 165, 32, 0.25);
}
/* ICON RING */
.course-icon::before{
content:"";

position:absolute;

width:120%;
height:120%;

border-radius:30px;

border:2px solid rgba(11, 37, 69, 0.15);

animation:rotateRing 6s linear infinite;
}
/* ICON HOVER */
.course-card:hover .course-icon{
transform:
rotateY(180deg)
scale(1.08);

box-shadow:
0 0 25px rgba(218, 165, 32, 0.45),
0 0 50px rgba(218, 165, 32, 0.25);
}
.course-icon i{
color:#fff;

font-size:36px;
}
/* ================= TEXT ================= */
.course-card h3{
font-size:28px;

color:var(--text);

margin-bottom:18px;

font-weight:700;

transition:.4s;
}
/* HOVER */
.course-card:hover h3{
color:var(--gold);

letter-spacing:.5px;
}
/* PARAGRAPH */
.course-card p{
color:#64748B;

line-height:1.9;

margin-bottom:30px;

font-size:16px;
}
/* ================= BUTTON ================= */
.course-card a{
text-decoration:none;

color:var(--gold);

font-weight:600;

display:inline-flex;
align-items:center;

gap:10px;

transition:.4s;
}
.course-card:hover a{
gap:15px;
}
/* ICON */
.course-card a i{
transition:.4s;
}
.course-card:hover a i{
transform:
translateX(6px);
}
/* ================= ANIMATIONS ================= */
/* CARD REVEAL */
@keyframes revealUp{
0%{

    opacity:0;

    transform:
    translateY(80px)
    scale(.85);

}

100%{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

}
}
/* FLOATING */
@keyframes cardFloat{
0%,100%{

    transform:
    translateY(0);

}

50%{

    transform:
    translateY(-10px);

}
}
/* BORDER */
@keyframes borderMove{
0%{
    left:-100%;
}

100%{
    left:100%;
}
}
/* TEXT GLOW */
@keyframes textGlow{
0%{

    text-shadow:
    0 0 0 rgba(218, 165, 32, 0);

}

100%{

    text-shadow:
    0 0 10px rgba(218, 165, 32, 0.25),
    0 0 20px rgba(218, 165, 32, 0.15);

}
}
/* LINE */
@keyframes lineMove{
0%{

    width:100px;

}

100%{

    width:160px;

}
}
/* ICON PULSE */
@keyframes iconPulse{
0%{

    box-shadow:
    0 0 0 rgba(218, 165, 32, 0.4);

}

70%{

    box-shadow:
    0 0 25px rgba(218, 165, 32, 0.15);

}

100%{

    box-shadow:
    0 0 0 rgba(218, 165, 32, 0);

}
}
/* ROTATE RING */
@keyframes rotateRing{
0%{

    transform:rotate(0deg);

}

100%{

    transform:rotate(360deg);

}
}
/* ================= RESPONSIVE ================= */
@media(max-width:992px){
.courses-title h2{

    font-size:42px;
}
}
@media(max-width:768px){
.courses-section{

    padding:80px 5%;
}

.courses-title h2{

    font-size:34px;
}

.course-card{

    padding:35px 25px;
}
}
@media(max-width:480px){
.courses-title h2{

    font-size:28px;
}

.course-card h3{

    font-size:24px;
}

.course-icon{

    width:75px;
    height:75px;
}

.course-icon i{

    font-size:28px;
}
}
 /* TEachers */


 /* ================= STAFF GRID SECTION ================= */
/* ================= OUR TEAM SECTION ================= */
/* ================= OUR TEAM SECTION ================= */
/* ================= STAFF SECTION ================= */
/* =========================
   STAFF SECTION
========================= */

/* =========================
STAFF SECTION
========================= */

.staff-section{

    width:100%;

    padding:100px 8%;

    background:#F8FAFC;
}

/* =========================
TITLE
========================= */

.staff-title{

    text-align:center;

    margin-bottom:70px;
}

.staff-title p{

    color:var(--text);;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:15px;
}

.staff-title h2{

    font-size:52px;

    
    color: var(--gold);

    font-weight:800;

    line-height:1.3;
}

.staff-title h2 span{

    color:var(--primary-blue);
}

/* =========================
STAFF GRID
========================= */

.staff-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:35px;
}

/* =========================
STAFF CARD
========================= */

.staff-card{

    background:var(--white);

    border-radius:30px;

    padding:35px 30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(11,37,69,.08);

    box-shadow:
    0 10px 35px rgba(0,0,0,.05);

    transition:.6s ease;

    opacity:0;

    transform:
    translateY(60px);
}

/* SHOW ANIMATION */

.staff-card.show-card{

    opacity:1;

    transform:
    translateY(0);
}

/* TOP LINE */

.staff-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
    linear-gradient(
        90deg,
        var(--gold),
        var(--primary-blue),
        var(--green)
    );

    transform:scaleX(0);

    transition:.5s;
}

/* HOVER */

.staff-card:hover::before{

    transform:scaleX(1);
}

.staff-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 20px 50px rgba(11,37,69,.12),
    0 0 25px rgba(218,165,32,.15);

    cursor:pointer;
}

/* HOVER TEXT */

.staff-card h3,
.staff-card span{

    transition:.4s ease;
}

.staff-card:hover h3{

    color:var(--gold);
}

.staff-card:hover span{

    color:var(--primary-blue);
}

/* =========================
IMAGE
========================= */

.staff-image{

    width:170px;
    height:170px;

    margin:auto;
    margin-bottom:25px;

    border-radius:50%;

    border:5px solid var(--gold);

    overflow:hidden;

    position:relative;

    transition:.5s;

    box-shadow:
    0 10px 30px rgba(218,165,32,.18);
}

.staff-card:hover .staff-image{

    transform:
    scale(1.05)
    rotate(2deg);
}

.staff-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* =========================
WHATSAPP BUTTON
========================= */

.staff-whatsapp{

    position:absolute;

    bottom:5px;
    right:5px;

    width:45px;
    height:45px;

    border-radius:50%;

    background:#25D366;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:20px;

    box-shadow:
    0 8px 20px rgba(37,211,102,.35);

    transition:.4s;
}

.staff-whatsapp:hover{

    transform:scale(1.12);
}

/* =========================
TEXT
========================= */

.staff-card h3{

    font-size:30px;

    color:var(--text);

    margin-bottom:10px;

    font-weight:800;
}

.staff-card h4{

    color:var(--primary-blue);

    font-size:24px;

    margin-bottom:12px;

    font-weight:800;
}
#green{
    color: green;
}
#red{
    color: red;
}
.staff-card span{

    display:block;

    color:var(--gold);

    font-size:20px;

    font-weight:700;

    margin-bottom:18px;
}

.staff-card p{

    color:#64748B;

    line-height:1.9;

    font-size:15px;
}

/* =========================
COMING SOON
========================= */

.coming-card{

    background:
    linear-gradient(
        135deg,
        var(--primary-blue),
        #091C33
    );
}

.coming-card h3,
.coming-card h4,
.coming-card p{

    color:#fff;
}

.coming-card span{

    color:var(--gold);
}

/* =========================
FORMER SECTION
========================= */

.former-section{

    margin-top:90px;
}

/* =========================
FORMER TITLE
========================= */

.former-title{

    text-align:center;

    margin-bottom:50px;
}

.former-title h2{

    font-size:42px;

    color:var(--text);

    font-weight:800;
}

.former-title span{

    color:var(--gold);
}

/* =========================
FORMER GRID
========================= */

.former-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

/* =========================
FORMER CARD
========================= */

.former-card{

    background:var(--white);

    border-radius:25px;

    padding:30px;

    text-align:center;

    transition:.5s;

    border:1px solid rgba(11,37,69,.08);

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.former-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 40px rgba(11,37,69,.12),
    0 0 20px rgba(218,165,32,.15);
}

/* IMAGE */

.former-card img{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--gold);

    margin-bottom:20px;
}

/* TEXT */

.former-card h3{

    font-size:24px;

    color:var(--text);

    margin-bottom:12px;

    font-weight:700;
}

.former-card p{

    color:#64748B;

    line-height:1.8;

    font-size:15px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

    .staff-grid,
    .former-grid{

        grid-template-columns:
        repeat(2,1fr);
    }
}

/* =========================
TABLET
========================= */

@media(max-width:768px){

    .staff-section{

        padding:80px 6%;
    }

    .staff-title h2{

        font-size:38px;
    }

    .former-title h2{

        font-size:34px;
    }

    .staff-grid,
    .former-grid{

        grid-template-columns:1fr;
    }

    .staff-card{

        padding:30px 22px;
    }

    .staff-card h3{

        font-size:26px;
    }

    .staff-card h4{

        font-size:19px;
    }

    .staff-image{

        width:150px;
        height:150px;
    }
}

/* =========================
MOBILE
========================= */

@media(max-width:480px){

    .staff-section{

        padding:70px 5%;
    }

    .staff-title h2{

        font-size:30px;
    }

    .former-title h2{

        font-size:28px;
    }

    .staff-card p,
    .former-card p{

        font-size:14px;
    }

    .staff-image{

        width:130px;
        height:130px;
    }

    .staff-card h3{

        font-size:24px;
    }

    .staff-card h4{

        font-size:17px;
    }

    .staff-card span{

        font-size:17px;
    }
}


/* ================= FAQ SECTION ================= */
/* ================= FAQ SECTION ================= /
/ ================= FAQ / TESTIMONIAL SECTION ================= */
.fsp-faq{
width:100%;
padding:120px 8%;
background:linear-gradient(
180deg,
var(--white),
#f0f0f0
);
position:relative;
overflow:hidden;
}
/* ================= BACKGROUND GLOW ================= */
.faq-bg-circle{
position:absolute;
border-radius:50%;
filter:blur(100px);
z-index:1;
}
.faq-circle-1{
width:350px;
height:350px;
background:rgba(11, 37, 69, 0.12);
top:-100px;
left:-100px;

animation:floatGlow 8s ease-in-out infinite;
}
.faq-circle-2{
width:300px;
height:300px;
background:rgba(218, 165, 32, 0.10);
bottom:-120px;
right:-80px;

animation:floatGlow 10s ease-in-out infinite;
}
/* ================= HEADING ================= */
.faq-heading{
text-align:center;
margin-bottom:80px;
position:relative;
z-index:10;
}
.faq-subtitle{
color:var(--gold);
font-size:14px;
font-weight:700;
letter-spacing:4px;
margin-bottom:15px;
}
.faq-heading h2{
font-size:52px;
font-weight:800;
color:var(--text);
line-height:1.2;
}


.faq-heading h2 span{
color:var(--gold);
}
.faq-line{
width:120px;
height:5px;
border-radius:50px;
margin:22px auto 0;

background:linear-gradient(
    90deg,
    var(--gold),
    #b8860b
);
}
/* ================= FAQ GRID ================= */
.faq-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
position:relative;
z-index:10;
}
/* ================= FAQ CARD ================= */
.faq-card{
position:relative;
background:rgba(255,255,255,.75);

backdrop-filter:blur(20px);

border:1px solid rgba(11, 37, 69, 0.10);

border-radius:28px;

padding:40px 35px;

overflow:hidden;

transition:.6s cubic-bezier(.22,1,.36,1);

cursor:pointer;

box-shadow:
0 10px 30px rgba(15,23,42,.05);

opacity:0;
transform:
translateY(100px)
scale(.9)
rotateX(15deg);
}
/* SHOW ANIMATION */
.faq-card.active{
opacity:1;
transform:
translateY(0)
scale(1)
rotateX(0);
}
/* TOP LIGHT */
.faq-card::before{
content:"";
position:absolute;

top:-120px;
right:-120px;

width:240px;
height:240px;

background:rgba(218, 165, 32, 0.10);

border-radius:50%;

filter:blur(40px);

transition:.6s;
}
/* SHINE EFFECT */
.faq-card::after{
content:"";
position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
);

transition:.8s;
}
/* HOVER */
.faq-card:hover{
transform:
translateY(-18px)
rotateX(-5deg)
rotateY(4deg)
scale(1.02);

border-color:rgba(218, 165, 32, 0.25);

box-shadow:
0 20px 40px rgba(218, 165, 32, 0.18),
0 10px 20px rgba(15,23,42,.08);
}
.faq-card:hover::after{
left:120%;
}
.faq-card:hover::before{
transform:scale(1.4);
}
/* ================= NUMBER ================= */
.faq-number{
position:absolute;
top:25px;
right:25px;
font-size:50px;
font-weight:900;

color:rgba(11, 37, 69, 0.08);
}
/* ================= ICON ================= */
.faq-icon{
width:85px;
height:85px;
border-radius:24px;

background:linear-gradient(
    135deg,
    var(--gold),
    #b8860b
);

display:flex;
align-items:center;
justify-content:center;

margin-bottom:28px;

position:relative;

box-shadow:
0 12px 30px rgba(218, 165, 32, 0.25);

transition:.6s;
}
/* ICON GLOW */
.faq-icon::before{
content:"";
position:absolute;

inset:-8px;

border-radius:30px;

border:2px dashed rgba(11, 37, 69, 0.20);

animation:rotateRing 8s linear infinite;
}
.faq-card:hover .faq-icon{
transform:
rotateY(180deg)
scale(1.08);
}
.faq-icon i{
color:#fff;
font-size:34px;
}
/* ================= TEXT ================= */
.faq-content h3{
font-size:24px;
color:var(--text);
margin-bottom:18px;
line-height:1.4;
font-weight:800;
transition:.4s;
}
.faq-content p{
color:#64748B;
line-height:1.9;
font-size:15px;
transition:.4s;
}
/* TEXT HOVER */
.faq-card:hover h3{
color:var(--gold);
transform:translateX(5px);
}
.faq-card:hover p{
color:#334155;
}
/* ================= ANIMATIONS ================= */
@keyframes rotateRing{
from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}
}
@keyframes floatGlow{
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-20px);
}
}
/* ================= SCROLL ANIMATION ================= */
.reveal-top{
opacity:0;
transform:translateY(80px);
transition:1s cubic-bezier(.22,1,.36,1);
}
.reveal-top.active{
opacity:1;
transform:translateY(0);
}
.reveal-card{
transition:1s cubic-bezier(.22,1,.36,1);
}
/* ================= RESPONSIVE ================= */
@media(max-width:1100px){
.faq-container{
    grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.faq-container{
    grid-template-columns:1fr;
}

.faq-heading h2{
    font-size:38px;
}

.faq-card{
    padding:35px 28px;
}
}
@media(max-width:480px){
.fsp-faq{
    padding:90px 5%;
}

.faq-heading h2{
    font-size:30px;
}

.faq-content h3{
    font-size:20px;
}

.faq-icon{
    width:75px;
    height:75px;
}
}
/* ================= GALLERY SECTION ================= /
/ ================= VIDEO GALLERY ================= */
.video-gallery{
width:100%;
padding:120px 8%;
background:var(--white);
overflow:hidden;
}
/* ================= TITLE ================= */
.gallery-title{
text-align:center;
margin-bottom:50px;
}
.gallery-title p{
color:var(--gold);
font-size:14px;
letter-spacing:4px;
font-weight:700;
margin-bottom:15px;
}
.gallery-title h2{
font-size:55px;
color:var(--text);
font-weight:800;
}
.gallery-title h2 span{
color:var(--gold);
}
/* ================= FILTER BUTTONS ================= */
.video-filters{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
flex-wrap:wrap;
margin-bottom:60px;
}
.video-btn{
padding:14px 34px;

border-radius:50px;

border:2px solid var(--gold);

background:transparent;

color:var(--gold);

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.4s;
}
.video-btn.active,
.video-btn:hover{
background:
linear-gradient(
    135deg,
    var(--gold),
    #b8860b
);

color:#fff;

transform:translateY(-5px);

box-shadow:
0 15px 35px rgba(218, 165, 32, 0.25);
}
/* ================= GRID ================= */
.video-grid{
display:grid;

grid-template-columns:
repeat(3,1fr);

grid-auto-rows:260px;

gap:25px;
}
/* BIG CARD */
.big-card{
grid-row:span 2;
}
/* WIDE CARD */
.wide-card{
grid-column:span 2;
}
/* ================= CARD ================= */
.video-card{
position:relative;

overflow:hidden;

border-radius:28px;

background:#fff;

box-shadow:
0 15px 40px rgba(15,23,42,.08);

transition:.5s;

cursor:pointer;
}
/* VIDEO */
.video-card video{
width:100%;
height:100%;

object-fit:cover;

transition:1s;
}
/* CONTENT */
.video-content{
position:absolute;

left:0;
bottom:0;

width:100%;

padding:25px;

background:
linear-gradient(
    to top,
    rgba(15,23,42,.95),
    transparent
);

color:#fff;
}
.video-content span{
color:#93C5FD; /* Keeping light blue as accent for video tags or replace with gold? Let's keep for contrast */

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

display:block;

margin-bottom:10px;
}
.video-content h3{
font-size:28px;

font-weight:800;

line-height:1.3;

transform:translateY(20px);

opacity:0;

transition:.5s;
}
/* HOVER */
.video-card:hover{
transform:
translateY(-10px);

box-shadow:
0 25px 50px rgba(218, 165, 32, 0.18);
}
.video-card:hover video{
transform:scale(1.06);
}
.video-card:hover .video-content h3{
transform:translateY(0);

opacity:1;
}
/* ================= FILTER HIDE ================= */
.video-card.hide{
display:none;
}
/* ================= SCROLL ANIMATIONS ================= */
.scroll-top,
.scroll-bottom,
.scroll-left,
.scroll-right,
.scroll-scale{
opacity:0;

transition:1s cubic-bezier(.22,1,.36,1);
}
.scroll-top{
transform:translateY(-80px);
}
.scroll-bottom{
transform:translateY(80px);
}
.scroll-left{
transform:translateX(-80px);
}
.scroll-right{
transform:translateX(80px);
}
.scroll-scale{
transform:scale(.7);
}
.show-animate{
opacity:1 !important;

transform:
translate(0)
scale(1) !important;
}
/* ================= MOBILE ================= */
@media(max-width:992px){
.video-grid{

    grid-template-columns:
    repeat(2,1fr);
}

.wide-card{
    grid-column:span 2;
}
}
@media(max-width:768px){
.gallery-title h2{
    font-size:38px;
}

.video-grid{

    grid-template-columns:1fr;

    grid-auto-rows:260px;
}

.big-card,
.wide-card{

    grid-column:span 1;
    grid-row:span 1;
}

.video-content h3{
    font-size:22px;
}

.video-btn{
    padding:12px 25px;
    font-size:14px;
}
}
/* =========================
ROOT
========================= */

:root{

    --gold:#DAA520;
    --gold-dark:#b8860b;

    --white:#fff;

    --text:#0F172A;

    --primary-blue:#0B2545;
    --dark-blue:#091C33;

    --gray:#CBD5E1;
}

/* =========================
APPLY SECTION
========================= */

.apply-section{

    width:100%;

    padding:100px 8%;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;

    background:
    linear-gradient(
        135deg,
        #0B2545,
        #091C33
    );

    position:relative;

    overflow:hidden;
}

/* =========================
LEFT CONTENT
========================= */

.apply-content{

    width:50%;
}

.apply-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(218,165,32,.12);

    border:
    1px solid rgba(218,165,32,.25);

    color:var(--gold);

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:24px;

    text-transform:uppercase;
}

.badge-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--gold);

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.5);
        opacity:.5;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

.apply-content h2{

    font-size:58px;

    line-height:1.2;

    color:#fff;

    margin-bottom:25px;

    font-weight:800;
}

.apply-content h2 span{

    color:var(--gold);
}

.apply-text{

    color:var(--gray);

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;
}

/* =========================
FEATURES
========================= */

.apply-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;
}

.feature-box{

    background:
    rgba(255,255,255,.07);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:18px 20px;

    color:#fff;

    display:flex;
    align-items:center;
    gap:12px;

    transition:.4s;
}

.feature-box i{

    width:38px;
    height:38px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:14px;
}

.feature-box:hover{

    transform:translateY(-5px);

    background:
    rgba(255,255,255,.1);

    border-color:
    rgba(218,165,32,.2);
}

/* =========================
FORM
========================= */

.apply-form-box{

    width:450px;

    background:
    rgba(255,255,255,.07);

    border:
    1px solid rgba(255,255,255,.1);

    backdrop-filter:blur(16px);

    border-radius:30px;

    padding:40px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.3);

    position:relative;

    overflow:hidden;
}

.apply-form-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        var(--gold),
        #f5d77d,
        var(--gold)
    );
}

.apply-form h3{

    text-align:center;

    color:#fff;

    font-size:34px;

    margin-bottom:30px;

    font-weight:800;
}

/* =========================
INPUT BOX
========================= */

.input-box{

    position:relative;

    margin-bottom:22px;
}

/* =========================
INPUTS
========================= */

.input-box input,
.input-box textarea,
.input-box select{

    width:100%;

    background:
    rgba(255,255,255,.06);

    border:
    1.5px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:17px 20px;

    outline:none;

    color:#fff;

    font-size:15px;

    transition:.35s;

    font-family:inherit;
}

/* =========================
ICONS
========================= */

.input-box i{

    position:absolute;

    right:18px;
    top:50%;

    transform:translateY(-50%);

    color:rgba(255,255,255,.5);

    transition:.35s;
}

.textarea-box i{

    top:24px;
}

/* =========================
TEXTAREA
========================= */

.input-box textarea{

    min-height:120px;

    resize:none;
}

/* =========================
PLACEHOLDER
========================= */

.input-box input::placeholder,
.input-box textarea::placeholder{

    color:#CBD5E1;
}

/* =========================
SELECT BOX
========================= */

.select-box{

    position:relative;
}

.select-box select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

    padding-right:55px;

    color:#fff;
}

/* OPTIONS */

.select-box select option{

    background:#102642;

    color:#fff;

    padding:15px;
}

/* =========================
FOCUS
========================= */

.input-box input:focus,
.input-box textarea:focus,
.input-box select:focus{

    border-color:var(--gold);

    background:
    rgba(255,255,255,.09);

    box-shadow:
    0 0 0 4px rgba(218,165,32,.12),
    0 10px 30px rgba(218,165,32,.12);

    transform:translateY(-2px);
}

.input-box input:focus + i,
.input-box textarea:focus + i,
.input-box select:focus + i{

    color:var(--gold);
}

/* =========================
HOVER
========================= */

.input-box input:hover,
.input-box textarea:hover,
.input-box select:hover{

    border-color:
    rgba(218,165,32,.4);
}

/* =========================
BUTTON
========================= */

.apply-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );

    color:#fff;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    transition:.4s;

    margin-top:10px;

    box-shadow:
    0 12px 30px rgba(218,165,32,.25);
}

.apply-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(218,165,32,.35);
}

.apply-btn i{

    transition:.4s;
}

.apply-btn:hover i{

    transform:translateX(5px);
}

/* =========================
MESSAGE
========================= */

#formMessage{

    margin-top:18px;

    text-align:center;

    color:#fff;

    font-size:15px;

    font-weight:600;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

    .apply-section{

        flex-direction:column;
    }

    .apply-content{

        width:100%;

        text-align:center;
    }

    .apply-form-box{

        width:100%;
        max-width:500px;
    }
}

@media(max-width:768px){

    .apply-section{

        padding:80px 5%;
    }

    .apply-content h2{

        font-size:42px;
    }

    .apply-features{

        grid-template-columns:1fr;
    }

    .apply-form-box{

        padding:35px 25px;
    }
}

@media(max-width:480px){

    .apply-content h2{

        font-size:32px;
    }

    .apply-text{

        font-size:15px;
    }

    .apply-form-box{

        padding:28px 20px;

        border-radius:22px;
    }

    .apply-form h3{

        font-size:28px;
    }

    .input-box input,
    .input-box textarea,
    .input-box select{

        padding:15px 16px;

        font-size:14px;

        border-radius:15px;
    }

    .apply-btn{

        height:52px;

        font-size:14px;
    }
}

/* ================= FOOTER SECTION ================= */
.footer-section{
width:100%;

background:
linear-gradient(
    135deg,
    var(--primary-blue),
    #091C33
);

color:#fff;

position:relative;

overflow:hidden;
}
/* TOP */
.footer-top{
padding:90px 8% 50px;
}
/* CONTAINER */
.footer-container{
max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:50px;
}
/* BOX */
.footer-box{
animation:
fadeUp 1s ease;
}
/* LOGO */
.footer-logo{
font-size:32px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

color:#fff;
}
.footer-logo span{
display:block;

font-size:13px;

letter-spacing:4px;

margin-top:6px;

color:var(--gold);
}
/* TEXT */
.footer-text{
color:#CBD5E1;

line-height:1.9;

font-size:15px;

margin-bottom:30px;
}
/* SOCIALS */
.footer-socials{
display:flex;

gap:14px;
}
.footer-socials a{
width:42px;
height:42px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:
rgba(255,255,255,.08);

color:#fff;

text-decoration:none;

transition:.4s;
}
.footer-socials a:hover{
background:var(--gold);

color: var(--primary-blue);

transform:
translateY(-5px);

box-shadow:
0 10px 25px rgba(218, 165, 32, 0.35);
}
/* TITLES */
.footer-box h3{
font-size:22px;

margin-bottom:25px;

position:relative;
}
/* UNDERLINE */
.footer-box h3::after{
content:"";

position:absolute;

left:0;
bottom:-10px;

width:60px;
height:3px;

border-radius:50px;

background:
linear-gradient(
    90deg,
    var(--gold),
    #b8860b
);
}
/* LINKS */
.footer-box ul{
list-style:none;
}
.footer-box ul li{
margin-bottom:16px;
}
.footer-box ul li a{
color:#CBD5E1;

text-decoration:none;

transition:.3s;

position:relative;
}
/* HOVER */
.footer-box ul li a:hover{
color:var(--gold);

padding-left:8px;
}
/* CONTACT */
.footer-contact li{
display:flex;
align-items:flex-start;

gap:12px;

color:#CBD5E1;

line-height:1.7;
}
.footer-contact i{
color:var(--gold);

margin-top:4px;
}
/* BOTTOM */
.footer-bottom{
border-top:
1px solid rgba(255,255,255,.08);

padding:22px 5%;

text-align:center;

color:#94A3B8;

font-size:14px;
}
/* ================= ANIMATION ================= */
@keyframes fadeUp{
from{

    opacity:0;

    transform:
    translateY(40px);
}

to{

    opacity:1;

    transform:
    translateY(0);
}
}
/* ================= MOBILE ================= */
@media(max-width:768px){
.footer-top{

    padding:70px 5% 40px;
}

.footer-container{

    gap:40px;
}

.footer-logo{

    font-size:26px;
}

.footer-box h3{

    font-size:20px;
}

.footer-text{

    font-size:14px;
}
}


/* ========================================
   ULTRA AI CHATBOT - CLEAN OPTIMIZED STYLE
   ======================================== */

/* CHATBOT MAIN WRAPPER */
.wa-chatbot {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: .5s ease;
}

/* SHOW AFTER PRELOADER */
.wa-chatbot.show-chatbot {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   CHAT MAIN TOGGLE BUTTON (SOLID GOLD)
   ======================================== */
#chatToggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #DAA520; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; 
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.4); 
    transition: .4s ease;
}

#chatToggle:hover {
    transform: scale(1.1) rotate(5deg);
    background: #b8860b; 
    box-shadow: 0 12px 35px rgba(218, 165, 32, 0.6);
}

/* ========================================
   MAIN CHAT CONTAINER BOX
   ======================================== */
.chat-box {
    position: absolute;
    right: 0;
    bottom: 85px;
    width: 370px;
    height: 470px;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.95);
    transition: .4s ease;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
}

/* ACTIVE STATE */
.chat-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ========================================
   CHAT INTERFACE COMPONENTS
   ======================================= */

/* HEADER */
.chat-header {
    width: 100%;
    height: 75px;
    background: linear-gradient(135deg, #0B2545, #091C33);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    color: #fff;
}

.chat-header h3 {
    font-size: 20px;
    font-weight: 700;
}

#closeChat {
    font-size: 24px;
    cursor: pointer;
    transition: .3s;
}

#closeChat:hover {
    transform: rotate(90deg);
}

/* CHAT MESSAGES BODY CONTAINER */
.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* MESSAGES CORE RULES */
.bot-message,
.user-message {
    max-width: 90%;
    padding: 14px 18px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 14px;
    animation: fadeUp .4s ease;
}

/* BOT MESSAGE */
.bot-message {
    background: #fff;
    color: #1F2937;
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
}

/* USER MESSAGE */
.user-message {
    background: linear-gradient(135deg, #0B2545, #091C33);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 5px;
}

/* INTERACTIVE BOTTOM INPUT AREA */
.chat-input {
    width: 100%;
    min-height: 78px;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px; /* بٹنز اور ان پٹ کے بیچ خوبصورت گیپ */
}

.chat-input input {
    flex: 1;
    height: 50px;
    border: none;
    outline: none;
    background: #F1F5F9;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px;
}

/* 🎤 VOICE & 🚀 SEND ACTION BUTTONS COMBO STYLE */
.chat-input button, 
#voiceBtn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #DAA520, #b8860b);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* مائیک بٹن ہوور ایفیکٹ اور لک اپ گریڈ */
#voiceBtn {
    background: linear-gradient(135deg, #64748b, #475569); /* مائیک کو گرے پریمیم لک دی ہے تاکہ سینڈ بٹن الگ نظر آئے */
}

.chat-input button:hover, 
#voiceBtn:hover {
    transform: scale(1.08);
}

/* ========================================
   ANIMATIONS & LOADER DOTS
   ======================================== */

/* TYPING MESSAGE ANIMATION STRUCTURE */
.typing-message, .typing {
    display: flex;
    align-items: center;
    gap: 6px;
}

.typing-message span, .typing span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94A3B8;
    animation: bounce 1.3s infinite;
}

.typing-message span:nth-child(2), .typing span:nth-child(2) {
    animation-delay: .2s;
}

.typing-message span:nth-child(3), .typing span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* WEBKIT SCROLLBAR PLUGINS */
.chat-body::-webkit-scrollbar {
    width: 5px;
}

.chat-body::-webkit-scrollbar-thumb {
    background: #DAA520;
    border-radius: 20px;
}

/* ========================================
   RESPONSIVE MEDIA QUERIES (BREAKPOINTS)
   ======================================== */

/* TABLET SETUP */
@media(max-width: 768px) {
    .chat-box {
        width: 330px;
        height: 500px;
    }
}

/* STANDARD MOBILE VIEWPORTS */
@media(max-width: 576px) {
    .wa-chatbot {
        right: 15px;
        bottom: 15px;
    }
    .chat-box {
        width: calc(100vw - 30px);
        max-width: 360px;
        height: 70vh;
        bottom: 78px;
    }
    #chatToggle {
        width: 58px;
        height: 58px;
        font-size: 26px;
    }
    .chat-input button, 
    #voiceBtn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
}

/* EXTRA SMALL SCREEN DEVICES */
@media(max-width: 400px) {
    .chat-box {
        width: calc(100vw - 20px);
        height: 68vh;
    }
    .chat-header h3 {
        font-size: 16px;
    }
    .bot-message, .user-message {
        font-size: 13px;
    }
}