/* ========================================
LAPTOP
======================================== */

@media (max-width:1400px){

h1{
font-size:64px;
}

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

.tech-grid{
grid-template-columns:repeat(4,1fr);
}

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

}

/* ========================================
TABLET
======================================== */

@media (max-width:1024px){

#hero{
padding-top:140px;
padding-bottom:80px;
}

.hero-container{

grid-template-columns:1fr;

gap:50px;

text-align:center;

}

.hero-content p{
margin-left:auto;
margin-right:auto;
}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.hero-animation{
min-height:350px;
}

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

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

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

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

.timeline{

display:grid;

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

gap:30px;

}

.timeline::before{
display:none;
}

}
#mobile-menu-btn{
    display:none;
}

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

@media (max-width:768px){

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    .header-container{
        height:80px;
        position:relative;
    }

    .logo img{
        height:42px;
    }

    .main-nav{
        display:none;
    }

    .language-switch{

    display:flex;

    gap:8px;

    align-items:center;

}
    .language-switch{

        position:absolute;

        right:70px;

        top:50%;

        transform:translateY(-50%);

        display:flex;

        gap:8px;

        font-size:14px;

    }

    .language-switch a{

        padding:4px 6px;

    }

    #mobile-menu-btn{

        display:block;

        background:none;
        border:none;

        color:white;

        font-size:32px;

        cursor:pointer;

        z-index:9999;
    }

    .main-nav.active{

        display:block;

        position:fixed;

        top:80px;
        right:10px;

        width:220px;

        background:rgba(8,18,35,.98);

        border:1px solid rgba(53,207,255,.2);

        border-radius:18px;

        backdrop-filter:blur(20px);

        padding:20px;

        z-index:99999;
    }

    .main-nav.active ul{

        display:flex;

        flex-direction:column;

        gap:25px;

        list-style:none;

        margin:0;
        padding:0;
    }


/* HERO */

#hero{
padding-top:110px;
padding-bottom:60px;
}

.hero-container{

display:flex;
flex-direction:column;

gap:30px;

text-align:center;

}

.hero-content{

padding-left:10px;
padding-right:10px;

}

.hero-content h1{

font-size:42px;

line-height:1.1;

letter-spacing:-1px;

max-width:100%;

margin-bottom:20px;

}

.hero-description{

font-size:18px;

line-height:1.6;

}

.hero-animation{
min-height:350px;
}

#pcb-animation{
max-width:240px;
}

#pcb-animation{

max-width:280px;

margin:auto;

}

h2{
font-size:34px;
}

p{
font-size:16px;
}

.hero-buttons{

flex-direction:column;

width:100%;

}

.btn-primary,
.btn-secondary{

width:100%;

}

/* SERVICES */

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

/* TECHNOLOGIES */

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

/* BENEFITS */

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

/* STATS */

.stats{

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

gap:10px;

}

.stat-card{

padding:14px 8px;

}

.stat-number{

font-size:24px;

}

.stat-text{

font-size:11px;

}

/* TIMELINE */

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

.timeline div::before{

width:60px;
height:60px;

}

/* PROCESS MOBILE */

.timeline{

display:flex;
flex-direction:column;

gap:16px;

margin-top:40px;

}

.timeline div::before{
display:none !important;
}

.timeline-step{

display:flex;

align-items:center;

gap:14px;

width:100%;

padding:14px 18px;

background:
rgba(8,18,35,.75);

border:
1px solid rgba(93,214,255,.15);

border-radius:18px;

text-align:left !important;

}

.timeline-step img{

position:static !important;

transform:none !important;

width:24px;
height:24px;

margin:0;

}

.timeline-step span{

margin:0 !important;

font-size:16px;

font-weight:600;

}

/* CTA */

.cta-banner{

padding:40px 25px;

}

/* DEMO */

.demo-card h3{
font-size:22px;
}

#sensor-demo,
#controller-demo,
#tracker-demo{

height:220px;

}
/* CONTACT MOBILE */

.contact-wrapper{
    display:flex;
    flex-direction:column-reverse;
    gap:25px;
}

.contact-info{
    padding:25px;
}

.contact-info h3{
    margin-bottom:0;
}

.company-type{
    margin:0 0 15px 0;
}

.contact-phone{
    font-size:24px;
}

#contact-form{
    margin-bottom:0;
}
}

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

@media (max-width:480px){

.hero-content h1{

font-size:34px;

line-height:1.1;

}

h2{
font-size:28px;
}

.hero-badge{

font-size:12px;

padding:8px 14px;

}

.hero-animation{
min-height:350px;
}

#pcb-animation{
max-width:240px;
}

#pcb-animation{
max-width:220px;
}

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

#contact-form input,
#contact-form textarea{

padding:16px;

font-size:15px;

}
.logo img{

height:54px;
width:auto;

}
}
/* ========================================
BUILD NOTICE MOBILE
======================================== */

@media (max-width:768px){

    #build-notice{

        width:calc(100vw - 30px);

        max-width:none;

        padding:24px 20px;

    }

    #build-notice.minimized{

position:fixed;

left:10px;

bottom:10px;

right:auto;

top:auto;

width:calc(100vw - 20px);

max-width:400px;

padding:14px 16px;

transform:none;

}

    #build-notice.minimized h3{

        font-size:14px;

        margin-bottom:4px;

    }

    #build-notice.minimized p{

display:none;

	}
}