/* =========================================================
   TK TECH
   Dijital & Teknik Çözümler
========================================================= */


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:#080d11;
    color:#edf8fb;
    line-height:1.6;
    overflow-x:hidden;
}

body::selection{
    background:#66ddf5;
    color:#051014;
}

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

img{
    max-width:100%;
    display:block;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    border:none;
}

.container{
    width:min(1380px,90%);
    margin:auto;
    position:relative;
    z-index:2;
}

.section{
    padding:130px 0;
    position:relative;
}


/* =========================================================
   GLOBAL COLORS
========================================================= */

:root{

    --bg:#080d11;
    --bg-soft:#0d1419;
    --bg-card:#10191f;

    --cyan:#86e8f8;
    --cyan-bright:#5adfff;
    --cyan-dark:#1f9fba;

    --white:#f1fbfd;
    --gray:#91a3ac;

    --border:rgba(137,230,246,.13);
    --border-hover:rgba(137,230,246,.38);

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

    --glow:
    0 0 35px rgba(90,223,255,.18);

}


/* =========================================================
   BACKGROUND EFFECT
========================================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(65,191,225,.08),
            transparent 27%
        ),

        radial-gradient(
            circle at 85% 25%,
            rgba(89,219,248,.07),
            transparent 28%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(26,128,155,.07),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #080d11 0%,
            #0b1116 40%,
            #080d11 100%
        );

}


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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(7,12,16,.68);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(126,222,241,.08);

}

.navbar{

    height:92px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}


/* =========================================================
   BRAND
========================================================= */

.brand{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.brand img{

    width:57px;
    height:57px;

    object-fit:cover;

    border-radius:14px;

    box-shadow:
        0 0 0 1px rgba(131,232,248,.15),
        0 0 25px rgba(90,223,255,.13);

}

.brand-text{

    display:flex;
    flex-direction:column;

    line-height:1.15;

}

.brand-text strong{

    font-family:"Orbitron",sans-serif;

    font-size:17px;

    letter-spacing:1.8px;

    color:#f0fdff;

}

.brand-text span{

    font-size:10px;

    margin-top:5px;

    color:#79cfe0;

    letter-spacing:.9px;

    text-transform:uppercase;

}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.nav-menu a{

    position:relative;

    font-size:14px;

    color:#b9c7cd;

    transition:.3s ease;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:0;
    height:1px;

    background:var(--cyan);

    box-shadow:0 0 8px var(--cyan);

    transition:.3s ease;

}

.nav-menu a:hover{

    color:#fff;

}

.nav-menu a:hover::after{

    width:100%;

}


/* =========================================================
   NAV CTA
========================================================= */

.nav-cta{

    height:48px;

    padding:0 22px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:9px;

    font-size:14px;

    font-weight:700;

    color:#061014;

    background:
    linear-gradient(
        135deg,
        #b6f5ff,
        #62dbf2
    );

    box-shadow:
        0 10px 30px rgba(75,207,236,.15),
        inset 0 1px rgba(255,255,255,.55);

    transition:.3s ease;

}

.nav-cta:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 35px rgba(75,207,236,.3),
        0 0 25px rgba(75,207,236,.15);

}

.menu-toggle{
    display:none;
}


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

.hero{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    padding-top:150px;
    padding-bottom:90px;

    overflow:hidden;

    background:

        linear-gradient(
            90deg,
            rgba(7,12,16,.97) 0%,
            rgba(7,12,16,.91) 47%,
            rgba(7,12,16,.68) 100%
        );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.16;

    background-image:

        linear-gradient(
            rgba(112,221,245,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(112,221,245,.035) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


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

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(15px);

    pointer-events:none;

}

.glow-one{

    width:650px;
    height:650px;

    right:-170px;
    top:5%;

    background:
    radial-gradient(
        circle,
        rgba(87,220,249,.15),
        rgba(87,220,249,.04) 38%,
        transparent 70%
    );

}

.glow-two{

    width:500px;
    height:500px;

    left:-220px;
    bottom:-100px;

    background:
    radial-gradient(
        circle,
        rgba(20,132,160,.12),
        transparent 70%
    );

}


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

.circuit{

    position:absolute;

    height:1px;

    width:430px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(117,226,245,.35),
        transparent
    );

}

.circuit::after{

    content:"";

    position:absolute;

    width:8px;
    height:8px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:#8cf0ff;

    box-shadow:
        0 0 10px #62dff5,
        0 0 24px rgba(98,223,245,.5);

}

.circuit-left{

    top:33%;
    left:-100px;

}

.circuit-left::after{

    right:60px;

}

.circuit-right{

    bottom:28%;
    right:-130px;

}

.circuit-right::after{

    left:100px;

}


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

.hero-wrapper{

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(420px,.95fr);

    align-items:center;

    gap:80px;

}


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

.hero-content{

    max-width:760px;

}

.hero-badge{

    width:max-content;

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 14px;

    margin-bottom:25px;

    border:1px solid rgba(128,228,247,.16);

    border-radius:100px;

    color:#a7dae4;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1.6px;

    background:rgba(130,226,245,.04);

    box-shadow:
        inset 0 1px rgba(255,255,255,.03);

}

.status-dot{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#78ecff;

    box-shadow:
        0 0 10px #63dff6,
        0 0 24px rgba(99,223,246,.6);

}

.hero h1{

    font-family:"Orbitron",sans-serif;

    font-size:clamp(48px,5vw,77px);

    line-height:1.04;

    font-weight:600;

    letter-spacing:-2.6px;

    color:#edfaff;

    max-width:850px;

}

.hero h1 span{

    display:block;

    margin-top:11px;

    background:
    linear-gradient(
        90deg,
        #f3fdff 0%,
        #87e8f8 50%,
        #55cbe4 100%
    );

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

    color:transparent;

    text-shadow:
        0 0 30px rgba(91,215,242,.08);

}

.hero-description{

    max-width:650px;

    margin-top:28px;

    font-size:18px;

    color:#97aab2;

    line-height:1.85;

}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:38px;

}

.btn{

    min-height:56px;

    padding:0 25px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    border-radius:13px;

    font-size:14px;

    font-weight:700;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn-primary{

    color:#071115;

    background:
    linear-gradient(
        135deg,
        #b9f5ff,
        #66ddf4
    );

    box-shadow:
        0 12px 35px rgba(80,210,239,.17),
        inset 0 1px rgba(255,255,255,.7);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 40px rgba(80,210,239,.3),
        0 0 30px rgba(80,210,239,.15);

}

.btn-secondary{

    color:#d7e9ed;

    border:1px solid rgba(126,222,241,.19);

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

    backdrop-filter:blur(10px);

}

.btn-secondary:hover{

    transform:translateY(-3px);

    border-color:
        rgba(126,222,241,.45);

    background:
        rgba(126,222,241,.06);

}


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

.hero-features{

    display:flex;

    align-items:center;

    gap:28px;

    margin-top:40px;

    color:#7f929a;

    font-size:12px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:8px;

}

.hero-features i{

    color:#82e9f8;

    font-size:11px;

}


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

.hero-visual{

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.logo-core{

    position:relative;

    width:min(500px,40vw);

    aspect-ratio:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

.logo-core::before{

    content:"";

    position:absolute;

    width:78%;
    height:78%;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(97,224,246,.13) 0%,
        rgba(42,148,174,.045) 45%,
        transparent 70%
    );

    filter:blur(12px);

}

.logo-core img{

    position:relative;

    z-index:4;

    width:70%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:30px;

    transform:rotate(-2deg);

    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 70px rgba(75,200,230,.13);

}


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

.logo-ring{

    position:absolute;

    border-radius:50%;

    border:
        1px solid
        rgba(107,219,242,.16);

}

.ring-one{

    width:91%;
    height:91%;

}

.ring-one::before{

    content:"";

    position:absolute;

    width:9px;
    height:9px;

    left:10%;
    top:14%;

    border-radius:50%;

    background:#7ce8fa;

    box-shadow:
        0 0 12px #61d8ef;

}

.ring-two{

    width:108%;
    height:108%;

    border-style:dashed;

    border-color:
        rgba(103,211,232,.1);

}


/* =========================================================
   CIRCUIT NODES
========================================================= */

.node{

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    border:
        2px solid
        rgba(129,231,249,.8);

    background:#091115;

    box-shadow:
        0 0 14px rgba(82,217,245,.42);

}

.node-one{
    top:7%;
    right:24%;
}

.node-two{
    bottom:13%;
    left:10%;
}

.node-three{
    right:4%;
    bottom:34%;
}

.node-four{
    left:6%;
    top:31%;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading{

    max-width:780px;

    margin-bottom:65px;

}

.section-heading.centered{

    text-align:center;

    margin-left:auto;
    margin-right:auto;

}

.section-label{

    display:inline-block;

    margin-bottom:16px;

    font-family:"Orbitron",sans-serif;

    font-size:11px;

    font-weight:600;

    color:#69d8ee;

    letter-spacing:2.4px;

}

.section-heading h2,
.about-content h2,
.cta-box h2{

    font-family:"Orbitron",sans-serif;

    font-size:clamp(34px,3.4vw,54px);

    line-height:1.13;

    letter-spacing:-1.7px;

    color:#effcff;

}

.section-heading p{

    max-width:700px;

    margin-top:20px;

    color:#81949d;

    font-size:16px;

    line-height:1.8;

}


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

.services{

    background:

        linear-gradient(
            180deg,
            #080d11 0%,
            #0b1217 50%,
            #080d11 100%
        );

}

.services::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:80%;
    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(103,219,243,.2),
        transparent
    );

}

.services-grid{

    display:grid;

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

    gap:18px;

}

.service-card{

    position:relative;

    min-height:360px;

    padding:34px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:22px;

    border:
        1px solid
        rgba(139,227,245,.105);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.025);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.service-card::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-100px;
    top:-100px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(77,212,240,.15),
        transparent 70%
    );

    opacity:0;

    transition:.4s ease;

}

.service-card:hover{

    transform:translateY(-8px);

    border-color:
        rgba(122,223,244,.31);

    box-shadow:
        0 25px 55px rgba(0,0,0,.25),
        0 0 35px rgba(69,194,220,.055);

}

.service-card:hover::before{

    opacity:1;

}

.service-card.featured{

    background:

        linear-gradient(
            145deg,
            rgba(91,214,240,.09),
            rgba(255,255,255,.015)
        );

    border-color:
        rgba(117,220,241,.24);

}

.service-number{

    position:absolute;

    right:25px;
    top:22px;

    font-family:"Orbitron",sans-serif;

    font-size:12px;

    color:
        rgba(150,231,246,.23);

    letter-spacing:1px;

}

.service-icon{

    width:62px;
    height:62px;

    margin-bottom:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

    border:
        1px solid
        rgba(126,225,245,.18);

    background:
        rgba(110,224,246,.055);

    color:#8eeafa;

    font-size:23px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.035);

}

.service-card h3{

    font-family:"Orbitron",sans-serif;

    font-size:18px;

    font-weight:600;

    margin-bottom:15px;

    color:#eaf8fb;

}

.service-card p{

    color:#81939b;

    font-size:14px;

    line-height:1.8;

    margin-bottom:30px;

}

.service-card a{

    margin-top:auto;

    width:max-content;

    display:flex;

    align-items:center;

    gap:9px;

    font-size:13px;

    color:#94dbea;

    transition:.3s ease;

}

.service-card a i{

    font-size:11px;

    transition:.3s ease;

}

.service-card a:hover{

    color:#fff;

}

.service-card a:hover i{

    transform:translateX(5px);

}


/* =========================================================
   ABOUT
========================================================= */

.about{

    overflow:hidden;

}

.about-wrapper{

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    align-items:center;

    gap:100px;

}

.about-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.about-visual::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    border:
        1px solid
        rgba(111,221,242,.08);

}

.about-visual::after{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    border:
        1px dashed
        rgba(111,221,242,.06);

}

.about-logo{

    position:relative;

    z-index:2;

    width:390px;

    padding:25px;

    border-radius:34px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.01)
    );

    border:
        1px solid
        rgba(126,225,245,.12);

    box-shadow:
        0 30px 80px rgba(0,0,0,.42),
        0 0 60px rgba(71,192,217,.07);

}

.about-logo img{

    border-radius:23px;

}

.about-content h2{

    max-width:720px;

}

.about-content > p{

    color:#84969e;

    margin-top:22px;

    max-width:700px;

    font-size:15px;

    line-height:1.85;

}

.about-stats{

    margin-top:45px;

    display:grid;

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

    gap:14px;

}

.about-stats div{

    padding:22px 18px;

    border-radius:15px;

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

    border:
        1px solid
        rgba(137,227,245,.09);

}

.about-stats strong{

    display:block;

    font-family:"Orbitron",sans-serif;

    font-size:23px;

    color:#8be9f8;

}

.about-stats span{

    display:block;

    margin-top:7px;

    font-size:11px;

    color:#778a92;

}


/* =========================================================
   PROCESS
========================================================= */

.process{

    background:#0a1014;

}

.process-grid{

    display:grid;

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

    position:relative;

    gap:18px;

}

.process-grid::before{

    content:"";

    position:absolute;

    left:5%;
    right:5%;

    top:43px;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(113,223,244,.25),
        rgba(113,223,244,.25),
        transparent
    );

}

.process-card{

    position:relative;

    z-index:2;

    padding:27px;

    border-radius:18px;

    border:
        1px solid
        rgba(136,228,246,.095);

    background:#0c1318;

}

.process-card > span{

    width:34px;
    height:34px;

    display:flex;

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

    border-radius:50%;

    margin-bottom:35px;

    background:#0c151a;

    border:
        1px solid
        rgba(115,222,242,.35);

    color:#8de9f8;

    font-family:"Orbitron",sans-serif;

    font-size:10px;

    box-shadow:
        0 0 20px rgba(86,211,235,.08);

}

.process-card h3{

    font-size:15px;

    margin-bottom:11px;

    color:#e7f5f7;

}

.process-card p{

    color:#768991;

    font-size:13px;

}


/* =========================================================
   CONTACT CTA
========================================================= */

.contact-cta{

    padding:110px 0;

    position:relative;

    overflow:hidden;

}

.contact-cta::before{

    content:"";

    position:absolute;

    width:750px;
    height:750px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(74,202,229,.065),
        transparent 67%
    );

}

.cta-box{

    position:relative;

    padding:60px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    overflow:hidden;

    border-radius:28px;

    border:
        1px solid
        rgba(130,226,245,.17);

    background:

        linear-gradient(
            120deg,
            rgba(103,218,241,.07),
            rgba(255,255,255,.018) 50%,
            rgba(80,189,215,.04)
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.32),
        inset 0 1px rgba(255,255,255,.04);

}

.cta-box::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-150px;
    top:-190px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(104,224,246,.15),
        transparent 70%
    );

}

.cta-box h2{

    max-width:750px;

}

.cta-box p{

    margin-top:19px;

    max-width:650px;

    color:#81959d;

}

.cta-buttons{

    flex-shrink:0;

    display:flex;

    gap:12px;

}


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

.footer{

    border-top:
        1px solid
        rgba(128,226,245,.09);

    background:#060a0d;

}

.footer-wrapper{

    min-height:180px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.footer-brand{

    display:flex;

    align-items:center;

    gap:15px;

}

.footer-brand img{

    width:62px;
    height:62px;

    object-fit:cover;

    border-radius:15px;

}

.footer-brand div{

    display:flex;

    flex-direction:column;

}

.footer-brand strong{

    font-family:"Orbitron",sans-serif;

    font-size:16px;

    letter-spacing:1.5px;

}

.footer-brand span{

    margin-top:5px;

    font-size:11px;

    color:#6e8992;

}

.footer-contact{

    display:flex;

    align-items:center;

    gap:30px;

}

.footer-contact a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#85989f;

    font-size:13px;

    transition:.3s ease;

}

.footer-contact a i{

    color:#72dced;

}

.footer-contact a:hover{

    color:#fff;

}

.footer-bottom{

    padding:18px 5%;

    text-align:center;

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

    color:#53636a;

    font-size:11px;

}


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

@media(max-width:1150px){

    .nav-menu{
        gap:20px;
    }

    .hero-wrapper{
        gap:35px;
    }

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

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

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

    .process-grid::before{
        display:none;
    }

    .about-wrapper{
        gap:60px;
    }

}


/* =========================================================
   TABLET / MOBILE NAV
========================================================= */

@media(max-width:900px){

    .navbar{
        height:78px;
    }

    .brand img{
        width:49px;
        height:49px;
    }

    .brand-text strong{
        font-size:14px;
    }

    .brand-text span{
        font-size:8px;
    }

    .nav-menu{

        position:absolute;

        top:78px;
        left:0;

        width:100%;

        padding:25px;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        background:
            rgba(7,12,16,.97);

        border-bottom:
            1px solid
            rgba(127,225,244,.12);

        transform:
            translateY(-15px);

        opacity:0;

        visibility:hidden;

        transition:.3s ease;

    }

    .nav-menu.active{

        transform:
            translateY(0);

        opacity:1;

        visibility:visible;

    }

    .nav-menu a{

        width:100%;

        padding:14px 5px;

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

    }

    .nav-menu a::after{
        display:none;
    }

    .nav-cta{
        margin-left:auto;
    }

    .menu-toggle{

        width:43px;
        height:43px;

        display:flex;

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

        margin-left:-25px;

        border-radius:10px;

        color:#a9ecf7;

        background:
            rgba(126,225,245,.06);

        border:
            1px solid
            rgba(126,225,245,.12);

        cursor:pointer;

    }

    .hero{

        min-height:auto;

        padding-top:145px;
        padding-bottom:100px;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

    }

    .hero-content{

        text-align:center;

        margin:auto;

    }

    .hero-badge{

        margin-left:auto;
        margin-right:auto;

    }

    .hero-description{

        margin-left:auto;
        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-visual{

        min-height:auto;

        margin-top:45px;

    }

    .logo-core{

        width:min(480px,80vw);

    }

    .about-wrapper{

        grid-template-columns:1fr;

    }

    .about-content{

        text-align:center;

    }

    .about-visual{

        order:2;

    }

    .about-logo{

        width:min(390px,80vw);

    }

    .cta-box{

        flex-direction:column;

        align-items:flex-start;

    }

    .footer-wrapper{

        flex-direction:column;

        justify-content:center;

        padding:40px 0;

    }

    .footer-contact{

        flex-wrap:wrap;

        justify-content:center;

    }

}


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

@media(max-width:650px){

    .container{
        width:90%;
    }

    .section{
        padding:90px 0;
    }

    .nav-cta{

        height:42px;

        padding:0 15px;

        font-size:12px;

    }

    .hero{

        padding-top:125px;

    }

    .hero h1{

        font-size:
            clamp(37px,11vw,52px);

        letter-spacing:-1.6px;

    }

    .hero-description{

        font-size:15px;

        line-height:1.75;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-features{

        gap:15px;

    }

    .hero-visual{

        margin-top:20px;

    }

    .logo-core{

        width:82vw;

    }

    .logo-core img{

        width:72%;

        border-radius:20px;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        min-height:330px;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2,
    .about-content h2,
    .cta-box h2{

        font-size:
            clamp(30px,9vw,42px);

    }

    .about-stats{

        grid-template-columns:1fr;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .cta-box{

        padding:35px 25px;

    }

    .cta-buttons{

        width:100%;

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

    .footer-contact{

        flex-direction:column;

        gap:15px;

    }

}


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

@media(max-width:430px){

    .brand-text span{
        display:none;
    }

    .nav-cta{

        padding:0 12px;

    }

    .nav-cta i{
        display:none;
    }

    .menu-toggle{

        margin-left:-20px;

    }

    .hero-badge{

        font-size:10px;

    }

    .hero-features{

        font-size:10px;

    }

}