/* =========================================================
   MEST ELEKTRİK ELEKTRONİK
   NEW CORPORATE DESIGN
========================================================= */


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

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


html{
    scroll-behavior:smooth;
}


body{
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:#f7f9fc;

    color:#101827;

    line-height:1.6;

    overflow-x:hidden;
}


img{
    max-width:100%;
}


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


button,
input,
textarea{
    font:inherit;
}


.container{
    width:min(1180px, calc(100% - 48px));

    margin:auto;
}


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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:76px;

    z-index:1000;

    background:rgba(7,17,31,.92);

    backdrop-filter:blur(16px);

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

}


.header-inner{

    height:76px;

    width:min(1280px, calc(100% - 48px));

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.site-logo{

    display:flex;

    align-items:center;

}


.site-logo img{

    width:105px;

    height:auto;

    display:block;

}


.desktop-nav{

    display:flex;

    align-items:center;

    gap:38px;

    margin-left:auto;

    margin-right:45px;

}


.desktop-nav a{

    position:relative;

    color:#cbd5e1;

    font-size:14px;

    font-weight:500;

    transition:.25s;

}


.desktop-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#3b82f6;

    transition:.25s;

}


.desktop-nav a:hover{

    color:#fff;

}


.desktop-nav a:hover::after{

    width:100%;

}


.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}


.header-cart,
.header-login{

    padding:9px 15px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:8px;

    color:#fff;

    font-size:13px;

    transition:.25s;

}


.header-cart:hover,
.header-login:hover{

    background:#fff;

    color:#07111f;

}


.cart-symbol{

    margin-right:5px;

}


.header-user{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:12px;

}


.header-avatar{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-weight:700;

}


.mobile-menu-button{

    display:none;

    background:none;

    border:0;

    color:#fff;

    font-size:27px;

    cursor:pointer;

}


.mobile-navigation{

    display:none;

}


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

.hero-new{

    min-height:760px;

    position:relative;

    overflow:hidden;

    background:#07111f;

    color:white;

    display:flex;

    align-items:center;

}


.hero-background{

    position:absolute;

    inset:0;

    background-image:
        url("../Resources/Gemini_Generated_Image_1kiyqo1kiyqo1kiy.png");

    background-size:cover;

    background-position:center;

    opacity:.38;

    filter:saturate(.75);

    transform:scale(1.03);

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            #07111f 0%,
            rgba(7,17,31,.92) 32%,
            rgba(7,17,31,.58) 65%,
            rgba(7,17,31,.72) 100%
        );

}


.hero-container{

    position:relative;

    z-index:2;

    padding-top:76px;

    display:grid;

    grid-template-columns:
        1.15fr
        .85fr;

    align-items:center;

    min-height:760px;

}


.hero-content{

    max-width:680px;

}


.hero-label{

    display:flex;

    align-items:center;

    gap:10px;

    color:#93c5fd;

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:26px;

}


.hero-dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#3b82f6;

    box-shadow:
        0 0 14px #3b82f6;

}


.hero-content h1{

    font-size:
        clamp(48px, 6vw, 78px);

    line-height:1.02;

    letter-spacing:-3px;

    font-weight:800;

    margin-bottom:28px;

}


.hero-content h1 span{

    color:#3b82f6;

}


.hero-description{

    max-width:600px;

    color:#b8c4d4;

    font-size:18px;

    line-height:1.7;

    margin-bottom:38px;

}


.hero-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}


.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    min-height:52px;

    padding:0 22px;

    background:#2563eb;

    color:#fff;

    border:1px solid #2563eb;

    border-radius:7px;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:
        transform .25s,
        background .25s,
        box-shadow .25s;

}


.btn-primary:hover{

    transform:translateY(-2px);

    background:#3b82f6;

    box-shadow:
        0 12px 35px rgba(37,99,235,.3);

}


.btn-primary .arrow{

    font-size:20px;

}


.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:0 22px;

    border:
        1px solid rgba(255,255,255,.22);

    color:#fff;

    border-radius:7px;

    font-size:14px;

    transition:.25s;

}


.btn-outline:hover{

    background:#fff;

    color:#07111f;

}


.hero-location{

    margin-top:30px;

    color:#78879b;

    font-size:12px;

    letter-spacing:.5px;

}


.hero-location span{

    color:#3b82f6;

    margin-right:6px;

}


/* =========================================================
   HERO TECH CARD
========================================================= */

.hero-visual{

    display:flex;

    justify-content:flex-end;

}


.hero-tech-card{

    width:340px;

    height:410px;

    position:relative;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.015)
        );

    backdrop-filter:blur(15px);

    border-radius:18px;

    padding:25px;

    box-shadow:
        0 40px 100px rgba(0,0,0,.3);

}


.tech-card-top{

    display:flex;

    justify-content:space-between;

    color:#fff;

    font-size:11px;

    letter-spacing:3px;

}


.status{

    color:#60a5fa;

}


.tech-lines{

    position:absolute;

    left:25px;

    right:25px;

    top:100px;

}


.tech-line{

    height:60px;

    border-bottom:
        1px solid rgba(96,165,250,.25);

    display:flex;

    align-items:flex-end;

    gap:50px;

}


.tech-line span{

    display:block;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#3b82f6;

    box-shadow:
        0 0 20px #3b82f6;

    transform:translateY(4px);

}


.tech-main-number{

    position:absolute;

    bottom:95px;

    left:25px;

    font-size:110px;

    line-height:1;

    font-weight:800;

    color:rgba(255,255,255,.06);

}


.tech-card-bottom{

    position:absolute;

    bottom:25px;

    left:25px;

    right:25px;

    display:flex;

    justify-content:space-between;

    font-size:10px;

    color:#8291a5;

    letter-spacing:2px;

}


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

.quick-services{

    background:#fff;

    border-bottom:
        1px solid #e5eaf0;

}


.quick-services-inner{

    display:grid;

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

}


.quick-service{

    min-height:90px;

    padding:0 20px;

    display:flex;

    align-items:center;

    gap:14px;

    border-right:
        1px solid #e5eaf0;

    color:#111827;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}


.quick-service:first-child{

    border-left:
        1px solid #e5eaf0;

}


.quick-service:hover{

    background:#f8fafc;

}


.quick-number{

    color:#2563eb;

    font-size:11px;

    font-weight:800;

}


.quick-arrow{

    margin-left:auto;

    color:#9ca3af;

    font-size:18px;

}


/* =========================================================
   GENERAL SECTION
========================================================= */

.section{

    padding:120px 0;

}


.section-eyebrow{

    color:#2563eb;

    font-size:11px;

    letter-spacing:2.5px;

    font-weight:800;

    margin-bottom:18px;

}


.section-title{

    font-size:
        clamp(40px, 5vw, 62px);

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:800;

}


.section-title span{

    color:#2563eb;

}


.section-heading-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:55px;

}


.section-heading-row > p{

    max-width:400px;

    color:#6b7280;

    font-size:15px;

}


.section-heading{

    margin-bottom:60px;

}


.section-heading > p{

    color:#6b7280;

    margin-top:18px;

    max-width:600px;

}


/* =========================================================
   INTRO
========================================================= */

.intro-section{

    background:#f7f9fc;

}


.intro-grid{

    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:100px;

    align-items:end;

}


.big-title{

    max-width:750px;

    font-size:
        clamp(40px, 5vw, 65px);

    line-height:1.08;

    letter-spacing:-2.5px;

}


.big-title span{

    color:#2563eb;

}


.intro-text{

    color:#64748b;

    font-size:16px;

}


.intro-text p + p{

    margin-top:18px;

}


.text-link{

    display:inline-flex;

    gap:12px;

    align-items:center;

    margin-top:28px;

    color:#111827;

    font-size:14px;

    font-weight:700;

    border-bottom:
        1px solid #111827;

    padding-bottom:6px;

}


.text-link span{

    color:#2563eb;

    font-size:18px;

    transition:.2s;

}


.text-link:hover span{

    transform:translateX(4px);

}


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

.stats-section{

    background:#fff;

    border-top:
        1px solid #e5e7eb;

    border-bottom:
        1px solid #e5e7eb;

}


.stats-grid{

    display:grid;

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

}


.stat{

    min-height:160px;

    padding:35px 30px;

    border-right:
        1px solid #e5e7eb;

}


.stat:first-child{

    border-left:
        1px solid #e5e7eb;

}


.stat strong{

    display:block;

    font-size:48px;

    line-height:1;

    color:#111827;

    letter-spacing:-2px;

}


.stat span{

    display:block;

    margin-top:13px;

    color:#64748b;

    font-size:12px;

}


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

.services-section{

    background:#fff;

}


.services-list{

    border-top:
        1px solid #dce2e9;

}


.service-large{

    display:grid;

    grid-template-columns:
        100px
        1fr
        80px;

    align-items:center;

    min-height:170px;

    border-bottom:
        1px solid #dce2e9;

    transition:.3s;

}


.service-large:hover{

    padding-left:15px;

    background:#f8fafc;

}


.service-number{

    color:#2563eb;

    font-size:12px;

    font-weight:800;

}


.service-content h3{

    font-size:27px;

    margin-bottom:7px;

}


.service-content p{

    max-width:620px;

    color:#64748b;

    font-size:14px;

}


.service-icon{

    justify-self:end;

    width:48px;

    height:48px;

    border:
        1px solid #dce2e9;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    transition:.3s;

}


.service-large:hover .service-icon{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

    transform:rotate(45deg);

}


/* =========================================================
   FEATURE
========================================================= */

.feature-section{

    padding:0 0 120px;

    background:#fff;

}


.feature-box{

    min-height:430px;

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:
        linear-gradient(
            120deg,
            #07111f,
            #0d1d32
        );

    color:#fff;

    padding:70px;

}


.feature-content{

    position:relative;

    z-index:2;

    max-width:560px;

}


.feature-content h2{

    font-size:
        clamp(40px,5vw,62px);

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:22px;

}


.feature-content p{

    color:#aebccc;

    max-width:500px;

    margin-bottom:30px;

}


.btn-light{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:15px 20px;

    background:#fff;

    color:#07111f;

    border-radius:7px;

    font-size:13px;

    font-weight:700;

}


.feature-pattern{

    position:absolute;

    right:-70px;

    top:-80px;

    width:550px;

    height:550px;

    opacity:.7;

}


.circuit{

    position:absolute;

    border:
        1px solid rgba(59,130,246,.35);

    border-radius:50%;

}


.c1{

    inset:0;

}


.c2{

    inset:70px;

}


.c3{

    inset:140px;

}


.c4{

    inset:210px;

}


.circuit::after{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#3b82f6;

    box-shadow:
        0 0 20px #3b82f6;

}


/* =========================================================
   QUOTE
========================================================= */

.quote-section{

    background:#f1f5f9;

}


.quote-grid{

    display:grid;

    grid-template-columns:
        1.3fr
        .7fr;

    gap:25px;

}


.quote-form{

    background:#fff;

    padding:42px;

    border-radius:14px;

    border:
        1px solid #e2e8f0;

}


.form-row{

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

}


.form-row:has(label:nth-child(3)){

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

}


.quote-form label{

    display:block;

    color:#374151;

    font-size:12px;

    font-weight:700;

}


.quote-form input,
.quote-form textarea{

    display:block;

    width:100%;

    margin-top:8px;

    border:
        1px solid #dce2e9;

    background:#f8fafc;

    border-radius:7px;

    padding:13px 14px;

    outline:none;

    color:#111827;

    transition:.2s;

}


.quote-form textarea{

    min-height:140px;

    resize:vertical;

}


.quote-form input:focus,
.quote-form textarea:focus{

    border-color:#2563eb;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);

}


.file-input{

    margin-top:18px;

    padding:18px;

    border:
        1px dashed #cbd5e1;

    border-radius:7px;

    background:#f8fafc;

}


.file-input input{

    border:0 !important;

    padding:0 !important;

    background:none !important;

}


.form-submit{

    margin-top:22px;

}


.quote-side{

    padding:42px;

    border-radius:14px;

    background:#07111f;

    color:#fff;

}


.quote-side-label{

    color:#60a5fa;

    letter-spacing:3px;

    font-size:11px;

    font-weight:800;

    margin-bottom:60px;

}


.quote-side h3{

    font-size:40px;

    line-height:1.1;

    letter-spacing:-1.5px;

    margin-bottom:18px;

}


.quote-side p{

    color:#9aa8b9;

    font-size:14px;

}


.quote-points{

    margin-top:50px;

}


.quote-points div{

    padding:13px 0;

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

    color:#cbd5e1;

    font-size:13px;

}


.quote-points span{

    color:#60a5fa;

    margin-right:15px;

    font-weight:800;

}


/* =========================================================
   STORE
========================================================= */

.store-section{

    background:#fff;

}


.products-grid{

    display:grid;

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

    gap:20px;

}


.product-card{

    border:
        1px solid #e2e8f0;

    border-radius:12px;

    overflow:hidden;

    background:#fff;

    transition:.3s;

}


.product-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);

}


.product-image{

    position:relative;

    display:block;

    height:230px;

    background:#f1f5f9;

    overflow:hidden;

}


.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}


.product-card:hover
.product-image img{

    transform:scale(1.05);

}


.product-label{

    position:absolute;

    top:12px;

    left:12px;

    background:#07111f;

    color:#fff;

    font-size:9px;

    letter-spacing:1px;

    padding:5px 8px;

    border-radius:4px;

}


.product-info{

    padding:20px;

}


.product-title{

    display:block;

    color:#111827;

    font-weight:700;

    font-size:15px;

}


.product-info p{

    color:#64748b;

    font-size:12px;

    margin-top:7px;

    height:38px;

    overflow:hidden;

}


.product-bottom{

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.product-bottom strong{

    font-size:18px;

}


.product-cart{

    width:38px;

    height:38px;

    border:0;

    border-radius:6px;

    background:#07111f;

    color:#fff;

    cursor:pointer;

    transition:.2s;

}


.product-cart:hover{

    background:#2563eb;

}


/* =========================================================
   PROJECTS
========================================================= */

.projects-section{

    background:#f7f9fc;

}


.projects-grid{

    display:grid;

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

    gap:18px;

}


.project{

    position:relative;

    height:300px;

    border-radius:12px;

    overflow:hidden;

    background:#dbe3ec;

}


.project-large{

    height:420px;

    grid-row:span 2;

}


.project img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}


.project-large img{

    object-position:center;

}


.project:hover img{

    transform:scale(1.05);

}


.project-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:35px 25px 22px;

    color:#fff;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.8)
        );

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}


.project-overlay span{

    font-size:11px;

    color:#93c5fd;

}


.project-overlay strong{

    font-size:14px;

}


.project-note{

    margin-top:15px;

    color:#94a3b8;

    font-size:11px;

}


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

.process-section{

    padding:110px 0;

    background:#07111f;

    color:#fff;

}


.section-title.light span{

    color:#60a5fa;

}


.process-grid{

    display:grid;

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

    margin-top:60px;

}


.process-item{

    min-height:240px;

    padding:25px;

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

}


.process-item:last-child{

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

}


.process-item > span{

    color:#60a5fa;

    font-size:12px;

    font-weight:800;

}


.process-item h3{

    margin-top:55px;

    font-size:20px;

}


.process-item p{

    margin-top:12px;

    color:#8190a4;

    font-size:13px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section{

    background:#fff;

}


.faq-grid{

    display:grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:100px;

}


.faq-intro{

    color:#64748b;

    margin-top:20px;

    max-width:400px;

}


.faq-list{

    border-top:
        1px solid #dce2e9;

}


.faq-list details{

    border-bottom:
        1px solid #dce2e9;

}


.faq-list summary{

    list-style:none;

    cursor:pointer;

    padding:22px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:15px;

    font-weight:700;

}


.faq-list summary::-webkit-details-marker{

    display:none;

}


.faq-list summary span{

    color:#2563eb;

    font-size:22px;

    font-weight:400;

}


.faq-list details p{

    padding:
        0 30px 25px 0;

    color:#64748b;

    font-size:13px;

}


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

.contact-cta{

    padding:75px 0;

    background:#2563eb;

    color:#fff;

}


.contact-cta-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}


.contact-cta .section-eyebrow{

    color:#bfdbfe;

}


.contact-cta h2{

    font-size:
        clamp(38px,5vw,60px);

    line-height:1;

    letter-spacing:-2px;

}


.contact-cta h2 span{

    color:#07111f;

}


.contact-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:18px;

}


.contact-phone{

    font-size:18px;

    font-weight:700;

}


.btn-whatsapp{

    display:flex;

    align-items:center;

    gap:18px;

    background:#fff;

    color:#111827;

    padding:15px 20px;

    border-radius:7px;

    font-size:13px;

    font-weight:700;

}


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

.footer{

    background:#050b13;

    color:#fff;

    padding:70px 0 25px;

}


.footer-grid{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap:50px;

}


.footer-brand img{

    width:120px;

    margin-bottom:20px;

}


.footer-brand p{

    max-width:330px;

    color:#7e8da0;

    font-size:13px;

}


.footer-location{

    display:block;

    margin-top:20px;

    color:#4d8de8;

    font-size:11px;

    letter-spacing:1px;

}


.footer h4{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    margin-bottom:20px;

}


.footer a,
.footer span{

    display:block;

    color:#7e8da0;

    font-size:13px;

    margin-bottom:10px;

    transition:.2s;

}


.footer a:hover{

    color:#fff;

}


.footer-bottom{

    display:flex;

    justify-content:space-between;

    margin-top:60px;

    padding-top:22px;

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

    color:#4d5968;

    font-size:11px;

}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-button{

    position:fixed;

    right:24px;

    bottom:24px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#25d366;

    color:#fff;

    border-radius:50%;

    font-size:25px;

    z-index:900;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition:.25s;

}


.whatsapp-button:hover{

    transform:
        translateY(-4px)
        scale(1.04);

}


/* =========================================================
   TOAST
========================================================= */

#toast{

    position:fixed;

    right:25px;

    bottom:95px;

    max-width:350px;

    padding:14px 20px;

    border-radius:8px;

    background:#07111f;

    color:#fff;

    font-size:13px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.2);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:3000;

}


#toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


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

@media(max-width:1000px){

    .desktop-nav{

        gap:20px;

        margin-right:20px;

    }


    .hero-container{

        grid-template-columns:1fr;

    }


    .hero-visual{

        display:none;

    }


    .hero-new,
    .hero-container{

        min-height:700px;

    }


    .products-grid{

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

    }


    .quote-grid{

        grid-template-columns:1fr;

    }


    .faq-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

}


@media(max-width:760px){

    .container{

        width:
            calc(100% - 32px);

    }


    .site-header,
    .header-inner{

        height:64px;

    }


    .site-logo img{

        width:85px;

    }


    .desktop-nav,
    .header-cart,
    .header-login{

        display:none;

    }


    .mobile-menu-button{

        display:block;

    }


    .mobile-navigation{

        position:absolute;

        top:64px;

        left:0;

        width:100%;

        display:flex;

        flex-direction:column;

        background:#07111f;

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

        padding:8px 16px;

        opacity:0;

        visibility:hidden;

        transform:translateY(-10px);

        transition:.25s;

    }


    .mobile-navigation.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }


    .mobile-navigation a{

        color:#fff;

        padding:16px 5px;

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

        font-size:14px;

    }


    .hero-new,
    .hero-container{

        min-height:680px;

    }


    .hero-container{

        padding-top:80px;

    }


    .hero-content h1{

        font-size:46px;

        letter-spacing:-2px;

    }


    .hero-description{

        font-size:16px;

    }


    .quick-services-inner{

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

    }


    .quick-service{

        min-height:75px;

        border-bottom:
            1px solid #e5eaf0;

    }


    .section{

        padding:80px 0;

    }


    .intro-grid{

        grid-template-columns:1fr;

        gap:35px;

    }


    .stats-grid{

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

    }


    .stat{

        min-height:130px;

    }


    .stat:nth-child(3){

        border-left:
            1px solid #e5e7eb;

    }


    .service-large{

        grid-template-columns:
            50px
            1fr
            50px;

        min-height:150px;

    }


    .service-content h3{

        font-size:21px;

    }


    .service-content p{

        font-size:12px;

    }


    .feature-box{

        padding:45px 30px;

    }


    .form-row,
    .form-row:has(label:nth-child(3)){

        grid-template-columns:1fr;

    }


    .quote-form,
    .quote-side{

        padding:28px 22px;

    }


    .products-grid{

        grid-template-columns:1fr 1fr;

        gap:12px;

    }


    .product-image{

        height:180px;

    }


    .product-info{

        padding:14px;

    }


    .projects-grid{

        grid-template-columns:1fr;

    }


    .project,
    .project-large{

        height:300px;

        grid-row:auto;

    }


    .process-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .process-item{

        min-height:210px;

    }


    .process-item h3{

        margin-top:35px;

    }


    .contact-cta-inner{

        flex-direction:column;

        align-items:flex-start;

    }


    .contact-actions{

        align-items:flex-start;

    }


    .footer-grid{

        grid-template-columns:
            1fr 1fr;

        gap:35px;

    }

}


@media(max-width:480px){

    .hero-content h1{

        font-size:40px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }


    .btn-primary,
    .btn-outline{

        width:100%;

    }


    .quick-services-inner{

        grid-template-columns:1fr;

    }


    .quick-service{

        border-left:
            1px solid #e5eaf0;

    }


    .stats-grid{

        grid-template-columns:1fr 1fr;

    }


    .stat{

        padding:25px 18px;

    }


    .stat strong{

        font-size:36px;

    }


    .service-large{

        grid-template-columns:
            38px
            1fr;

        padding:20px 0;

    }


    .service-icon{

        display:none;

    }


    .products-grid{

        grid-template-columns:1fr;

    }


    .product-image{

        height:220px;

    }


    .process-grid{

        grid-template-columns:1fr;

    }


    .process-item{

        border-right:0;

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

    }


    .footer-grid{

        grid-template-columns:1fr;

    }


    .footer-bottom{

        flex-direction:column;

        gap:8px;

    }


    .whatsapp-button{

        right:18px;

        bottom:18px;

    }

}