/* =====================
   VARIABLES
===================== */

:root{

    --bg:#000E2B;
    --bg-2:#01153e;

    --card:#0B1C49;
    --card-2:#12285F;

    --gold:#E8CD02;
    --gold-soft:#f5df02;

    --text:#F5F7FF;
    --muted:#B7C1E0;

    --border:rgba(232,205,2,.16);

    --shadow:0 18px 50px rgba(0,0,0,.28);

}





/* =====================
   RESET
===================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{


    background:

    linear-gradient(

    135deg,

    var(--bg),

    var(--bg-2)

    );


    color:var(--text);


    font-family:'Montserrat',sans-serif;


    overflow-x:hidden;

}




.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}







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


header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}



.navbar{


    height:75px;


    width:100%;


    padding:0 5%;


    display:flex;


    align-items:center;


    justify-content:space-between;



    background:var(--bg);


    border-bottom:

    1px solid var(--border);


    position:fixed;


    top:0;


}




.logo{


    display:flex;


    align-items:center;


    gap:12px;


}




.logo img{


    width:48px;


    height:48px;


    object-fit:contain;


}



.logo h2{


    font-family:'Cinzel',serif;


    color:var(--gold);


    font-size:25px;


    letter-spacing:3px;


}




nav ul{


    display:flex;


    gap:35px;


    list-style:none;


}



nav a{


    text-decoration:none;


    color:var(--text);


    font-size:14px;


    transition:.3s;


}




nav a:hover,

nav a.active{


    color:var(--gold);


}






.login-btn{


    padding:12px 25px;


    border-radius:30px;


    font-weight:700;


    font-size:13px;


    text-decoration:none;


    background:


    linear-gradient(

    135deg,

    var(--gold-soft),

    var(--gold)

    );


    color:var(--bg);


}







/* =====================
   HERO
===================== */
.hero{
    min-height:100vh;
    padding-top:75px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
        90deg,
        rgba(0,14,43,1),
        rgba(0,14,43,.92) 40%,
        rgba(0,14,43,.55) 70%,
        rgba(0,14,43,.15)
        );
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: right 0%;

    z-index: 0;
    pointer-events: none;

    opacity: 0.58;

    filter: brightness(0.85)
            contrast(1.02)
            saturate(0.95);
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,14,43,.15),
        rgba(0,14,43,.08) 45%,
        rgba(0,14,43,.02) 100%
    );
    z-index:1;
}

.hero::after{
    content:"";
    position:absolute;
    right:-150px;
    top:50%;
    width:450px;
    height:450px;
    transform:translateY(-50%);
    background:
        radial-gradient(
        circle,
        rgba(232,205,2,.22),
        transparent 70%
        );
    filter:blur(60px);
    z-index:1;
}

.hero-wrapper{
    min-height:calc(100vh - 75px);
    display:flex;
    align-items:center;
    position:relative;
    z-index:5;
}

.hero-left{
    width:60%;
    position:relative;
    z-index:5;
}

.hero-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    border:1px solid rgba(232,205,2,.35);
    color:var(--gold);
    background:rgba(232,205,2,.08);
    font-size:12px;
    letter-spacing:3px;
    margin-bottom:20px;
    box-shadow:0 0 0 1px rgba(232,205,2,.06) inset;
}

.hero h1{
    font-family:'Cinzel',serif;
    font-size:85px;
    line-height:1.05;
    text-shadow:0 8px 30px rgba(0,0,0,.28);
}

#changing-text {

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

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    text-shadow: none;
}
.divider{
    display:flex;
    align-items:center;
    gap:15px;
    margin:25px 0;
}

.divider span{
    width:90px;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.divider i{
    color:var(--gold);
    filter:drop-shadow(0 0 10px rgba(232,205,2,.25));
}

.subtitle{
    font-size:22px;
    color:var(--muted);
    letter-spacing:.4px;
    margin-bottom:6px;
}

.description{
    margin-top:15px;
    font-size:15px;
    line-height:1.9;
    letter-spacing:1px;
    font-weight:600;
    color:rgba(245,247,255,.92);
    max-width:560px;
}

.description span{
    font-family:'Cormorant Garamond',serif;
    font-size:34px;
    font-style:italic;
    color:var(--gold);
    text-shadow:0 8px 24px rgba(232,205,2,.12);
}

.hero-buttons{
    margin-top:28px;
}

.gold-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 28px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.5px;
    color:#071225;
    background:linear-gradient(135deg, #fff1a6, var(--gold));
    box-shadow:0 14px 34px rgba(232,205,2,.18);
    transition:.3s ease;
}

.gold-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(232,205,2,.26);
}

/* =====================
 BUTTONS
===================== */


.hero-buttons{


    margin-top:30px;


    display:flex;


    gap:20px;


}



.gold-btn{


    padding:15px 35px;


    border-radius:40px;


    background:


    linear-gradient(

    135deg,

    var(--gold-soft),

    var(--gold)

    );


    color:var(--bg);


    font-weight:800;


    text-decoration:none;


}




.outline-btn{


    padding:15px 35px;


    border-radius:40px;


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


    color:white;


    text-decoration:none;


}








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


.features-row{


    margin-top:45px;


    display:grid;


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


    gap:20px;


}



.feature-card{


    background:


    linear-gradient(

    135deg,

    var(--card),

    var(--card-2)

    );


    padding:20px;


    border-radius:18px;


    border:1px solid var(--border);


    display:flex;


    gap:15px;


}





.icon{


    width:45px;


    height:45px;


    background:var(--gold);


    color:var(--bg);


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


}





.feature-card p{


    color:var(--muted);


    font-size:12px;


}









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


@media(max-width:1000px){


nav{


display:none;


}



.hero{


background-position:center;


}



.hero-left{


width:100%;


text-align:center;


}



.hero h1{


font-size:55px;


}




.divider{


justify-content:center;


}



.hero-buttons{


justify-content:center;


}



.features-row{


grid-template-columns:1fr;


}


}





@media(max-width:600px){



.hero h1{


font-size:40px;


}



.hero-buttons{


flex-direction:column;


}



}

/* =====================
        STATS
===================== */


.stats-section{


    position:relative;


    margin-top:-40px;


    z-index:10;


    padding:30px 0 60px;


}




.stats-container{


    width:90%;


    max-width:1400px;


    margin:auto;


    display:grid;


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


    gap:18px;



    background:

    linear-gradient(

    135deg,

    rgba(11,28,73,.95),

    rgba(1,21,62,.95)

    );



    border:1px solid var(--border);


    border-radius:25px;


    padding:25px;



    box-shadow:

    0 20px 60px rgba(0,0,0,.35);



}





.stat-box{


    text-align:center;


    padding:20px 10px;


    border-right:1px solid rgba(232,205,2,.15);


    position:relative;


}




.stat-box:last-child{


    border:none;


}





.stat-box h2 {

    font-family: 'Cinzel', serif;

    font-size: 38px;

    margin-bottom: 8px;


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


    -webkit-background-clip: text;
    background-clip: text;


    -webkit-text-fill-color: transparent;
    color: transparent;

}



.stat-box p{


    color:var(--muted);


    font-size:13px;


    font-weight:600;


    letter-spacing:1px;


}






/* glow hover */


.stat-box:hover h2{


    text-shadow:

    0 0 25px rgba(232,205,2,.7);


    transform:translateY(-5px);


}




.stat-box h2{


    transition:.3s;


}









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


@media(max-width:1200px){


.stats-container{


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


}



.stat-box:nth-child(3){


border-right:none;


}


}





@media(max-width:700px){


.stats-section{


margin-top:0;


}



.stats-container{


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


padding:18px;


}



.stat-box{


border-right:none;


border-bottom:1px solid rgba(232,205,2,.15);


}



.stat-box h2{


font-size:30px;


}



}





@media(max-width:450px){



.stats-container{


grid-template-columns:1fr;


}


}
/* =========================
        MIND SECTION
========================= */


.mind-section{

padding:110px 0;

background:

radial-gradient(
circle at center,
rgba(232,205,2,.14),
transparent 42%
);

}





.section-heading{

text-align:center;

margin-bottom:80px;

}





.small-tag{

display:inline-block;

color:var(--gold);

font-size:12px;

letter-spacing:4px;

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

padding:10px 25px;

border-radius:30px;

margin-bottom:25px;

background:rgba(232,205,2,.06);

}





.section-heading h2{


font-family:'Cinzel',serif;


font-size:65px;


line-height:1.1;


color:white;


}




.section-heading h2 span{


color:var(--gold);


}




.section-heading p:last-child{


margin-top:20px;


color:var(--muted);


font-size:18px;


}








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


.mind-grid{


display:grid;


grid-template-columns:1fr 1.1fr 1fr;


gap:35px;


align-items:center;


}








/* =========================
        CARDS
========================= */



.mind-column{


display:flex;


flex-direction:column;


gap:25px;


}




.mind-card{


display:flex;


align-items:center;


gap:20px;


padding:30px;



background:


linear-gradient(

135deg,

rgba(11,28,73,.95),

rgba(18,40,95,.85)

);



border:1px solid var(--border);



border-radius:22px;



transition:.35s;



box-shadow:var(--shadow);



}





.mind-card:hover{


transform:translateY(-8px);


border-color:var(--gold);


}





.mind-icon{


min-width:55px;


height:55px;


border-radius:50%;



display:flex;


align-items:center;


justify-content:center;



background:


linear-gradient(

135deg,

var(--gold-soft),

var(--gold)

);



color:var(--bg);


font-size:22px;


}





.mind-card h3{


font-size:20px;


margin-bottom:8px;


}





.mind-card p{


color:var(--muted);


font-size:14px;


line-height:1.6;


}








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


/* =========================
        CENTER IMAGE CIRCLE
========================= */


.chess-core{


    width:400px;

    height:400px;


    border-radius:50%;


    overflow:hidden;


    display:flex;


    align-items:center;

    justify-content:center;



    background:


    radial-gradient(
    circle,
    rgba(232,205,2,.28),
    transparent 60%
    ),


    linear-gradient(
    135deg,
    #12285F,
    #000E2B
    );



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



    box-shadow:

    0 0 90px rgba(232,205,2,.25);


    position:relative;


}





.chess-core::after{


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    180deg,

    transparent,

    rgba(0,14,43,.35)

    );


    z-index:2;


}







.chess-core img{


    width:100%;


    height:100%;



    object-fit:cover;


    object-position:center;



    border-radius:50%;



    position:absolute;


    inset:0;



    filter:


    drop-shadow(

    0 0 45px rgba(232,205,2,.45)

    );



}








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


.mind-message{


text-align:center;


margin-top:70px;


}



.mind-message h2{


font-family:'Cinzel',serif;


font-size:52px;


line-height:1.2;


color:white;


}





.mind-message h2 span{


color:var(--gold);


}





.mind-message p{


margin-top:18px;


font-size:18px;


color:var(--muted);


}









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


@media(max-width:1100px){


.mind-grid{


grid-template-columns:1fr;


gap:45px;


}



.mind-column{


max-width:500px;


margin:auto;


}




.chess-core{


width:340px;


height:340px;


}


}






@media(max-width:600px){



.section-heading h2{


font-size:42px;


}




.chess-core{


width:280px;


height:280px;


}




.mind-message h2{


font-size:32px;


}




.mind-message p{


font-size:15px;


}



.mind-card{


padding:22px;


}


}
/* =========================
      JOURNEY SECTION
========================= */


.journey-section{

padding:100px 0;

background:

radial-gradient(
circle at center,
rgba(232,205,2,.10),
transparent 45%
);

}





.journey-wrapper{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

align-items:center;

}





.journey-card{

width:100%;

display:flex;

align-items:center;

gap:30px;


padding:35px;


background:

linear-gradient(
135deg,
rgba(11,28,73,.95),
rgba(18,40,95,.9)
);


border:

1px solid var(--border);


border-radius:25px;


box-shadow:var(--shadow);


transition:.35s;


position:relative;


}





.journey-card:hover{


transform:translateY(-8px);


border-color:var(--gold);


box-shadow:

0 25px 70px rgba(232,205,2,.18);


}





.journey-number{


width:75px;

height:75px;


min-width:75px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;



font-family:'Cinzel',serif;


font-size:30px;


font-weight:700;



background:


linear-gradient(

135deg,

var(--gold-soft),

var(--gold)

);



color:var(--bg);


box-shadow:


0 0 35px rgba(232,205,2,.35);



}





.journey-card h3{


font-family:'Cinzel',serif;


font-size:28px;


margin-bottom:10px;


color:white;


}





.journey-card p{


color:var(--muted);


font-size:15px;


line-height:1.8;


}




.journey-line{


width:3px;

height:70px;


background:

linear-gradient(

var(--gold),

transparent

);


}







@media(max-width:700px){


.journey-card{


flex-direction:column;


text-align:center;


padding:25px;


}



.journey-card h3{


font-size:22px;


}



.journey-number{


width:65px;

height:65px;


min-width:65px;


font-size:25px;


}



}
/* =====================
        GLOBAL SECTION
===================== */


.global-section{

padding:100px 0;


background:

radial-gradient(

circle at center,

rgba(232,205,2,.12),

transparent 45%

);


}






.global-wrapper{


display:grid;


grid-template-columns:1fr 1fr;


gap:60px;


align-items:center;


}








/* IMAGE */


.global-image-box{


height:520px;


border-radius:35px;


overflow:hidden;


position:relative;



background:


linear-gradient(

135deg,

#01153e,

#000E2B

);



border:1px solid var(--border);


box-shadow:var(--shadow);



}





.global-image{


width:100%;


height:100%;


object-fit:cover;



opacity:.75;



filter:

drop-shadow(
0 0 50px rgba(232,205,2,.25)
);



}




.global-image-box::after{


content:"";


position:absolute;


inset:0;



background:


linear-gradient(

0deg,

rgba(0,14,43,.9),

transparent 60%

);



}







.globe-overlay{


position:absolute;


bottom:40px;


left:40px;


z-index:2;


}



.globe-overlay h3{


font-family:'Cinzel',serif;


font-size:40px;


color:white;


}



.globe-overlay p{


color:var(--gold);


letter-spacing:4px;


font-size:13px;


}










/* CARDS */



.global-cards{


display:flex;


flex-direction:column;


gap:22px;


}






.global-card{


display:flex;


gap:20px;


padding:28px;



background:


linear-gradient(

135deg,

rgba(11,28,73,.95),

rgba(18,40,95,.85)

);



border:1px solid var(--border);



border-radius:22px;


transition:.35s;



}




.global-card:hover{


transform:translateX(10px);



border-color:var(--gold);



}





.global-icon{


width:55px;


height:55px;


min-width:55px;



border-radius:50%;



display:flex;


align-items:center;


justify-content:center;



background:

linear-gradient(

135deg,

var(--gold-soft),

var(--gold)

);



color:var(--bg);


font-size:22px;


}







.global-card h3{


font-size:22px;


margin-bottom:8px;


font-family:'Cinzel',serif;


}




.global-card p{


color:var(--muted);


font-size:14px;


line-height:1.7;


}









@media(max-width:1000px){



.global-wrapper{


grid-template-columns:1fr;


}




.global-image-box{


height:400px;


}




}





@media(max-width:600px){



.global-image-box{


height:320px;


}



.globe-overlay h3{


font-size:28px;


}



.global-card{


flex-direction:column;


text-align:center;


align-items:center;


}


}
 /* =====================
        CTA SECTION
===================== */


.cta-section{

padding:80px 0;

}




.cta-box{


position:relative;


padding:55px 40px;


border-radius:28px;


overflow:hidden;



background:



linear-gradient(

135deg,

#12285F,

#000E2B

);




border:1px solid var(--border);



box-shadow:

0 20px 60px rgba(0,0,0,.35);



text-align:center;



}





/* remove side yellow effect */

.cta-box::before{


content:"";

position:absolute;

inset:0;



background:


linear-gradient(

180deg,

rgba(255,255,255,.03),

transparent

);



pointer-events:none;


}





.cta-content{


position:relative;


z-index:2;


}





.cta-content .small-tag{


margin-bottom:18px;


}





.cta-content h2{


font-family:'Cinzel',serif;


font-size:48px;


line-height:1.15;


color:white;


}





.cta-content h2 span{


color:var(--gold);


}





.cta-content p:not(.small-tag){


max-width:650px;


margin:18px auto;


color:var(--muted);


font-size:16px;


line-height:1.7;


}





.cta-buttons{


margin-top:28px;


display:flex;


justify-content:center;


gap:18px;


flex-wrap:wrap;


}





.cta-buttons a{


display:flex;


align-items:center;


gap:10px;


}





.cta-buttons i{


font-size:20px;


}







@media(max-width:700px){


.cta-section{

padding:60px 0;

}



.cta-box{


padding:40px 22px;


}





.cta-content h2{


font-size:34px;


}




.cta-content p:not(.small-tag){


font-size:14px;


}




.cta-buttons{


flex-direction:column;


}




.cta-buttons a{


justify-content:center;


}



}
/* =====================
        FOOTER
===================== */


.footer{


padding:70px 0 25px;


background:


linear-gradient(

135deg,

#000E2B,

#01153e

);



border-top:1px solid var(--border);


}





.footer-grid{


display:grid;


grid-template-columns:1.4fr 1fr 1fr;


gap:50px;


}





.footer-brand h2{


font-family:'Cinzel',serif;


font-size:45px;


color:var(--gold);


letter-spacing:4px;


margin-bottom:15px;


}





.footer-brand p{


color:var(--muted);


max-width:330px;


line-height:1.8;


font-size:14px;


}







/* SOCIAL */


.social-links{


display:flex;


gap:15px;


margin-top:25px;


}





.social-links a{


width:45px;


height:45px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;



background:rgba(232,205,2,.1);


border:1px solid var(--border);


color:var(--gold);


font-size:18px;


transition:.3s;


}





.social-links a:hover{


background:var(--gold);


color:var(--bg);


transform:translateY(-5px);


}







/* LINKS */


.footer-column h3{


font-family:'Cinzel',serif;


font-size:22px;


margin-bottom:20px;


color:white;


}





.footer-column ul{


list-style:none;


display:flex;


flex-direction:column;


gap:12px;


}





.footer-column a{


text-decoration:none;


color:var(--muted);


transition:.3s;


}





.footer-column a:hover{


color:var(--gold);


padding-left:5px;


}







.footer-column p{


color:var(--muted);


margin-bottom:15px;


font-size:14px;


}





.footer-column i{


color:var(--gold);


margin-right:10px;


}







/* BOTTOM */


.footer-bottom{


margin-top:45px;


padding-top:20px;


border-top:1px solid rgba(232,205,2,.12);



display:flex;


justify-content:space-between;


color:var(--muted);


font-size:13px;


}






@media(max-width:900px){


.footer-grid{


grid-template-columns:1fr;


text-align:center;


}




.footer-brand p{


margin:auto;


}




.social-links{


justify-content:center;


}



.footer-bottom{


flex-direction:column;


gap:10px;


text-align:center;


}


}

/* =====================
      WHY HERO
===================== */


.why-hero{


min-height:100vh;


padding-top:120px;


background:


radial-gradient(
circle at 80% 30%,
rgba(232,205,2,.18),
transparent 30%
),


linear-gradient(
135deg,
var(--bg),
var(--bg-2)
);



overflow:hidden;


}





.why-container{


width:90%;


max-width:1400px;


margin:auto;


display:grid;


grid-template-columns:1fr 1fr;


align-items:center;


gap:70px;


}





.why-content{


z-index:3;


}





.why-content h1{


font-family:'Cinzel',serif;


font-size:70px;


line-height:1;


margin:20px 0;


}





.why-content h2{


font-family:'Cinzel',serif;


font-size:38px;


}



.why-content h2 span{


color:var(--gold);


}





.main-text{


font-size:28px;


margin-top:25px;


color:var(--gold);


font-family:'Cormorant Garamond',serif;


font-style:italic;


}





.description{


margin-top:20px;


color:var(--muted);


font-size:17px;


line-height:1.9;


max-width:600px;


}





.why-buttons{


display:flex;


gap:20px;


margin-top:35px;


}









/* IMAGE */


.why-visual{


position:relative;


height:600px;


display:flex;


align-items:center;


justify-content:center;


}





.why-image{


width:100%;


height:100%;


object-fit:contain;


position:relative;


z-index:2;


filter:


drop-shadow(
0 0 60px rgba(232,205,2,.25)
);


}





.chess-glow{


position:absolute;


width:400px;


height:400px;


background:


radial-gradient(

circle,

rgba(232,205,2,.3),

transparent 70%

);



filter:blur(40px);


}







/* FLOATING CARDS */


.floating-card{


position:absolute;


z-index:4;


display:flex;


gap:15px;


align-items:center;


padding:18px;


border-radius:18px;


background:rgba(11,28,73,.9);


border:1px solid var(--border);


box-shadow:var(--shadow);


backdrop-filter:blur(10px);


}





.floating-card i{


font-size:25px;


color:var(--gold);


}





.floating-card h3{


font-size:15px;


}





.floating-card p{


font-size:12px;


color:var(--muted);


}





.card-one{


top:120px;


right:-20px;


}





.card-two{


bottom:120px;


left:-20px;


}








@media(max-width:1000px){


.why-container{


grid-template-columns:1fr;


text-align:center;


}




.why-content h1{


font-size:50px;


}



.description{


margin:auto;


}



.why-buttons{


justify-content:center;


}



.why-visual{


height:400px;


}



}





@media(max-width:600px){


.why-content h1{


font-size:38px;


}



.why-content h2{


font-size:28px;


}



.floating-card{


display:none;


}



}
/* =====================
        STORY SECTION
===================== */


.story-section{


padding:100px 0;


background:


radial-gradient(

circle at center,

rgba(232,205,2,.10),

transparent 45%

);


}





.story-heading{


text-align:center;


max-width:850px;


margin:auto;


}



.story-heading h2{


font-family:'Cinzel',serif;


font-size:60px;


line-height:1.15;


margin:25px 0;


}



.story-heading h2 span{


color:var(--gold);


}



.story-heading p:last-child{


color:var(--muted);


font-size:17px;


line-height:1.8;


}






.story-content{


margin-top:70px;


display:grid;


grid-template-columns:1fr 1.2fr;


gap:50px;


align-items:center;


}







.story-text{


padding:35px;


background:


linear-gradient(

135deg,

rgba(11,28,73,.95),

rgba(18,40,95,.85)

);



border-radius:25px;


border:1px solid var(--border);


box-shadow:var(--shadow);


}





.story-text h3{


font-family:'Cinzel',serif;


font-size:30px;


margin-bottom:20px;


}





.story-text p{


color:var(--muted);


line-height:1.8;


margin-bottom:18px;


}





.story-highlight{


margin-top:30px;


display:flex;


align-items:center;


gap:15px;


padding:18px;


border-radius:15px;


background:rgba(232,205,2,.1);


border:1px solid rgba(232,205,2,.2);


}



.story-highlight i{


color:var(--gold);


font-size:25px;


}







/* FOUNDERS */


.founders{


display:grid;


grid-template-columns:1fr 1fr;


gap:25px;


}






.founder-card{


background:


linear-gradient(

135deg,

#12285F,

#000E2B

);



padding:30px;


border-radius:25px;


border:1px solid var(--border);


text-align:center;


transition:.35s;


}





.founder-card:hover{


transform:translateY(-8px);


border-color:var(--gold);


}





.founder-image{


width:150px;


height:150px;


margin:auto;


border-radius:50%;


overflow:hidden;


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


margin-bottom:20px;


background:#01153e;


}



.founder-image img{


width:100%;


height:100%;


object-fit:cover;


}





.founder-card h3{


font-family:'Cinzel',serif;


font-size:25px;


}





.founder-card span{


color:var(--gold);


font-size:13px;


letter-spacing:2px;


}



.founder-card p{


margin-top:15px;


color:var(--muted);


font-size:14px;


line-height:1.7;


}







@media(max-width:1000px){



.story-content{


grid-template-columns:1fr;


}




.story-heading h2{


font-size:42px;


}



}





@media(max-width:600px){



.founders{


grid-template-columns:1fr;


}



.story-heading h2{


font-size:34px;


}



.story-text{


padding:25px;


}



}
/* =========================
      PORTAL SECTION
========================= */


.portal-section{

padding:100px 0;

background:

radial-gradient(
circle at center,
rgba(232,205,2,.10),
transparent 45%
);

}





.portal-grid{


margin-top:60px;


display:grid;


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


gap:25px;


}




.portal-card{


padding:35px;


border-radius:25px;



background:

linear-gradient(
135deg,
var(--card),
var(--card-2)
);



border:1px solid var(--border);


box-shadow:var(--shadow);


transition:.35s;


position:relative;


overflow:hidden;


}





.portal-card::before{


content:"";


position:absolute;


width:120px;

height:120px;


right:-40px;

top:-40px;


background:

rgba(232,205,2,.12);


border-radius:50%;


}





.portal-card:hover{


transform:translateY(-8px);


border-color:var(--gold);


}







.portal-card i{


width:55px;

height:55px;


display:flex;


align-items:center;


justify-content:center;



border-radius:50%;


background:

linear-gradient(
135deg,
var(--gold-soft),
var(--gold)
);


color:var(--bg);


font-size:22px;


margin-bottom:20px;


}







.portal-card h3{


font-size:22px;


margin-bottom:12px;


font-family:'Cinzel',serif;


}





.portal-card p{


color:var(--muted);


font-size:14px;


line-height:1.8;


}







@media(max-width:1000px){


.portal-grid{


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


}


}





@media(max-width:600px){


.portal-grid{


grid-template-columns:1fr;


}


}
/* =========================
 PIPELINE SECTION
========================= */


.pipeline-section{

padding:80px 0;

}





.pipeline-box{


margin-top:50px;


display:grid;


grid-template-columns:1fr auto 1fr;


gap:30px;


align-items:center;


}





.pipeline-card{


padding:35px;


border-radius:25px;


background:

linear-gradient(
135deg,
var(--card),
var(--card-2)
);


border:1px solid var(--border);


box-shadow:var(--shadow);


}





.pipeline-card.after{


border-color:var(--gold);


}





.pipeline-label{


display:inline-block;


padding:8px 20px;


border-radius:30px;


font-size:12px;


letter-spacing:3px;


margin-bottom:20px;


color:var(--gold);


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


}





.pipeline-card p{


color:var(--muted);


line-height:1.8;


font-size:15px;


}





.pipeline-arrow{


width:55px;

height:55px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


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


color:var(--bg);


font-size:20px;


}





.pipeline-btn{


margin-top:45px;


text-align:center;


}



.pipeline-btn a{


display:inline-flex;


align-items:center;


gap:12px;


padding:15px 38px;


border-radius:40px;


background:

linear-gradient(
135deg,
var(--gold-soft),
var(--gold)
);


color:var(--bg);


font-weight:800;


text-decoration:none;


}





/* =========================
 FOOTER
========================= */


.footer{


padding:60px 0 25px;


background:#00091f;


border-top:1px solid var(--border);


}




.footer-grid{


display:grid;


grid-template-columns:2fr 1fr 1fr;


gap:50px;


}





.footer h2{


font-family:'Cinzel',serif;


color:var(--gold);


font-size:45px;


}



.footer h3{


margin-bottom:20px;


}




.footer p,
.footer a{


color:var(--muted);


font-size:14px;


line-height:2;


text-decoration:none;


display:block;


}



.footer a:hover{


color:var(--gold);


}




.footer-social i{


margin-right:10px;


color:var(--gold);


}




.footer-bottom{


margin-top:40px;


padding-top:20px;


text-align:center;


border-top:1px solid var(--border);


color:var(--muted);


font-size:13px;


}







@media(max-width:900px){


.pipeline-box{


grid-template-columns:1fr;


}



.pipeline-arrow{


margin:auto;


transform:rotate(90deg);


}




.footer-grid{


grid-template-columns:1fr;


}


}
/* ======================================
   OUR JOURNEY - PREMIUM LUXURY STYLE
====================================== */

.story-heading,
.founder-profile{
    width: min(1120px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.story-heading{
    max-width: 980px;
    text-align: center;
    padding: 0 8px;
    margin-top: 10px;
    margin-bottom: 64px;
}

.story-heading .small-tag,
.founder-info .small-tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(232,205,2,.08);
    border: 1px solid rgba(232,205,2,.22);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2.8px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.story-heading h2{
    font-family: 'Cinzel', serif;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1.02;
    color: #fff;
    margin: 18px 0 18px;
    letter-spacing: .4px;
}

.story-heading h2 span{
    color: var(--gold);
    position: relative;
    display: inline-block;
}

.story-heading h2 span:after{
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -10px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .95;
}

.story-heading p:last-child{
    max-width: 820px;
    margin: 30px auto 0;
    color: rgba(233,239,255,.78);
    font-size: 18px;
    line-height: 1.9;
}

.founder-profile{
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    align-items: center;
    padding: 28px;
    margin: 0 auto 42px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.founder-profile.reverse{
    grid-template-columns: 1fr 380px;
}

.founder-profile.reverse .founder-image{
    order: 2;
}

.founder-profile.reverse .founder-info{
    order: 1;
}

.founder-image{
    width: 100%;
    height: 520px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(232,205,2,.18);
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
    position: relative;
}

.founder-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}

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

.founder-info{
    text-align: left;
}

.founder-info h2{
    font-family: 'Cinzel', serif;
    font-size: clamp(32px, 4vw, 56px);
    color: #fff;
    margin: 12px 0 10px;
    line-height: 1.08;
}

.founder-info h4{
    color: var(--gold);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.founder-info p{
    color: rgba(233,239,255,.78);
    line-height: 2;
    font-size: 16px;
    margin-bottom: 16px;
    max-width: 720px;
}

.journey-box{
    margin-top: 30px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(7,17,41,.96), rgba(12,28,68,.90));
    border: 1px solid rgba(232,205,2,.16);
}

.journey-items{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.journey-step{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(232,205,2,.12);
    color: #fff;
}

/* Mobile */
@media (max-width: 1100px){
    .founder-profile,
    .founder-profile.reverse{
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 22px;
    }

    .founder-profile.reverse .founder-image,
    .founder-profile.reverse .founder-info{
        order: unset;
    }

    .founder-info{
        text-align: center;
    }

    .founder-info p{
        margin-left: auto;
        margin-right: auto;
    }

    .journey-items{
        justify-content: center;
    }

    .founder-image{
        height: 420px;
    }
}

@media (max-width: 600px){
    .founder-profile{
        padding: 16px;
        border-radius: 24px;
    }

    .founder-image{
        height: 300px;
        border-radius: 20px;
    }

    .journey-items{
        flex-direction: column;
    }

    .journey-step{
        width: 100%;
        justify-content: flex-start;
    }
}

.journey-step:hover{
    transform: translateY(-5px);
    border-color: rgba(232,205,2,.42);
    background: rgba(232,205,2,.10);
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.journey-step i{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7e6a0, var(--gold));
    color: #0d1020;
    font-size: 18px;
    flex: 0 0 42px;
    box-shadow: 0 10px 20px rgba(232,205,2,.22);
}

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

.story-heading,
.founder-profile{
    animation: fadeUp .8s ease both;
}

.founder-profile:nth-of-type(1){
    animation-delay: .08s;
}

.founder-profile:nth-of-type(2){
    animation-delay: .14s;
}

@media (max-width: 1100px){
    .founder-profile,
    .founder-profile.reverse{
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 22px;
    }

    .founder-profile.reverse .founder-image,
    .founder-profile.reverse .founder-info{
        order: unset;
    }

    .founder-info{
        text-align: center;
    }

    .founder-info p{
        margin-left: auto;
        margin-right: auto;
    }

    .journey-items{
        justify-content: center;
    }

    .founder-image{
        height: 440px;
    }
}

@media (max-width: 768px){
    .story-heading h2{
        line-height: 1.04;
    }

    .story-heading p:last-child{
        font-size: 16px;
    }

    .founder-image{
        height: 360px;
        border-radius: 24px;
    }

    .journey-box{
        padding: 22px 18px;
    }
}

@media (max-width: 520px){
    .story-heading,
    .founder-profile{
        width: min(100%, calc(100% - 20px));
    }

    .founder-profile{
        padding: 16px;
        border-radius: 24px;
    }

    .founder-info h2{
        font-size: 30px;
    }

    .founder-info h4{
        font-size: 16px;
    }

    .founder-info p{
        font-size: 15px;
        line-height: 1.9;
    }

    .journey-items{
        flex-direction: column;
    }

    .journey-step{
        width: 100%;
        justify-content: flex-start;
    }

    .founder-image{
        height: 300px;
    }
}
/* ================= WHITEFIELD HQ SPECIAL DESIGN ================= */

.hq-card {
    position: relative;
    border: 1px solid rgba(245, 223, 2, 0.6);
}



/* ================= HQ BOOKMARK BADGE ================= */

.hq-badge {
    position: absolute;
    top: 0;
    right: 25px;

    width: 45px;
    height: 65px;

    background: #f5df02;
    color: #01153e;

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

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

    letter-spacing: 1px;

    z-index: 5;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        50% 80%,
        0 100%
    );

    box-shadow: 0 8px 20px rgba(245,223,2,0.35);
}



/* ================= HQ INFORMATION POSITION ================= */

.hq-card .branch-info {
    padding-left: 10px;
    transform: translateX(-15px);
}



/* ================= HQ HEADER ================= */

.hq-card .branch-header {
    display: flex;
    align-items: center;
    gap: 12px;
}


.hq-card .branch-header i {
    color: #f5df02;
}



/* ================= HQ CONTENT ================= */

.hq-card .address {
    line-height: 1.8;
}


.hq-card .timing {
    line-height: 1.8;
    margin-top: 15px;
}


.hq-card .phone {
    margin-top: 15px;
}



/* ================= HQ MAP (HORIZONTAL) ================= */

.hq-card .map-box {
    width: 100%;
    height: 260px;

    margin-top: 20px;

    border-radius: 18px;
    overflow: hidden;
}


.hq-card .map-box iframe {
    width: 100%;
    height: 100%;

    border: 0;
}



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

@media(max-width:768px) {

    .hq-card .branch-info {
        transform: translateX(0);
    }


    .hq-card .map-box {
        height: 220px;
    }


    .hq-badge {
        right: 15px;

        width: 38px;
        height: 55px;

        font-size: 12px;
    }

}
.testimonials-section {
  padding: 90px 0;
  background: #0b0b0b;
}

.testimonial-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

.testimonial-track {
  position: relative;
  width: 100%;
  max-width: 850px;
  min-height: 260px;
  overflow: hidden;
}

.testimonial-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #151515, #101010);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 20px;
  padding: 32px;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.45s ease;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.testimonial-card.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.testimonial-stars {
  color: #d4af37;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.testimonial-text {
  color: #f2f2f2;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 22px;
}

.testimonial-card h4 {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.testimonial-card span {
  color: #b7b7b7;
  font-size: 0.9rem;
}

.slider-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #111;
  color: #d4af37;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.3s ease;
  flex-shrink: 0;
}

.slider-btn:hover {
  background: #d4af37;
  color: #111;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.slider-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.35);
  cursor: pointer;
  transition: 0.3s ease;
}

.slider-dot.active {
  background: #d4af37;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .testimonial-slider {
    gap: 10px;
  }

  .testimonial-card {
    padding: 24px;
  }

  .slider-btn {
    width: 40px;
    height: 40px;
  }
}