.mil-container-100 {
    overflow: visible !important;
}


.banner-wrapper {
    width: 100%;
    height: calc(100vh - 90px); /* accounts for mil-content padding-top: 90px */
    position: relative;
    background: #eaeaea;
    overflow: hidden;
}

/* Apply smooth zoom to active slide */
.slide .item:nth-child(2) {
    animation: zoomInSlow 6s ease-in-out forwards;
    will-change: transform;
}

/* Smooth zoom animation */
@keyframes zoomInSlow {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

.banner-wrapper .container {
    /* position: absolute; */
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    box-shadow: none;
    overflow: hidden;
}


.container .slide .item {
    /* width: 200px;
    height: 300px; */
    width: 50px;
    height: 50px;
    position: absolute;
    top: 85%;
    transform: translate(0, -50%);
    border-radius: 20px;
    box-shadow: 0 30px 50px #505050;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
   transition: transform 1s ease, left 0.7s ease, top 0.7s ease, width 0.7s ease, height 0.7s ease;
}

.slide .item:nth-child(n+3) {
    animation: none !important;
}

/* ── Active slide: full cover ── */
.slide .item:nth-child(1),
.slide .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

/* Dark gradient overlay on active slide so text pops */
.slide .item:nth-child(2)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 0;
}

.slide .item:nth-child(3) { left: 64%; display: none; }
.slide .item:nth-child(4) { left: calc(62% + 105px); display: none; }
.slide .item:nth-child(5) { left: calc(60% + 210px); display: none; }
.slide .item:nth-child(n + 6) {
    left: calc(62% + 315px);
    opacity: 0;
     display: none;
}

/* Dim overlay on side cards */
.slide .item:nth-child(n + 3)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    border-radius: 20px;
    transition: 0.4s;
    z-index: 0;
}

/* Highlighted border on side cards */
.slide .item:nth-child(n + 3) {
    border: 2px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 30px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Hover: lift + brighten side card */
.slide .item:nth-child(n + 3):hover {
    border-color: rgba(255, 255, 255, 0.80);
    box-shadow: 0 40px 70px rgba(0,0,0,0.65), 0 0 20px rgba(255,255,255,0.15);
    transform: translate(0, calc(-50% - 8px));
}

.slide .item:nth-child(n + 3):hover::after {
    background: rgba(0, 0, 0, 0.10);
}

/* ── Text content ── */
.item .content {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 380px;
    text-align: left;
    color: #fff;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
    z-index: 1;
}

.slide .item:nth-child(2) .content {
    display: block;
}

.content .name {
    font-size: 52px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1.1;
    text-shadow: 0 4px 24px rgba(0,0,0,0.7);
    opacity: 0;
    animation: animate 1s ease-in-out forwards;
    font-family: 'Lato', sans-serif;
}

.content .des {
    margin-top: 16px;
    margin-bottom: 28px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s forwards;
    font-family: 'Lato', sans-serif;
}

.content button {
    padding: 13px 32px;
    border: 2px solid rgba(255,255,255,0.85);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s forwards;
}

.content button:hover {
    background: #fff;
    color: #111;
    border-color: #fff;
}

@keyframes animate {
    from {
        opacity: 0;
        transform: translate(0, 60px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}

/* ── Prev/Next buttons ── */
.button {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
    right: 0px;
    z-index: 10;
}

.button button {
    width: 40px;
    height: 35px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 5px;
    border: 1px solid #000;
    background: #fff;
    transition: 0.3s;
        margin-bottom: 18%;
}

.button button:hover {
    background: #ababab;
    color: #fff;
}

/* =============================================
   TABLET (768px - 1024px)
   ============================================= */

   /* =============================================
   MOBILE (max 480px)
   ============================================= */

@media (max-width:480px){

.banner-wrapper{
    height:90vh;
}

/* hide side cards */
.slide .item:nth-child(n+3){
    display:none;
}

/* stronger overlay */
.slide .item:nth-child(2)::after{
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.55) 60%,
        rgba(0,0,0,0.25) 100%
    );
}

/* text layout */
.item .content{
    left:20px;
    right:20px;
    width:auto;
}

/* title */
.content .name{
    font-size:24px;
    letter-spacing:1px;
}

/* description */
.content .des{
    font-size:13px;
    line-height:1.6;
}

/* button */
.content button{
    padding:9px 18px;
    font-size:11px;
}

/* navigation */
.button{
    bottom:16px;
}

.button button{
    width:32px;
    height:28px;
}

}


/* =============================================
   TABLET PORTRAIT (600px - 767px)
   ============================================= */

@media (max-width:767px){

.banner-wrapper{
    height: calc(100vh - 70px);
}

/* remove side cards */
.slide .item:nth-child(n+3){
    display:none;
}

/* text container */
.item .content{
    left:40px;
    width:80%;
}

/* title */
.content .name{
    font-size:30px;
}

/* description */
.content .des{
    font-size:14px;
    margin-top:12px;
    margin-bottom:20px;
}

/* button */
.content button{
    padding:10px 22px;
    font-size:12px;
}

/* navigation */
.button{
    bottom:20px;
}

}


/* =============================================
   TABLET (768px - 1024px)
   ============================================= */

@media (max-width:1024px){

.banner-wrapper{
    height: calc(100vh - 90px);
}

/* hide side preview cards */
.slide .item:nth-child(n+3){
    display:none;
}

/* text position */
.item .content{
    left:60px;
    width:60%;
}

/* title */
.content .name{
    font-size:38px;
    letter-spacing:2px;
}

/* description */
.content .des{
    font-size:16px;
}

/* buttons */
.button{
    bottom:30%;
}

.button button{
    width:38px;
    height:34px;
}

}

   
@media (max-width: 1024px) {

    .banner-wrapper {
        height: calc(100vh - 90px);
    }

    /* Side cards */
    .slide .item:nth-child(3) { left: 60%; width: 80px; height: 80px; display: none;}
    .slide .item:nth-child(4) { left: calc(60% + 92px); width: 80px; height: 80px;  display: none;}
    .slide .item:nth-child(5) { left: calc(60% + 184px); width: 80px; height: 80px; display: none; }
    .slide .item:nth-child(n + 6) { left: calc(60% + 276px); opacity: 0; display: none; }

    /* Text content */
    .item .content {
        left: 60px;
        width: 320px;
    }

    .content .name {
        font-size: 38px;
        letter-spacing: 2px;
    }

    .content .des {
        font-size: 15px;
    }

    .slider-dots {
        display: none;
    }
 
}

/* =============================================
   TABLET PORTRAIT / IPAD MINI (600px - 767px)
   ============================================= */
@media (max-width: 767px) {

    .banner-wrapper {
        height: calc(100vh - 70px);
    }

    /* Hide side cards on small tablets */
    .slide .item:nth-child(n + 3) {
        display: none;
    }

    /* Text content */
    .item .content {
        left: 40px;
        width: 75%;
    }

    .content .name {
        font-size: 30px;
        letter-spacing: 1.5px;
    }

    .content .des {
        font-size: 14px;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .content button {
        padding: 11px 24px;
        font-size: 12px;
    }

    /* Nav buttons */
    .button {
        bottom: 16px;
    }

    .button button {
        width: 36px;
        height: 32px;
    }
}

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

    .banner-wrapper {
        height: 96svh;
    }

    /* Hide all side cards */
    .slide .item:nth-child(n + 3) {
        display: none;
    }

    /* Full overlay darker for readability */
    .slide .item:nth-child(2)::after {
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.50) 60%,
            rgba(0, 0, 0, 0.20) 100%
        );
    }

    /* Text content */
    .item .content {
        left: -4px;
        right: 24px;
        width: calc(100% - 48px);
        top: 50%;
    }

    .content .name {
        font-size: 24px;
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .content .des {
        font-size: 13px;
        line-height: 1.6;
        margin-top: 10px;
        margin-bottom: 18px;
    }

    .content button {
        padding: 10px 20px;
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    /* Nav buttons */
    .button {
        bottom: 160px;
    }

    .button .prev {
            position: relative;
    right: 38% !important;
    }

    .button .next {
            position: relative;
    left: 38% !important;
    }
    .button button {
        width: 34px;
        height: 30px;
        font-size: 13px;
    }
}

.slider-dots{
    text-align:center;
    margin-top:600px;
}

.dot{
    height:12px;
    width:12px;
    margin:0 5px;
    background:#ffffff;
    border-radius:50%;
    display:inline-block;
    cursor:pointer;
    transition:0.3s;
    opacity:0.5; 
}

.dot.active{
    background:var(--ab-accent);
    opacity:1;
    transform:scale(1.2);
}

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,600;1,400&display=swap');

:root {
    --ab-bg:           #f0f6ff;
    --ab-bg-2:         #e8f2ff;
    --ab-surface:      #ffffff;
    --ab-surface-2:    #f4f8ff;
    --ab-border:       #d6e6ff;
    --ab-accent:       #1d83a9;
    --ab-accent-mid:   #3b82f6;
    --ab-accent-light: rgba(59,130,246,0.09);
    --ab-accent-glow:  rgba(59,130,246,0.18);
    --ab-text:         #0f172a;
    --ab-text-sub:     #3d5a80;
    --ab-text-muted:   #7a94b8;
    --ab-shadow-sm:    0 1px 4px rgba(37,99,235,0.06), 0 4px 16px rgba(37,99,235,0.04);
    --ab-shadow-md:    0 4px 24px rgba(37,99,235,0.1), 0 1px 4px rgba(0,0,0,0.04);
    --ab-shadow-lg:    0 8px 40px rgba(37,99,235,0.14);
    --ff-body:         'Plus Jakarta Sans', sans-serif;
    --ff-display:      'Lato', sans-serif;
    --ab-radius:       18px;
    --ab-radius-sm:    12px;
    --ab-radius-xs:    8px;
    --ab-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-page { font-family: var(--ff-body); background: var(--ab-bg); }
.ab-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Shared typography */
.ab-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--ab-accent);
    background: var(--ab-accent-light);
    padding: 5px 13px 5px 9px; border-radius: 100px;
    margin-bottom: 18px;
}
.ab-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ab-accent); flex-shrink: 0;
}
.ab-eyebrow--light { background: rgba(255,255,255,0.2); color: #fff; }
.ab-eyebrow--light::before { background: #fff; }

.ab-section-title {
    font-family: var(--ff-display);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 600; line-height: 1.2;
    color: var(--ab-text); margin: 0 0 16px;
}
.ab-section-title em { font-style: italic; color: var(--ab-accent); }

.ab-body-text {
    font-size: 15px; line-height: 1.8;
    color: var(--ab-text-sub); margin: 0 0 16px;
}

.ab-section-header { text-align: center; max-width: 600px; margin: 0 auto 56px; }
.ab-section-sub { font-size: 15px; color: var(--ab-text-muted); line-height: 1.75; margin: 0; }

/* Buttons */
.ab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: var(--ab-radius-xs);
    font-family: var(--ff-body); font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em; text-decoration: none;
    transition: var(--ab-transition); cursor: pointer;
}
.ab-btn--primary {
    background: var(--ab-accent); color: #fff;
    box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.ab-btn--primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.4); }
.ab-btn--ghost {
    background: var(--ab-surface); color: var(--ab-accent);
    border: 1.5px solid var(--ab-border); box-shadow: var(--ab-shadow-sm);
}
.ab-btn--ghost:hover { border-color: var(--ab-accent); background: var(--ab-accent-light); transform: translateY(-2px); }
.ab-btn--white { background: #fff; color: var(--ab-accent); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.ab-btn--white:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
.ab-btn--outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
.ab-btn--outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); }

/* =============================================
   HERO
   ============================================= */
.ab-hero {
    position: relative; overflow: hidden;
    padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px);
    background: #fff;
}
.ab-hero__bg { position: absolute; inset: 0; pointer-events: none; }

.hero-blob {
    position: absolute; border-radius: 50%;
    filter: blur(70px); opacity: 0.5;
    animation: blobFloat 12s ease-in-out infinite;
}
.hero-blob--1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 65%); top: -200px; right: -100px; }
.hero-blob--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(147,197,253,0.2), transparent 65%); bottom: -100px; left: 0; animation-delay: -5s; }
.hero-blob--3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(96,165,250,0.1), transparent 65%); top: 50%; left: 40%; animation-delay: -8s; }

@keyframes blobFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(20px,-15px) scale(1.05); }
    66%       { transform: translate(-15px,10px) scale(0.96); }
}

.hero-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(59,130,246,0.07) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
}

.ab-hero__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
}

.ab-hero__text { animation: fadeSlideLeft 0.8s cubic-bezier(0.16,1,0.3,1) both; }

.ab-hero__title {
    font-family: var(--ff-display);
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 600; line-height: 1.12;
    color: var(--ab-text); margin: 0 0 22px;
}
.ab-hero__title em { font-style: italic; color: var(--ab-accent); }

.ab-hero__subtitle {
    font-size: 16px; line-height: 1.75;
    color: var(--ab-text-sub); margin: 0 0 36px; max-width: 440px;
}

.ab-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero visual */
.ab-hero__visual {
    position: relative; height: 380px;
    animation: fadeSlideRight 0.8s cubic-bezier(0.16,1,0.3,1) 0.12s both;
}

.hero-card {
    position: absolute;
    background: var(--ab-surface);
    border: 1.5px solid var(--ab-border);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow-lg);
    overflow: hidden;
}
.hero-card--main {
    width: 100%; top: 20px; left: 30px;
    height: 100%;
    animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.hero-card__img {  background: var(--ab-bg-2); display: flex; align-items: center; justify-content: center; }
.hero-card__img svg { width: 80px; height: 80px; }
.hero-card__body { padding: 16px 18px; }
.hero-card__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-accent); background: var(--ab-accent-light); padding: 3px 10px; border-radius: 100px; display: inline-block; margin-bottom: 8px; }
.hero-card__label { font-size: 13px; color: var(--ab-text-sub); margin: 0; font-weight: 500; }

.hero-float {
    position: absolute;
    background: var(--ab-surface);
    border: 1.5px solid var(--ab-border);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--ab-text);
    box-shadow: var(--ab-shadow-md);
    white-space: nowrap;
}
.hero-float svg { width: 16px; height: 16px; color: var(--ab-accent); }
.hero-float--1 { top: 0; right: 0; animation: cardFloat 7s ease-in-out 1s infinite; }
.hero-float--2 { bottom: 80px; right: 10px; animation: cardFloat 8s ease-in-out 2s infinite; }
.hero-float--3 { bottom: 20px; left: 20px; animation: cardFloat 6.5s ease-in-out 0.5s infinite; }
.hero-float__num { font-family: var(--ff-display); font-size: 20px; font-weight: 600; color: var(--ab-accent); }

/* img placeholders */
.img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.img-placeholder svg { opacity: 0.9; }

/* =============================================
   STATS
   ============================================= */
.ab-stats { padding: 0 0 clamp(60px,8vw,100px); background: #fff; }
.ab-stats__grid {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;
    background: var(--ab-bg); border-radius: 20px;
    padding: 40px 32px; border: 1.5px solid var(--ab-border);
    box-shadow: var(--ab-shadow-sm);
}

.stat-card { text-align: center; }
.stat-card__num {
    font-family: var(--ff-display);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 600; color: var(--ab-accent);
    display: inline-block;
}
.stat-card__suffix { font-family: var(--ff-display); font-size: 28px; font-weight: 600; color: var(--ab-accent); }
.stat-card__label { display: block; font-size: 13px; color: var(--ab-text-muted); font-weight: 500; margin: 4px 0 14px; letter-spacing: 0.02em; }
.stat-card__bar { height: 4px; background: var(--ab-border); border-radius: 4px; overflow: hidden; }
.stat-card__fill { height: 100%; background: linear-gradient(90deg, var(--ab-accent), #60a5fa); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.4,0,0.2,1); }
.stat-card__fill.animated { transform: scaleX(1); }

/* =============================================
   STORY
   ============================================= */
.ab-story { padding: clamp(70px,9vw,110px) 0; background: var(--ab-bg); }
.ab-story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

.story-img-wrap { position: relative; height: 400px; }
.story-img {
    position: absolute;
    border-radius: var(--ab-radius);
    overflow: hidden;
    border: 1.5px solid var(--ab-border);
    box-shadow: var(--ab-shadow-md);
    background: var(--ab-surface);
}
.story-img--main { width: 80%; height: 280px; top: 0; left: 0; }
.story-img--accent { width: 50%; height: 180px; bottom: 0; right: 0; background: linear-gradient(135deg, #dbeafe, #bfdbfe); display: flex; align-items: center; justify-content: center; }
.story-img--main .img-placeholder { height: 100%; background: var(--ab-bg-2); }
.story-badge {
    position: absolute; bottom: 50px; left: -16px;
    background: var(--ab-accent); color: #fff;
    padding: 14px 20px; border-radius: var(--ab-radius-sm);
    box-shadow: 0 8px 24px rgba(37,99,235,0.35);
    text-align: center;
}
.story-badge__num { display: block; font-family: var(--ff-display); font-size: 28px; font-weight: 600; line-height: 1; }
.story-badge__text { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }

.story-values { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.story-value { display: flex; gap: 14px; align-items: flex-start; }
.story-value__icon { flex-shrink: 0; width: 38px; height: 38px; background: var(--ab-accent-light); border-radius: var(--ab-radius-xs); display: flex; align-items: center; justify-content: center; color: var(--ab-accent); margin-top: 2px; }
.story-value__icon svg { width: 17px; height: 17px; }
.story-value strong { display: block; font-size: 14px; font-weight: 600; color: var(--ab-text); margin-bottom: 3px; }
.story-value p { font-size: 13.5px; color: var(--ab-text-muted); margin: 0; line-height: 1.55; }

/* =============================================
   SERVICES
   ============================================= */
.ab-services { padding: clamp(70px,9vw,110px) 0; background: #fff; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.service-card {
    background: var(--ab-surface-2);
    border: 1.5px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    padding: 28px 26px;
    transition: var(--ab-transition);
    position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ab-accent), #60a5fa);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--ab-transition);
}
.service-card:hover { border-color: rgba(59,130,246,0.3); transform: translateY(-4px); box-shadow: var(--ab-shadow-md); }
.service-card:hover::before { transform: scaleX(1); }

.service-card--featured {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: rgba(59,130,246,0.25);
}
.service-card--featured::before { transform: scaleX(1); }

.service-card__icon { width: 44px; height: 44px; background: var(--ab-accent-light); border-radius: var(--ab-radius-xs); display: flex; align-items: center; justify-content: center; color: var(--ab-accent); margin-bottom: 18px; transition: var(--ab-transition); }
.service-card:hover .service-card__icon { background: var(--ab-accent); color: #fff; }
.service-card__icon svg { width: 20px; height: 20px; }
.service-card__title { font-size: 16px; font-weight: 700; color: var(--ab-text); margin: 0 0 10px; }
.service-card__text { font-size: 13.5px; line-height: 1.65; color: var(--ab-text-sub); margin: 0 0 16px; }
.service-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.service-card__tags span { font-size: 11px; font-weight: 600; color: var(--ab-accent); background: var(--ab-accent-light); padding: 3px 10px; border-radius: 100px; }

/* =============================================
   TIMELINE
   ============================================= */
.ab-timeline { padding: clamp(70px,9vw,50px) 0; background: var(--ab-bg); }
.timeline { position: relative; max-width: 700px; margin: 0 auto; }
.timeline__line {
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; background: var(--ab-border);
    transform: translateX(-50%);
}

.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item__dot {
    position: absolute; left: 50%; top: 24px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--ab-surface);
    border: 2.5px solid var(--ab-accent-mid);
    transform: translateX(-50%);
    z-index: 1; transition: var(--ab-transition);
}
.timeline-item__dot--active { background: var(--ab-accent); border-color: var(--ab-accent); box-shadow: 0 0 0 4px var(--ab-accent-glow); }

.timeline-item__card {
    width: 58%; padding: 20px 22px;
    background: var(--ab-surface);
    border: 1.5px solid var(--ab-border);
    border-radius: var(--ab-radius-sm);
    box-shadow: var(--ab-shadow-sm);
    transition: var(--ab-transition);
}
.timeline-item__card:hover { border-color: rgba(59,130,246,0.3); box-shadow: var(--ab-shadow-md); }
.timeline-item__card--active { border-color: rgba(59,130,246,0.3); background: linear-gradient(135deg,#eff6ff,#fff); }

.timeline-item--left .timeline-item__card { margin-left: -100px; }
.timeline-item--right .timeline-item__card { margin-left: 56%; }

.timeline-item__year { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-accent); display: block; margin-bottom: 6px; }
.timeline-item__card h4 { font-size: 15px; font-weight: 700; color: var(--ab-text); margin: 0 0 6px; }
.timeline-item__card p { font-size: 15px; color: var(--ab-text-muted); margin: 0; line-height: 1.6; }

.ab-testimonials {
    padding: clamp(70px, 9vw, 50px) 0;
    background: var(--ab-bg, #f0f6ff);
    font-family: var(--ff-body, 'Plus Jakarta Sans', sans-serif);
}

.ab-section-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 52px;
}

/* Slider wrapper */
.testi-slider-wrap {
    position: relative;
    max-width: 100%;
}

.testi-slider {
    overflow: hidden;
    border-radius: 20px;
    cursor: grab;
    user-select: none;
}
.testi-slider:active { cursor: grabbing; }

.testi-track {
    display: flex;
    gap: 24px;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Cards */
.testi-card {
    flex: 0 0 calc(33.333% - 16px);
    background: #ffffff;
    border: 1.5px solid var(--ab-border, #d0e4ff);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 2px 8px rgba(37,99,235,0.06), 0 8px 32px rgba(37,99,235,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}
.testi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.testi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(37,99,235,0.13);
    border-color: rgba(59,130,246,0.3);
}
.testi-card:hover::before { transform: scaleX(1); }

.testi-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testi-card__quote {
    color: #2563eb;
    opacity: 0.35;
    line-height: 0;
}
.testi-card__quote svg { width: 26px; height: 26px; }

.testi-card__stars {
    color: #f59e0b;
    font-size: 14px;
    letter-spacing: 2px;
}

.testi-card__text {
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ab-text-sub, #3d5a80);
    margin: 0;
    flex: 1;
}

.testi-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ab-border, #d0e4ff);
}

.testi-card__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: var(--ab-accent, #2563eb);
    flex-shrink: 0;
}

.testi-card__author-info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ab-text, #0f172a);
    margin-bottom: 2px;
}
.testi-card__author-info span {
    font-size: 12px;
    color: var(--ab-text-muted, #7a94b8);
}

/* Controls */
.testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
}

.testi-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid var(--ab-border, #d0e4ff);
    display: flex; align-items: center; justify-content: center;
    color: var(--ab-accent, #2563eb);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
    flex-shrink: 0;
}
.testi-arrow svg { width: 18px; height: 18px; }
.testi-arrow:hover {
    background: var(--ab-accent, #2563eb);
    border-color: var(--ab-accent, #2563eb);
    color: #fff;
    box-shadow: 0 6px 20px rgba(37,99,235,0.3);
    transform: scale(1.08);
}
.testi-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* Dots */
.testi-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.testi-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ab-border, #d0e4ff);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.testi-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--ab-accent, #2563eb);
}
.testi-dot:hover:not(.active) {
    background: var(--ab-accent-mid, #3b82f6);
    transform: scale(1.2);
}

/* Progress bar */
.testi-progress {
    height: 2px;
    background: var(--ab-border, #d0e4ff);
    border-radius: 2px;
    
    
    
    
    margin-top: 20px;
    overflow: hidden;
}
.testi-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

/* Responsive */
@media (max-width: 900px) {
    .testi-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 600px) {
    .testi-card { flex: 0 0 100%; }
    .testi-card__text { font-size: 14px; }
}

/* =============================================
   CTA
   ============================================= */
.ab-cta { padding: clamp(70px,9vw,110px) 0; background: #fff; }
.ab-cta__inner {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #48bfe1 0%, #155f7f 50%, #3b82f6 100%);
    border-radius: 24px; padding: clamp(50px,6vw,80px);
    text-align: center;
}
.ab-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.cta-orb--1 { width: 400px; height: 400px; background: rgba(255,255,255,0.1); top: -150px; right: -100px; }
.cta-orb--2 { width: 300px; height: 300px; background: rgba(96,165,250,0.2); bottom: -100px; left: -50px; }

.ab-cta__content { position: relative; z-index: 1; }
.ab-cta__title { font-family: var(--ff-display); font-size: clamp(28px,4vw,46px); font-weight: 600; color: #fff; margin: 0 0 16px; line-height: 1.2; }
.ab-cta__title em { font-style: italic; color: #bfdbfe; }
.ab-cta__sub { font-size: 16px; color: rgba(255,255,255,0.75); margin: 0 0 36px; line-height: 1.65; }
.ab-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ab-stats__grid .stat-card:nth-child(1) { animation: fadeUp 0.55s 0.05s both; }
.ab-stats__grid .stat-card:nth-child(2) { animation: fadeUp 0.55s 0.15s both; }
.ab-stats__grid .stat-card:nth-child(3) { animation: fadeUp 0.55s 0.25s both; }
.ab-stats__grid .stat-card:nth-child(4) { animation: fadeUp 0.55s 0.35s both; }

.service-card:nth-child(1) { animation: fadeUp 0.5s 0.05s both; }
.service-card:nth-child(2) { animation: fadeUp 0.5s 0.12s both; }
.service-card:nth-child(3) { animation: fadeUp 0.5s 0.19s both; }
.service-card:nth-child(4) { animation: fadeUp 0.5s 0.26s both; }
.service-card:nth-child(5) { animation: fadeUp 0.5s 0.33s both; }
.service-card:nth-child(6) { animation: fadeUp 0.5s 0.4s both; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
    .ab-hero__inner { grid-template-columns: 1fr; gap: 48px; }
    .ab-hero__visual { height: 280px; }
    .hero-card--main { width: 220px; }
    .ab-story__inner { grid-template-columns: 1fr; gap: 40px; }
    .story-img-wrap { height: 280px; }
    .services-grid { grid-template-columns: repeat(2,1fr); }
    .ab-stats__grid { grid-template-columns: repeat(2,1fr); }
    .testimonials-grid { grid-template-columns: 1fr; }
    .testi-card--featured { grid-column: auto; }
}

@media (max-width: 640px) {
    .services-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2,1fr); }
    .ab-stats__grid { grid-template-columns: repeat(2,1fr); }
    .timeline-item__card { width: 85%; }
    .timeline-item--right .timeline-item__card { margin-left: auto; margin-right: 0; }
    .timeline__line { left: 16px; }
    .timeline-item__dot { left: 16px; }
}


/* =============================================
   IPAD MINI (768px) & IPAD AIR (820px)
   ============================================= */

@media (min-width: 641px) and (max-width: 900px) {

    /* Hero */
    .ab-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ab-hero__title {
        font-size: 32px !important;
    }
    .ab-hero__subtitle {
        font-size: 14.5px;
        max-width: 100%;
    }
    .ab-hero__visual {
        height: 260px;
    }
    .hero-card--main {
        width: 85%;
        left: 10px;
    }

    /* Stats */
    .ab-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 28px 20px;
    }

    /* Story */
    .ab-story__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .story-img-wrap {
        height: 260px;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Timeline */
    .timeline__line {
        left: 20px;
    }
    .timeline-item__dot {
        left: 20px;
    }
    .timeline-item__card {
        width: 88%;
        padding: 16px 18px;
    }
    .timeline-item--left .timeline-item__card {
        margin-left: 44px;
    }
    .timeline-item--right .timeline-item__card {
        margin-left: 44px;
    }

    /* Testimonials */
    .testi-card {
        flex: 0 0 calc(50% - 12px);
    }

    /* CTA */
    .ab-cta__inner {
        padding: 40px 28px;
    }
    .ab-cta__title {
        font-size: 28px;
    }
    .ab-cta__actions {
        flex-direction: column;
        align-items: center;
    }

    .ab-hero {
        margin-top: 60px;
    }
}

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



@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,600;1,400&display=swap');

:root {
    --cr-bg:           #f0f6ff;
    --cr-bg-2:         #e4f0ff;
    --cr-surface:      #ffffff;
    --cr-surface-2:    #f4f8ff;
    --cr-border:       #d0e4ff;
    --cr-accent:       #2563eb;
    --cr-accent-mid:   #3b82f6;
    --cr-accent-light: rgba(59,130,246,0.09);
    --cr-text:         #0f172a;
    --cr-text-sub:     #3d5a80;
    --cr-text-muted:   #7a94b8;
    --cr-shadow-sm:    0 1px 4px rgba(37,99,235,0.07), 0 4px 16px rgba(37,99,235,0.04);
    --cr-shadow-md:    0 4px 24px rgba(37,99,235,0.11);
    --cr-shadow-lg:    0 8px 40px rgba(37,99,235,0.16);
    --ff-body:         'Plus Jakarta Sans', sans-serif;
    --ff-display:      'Lato', sans-serif;
    --cr-radius:       18px;
    --cr-radius-sm:    12px;
    --cr-radius-xs:    8px;
    --cr-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



/* Header */
.cr-modal__header h3 {
    margin-bottom: 5px;
    font-size: 22px;
}

.cr-modal__header p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

/* Close */
.cr-modal__close {
    position: absolute;
    right: 18px;
    top: 15px;
    font-size: 22px;
    border: none;
    background: none;
    cursor: pointer;
}

/* 2 column grid */
.cr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Floating Input */
.cr-input-group {
    position: relative;
}

.cr-input-group input,
.cr-input-group textarea {
    width: 100%;
    padding: 14px 40px 14px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    background: transparent;
    transition: 0.3s;
}

.cr-input-group label {
    position: absolute;
    left: 12px;
    top: 14px;
    font-size: 14px;
    color: #777;
    pointer-events: none;
    transition: 0.3s;
}

.cr-input-group input:focus,
.cr-input-group textarea:focus {
    border-color: #a92968;
}

.cr-input-group input:focus + label,
.cr-input-group textarea:focus + label,
.cr-input-group input:not(:placeholder-shown) + label,
.cr-input-group textarea:not(:placeholder-shown) + label {
    top: -8px;
    left: 8px;
    background: #fff;
    padding: 0 5px;
    font-size: 12px;
    color: #a92968;
}

/* Icons */
.cr-icon {
    position: absolute;
    right: 10px;
    top: 14px;
    font-size: 14px;
}

/* File Upload */
.cr-file-upload {
    grid-column: span 2;
}

.cr-file-upload label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.cr-file-upload input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed #aaa;
    background: #fafafa;
}

/* Full width */
.cr-full-width {
    grid-column: span 2;
}

/* Submit */
.cr-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg,#a92968,#7d1e4c);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.cr-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(169,41,104,0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .cr-form-grid {
        grid-template-columns: 1fr;
    }
    .cr-full-width,
    .cr-file-upload {
        grid-column: span 1;
    }
}

.career-page { font-family: var(--ff-body); background: var(--cr-bg); }
.cr-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---- Shared ---- */
.cr-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--cr-accent);
    background: var(--cr-accent-light); padding: 5px 13px 5px 9px;
    border-radius: 100px; margin-bottom: 18px;
}
.cr-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--cr-accent); flex-shrink:0; }

.cr-section-title { font-family: var(--ff-display); font-size: clamp(28px,3.5vw,44px); font-weight:600; line-height:1.2; color:var(--cr-text); margin:0 0 16px; }
.cr-section-title em { font-style:italic; color:var(--cr-accent); }
.cr-body-text { font-size:15px; line-height:1.8; color:var(--cr-text-sub); margin:0 0 16px; }
.cr-section-header { text-align:center; max-width:620px; margin:0 auto 52px; }
.cr-section-sub { font-size:15px; color:var(--cr-text-muted); line-height:1.75; margin:0; }

.cr-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: var(--cr-radius-xs);
    font-family: var(--ff-body); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: var(--cr-transition); cursor: pointer; border: none;
}
.cr-btn--primary { background:var(--cr-accent); color:#fff; box-shadow:0 4px 16px rgba(37,99,235,0.28); }
.cr-btn--primary:hover { background:#1d4ed8; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,0.4); }
.cr-btn--ghost { background:var(--cr-surface); color:var(--cr-accent); border:1.5px solid var(--cr-border); box-shadow:var(--cr-shadow-sm); }
.cr-btn--ghost:hover { border-color:var(--cr-accent); background:var(--cr-accent-light); transform:translateY(-2px); }

/* =============================================  HERO */
.cr-hero { position:relative; overflow:hidden; padding:clamp(80px,10vw,130px) 0 clamp(60px,8vw,100px); background:#fff; }
.cr-hero__bg { position:absolute; inset:0; pointer-events:none; }
.cr-blob { position:absolute; border-radius:50%; filter:blur(72px); }
.cr-blob--1 { width:600px; height:600px; background:radial-gradient(circle,rgba(59,130,246,0.1),transparent 65%); top:-220px; right:-120px; animation:crBlob 13s ease-in-out infinite; }
.cr-blob--2 { width:400px; height:400px; background:radial-gradient(circle,rgba(147,197,253,0.16),transparent 65%); bottom:-100px; left:-60px; animation:crBlob 16s ease-in-out -6s infinite; }
.cr-grid { position:absolute; inset:0; background-image:radial-gradient(rgba(59,130,246,0.055) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 80%); }

@keyframes crBlob { 0%,100%{transform:translate(0,0);} 40%{transform:translate(22px,-18px);} 70%{transform:translate(-14px,12px);} }

.cr-hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cr-hero__text { animation:crFadeLeft 0.8s cubic-bezier(0.16,1,0.3,1) both; }

.cr-hero__title { font-family:var(--ff-display); font-size:clamp(34px,4.5vw,58px); font-weight:600; line-height:1.1; color:var(--cr-text); margin:0 0 20px; }
.cr-hero__title em { font-style:italic; color:var(--cr-accent); }
.cr-hero__subtitle { font-size:15.5px; line-height:1.75; color:var(--cr-text-sub); margin:0 0 28px; max-width:440px; }

.cr-hero__stats { display:flex; align-items:center; gap:20px; margin-bottom:30px; padding:20px 22px; background:var(--cr-bg); border:1.5px solid var(--cr-border); border-radius:var(--cr-radius-sm); width:fit-content; }
.cr-hero__stat strong { display:block; font-family:var(--ff-display); font-size:24px; font-weight:600; color:var(--cr-accent); line-height:1; }
.cr-hero__stat span { font-size:11.5px; color:var(--cr-text-muted); font-weight:500; }
.cr-hero__stat-divider { width:1px; height:36px; background:var(--cr-border); }

.cr-hero__actions { display:flex; gap:12px; flex-wrap:wrap; }

/* Hero visual */
.cr-hero__visual { position:relative; height:420px; animation:crFadeRight 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.cr-hero__img-wrap { position:absolute; inset:0; border-radius:var(--cr-radius); overflow:hidden; border:1.5px solid var(--cr-border); box-shadow:var(--cr-shadow-lg); background:var(--cr-bg-2); }
.cr-hero__img-wrap img { width:100%; height:100%; object-fit:cover; }
.cr-img-fallback { display:none; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--cr-text-muted); font-size:14px; }
.cr-hero__img-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(37,99,235,0.12),transparent 60%); }

.cr-float { position:absolute; background:var(--cr-surface); border:1.5px solid var(--cr-border); border-radius:12px; padding:11px 16px; display:flex; align-items:center; gap:11px; font-size:12.5px; font-weight:600; color:var(--cr-text); box-shadow:var(--cr-shadow-md); animation:crFloatAnim 6s ease-in-out infinite; }
.cr-float svg { width:17px; height:17px; color:var(--cr-accent); flex-shrink:0; }
.cr-float div strong { display:block; font-size:13px; }
.cr-float div span { font-size:11px; color:var(--cr-text-muted); font-weight:400; }
.cr-float--1 { bottom:24px; left:-16px; animation-delay:0s; }
.cr-float--2 { top:24px; right:-12px; animation-delay:1.5s; }

@keyframes crFloatAnim { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }

/* =============================================  BENEFITS */
.cr-benefits { padding:clamp(70px,9vw,110px) 0; background:var(--cr-bg); }
.cr-benefits__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cr-benefit-card { background:var(--cr-surface); border:1.5px solid var(--cr-border); border-radius:var(--cr-radius-sm); padding:28px 26px; box-shadow:var(--cr-shadow-sm); transition:var(--cr-transition); position:relative; overflow:hidden; }
.cr-benefit-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cr-accent),#60a5fa); transform:scaleX(0); transform-origin:left; transition:transform var(--cr-transition); }
.cr-benefit-card:hover { transform:translateY(-5px); box-shadow:var(--cr-shadow-md); border-color:rgba(59,130,246,0.3); }
.cr-benefit-card:hover::before { transform:scaleX(1); }
.cr-benefit-card--featured { background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:rgba(59,130,246,0.25); }
.cr-benefit-card--featured::before { transform:scaleX(1); }
.cr-benefit-card__icon { width:44px; height:44px; background:var(--cr-accent-light); border-radius:var(--cr-radius-xs); display:flex; align-items:center; justify-content:center; color:var(--cr-accent); margin-bottom:18px; transition:var(--cr-transition); }
.cr-benefit-card:hover .cr-benefit-card__icon { background:var(--cr-accent); color:#fff; }
.cr-benefit-card__icon svg { width:20px; height:20px; }
.cr-benefit-card h4 { font-size:16px; font-weight:700; color:var(--cr-text); margin:0 0 10px; }
.cr-benefit-card p { font-size:13.5px; line-height:1.65; color:var(--cr-text-sub); margin:0; }

/* =============================================  CULTURE */
.cr-culture { padding:clamp(70px,9vw,110px) 0; background:#fff; }
.cr-culture__inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }

.cr-culture__values { display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.cr-culture__value { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; color:var(--cr-text-sub); }
.cr-culture__value-dot { width:8px; height:8px; border-radius:50%; background:var(--cr-accent); flex-shrink:0; }

.cr-culture__cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cr-culture__card { background:var(--cr-surface); border:1.5px solid var(--cr-border); border-radius:var(--cr-radius-sm); padding:24px 20px; box-shadow:var(--cr-shadow-sm); transition:var(--cr-transition); text-align:center; }
.cr-culture__card:hover { transform:translateY(-4px); box-shadow:var(--cr-shadow-md); border-color:rgba(59,130,246,0.3); }
.cr-culture__card-icon { font-size:28px; margin-bottom:10px; display:block; }
.cr-culture__card strong { display:block; font-size:14px; font-weight:700; color:var(--cr-text); margin-bottom:6px; }
.cr-culture__card p { font-size:12.5px; color:var(--cr-text-muted); margin:0; line-height:1.55; }
.cr-culture__card--1 { background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:rgba(59,130,246,0.2); }
.cr-culture__card--2 { background:linear-gradient(135deg,#f0f9ff,#e0f2fe); border-color:rgba(14,165,233,0.2); }
.cr-culture__card--3 { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:rgba(34,197,94,0.2); }
.cr-culture__card--4 { background:linear-gradient(135deg,#fffbeb,#fef3c7); border-color:rgba(245,158,11,0.2); }

/* =============================================  PROCESS */
.cr-process { padding:clamp(70px,9vw,110px) 0; background:var(--cr-bg); }
.cr-process__steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.cr-process__line { position:absolute; top:40px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg,var(--cr-accent),#60a5fa); z-index:0; }

.cr-process__step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px; position:relative; z-index:1; }
.cr-process__step-num { font-family:var(--ff-display); font-size:12px; font-weight:600; color:var(--cr-accent); letter-spacing:0.08em; margin-bottom:8px; }
.cr-process__step-icon { width:52px; height:52px; background:var(--cr-surface); border:2.5px solid var(--cr-accent); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cr-accent); margin-bottom:20px; box-shadow:0 0 0 5px var(--cr-bg), var(--cr-shadow-sm); transition:var(--cr-transition); }
.cr-process__step-icon svg { width:20px; height:20px; }
.cr-process__step:hover .cr-process__step-icon { background:var(--cr-accent); color:#fff; transform:scale(1.1); box-shadow:0 0 0 5px var(--cr-bg), 0 4px 16px rgba(37,99,235,0.3); }
.cr-process__step h4 { font-size:15px; font-weight:700; color:var(--cr-text); margin:0 0 8px; }
.cr-process__step p { font-size:13px; color:var(--cr-text-muted); line-height:1.6; margin:0 0 12px; }
.cr-process__time { font-size:11.5px; font-weight:700; color:var(--cr-accent); background:var(--cr-accent-light); padding:4px 12px; border-radius:100px; letter-spacing:0.05em; }

/* =============================================  JOBS */
.cr-jobs { padding:clamp(70px,9vw,110px) 0; background:#fff; }

.cr-filters { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.cr-filter { padding:8px 20px; border-radius:100px; font-size:13px; font-weight:600; border:1.5px solid var(--cr-border); background:var(--cr-surface); color:var(--cr-text-muted); cursor:pointer; transition:var(--cr-transition); }
.cr-filter:hover { border-color:var(--cr-accent); color:var(--cr-accent); }
.cr-filter.active { background:var(--cr-accent); border-color:var(--cr-accent); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,0.3); }

.cr-jobs__list { display:flex; flex-direction:column; gap:14px; }

.cr-job-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 28px; background:var(--cr-surface); border:1.5px solid var(--cr-border); border-radius:var(--cr-radius-sm); box-shadow:var(--cr-shadow-sm); transition:var(--cr-transition); }
.cr-job-card:hover { border-color:rgba(59,130,246,0.35); box-shadow:var(--cr-shadow-md); transform:translateX(4px); }
.cr-job-card.hidden { display:none; }

.cr-job-card__left { display:flex; flex-direction:column; gap:8px; flex:1; }
.cr-job-card__dept { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:3px 10px; border-radius:100px; width:fit-content; }
.cr-job-card__dept.estimation { background:#eff6ff; color:#1d4ed8; }
.cr-job-card__dept.detailing  { background:#f0fdf4; color:#15803d; }
.cr-job-card__dept.bim        { background:#faf5ff; color:#7c3aed; }
.cr-job-card__dept.management { background:#fff7ed; color:#c2410c; }

.cr-job-card__title { font-size:17px; font-weight:700; color:var(--cr-text); margin:0; }
.cr-job-card__meta { display:flex; gap:18px; flex-wrap:wrap; }
.cr-job-card__meta span { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--cr-text-muted); font-weight:500; }

.cr-job-card__apply { flex-shrink:0; padding:10px 22px; background:var(--cr-accent); color:#fff; border:none; border-radius:var(--cr-radius-xs); font-family:var(--ff-body); font-size:13.5px; font-weight:600; cursor:pointer; transition:var(--cr-transition); box-shadow:0 3px 12px rgba(37,99,235,0.25); }
.cr-job-card__apply:hover { background:#1d4ed8; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,0.38); }


.cr-modal__close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; background:var(--cr-bg); border:1.5px solid var(--cr-border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--cr-text-muted); transition:var(--cr-transition); }
.cr-modal__close:hover { background:var(--cr-accent); color:#fff; border-color:var(--cr-accent); }
.cr-modal__close svg { width:14px; height:14px; }

.cr-modal__header { display:flex; align-items:flex-start; gap:14px; padding:28px 28px 20px; border-bottom:1px solid var(--cr-border); }
.cr-modal__icon { width:44px; height:44px; background:var(--cr-accent-light); border-radius:var(--cr-radius-xs); display:flex; align-items:center; justify-content:center; color:var(--cr-accent); flex-shrink:0; }
.cr-modal__title { font-family:var(--ff-display); font-size:20px; font-weight:600; color:var(--cr-text); margin:0 0 4px; }
.cr-modal__title span { color:var(--cr-accent); font-style:italic; }
.cr-modal__sub { font-size:13px; color:var(--cr-text-muted); margin:0; }

/* Form inside modal */
.cr-apply-form { padding:24px 28px 28px; display:flex; flex-direction:column; gap:18px; }

.cr-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cr-form-group { display:flex; flex-direction:column; gap:8px; }
.cr-form-label { font-size:12.5px; font-weight:600; color:var(--cr-text-sub); }
.cr-req { color:#e53e3e; margin-left:2px; }

.cr-form-input { background:var(--cr-surface-2); border:1.5px solid var(--cr-border); border-radius:var(--cr-radius-xs); padding:11px 14px; font-family:var(--ff-body); font-size:14px; color:var(--cr-text); outline:none; transition:var(--cr-transition); width:100%; box-sizing:border-box; -webkit-appearance:none; }
.cr-form-input::placeholder { color:#b0b8cc; }
.cr-form-input:focus { border-color:var(--cr-accent); background:#fff; box-shadow:0 0 0 3px var(--cr-accent-light); }

.cr-input-icon { position:relative; }
.cr-input-icon svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:#b0b8cc; pointer-events:none; transition:color var(--cr-transition); }
.cr-input-icon:focus-within svg { color:var(--cr-accent); }
.has-icon { padding-left:38px; }

.cr-select-wrap { position:relative; }
.cr-select { cursor:pointer; padding-right:34px; }
.cr-select-arrow { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:#b0b8cc; pointer-events:none; transition:var(--cr-transition); }
.cr-select-wrap:focus-within .cr-select-arrow { color:var(--cr-accent); transform:translateY(-50%) rotate(180deg); }

.cr-textarea { resize:vertical; min-height:100px; line-height:1.65; }

/* File upload */
.cr-file-upload { position:relative; border:2px dashed var(--cr-border); border-radius:var(--cr-radius-xs); background:var(--cr-surface-2); transition:var(--cr-transition); cursor:pointer; }
.cr-file-upload:hover,.cr-file-upload.dragover { border-color:var(--cr-accent); background:var(--cr-accent-light); }
.cr-file-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.cr-file-upload__inner { display:flex; flex-direction:column; align-items:center; padding:22px 16px; gap:6px; text-align:center; pointer-events:none; }
.cr-file-upload__inner svg { color:var(--cr-accent); margin-bottom:2px; }
.cr-file-upload__inner span { font-size:13.5px; color:var(--cr-text-sub); }
.cr-file-upload__inner span strong { color:var(--cr-accent); }
.cr-file-upload__inner small { font-size:12px; color:var(--cr-text-muted); }

.cr-form-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px; background:var(--cr-accent); border:none; border-radius:var(--cr-radius-xs); font-family:var(--ff-body); font-size:14.5px; font-weight:600; color:#fff; cursor:pointer; transition:var(--cr-transition); box-shadow:0 4px 16px rgba(37,99,235,0.28); }
.cr-form-submit svg { width:16px; height:16px; transition:transform var(--cr-transition); }
.cr-form-submit:hover { background:#1d4ed8; transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,99,235,0.38); }
.cr-form-submit:hover svg { transform:translate(3px,-3px); }

.cr-form-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--cr-text-muted); margin:0; }
.cr-form-note svg { color:#10b981; flex-shrink:0; }

/* Success */
.cr-modal__success { padding:52px 28px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.cr-success__icon { width:64px; height:64px; background:#d1fae5; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#10b981; }
.cr-success__icon svg { width:30px; height:30px; }
.cr-modal__success h3 { font-family:var(--ff-display); font-size:22px; font-weight:600; color:var(--cr-text); margin:0; }
.cr-modal__success p { font-size:14px; color:var(--cr-text-sub); line-height:1.7; margin:0; max-width:380px; }

/* =============================================  ANIMATIONS */
@keyframes crFadeLeft  { from{opacity:0;transform:translateX(-24px);} to{opacity:1;transform:translateX(0);} }
@keyframes crFadeRight { from{opacity:0;transform:translateX(24px);}  to{opacity:1;transform:translateX(0);} }
@keyframes crFadeUp    { from{opacity:0;transform:translateY(18px);}  to{opacity:1;transform:translateY(0);} }

.cr-benefit-card:nth-child(1){animation:crFadeUp 0.5s 0.05s both;}
.cr-benefit-card:nth-child(2){animation:crFadeUp 0.5s 0.12s both;}
.cr-benefit-card:nth-child(3){animation:crFadeUp 0.5s 0.19s both;}
.cr-benefit-card:nth-child(4){animation:crFadeUp 0.5s 0.26s both;}
.cr-benefit-card:nth-child(5){animation:crFadeUp 0.5s 0.33s both;}
.cr-benefit-card:nth-child(6){animation:crFadeUp 0.5s 0.40s both;}

/* =============================================  RESPONSIVE */
@media (max-width:1024px) { .cr-process__steps{grid-template-columns:repeat(2,1fr); gap:40px;} .cr-process__line{display:none;} }
@media (max-width:900px) {
    .cr-hero__inner,.cr-culture__inner{grid-template-columns:1fr; gap:40px;}
    .cr-hero__visual{height:280px;}
    .cr-benefits__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px) {
    .cr-benefits__grid{grid-template-columns:1fr;}
    .cr-culture__cards{grid-template-columns:1fr;}
    .cr-process__steps{grid-template-columns:1fr;}
    .cr-job-card{flex-direction:column; align-items:flex-start;}
    .cr-job-card__apply{width:100%;}
    .cr-form-row{grid-template-columns:1fr;}
    .cr-modal{border-radius:16px 16px 0 0; max-height:95vh;}
    .cr-modal-overlay{align-items:flex-end; padding:0;}
}

.cr-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cr-modal-overlay.show {
    display: flex;
}
.cr-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}



@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,600;1,400&display=swap');

:root {
    --c-bg:           #f0f2f5;
    --c-surface:      #ffffff;
    --c-surface-2:    #f7f8fa;
    --c-border:       #e2e6ec;
    --c-border-focus: #3b6cf8;
    --c-accent:       #3b6cf8;
    --c-accent-light: rgba(59, 108, 248, 0.08);
    --c-text:         #1a1f2e;
    --c-text-muted:   #7a8499;
    --c-text-sub:     #4d5568;
    --c-success:      #10b981;
    --ff-body:        'Plus Jakarta Sans', sans-serif;
    --ff-display:     'Lato', sans-serif;
    --shadow-sm:      0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --shadow-md:      0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-card:    0 2px 8px rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.06);
    --radius:         16px;
    --radius-sm:      10px;
    --radius-xs:      8px;
    --transition:     0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-section {
    position: relative;
    min-height: 100vh;
    padding: clamp(60px, 8vw, 110px) 0;
    font-family: var(--ff-body);
    background: var(--c-bg);
    overflow: hidden;
}

.contact-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.bg-shape {
    position: absolute;
    border-radius: 50%;
}
.bg-shape--1 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(59,108,248,0.07) 0%, transparent 65%);
    top: -250px; right: -200px;
}
.bg-shape--2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(99,179,237,0.08) 0%, transparent 65%);
    bottom: -150px; left: -100px;
}
.bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Layout */
.contact-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =============================================
   LEFT
   ============================================= */
.contact-info {
    padding: 8px 0;
    animation: fadeSlideLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.contact-info__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: var(--c-accent-light);
    padding: 6px 14px 6px 10px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.contact-info__eyebrow::before {
    content: '';
    display: block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
}

.contact-info__title {
    font-family: var(--ff-display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-text);
    margin: 0 0 18px;
}
.contact-info__title span {
    font-style: italic;
    color: var(--c-accent);
}

.contact-info__subtitle {
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-text-sub);
    max-width: 380px;
    margin: 0 0 44px;
}

/* Cards */
.contact-info__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.contact-card:hover {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-light), var(--shadow-md);
    transform: translateY(-2px);
}

.contact-card__icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-accent-light);
    border-radius: var(--radius-xs);
    color: var(--c-accent);
    transition: var(--transition);
}
.contact-card:hover .contact-card__icon {
    background: var(--c-accent);
    color: #fff;
}
.contact-card__icon svg { width: 18px; height: 18px; }

.contact-card__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 3px;
}
.contact-card__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.6;
    margin: 0;
}
.contact-card__link {
    text-decoration: none;
    color: var(--c-text);
    transition: color var(--transition);
}
.contact-card__link:hover { color: var(--c-accent); }

/* Social */
.contact-social {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.contact-social__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.contact-social__links { display: flex; gap: 8px; }

.social-btn {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-xs);
    color: var(--c-text-muted);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.social-btn svg { width: 14px; height: 14px; }
.social-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59,108,248,0.3);
}

.contact-card:nth-child(1) { animation: fadeUp 0.55s 0.1s both; }
.contact-card:nth-child(2) { animation: fadeUp 0.55s 0.22s both; }
.contact-card:nth-child(3) { animation: fadeUp 0.55s 0.34s both; }
.contact-card:nth-child(4) { animation: fadeUp 0.55s 0.46s both; }

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

/* =============================================
   RIGHT — Form
   ============================================= */
.contact-form-wrap {
    animation: fadeSlideRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.contact-form-inner {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}
.contact-form-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), #6ea8fe, #a78bfa);
}

.form-header { margin-bottom: 28px; padding-top: 6px; }
.form-header__title {
    font-family: var(--ff-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 6px;
}
.form-header__sub {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* .form-group { margin-bottom: 20px; } */

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-sub);
    margin-bottom: 8px;
}
.required { color: #e53e3e; margin-left: 2px; }

.form-input {
    width: 100%;
    background: var(--c-surface-2);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-xs);
    padding: 11px 14px;
    font-family: var(--ff-body);
    font-size: 14px;
    color: var(--c-text);
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
    -webkit-appearance: none;
}
.form-input::placeholder { color: #b0b8cc; }
.form-input:hover { border-color: #c5cde0; }
.form-input:focus {
    border-color: var(--c-border-focus);
    background: #fff;
    box-shadow: 0 0 0 3px var(--c-accent-light);
}

.input-icon-wrap { position: relative; }
.input-icon {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #b0b8cc;
    pointer-events: none;
    transition: color var(--transition);
}
.has-icon { padding-left: 40px; }
.input-icon-wrap:focus-within .input-icon { color: var(--c-accent); }

.select-wrap { position: relative; }
.form-select { cursor: pointer; padding-right: 36px; }
.select-arrow {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #b0b8cc;
    pointer-events: none;
    transition: var(--transition);
}
.select-wrap:focus-within .select-arrow {
    color: var(--c-accent);
    transform: translateY(-50%) rotate(180deg);
}
.form-select option { background: #fff; color: var(--c-text); }

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.65;
}

.form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 28px;
    background: var(--c-accent);
    border: none;
    border-radius: var(--radius-xs);
    font-family: var(--ff-body);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(59,108,248,0.28);
    margin-top: 4px;
}
.form-submit svg { width: 16px; height: 16px; transition: transform var(--transition); }
.form-submit:hover {
    background: #2d5de0;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59,108,248,0.38);
}
.form-submit:hover svg { transform: translate(3px, -3px); }
.form-submit:active { transform: translateY(0); }

.form-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--c-text-muted);
    margin: 14px 0 0;
    text-align: center;
}
.form-note svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--c-success); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 880px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .contact-info { padding: 0; }
    .contact-info__subtitle { max-width: 100%; }
}

@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
    .contact-form-inner { padding: 24px 18px; }
    .contact-info__title { font-size: 34px; }
}


   

.events-section {
  padding: 90px 0;
  background: #fafafa;
  /* font-family: "Inter", sans-serif; */
}

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.events-header h2 {
  font-size: 34px;
  font-weight: 700;
  color: #0b1b34;
}

.view-calendar {
  color: #1f5eff;
  font-weight: 500;
  text-decoration: none;
}

/* Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Card */
.event-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  transition: 0.35s ease;
}

.event-card:hover {
  transform: translateY(-6px);
}

/* Image */
.event-image {
  position: relative;
}

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

/* Badge */
.event-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 6px;
  text-transform: uppercase;
}

.event-badge.blue { background: #2563eb; }
.event-badge.green { background: #16a34a; }
.event-badge.orange { background: #f97316; }

/* Content */
.event-content {
  padding: 26px;
}

.event-meta {
  font-size: 17px;
  color: #64748b;
  margin-bottom: 12px;
}

.event-content h3 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #0b1b34;
}

.event-content h3.highlight {
  /* color: #1f5eff; */
}

.event-content p {
  font-size: 17px;
  line-height: 1.6;
  color: #475569;
}

.event-content hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}

/* Footer */
.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
}

.event-footer a {
  color: #1f5eff;
  font-weight: 600;
  text-decoration: none;
}

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

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


.featured-event {
  padding: 80px 0;
  background:
    radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 18px 18px;
  /* font-family: "Inter", sans-serif; */
}

.featured-card {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.12);
}

/* Image */
.featured-image {
  position: relative;
}

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

/* Date Badge */
.date-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: #1f5eff;
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(31, 94, 255, 0.4);
}

.date-badge span {
  font-size: 11px;
  letter-spacing: 1px;
  display: block;
}

.date-badge strong {
  font-size: 20px;
  font-weight: 700;
}

/* Content */
.featured-content {
  padding: 60px 55px;
}

.featured-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #1f5eff;
  display: inline-block;
  margin-bottom: 18px;
}

.featured-content h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  color: #0b1b34;
  margin-bottom: 22px;
}

.featured-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #475569;
  max-width: 520px;
}

/* Buttons */
.featured-actions {
  margin: 32px 0 28px;
  display: flex;
  gap: 16px;
}

.btn-primary {
  background: #1f5eff;
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(31, 94, 255, 0.35);
  transition: 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid #cbd5e1;
  padding: 14px 26px;
  border-radius: 10px;
  color: #0b1b34;
  text-decoration: none;
  font-weight: 600;
}

/* Meta */
.featured-meta {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: #475569;
}

/* Responsive */
@media (max-width: 992px) {
  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-content {
    padding: 40px 30px;
  }

  .featured-content h1 {
    font-size: 32px;
  }
}



.slider-sub-title h4 {
    display: inline-block;
    background: #1e5eff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.slider-main-title h1 {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.2;
}

.slider-main-title h1 span {
    color: #1e5eff;
}

.slider-discripton p {
    max-width: 520px;
    font-size: 16px;
    opacity: 0.9;
    margin-top: 15px;
}



.events-section {
  padding: 90px 0;
  background: #fafafa;
  /* font-family: "Inter", sans-serif; */
}

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.events-header h2 {
  font-size: 34px;
  font-weight: 700;
  color: #0b1b34;
}

.view-calendar {
  color: #1f5eff;
  font-weight: 500;
  text-decoration: none;
}

/* Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Card */
.event-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  transition: 0.35s ease;
}

.event-card:hover {
  transform: translateY(-6px);
}

/* Image */
.event-image {
  position: relative;
}

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

/* Badge */
.event-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 6px;
  text-transform: uppercase;
}

.event-badge.blue { background: #2563eb; }
.event-badge.green { background: #16a34a; }
.event-badge.orange { background: #f97316; }

/* Content */
.event-content {
  padding: 26px;
}

.event-meta {
  font-size: 17px;
  color: #64748b;
  margin-bottom: 12px;
}

.event-content h3 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #0b1b34;
}

.event-content h3.highlight {
  /* color: #1f5eff; */
}

.event-content p {
  font-size: 17px;
  line-height: 1.6;
  color: #475569;
}

.event-content hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}

/* Footer */
.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
}

.event-footer a {
  color: #1f5eff;
  font-weight: 600;
  text-decoration: none;
}

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

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


.featured-event {
  padding: 80px 0;
  background:
    radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 18px 18px;
  /* font-family: "Inter", sans-serif; */
}

.featured-card {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.12);
}

/* Image */
.featured-image {
  position: relative;
}

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

/* Date Badge */
.date-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: #1f5eff;
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(31, 94, 255, 0.4);
}

.date-badge span {
  font-size: 11px;
  letter-spacing: 1px;
  display: block;
}

.date-badge strong {
  font-size: 20px;
  font-weight: 700;
}

/* Content */
.featured-content {
  padding: 60px 55px;
}

.featured-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #1f5eff;
  display: inline-block;
  margin-bottom: 18px;
}

.featured-content h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  color: #0b1b34;
  margin-bottom: 22px;
}

.featured-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #475569;
  max-width: 520px;
}

/* Buttons */
.featured-actions {
  margin: 32px 0 28px;
  display: flex;
  gap: 16px;
}

.btn-primary {
  background: #1f5eff;
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(31, 94, 255, 0.35);
  transition: 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid #cbd5e1;
  padding: 14px 26px;
  border-radius: 10px;
  color: #0b1b34;
  text-decoration: none;
  font-weight: 600;
}

/* Meta */
.featured-meta {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: #475569;
}

/* Responsive */
@media (max-width: 992px) {
  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-content {
    padding: 40px 30px;
  }

  .featured-content h1 {
    font-size: 32px;
  }
}



.slider-sub-title h4 {
    display: inline-block;
    background: #1e5eff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.slider-main-title h1 {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.2;
}

.slider-main-title h1 span {
    color: #1e5eff;
}

.slider-discripton p {
    max-width: 520px;
    font-size: 16px;
    opacity: 0.9;
    margin-top: 15px;
}



:root {
    --primary: #3b6cf8;
    --bg-light: #f6f6f8;
    --bg-dark: #101622;
    /* --text-dark: #1e293b; */
}

.container-custom {
    display: flex;
    min-height: 100vh;
}

/* ================= SIDEBAR ================= */

.sidebar {
    width: 280px;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 40px 25px;
    /* display: flex; */
    flex-direction: column;
}

.sidebar h1 {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}

.sidebar .line {
    width: 50px;
    height: 4px;
    background: var(--primary);
    margin: 10px 0 20px;
}

.sidebar p {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav {
    margin-top: 40px;
    flex: 1;
}

.nav a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #475569;
    font-weight: 500;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: 0.3s;
}

.nav a:hover {
    background: #f1f5f9;
}

.nav a.active {
    background: var(--primary);
    color: #fff;
    font-weight: bold;
}

.sidebar-footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.sidebar-footer button {
    width: 100%;
    padding: 12px;
    background: #000;
    color: #fff;
    border: none;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

/* ================= SERVICES WIDGET — NEW ================= */

.sidebar-services {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}



.sidebar-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-services ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    text-decoration: none;
    color: #475569;
    font-size: 1rem; /* matches .nav a exactly */
    font-weight: 500;
    font-family: 'Lato', sans-serif;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: background 0.3s, color 0.3s;
    line-height: 1.4;
}

.sidebar-services ul li a:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.sidebar-services ul li a .svc-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.2s;
    color: var(--primary);
}

.sidebar-services ul li a:hover .svc-icon {
    opacity: 1;
}

/* ================= MAIN ================= */

.main {
    flex: 1;
    padding: 60px;
}

.header {
    max-width: 700px;
    margin-bottom: 60px;
}

.header h2 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 15px;
    font-family: 'Lato', sans-serif;
}

.header span {
    color: var(--primary);
}

.header p {
    font-size: 18px;
    color: #64748b;
    line-height: 1.6;
}

/* ================= GALLERY ================= */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* ================= FANCY BOX CARD ================= */

/* ================= PREMIUM IMAGE BOX ================= */

.card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    padding: 15px; /* creates white space around image */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
}

.card-image {
    height: 320px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    filter: blur(2px);
}
/* ================= PROMO SECTION ================= */

.promo {
    background: #0f172a;
    color: #fff;
    padding: 60px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}

.promo-buttons button {
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
}

.promo-buttons .primary-btn {
    background: #fff;
    color: #000;
    border: none;
}

.promo-buttons .outline-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

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

@media(max-width: 992px) {
    .container-custom {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .main {
        padding: 30px;
    }

    .promo {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}




:root {
    --dark: #111111;
    --accent: #3b6cf8;
    --light: #f7f5f1;
    --muted: #888;
    --border: rgba(0,0,0,0.10);
}

/* ── Page wrapper ── */
.service-detail-page {
    min-height: calc(100vh - 90px);
    background: var(--light);
  
    position: relative;
    overflow: hidden;
}

/* ── Back button ── */
.back-btn {
    position: absolute;
    top: 36px;
    right: 48px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--dark);
  
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 22px 10px 16px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.back-btn svg {
    transition: transform 0.3s ease;
}

.back-btn:hover {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

.back-btn:hover svg {
    transform: translateX(-4px);
    stroke: #fff;
}

/* ── Main layout ── */
.service-detail-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 90px);
}

/* ── LEFT: Image panel ── */
.service-image-panel {
    position: relative;
    overflow: hidden;
}

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

.service-image-panel:hover img {
    transform: scale(1.04);
}

/* Decorative overlay on image */
.service-image-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.05) 60%,
        rgba(200,169,110,0.12) 100%
    );
    pointer-events: none;
}

/* Floating category badge on image */
.image-badge {
    position: absolute;
    bottom: 36px;
    left: 36px;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 2px;
}

/* ── RIGHT: Content panel ── */
.service-content-panel {
    padding: 80px 64px 64px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    position: relative;
}

/* Decorative line accent */
.service-content-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.service-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-eyebrow::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
}

.service-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dark);
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}

.service-divider {
    width: 56px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 28px;
    border-radius: 2px;
}

.service-description {
    font-size: 15px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 36px;
    max-width: 480px;
}

/* Feature list */
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 44px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}

.service-features li {
    font-size: 14px;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}

.service-features li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* Stats row */
.service-stats {
    display: flex;
    gap: 40px;
    padding: 28px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 44px;
}

.stat-item {}

.stat-number {
    font-size: 38px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}

/* CTA buttons */
.service-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--dark);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--dark);
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: transparent;
    color: var(--dark);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: transparent;
    color: var(--dark);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--border);
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--dark);
    background: var(--dark);
    color: #fff;
}

/* ── Entrance animations ── */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.7s ease forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }
.fade-up:nth-child(5) { animation-delay: 0.5s; }
.fade-up:nth-child(6) { animation-delay: 0.6s; }
.fade-up:nth-child(7) { animation-delay: 0.7s; }

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

.image-reveal {
    clip-path: inset(0 100% 0 0);
    animation: revealImg 1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s forwards;
}

@keyframes revealImg {
    to { clip-path: inset(0 0% 0 0); }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .service-detail-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh auto;
    }
    .service-content-panel {
        padding: 56px 40px;
    }
    .service-title {
        font-size: 38px;
    }
    .back-btn {
        top: 20px;
        right: 20px;
    }
}

@media (max-width: 640px) {
    .service-features {
        grid-template-columns: 1fr;
    }
    .service-stats {
        gap: 24px;
    }
    .service-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .service-content-panel {
        padding: 40px 24px;
    }
}




/* Image */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*=============== GALLERY WRAPPER ===============*/
.gallery-container {
  display: grid;
  place-items: center;
  margin-inline: 1.5rem;
  padding-block: 5rem;
}

/* Title */
.gallery-title {
  text-align: center;
  margin-bottom: 60px;
}

.gallery-title h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
  font-family: 'Lato', sans-serif;
}

.gallery-title h2::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #3b6cf8;
  display: block;
  margin: 15px auto 0;
}

.gallery-title p {
  color: #6c757d;
  font-size: 16px;
}

/*=============== CARD GRID ===============*/
.card__container {
  display: grid;
  row-gap: 3.5rem;
}

.card__article {
    position: relative;
    overflow: hidden;
}

.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Tablet */
@media screen and (min-width: 768px) {
  .card__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
  }
}

/* Desktop - 3 Cards Per Row */
@media screen and (min-width: 992px) {
  .card__container {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
  }
}

/*=============== CARD ===============*/
.card__article {
  position: relative;
  overflow: hidden;
}

.card__img {
  width: 100%;
  border-radius: 1.5rem;
}

.card__data {
  width: 85%;
  background-color: #3b6cf8;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -9rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  opacity: 0;
  transition: opacity 0.4s;
}

.card__description {
  display: block;
  font-size: 14px;
  margin-bottom: .25rem;
  color: #fff;
}

.card__title {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: .75rem;
  font-family: 'Lato', sans-serif;
}

.card__button {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.card__button:hover {
  text-decoration: underline;
}

/* Naming animations in hover */
.card__article:hover .card__data {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}

.card__article:hover {
  animation: remove-overflow 2s forwards;
}

.card__article:not(:hover) {
  animation: show-overflow 2s forwards;
}

.card__article:not(:hover) .card__data {
  animation: remove-data 1s forwards;
}

/* Card animation */
@keyframes show-data {
  50% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(-7rem);
  }
}

@keyframes remove-overflow {
  to {
    overflow: initial;
  }
}

@keyframes remove-data {
  0% {
    transform: translateY(-7rem);
  }
  50% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(.5rem);
  }
}

@keyframes show-overflow {
  0% {
    overflow: initial;
    pointer-events: none;
  }
  50% {
    overflow: hidden;
  }
}


.cr-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(8, 10, 14, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 1.5rem 1.5rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cr-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ---- Modal box ---- */
.cr-modal {
    position: relative;
    background: #0e1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    width: 100%;
    max-width: 860px;
    max-height: 55vh;
    margin-top: 0px !important;
    overflow-y: auto;
    padding: 2.5rem 2.5rem 2rem;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.cr-modal-overlay.is-open .cr-modal {
    transform: translateY(0) scale(1);
}
.cr-modal::-webkit-scrollbar { width: 4px; }
.cr-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ---- Close ---- */
.cr-modal__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    transition: background 0.2s, color 0.2s;
}
.cr-modal__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ---- Header ---- */
.cr-modal__header { margin-bottom: 2rem; }
.cr-modal__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0.35rem 0 0.5rem;
}
.cr-modal__title em { font-style: normal; color: #44859d; }
.cr-modal__subtitle { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin: 0; }

/* ---- Fields grid — 3 columns ---- */
.cr-modal__fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 720px) {
    .cr-modal__fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .cr-modal__fields { grid-template-columns: 1fr; }
    .cr-modal { padding: 2rem 1.25rem 1.5rem; }
}
.cr-field { display: flex; flex-direction: column; gap: 0.4rem; }
.cr-field--full { grid-column: 1 / -1; }

/* ---- Labels & Inputs ---- */
.cr-field__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cr-required { color: #44859d; }
.cr-field__input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    color: #fff;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}
.cr-field__input::placeholder { color: rgba(255,255,255,0.25); }
.cr-field__input:focus {
    border-color: #44859d;
    background: rgba(200,169,110,0.05);
    box-shadow: 0 0 0 3px rgba(200,169,110,0.12);
}
.cr-field__input.is-invalid {
    border-color: #e05c5c;
    box-shadow: 0 0 0 3px rgba(224,92,92,0.12);
}
.cr-field__error {
    font-size: 0.76rem;
    color: #e05c5c;
    display: none;
    margin-top: 0.15rem;
}
.cr-field.has-error .cr-field__error { display: block; }
.cr-field__textarea { resize: vertical; min-height: 100px; }

/* ---- Select ---- */
.cr-field__select-wrap { position: relative; }
.cr-field__select { padding-right: 2.5rem; cursor: pointer; }
.cr-field__select option { background: #0e1117; color: #fff; }
.cr-field__chevron {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255,255,255,0.4);
}

/* ---- File upload ---- */
.cr-field__file-input { display: none; }
.cr-field__file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border: 1.5px dashed rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.cr-field__file-label:hover, .cr-field__file-label.drag-over {
    border-color: #44859d;
    background: rgba(200,169,110,0.05);
}
.cr-field__file-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.cr-field__file-inner svg { flex-shrink: 0; color: #44859d; }
.cr-field__file-text { font-size: 0.88rem; text-align: left; }
.cr-field__file-text strong { color: rgba(255,255,255,0.8); }
.cr-field__file-text small { color: rgba(255,255,255,0.35); }
.cr-field__file-name {
    font-size: 0.78rem;
    color: #44859d;
    background: rgba(200,169,110,0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    display: none;
}
.cr-field__file-name.has-file { display: inline-block; }

/* ---- Footer ---- */
.cr-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
@media (max-width: 400px) {
    .cr-modal__footer { flex-direction: column-reverse; }
    .cr-modal__footer .cr-btn { width: 100%; justify-content: center; }
}

/* ---- Buttons ---- */
.cr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.cr-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
}
.cr-btn--ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cr-btn--primary {
    background: #44859d;
    color: #0e1117;
}
.cr-btn--primary:hover { background: #44859d; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,169,110,0.35); }
.cr-btn--primary:active { transform: translateY(0); }

/* Loader */
.cr-btn__loader {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(14,17,23,0.3);
    border-top-color: #0e1117;
    border-radius: 50%;
    animation: cr-spin 0.7s linear infinite;
    display: none;
}
.cr-btn.is-loading .cr-btn__label { opacity: 0.6; }
.cr-btn.is-loading .cr-btn__loader { display: block; }
.cr-btn.is-loading svg { display: none; }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ---- Success state ---- */
.cr-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem 1rem;
    gap: 1rem;
}
.cr-modal__success[hidden] { display: none; }
.cr-modal__success-icon {
    width: 72px;
    height: 72px;
    background: rgba(100,200,140,0.1);
    border: 1px solid rgba(100,200,140,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64c88c;
    margin-bottom: 0.5rem;
}
.cr-modal__success h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; }
.cr-modal__success p { color: rgba(255,255,255,0.55); max-width: 360px; margin: 0; line-height: 1.6; }
.cr-modal__success strong { color: #44859d; }


.blur-text {
    filter: blur(2px);
    user-select: none;     
    pointer-events: none;  
}


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

     .cr-modal {
    margin-top: 125px !important;
  }

  .enquiry-box {
    width: 330px !important;
  }

}



/* ── Review Section ── */
.review-section {
    background: var(--light);
    padding: 80px 0 100px;
}

.review-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}

.review-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
    gap: 24px;
}

.review-header-left {}

.review-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-eyebrow::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
}

.review-heading {
    font-size: 38px;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.review-subtext {
    font-size: 14px;
    color: var(--muted);
    max-width: 340px;
    line-height: 1.7;
    text-align: right;
}

/* ── Review Layout ── */
.review-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* ── Review Form ── */
.review-form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 44px;
    position: relative;
    overflow: hidden;
}

.review-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.review-form-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 28px;
    letter-spacing: -0.3px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--dark);
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 2px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 108, 248, 0.08);
    background: #fff;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Star Rating */
.star-group {
    margin-bottom: 20px;
}

.star-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 10px;
}

.star-rating {
    display: flex;
    gap: 6px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 28px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.15s ease;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f5a623;
}

.form-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}

.form-note {
    font-size: 12px;
    color: var(--muted);
}

/* Success message */
.form-success {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 2px;
    color: #166534;
    font-size: 13px;
    font-weight: 500;
    margin-top: 16px;
}

.form-success.show {
    display: flex;
}

/* ── Reviews List ── */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.no-reviews {
    text-align: center;
    padding: 60px 32px;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 4px;
}

.no-reviews-icon {
    font-size: 40px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.no-reviews p {
    color: var(--muted);
    font-size: 14px;
}

.review-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 28px 32px;
    position: relative;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.review-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reviewer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}

.reviewer-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 3px;
}

.reviewer-date {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.5px;
}

.review-stars {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.review-stars span {
    font-size: 16px;
    color: #ddd;
}

.review-stars span.filled {
    color: #f5a623;
}

.review-feedback {
    font-size: 14px;
    line-height: 1.75;
    color: #555;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 4px;
}

.review-badge {
    position: absolute;
    top: -1px;
    left: 28px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 0 0 3px 3px;
}

/* Reviews count pill */
.reviews-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-left: 12px;
    vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .review-layout {
        grid-template-columns: 1fr;
    }
    .review-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .review-subtext {
        text-align: left;
    }
    .review-container {
        padding: 0 32px;
    }
}

@media (max-width: 640px) {
    .review-container {
        padding: 0 20px;
    }
    .review-heading {
        font-size: 28px;
    }
    .review-form-card {
        padding: 28px 24px;
    }
    .form-submit-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 700px;
    overflow-y: auto;
    padding-right: 8px;
}

.reviews-list::-webkit-scrollbar {
    width: 4px;
}

.reviews-list::-webkit-scrollbar-track {
    background: var(--border);
    border-radius: 4px;
}

.reviews-list::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}


.reviews-list.scrollable {
    max-height: 700px;
    overflow-y: auto;
    padding-right: 8px;
}



   .ab-map {
    margin-top: 100px;
   }
  
  .map-wrapper-full { position: relative; width: 100%; background: #d6eaf5; overflow: hidden; }
  #world-svg { width: 100%; height: auto; display: block; }
 
  .country { fill: #b8d4c8; stroke: #ffffff; stroke-width: 0.4; transition: fill 0.2s; }
  .country:hover { fill: #7fb8a8; cursor: pointer; }
  .country.highlighted { fill: #0198e4; }
 
  .graticule { fill: none; stroke: #a8c8dc; stroke-width: 0.3; opacity: 0.5; }
  .sphere { fill: #d6eaf5; }
 
  /* Flight route trail */
  .route-line {
    fill: none;
    stroke: #0d3d4f;
    stroke-width: 1.2;
    stroke-dasharray: 4 3;
    opacity: 0.22;
  }
 
  /* Pins */
  .pin-group { cursor: pointer; }
  .pin-marker {
    fill: #e63946;
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
    transition: fill 0.2s;
  }
  .pin-group:hover .pin-marker,
  .pin-group.active .pin-marker { fill: #0d3d4f; }
  .pin-india .pin-marker { fill: #e63946; }
  .pin-india:hover .pin-marker,
  .pin-india.active .pin-marker { fill: #0d3d4f; }
 
  .pin-pulse {
    fill: none;
    stroke: #e63946;
    stroke-width: 1.5;
    opacity: 0;
    animation: ringPulse 2s ease-out infinite;
  }
  .pin-india .pin-pulse { stroke: #f4a11d; }
  .pin-group.active .pin-pulse { stroke: #0d3d4f; }
  @keyframes ringPulse {
    0%   { r: 8;  opacity: 0.7; }
    100% { r: 22; opacity: 0; }
  }
 
  .pin-float { animation: floatY 2s ease-in-out infinite; }
  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
  }
  .pin-group:nth-child(1) .pin-float { animation-delay: 0s; }
  .pin-group:nth-child(2) .pin-float { animation-delay: 0.4s; }
  .pin-group:nth-child(3) .pin-float { animation-delay: 0.8s; }
  .pin-group:nth-child(4) .pin-float { animation-delay: 1.2s; }
  .pin-group:nth-child(5) .pin-float { animation-delay: 1.6s; }
 
  .pin-label-bg  { fill: rgba(255,255,255,0.9); }
  .pin-label-text { font-size: 9px; font-weight: 700; fill: #0d3d4f; text-anchor: middle; pointer-events: none; }
 
  /* Plane SVG element */
  .plane-icon { pointer-events: none; }
 
  /* Exhaust trail */
  .exhaust { fill: none; stroke: #1d83a9; stroke-width: 1.2; stroke-linecap: round; opacity: 0.5; }
 
  /* Info Card */
  .info-panel-wrap { max-width: 440px; margin: 16px auto 0; padding: 0 20px; display: none;}
  .info-card {
    background: #fff; border: 1px solid #dce8ef; border-radius: 14px;
    padding: 18px 20px; animation: slideIn 0.25s ease;
    box-shadow: 0 4px 20px rgba(13,61,79,0.08); display: none;
  }
  @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .info-flag  { font-size: 30px; display: block; margin-bottom: 8px; }
  .info-name  { font-size: 15px; font-weight: 700; color: #0d3d4f; margin-bottom: 4px; }
  .info-role  { font-size: 13px; color: #e63946; font-weight: 600; margin-bottom: 10px; }
  .info-desc  { font-size: 13px; color: #5a7a88; line-height: 1.65; }
  .info-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .tag { font-size: 11px; padding: 4px 11px; border-radius: 20px; background: #e8f2f7; color: #0d3d4f; font-weight: 600; }
 
  .map-hint { font-size: 12px; color: #8ba8b5; text-align: center; margin-top: 10px; display: none;}
  @media (max-width: 768px) { .ab-section-title { font-size: 26px; } }


.mil-back-to-top {
    position: fixed;
    right: 64px;
    bottom: -6px;
    padding: 34px;
    z-index: 999;
    background: #1d83a9;
    
}

.progress-text {
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}