@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
/* ==========================================
   CB WEB & GIS
   Modern Web Design + GIS Solutions
========================================== */


/* ---------- RESET ---------- */

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


/* ---------- GLOBAL ---------- */

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#07111f;
    color:#ffffff;
    line-height:1.6;
}

a{
    text-decoration:none;
    color:inherit;
}


/* ---------- NAVBAR ---------- */

header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;

    background:rgba(7,17,31,0.92);
    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,0.08);
}

.navbar{
    max-width:1200px;
    margin:auto;

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

    padding:18px 25px;
}




/* ---------- SITE LOGO ---------- */

.site-logo{
    display:flex;
    align-items:center;
}

.site-logo img{
    display:block;

    width:155px;
    height:auto;

    object-fit:contain;
}


/* ---------- NAVIGATION ---------- */

.nav-links{
    list-style:none;

    display:flex;
    align-items:center;

    gap:28px;
}

.nav-links a{
    color:#dce6f0;
    font-size:15px;
    font-weight:400;

    transition:0.3s;
}

.nav-links a:hover{
    color:#16d9c5;
}


/* ---------- LANGUAGE ---------- */

.language-switch a{
    font-size:14px;
    color:#dce6f0;

    transition:0.3s;
}

.language-switch a:hover{
    color:#16d9c5;
}


/* ---------- NAV BUTTON ---------- */

.nav-btn{
    background:#16d9c5;
    color:#06101c;

    padding:11px 18px;

    border-radius:8px;

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

    transition:0.3s;
}

.nav-btn:hover{
    transform:translateY(-2px);
    background:#ffffff;
}



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

.hero{
    min-height:100vh;
    position:relative;
    overflow:hidden;

  padding:135px 55px 22px;

    background:
    linear-gradient(
        90deg,
        rgba(3,12,25,0.98) 0%,
        rgba(4,14,29,0.88) 34%,
        rgba(5,18,38,0.56) 58%,
        rgba(4,13,28,0.22) 100%
    ),
    url("../images/hero-city.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(4,13,25,0.98) 0%,
        rgba(4,13,25,0.80) 37%,
        rgba(4,13,25,0.25) 67%,
        rgba(4,13,25,0.15) 100%
    );

    pointer-events:none;
}
/* ==========================================
   HERO NETWORK LIGHTS
========================================== */

.hero-network{
    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;
}


/* ---------- GLOWING NODES ---------- */

.network-node{
    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#25e9ff;

    box-shadow:
    0 0 10px #25e9ff,
    0 0 22px rgba(37,233,255,0.95),
    0 0 38px rgba(37,233,255,0.55);
}


.node-one{
    top:27%;
    left:58%;
}


.node-two{
    top:21%;
    left:70%;
}


.node-three{
   top:28%;
    left:82%;
}


.node-four{
   top:21%;
    left:93%;
}


/* ---------- NETWORK ARCS ---------- */

.network-arc{
    position:absolute;

    height:150px;

    border-top:
    2px solid rgba(56,224,255,0.85);

    border-radius:
    50% 50% 0 0;

    filter:
    drop-shadow(0 0 5px rgba(56,224,255,0.85))
    drop-shadow(0 0 12px rgba(56,224,255,0.45));

    opacity:0.85;
}


.arc-one{
    width:210px;

   top:23%;
    left:58%;

    transform:
    rotate(-7deg);
}


.arc-two{
    width:245px;

   top:18%;
    left:68%;

    transform:
    rotate(4deg);
}


.arc-three{
    width:230px;

    top:22%;
    left:81%;

    transform:
    rotate(-5deg);
}

.hero-content{
    position:relative;
    z-index:2;
transform:translateY(25px);
    width:100%;
    max-width:1320px;

    margin:auto;

    display:grid;
    grid-template-columns:0.88fr 1.12fr;

    align-items:center;

    gap:20px;
}

/* ---------- HERO TEXT ---------- */

.hero-text-content{
    position:relative;
    z-index:5;
}


.hero-badge{
    display:inline-flex;
    align-items:center;

   margin-bottom:18px;

    padding:9px 18px;

    color:#ffffff;

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

    letter-spacing:0.5px;

    border:1px solid #19d8ff;

    border-radius:30px;

    background:
    rgba(8,23,45,0.65);

    box-shadow:
    0 0 22px rgba(22,217,197,0.10),
    inset 0 0 20px rgba(94,72,255,0.07);
}


.hero h1{
    max-width:680px;

    margin-bottom:24px;

    color:#ffffff;

    font-family:'Manrope', sans-serif;
    font-size:56px;
    font-weight:500;

    line-height:1.08;
    letter-spacing:-1.8px;
}


.hero-ai-text{
    background:
    linear-gradient(
        90deg,
        #00d9ff,
        #4d9cff,
        #a05cff
    );

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

    color:transparent;
}


.hero-text{
    max-width:610px;

    margin-bottom:24px;

    color:#c7d3df;

    font-size:17px;
    line-height:1.65;
}


/* ---------- HERO BUTTONS ---------- */

.hero-buttons{
    display:flex;

    gap:15px;

    flex-wrap:wrap;
}


.hero-buttons .btn{
    display:inline-flex;

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

    gap:14px;

    min-height:56px;

    padding:0 25px;

    border-radius:14px;

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

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


.hero-buttons .primary-btn{
    color:#04101a;

    background:
    linear-gradient(
        90deg,
        #14d9e7,
        #21dbff
    );

    box-shadow:
    0 15px 35px rgba(22,217,197,0.22);
}


.hero-buttons .primary-btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 20px 45px rgba(22,217,197,0.32);
}


.hero-buttons .secondary-btn{
    color:#ffffff;

    background:
    rgba(9,22,42,0.55);

    border:
    1px solid rgba(255,255,255,0.22);
}


.hero-buttons .secondary-btn:hover{
    transform:translateY(-3px);

    border-color:#16d9c5;
}


/* ==========================================
   HERO VISUAL
========================================== */

.hero-visual{
    position:relative;

    width:100%;
    min-height:430px;

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

    padding-bottom:20px;
}
/* ---------- HERO SOLUTIONS IMAGE ---------- */

.hero-solutions-image{
    display:block;

    width:100%;
    max-width:680px;
    height:auto;

    object-fit:contain;

    transform:
        translateX(25px)
        translateY(10px);

    /* Softly blend the rectangular image into the city */
    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 56%,
            rgba(0,0,0,0.95) 68%,
            rgba(0,0,0,0.65) 80%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            black 56%,
            rgba(0,0,0,0.95) 68%,
            rgba(0,0,0,0.65) 80%,
            transparent 100%
        );

    filter:
        drop-shadow(
            0 28px 45px
            rgba(0,0,0,0.28)
        );
}

/* ---------- LAPTOP ---------- */

.hero-laptop{
    position:absolute;

    width:470px;

    left:75px;
    bottom:30px;

    z-index:2;

    transform:
        perspective(1200px)
        rotateY(-7deg)
        rotateX(1deg);

    transform-origin:center bottom;
}


.laptop-screen{
    position:relative;

    width:100%;
    height:315px;

    overflow:hidden;

    padding:18px;

    background:
    linear-gradient(
        145deg,
        #071b4c,
        #122975
    );

    border:8px solid #161d35;

    border-radius:
    18px 18px 10px 10px;

    box-shadow:
    0 35px 70px rgba(0,0,0,0.48),
    0 0 50px rgba(42,100,255,0.20);
}

.screen-top{
    display:flex;

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

    padding-bottom:18px;

    color:#8cf7ff;

    font-size:11px;
    font-weight:700;
}


.screen-menu{
    display:flex;
    gap:5px;
}


.screen-menu i{
    width:5px;
    height:5px;

    background:#a16cff;

    border-radius:50%;
}


.screen-content{
    margin-top:20px;
    padding:0 22px;
}


.screen-content p{
    color:#d7e3ff;

    font-size:13px;
}


.screen-content h3{
    margin:4px 0 6px;

    font-size:29px;
}


.screen-content span{
    color:#91a8ca;

    font-size:12px;
}


.screen-button{
    width:max-content;

     margin-top:16px;

    padding:8px 16px;

    color:#ffffff;

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

    border-radius:7px;

    background:
    linear-gradient(
        90deg,
        #5c56ff,
        #933eff
    );
}
/* ==========================================
   LAPTOP MINI WEBSITE
========================================== */

.screen-mini-nav{
    display:flex;
    align-items:center;
    gap:10px;
}

.screen-mini-nav span{
    color:#b9c9e6;
    font-size:8px;
    font-weight:500;
}

.screen-mini-nav strong{
    padding:5px 9px;

    color:#ffffff;
    font-size:8px;

    border-radius:5px;

    background:
    linear-gradient(
        90deg,
        #6556ff,
        #9a45ff
    );
}


.screen-copy{
    max-width:230px;
}


.screen-preview-cards{
    display:grid;

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

    gap:10px;

   margin-top:16px;
}


.screen-preview-card{
   min-height:64px;

    display:flex;
    flex-direction:column;

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

    gap:6px;

    padding:10px;

    background:
    rgba(5,20,55,0.72);

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

    border-radius:8px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.18);
}


.preview-icon{
    width:30px;
    height:30px;

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

    border-radius:7px;

    background:
    rgba(22,217,197,0.10);

    font-size:16px;
}


.preview-ai{
    color:#c977ff;

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

    background:
    rgba(151,68,255,0.16);
}


.screen-preview-card span{
    color:#dce7ff;

    font-size:8px;
    font-weight:700;
}

.laptop-base{
    width:515px;
    height:26px;

    margin-left:-20px;
    margin-top:0;

    background:
    linear-gradient(
        180deg,
        #53627b,
        #111a2b
    );

    border-radius:
    3px 3px 100px 100px;

    transform:
        perspective(700px)
        rotateX(48deg);

    transform-origin:top center;

    box-shadow:
    0 18px 35px rgba(0,0,0,0.45);
}
/* ---------- GIS MAP ---------- */

.hero-map-card{
    position:absolute;

     width:275px;
    height:190px;

    right:75px;
    bottom:65px;
    overflow:hidden;

    z-index:4;

    border:
    1px solid rgba(60,220,255,0.60);

    border-radius:15px;

    background:
    linear-gradient(
        145deg,
        rgba(6,60,117,0.96),
        rgba(8,95,150,0.90)
    );

    box-shadow:
    0 22px 55px rgba(0,0,0,0.40),
    0 0 40px rgba(0,199,255,0.25);

    transform:
    rotate(2deg);
}

.hero-map-grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(
        rgba(38,221,255,0.10) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(38,221,255,0.10) 1px,
        transparent 1px
    );

    background-size:24px 24px;
}


.map-pin{
    position:absolute;

    width:20px;
    height:20px;

    background:#15dce8;

    border:4px solid #ffffff;

    border-radius:50%;

    box-shadow:
    0 0 0 7px rgba(21,220,232,0.13);
}


.pin-a{
    top:42px;
    left:55px;
}


.pin-b{
    top:87px;
    right:45px;
}


.pin-c{
    bottom:30px;
    left:120px;
}


/* ---------- AI PANEL ---------- */

.hero-ai-card{
    position:absolute;

    width:190px;

    right:-20px;
    top:20px;
    z-index:6;

    padding:22px;

    border:
    1px solid rgba(151,97,255,0.65);

    border-radius:20px;

    background:
    linear-gradient(
        160deg,
        rgba(9,38,83,0.94),
        rgba(35,28,105,0.96)
    );

    box-shadow:
    0 25px 60px rgba(0,0,0,0.42),
    0 0 45px rgba(127,65,255,0.28);
}

.ai-chip{
    width:64px;
    height:64px;

    display:flex;

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

    margin:0 auto 20px;

    color:#ffffff;

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

    border:
    2px solid #7869ff;

    border-radius:15px;

    background:
    linear-gradient(
        135deg,
        #174dff,
        #8b43ff
    );

    box-shadow:
    0 0 30px rgba(104,79,255,0.45);
}


.ai-message{
    margin-bottom:15px;

    padding:10px 12px;

    color:#ffffff;

    font-size:11px;

    text-align:center;

    border-radius:18px;

    background:
    rgba(76,117,214,0.48);
}


.ai-option{
    margin-top:9px;

    color:#dbe6ff;

    font-size:10px;
}


/* ==========================================
   HERO SERVICES
========================================== */

.hero-services{
    position:relative;
    z-index:5;
transform:translateY(25px);
    max-width:1250px;

   margin:20px auto 0;
    display:grid;

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

    overflow:hidden;

    border:
    1px solid rgba(40,157,255,0.35);

    border-radius:18px;

    background:
    rgba(7,29,57,0.76);

    backdrop-filter:
    blur(12px);

    box-shadow:
    0 18px 50px rgba(0,0,0,0.18);
}


.hero-service-card{
    display:flex;

    align-items:center;

    gap:18px;

    min-height:105px;

    padding:18px 20px;

    border-right:
    1px solid rgba(255,255,255,0.09);

    transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.hero-service-card:last-child{
    border-right:none;
}


.hero-service-card:hover{
    background:
    rgba(22,217,197,0.06);
}


.hero-service-icon{
    min-width:62px;
    height:62px;

    display:flex;

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

    color:#15e0e7;

    font-size:27px;

    border:
    1px solid rgba(20,221,234,0.55);

    border-radius:50%;

    background:
    rgba(7,30,59,0.70);

    box-shadow:
    0 0 25px rgba(15,213,231,0.08);
}


.hero-ai-icon{
    color:#d37cff;

    border-color:
    rgba(164,83,255,0.65);

    font-size:20px;
    font-weight:800;
}


.hero-service-card h3{
    margin-bottom:7px;

    color:#ffffff;

    font-size:17px;
}


.hero-service-card p{
    color:#aebed0;

    font-size:12px;
    line-height:1.55;
}


/* ==========================================
   HERO MOTTO
========================================== */

.hero-motto{
    position:relative;
    z-index:4;
transform:translateY(25px);
    max-width:850px;

     margin:16px auto 0;

    display:flex;

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

    gap:25px;

    color:#d5deea;

    font-size:17px;

    letter-spacing:7px;
}


.hero-motto i{
    color:#20dbe8;

    font-style:normal;

    letter-spacing:0;
}


.hero-motto i:nth-of-type(3){
    color:#9d62ff;
}

/* ==========================================
   GENERAL SECTIONS
========================================== */

section{
    padding:100px 25px;
}

section h2{
    max-width:1200px;
    margin:0 auto 30px;

    font-size:42px;
}
/* ==========================================
   SERVICES SECTION
========================================== */

.services-section{
    background:#0a1626;
}

.section-container{
    max-width:1200px;
    margin:auto;
}

.section-tag{
    color:#16d9c5;

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

    letter-spacing:2px;

    margin-bottom:12px;
}

.section-container h2{
    margin:0 0 18px;

    font-size:42px;
}

.section-intro{
    max-width:720px;

    color:#aebdcb;

    font-size:18px;

    margin-bottom:45px;
}


/* ---------- SERVICE GRID ---------- */

.services-grid{
    display:grid;

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

    gap:22px;
}


/* ---------- SERVICE CARD ---------- */

.service-card{
    padding:30px;

    background:#102238;

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

    border-radius:16px;

    transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card:hover{
    transform:translateY(-7px);

    border-color:
    rgba(22,217,197,0.55);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.25);
}

.service-icon{
    width:52px;
    height:52px;

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

    margin-bottom:20px;

    background:
    rgba(22,217,197,0.10);

    border-radius:12px;

    font-size:25px;
}

.service-card h3{
    margin-bottom:12px;

    font-size:21px;
}

.service-card p{
    color:#aebdcb;

    font-size:15px;

    line-height:1.7;
}
/* ==========================================
   GIS SECTION
========================================== */

.gis-section{
    background:#07111f;
}

.gis-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
}


/* ---------- GIS TEXT ---------- */

.gis-content h2{
    margin:0 0 18px;
    font-size:46px;
}

.gis-features{
    display:grid;
    gap:18px;

    margin:30px 0 35px;
}

.gis-feature{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.gis-feature span{
    min-width:30px;
    height:30px;

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

    background:rgba(22,217,197,0.12);

    color:#16d9c5;

    border-radius:50%;

    font-weight:700;
}

.gis-feature p{
    color:#c0ccd7;
    line-height:1.7;
}


/* ---------- GIS MAP CARD ---------- */

.gis-map-card{
    background:#0d1d30;

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

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 30px 70px rgba(0,0,0,0.35);
}

.gis-map-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:24px;

    border-bottom:1px solid rgba(255,255,255,0.07);
}

.gis-map-header h3{
    margin-top:5px;
    font-size:22px;
}

.live-badge{
    padding:7px 12px;

    background:rgba(22,217,197,0.12);

    color:#16d9c5;

    border:1px solid rgba(22,217,197,0.25);

    border-radius:20px;

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

    letter-spacing:1px;
}


/* ---------- FAKE MAP ---------- */

.gis-map-preview{
    height:390px;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #16314b,
        #0c2134
    );
}

.map-grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,0.04) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 1px,
        transparent 1px
    );

    background-size:35px 35px;
}


/* ---------- SERVICE ZONES ---------- */

.service-zone{
    position:absolute;

    border-radius:50%;

    border:2px solid rgba(22,217,197,0.55);

    background:rgba(22,217,197,0.10);
}

.zone-one{
    width:210px;
    height:210px;

    top:70px;
    left:70px;
}

.zone-two{
    width:130px;
    height:130px;

    bottom:45px;
    right:60px;

    border-color:rgba(91,141,239,0.55);

    background:rgba(91,141,239,0.10);
}


/* ---------- MAP PINS ---------- */

.business-pin{
    width:20px;
    height:20px;

    position:absolute;

    background:#16d9c5;

    border:4px solid #ffffff;

    border-radius:50%;

    box-shadow:
    0 0 0 7px rgba(22,217,197,0.15);

    z-index:2;
}

.pin-one{
    top:125px;
    left:155px;
}

.pin-two{
    top:225px;
    left:245px;
}

.pin-three{
    bottom:85px;
    right:105px;
}


/* ---------- MAP INFO ---------- */

.map-info-card{
    position:absolute;

    left:22px;
    bottom:22px;

    display:flex;
    flex-direction:column;

    padding:12px 16px;

    background:rgba(7,17,31,0.88);

    backdrop-filter:blur(8px);

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

    border-radius:10px;

    z-index:3;
}

.map-info-card strong{
    font-size:13px;
}

.map-info-card span{
    color:#9fb0c0;
    font-size:12px;
}
/* ==========================================
   PROJECTS SECTION
========================================== */

.projects-section{
    background:#0a1626;
}

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


/* ---------- PROJECT CARD ---------- */

.project-card{
    background:#102238;

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

    border-radius:16px;

    overflow:hidden;

    transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.project-card:hover{
    transform:translateY(-7px);

    border-color:rgba(22,217,197,0.50);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.25);
}


/* ---------- PROJECT VISUAL ---------- */

.project-visual{
    height:210px;

    position:relative;

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

    padding:20px;
}

.project-web{
    background:
    linear-gradient(
        135deg,
        #24123d,
        #5d2aa5
    );
}
/* ---------- ADAMS SERVICE PREVIEW ---------- */

.project-adams{
    align-items:center;
    justify-content:center;

    position:relative;

    padding:25px;

    background:
    radial-gradient(
        circle at 75% 30%,
        rgba(138,63,211,0.30),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        #0a0710,
        #24123d
    );
}

.project-adams .project-type{
    position:absolute;
    top:18px;
    left:18px;

    z-index:3;
}

.project-browser{
    width:90%;

    background:#0d0d12;

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

    border-radius:10px;

    overflow:hidden;

    box-shadow:
    0 18px 40px rgba(0,0,0,0.40);
}

.project-browser-top{
    height:30px;

    display:flex;
    align-items:center;

    gap:6px;

    padding:0 10px;

    background:#17141d;
}

.project-browser-top span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#8a3fd3;
}

.project-browser-top span:nth-child(2){
    opacity:0.65;
}

.project-browser-top span:nth-child(3){
    opacity:0.35;
}

.project-browser-content{
    padding:22px;

    background:
    linear-gradient(
        135deg,
        #09090d,
        #1d1028
    );
}

.project-browser-logo{
    color:#ffffff;

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

    letter-spacing:1px;

    margin-bottom:18px;
}

.project-browser-line{
    height:8px;

    background:#3c2b48;

    border-radius:20px;

    margin-bottom:9px;
}

.line-large{
    width:85%;
}

.line-medium{
    width:60%;
}

.project-browser-button{
    width:max-content;

    margin-top:18px;

    padding:8px 12px;

    background:#8a3fd3;

    color:#ffffff;

    border-radius:6px;

    font-size:9px;
    font-weight:700;
}
.project-gis{
    background:
    linear-gradient(
        135deg,
        #0d3a47,
        #167f88
    );
}
/* ---------- PROJECT GIS MAP PREVIEW ---------- */

.project-gis-map{
    align-items:center;
    justify-content:center;

    padding:28px;

    position:relative;
}

.project-gis-map .project-type{
    position:absolute;
    top:18px;
    left:18px;

    z-index:5;
}

.mini-map{
    width:88%;
    height:155px;

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #12374a,
        #0b2836
    );

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

    box-shadow:
    0 16px 35px rgba(0,0,0,0.25);
}

.mini-grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,0.05) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 1px,
        transparent 1px
    );

    background-size:24px 24px;
}

.mini-zone{
    position:absolute;

    border-radius:50%;

    border:2px solid rgba(22,217,197,0.65);

    background:rgba(22,217,197,0.12);
}

.zone-a{
    width:105px;
    height:105px;

    top:24px;
    left:42px;
}

.zone-b{
    width:75px;
    height:75px;

    right:38px;
    bottom:20px;

    border-color:rgba(91,141,239,0.65);

    background:rgba(91,141,239,0.12);
}

.mini-pin{
    width:14px;
    height:14px;

    position:absolute;

    z-index:3;

    background:#16d9c5;

    border:3px solid #ffffff;

    border-radius:50%;
}

.mini-pin-one{
    top:55px;
    left:85px;
}

.mini-pin-two{
    top:95px;
    left:155px;
}

.mini-pin-three{
    right:70px;
    bottom:45px;
}

.mini-map-label{
    position:absolute;

    left:12px;
    bottom:12px;

    z-index:4;

    padding:7px 10px;

    background:rgba(7,17,31,0.82);

    border-radius:7px;

    color:#ffffff;

    font-size:10px;
    font-weight:700;
}
.project-analysis{
    background:
    linear-gradient(
        135deg,
        #15324c,
        #2d5f8c
    );
}
/* ---------- LOCATION ANALYSIS PREVIEW ---------- */

.project-analysis-visual{
    align-items:center;
    justify-content:center;

    padding:28px;

    position:relative;
}

.project-analysis-visual .project-type{
    position:absolute;

    top:18px;
    left:18px;

    z-index:5;
}

.analysis-dashboard{
    width:88%;

    display:grid;

    grid-template-columns:1.25fr 0.75fr;

    gap:14px;

    padding:18px;

    background:rgba(7,17,31,0.65);

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

    border-radius:12px;

    box-shadow:
    0 16px 35px rgba(0,0,0,0.25);
}


/* ---------- MINI CHART ---------- */

.analysis-chart{
    height:115px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:9px;

    padding:12px;

    background:#102238;

    border-radius:8px;
}

.bar{
    flex:1;

    border-radius:4px 4px 0 0;

    background:linear-gradient(
        180deg,
        #16d9c5,
        #167f88
    );
}

.bar-one{
    height:40%;
}

.bar-two{
    height:68%;
}

.bar-three{
    height:88%;
}

.bar-four{
    height:58%;
}


/* ---------- ANALYSIS STATS ---------- */

.analysis-stats{
    display:grid;

    gap:10px;
}

.analysis-stat{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:12px;

    background:#102238;

    border-radius:8px;
}

.analysis-stat strong{
    color:#16d9c5;

    font-size:17px;
}

.analysis-stat span{
    margin-top:3px;

    color:#9fb0c0;

    font-size:9px;

    line-height:1.3;
}
.project-type{
    display:inline-block;

    padding:7px 11px;

    background:rgba(7,17,31,0.80);

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

    border-radius:20px;

    color:#ffffff;

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

    letter-spacing:1px;
}


/* ---------- PROJECT CONTENT ---------- */

.project-content{
    padding:26px;
}

.project-content h3{
    font-size:22px;

    margin-bottom:12px;
}

.project-content p{
    color:#aebdcb;

    font-size:15px;

    line-height:1.7;

    margin-bottom:22px;
}


/* ---------- PROJECT TAGS ---------- */

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.project-tags span{
    padding:6px 10px;

    background:rgba(22,217,197,0.08);

    border:1px solid rgba(22,217,197,0.18);

    border-radius:20px;

    color:#9deee5;

    font-size:12px;
}
/* ---------- PROJECT LINK ---------- */

.project-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:22px;

    color:#16d9c5;

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

    transition:0.3s ease;
}

.project-link span{
    transition:transform 0.3s ease;
}

.project-link:hover{
    color:#ffffff;
}

.project-link:hover span{
    transform:translateX(5px);
}
/* ==========================================
   ABOUT SECTION
========================================== */

.about-section{
    background:#07111f;
}

.about-layout{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:70px;
}


/* ---------- ABOUT TEXT ---------- */

.about-content h2{
    margin:0 0 22px;
    font-size:46px;
}

.about-text{
    max-width:650px;
    margin-bottom:18px;

    color:#aebdcb;

    font-size:17px;
    line-height:1.8;
}


/* ---------- ABOUT POINTS ---------- */

.about-points{
    display:grid;
    gap:20px;

    margin-top:35px;
}

.about-point{
    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:20px;

    background:#0d1d30;

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

    border-radius:14px;
}

.about-point > span{
    min-width:44px;
    height:44px;

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

    background:rgba(22,217,197,0.10);

    border:1px solid rgba(22,217,197,0.20);

    border-radius:10px;

    color:#16d9c5;

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

.about-point h3{
    margin-bottom:5px;

    font-size:18px;
}

.about-point p{
    color:#9fb0c0;

    font-size:14px;
    line-height:1.6;
}


/* ---------- ABOUT VISUAL ---------- */

.about-visual{
    display:flex;
    justify-content:center;
}

.about-card{
    width:100%;
    max-width:440px;

    padding:35px;

    background:#0d1d30;

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

    border-radius:18px;

    box-shadow:
    0 30px 70px rgba(0,0,0,0.30);
}


/* ---------- CAPABILITIES ---------- */

.capability-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:25px;
    margin-bottom:9px;
}

.capability-row span{
    color:#dce6f0;

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

.capability-row strong{
    color:#16d9c5;

    font-size:13px;
}

.capability-bar{
    width:100%;
    height:7px;

    overflow:hidden;

    background:#182c42;

    border-radius:20px;
}

.capability-fill{
    height:100%;

    background:linear-gradient(
        90deg,
        #16d9c5,
        #49f1df
    );

    border-radius:20px;
}

.fill-web{
    width:100%;
}

.fill-gis{
    width:100%;
}

.fill-mobile{
    width:100%;
}

.fill-business{
    width:100%;
}
/* ==========================================
   CONTACT SECTION
========================================== */

.contact-section{
    background:#0a1626;
}

.contact-header{
    max-width:760px;
    margin-bottom:50px;
}

.contact-header h2{
    margin:0 0 18px;
    font-size:46px;
}


/* ---------- CONTACT LAYOUT ---------- */

.contact-layout{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:60px;
    align-items:start;
}


/* ---------- CONTACT INFORMATION ---------- */

.contact-info{
    padding:35px;

    background:#0d1d30;

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

    border-radius:18px;
}

.contact-info h3{
    margin-bottom:15px;

    font-size:27px;
}

.contact-info > p{
    margin-bottom:35px;

    color:#aebdcb;

    font-size:15px;
    line-height:1.8;
}


/* ---------- CONTACT METHODS ---------- */

.contact-method{
    display:flex;
    align-items:center;
    gap:16px;

    padding:18px 0;

    border-top:1px solid rgba(255,255,255,0.07);
}

.contact-icon{
    min-width:45px;
    height:45px;

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

    background:rgba(22,217,197,0.10);

    border:1px solid rgba(22,217,197,0.18);

    border-radius:10px;

    font-size:19px;
}

.contact-method div:last-child{
    display:flex;
    flex-direction:column;
}

.contact-method span{
    margin-bottom:3px;

    color:#7f94a8;

    font-size:12px;
}

.contact-method strong{
    color:#ffffff;

    font-size:14px;
}


/* ---------- CONTACT FORM CARD ---------- */

.contact-form-card{
    padding:35px;

    background:#102238;

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

    border-radius:18px;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.20);
}

.contact-form{
    display:grid;
    gap:20px;
}


/* ---------- FORM FIELDS ---------- */

.form-group{
    display:grid;
    gap:8px;
}

.form-group label{
    color:#dce6f0;

    font-size:13px;
    font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    padding:14px 15px;

    background:#0a1727;

    color:#ffffff;

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

    border-radius:9px;

    font-family:inherit;
    font-size:14px;

    outline:none;

    transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.form-group textarea{
    resize:vertical;

    min-height:140px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#6f8396;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#16d9c5;

    box-shadow:
    0 0 0 3px rgba(22,217,197,0.08);
}


/* ---------- SELECT ---------- */

.form-group select{
    cursor:pointer;
}

.form-group select option{
    background:#0a1727;
    color:#ffffff;
}


/* ---------- SUBMIT BUTTON ---------- */

.contact-submit{
    width:100%;

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

    margin-top:5px;

    padding:15px 22px;

    background:#16d9c5;

    color:#06101c;

    border:none;
    border-radius:9px;

    font-family:inherit;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.contact-submit:hover{
    background:#ffffff;

    transform:translateY(-2px);
}

.contact-submit span{
    transition:transform 0.3s ease;
}

.contact-submit:hover span{
    transform:translateX(5px);
}
/* ==========================================
   FOOTER
========================================== */

.site-footer{
    padding:70px 25px 25px;

    background:#050d17;

    border-top:1px solid rgba(255,255,255,0.07);
}

.footer-container{
    max-width:1200px;
    margin:auto;
}


/* ---------- FOOTER MAIN ---------- */

.footer-main{
    display:grid;

    grid-template-columns:1.5fr 0.75fr 0.75fr;

    gap:70px;

    padding-bottom:50px;
}


/* ---------- FOOTER BRAND ---------- */

/* ---------- FOOTER LOGO ---------- */

.footer-site-logo{
    display:inline-flex;
    align-items:center;

    margin-bottom:18px;
}

.footer-site-logo img{
    display:block;

    width:190px;
    height:auto;

    object-fit:contain;
}
.footer-brand p{
    max-width:390px;

    color:#8fa1b2;

    font-size:15px;
    line-height:1.8;
}


/* ---------- FOOTER LINKS ---------- */

.footer-links{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:11px;
}

.footer-links h3{
    margin-bottom:7px;

    color:#ffffff;

    font-size:15px;
}

.footer-links a{
    color:#8fa1b2;

    font-size:14px;

    transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.footer-links a:hover{
    color:#16d9c5;

    transform:translateX(4px);
}


/* ---------- FOOTER BOTTOM ---------- */

.footer-bottom{
    display:flex;

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

    gap:20px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,0.07);
}

.footer-bottom p{
    color:#6f8396;

    font-size:13px;
}

.footer-bottom a{
    color:#16d9c5;

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

    transition:0.3s ease;
}

.footer-bottom a:hover{
    color:#ffffff;
}

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

.menu-toggle{
    display:none;

    width:42px;
    height:42px;

    padding:8px;

    background:transparent;

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

    border-radius:9px;

    cursor:pointer;
}

.menu-toggle span{
    display:block;

    width:100%;
    height:2px;

    margin:5px 0;

    background:#ffffff;

    border-radius:10px;

    transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

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

.menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}
/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

   .menu-toggle{
    display:block;
}

.navbar{
    position:relative;
}

.nav-links{
    position:absolute;

    top:76px;
    left:25px;
    right:25px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:0;

    padding:18px;

    background:#0d1d30;

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

    border-radius:14px;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.30);

    opacity:0;
    visibility:hidden;

    transform:translateY(-10px);

    transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.nav-links.active{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.nav-links li{
    width:100%;
}

.nav-links a{
    display:block;

    width:100%;

    padding:13px 8px;

    border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-links li:last-child a{
    border-bottom:none;
}
   .footer-main{
    grid-template-columns:1fr 1fr;
}

.footer-brand{
    grid-column:1 / -1;
}
   .about-layout{
    grid-template-columns:1fr;
}

.about-visual{
    margin-top:20px;
}

.about-card{
    max-width:100%;
}
   .projects-grid{
    grid-template-columns:1fr 1fr;
}
.gis-layout{
    grid-template-columns:1fr;
}

.gis-demo{
    margin-top:20px;
}
    .services-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    

    .navbar{
        gap:14px;
    }

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

    .hero-content{
        grid-template-columns:1fr;
    }

    .hero-visual{
        margin-top:30px;
    }

}


@media(max-width:600px){
   

   .footer-site-logo img{
    width:160px;
}
  .site-logo img{
    width:125px;
}
   .site-footer{
    padding-top:55px;
}

.footer-main{
    grid-template-columns:1fr;

    gap:35px;
}

.footer-brand{
    grid-column:auto;
}

.footer-bottom{
    flex-direction:column;

    align-items:flex-start;
}
   .about-content h2{
    font-size:34px;
}

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

.about-point{
    padding:17px;
}

.about-card{
    padding:25px;
}
   .project-browser{
    width:100%;
}

.project-browser-content{
    padding:16px;
}
   .projects-grid{
    grid-template-columns:1fr;
}

.project-visual{
    height:190px;
}
.gis-content h2{
    font-size:34px;
}

.gis-map-preview{
    height:320px;
}

.zone-one{
    width:170px;
    height:170px;
    left:35px;
}

.zone-two{
    width:105px;
    height:105px;
    right:30px;
}

.pin-one{
    left:110px;
}

.pin-two{
    left:190px;
}
    .services-grid{
        grid-template-columns:1fr;
    }

    .service-card{
        padding:24px;
    }

    .section-container h2{
        font-size:34px;
    }

    .section-intro{
        font-size:16px;
    }

    .nav-btn{
        display:none;
    }

   

    section h2{
        font-size:34px;
    }
/* ==========================================
   COMPACT MOBILE HERO
========================================== */

.hero-network{
    display:none;
}

.hero{
    min-height:auto;

    padding:
    145px 18px
    32px;

    background-position:center top;
}

.hero-content{
    transform:none;

    grid-template-columns:1fr;

    gap:18px;
}

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

.hero-badge{
    max-width:100%;

    margin-bottom:18px;

    padding:8px 12px;

    font-size:9px;
    line-height:1.4;

    white-space:nowrap;
}

.hero h1 br{
    display:none;
}

.hero h1{
    max-width:100%;

    margin-bottom:20px;

    font-size:33px;
    font-weight:500;

    line-height:1.12;
    letter-spacing:-1px;
}

.hero-text{
    max-width:100%;

    margin-bottom:20px;

    font-size:15px;
    line-height:1.55;
}

.hero-buttons{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.hero-buttons .btn{
    width:100%;

    min-height:48px;

    padding:0 8px;

    font-size:12px;
}

.hero-visual{
    min-height:0;

    margin-top:14px;

    padding-bottom:0;
}

.hero-solutions-image{
    display:block;

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

    margin:0 auto;

    transform:none;
}


/* ==========================================
   MOBILE HERO SERVICE CARDS
========================================== */

.hero-services{
    grid-template-columns:
    repeat(2, 1fr);

    gap:10px;

    margin:18px 0 0;

    transform:none;

    overflow:visible;

    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
}


.hero-service-card{
    min-height:120px;

    padding:14px;

    flex-direction:column;

    align-items:flex-start;
    justify-content:flex-start;

    gap:10px;

    border:
    1px solid rgba(40,157,255,0.28) !important;

    border-radius:14px;

    background:
    rgba(7,29,57,0.82);
}


.hero-service-icon{
    min-width:44px;
    width:44px;
    height:44px;

    font-size:20px;
}


.hero-ai-icon{
    font-size:16px;
}


.hero-service-card h3{
    margin-bottom:4px;

    font-size:14px;
}


.hero-service-card p{
    font-size:10.5px;
    line-height:1.45;
}


/* closes @media(max-width:600px) */
   /* ==========================================
   MOBILE HERO MOTTO
========================================== */

.hero-motto{
    transform:none;

    max-width:100%;

    margin:18px auto 0;

    gap:8px;

    flex-wrap:wrap;

    font-size:11px;

    letter-spacing:3px;

    line-height:1.4;
}

.hero-motto i{
    font-size:10px;
}
   /* ==========================================
   MOBILE SERVICES SECTION
========================================== */

.services-section{
    padding-top:70px;
    padding-bottom:70px;
}

.services-grid{
    gap:14px;
}

.service-card{
    padding:20px;
}

.service-icon{
    width:46px;
    height:46px;

    margin-bottom:14px;

    font-size:22px;
}

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

.service-card p{
    font-size:14px;
    line-height:1.6;
}
   /* ==========================================
   MOBILE GIS SECTION
========================================== */

.gis-section{
    padding-top:70px;
    padding-bottom:70px;
}

.gis-layout{
    grid-template-columns:1fr;
    gap:30px;
}

.gis-content h2{
    font-size:34px;
    line-height:1.2;
}

.gis-features{
    gap:14px;
    margin:24px 0 28px;
}

.gis-feature{
    gap:12px;
}

.gis-feature p{
    font-size:14px;
    line-height:1.6;
}

.gis-map-card{
    border-radius:14px;
}

.gis-map-header{
    padding:18px;
}

.gis-map-header h3{
    font-size:18px;
}

.gis-map-preview{
    height:300px;
}
   /* ==========================================
   MOBILE PROJECTS SECTION
========================================== */

.projects-section{
    padding-top:70px;
    padding-bottom:70px;
}

.projects-grid{
    grid-template-columns:1fr;
    gap:18px;
}

.project-card{
    border-radius:14px;
    overflow:hidden;
}

.project-content{
    padding:20px;
}

.project-content h3{
    font-size:19px;
    line-height:1.3;
}

.project-content p{
    font-size:14px;
    line-height:1.6;
}

.project-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:16px;

    font-size:14px;
}
   /* ==========================================
   MOBILE ABOUT SECTION
========================================== */

.about-section{
    padding-top:70px;
    padding-bottom:70px;
}

.about-layout{
    grid-template-columns:1fr;
    gap:30px;
}

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

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

.about-card{
    padding:20px;
    border-radius:14px;
}
   /* ==========================================
   MOBILE CONTACT SECTION
========================================== */

.contact-section{
    padding-top:70px;
    padding-bottom:70px;
}

.contact-layout{
    grid-template-columns:1fr;
    gap:30px;
}

.contact-content h2{
    font-size:32px;
    line-height:1.2;
}

.contact-content p{
    font-size:14px;
    line-height:1.7;
}

.contact-form{
    width:100%;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;
    font-size:14px;
}

.contact-form textarea{
    min-height:140px;
}

.contact-form button{
    width:100%;
    min-height:50px;
}
   /* ==========================================
   MOBILE FOOTER
========================================== */

.footer{
    padding:50px 20px 25px;
}

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

.footer-logo{
    justify-content:center;
}

.footer-logo img{
    max-width:150px;
}

.footer-links{
    justify-content:center;
}

.footer-bottom{
    margin-top:30px;
    padding-top:20px;

    text-align:center;

    font-size:12px;
    line-height:1.6;
}
}
/* ==========================================
   WEB DESIGN PAGE
========================================== */

.subpage-hero{
    position:relative;

    min-height:620px;

    display:flex;
    align-items:center;

    padding:150px 55px 90px;

    background:
    radial-gradient(
        circle at 75% 40%,
        rgba(0,210,255,0.15),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        #06101d 0%,
        #091a2e 55%,
        #07111f 100%
    );
}

.subpage-hero-content{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
.web-page .subpage-hero{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:50px;
}

.web-hero-visual{
    width:100%;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
.web-hero-visual{
    width:100%;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* ---------- WEB HERO TRANSPARENT IMAGE ---------- */

.web-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}

.subpage-hero h1{
    max-width:760px;

    margin:14px 0 24px;

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

    font-size:64px;
    font-weight:500;

    line-height:1.05;
    letter-spacing:-2px;

    color:#ffffff;
}

.subpage-hero-content > p:not(.section-tag){
    max-width:680px;

    margin-bottom:30px;

    font-size:18px;
    line-height:1.7;

    color:#b9c7d8;
}


/* WEB SERVICES */

.web-services-section{
    padding:100px 0;

    background:#081524;
}


/* WHY CB WEB & GIS */

.web-benefits-section{
    padding:100px 0;

    background:#06101d;
}


/* FINAL CTA */

.web-cta-section{
    padding:90px 0;

    background:#081524;
}

.web-cta-card{
    max-width:950px;

    margin:0 auto;

    padding:65px 50px;

    text-align:center;

    border:
    1px solid rgba(40,157,255,0.28);

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        rgba(13,42,70,0.95),
        rgba(15,27,53,0.95)
    );

    box-shadow:
    0 25px 70px rgba(0,0,0,0.25);
}

.web-cta-card h2{
    max-width:700px;

    margin:10px auto 20px;

    font-size:42px;
    line-height:1.15;
}

.web-cta-card p{
    max-width:650px;

    margin:0 auto 28px;

    color:#b9c7d8;

    font-size:16px;
    line-height:1.7;
}
/* ==========================================
   WEB DESIGN PAGE - MOBILE
========================================== */

@media(max-width:600px){

    .subpage-hero{
        min-height:auto;

        padding:
        135px 20px
        70px;
    }

    .subpage-hero h1{
        max-width:100%;

        margin:12px 0 20px;

        font-size:38px;
        line-height:1.08;

        letter-spacing:-1.2px;
    }

    .subpage-hero-content > p:not(.section-tag){
        max-width:100%;

        margin-bottom:24px;

        font-size:15px;
        line-height:1.65;
    }


    .web-services-section,
    .web-benefits-section{
        padding:70px 0;
    }


    .web-cta-section{
        padding:70px 0;
    }

    .web-cta-card{
        padding:36px 20px;

        border-radius:16px;
    }

    .web-cta-card h2{
        font-size:30px;
        line-height:1.15;
    }

    .web-cta-card p{
        font-size:14px;
        line-height:1.65;
    }

}
/* ==========================================
   GIS PAGE VISUAL IDENTITY
========================================== */

.gis-page .subpage-hero{
    background:
    radial-gradient(
        circle at 75% 40%,
        rgba(50,255,180,0.18),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        #061611 0%,
        #0a2a22 55%,
        #07111f 100%
    );
}

.gis-page .section-tag{
    color:#63e6be;
}

.gis-page .service-card{
    border:
    1px solid rgba(99,230,190,0.28);

    background:
    linear-gradient(
        145deg,
        rgba(8,36,31,0.95),
        rgba(7,24,29,0.95)
    );
}

.gis-page .service-icon{
    background:
    rgba(99,230,190,0.12);

    border:
    1px solid rgba(99,230,190,0.30);
}

.gis-page .web-benefits-section{
    background:#071a17;
}

.gis-page .web-cta-card{
    border:
    1px solid rgba(99,230,190,0.30);

    background:
    linear-gradient(
        135deg,
        rgba(10,55,45,0.96),
        rgba(8,30,37,0.96)
    );
}
/* ==========================================
   AI PAGE VISUAL IDENTITY
========================================== */

.ai-page .subpage-hero{
    background:
    radial-gradient(
        circle at 78% 38%,
        rgba(156, 74, 255, 0.25),
        transparent 32%
    ),
    radial-gradient(
        circle at 65% 70%,
        rgba(39, 125, 255, 0.15),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #0b0718 0%,
        #171033 52%,
        #071426 100%
    );
}

.ai-page .section-tag{
    color:#b983ff;
}

.ai-page .web-services-section{
    background:#0c091b;
}

.ai-page .service-card{
    border:
    1px solid rgba(174, 111, 255, 0.30);

    background:
    linear-gradient(
        145deg,
        rgba(31, 19, 59, 0.96),
        rgba(11, 22, 43, 0.96)
    );

    box-shadow:
    0 18px 45px rgba(0,0,0,0.20);
}

.ai-page .service-icon{
    background:
    linear-gradient(
        135deg,
        rgba(166, 91, 255, 0.20),
        rgba(39, 125, 255, 0.18)
    );

    border:
    1px solid rgba(174, 111, 255, 0.35);
}

.ai-page .service-card:hover{
    transform:translateY(-6px);

    border-color:
    rgba(185, 131, 255, 0.65);

    box-shadow:
    0 22px 55px rgba(91, 54, 180, 0.20);
}
/* ==========================================
   AI PAGE CTA
========================================== */

.ai-page .web-benefits-section{
    background:#100c22;
}

.ai-page .web-cta-section{
    background:#090817;
}

.ai-page .web-cta-card{
    border:
    1px solid rgba(174,111,255,0.38);

    background:
    radial-gradient(
        circle at 80% 20%,
        rgba(89,91,255,0.22),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        rgba(46,24,82,0.97),
        rgba(12,25,52,0.97)
    );

    box-shadow:
    0 25px 70px rgba(72,38,145,0.25);
}

.ai-page .web-cta-card .primary-btn{
    background:
    linear-gradient(
        135deg,
        #8b5cf6,
        #3b82f6
    );

    border-color:transparent;
}

.ai-page .web-cta-card .primary-btn:hover{
    transform:translateY(-2px);

    box-shadow:
    0 12px 30px rgba(111,76,255,0.35);
}
/* ==========================================
   PROJECTS PAGE VISUAL IDENTITY
========================================== */

.projects-page .subpage-hero{
    background:
    radial-gradient(
        circle at 78% 35%,
        rgba(255, 184, 77, 0.18),
        transparent 32%
    ),
    linear-gradient(
        135deg,
        #171108 0%,
        #2a1b0d 52%,
        #07111f 100%
    );
}

.projects-page .section-tag{
    color:#ffbe63;
}

.featured-projects-section{
    padding:100px 0;
    background:#0a121d;
}

.featured-case-study{
    margin-top:40px;

    display:grid;
    grid-template-columns:1.05fr 0.95fr;

    gap:45px;

    align-items:center;
}

.case-study-visual{
    min-height:430px;

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

    padding:35px;

    border-radius:22px;

    background:
    linear-gradient(
        145deg,
        rgba(35,25,13,0.95),
        rgba(8,24,36,0.95)
    );

    border:
    1px solid rgba(255,190,99,0.28);
}

.case-study-browser{
    width:100%;
    max-width:620px;

    overflow:hidden;

    border-radius:16px;

    background:#101722;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.35);
}

.case-browser-top{
    display:flex;
    gap:8px;

    padding:14px 16px;

    background:#161f2c;
}

.case-browser-top span{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#546174;
}

.case-browser-screen{
    min-height:320px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    padding:35px;

    background:
    radial-gradient(
        circle at center,
        rgba(126,65,180,0.28),
        transparent 42%
    ),
    linear-gradient(
        145deg,
        #090d14,
        #1a1024
    );
}

.case-label{
    margin-bottom:20px;

    font-size:11px;
    letter-spacing:3px;

    color:#ffbe63;
}

.case-browser-screen h3{
    margin-bottom:8px;

    font-size:34px;

    color:#ffffff;
}

.case-browser-screen p{
    margin-bottom:25px;

    color:#b8c3d1;
}

.case-demo-button{
    padding:11px 22px;

    border-radius:8px;

    background:#7c3fb3;

    color:#ffffff;

    font-size:12px;
    font-weight:700;
}

.case-study-content h2{
    margin:10px 0 20px;

    font-size:42px;
    line-height:1.15;
}

.case-study-content > p{
    margin-bottom:16px;

    color:#b9c7d8;

    line-height:1.7;
}

.case-study-features{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    margin:28px 0;
}

.case-study-features span{
    color:#dfe8f2;

    font-size:14px;
}
/* ==========================================
   PROJECTS PAGE - MOBILE
========================================== */

@media(max-width:600px){

    .featured-projects-section{
        padding:70px 0;
    }

    .featured-case-study{
        grid-template-columns:1fr;
        gap:28px;
        margin-top:30px;
    }

    .case-study-visual{
        min-height:auto;
        padding:20px;
        border-radius:16px;
    }

    .case-browser-screen{
        min-height:240px;
        padding:24px 16px;
    }

    .case-browser-screen h3{
        font-size:26px;
    }

    .case-study-content h2{
        font-size:30px;
        line-height:1.15;
    }

    .case-study-content > p{
        font-size:14px;
        line-height:1.65;
    }

    .case-study-features{
        grid-template-columns:1fr;
        gap:10px;
        margin:22px 0;
    }

    .case-study-features span{
        font-size:13px;
    }

}
/* ==========================================
   PROJECTS - GIS CASE STUDY
========================================== */

.gis-case-study{
    margin-top:80px;
}

.gis-project-screen{
    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        rgba(5,35,38,0.82),
        rgba(5,25,35,0.92)
    ),
    repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 39px,
        rgba(78,220,185,0.10) 40px
    ),
    repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 39px,
        rgba(78,220,185,0.10) 40px
    );
}

.gis-project-screen .case-label{
    color:#63e6be;
}

.case-map-demo{
    position:relative;

    width:220px;
    height:100px;

    margin-top:8px;

    border:
    1px solid rgba(99,230,190,0.35);

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(99,230,190,0.18),
        rgba(99,230,190,0.03) 65%,
        transparent 70%
    );
}

.map-dot{
    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#63e6be;

    box-shadow:
    0 0 18px rgba(99,230,190,0.8);
}

.dot-one{
    left:28%;
    top:35%;
}

.dot-two{
    left:58%;
    top:55%;
}

.dot-three{
    left:72%;
    top:25%;
}

.gis-case-study .case-study-visual{
    border-color:
    rgba(99,230,190,0.30);

    background:
    linear-gradient(
        145deg,
        rgba(7,40,34,0.96),
        rgba(7,24,35,0.96)
    );
}
/* ==========================================
   PROJECTS - LOCATION ANALYSIS CASE STUDY
========================================== */

.analysis-case-study{
    margin-top:80px;
}

.analysis-case-study .case-study-visual{
    border-color:rgba(255,190,99,0.30);

    background:
    linear-gradient(
        145deg,
        rgba(48,31,14,0.96),
        rgba(15,22,34,0.96)
    );
}

.analysis-project-screen{
    background:
    radial-gradient(
        circle at 50% 60%,
        rgba(255,190,99,0.16),
        transparent 45%
    ),
    linear-gradient(
        145deg,
        #15100a,
        #101827
    );
}

.analysis-project-screen .case-label{
    color:#ffbe63;
}


/* ANALYSIS CHART */

.analysis-demo{
    width:240px;
    height:110px;

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

    gap:14px;

    margin-top:18px;
    padding:15px 20px;

    border-left:1px solid rgba(255,255,255,0.18);
    border-bottom:1px solid rgba(255,255,255,0.18);
}

.analysis-bar{
    width:30px;

    border-radius:5px 5px 0 0;

    background:
    linear-gradient(
        180deg,
        #ffcf75,
        #d88928
    );

    box-shadow:
    0 0 18px rgba(255,190,99,0.18);
}

.bar-a{
    height:38%;
}

.bar-b{
    height:68%;
}

.bar-c{
    height:52%;
}

.bar-d{
    height:88%;
}


/* MOBILE */

@media(max-width:600px){

    .gis-case-study,
    .analysis-case-study{
        margin-top:55px;
    }

    .analysis-demo{
        width:200px;
        height:95px;
        gap:10px;
    }

    .analysis-bar{
        width:25px;
    }

}
/* ==========================================
   ABOUT PAGE VISUAL IDENTITY
========================================== */

.about-page .subpage-hero{
    background:
    radial-gradient(
        circle at 78% 35%,
        rgba(190, 242, 100, 0.22),
        transparent 32%
    ),
    radial-gradient(
        circle at 60% 75%,
        rgba(132, 160, 67, 0.14),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #0d1009 0%,
        #1b2410 48%,
        #293417 75%,
        #0c1110 100%
    );
}

.about-page .section-tag{
    color:#bef264;
}


/* WHO WE ARE */

.about-story-section{
    padding:100px 0;
    background:#081524;
}

.about-story-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
    align-items:start;
}

.about-story-heading h2{
    margin-top:12px;
    max-width:460px;
    font-size:46px;
    line-height:1.12;
}

.about-story-content{
    max-width:700px;
}

.about-story-content p{
    margin-bottom:20px;
    color:#b9c7d8;
    font-size:17px;
    line-height:1.8;
}


/* MOBILE */

@media(max-width:600px){

    .about-story-section{
        padding:70px 0;
    }

    .about-story-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

    .about-story-heading h2{
        font-size:32px;
        line-height:1.15;
    }

    .about-story-content p{
        font-size:14px;
        line-height:1.7;
    }

}
/* ==========================================
   ABOUT PAGE - STRENGTH CARDS
========================================== */

.about-strengths-section{
    padding:100px 0;
    background:#06101d;
}

.about-strengths-section h2{
    max-width:760px;
    margin:12px 0 18px;
    font-size:44px;
    line-height:1.15;
}

.about-strengths-section .section-intro{
    max-width:760px;
    color:#b9c7d8;
}

.about-strengths-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:40px;
}

.about-strength-card{
    padding:32px;
    border-radius:18px;
    min-height:290px;
    transition:transform 0.25s ease,
               box-shadow 0.25s ease;
}

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

.about-strength-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    border-radius:14px;
    font-size:24px;
}

.about-strength-card h3{
    margin-bottom:14px;
    font-size:23px;
}

.about-strength-card p{
    color:#b9c7d8;
    font-size:15px;
    line-height:1.7;
}


/* WEB CARD */

.web-strength{
    border:1px solid rgba(50,210,255,0.28);
    background:
    linear-gradient(
        145deg,
        rgba(8,34,48,0.96),
        rgba(8,21,35,0.96)
    );
}

.web-strength .about-strength-icon{
    background:rgba(50,210,255,0.12);
    border:1px solid rgba(50,210,255,0.28);
}


/* GIS CARD */

.gis-strength{
    border:1px solid rgba(99,230,190,0.28);
    background:
    linear-gradient(
        145deg,
        rgba(8,38,31,0.96),
        rgba(8,24,29,0.96)
    );
}

.gis-strength .about-strength-icon{
    background:rgba(99,230,190,0.12);
    border:1px solid rgba(99,230,190,0.28);
}


/* AI CARD */

.ai-strength{
    border:1px solid rgba(174,111,255,0.30);
    background:
    linear-gradient(
        145deg,
        rgba(33,20,59,0.96),
        rgba(11,22,43,0.96)
    );
}

.ai-strength .about-strength-icon{
    background:rgba(174,111,255,0.14);
    border:1px solid rgba(174,111,255,0.30);
}


/* MOBILE */

@media(max-width:600px){

    .about-strengths-section{
        padding:70px 0;
    }

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

    .about-strengths-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:30px;
    }

    .about-strength-card{
        min-height:auto;
        padding:24px;
    }

}
/* ==========================================
   CONTACT PAGE
========================================== */

.contact-page .subpage-hero{
    background:
    radial-gradient(
        circle at 78% 35%,
        rgba(255, 112, 67, 0.28),
        transparent 32%
    ),
    radial-gradient(
        circle at 62% 75%,
        rgba(255, 179, 71, 0.16),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #16090d 0%,
        #35121b 48%,
        #3b1c12 75%,
        #10101a 100%
    );
}

.contact-page .section-tag{
    color:#ffb347;
}

/* CONTACT FORM SECTION */

.contact-form-section{
    padding:100px 0;
    background:#07111f;
}

.contact-page-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:70px;
    align-items:start;
}


/* LEFT SIDE */

.contact-page-info h2{
    max-width:450px;
    margin:12px 0 22px;
    font-size:46px;
    line-height:1.12;
}

.contact-page-info > p{
    max-width:520px;
    color:#b9c7d8;
    font-size:16px;
    line-height:1.8;
}

.contact-service-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:32px;
}

.contact-service-list span{
    padding:15px 18px;

    border:
    1px solid rgba(85,223,255,0.18);

    border-radius:10px;

    background:
    rgba(11,31,50,0.65);

    color:#dce8f3;
}


/* FORM */

.contact-page .contact-form{
    padding:38px;

    border:
    1px solid rgba(85,223,255,0.24);

    border-radius:20px;

    background:
    linear-gradient(
        145deg,
        rgba(10,29,48,0.96),
        rgba(8,20,35,0.96)
    );

    box-shadow:
    0 25px 60px rgba(0,0,0,0.25);
}

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

.contact-page .form-group label{
    display:block;
    margin-bottom:8px;

    color:#dce8f3;

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

.contact-page .form-group input,
.contact-page .form-group select,
.contact-page .form-group textarea{
    width:100%;

    padding:14px 16px;

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

    border-radius:9px;

    outline:none;

    background:#091725;

    color:#ffffff;

    font-family:inherit;
    font-size:14px;

    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-page .form-group textarea{
    resize:vertical;
}

.contact-page .form-group input:focus,
.contact-page .form-group select:focus,
.contact-page .form-group textarea:focus{
    border-color:#55dfff;

    box-shadow:
    0 0 0 3px rgba(85,223,255,0.08);
}

.contact-page .form-group input::placeholder,
.contact-page .form-group textarea::placeholder{
    color:#718096;
}

.contact-submit{
    width:100%;
    justify-content:center;
    margin-top:5px;
}


/* MOBILE */

@media(max-width:600px){

    .contact-form-section{
        padding:70px 0;
    }

    .contact-page-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contact-page-info h2{
        font-size:32px;
    }

    .contact-page-info > p{
        font-size:14px;
        line-height:1.7;
    }

    .contact-service-list{
        margin-top:25px;
    }

    .contact-service-list span{
        padding:13px 15px;
        font-size:13px;
    }

    .contact-page .contact-form{
        padding:24px 18px;
        border-radius:16px;
    }

}
/* ==========================================
   THANK YOU PAGE
========================================== */

.thank-you-section{
    min-height:100vh;

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

    padding:140px 20px 70px;

    background:
    radial-gradient(
        circle at 50% 35%,
        rgba(85,223,255,0.16),
        transparent 30%
    ),
    radial-gradient(
        circle at 70% 65%,
        rgba(126,65,180,0.14),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        #06101d 0%,
        #0b1d31 55%,
        #07111f 100%
    );
}

.thank-you-card{
    width:100%;
    max-width:760px;

    padding:60px 45px;

    text-align:center;

    border:
    1px solid rgba(85,223,255,0.24);

    border-radius:24px;

    background:
    linear-gradient(
        145deg,
        rgba(10,29,48,0.96),
        rgba(9,18,33,0.96)
    );

    box-shadow:
    0 30px 80px rgba(0,0,0,0.28);
}

.thank-you-icon{
    width:74px;
    height:74px;

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

    margin:0 auto 22px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #55dfff,
        #6e7cff
    );

    color:#ffffff;

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

    box-shadow:
    0 0 30px rgba(85,223,255,0.25);
}

.thank-you-card h1{
    margin:10px 0 18px;

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

    font-size:54px;
    font-weight:500;

    line-height:1.08;
}

.thank-you-card > p:not(.section-tag){
    max-width:570px;

    margin:0 auto 30px;

    color:#b9c7d8;

    font-size:16px;
    line-height:1.75;
}

.thank-you-card .hero-buttons{
    justify-content:center;
}


/* MOBILE */

@media(max-width:600px){

    .thank-you-section{
        padding:120px 18px 50px;
    }

    .thank-you-card{
        padding:40px 20px;
        border-radius:18px;
    }

    .thank-you-icon{
        width:62px;
        height:62px;
        font-size:28px;
    }

    .thank-you-card h1{
        font-size:38px;
    }

    .thank-you-card > p:not(.section-tag){
        font-size:14px;
        line-height:1.7;
    }

}
/* CONTACT HERO BUTTON */

.contact-page .contact-hero .primary-btn{
    background:
    linear-gradient(
        135deg,
        #ff7a45,
        #ffb347
    );

    color:#1b0d08;

    box-shadow:
    0 15px 35px rgba(255,122,69,0.22);
}

.contact-page .contact-hero .primary-btn:hover{
    background:
    linear-gradient(
        135deg,
        #ff8d5c,
        #ffc166
    );

    box-shadow:
    0 20px 45px rgba(255,122,69,0.32);
}
/* CONTACT HERO SECONDARY BUTTON */

.contact-page .contact-hero .secondary-btn{
    border-color:rgba(255,179,71,0.35);

    background:rgba(38,13,17,0.55);
}

.contact-page .contact-hero .secondary-btn:hover{
    border-color:#ffb347;

    background:rgba(255,179,71,0.08);

    box-shadow:
    0 12px 30px rgba(255,122,69,0.12);
}
/* ABOUT HERO PRIMARY BUTTON */

.about-page .subpage-hero .primary-btn{
    background:
    linear-gradient(
        135deg,
        #a3e635,
        #bef264
    );

    color:#101508;

    box-shadow:
    0 15px 35px rgba(190,242,100,0.20);
}

.about-page .subpage-hero .primary-btn:hover{
    background:
    linear-gradient(
        135deg,
        #bef264,
        #d9f99d
    );

    box-shadow:
    0 20px 45px rgba(190,242,100,0.30);
}
/* ABOUT HERO SECONDARY BUTTON */

.about-page .subpage-hero .secondary-btn{
    border-color:rgba(190,242,100,0.35);

    background:rgba(22,30,12,0.55);
}

.about-page .subpage-hero .secondary-btn:hover{
    border-color:#bef264;

    background:rgba(190,242,100,0.08);

    box-shadow:
    0 12px 30px rgba(163,230,53,0.12);
}
/* ==========================================
   LOCATION ANALYSIS PAGE
========================================== */

.location-analysis-page .subpage-hero{

    background:
    radial-gradient(
        circle at 80% 30%,
        rgba(255, 64, 160, 0.22),
        transparent 30%
    ),
    radial-gradient(
        circle at 65% 75%,
        rgba(236, 72, 153, 0.16),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        #070b1f 0%,
        #15112f 42%,
        #2a1036 72%,
        #090b16 100%
    );

}
/* ---------- LOCATION ANALYSIS HERO BUTTONS ---------- */

.location-analysis-page .location-analysis-hero .primary-btn{

    background:
    linear-gradient(
        135deg,
        #ec4899,
        #ff5fa2
    );

    border-color:transparent;
    color:#ffffff;

    box-shadow:
    0 15px 35px rgba(236,72,153,0.22);

}


.location-analysis-page .location-analysis-hero .primary-btn:hover{

    background:
    linear-gradient(
        135deg,
        #f05ca7,
        #ff79b5
    );

    transform:translateY(-2px);

    box-shadow:
    0 20px 45px rgba(236,72,153,0.32);

}


.location-analysis-page .location-analysis-hero .secondary-btn{

    border-color:rgba(255,95,162,0.38);

    background:rgba(35,13,45,0.45);

}


.location-analysis-page .location-analysis-hero .secondary-btn:hover{

    border-color:#ff5fa2;

    background:rgba(255,95,162,0.10);

    box-shadow:
    0 12px 30px rgba(236,72,153,0.14);

}

.location-analysis-page .section-tag{

    color:#ff5fa2;

}

.location-analysis-page .web-services-section{

    background:#06141e;

}


.location-analysis-page .service-card{

    border:1px solid rgba(103,232,249,0.25);

    background:
    linear-gradient(
        145deg,
        rgba(8,42,55,0.96),
        rgba(7,24,36,0.96)
    );

    box-shadow:
    0 18px 45px rgba(0,0,0,0.20);

}


.location-analysis-page .service-icon{

    background:
    rgba(103,232,249,0.10);

    border:
    1px solid rgba(103,232,249,0.28);

}


.location-analysis-page .service-card:hover{

    transform:translateY(-6px);

    border-color:
    rgba(103,232,249,0.60);

    box-shadow:
    0 22px 55px rgba(0,180,220,0.14);

}
/* ---------- WEB HERO MOBILE ---------- */

@media(max-width:900px){

    .web-page .subpage-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .web-hero-visual{
        min-height:auto;
        margin-top:10px;
    }

    .web-hero-image{
        max-width:460px;
        margin:0 auto;
    }

}
/* ---------- GIS HERO LAYOUT ---------- */

.gis-hero{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:50px;
}

.gis-hero-visual{
    width:100%;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* ---------- GIS HERO TRANSPARENT IMAGE ---------- */

.gis-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}
/* ---------- GIS HERO MOBILE ---------- */

@media(max-width:900px){

    .gis-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .gis-hero-visual{
        min-height:auto;
        margin-top:10px;
    }

    .gis-hero-image{
        max-width:460px;
        margin:0 auto;
    }

}
/* ---------- AI HERO LAYOUT ---------- */

.ai-hero{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:50px;
}

.ai-hero-visual{
    width:100%;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* ---------- AI HERO TRANSPARENT IMAGE ---------- */

.ai-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}
/* ---------- AI HERO MOBILE ---------- */

@media(max-width:900px){

    .ai-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .ai-hero-visual{
        min-height:auto;
        margin-top:10px;
    }

    .ai-hero-image{
        max-width:460px;
        margin:0 auto;
    }

}
/* ---------- PROJECTS HERO LAYOUT ---------- */

.projects-hero{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:50px;
}

.projects-hero-visual{
    width:100%;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* ---------- PROJECTS HERO TRANSPARENT IMAGE ---------- */

.projects-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}
/* ---------- ABOUT HERO LAYOUT ---------- */

.about-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items:center;
    gap:50px;
}

.about-hero .subpage-hero-content{
    width:100%;
    max-width:700px;
    margin:0;
}

.about-hero .about-hero-visual{
    width:100%;
    min-width:0;
    align-self:center;
}

.about-hero-visual{
    width:100%;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* ---------- ABOUT HERO TRANSPARENT IMAGE ---------- */

.about-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}
/* ---------- ABOUT HERO MOBILE ---------- */

@media(max-width:900px){

    .about-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-hero-visual{
        min-height:auto;
        margin-top:10px;
    }

    .about-hero-image{
        max-width:460px;
        margin:0 auto;
    }

}
/* ---------- CONTACT HERO LAYOUT ---------- */

.contact-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items:center;
    gap:50px;
}

.contact-hero .subpage-hero-content{
    width:100%;
    max-width:700px;
    margin:0;
}

.contact-hero-visual{
    width:100%;
    min-width:0;
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;
}
/* ---------- CONTACT HERO TRANSPARENT IMAGE ---------- */

.contact-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}
/* ---------- CONTACT HERO MOBILE ---------- */

@media(max-width:900px){

    .contact-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .contact-hero-visual{
        min-height:auto;
        margin-top:10px;
    }

    .contact-hero-image{
        max-width:460px;
        margin:0 auto;
    }

}
/* ==========================================
   PRICING PAGE
========================================== */

/* ---------- PRICING HERO ---------- */

.pricing-page .pricing-hero{

    background:
    radial-gradient(
        circle at 78% 35%,
        rgba(245, 158, 11, 0.22),
        transparent 32%
    ),
    radial-gradient(
        circle at 62% 75%,
        rgba(251, 191, 36, 0.12),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #0b1018 0%,
        #172033 48%,
        #33230d 78%,
        #0b1018 100%
    );

}

.pricing-page .section-tag{
    color:#fbbf24;
}


/* ---------- PRICING HERO BUTTONS ---------- */

.pricing-page .pricing-hero .primary-btn{

    background:
    linear-gradient(
        135deg,
        #f59e0b,
        #fbbf24
    );

    color:#161006;
    border-color:transparent;

    box-shadow:
    0 15px 35px rgba(245,158,11,0.22);

}


.pricing-page .pricing-hero .primary-btn:hover{

    background:
    linear-gradient(
        135deg,
        #fbbf24,
        #fcd34d
    );

    transform:translateY(-2px);

}


.pricing-page .pricing-hero .secondary-btn{

    border-color:rgba(251,191,36,0.35);
    background:rgba(35,25,10,0.45);

}


.pricing-page .pricing-hero .secondary-btn:hover{

    border-color:#fbbf24;
    background:rgba(251,191,36,0.08);

}
/* ==========================================
   PRICING CARDS
========================================== */

.pricing-section{
    padding:100px 0;
    background:#08111e;
}

.pricing-heading{
    max-width:700px;
    margin:0 auto 55px;
    text-align:center;
}

.pricing-heading h2{
    margin:10px 0 15px;
    font-size:42px;
    line-height:1.15;
    color:#ffffff;
}

.pricing-heading > p:not(.section-tag){
    color:#aebdce;
    font-size:17px;
}


/* ---------- PRICING GRID ---------- */

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


/* ---------- PRICING CARD ---------- */

.pricing-card{
    position:relative;

    padding:38px 30px;

    border:
    1px solid rgba(251,191,36,0.18);

    border-radius:20px;

    background:
    linear-gradient(
        145deg,
        #101b2b,
        #0b1421
    );

    box-shadow:
    0 20px 50px rgba(0,0,0,0.22);
}

.pricing-card h3{
    margin-bottom:12px;
    font-size:25px;
    color:#ffffff;
}

.pricing-description{
    min-height:52px;
    margin-bottom:25px;

    color:#9fb0c3;
    line-height:1.6;
}


/* ---------- PRICE ---------- */

.pricing-price{
    margin-bottom:28px;
}

.pricing-price span,
.pricing-price small{
    display:block;
    color:#9fb0c3;
}

.pricing-price strong{
    display:block;

    margin:4px 0;

    font-size:35px;
    color:#fbbf24;
}


/* ---------- FEATURES ---------- */

.pricing-card ul{
    list-style:none;
    padding:0;
}

.pricing-card li{
    padding:9px 0;

    border-bottom:
    1px solid rgba(255,255,255,0.06);

    color:#d7e0ea;
}


/* ---------- FEATURED PACKAGE ---------- */

.pricing-card.featured{
    border-color:
    rgba(251,191,36,0.55);

    transform:translateY(-10px);

    box-shadow:
    0 25px 65px rgba(245,158,11,0.13);
}

.pricing-badge{
    position:absolute;

    top:-14px;
    right:22px;

    padding:7px 13px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #f59e0b,
        #fbbf24
    );

    color:#171006;

    font-size:11px;
    font-weight:700;
    letter-spacing:0.7px;
}


/* ---------- PRICING MOBILE ---------- */

@media(max-width:900px){

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

    .pricing-card.featured{
        transform:none;
    }

}

@media(max-width:600px){

    .pricing-section{
        padding:70px 0;
    }

    .pricing-heading{
        margin-bottom:40px;
    }

    .pricing-heading h2{
        font-size:32px;
    }

    .pricing-card{
        padding:32px 22px;
    }

    .pricing-price strong{
        font-size:31px;
    }

}
/* ---------- ALTERNATE PRICING SECTION ---------- */

.pricing-section-alt{
    background:
    linear-gradient(
        135deg,
        #06101b 0%,
        #0b1823 50%,
        #07131c 100%
    );

    border-top:
    1px solid rgba(255,255,255,0.05);

    border-bottom:
    1px solid rgba(255,255,255,0.05);
}
/* ==========================================
   PRICING NOTE
========================================== */

.pricing-note-section{
    padding:90px 0;
    background:#060d17;
}

.pricing-note{
    max-width:900px;
    margin:0 auto;
    padding:55px 45px;

    text-align:center;

    border:
    1px solid rgba(251,191,36,0.25);

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        rgba(24,34,51,0.96),
        rgba(38,27,12,0.92)
    );

    box-shadow:
    0 25px 65px rgba(0,0,0,0.25);
}

.pricing-note h2{
    margin-bottom:20px;

    font-size:38px;
    line-height:1.15;

    color:#ffffff;
}

.pricing-note p{
    max-width:720px;
    margin:0 auto 16px;

    color:#b8c4d1;
    line-height:1.7;
}

.pricing-note .btn{
    margin-top:18px;
}


/* ---------- PRICING NOTE MOBILE ---------- */

@media(max-width:600px){

    .pricing-note-section{
        padding:70px 0;
    }

    .pricing-note{
        padding:38px 20px;
        border-radius:18px;
    }

    .pricing-note h2{
        font-size:30px;
    }

    .pricing-note p{
        font-size:15px;
    }

}
/* ==========================================
   LOCATION ANALYSIS HERO VISUAL
========================================== */

.location-analysis-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items:center;
    gap:50px;
}

.location-analysis-hero .subpage-hero-content{
    width:100%;
    max-width:700px;
    margin:0;
}

.location-analysis-hero-visual{
    width:100%;
    min-width:0;
    min-height:360px;

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

.location-analysis-hero-image{
    display:block;

    width:100%;
    max-width:560px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,0.30));

    transform:translateY(5px);
}


/* ---------- LOCATION ANALYSIS HERO MOBILE ---------- */

@media(max-width:900px){

    .location-analysis-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .location-analysis-hero-visual{
        min-height:auto;
        margin-top:10px;
    }

    .location-analysis-hero-image{
        max-width:460px;
        margin:0 auto;
    }

}
/* ==========================================
   PROJECTS HERO MOBILE FIX
========================================== */

@media(max-width:900px){

    .projects-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .projects-hero-visual{
        width:100%;
        min-height:auto;
        margin-top:15px;
    }

    .projects-hero-image{
        width:100%;
        max-width:500px;
        margin:0 auto;
    }

}