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

*,
*::before,
*::after{
    box-sizing:border-box;
}


html, body {
    overflow-x: hidden;
}
body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

:root{
    --navbar-height:78px;
}



/* CONTAINER */
.container{
    width:90%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* NAVBAR */
.navbar{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
    background: rgb(25 19 70);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,97,194,0.2);
}

/* FLEX CONTAINER */
.nav-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 0;
    position:relative;
}

/* LOGO */
.logo{
    height:42px;
    display:flex;
    align-items:center;
}

/* CENTER MENU FIX */
nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

/* MENU */
.nav-menu{
    display:flex;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-bottom: 0;
    gap: 20px;
}

.nav-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.nav-menu li{
    list-style: none;
}
/* LINKS */
.nav-menu li a{
    position:relative;
    padding:5px 16px;
    border-radius:6px;
    
    text-decoration:none;
    color:#C9D1E3;
    font-weight:500;
    font-size:18px;

    display:inline-block;
    transition:0.3s;
    margin-bottom: 0;
}

/* ACTIVE */
.nav-menu li a.active{
    color:#fff;
    background:linear-gradient(135deg,#0061C2,#2F8CFF);
    box-shadow:0 6px 18px rgba(0,97,194,0.35);
}

/* HOVER */
.nav-menu li a:hover{
    background:#2F8CFF;
    color:#fff;
}


/* BUTTON */
.btn-primary{
    background: linear-gradient(135deg,#0061C2,#2F8CFF);
    border:none;
    padding:10px 22px;
    border-radius:10px;
    color:#fff;
    font-weight:500;
    cursor:pointer;
    transition:0.3s;
    display:flex;
    align-items:center;
    transition:0.3s ease;
    text-decoration: none;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:
        0 0 10px rgba(47,140,255,0.6),
        0 0 20px rgba(47,140,255,0.5),
        0 0 40px rgba(47,140,255,0.4);
}

/* OPTIONAL: SCROLL EFFECT */
.navbar.scrolled{
    background:#0B0F3A;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.menu-toggle{
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
}

.menu-toggle span{
    width:25px;
    height:3px;
    background:#fff;
    border-radius:3px;
}


@media (max-width: 1200px){

    .container{
        width:95%;
    }

    nav{
        position:static;
        transform:none;
    }

    .nav-flex{
        justify-content:space-between;
    }

    .nav-menu{
        gap:12px;
    }


    .nav-menu li a{
        font-size:16px;
        padding:5px 10px;
    }

    /* button small */
    .btn-primary{
        padding:8px 16px;
        font-size:14px;
    }
}

@media (max-width: 992px){

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
    }

    .nav-menu{
        display: none; 
        flex-direction:column;
        background:#13225B;
        margin:10px 20px;
        padding:15px 20px;
        border-radius:12px;
        gap:12px;
    }

    .nav-menu.active{
        display: flex; 
    }

    .menu-toggle{
        display:flex;
    }
    .nav-menu li a{
        text-decoration: none;
    }
}


@media (max-width: 768px){
    .btn-primary{
        display:none;
    }

    .logo{
        height:36px;
    }
}

@media (max-width: 480px){
    .nav-menu li a{
        font-size:16px;
    }
}



/* =========================
   HERO SECTION
========================= */

.hero{
    position:relative;
    padding: 230px 0 200px;
    min-height:600px;
    overflow:hidden;
    
}

/* BACKGROUND LAYER */
.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        url("../images/hero/hero-img-03.jpeg") no-repeat center center / cover;


    z-index:0;
    animation:kenBurns 16s ease-in-out infinite;
}

/* HERO BOTTOM FADE */
.hero::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100px;

    background:linear-gradient(
        to bottom,
        rgba(13,10,46,0) 0%,
        #191346 100%
    );

    z-index:1;
    pointer-events:none;
}
/* CONTENT ABOVE */
.hero > *{
    position:relative;
    z-index:1;
}

/* KEYFRAMES: Zoom + Pan */
@keyframes kenBurns{
    0%{
        transform:scale(1) translateX(0);
    }

    25%{
        transform:scale(1.02) translateX(-10px);
    }

    50%{
        transform:scale(1.04) translateX(10px);
    }

    75%{
        transform:scale(1.02) translateX(-5px);
    }

    100%{
        transform:scale(1) translateX(0);
    }
}

/* CONTAINER */
.container-hero{
    width:80%;
    margin:auto;
    padding:0 20px;
}

/* FLEX */
.hero-flex{
    display:flex;
    align-items:center;
}

/* =========================
   CONTENT
========================= */
.hero-content{
    max-width:650px;
    transform:scale(0.90); 
    transform-origin:left center; 
}

/* INITIAL STATE (ANIMATION) */
.hero-content > *{
    opacity:0;
    transform:translateY(60px);
    filter:blur(6px);
}

/* ACTIVE STATE */
.hero.show .hero-content > *{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
    transition:all 0.9s cubic-bezier(.16,1,.3,1);
}

/* STAGGER */
.hero.show h1{ transition-delay:0.2s; }
.hero.show .hero-desc{ transition-delay:0.5s; }
.hero.show .hero-sub{ transition-delay:0.7s; }

/* BUTTON SPECIAL */
.hero-buttons{
    display:flex;
    gap:15px;

    transform:translateY(40px) scale(0.9);
}

.hero.show .hero-buttons{
    transform:translateY(0) scale(1);
    transition:all 0.6s ease 0.9s;
}

/* =========================
   HEADING
========================= */
.hero-content h1{
    font-size:48px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:20px;
    color:#ffffff;
}

.hero-content h1 span{
    color:#68aef5;
    /* color:#0061C2; */
}


/* =========================
   TEXT
========================= */
.hero-desc{
    color:#C9D1E3;
    font-size:16px;
    line-height:1.6;
    margin-bottom:15px;
}

.hero-sub{
    color:#C9D1E3;
    font-size:15px;
    line-height:1.6;
    margin-bottom:30px;
}

/* =========================
   BUTTONS
========================= */
.hero-btn-primary{
    background: linear-gradient(135deg,#0061C2,#1E63B6);
    padding:12px 26px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    font-weight:500;
    display:inline-block;
    transition:0.3s ease;
}

/* PRIMARY HOVER */
.hero-btn-primary:hover{
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);

    transform:translateY(-2px);
}

/* OUTLINE BUTTON */
.btn-outline{
    border:1px solid #0061C2;
    padding:12px 26px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    transition:0.3s ease;
}

/* OUTLINE HOVER */
.btn-outline:hover{
    background:linear-gradient(135deg,#0061C2,#1E63B6);
    border-color:transparent;

    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);

    transform:translateY(-2px);
}


@media (min-width: 1200px){
    .hero{
        padding:200px 0 160px;
    }

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

@media (max-width: 992px){

    .hero{
        padding:180px 0 140px;
    }

    .hero-content{
        max-width:100%;
        transform:scale(1);
    }

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

    .hero-desc{
        font-size:15px;
    }

    .hero-sub{
        font-size:14px;
    }
}

@media (max-width: 768px){

    .hero{
        padding:150px 0 120px;
        text-align:center;
    }

    .hero-flex{
        justify-content:center;
    }

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

    .hero-content h1{
        font-size:30px;
        line-height:1.4;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }
}


@media (max-width: 576px){

    .hero{
        padding:130px 0 100px;
    }

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

    .hero-desc{
        font-size:14px;
    }

    .hero-sub{
        font-size:13px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:12px;
    }

    .hero-btn-primary,
    .btn-outline{
        width:100%;
        text-align:center;
        padding:12px;
    }
}


@media (max-width: 400px){

    .hero{
        padding:120px 0 90px;
    }

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














/* SECTION */
.services{
    position:relative;
    padding:100px 0;
    background: linear-gradient(180deg, #191346 0%, #151040 48%, #0d0a2e 100%);
    text-align:center;
}

.services::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:120px;
    background:linear-gradient(
        to bottom,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );
    pointer-events:none;
}


/* SERVICES BOTTOM FADE */
.services::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to top,
        #0d0a2e 0%,
        rgba(13,10,46,0) 100%
    );

    pointer-events:none;
}

/* TITLE */
.services-title{
    font-size:36px;
    font-weight:700;
    margin-bottom:60px;
    color:#FFFFFF;
}

/* GRID */
.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}


/* CARD */
.service-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(0,97,194,0.25);
    border-radius:16px;
    overflow:hidden;

    backdrop-filter:blur(10px);

    opacity:0;
    transform:translateY(60px);
    transition:all 0.8s cubic-bezier(.22,.61,.36,1);
    position:relative;
}


/* IMAGE */
.service-img{
    width:100%;
    height:200px;
    object-fit:cover;
    transition:0.3s ease;
}

/* CONTENT */
.service-content{
    padding:25px;
    text-align:left;
}

/* TITLE */
.service-content h3{
    font-size:20px;
    margin-bottom:10px;
    font-weight:600;
    color:#FFFFFF;
}

/* TEXT */
.service-content p{
    font-size:14px;
    color:rgba(255,255,255,0.7);
    line-height:1.6;
}

/* HOVER CARD */
.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,97,194,0.35);
    border-color:#0061C2;
}

/* IMAGE ZOOM */
.service-card:hover .service-img{
    transform:scale(1.05);
}

/* GLOW OVERLAY */
.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(0,97,194,0.35),
        transparent
    );
    opacity:0;
    transition:0.4s;
    pointer-events:none;
}

.service-card:hover::before{
    opacity:1;
}


.services.show .service-card{
    opacity:1;
    transform:translateY(0);
}

/* STAGGER DELAY */
.services.show .service-card:nth-child(1){ transition-delay:0.2s; }
.services.show .service-card:nth-child(2){ transition-delay:0.4s; }
.services.show .service-card:nth-child(3){ transition-delay:0.6s; }
.services.show .service-card:nth-child(4){ transition-delay:0.8s; }

@media (max-width: 1200px){

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .services-title{
        font-size:32px;
    }
}

@media (max-width: 992px){

    .services{
        padding:80px 0;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .service-img{
        height:200px;
    }

    .services-title{
        font-size:28px;
        margin-bottom:40px;
    }
}

@media (max-width: 768px){

    .services{
        padding:70px 0;
    }

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

    .service-card{
        max-width:500px;
        margin:auto;
    }

    .service-img{
        height:270px;
    }

    .service-content{
        padding:20px;
    }

    .service-content h3{
        font-size:18px;
    }

    .service-content p{
        font-size:13px;
    }

    .services-title{
        font-size:24px;
    }
}


@media (max-width: 480px){

    .service-img{
        height:150px;
    }

    .services-title{
        font-size:22px;
    }

    .service-content{
        padding:18px;
    }
}














/* =========================
   ABOUT SECTION
========================= */
.about{
    padding:100px 0;
    background: linear-gradient(180deg, #0d0a2e 0%, #151040 50%, #191346 100%);
    position:relative;
}

/* ABOUT TOP FADE */
.about::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to bottom,
        #0d0a2e 0%,
        rgba(13,10,46,0) 100%
    );

    pointer-events:none;
}

/* ABOUT BOTTOM FADE */
.about::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to top,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );
    pointer-events:none;
}

/* =========================
   GRID
========================= */
.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}


/* =========================
   IMAGE
========================= */
.about-image{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.8s cubic-bezier(.22,.61,.36,1);
}

.about-image img{
    width:100%;
    border-radius:16px;
    transition:0.3s;
}

.about-image img:hover{
    transform:translateY(-2px);
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
}

/* =========================
   CONTENT
========================= */
.about-content{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.8s cubic-bezier(.22,.61,.36,1);
}

.about-content h2{
    font-size:36px;
    margin-bottom:20px;
    color:#ffffff;
}

.about-content p{
    color:rgba(255,255,255,0.75);
    line-height:1.7;
    margin-bottom:15px;
}

.about-sub{
    color:rgba(255,255,255,0.6);
}

/* =========================
   BUTTON
========================= */
.about-btn{
    display:inline-block;
    margin-top:20px;
    padding:12px 26px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(135deg,#0061C2,#1E63B6);

    box-shadow:0 10px 30px rgba(0,97,194,0.4);
    transition:0.3s;
}

.about-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
}

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



.about-features{
    margin-top: 50px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.about-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(0,97,194,0.25);
    padding:30px;
    border-radius:16px;
    opacity:0;
    transform:translateY(60px);
    transition:
        opacity 0.8s cubic-bezier(.22,.61,.36,1),
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

/* AFTER ANIMATION (IMPORTANT) */
.about.show .about-card{
    transition:none; 
}

.about-card:hover{
    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,97,194,0.3);
    border-color:#0061C2;

    transition: all 0.3s ease; 
}

/* TEXT */
.about-card h3{
    margin-bottom:10px;
    color:#ffffff;
}

.about-card p{
    color:rgba(255,255,255,0.7);
    font-size:14px;
}

/* =========================
   SCROLL ANIMATION ACTIVE
========================= */
.about.show .about-image{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.1s;
}

.about.show .about-content{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.2s;
}

.about.show .about-card:nth-child(1){
    opacity:1;
    transform:translateY(0);
    transition-delay:0.3s;
}

.about.show .about-card:nth-child(2){
    opacity:1;
    transform:translateY(0);
    transition-delay:0.5s;
}

.about.show .about-card:nth-child(3){
    opacity:1;
    transform:translateY(0);
    transition-delay:0.7s;
}

@media (max-width: 1200px){

    .about-grid{
        gap:30px;
    }

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

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

@media (max-width: 992px){

    .about{
        padding:80px 0;
    }

    /* stack layout */
    .about-grid{
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
    }

    .about-image{
        order:1;
    }

    .about-content{
        order:2;
    }

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

    .about-content p{
        font-size:15px;
        text-align: left;
    }

    .about-features{
        grid-template-columns:repeat(2,1fr);
        margin-top:60px;
    }
}

@media (max-width: 768px){

    .about{
        padding:70px 0;
    }

    .about-content h2{
        font-size:24px;
        line-height:1.4;
    }

    .about-content p{
        font-size:14px;
    }

    .about-features{
        grid-template-columns:1fr;
        gap:20px;
    }

    .about-card{
        padding:25px;
        text-align:center;
    }

    .about-btn{
        padding:10px 20px;
        font-size:14px;
    }
}

@media (max-width: 480px){

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

    .about-content p{
        font-size:13px;
    }

    .about-card{
        padding:20px;
    }
}









/* =========================
   WHY CHOOSE US SECTION
========================= */
.whyus-section{
    position:relative;
    background: linear-gradient(180deg, #191346 0%, #161144 52%, #0f0b35 100%);
    padding:80px 20px;
    font-family:'Segoe UI', sans-serif;
}
/* WHYUS TOP FADE */

.whyus-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to bottom,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );
    pointer-events:none;
}

/* WHYUS BOTTOM FADE */
.whyus-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to top,
        #0f0b35 0%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}

.whyus-section > *{
    position:relative;
    z-index:1;
}

/* CONTAINER */
.whyus-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:60px;
}

/* =========================
   LEFT IMAGE
========================= */
/* IMAGE WRAPPER */
.whyus-left{
    position:relative;
    display:inline-block;
    transition: 0.4s ease;
}

/* IMAGE */
.whyus-left img{
    width:100%;
    max-width:520px;
    border-radius:16px;
    position:relative;
    z-index:2;
    transition: 0.4s ease;
}

.shape-1{
    position: absolute;
    top: 31px;
    left: -30px;
    width: 520px;
    height: 350px;
    background: #0061C2;
    border-radius: 20px;
    z-index: 1;
    transition: 0.4s ease;
}

.whyus-left:hover img,
.whyus-left:hover .shape-1{
    transform: scale(1.03);
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
}

/* =========================
   RIGHT CONTENT
========================= */
.whyus-right{
    flex:1;
}

/* TITLE */
.whyus-title{
    color:#FFFFFF;
    font-size:36px;
    font-weight:700;
    margin-bottom:12px;
}

/* SUBTITLE */
.whyus-subtitle{
    color:#cfd4ff;
    font-size:15px;
    line-height:1.6;
    margin-bottom:40px;
    max-width:500px;
}

/* =========================
   CARDS GRID
========================= */
.whyus-cards{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 20px 30px;

}

/* SINGLE CARD */
.whyus-card{
    display:flex;
    gap:15px;
    background:#FFFFFF;
    padding:18px 16px;
    border-radius:12px;
    align-items:center;
    transition:all 0.3s ease;
    position:relative;
    overflow:hidden;
}

/* subtle top glow effect */
.whyus-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0061C2,#4da3ff);
    opacity:0;
    transition:0.3s;
}

/* HOVER EFFECT */
.whyus-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,0.35);
}

.whyus-card:hover::before{
    opacity:1;
}

/* =========================
   ICON
========================= */
.whyus-card .icon{
    min-width:60px;
    height:60px;
    background:#0061C2;
    color:#FFFFFF;
    border-radius:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:35px;
    box-shadow:0 8px 18px rgba(0,97,194,0.4);
    transition:0.3s;
}

/* icon hover effect */
.whyus-card:hover .icon{
    transform:scale(1.1);
}

/* FONT AWESOME FIX */
.whyus-card .icon i{
    line-height:1;
}

/* =========================
   TEXT
========================= */
.whyus-card h4{
    color:#191346;
    font-size:16px;
    margin-bottom:6px;
    font-weight:600;
}

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

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

@media (max-width: 1200px){

    .whyus-container{
        gap:40px;
    }

    .whyus-title{
        font-size:32px;
    }

    .whyus-cards{
        gap:15px 20px;
    }
}

@media (max-width: 992px){

    .whyus-container{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .whyus-left{
        order:1;
    }

    .whyus-right{
        order:2;
    }

    .whyus-subtitle{
        margin:auto;
        margin-bottom:30px;
    }

    .shape-1{
        display: none;
    }

    .whyus-cards{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 768px){

    .whyus-section{
        padding:70px 15px;
    }

    .whyus-title{
        font-size:26px;
    }

    .whyus-subtitle{
        font-size:14px;
    }

    .whyus-cards{
        grid-template-columns:1fr;
        gap:15px;
    }

    .whyus-card{
        flex-direction:row;
        text-align:left;
    }

    .whyus-card .icon{
        min-width:50px;
        height:50px;
        font-size:22px;
    }
}

@media (max-width: 480px){

    .whyus-title{
        font-size:22px;
    }

    .whyus-card{
        padding:14px;
    }

    .whyus-card h4{
        font-size:14px;
    }

    .whyus-card p{
        font-size:12px;
    }

    .shape-1{
        display:none;
    }
}







/* =========================
   BLOG SECTION
========================= */
.blog-section{
    position:relative;
    background: linear-gradient(180deg, #0f0b35 0%, #151040 45%, #191346 100%);
    padding: 100px 110px;
    font-family:'Segoe UI', sans-serif;
}

.blog-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:110px;
    background:linear-gradient(to bottom, #0f0b35 0%, rgba(15,11,53,0) 100%);
    pointer-events:none;
}

.blog-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:110px;
    background:linear-gradient(to top, #191346 0%, rgba(25,19,70,0) 100%);
    pointer-events:none;
}

.blog-section > *{
    position:relative;
    z-index:1;
}

/* CONTAINER */
.blog-container{
    max-width:1200px;
    margin:auto;
    text-align:center;
}

/* TITLE */
.blog-title{
    color:#fff;
    font-size:36px;
    margin-bottom:10px;
}

/* SUBTITLE */
.blog-subtitle{
    color:#cfd4ff;
    margin-bottom:60px;
}

/* =========================
   SLIDER WRAPPER
========================= */
.blog-slider{
    position:relative;
}

/* =========================
   VIEWPORT (HIDE EXTRA)
========================= */
.blog-viewport{
    padding-top:15px;
    overflow:hidden;
    position:relative;
    z-index:1;
    touch-action: pan-y;
    
}



/* TRACK */
.blog-track{
    position:relative;
    z-index:1;
    display:flex;
    gap:30px;
    transition:transform 0.6s ease;
    padding: 0 20px;         
    box-sizing: content-box;
    touch-action: pan-y;
    pointer-events:auto;
}

/* =========================
   CARD
========================= */
.blog-card{
    flex: 0 0 calc((100% - 50px) / 3); 
    background:linear-gradient(180deg, rgba(25,19,70,0.92), rgba(18,98,187,0.72));
    border:1px solid rgba(96,161,255,0.35);
    border-radius:16px;
    overflow:hidden;
    position:relative;
    transition:transform 0.45s cubic-bezier(.22,.61,.36,1), box-shadow 0.45s ease, border-color 0.35s ease;
}

.blog-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(130deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 38%);
    opacity:0;
    transition:opacity 0.45s ease;
    pointer-events:none;
    z-index:1;
}

/* IMAGE */
.blog-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    transition:transform 0.6s ease, filter 0.45s ease;
}

/* CONTENT */
.blog-content{
    padding:20px;
    text-align:left;
}

.blog-content h3{
    color:#fff;
    font-size:18px;
    margin-bottom:10px;
}

.blog-content p{
    color:#d7e4ff;
    font-size:14px;
    margin-bottom:20px;
}

/* BUTTON */
.blog-btn{
    display:block;
    width:fit-content;
    margin:20px auto 0;
    padding:10px 24px;
    background:#151040;
    border-radius:30px;
    text-align:center;
    text-decoration: none;
    color: #ffffff;
}

.blog-btn:hover{
    background:#393460;
    border-color:rgba(255,255,255,0.35);
    transform:translateY(-1px);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.28),
        0 0 10px rgba(47,140,255,0.28);
}

.blog-btn:focus-visible{
    outline:2px solid rgba(120,185,255,0.75);
    outline-offset:2px;
}

/* =========================
   HOVER EFFECT
========================= */
.blog-card:hover{
    transform:translateY(-10px) scale(1.02);
    border-color:rgba(96,161,255,0.65);
    box-shadow:
        0 16px 34px rgba(0,0,0,0.45),
        0 0 18px rgba(0,97,194,0.35);
}

.blog-card:hover::before{
    opacity:1;
}

.blog-card:hover img{
    transform:scale(1.06);
    filter:saturate(1.08) brightness(1.03);
}

/* =========================
   NAV BUTTONS
========================= */
.blog-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    background:#1262BB;
    backdrop-filter: blur(10px);
    color:#fff;
    border:none;
    border-radius:12px;
    z-index:999;
    pointer-events:auto;
    

}

/* LEFT */
.blog-nav.left{
    left:-80px;
}

/* RIGHT */
.blog-nav.right{
    right:-80px;
}

.blog-nav:hover{
    background:#1262BB;
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
}



@media (max-width: 1200px){

    .blog-card{
        flex: 0 0 calc((100% - 40px) / 2);
    }

   
    .blog-title{
        font-size:32px;
    }
}
@media (max-width: 992px){
    
    .blog-section{
        padding:80px 110px;
    }
    .blog-slider{
        position:relative;
        z-index:5;
    }
    /* FIXED WIDTH (NO CUT) */
    .blog-card{
        flex: 0 0 calc((100% - 20px) / 2);
    }

    
    /* GAP SYNC */
    .blog-track{
        gap:20px;
        padding: 0 10px;
    }

    /* NAV FIX */
    .blog-nav{
        width:45px;
        height:45px;
        z-index:9999;
    }



    .blog-title{
        font-size:28px;
    }
}

@media (max-width: 768px){

    .blog-card{
        flex: 0 0 100%;
    }

    .blog-title{
        font-size:24px;
    }

    .blog-subtitle{
        font-size:14px;
        margin-bottom:40px;
    }

    .blog-card img{
        height:170px;
    }

    .blog-content{
        padding:18px;
    }

    .blog-content h3{
        font-size:16px;
    }

    .blog-content p{
        font-size:13px;
    }

    .blog-btn{
        padding:8px 20px;
        font-size:13px;
    }
}

@media (max-width: 480px){

    .blog-card{
        flex: 0 0 100%;
    }

    .blog-nav{
        display:none; /* hide arrows */
    }

    .blog-card img{
        height:150px;
    }

    .blog-title{
        font-size:22px;
    }
}










/* 

.blog-section{
    position:relative;
    background: linear-gradient(135deg, #191346, #0d0a2e);
    padding:80px 20px;
    font-family:'Segoe UI', sans-serif;
}



.blog-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to bottom,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}



.blog-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to top,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}


.blog-container{
    max-width:1200px;
    margin:auto;
    text-align:center;
}


.blog-title{
    color:#fff;
    font-size:36px;
    margin-bottom:10px;
    margin-top: 90px;
}


.blog-subtitle{
    color:#cfd4ff;
    margin-bottom:50px;
}


.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}


.blog-card{
    background:#1262BB;
    border-radius:16px;
    overflow:hidden;
    transition:0.3s ease;
}


.blog-card img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
}


.blog-content{
    padding:20px;
    text-align:center;
}


.blog-content h3{
    color:#fff;
    font-size:18px;
    margin-bottom:10px;
    text-align: left;
}

.blog-content p{
    color:#e6edff;
    font-size:14px;
    margin-bottom:20px;
    line-height:1.5;
    text-align: left;
}


.blog-btn{
    width: 50%;
    display:inline-block;
    padding:10px 20px;
    background:#191346;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}


.blog-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
}

.blog-btn:hover{
    background: #443B6E;
}


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

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







/* SECTION */
.faq-section{
    position:relative;
    background: linear-gradient(180deg, #191346 0%, #151040 45%, #0f0b35 100%);
    padding:80px 20px;
    font-family:'Segoe UI', sans-serif;
    z-index: 50;
}


.faq-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:120px;

    background:linear-gradient(
        to bottom,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
    z-index: -1;  
}

.faq-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:110px;
    /* Blend into footer start color (Home-style) */
    background:linear-gradient(to top, #191346 0%, rgba(25,19,70,0) 100%);
    pointer-events:none;
    z-index: -1; 
}

.faq-section > *{
    position:relative;
    z-index:1;
}

/* CONTAINER */
.faq-container{
    max-width:900px;
    margin:auto;
    text-align:center;
     z-index: 60;
}

/* TITLE */
.faq-title{
    margin-top: 0;
    color:#fff;
    font-size:34px;
    margin-bottom:10px;
}

/* SUBTITLE */
.faq-subtitle{
    color:#cfd4ff;
    margin-bottom:40px;
}

/* WRAPPER */
.faq-wrapper{
    text-align:left;
    z-index: 70;

}

/* ITEM */
.faq-item{
    background:rgba(255,255,255,0.05);
    margin-bottom:15px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    transition:0.3s ease;
}

.faq-item:hover{
    background:rgba(0,97,194,0.15);
    border-color:rgba(0,97,194,0.4);
}
/* QUESTION */
.faq-question{
    width:100%;
    padding:18px 20px;
    background:none;
    border:none;
    color:#fff;
    font-size:16px;
    text-align:left;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* PLUS ICON */
.faq-question span{
    font-size:20px;
    transition:0.3s;
}

/* ANSWER */
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:0.4s ease;
    padding:0 20px;
}

.faq-answer p{
    color:#cfd4ff;
    font-size:14px;
    padding:10px 0 20px;
}

/* ACTIVE */
.faq-item.active .faq-answer{
    max-height:600px;
}

@media (max-width: 992px){

    .faq-container{
        max-width:700px;
    }

    .faq-title{
        font-size:28px;
    }

    .faq-subtitle{
        font-size:14px;
        margin-bottom:30px;
    }
}

@media (max-width: 768px){

    .faq-section{
        padding:60px 15px;
    }

    .faq-title{
        font-size:24px;
    }

    .faq-subtitle{
        font-size:13px;
    }

    .faq-question{
        font-size:15px;
        padding:15px;
    }

    .faq-answer{
        padding:0 15px;
    }

    .faq-answer p{
        font-size:13px;
    }
}

@media (max-width: 480px){

    .faq-title{
        font-size:20px;
    }

    .faq-question{
        font-size:14px;
    }

    .faq-answer p{
        font-size:12px;
    }
}








/* ═══════════════════════════════════════════
   FAQ PAGE — CATEGORY BROWSE SECTION
═══════════════════════════════════════════ */
.faq-cat-section{
    background:linear-gradient(180deg,#0d0a2e,#191346);
    padding:80px 20px;
    position:relative;
}
.faq-cat-container{max-width:1100px;margin:auto;}
.faq-cat-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 48px;
}
.faq-cat-header h2{
    font-size:clamp(24px,4vw,36px);
    font-weight:700;
    color:#fff;
    margin:0 0 12px;
}
.faq-cat-header p{
    color:rgba(255,255,255,0.6);
    font-size:15px;
    line-height:1.65;
}
.faq-cat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:20px;
}
.faq-cat-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:32px 20px 28px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    cursor:pointer;
    transition:.3s;
    text-align:center;
}
.faq-cat-card:hover{
    background:rgba(0,97,194,0.12);
    border-color:rgba(0,97,194,0.4);
    transform:translateY(-4px);
    box-shadow:0 8px 28px rgba(0,97,194,0.15);
}
.faq-cat-card i{
    font-size:30px;
    color:#60a5fa;
    transition:.3s;
}
.faq-cat-card:hover i{
    color:#fff;
}
.faq-cat-card h3{
    font-size:14px;
    font-weight:600;
    color:rgba(255,255,255,0.85);
    margin:0;
    line-height:1.4;
}

/* ═══════════════════════════════════════════
   FAQ PAGE — TECHNICAL FAQ GRID
═══════════════════════════════════════════ */
.tech-faq-section{
    background:linear-gradient(180deg,#0f0b35,#191346);
    padding:80px 20px 100px;
    position:relative;
}
.tech-faq-container{max-width:1200px;margin:auto;}
.tech-faq-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 52px;
}
.tech-faq-header h2{
    font-size:clamp(24px,4vw,36px);
    font-weight:700;
    color:#fff;
    margin:0 0 12px;
}
.tech-faq-header p{
    color:rgba(255,255,255,0.6);
    font-size:15px;
    line-height:1.7;
}
.tech-faq-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.tech-faq-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:28px 24px;
    transition:.3s;
    position:relative;
}
.tech-faq-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,#0061C2,#60a5fa);
    border-radius:16px 16px 0 0;
    opacity:0;
    transition:.3s;
}
.tech-faq-card:hover{
    background:rgba(0,97,194,0.08);
    border-color:rgba(0,97,194,0.3);
    transform:translateY(-4px);
    box-shadow:0 10px 32px rgba(0,97,194,0.12);
}
.tech-faq-card:hover::before{opacity:1;}
.tech-faq-card h3{
    font-size:15px;
    font-weight:700;
    color:#fff;
    margin:0 0 12px;
    line-height:1.4;
}
.tech-faq-card p{
    font-size:13px;
    color:rgba(255,255,255,0.62);
    line-height:1.7;
    margin:0;
}

@media(max-width:960px){
    .tech-faq-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
    .faq-cat-grid{grid-template-columns:repeat(2,1fr);}
    .tech-faq-grid{grid-template-columns:1fr;}
    .faq-cat-card{padding:24px 16px;}
}


/* ─────────────────────────────────────────── */

.cta-section{
    position:relative;
    padding:50px 20px;
    text-align:center;
    overflow:hidden;
    background-color:#0f0b35;
    background-image: url("../images/cta-bg-img.jpeg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    font-family:'Segoe UI', sans-serif;
}

/* .cta-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        #0f0b35 0%,
        rgba(15,11,53,0.86) 26%,
        rgba(20,15,62,0.72) 58%,
        rgba(25,19,70,0.7) 100%
    );
    pointer-events:none;
}

.cta-section > *{
    position:relative;
    z-index:1;
}

.cta-section::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:120px;
    background:linear-gradient(to top, #130e39 0%, rgba(19,14,57,0) 100%);
    pointer-events:none;
} */



.cta-container{
    background: #191346cf;
    padding: 50px;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: auto;
    border-radius: 20px;
}

.cta-container h2{
    color:#fff;
    font-size:36px;
    margin-bottom:15px;
}


.cta-container p{
    color:#cfd4ff;
    font-size:16px;
    margin-bottom:30px;
    line-height:1.6;
}

.cta-group{
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}



.cta-btn{
    display: inline-block;
    padding: 10px 40px;
    background: #ffffff;
    color: #130E39;
    border-radius: 30px;
    text-decoration: none;
    font-size: 20px;
    transition: 0.3s;
    white-space: nowrap;
}


.cta-btn.cta-primary{
    background:#ffffff;
    color:#130E39;
}

.cta-btn.cta-secondary{
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}



.cta-btn.cta-primary:hover{
    background:#0F0C33;
    color:#fff;
}

.cta-btn.cta-secondary:hover{
    background:#ffffff;
    color:#130E39;
} 


/* .cta-btn:hover{
    background:#0F0C33;
    color: #ffffff;
    transform:translateY(-3px);
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
} */






/* SECTION */
.contact-section{
    position:relative;
    padding:70px 20px;
    background: linear-gradient(180deg, #130E39 0%, #120d35 45%, #0f0b2f 100%);
    font-family:'Segoe UI', sans-serif;
}

.contact-section::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:100%;
    height:100px;
    background:linear-gradient(to bottom, #130e39 0%, rgba(19,14,57,0) 100%);
    pointer-events:none;
}

.contact-section::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:110px;
    background:linear-gradient(to top, #191346 0%, rgba(25,19,70,0) 100%);
    pointer-events:none;
}

.contact-section > *{
    position:relative;
    z-index:1;
}

/* CONTAINER */
.contact-container{
    display:flex;
    width:90%;
    max-width:1200px;
    margin:auto;
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(110,153,255,0.28);
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
}

/* ================= LEFT ================= */
.contact-left{
    flex:1;
    background:
    linear-gradient(
            135deg,
            rgba(17,12,51,0.9),
            rgba(17,12,51,0.6)
        ),
    url("../images/cta-bg-img.jpeg") center/cover no-repeat;
    position:relative;
    overflow:hidden;
}



/* CONTENT */
.contact-content{
    padding:80px 60px;
    color:#fff;
}

/* TAG */
.tag{
    color:#aab6ff;
    font-size:14px;
    letter-spacing:1px;
}

/* TITLE */
.contact-content h2{
    font-size:34px;
    margin:15px 0;
    font-size:clamp(22px, 4vw, 34px);
}

/* TEXT */
.contact-content p{
    color:#cfd4ff;
    margin-bottom:20px;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

/* INFO BOX */
.info-box{
    display:flex;
    align-items:flex-start; 
    gap:15px;
    margin-bottom:18px;
}

.info-box i{
    width:50px;
    height:50px;
    background:#0e70e9;
    color:#191346e0;            
    border-radius:10px;
    display:flex;           
    align-items:center;     
    justify-content:center; 
    font-size:30px;        
    margin-top:5px;

}

.contact-section .contact-info-link,
.contact-section .contact-info-link:hover,
.contact-section .contact-info-link:focus,
.contact-section .contact-info-link:visited{
    color:#cfd4ff;
    text-decoration:none;
}
.contact-section .contact-info-link:hover{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ================= RIGHT ================= */
.contact-right{
    flex:1;
    padding:80px 60px;
    color:#fff;
    background:#191346;
}

/* TITLE */
.contact-right h2{
    margin-bottom:25px;
    font-size:clamp(14px, 2vw, 16px);
}

/* FORM */
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:none;
    border-radius:8px;
    background:rgb(255 255 255 / 14%);
    color:#fff;
}

/* ROW */
.form-row{
    display:flex;
    gap:15px;
}

/* LABEL */
.label{
    display:block;
    margin:10px 0;
}

/* TEXTAREA */
textarea{
    height:135px;
}

/* CHECKBOX */
.checkbox{
    display:flex;
    gap:10px;
    font-size:13px;
    margin:15px 0;
}

.checkbox input{
    width:15px;
    margin-bottom: 0;
}

/* BUTTON */
.contact-form button{
    width:100%;
    padding:14px;
    background:#1262BB;
    border:none;
    color:#fff;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}

.contact-form button:hover{
    background:#0e4fa0;
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);

}

/* RESPONSIVE */
@media(max-width:992px){

    .contact-container{
        flex-direction:column;
    }

    .contact-left,
    .contact-right{
        width:100%;
    }

    .contact-content{
        padding:60px 40px;
    }

    .contact-right{
        padding:50px 40px;
    }
}


@media(max-width:768px){

    .contact-section{
        padding:50px 15px;
    }

    .contact-content{
        padding:40px 20px;
    }

    .contact-right{
        padding:40px 20px;
    }

    .form-row{
        flex-direction:column; /* 🔥 stack inputs */
        gap:0;
    }

    .info-box{
        gap:12px;
    }

    .info-box i{
        width:40px;
        height:40px;
        font-size:20px;
    }
}

@media(max-width:480px){

    .contact-content h2{
        line-height:1.3;
    }

    .contact-container{
        border-radius:15px;
    }

    .contact-form input,
    .contact-form textarea{
        font-size:14px;
        padding:10px;
    }

    .contact-form button{
        padding:12px;
        font-size:14px;
    }

    .checkbox{
        font-size:12px;
    }
}

/* contact page — map band (ported from `previous/static/css/style.css`) */
.contact-map-sec{
    padding:100px 20px;
    background:linear-gradient(180deg,#0f0b35,#191346);
    position:relative;
}
.contact-map-wrapper{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;
    align-items:center;
}
.contact-map-left h2{
    color:#fff;
    font-size:32px;
    margin-bottom:15px;
}
.contact-map-left p{
    color:#cfd4ff;
    margin-bottom:20px;
    line-height:1.6;
}
.map-info p{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    margin-bottom:10px;
}
.map-info i{
    color:#0061C2;
}
.map-info-link,
.map-info-link:hover,
.map-info-link:focus,
.map-info-link:visited{
    color:#fff;
    text-decoration:none;
}
.map-info-link:hover{
    color:#93c5fd;
    text-decoration:underline;
    text-underline-offset:3px;
}
.map-btn{
    display:inline-block;
    margin-top:15px;
    padding:10px 25px;
    background:#0061C2;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    transition:0.3s;
}
.map-btn:hover{
    background:#004a94;
    color:#fff;
    text-decoration:none;
}
.contact-map-right{
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
    position:relative;
}
.contact-map-right iframe{
    width:100%;
    height:400px;
    border:0;
    display:block;
}
@media (max-width:1200px){
    .contact-map-wrapper{
        padding:0 20px;
        gap:30px;
    }
}
@media (max-width:992px){
    .contact-map-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }
    .contact-map-left{
        text-align:center;
    }
    .map-info p{
        justify-content:center;
    }
}
@media (max-width:768px){
    .contact-map-sec{
        padding:80px 15px;
    }
    .contact-map-left h2{
        font-size:26px;
    }
    .contact-map-right iframe{
        height:350px;
    }
}
@media (max-width:576px){
    .contact-map-left h2{
        font-size:22px;
    }
    .contact-map-left p{
        font-size:14px;
    }
    .map-info p{
        font-size:14px;
    }
    .contact-map-right iframe{
        height:300px;
    }
    .map-btn{
        padding:10px 20px;
        font-size:14px;
    }
}
@media (max-width:480px){
    .contact-map-right iframe{
        height:260px;
    }
    .map-btn{
        width:100%;
        text-align:center;
    }
}


/* =========================
   FOOTER
========================= */
.footer{
    position:relative;
    /* Match the end color of page sections (e.g. .faq-section) to avoid a hard cut */
    background:linear-gradient(180deg, #0f0b35 0%, #171243 55%, #191346 100%);
    box-shadow:0 -1px 0 rgba(255,255,255,0.06);
    padding:80px 20px 30px;
    font-family:'Poppins', sans-serif;
    color:#fff;
}

.footer::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:100%;
    height:55px;
    background:linear-gradient(to bottom, rgba(15,11,53,0.65) 0%, rgba(15,11,53,0) 100%);
    pointer-events:none;
}

.footer > *{
    position:relative;
    z-index:1;
}

/* CONTAINER */
.footer-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}
.footer-col{
    min-width:0;
}

/* COLUMN */
.footer-col h3{
    margin-bottom:20px;
    font-size:18px;
}

/* LINKS */
.footer-col ul{
    list-style:none;
    padding:0;
}

.footer-col ul li{
    margin-bottom:10px;
    color:#cfd4ff;
}

.footer-col ul li a{
    text-decoration:none;
    color:#cfd4ff;
    transition:0.3s;
}

.footer-col ul li a:hover{
    color:#0061C2;
}

/* CONTACT TEXT */
.footer-col p{
    color:#cfd4ff;
    margin-bottom:10px;
}

.footer a,
.contact-info a{
    color:#cfd4ff;
    text-decoration:none;
}

.footer a:hover,
.contact-info a:hover{
    color:#0061C2;
}

/* LOGO */
.footer-about img{
    width:140px;
    margin-bottom:15px;
}

/* SUBSCRIBE */
.subscribe-box{
    display:flex;
    margin-top:15px;
}

.subscribe-box input{
    flex:1;
    padding: 10px 0px 10px 30px;
    border:none;
    outline:none;
    border-radius:20px 0 0 20px;
}

.subscribe-box button{
    padding:10px 20px;
    background:#0061C2;
    border:none;
    color:#fff;
    border-radius:0 20px 20px 0;
    cursor:pointer;
}
.subscribe-box button:hover{
    background:#1262BB;
    box-shadow:
        0 0 10px rgba(0,97,194,0.6),
        0 0 20px rgba(0,97,194,0.5),
        0 0 40px rgba(0,97,194,0.4);
}

/* =========================
   BOTTOM
========================= */
.footer-bottom{
    max-width: 85%;
    margin: 0 auto;
    margin-top:50px;
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.footer-bottom p{
    color:#cfd4ff;
    font-size:14px;
    margin-bottom: 0;
}

/* SOCIAL */
.socials a{
    margin-left:15px;
    text-decoration:none;
    color:#cfd4ff;
    font-size:14px;
}

.socials a:hover{
    color:#0061C2;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px){

    .footer-container{
        grid-template-columns: repeat(2, 1fr);
        gap:30px;
    }

    .footer{
        padding:60px 20px 30px;
    }
}

@media (max-width: 768px){

    .footer-container{
        grid-template-columns: 1fr;
        gap:25px;
        text-align:center;
    }

    .footer-col h3{
        margin-bottom:12px;
    }

    .footer-col ul li{
        margin-bottom:8px;
    }

    .footer-about img{
        margin:auto;
        margin-bottom:15px;
    }
}

@media (max-width: 768px){

    .subscribe-box{
        flex-direction:column;
        gap:10px;
    }

    .subscribe-box input{
        width: 40%;
        border-radius:20px;
        padding:10px 15px;
        margin: 0 auto;
    }

    .subscribe-box button{
        border-radius:20px;
        width: 40%;
        margin: 0 auto;
    }
}




/* About page */




/* =========================
   ABOUT HERO (PREMIUM FINAL)
========================= */
.about-hero{
    position: relative;
    padding: 150px 0 50px;
    overflow: hidden;
    z-index: 0;
}

/* BACKGROUND IMAGE */
.about-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        url("../images/about/hero-img.jpeg") no-repeat center / cover;

    z-index:-2;
    animation:aboutZoom 18s ease-in-out infinite;
}

/* OVERLAY (for readability) */
.about-hero::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(19,14,57,0.7),
        rgba(19,14,57,0.85)
    );

    z-index:-1;
}

/* CONTAINER */
.about-wrap-hero{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* FLEX CENTER */
.about-flex{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:420px;
}

/* CONTENT */
.about-page-content{
    position:relative;
    z-index:2;
    text-align:center;
}

/* SUBTITLE */
.about-page-content h3{
    font-size:clamp(14px, 2.5vw, 20px);
    color:#fff;
    margin-bottom:25px;
    letter-spacing:1px;
}

/* TITLE */
.about-page-content h1{
    font-size:clamp(28px, 5vw, 50px);
    color:#fff;
    line-height:1.3;
    margin-bottom:20px;
}

/* HIGHLIGHT */
.about-page-content h1 span{
    color:#0061C2 !important;
    margin-left: 10px;
    text-shadow:0 0 10px rgba(0,97,194,0.5);
}



/* DESCRIPTION */
.about-page-desc{
    font-size:clamp(14px, 2vw, 16px);
    color:#cfd4ff;
    line-height:1.6;
    max-width:750px;
    margin:0 auto;
}

/* =========================
   ANIMATION
========================= */
@keyframes aboutZoom{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.05); }
    100%{ transform:scale(1); }
}

/* =========================
   TABLET
========================= */
@media (max-width: 992px){

    .about-hero{
        padding:120px 0 40px;
    }

    .about-flex{
        min-height:350px;
    }

    .about-page-content h3{
        margin-bottom:20px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){

    .about-hero{
        padding:100px 0 30px;
    }

    .about-flex{
        min-height:300px;
    }

    .about-page-content h1{
        line-height:1.4;
    }

    .about-page-desc{
        padding:0 5px;
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px){

    .about-hero{
        padding:90px 0 20px;
    }

    .about-flex{
        min-height:260px;
    }

    .about-page-content h1{
        font-size:24px;
    }

    .about-page-content h3{
        margin-top: 20px;
        font-size:13px;
    }

    .about-page-desc{
        font-size:13px;
    }
}











/* =========================
   WHO WE ARE SECTION
========================= */
.about-who{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(180deg, #130e39 0%, #191346 100%);
    color:#fff;
}

.about-who::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:56px;
    background:linear-gradient(to bottom, rgba(19,14,57,0.68) 0%, rgba(19,14,57,0) 100%);
    pointer-events:none;
}

.about-who > *{
    position:relative;
    z-index:1;
}

.about-wrap-who{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 40px;
}

/* FLEX */
.about-who-flex{
    display:flex;
    align-items:center;
    gap:60px;
}

.about-who-flex > div{
    min-width:0;
}

/* LEFT CONTENT */
.about-who-content{
    flex:1;
    max-width:600px;
}

.about-who-content h2{
    font-size:34px;
    margin-bottom:20px;
    font-size:clamp(24px, 4vw, 34px);
}

/* TEXT */
.about-who-desc{
    color:#c9d1e3;
    margin-bottom:15px;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

.about-who-sub{
    color:#c9d1e3;
    margin-bottom:25px;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

/* POINTS */
.about-who-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    font-size:14px;
}

/* each item */
.about-who-points div{
    display:flex;
    align-items:center;
    gap:10px;
    color:#c9d1e3;
}

/* icon style */
.about-who-points i{
    color:#0061C2;
    font-size:16px;
}

/* RIGHT IMAGE */
.about-who-img{
    flex:1;
    position:relative;
}



/* IMAGE */
.about-who-img img{
    width:100%;
    border-radius:12px;
    display:block;
    transition:0.4s ease;
}

/* HOVER EFFECT (Glow + Zoom) */
.about-who-img:hover img{
    transform:scale(1.03);

    box-shadow:
        0 0 20px rgba(0,97,194,0.6),
        0 0 40px rgba(0,97,194,0.4),
        0 0 80px rgba(0,97,194,0.3);
}
@media (max-width: 992px){

    .about-who{
        padding:80px 0;
    }

    .about-who-flex{
        flex-direction:column;
        gap:40px;
        text-align:center;
    }

    .about-who-content{
        max-width:100%;
    }

    .about-who-points{
        justify-content:center;
    }
}

@media (max-width: 768px){

    .about-who{
        padding:60px 0;
    }

    .about-who-flex{
        gap:30px;
    }

    .about-who-points{
        grid-template-columns:1fr; /* 🔥 important */
        text-align:left;
    }

    .about-who-points div{
        font-size:13px;
    }

    .about-who-img::before{
        inset:-5px;
        filter:blur(25px);
    }
}

@media (max-width: 480px){

    .about-who{
        padding:50px 0;
    }

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

    .about-who-desc,
    .about-who-sub{
        font-size:13px;
    }

    .about-who-img img{
        border-radius:10px;
    }
}












/* =========================
   WHAT WE BUILD
========================= */
.about-build{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(180deg, #191346 0%, #151040 48%, #0d0a2e 100%);
    color:#fff;
}

.about-wrap-build{
    width:100%;
    max-width:1300px;
    margin:auto;
    padding:0 40px;
}

/* HEADER */
.about-build-head{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:60px;
}

.about-build-head h2{
    font-size:34px;
    margin-bottom:15px;
    color:#ffffff;
}

.about-build-head p{
    color:#cfd4ff; /* lighter navy tone */
    line-height:1.6;
}

/* GRID */
.about-build-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px 20px;
}

/* CARD */
.about-build-card{
    position:relative;
    background:rgba(255,255,255,0.03); 
    border:1px solid rgba(255,255,255,0.06);
    padding:60px 22px 30px;
    border-radius:16px;
    text-align:center;
    transition:all 0.35s ease;
    backdrop-filter: blur(12px);
}

/* ICON WRAPPER */
.build-icon{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    background:#191346;
    border:1px solid rgba(0,97,194,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 0 12px rgba(0,97,194,0.5),
        inset 0 0 6px rgba(255,255,255,0.05);
}

/* ICON */
.build-icon i{
    color:#0061C2;
    font-size:25px;
}

/* TITLE */
.about-build-card h3{
    font-size:18px;
    margin-bottom:10px;
    color:#ffffff;
}

/* TEXT */
.about-build-card p{
    font-size:14px;
    color:#bfc6ff;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

/* HOVER */
.about-build-card:hover{
    transform:translateY(-10px) scale(1.02);
    border-color:#0061C2;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.4),
        0 0 25px rgba(0,97,194,0.4),
        0 0 45px rgba(0,97,194,0.25);
}

/* ICON HOVER BOOST */
.about-build-card:hover .build-icon{
    box-shadow:
        0 0 15px rgba(0,97,194,0.8),
        0 0 30px rgba(0,97,194,0.6),
        0 0 60px rgba(0,97,194,0.4);
}



@media (max-width: 992px){

    .about-build{
        padding:80px 0;
    }

    .about-build-head{
        margin-bottom:40px;
    }
    .about-build-grid{
        gap: 35px 20px;
    }
}

@media (max-width: 768px){

    .about-build{
        padding:60px 0;
    }

    .about-build-grid{
        gap: 40px 20px;
    }

    .about-build-card{
        padding:50px 18px 25px;
    }

    .about-build-card h3{
        font-size:16px;
    }

    .about-build-card p{
        font-size:13px;
    }

    .build-icon{
        width:46px;
        height:46px;
        top:-20px;
    }

    .build-icon i{
        font-size:20px;
    }
}

@media (max-width: 480px){

    .about-build{
        padding:50px 0;
    }

    .about-build-head{
        margin-bottom:30px;
    }

    .about-build-card{
        padding:45px 15px 22px;
        border-radius:12px;
    }

    .about-build-card h3{
        font-size:15px;
    }

    .about-build-card p{
        font-size:12px;
    }
}











/* =========================
   PROCESS SECTION
========================= */
.about-process{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(180deg, #0d0a2e 0%, #151040 48%, #191346 100%);
    color:#fff;
}

.about-wrap-process{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 40px;
}

/* HEADER */
.about-process-head{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:70px;
}

.about-process-head h2{
    font-size:34px;
    margin-bottom:15px;
}

.about-process-head p{
    color:#cfd4ff;
    line-height:1.6;
}

/* GRID */
.about-process-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:25px;
}

/* CARD */
.process-card{
    position:relative;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    padding:30px 20px;
    border-radius:14px;
    text-align:left;
    transition:0.3s ease;
}

/* STEP NUMBER */
.process-num{
    position: absolute;
    top: 2px;
    right: 10px;
    font-size: 25px;
    font-weight: 700;
    color: #0061c2b3;
    opacity: 0.9;
}
/* TITLE */
.process-card h3{
    font-size:16px;
    margin-bottom:10px;
    margin-top: 10px;
}

/* TEXT */
.process-card p{
    font-size:14px;
    color:#c9d1e3;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

/* HOVER */
.process-card:hover{
    transform:translateY(-8px);
    border-color:#0061C2;
    box-shadow:
        0 0 20px rgba(0,97,194,0.4),
        0 0 40px rgba(0,97,194,0.2);
}

@media (max-width: 992px){

    .about-process{
        padding:80px 0;
    }

    .about-process-head{
        margin-bottom:50px;
    }

    .process-card{
        padding:25px 18px;
    }
}

@media (max-width: 768px){

    .about-process{
        padding:60px 0;
    }

    .about-process-grid{
        gap:20px;
    }

    .process-card{
        padding:22px 16px;
    }

    .process-card h3{
        font-size:15px;
    }

    .process-card p{
        font-size:13px;
    }

    .process-num{
        font-size:20px;
    }
}

@media (max-width: 480px){

    .about-process{
        padding:50px 0;
    }

    .about-process-head{
        margin-bottom:35px;
    }

    .process-card{
        border-radius:12px;
    }

    .process-card h3{
        font-size:14px;
    }

    .process-card p{
        font-size:12px;
    }
}













/* =========================
   WHY CHOOSE US (IMAGE STYLE)
========================= */
.about-why{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(180deg, #191346 0%, #151040 48%, #0d0a2e 100%);
    color:#fff;
}

.about-wrap-why{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* HEADER */
.about-why-head{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:70px;
}

.about-why-head h2{
    font-size:clamp(28px, 3.2vw, 42px);
    margin-bottom:15px;
}

.about-why-head p{
    color:#cfd4ff;
    line-height:1.6;
    font-size:clamp(14px, 1.4vw, 16px);
}

/* GRID */
.about-why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
    gap:28px;
}

/* CARD */
.why-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:18px;
    overflow:hidden;
    padding:34px 30px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* subtle top accent */
.why-card::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:3px;
    background:linear-gradient(90deg, rgba(96,165,250,0), rgba(96,165,250,0.85), rgba(96,165,250,0));
    opacity:0.35;
}

/* inner glow */
.why-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(800px 260px at 18% 0%, rgba(0,97,194,0.18), transparent 55%),
        radial-gradient(700px 260px at 90% 30%, rgba(96,165,250,0.10), transparent 55%);
    opacity:0;
    transition:opacity 0.25s ease;
    pointer-events:none;
}

/* IMAGE */
.why-img{
    width:100%;
    height:170px;
    overflow:hidden;
    border-radius:14px;
}

.why-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
    border-radius:14px;
}

/* CONTENT */
.why-card h3{
    font-size:clamp(18px, 1.8vw, 22px);
    font-weight:700;
    margin:0;
    line-height:1.2;
    letter-spacing:0.2px;
}

.why-card p{
    color:#dde9ff;
    margin:0;
    line-height:1.7;
    font-size:clamp(14px, 1.5vw, 16px);
    opacity:0.78;
}

/* HOVER */
.why-card:hover{
    transform:translateY(-6px);
    border-color:rgba(96,165,250,0.45);
    box-shadow:0 16px 40px rgba(0,0,0,0.35);
}

.why-card:hover img{
    transform:scale(1.1);
}

.why-card:hover::after{opacity:1;}


@media (max-width: 992px){

    .about-why{
        padding:80px 0;
    }

    .about-why-head{
        margin-bottom:50px;
    }

    .why-img{
        height:160px;
    }
}

@media (max-width: 768px){

    .about-why{
        padding:60px 0;
    }

    .about-why-grid{
        gap:18px;
    }

    .why-img{
        height:150px;
    }

    .why-card h3{
        font-size:16px;
    }

    .why-card p{
        font-size:13px;
    }
}

@media (max-width: 480px){

    .about-why{
        padding:50px 0;
    }

    .about-why-head{
        margin-bottom:35px;
    }

    .why-img{
        height:140px;
    }

    .why-card{
        border-radius:12px;
        padding:22px 18px;
        min-height:unset;
    }

    .why-card h3{
        font-size:15px;
    }

    .why-card p{
        font-size:12px;
    }
}








/* =========================
   STATS / ACHIEVEMENTS
========================= */
.about-stats{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(180deg, #191346 0%, #151040 48%, #0d0a2e 100%);
    color:#fff;
}

.about-wrap-stats{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}
/* HEADER */
.about-stats-head{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:60px;
}

.about-stats-head h2{
    font-size:34px;
    margin-bottom:15px;
    font-size:clamp(24px, 4vw, 34px);
}

.about-stats-head p{
    color:#cfd4ff;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

/* =========================
   STATS GRID
========================= */
.about-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:25px;
    margin-bottom:60px;
}

/* CARD */
.stat-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    padding:45px 20px;
    border-radius:18px;
    text-align:center;
    transition:0.3s ease;
    backdrop-filter: blur(10px);
}

/* NUMBER */
.stat-card h3{
    font-size:40px;
    color:#0061C2;
    margin-bottom:10px;
    font-size:clamp(28px, 5vw, 40px);
}

/* TEXT */
.stat-card p{
    font-size:14px;
    color:#c9d1e3;
    font-size:clamp(13px, 2vw, 14px);
}

/* HOVER */
.stat-card:hover{
    transform:translateY(-10px);
    border-color:#0061C2;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4),
        0 0 25px rgba(0,97,194,0.4);
}

/* =========================
   ACHIEVEMENT CARDS
========================= */
.about-achievements{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
}
/* CARD */
.ach-card{
    display:flex;
    align-items:flex-start;
    gap:15px;

    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    padding:18px 20px;
    border-radius:12px;
    transition:0.3s ease;
}

/* ICON */
.ach-card i{
    font-size:20px;
    color:#0061C2;
}

/* TEXT */
.ach-card h4{
    font-size:15px;
    margin-bottom:5px;
}

.ach-card p{
    font-size:13px;
    color:#c9d1e3;
    line-height:1.5;
}

/* HOVER */
.ach-card:hover{
    transform:translateY(-5px);
    border-color:#0061C2;
    box-shadow:0 0 20px rgba(0,97,194,0.3);
}

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

@media (max-width: 768px){
    .about-achievements{
        grid-template-columns: 1fr;
    }
}

/* Small mobile */
@media (max-width: 480px){
    .ach-card{
        flex-direction: column;
        align-items:flex-start;
    }

    .ach-card i{
        font-size:18px;
    }
}












/* =========================
   ENGINEERING MINDSET
========================= */
.about-mindset{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:linear-gradient(180deg, #0d0a2e 0%, #151040 48%, #191346 100%);
    color:#fff;
}

/* Remove heavy inter-section overlays that caused visible dark bands */
.about-who::before,
.about-build::before,
.about-process::before,
.about-why::before,
.about-stats::before,
.about-mindset::before,
.about-who::after,
.about-build::after,
.about-process::after,
.about-why::after,
.about-stats::after,
.about-mindset::after{
    content:none;
}

.about-who > *,
.about-build > *,
.about-process > *,
.about-why > *,
.about-stats > *,
.about-mindset > *{
    position:relative;
    z-index:1;
}

/* About page specific transition tuning:
   smooth CTA -> Achievements blend without dark band */
.about-page .cta-section{
    padding-bottom:35px;
}

.about-page .cta-section::after{
    height:85px;
    background:linear-gradient(to top, #191346 0%, rgba(25,19,70,0) 100%);
}

.about-page .about-stats{
    padding-top:70px;
}

.about-page .about-stats::before{
    content:none;
}

.about-wrap-mindset{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 40px;
}

.about-wrap-mindset h2{
    margin-bottom: 70px;
    text-align: center;
    font-size:clamp(14px, 2vw, 30px);
}
/* FLEX */
.about-mindset-flex{
    display:flex;
    align-items:flex-start;
    gap:60px;
}

/* prevent overflow issues */
.about-mindset-flex > div{
    min-width:0;
}

/* LEFT CONTENT */
.mindset-content{
    flex:1;
    max-width:550px;
    
}



.mindset-desc{
    color:#cfd4ff;
    margin-bottom:15px;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

.mindset-sub{
    color:#c9d1e3;
    margin-bottom:25px;
    line-height:1.6;
    font-size:clamp(14px, 2vw, 16px);
}

/* POINTS */
.mindset-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:14px;
}

.mindset-points div{
    display:flex;
    align-items:center;
    gap:10px;
    color:#c9d1e3;
}

.mindset-points i{
    color:#0061C2;
}

/* RIGHT CARDS */
.mindset-cards{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* CARD */
.mind-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    padding:25px;
    border-radius:14px;
    transition:0.3s ease;
}

/* TITLE */
.mind-card h3{
    font-size:18px;
    margin-bottom:10px;
}

/* TEXT */
.mind-card p{
    font-size:14px;
    color:#c9d1e3;
    line-height:1.6;
}

/* HOVER */
.mind-card:hover{
    transform:translateY(-6px);
    border-color:#0061C2;
    box-shadow:
        0 0 20px rgba(0,97,194,0.4),
        0 0 40px rgba(0,97,194,0.2);
}


@media (max-width: 992px){

    .about-mindset{
        padding:80px 0;
    }

    .about-mindset-flex{
        flex-direction:column;
        gap:40px;
    }

    .mindset-content{
        max-width:100%;
        text-align:center;
    }

    .mindset-points{
        justify-content:center;
    }

    .mindset-cards{
        width:100%;
    }
}

@media (max-width: 768px){

    .about-mindset{
        padding:60px 0;
    }

    .about-wrap-mindset h2{
        margin-bottom:40px;
    }

    .mindset-points{
        grid-template-columns:1fr; 
        text-align:left;
    }

    .mindset-points div{
        font-size:13px;
    }

    .mind-card{
        padding:20px;
    }

    .mind-card h3{
        font-size:16px;
    }

    .mind-card p{
        font-size:13px;
    }
}

@media (max-width: 480px){

    .about-mindset{
        padding:50px 0;
    }

    .about-wrap-mindset h2{
        font-size:22px;
    }

    .mindset-desc,
    .mindset-sub{
        font-size:13px;
    }

    .mind-card{
        border-radius:12px;
    }
}















/* Final About page hero -> who transition fix */
.about-page .about-hero::after{
    background:
        linear-gradient(
            to right,
            rgba(25,19,70,0.95) 25%,
            rgba(25,19,70,0.75) 45%,
            rgba(25,19,70,0.3) 70%,
            rgba(25,19,70,0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(13,10,46,0) 54%,
            rgba(19,14,57,0.7) 82%,
            #130e39 100%
        );
}

.about-page .about-who{
    margin-top:-1px;
    background:linear-gradient(180deg, #130e39 0%, #191346 100%);
}











/* Service page */


/* SECTION */
.svc-overview {
    position: relative;
    padding: 100px 40px;
    background: linear-gradient(180deg, #191346, #0f0c2e); /* navy tone */
    color: #fff;
}

/* TOP FADE */
.svc-overview::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 120px;

    background: linear-gradient(
        to bottom,
        #191346 0%,
        rgba(25,19,70,0) 100%
    );

    pointer-events: none;
}

/* BOTTOM FADE */
.svc-overview::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;

    background: linear-gradient(
        to top,
        #0f0c2e 0%,
        rgba(15,12,46,0) 100%
    );

    pointer-events: none;
}

/* CONTAINER */
.svc-container {
    max-width: 1200px;
    margin: auto;
}

/* HEADER */
.svc-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.svc-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: clamp(26px, 5vw, 40px);
}

.svc-header p {
    color: rgba(255,255,255,0.7);
    font-size: clamp(14px, 2vw, 16px);
}

/* GRID */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* CARD */
.svc-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: 0.4s ease;
    position: relative;
    user-select: text;
}

/* IMAGE */
.svc-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* CONTENT */
.svc-card h3 {
    font-size: 20px;
    margin: 20px 20px 10px;
    color: #ffffff;
}

.svc-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin: 0 20px 20px;
    line-height: 1.6;
}

/* HOVER */
.svc-card:hover {
    transform: translateY(-10px);
    border-color: #0061C2; /* brand blue */
}

/* GLOW */
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0, 97, 194, 0.2), /* blue glow */
        transparent
    );
    opacity: 0;
    transition: 0.4s;
    pointer-events: none;
}

.svc-card:hover::before {
    opacity: 1;
}

/* Home page — Our Core Services uses .svc-overview; stagger cards on scroll */
.home-core-services .svc-card {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-core-services.show .svc-card {
    opacity: 1;
    transform: translateY(0);
}
.home-core-services.show .svc-card:nth-child(1) {
    transition-delay: 0.12s;
}
.home-core-services.show .svc-card:nth-child(2) {
    transition-delay: 0.22s;
}
.home-core-services.show .svc-card:nth-child(3) {
    transition-delay: 0.32s;
}
.home-core-services.show .svc-card:nth-child(4) {
    transition-delay: 0.42s;
}
.home-core-services.show .svc-card:nth-child(5) {
    transition-delay: 0.52s;
}
.home-core-services.show .svc-card:nth-child(6) {
    transition-delay: 0.62s;
}
.home-core-services.show .svc-card:nth-child(7) {
    transition-delay: 0.72s;
}
.home-core-services.show .svc-card:nth-child(8) {
    transition-delay: 0.82s;
}

@media (max-width: 992px){

    .svc-overview {
        padding: 80px 15px;
    }

    .svc-header {
        margin-bottom: 50px;
    }

    .svc-card h3 {
        font-size: 18px;
    }
}

@media (max-width: 768px){

    .svc-overview {
        padding: 60px 15px;
    }

    .svc-grid {
        gap: 20px;
    }

    .svc-card {
        border-radius: 14px;
    }

    .svc-card h3 {
        font-size: 16px;
        margin: 15px 15px 8px;
    }

    .svc-card p {
        font-size: 13px;
        margin: 0 15px 15px;
    }
}

@media (max-width: 480px){

    .svc-overview {
        padding: 50px 10px;
    }

    .svc-header {
        margin-bottom: 35px;
    }

    .svc-card h3 {
        font-size: 15px;
    }

    .svc-card p {
        font-size: 12px;
    }
}












/* SECTION */
.svc-details-section{
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(180deg, #0f0c2e, #191346);
    color: #fff;
}

.svc-details-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:80px;

    background:linear-gradient(
        to top,
        #191346 0%,
        rgba(25,19,70,0.9) 25%,
        rgba(25,19,70,0.6) 50%,
        rgba(25,19,70,0.3) 75%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}

/* CONTAINER */
.svc-details-container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* HEADER */
.svc-details-header{
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.svc-details-header h2{
    font-size: 38px;
    margin-bottom: 10px;
}

.svc-details-header p{
    color: rgba(255,255,255,0.7);
}

/* GRID */
.svc-details-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:25px;
}

/* CARD */
.svc-details-card{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 30px;
    transition: 0.3s ease;
    position: relative;
}

/* HOVER */
.svc-details-card:hover{
    transform: translateY(-8px);
    border-color: #0061C2;
}

/* GLOW */
.svc-details-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,97,194,0.2),
        transparent
    );
    opacity:0;
    transition:0.3s;
    pointer-events:none;
}

.svc-details-card:hover::before{
    opacity:1;
}

/* TITLE */
.svc-details-card h3{
    margin-bottom: 10px;
    font-size:clamp(16px, 5vw, 22px);
}

/* TEXT */
.svc-details-card p{
    color: rgba(255,255,255,0.75);
    margin-bottom: 15px;
    font-size:clamp(14px, 2vw, 16px);
}

/* LIST */
.svc-details-card ul{
    padding-left: 18px;
}

.svc-details-card ul li{
    margin-bottom: 8px;
    color: #cfd4ff;
    font-size: 14px;
}


@media (max-width: 992px){

    .svc-details-section{
        padding:80px 15px;
    }

    .svc-details-header{
        margin-bottom:50px;
    }

    .svc-details-card{
        padding:22px;
    }
}

@media (max-width: 768px){

    .svc-details-section{
        padding:60px 15px;
    }

    .svc-details-grid{
        gap:20px;
    }

    .svc-details-card h3{
        font-size:16px;
    }

    .svc-details-card p{
        font-size:13px;
    }

    .svc-details-card ul li{
        font-size:12px;
    }
}

@media (max-width: 480px){

    .svc-details-section{
        padding:50px 10px;
    }

    .svc-details-header{
        margin-bottom:35px;
    }

    .svc-details-card{
        border-radius:12px;
    }
}









/* SECTION */
.tech-section {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(180deg, #0f0c2e, #191346);
    color: #fff;
}

.tech-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:160px;

    background:linear-gradient(
        to bottom,
        #191346 0%,
        rgba(25,19,70,0.9) 25%,
        rgba(25,19,70,0.6) 50%,
        rgba(25,19,70,0.3) 75%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}

.tech-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:80px;
    background:linear-gradient(
        to top,
        #191346 0%,
        rgba(25,19,70,0.95) 25%,
        rgba(25,19,70,0.7) 50%,
        rgba(25,19,70,0.3) 75%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}
/* CONTAINER */
.tech-container {
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* HEADER */
.tech-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.tech-header h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    font-size:clamp(26px, 5vw, 40px);
}

.tech-header p {
    color: rgba(255,255,255,0.7);
}


/* GRID */
.tech-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:25px;
}

/* CARD */
.tech-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    transition: 0.3s ease;
    position: relative;
}

/* IMAGE */
.tech-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: brightness(0.9);
}

/* FA ICON fallback — same visual weight as the img */
.tech-card i {
    font-size: 52px;
    margin-bottom: 15px;
    display: block;
    color: #0061C2;
    line-height: 1;
}

/* TITLE */
.tech-card h3 {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

/* HOVER */
.tech-card:hover {
    transform: translateY(-6px);
    border-color: #0061C2;
}

/* GLOW */
.tech-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0, 97, 194, 0.2),
        transparent
    );
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.tech-card:hover::before {
    opacity: 1;
}



/* Large Tablet */
@media (max-width: 1200px){
    .tech-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet */
@media (max-width: 992px){
    .tech-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small Tablet */
@media (max-width: 768px){
    .tech-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

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











/* SECTION */
.svc-cta-section{
    position:relative;
    padding:50px 20px;
    text-align:center;
    overflow:hidden;
    background-color:#0f0b35;
    background-image: url("../images/cta-bg-img.jpeg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    font-family:'Segoe UI', sans-serif;
}

.svc-cta-section::before{
    content:"";
    position:absolute;
    inset:0;

    background: /* TOP BLEND (NEW) */ linear-gradient(to bottom, #191346 0%, rgba(25, 19, 70, 0.9) 0%, rgba(25, 19, 70, 0.6) 14%, rgba(25, 19, 70, 0.3) 51%, rgba(25, 19, 70, 0) 49%), /* EXISTING OVERLAY */ linear-gradient(180deg, rgba(15, 11, 53, 0.9) 0%, rgba(15, 11, 53, 0.86) 0%, rgba(20, 15, 62, 0.72) 0%, rgba(25, 19, 70, 0.7) 33%);
    pointer-events: none;
}


.svc-cta-section::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:160px;

    background:linear-gradient(
        to top,
        #191346 0%,                 
        rgba(25,19,70,0.9) 30%,
        rgba(25,19,70,0.6) 55%,
        rgba(25,19,70,0.2) 80%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}

/* CONTENT FIX */
.svc-cta-section > *{
    position:relative;
    z-index:1;
}

/* BOTTOM FADE */
.svc-cta-section::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:180px;

    background:linear-gradient(
        to top,
        #191346 0%,
        rgba(25,19,70,0.85) 25%,
        rgba(25,19,70,0.6) 50%,
        rgba(25,19,70,0.3) 75%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}

/* CONTAINER */
.svc-cta-container{
    background: #191346cf;
    padding: 50px;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: auto;
    border-radius: 20px;
}

/* TEXT */
.svc-cta-container h2{
    color:#fff;
    font-size:36px;
    margin-bottom:15px;
}

.svc-cta-container p{
    color:#cfd4ff;
    font-size:16px;
    margin-bottom:30px;
    line-height:1.6;
}

/* BUTTON GROUP */
.svc-cta-group{
    display:flex;
    gap:30px;
    justify-content:center;
    flex-wrap:wrap;
}

/* BUTTON */
.svc-cta-btn{
    display:inline-block;
    padding:10px 40px;
    background:#ffffff;
    color:#130E39;
    border-radius:30px;
    text-decoration:none;
    font-size:20px;
    transition:0.3s;
    white-space:nowrap;
}

/* PRIMARY */
.svc-cta-btn.svc-cta-primary{
    background:#ffffff;
    color:#130E39;
}

/* SECONDARY */
.svc-cta-btn.svc-cta-secondary{
    background:transparent;
    color:#ffffff;
    border:2px solid #ffffff;
}

/* HOVER */
.svc-cta-btn.svc-cta-primary:hover{
    background:#0F0C33;
    color:#fff;
}

.svc-cta-btn.svc-cta-secondary:hover{
    background:#ffffff;
    color:#130E39;
}

/* RESPONSIVE */
@media(max-width:600px){
    .svc-cta-container h2{
        font-size:26px;
    }

    .svc-cta-container p{
        font-size:14px;
    }
}



/* SECTION */
.svc-faq-section{
    position:relative;
    background: #171143;
    padding:80px 20px;
    font-family:'Segoe UI', sans-serif;
}

.svc-faq-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:160px;
    display: none;

    background:linear-gradient(
        to bottom,
        #191346 0%,               
        rgba(25,19,70,0.9) 25%,
        rgba(25,19,70,0.6) 50%,
        rgba(25,19,70,0.2) 75%,
        rgba(25,19,70,0) 100%
    );

    pointer-events:none;
}


.svc-faq-section > *{
    position:relative;
    z-index:1;
}

/* CONTAINER */
.svc-faq-container{
    max-width:900px;
    margin:auto;
    text-align:center;
}

/* TITLE */
.svc-faq-title{
    margin-top:0;
    color:#fff;
    font-size:34px;
    margin-bottom:10px;
}

/* SUBTITLE */
.svc-faq-subtitle{
    color:#cfd4ff;
    margin-bottom:40px;
}

/* WRAPPER */
.svc-faq-wrapper{
    text-align:left;
}

/* ITEM */
.svc-faq-item{
    background:rgba(255,255,255,0.05);
    margin-bottom:15px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    transition:0.3s ease;
}

.svc-faq-item:hover{
    background:rgba(0,97,194,0.15);
    border-color:rgba(0,97,194,0.4);
}

/* QUESTION */
.svc-faq-question{
    width:100%;
    padding:18px 20px;
    background:none;
    border:none;
    color:#fff;
    font-size:16px;
    text-align:left;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* PLUS */
.svc-faq-question span{
    font-size:20px;
    transition:0.3s;
}

/* ANSWER */
.svc-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:0.4s ease;
    padding:0 20px;
}

.svc-faq-answer p{
    color:#cfd4ff;
    font-size:14px;
    padding:10px 0 20px;
}

/* ACTIVE */
.svc-faq-item.active .svc-faq-answer{
    max-height:200px;
}





/* ═══════════════════════════════════════════
   VACANCIES PAGE
═══════════════════════════════════════════ */

/* WHY WORK SECTION */
.vac-why-section{
    position:relative;
    padding:clamp(56px,10vw,100px) clamp(16px,4vw,20px);
    background:linear-gradient(180deg,#191346,#0f0c2e);
    color:#fff;
    /* Prevent tiny horizontal overflow "extra scroll" on some browsers */
    overflow-x:clip;
}
.vac-why-section::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:60px;
    background:linear-gradient(to bottom,transparent,#0f0c2e);
    pointer-events:none;
}
.vac-why-container{
    max-width:1200px;
    margin:auto;
    width:100%;
    box-sizing:border-box;
}
.vac-why-header{
    text-align:center;
    max-width:700px;
    margin:0 auto clamp(30px,6vw,60px);
}
.vac-why-header h2{
    font-size:clamp(26px,5vw,42px);
    font-weight:700;
    margin-bottom:12px;
    color:#fff;
}
.vac-why-header p{
    color:rgba(255,255,255,0.7);
    font-size:clamp(14px,2.2vw,16px);
    line-height:1.7;
}
.vac-why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}
.vac-why-card{
    position:relative;
    padding:50px 24px 30px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    text-align:center;
    transition:.3s;
    min-width:0;
}
.vac-why-icon{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    width:48px;height:48px;
    background:#0f0c2e;
    border:2px solid rgba(255,255,255,0.15);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:.3s;
}
.vac-why-icon i{font-size:20px;color:#0061C2;}
.vac-why-card h3{font-size:18px;font-weight:600;margin-bottom:10px;color:#fff;}
.vac-why-card p{font-size:14px;color:rgba(255,255,255,0.72);line-height:1.65;}
.vac-why-card:hover{transform:translateY(-6px);border-color:rgba(0,97,194,0.4);}
.vac-why-card:hover .vac-why-icon{border-color:#0061C2;box-shadow:0 0 18px rgba(0,97,194,0.5);}
.vac-why-card::before{
    content:"";position:absolute;inset:0;border-radius:16px;
    background:radial-gradient(circle at 50% 0%,rgba(0,97,194,0.08),transparent 70%);
    opacity:0;transition:.3s;pointer-events:none;
}
.vac-why-card:hover::before{opacity:1;}

/* OPEN POSITIONS */
.vacancy-section{
    padding:clamp(56px,10vw,100px) clamp(16px,4vw,20px);
    background:#0f0c2e;
    color:#fff;
    overflow-x:hidden;
}
.vacancy-container{max-width:1200px;margin:auto;width:100%;}
.vac-pos-header{
    text-align:center;max-width:700px;
    margin:0 auto clamp(30px,6vw,60px);
}
.vac-pos-header h2{font-size:clamp(26px,5vw,42px);font-weight:700;margin-bottom:12px;color:#fff;}
.vac-pos-header p{color:rgba(255,255,255,0.7);font-size:clamp(14px,2.2vw,16px);line-height:1.7;}
.vacancy-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,3vw,28px);
}
.vacancy-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:18px;overflow:hidden;
    transition:.3s;display:flex;flex-direction:column;
    min-width:0;
}
.vacancy-card--plain{
    border-top:3px solid rgba(0,97,194,0.5);
}
.vacancy-card--plain .vacancy-content{
    padding-top:28px;
}
.vacancy-card:hover{
    border-color:rgba(0,97,194,0.5);
    transform:translateY(-5px);
    box-shadow:0 12px 40px rgba(0,97,194,0.15);
}
.vacancy-card-img{position:relative;height:180px;overflow:hidden;}
.vacancy-card-img img{
    width:100%;height:100%;object-fit:cover;
    display:block;filter:brightness(0.75);transition:.4s;
}
.vacancy-card:hover .vacancy-card-img img{filter:brightness(0.9);transform:scale(1.04);}
.vacancy-type-badge{
    position:absolute;top:14px;left:14px;
    background:#0061C2;color:#fff;
    font-size:12px;font-weight:600;
    padding:4px 12px;border-radius:20px;letter-spacing:.5px;
}
.vacancy-content{padding:24px;flex:1;display:flex;flex-direction:column;gap:12px;}
.vacancy-content h3{
    font-size:clamp(17px,2.4vw,20px);
    font-weight:700;
    color:#fff;
    margin:0;
    line-height:1.3;
    overflow-wrap:anywhere;
}
.vacancy-meta-row{display:flex;flex-wrap:wrap;gap:8px;}
.vac-meta-chip{
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.8);font-size:12px;padding:4px 10px;border-radius:20px;
}
.vac-meta-chip i{font-size:11px;color:#0061C2;}
.vacancy-content p{color:rgba(255,255,255,0.7);font-size:14px;line-height:1.65;margin:0;flex:1;}
.vacancy-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;border:1px solid #0061C2;
    color:#fff;padding:10px 20px;border-radius:8px;
    font-size:14px;font-weight:500;transition:.3s;
    align-self:flex-start;margin-top:4px;
    text-decoration:none;
    box-sizing:border-box;
}
.vacancy-btn:hover{background:#0061C2;color:#fff;}
.vac-empty{
    grid-column:1/-1;text-align:center;
    color:rgba(255,255,255,0.5);padding:60px 0;font-size:16px;
}

/* CULTURE SECTION */
.vac-culture-section{
    padding:clamp(56px,10vw,100px) clamp(16px,4vw,20px);
    background:linear-gradient(180deg,#0f0c2e,#191346);
    color:#fff;
    overflow-x:hidden;
}
.vac-culture-container{max-width:1200px;margin:auto;width:100%;}
.vac-culture-header{
    text-align:center;max-width:700px;
    margin:0 auto clamp(30px,6vw,60px);
}
.vac-culture-header h2{font-size:clamp(26px,5vw,42px);font-weight:700;margin-bottom:12px;}
.vac-culture-header p{color:rgba(255,255,255,0.7);font-size:16px;line-height:1.7;}
.vac-culture-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.vac-culture-content{display:flex;flex-direction:column;gap:28px;}
.vac-culture-item{display:flex;gap:18px;align-items:flex-start;}
.vac-culture-icon{
    width:46px;height:46px;min-width:46px;
    background:rgba(0,97,194,0.15);border:1px solid rgba(0,97,194,0.3);
    border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.vac-culture-icon i{font-size:20px;color:#0061C2;}
.vac-culture-item h3{font-size:17px;font-weight:600;color:#fff;margin:0 0 6px;}
.vac-culture-item p{font-size:14px;color:rgba(255,255,255,0.72);line-height:1.65;margin:0;}
.vac-culture-image img{width:100%;border-radius:20px;object-fit:cover;max-height:480px;}
.vac-culture-placeholder{
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;height:420px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
    color:rgba(255,255,255,0.3);
}
.vac-culture-placeholder i{font-size:64px;}
.vac-culture-placeholder p{font-size:14px;}

@media(max-width:1100px){.vac-why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){
    .vacancy-grid{grid-template-columns:1fr;}
    .vac-culture-grid{grid-template-columns:1fr;}
    .vac-culture-image{display:none;}
}
@media(max-width:600px){.vac-why-grid{grid-template-columns:1fr;}}


/* ═══════════════════════════════════════════
   VACANCY DETAIL PAGE
═══════════════════════════════════════════ */
.jd-section{
    background:#0f0c2e;
    padding:
        calc(clamp(64px,10vw,80px) + var(--navbar-height))
        clamp(16px,4vw,20px)
        clamp(72px,12vw,100px);
    color:#fff;
    min-height:100vh;
    overflow-x:hidden;
}
.jd-wrap{
    max-width:1160px;
    margin:auto;
    width:100%;
    box-sizing:border-box;
}

/* HEADER */
.jd-header{
    display:flex;justify-content:space-between;
    align-items:flex-start;gap:30px;
    margin-bottom:32px;flex-wrap:wrap;
}
.jd-header-left{flex:1;min-width:0;}
.jd-tag{
    display:inline-block;
    background:rgba(0,97,194,0.2);border:1px solid rgba(0,97,194,0.4);
    color:#60a5fa;font-size:12px;font-weight:600;
    letter-spacing:1px;text-transform:uppercase;
    padding:4px 12px;border-radius:20px;margin-bottom:14px;
}
.jd-title{
    font-size:clamp(22px,4vw,38px);font-weight:800;
    color:#fff;margin:0 0 18px;line-height:1.2;
    overflow-wrap:anywhere;
}
.jd-pills{display:flex;flex-wrap:wrap;gap:8px;}
.jd-pill{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.85);font-size:13px;padding:6px 14px;border-radius:20px;
}
.jd-pill i{font-size:12px;color:#60a5fa;}
.jd-pill--blue{background:rgba(0,97,194,0.2);border-color:rgba(0,97,194,0.4);color:#93c5fd;}
.jd-pill--red{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.4);color:#fca5a5;}
.jd-pill--red i{color:#fca5a5;}
.jd-apply-btn-top{
    display:inline-flex;align-items:center;gap:8px;
    background:#0061C2;color:#fff;
    padding:13px 28px;border-radius:10px;
    font-size:15px;font-weight:600;white-space:nowrap;
    transition:.3s;flex-shrink:0;
    text-decoration:none;
    box-sizing:border-box;
}
.jd-apply-btn-top:hover{
    background:#004fa3;transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,97,194,0.35);
}
.jd-divider{height:1px;background:rgba(255,255,255,0.08);margin-bottom:40px;}

/* TWO-COLUMN BODY */
.jd-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,340px);
    gap:clamp(24px,4vw,40px);
    align-items:start;
}

/* MAIN CONTENT */
.jd-main{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.jd-block{
    padding:32px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.jd-block:last-of-type{border-bottom:none;}
.jd-block-title{
    display:flex;align-items:center;gap:10px;
    font-size:20px;font-weight:700;color:#fff;margin:0 0 16px;
}
.jd-block-title i{
    font-size:15px;color:#0061C2;
    width:32px;height:32px;
    background:rgba(0,97,194,0.15);border-radius:8px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.jd-block p{
    color:rgba(255,255,255,0.78);font-size:15px;line-height:1.75;margin:0 0 12px;
}
.jd-block p:last-child{margin-bottom:0;}
.jd-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.jd-list li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:14px;color:rgba(255,255,255,0.82);line-height:1.65;
}
.jd-check{color:#22c55e;font-size:14px;margin-top:2px;flex-shrink:0;}
.jd-dot{color:#60a5fa;font-size:14px;margin-top:2px;flex-shrink:0;}
.jd-circle{color:rgba(255,255,255,0.4);font-size:14px;margin-top:2px;flex-shrink:0;}
.jd-list--soft li{color:rgba(255,255,255,0.65);}
.jd-salary-box{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    background:rgba(0,97,194,0.12);border:1px solid rgba(0,97,194,0.25);
    border-radius:10px;padding:14px 20px;margin-bottom:16px;
}
.jd-salary-label{font-size:13px;color:#93c5fd;font-weight:600;}
.jd-salary-value{font-size:15px;font-weight:700;color:#fff;flex:1;min-width:0;}
.jd-footnote{font-size:12px;color:rgba(255,255,255,0.4);margin-top:10px;font-style:italic;}
.jd-email-line{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;padding:14px 18px;font-size:14px;margin-top:10px;
}
.jd-email-line i{color:#0061C2;}
.jd-email-link{color:#60a5fa;font-weight:600;text-decoration:none;}
.jd-email-link:hover{text-decoration:underline;}
.jd-apply-btn-bottom{
    display:inline-flex;align-items:center;gap:8px;
    background:#0061C2;color:#fff;
    padding:14px 32px;border-radius:10px;
    font-size:15px;font-weight:600;transition:.3s;
    margin-top:32px;align-self:flex-start;
    text-decoration:none;
    box-sizing:border-box;
}
.jd-apply-btn-bottom:hover{
    background:#004fa3;transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,97,194,0.35);
}

/* SIDEBAR */
.jd-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--navbar-height) + 20px);}
.jd-sidebar-card{
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);
    border-radius:16px;padding:24px;
}
.jd-sidebar-title{
    font-size:16px;font-weight:700;color:#fff;margin:0 0 18px;
    padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.jd-fact{
    display:flex;justify-content:space-between;align-items:flex-start;
    gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.jd-fact:last-child{border-bottom:none;}
.jd-fact--deadline .jd-fact-label,.jd-fact--deadline .jd-fact-value{color:#fca5a5;}
.jd-fact-label{
    display:flex;align-items:center;gap:7px;
    font-size:12px;color:rgba(255,255,255,0.5);
    flex-shrink:0;
}
.jd-fact-label i{color:#0061C2;font-size:11px;}
.jd-fact-value{
    font-size:13px;
    color:#fff;
    font-weight:500;
    text-align:right;
    min-width:0;
    overflow-wrap:anywhere;
}
.jd-apply-card{
    background:linear-gradient(135deg,rgba(0,97,194,0.2),rgba(0,97,194,0.05));
    border-color:rgba(0,97,194,0.3);text-align:center;
}
.jd-apply-tagline{
    font-size:12px;font-weight:600;color:#60a5fa;
    text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;
}
.jd-apply-card h3{font-size:20px;font-weight:700;color:#fff;margin:0 0 10px;}
.jd-apply-sub{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;margin-bottom:20px;}
.jd-apply-btn-side{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:#0061C2;color:#fff;padding:13px 20px;border-radius:10px;
    font-size:14px;font-weight:600;transition:.3s;width:100%;
    text-decoration:none;
    box-sizing:border-box;
}
.jd-apply-btn-side:hover{
    background:#004fa3;transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,97,194,0.4);
}
.jd-or-email{margin-top:14px;font-size:12px;color:rgba(255,255,255,0.5);line-height:1.7;}
.jd-or-email a{color:#60a5fa;font-weight:600;text-decoration:none;}
.jd-or-email a:hover{text-decoration:underline;}

@media(max-width:960px){
    .jd-body{grid-template-columns:1fr;}
    .jd-sidebar{
        position:static;
        flex-direction:column;
    }
    .jd-sidebar-card{
        width:100%;
        min-width:0;
    }
}
@media(max-width:640px){
    .jd-header{flex-direction:column;align-items:stretch;}
    .jd-apply-btn-top{width:100%;justify-content:center;white-space:normal;text-align:center;}
    .jd-block{padding:24px 0;}
    .jd-block-title{font-size:17px;flex-wrap:wrap;}
}
@media(max-width:480px){
    .jd-fact{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
    .jd-fact-value{text-align:left;}
    .jd-pill{font-size:12px;padding:6px 10px;}
}


/* ═══════════════════════════════════════════
   VACANCY APPLY PAGE
═══════════════════════════════════════════ */
.apply-section{
    background:#0f0c2e;
    min-height:100vh;
    padding:
        calc(clamp(72px,12vw,100px) + var(--navbar-height))
        clamp(16px,4vw,24px)
        clamp(64px,10vw,96px);
    color:#fff;
    overflow-x:hidden;
}
.apply-wrap{
    max-width:640px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
}
.apply-back-row{margin-bottom:10px;}
.apply-back{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#93c5fd;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    margin-bottom:28px;
    transition:color .2s;
}
.apply-back:hover{color:#fff;}
.apply-title{
    font-size:clamp(24px,4vw,32px);
    font-weight:800;
    margin:0 0 8px;
    line-height:1.2;
}
.apply-sub{
    color:#60a5fa;
    font-size:15px;
    font-weight:600;
    margin:0 0 28px;
    line-height:1.4;
}
.apply-flash{margin-bottom:20px;}
.apply-flash-item{
    padding:12px 16px;
    border-radius:10px;
    font-size:14px;
    margin-bottom:8px;
    line-height:1.5;
}
.apply-flash-item.success{
    background:rgba(34,197,94,0.12);
    border:1px solid rgba(34,197,94,0.35);
    color:#86efac;
}
.apply-flash-item.error{
    background:rgba(239,68,68,0.1);
    border:1px solid rgba(239,68,68,0.35);
    color:#fca5a5;
}
.apply-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:16px;
    padding:clamp(22px,4vw,32px);
}
.apply-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}
.apply-field-full{grid-column:1/-1;}
.apply-field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:rgba(255,255,255,0.55);
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:8px;
}
.apply-field input,
.apply-field textarea{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(15,12,46,0.65);
    color:#fff;
    font-size:15px;
    font-family:inherit;
}
.apply-field input::placeholder,
.apply-field textarea::placeholder{
    color:rgba(255,255,255,0.35);
}
.apply-field input:focus,
.apply-field textarea:focus{
    outline:none;
    border-color:#0061C2;
    box-shadow:0 0 0 3px rgba(0,97,194,0.22);
}
.apply-field textarea{
    min-height:140px;
    resize:vertical;
    line-height:1.55;
}
.apply-help{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:rgba(255,255,255,0.45);
    line-height:1.5;
}
.apply-actions{margin-top:28px;}
.apply-submit{
    width:100%;
    padding:14px 24px;
    border:none;
    border-radius:10px;
    background:#0061C2;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:background .2s,transform .15s,box-shadow .2s;
}
.apply-submit:hover{
    background:#004fa3;
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(0,97,194,0.35);
}
@media(max-width:560px){
    .apply-grid{grid-template-columns:1fr;}
}


/* ═══════════════════════════════════════════
   BLOG PAGE
═══════════════════════════════════════════ */

.bp-section{
    background:linear-gradient(180deg,#0f0c2e,#191346);
    padding:80px 20px 100px;
    color:#fff;
}
.bp-container{max-width:1200px;margin:auto;}

/* FEATURED POST */
.bp-featured-pro{
    position:relative;
    height:480px;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:60px;
}
.bp-featured-pro img{
    width:100%;height:100%;object-fit:cover;display:block;
}
.bp-featured-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(6,4,30,0.95) 0%,rgba(6,4,30,0.5) 55%,transparent 100%);
}
.bp-featured-pro-content{
    position:absolute;bottom:0;left:0;right:0;
    padding:40px;
}
.bp-pro-tag{
    display:inline-block;
    background:#0061C2;color:#fff;
    font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    padding:4px 14px;border-radius:20px;margin-bottom:14px;
}
.bp-featured-pro-content h2{
    font-size:clamp(22px,3.5vw,34px);font-weight:800;
    color:#fff;margin:0 0 12px;line-height:1.25;
    max-width:700px;
}
.bp-featured-pro-content p{
    color:rgba(255,255,255,0.75);font-size:15px;line-height:1.6;
    max-width:600px;margin:0 0 20px;
}
.bp-pro-meta{
    display:flex;flex-wrap:wrap;gap:16px;
    color:rgba(255,255,255,0.6);font-size:13px;margin-bottom:20px;
}
.bp-pro-meta span{display:inline-flex;align-items:center;gap:6px;}
.bp-pro-meta i{color:#60a5fa;font-size:12px;}
.bp-pro-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:#0061C2;color:#fff;
    padding:12px 26px;border-radius:10px;
    font-size:14px;font-weight:600;transition:.3s;
    text-decoration:none;
}
.bp-pro-btn:hover{background:#004fa3;transform:translateY(-2px);color:#fff;}

/* CATEGORY FILTER */
.bp-categories{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-bottom:40px;
}
.bp-cat-link{text-decoration:none;}
.bp-cat-link button{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.7);
    font-size:13px;font-weight:500;
    padding:8px 18px;border-radius:30px;
    cursor:pointer;transition:.3s;
}
.bp-cat-link button:hover,
.bp-cat-link button.active{
    background:#0061C2;border-color:#0061C2;color:#fff;
}

/* BLOG GRID */
.bp-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.bp-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;overflow:hidden;
    display:flex;flex-direction:column;
    transition:.3s;
}
.bp-card:hover{
    border-color:rgba(0,97,194,0.45);
    transform:translateY(-5px);
    box-shadow:0 12px 36px rgba(0,97,194,0.14);
}
.bp-card-img-wrap{position:relative;height:200px;overflow:hidden;}
.bp-card-img-wrap img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:.4s;filter:brightness(0.85);
}
.bp-card:hover .bp-card-img-wrap img{filter:brightness(1);transform:scale(1.04);}
.bp-card-img-wrap a{display:block;height:100%;}
.bp-card-badge{
    position:absolute;top:12px;left:12px;
    background:#0061C2;color:#fff;
    font-size:11px;font-weight:600;letter-spacing:.5px;
    padding:3px 10px;border-radius:20px;
}
.bp-card>a{text-decoration:none;}
.bp-card>a h3{
    font-size:17px;font-weight:700;color:#fff;
    padding:18px 20px 0;margin:0;
    line-height:1.35;transition:color .2s;
}
.bp-card>a:hover h3{color:#60a5fa;}
.bp-card>p{
    color:rgba(255,255,255,0.65);font-size:13px;line-height:1.6;
    padding:10px 20px;margin:0;flex:1;
}
.bp-card-meta{
    display:flex;flex-wrap:wrap;gap:10px;
    padding:0 20px 14px;
    color:rgba(255,255,255,0.45);font-size:12px;
}
.bp-card-meta span{display:inline-flex;align-items:center;gap:5px;}
.bp-card-meta i{color:#0061C2;font-size:11px;}
.bp-btn{
    display:inline-flex;align-items:center;gap:6px;
    background:transparent;border:1px solid rgba(0,97,194,0.5);
    color:#60a5fa;font-size:13px;font-weight:500;
    padding:8px 18px;border-radius:8px;margin:0 20px 20px;
    transition:.3s;align-self:flex-start;text-decoration:none;
}
.bp-btn:hover{background:#0061C2;border-color:#0061C2;color:#fff;}

/* EMPTY STATE */
.bp-grid>p{
    grid-column:1/-1;text-align:center;
    color:rgba(255,255,255,0.4);padding:60px 0;font-size:16px;
}

/* PAGINATION */
.bp-pagination{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin-top:48px;
}
.bp-pagination a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 10px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.75);font-size:14px;
    border-radius:8px;transition:.3s;text-decoration:none;
}
.bp-pagination a:hover,
.bp-pagination a.active{
    background:#0061C2;border-color:#0061C2;color:#fff;
}

/* RESPONSIVE */
@media(max-width:1024px){.bp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){
    .bp-grid{grid-template-columns:1fr;}
    .bp-featured-pro{height:340px;}
    .bp-featured-pro-content{padding:24px;}
    .bp-featured-pro-content h2{font-size:20px;}
}


/* ═══════════════════════════════════════════
   BLOG DETAILS PAGE
═══════════════════════════════════════════ */

.blog-details-section{
    background:linear-gradient(180deg,#0f0c2e,#191346);
    padding:0 clamp(14px,4vw,20px) clamp(60px,12vw,100px);
    color:#fff;
    overflow-x:hidden;
}
.blog-details-container{max-width:1200px;margin:auto;width:100%;}

/* HERO BANNER */
.blog-details-hero{
    position:relative;
    height:500px;
    overflow:hidden;
    border-radius:0 0 24px 24px;
    margin-bottom:60px;
}
.blog-details-hero img{
    width:100%;height:100%;object-fit:cover;display:block;
}
.blog-details-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(6,4,30,0.92) 0%,rgba(6,4,30,0.45) 60%,transparent 100%);
}
.blog-details-hero-content{
    position:absolute;bottom:0;left:0;right:0;
    padding:clamp(18px,4vw,40px) clamp(16px,4vw,50px);
    max-width:100%;
    box-sizing:border-box;
}
.blog-details-tag{
    display:inline-block;
    background:#0061C2;color:#fff;
    font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    padding:4px 14px;border-radius:20px;margin-bottom:16px;
}
.blog-details-hero-content h1{
    font-size:clamp(22px,4vw,42px);font-weight:800;
    color:#fff;margin:0 0 16px;line-height:1.2;max-width:100%;
    overflow-wrap:anywhere;word-wrap:break-word;
}
.blog-details-meta{
    display:flex;flex-wrap:wrap;gap:18px;
    color:rgba(255,255,255,0.6);font-size:13px;
}
.blog-details-meta span{display:inline-flex;align-items:center;gap:7px;}
.blog-details-meta i{color:#60a5fa;font-size:12px;}

/* TWO-COLUMN WRAPPER */
.blog-details-wrapper{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,340px);
    gap:40px;
    align-items:start;
}
.blog-details-wrapper > .blog-details-main,
.blog-details-wrapper > .blog-details-sidebar{
    min-width:0;
}

/* MAIN ARTICLE */
.blog-details-main{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:18px;
    padding:40px;
    color:rgba(255,255,255,0.85);
    min-width:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.blog-details-intro{
    font-size:17px;line-height:1.8;
    color:rgba(255,255,255,0.75);
    padding-bottom:28px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    margin-bottom:28px;
}
.blog-body{
    color:rgba(255,255,255,0.82);
}
.blog-body h2,.blog-body h3,.blog-body h4{color:#fff;}
.blog-body a{color:#60a5fa;}
.blog-body blockquote{
    border-left-color:#0061C2;
    background:rgba(0,97,194,0.08);
    color:rgba(255,255,255,0.8);
}
.blog-body th{background:rgba(255,255,255,0.06);color:#fff;}
.blog-body td{border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.75);}
.blog-body hr{border-top-color:rgba(255,255,255,0.1);}

/* SHARE */
.blog-details-share{
    display:flex;align-items:center;gap:14px;
    margin-top:40px;padding-top:28px;
    border-top:1px solid rgba(255,255,255,0.08);
    flex-wrap:wrap;
}
.blog-details-share span{
    font-size:13px;font-weight:600;color:rgba(255,255,255,0.5);
    text-transform:uppercase;letter-spacing:1px;
}
.blog-details-share a{
    width:38px;height:38px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.7);font-size:14px;transition:.3s;text-decoration:none;
}
.blog-details-share a:hover{background:#0061C2;border-color:#0061C2;color:#fff;}

/* AUTHOR BIO */
.blog-details-author{
    display:flex;align-items:flex-start;gap:20px;
    margin-top:36px;padding:24px;
    background:rgba(0,97,194,0.08);border:1px solid rgba(0,97,194,0.2);
    border-radius:14px;
}
.blog-details-author img{
    width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.blog-details-author h4{
    font-size:16px;font-weight:700;color:#fff;margin:0 0 6px;
}
.blog-details-author p{
    font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;margin:0;
}

/* SIDEBAR */
.blog-details-sidebar{
    display:flex;flex-direction:column;gap:20px;
    position:sticky;top:100px;
}
.blog-details-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;padding:24px;
}
.blog-details-card h3{
    font-size:15px;font-weight:700;color:#fff;
    margin:0 0 18px;padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

/* TOC */
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
.toc-list a{
    display:flex;align-items:flex-start;gap:8px;
    font-size:13px;color:rgba(255,255,255,0.6);
    text-decoration:none;padding:6px 8px;border-radius:8px;
    transition:.2s;line-height:1.45;
}
.toc-list a:hover{color:#fff;background:rgba(255,255,255,0.06);}
.toc-list a.active{color:#60a5fa;background:rgba(0,97,194,0.12);}
.toc-number{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;min-width:18px;
    background:rgba(0,97,194,0.3);border-radius:4px;
    font-size:10px;font-weight:700;color:#60a5fa;
    counter-increment:toc;
}
.toc-list{counter-reset:toc;}

/* SIDEBAR POSTS */
.sidebar-post{
    display:flex;align-items:flex-start;gap:12px;
    padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-post:last-child{border-bottom:none;padding-bottom:0;}
.post-img-link{flex-shrink:0;}
.post-img-link img{
    width:60px;height:60px;border-radius:10px;object-fit:cover;display:block;
}
.post-content{display:flex;flex-direction:column;gap:4px;min-width:0;}
.post-title{
    font-size:13px;font-weight:600;color:rgba(255,255,255,0.85);
    text-decoration:none;line-height:1.4;display:block;transition:color .2s;
}
.post-title:hover{color:#60a5fa;}
.post-meta{font-size:11px;color:rgba(255,255,255,0.4);}

/* RELATED POSTS — overlay card style */
.rp-section{
    background:linear-gradient(180deg,#191346,#0f0c2e);
    padding:80px 20px 100px;
}
.rp-container{max-width:1200px;margin:auto;}
.rp-header{text-align:center;margin-bottom:48px;}
.rp-header h2{
    font-size:clamp(24px,3.5vw,36px);font-weight:800;
    color:#fff;margin:0 0 10px;
}
.rp-header p{font-size:15px;color:rgba(255,255,255,0.5);}
.rp-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.rp-card{
    position:relative;
    display:block;
    height:340px;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    cursor:pointer;
}
.rp-card img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .5s ease,filter .4s ease;
    filter:brightness(0.7);
}
.rp-card:hover img{transform:scale(1.06);filter:brightness(0.55);}
.rp-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(6,4,30,0.95) 0%,rgba(6,4,30,0.3) 55%,transparent 100%);
    transition:opacity .4s;
}
.rp-card:hover .rp-overlay{opacity:1.15;}
.rp-card-body{
    position:absolute;bottom:0;left:0;right:0;
    padding:28px 24px;
    transform:translateY(6px);
    transition:transform .35s ease;
}
.rp-card:hover .rp-card-body{transform:translateY(0);}
.rp-cat{
    display:inline-block;
    background:#0061C2;color:#fff;
    font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    padding:3px 12px;border-radius:20px;margin-bottom:10px;
}
.rp-card-body h3{
    font-size:18px;font-weight:700;color:#fff;
    margin:0 0 12px;line-height:1.3;
}
.rp-meta{
    display:flex;flex-wrap:wrap;gap:12px;
    font-size:12px;color:rgba(255,255,255,0.55);
}
.rp-meta span{display:inline-flex;align-items:center;gap:5px;}
.rp-meta i{color:#60a5fa;font-size:11px;}
.rp-empty{
    grid-column:1/-1;text-align:center;
    color:rgba(255,255,255,0.4);padding:40px 0;font-size:15px;
}
@media(max-width:900px){.rp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){
    .rp-grid{grid-template-columns:1fr;}
    .rp-card{height:280px;}
}

/* Rich body: wide code/tables + floats — scoped to blog detail layout */
.blog-details-section .blog-body.blog-rich img,
.blog-details-section .blog-body.blog-rich figure img{
    max-width:100%;
    height:auto;
}
.blog-details-section .blog-body.blog-rich pre{
    max-width:100%;
    box-sizing:border-box;
    /* Wrap long lines instead of showing scrollbars */
    overflow-x:hidden;
    white-space:pre-wrap;
    word-break:break-word;
}
.blog-details-section .blog-body.blog-rich table{
    max-width:100%;
    table-layout:auto;
}

/* Code blocks — copy control (button injected by blog-details.html script) */
.blog-details-section .blog-code-wrap{
    position:relative;
    margin:0 0 1.4em;
}
.blog-details-section .blog-code-wrap pre{
    margin:0;
    /* keep space for copy button without pushing code too far down */
    padding-top:14px;
    padding-right:56px;
    overflow-x:hidden;
    white-space:pre-wrap;
    word-break:break-word;
}
.blog-details-section .blog-code-copy-btn{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid rgba(255,255,255,0.15);
    border-radius:10px;
    background:rgba(15,23,42,0.85);
    color:rgba(255,255,255,0.85);
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.blog-details-section .blog-code-copy-btn:hover{
    background:rgba(0,97,194,0.45);
    border-color:rgba(96,165,250,0.45);
    color:#fff;
}
.blog-details-section .blog-code-copy-btn:focus-visible{
    outline:2px solid #60a5fa;
    outline-offset:2px;
}
.blog-details-section .blog-code-copy-btn.copied{
    background:rgba(22,163,74,0.35);
    border-color:rgba(74,222,128,0.5);
    color:#86efac;
}
.blog-details-section .blog-code-copy-btn i{
    font-size:15px;
    pointer-events:none;
}

/* RESPONSIVE — BLOG DETAILS */
@media(max-width:1060px){
    .blog-details-wrapper{grid-template-columns:1fr;}
    .blog-details-sidebar{position:static;}
    .toc-card .toc-list{
        max-height:min(50vh,320px);
        overflow-y:auto;
        padding-right:4px;
    }
}
@media(max-width:768px){
    .blog-details-hero{height:320px;}
    .blog-details-main{padding:24px 18px;}
    .blog-details-meta{gap:12px;font-size:12px;}
    .blog-details-author{flex-direction:column;align-items:flex-start;}
}
@media(max-width:640px){
    .blog-details-section .blog-body.blog-rich figure.image-style-align-left,
    .blog-details-section .blog-body.blog-rich figure.image.image-style-align-left,
    .blog-details-section .blog-body.blog-rich figure.image-style-align-right,
    .blog-details-section .blog-body.blog-rich figure.image.image-style-align-right,
    .blog-details-section .blog-body.blog-rich figure.image-style-side,
    .blog-details-section .blog-body.blog-rich figure.image.image-style-side{
        float:none;
        max-width:100%;
        margin:1em 0;
    }
    .blog-details-hero{border-radius:0 0 16px 16px;margin-bottom:40px;}
    .blog-details-card{padding:18px;}
}
@media(max-width:540px){
    .blog-details-hero{height:min(260px,58vw);}
    .blog-details-intro{font-size:16px;}
    .rp-card-body h3{
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
}
@media(max-width:400px){
    .blog-details-hero{height:220px;}
    .blog-details-share{gap:10px;}
}