/*==================================================
                LARGE DESKTOP
==================================================*/

@media (max-width:1400px){

.container{
    width:90%;
}

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

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

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

}


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

@media (max-width:1200px){

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

.hero p{
    font-size:18px;
}

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

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

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

.chisel-container{
    grid-template-columns:1fr;
    gap:50px;
}

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

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

}


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

@media (max-width:992px){

.menu-toggle{
    display:flex;
}

.nav-links{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    height:100vh;
    background:var(--dark-2);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:40px;
    gap:8px;
    transition:right .4s ease;
    z-index:1001;
    border-left:1px solid rgba(255,255,255,.06);
}

.nav-links.active{
    right:0;
}

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

.nav-links a{
    display:block;
    padding:14px 0;
    font-size:18px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

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

.nav-cta{
    display:none;
}

.hero-container{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:50px;
    padding-top:calc(var(--header-h) + 40px);
    padding-bottom:80px;
}

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

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

.hero-buttons{
    justify-content:center;
}

.hero-stats{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
}

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

.company-grid,
.chisel-container,
.contact-container{
    grid-template-columns:1fr;
    gap:50px;
}

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

.section-header h2{
    font-size:38px;
}

.chisel-content h2,
.contact-info h2{
    font-size:36px;
}


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

@media (max-width:768px){

.hero{
    min-height:100vh;
}

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

.hero p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.hero-buttons .btn{
    width:100%;
    max-width:280px;
}

.stat-box{
    width:calc(50% - 9px);
}

.stat-box h2{
    font-size:30px;
}

.about,
.products,
.services,
.chisel,
.stock,
.customers,
.contact{
    padding:80px 0;
}

.stats-grid,
.products-grid-5,
.services-grid-3,
.customers-grid{
    grid-template-columns:1fr;
}

.form-row{
    grid-template-columns:1fr;
}

.contact-form{
    padding:28px;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:36px;
    padding:50px 0 30px;
}

.footer-bottom .container{
    text-align:center;
}

.section-header{
    margin-bottom:50px;
}

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

.chisel-table th,
.chisel-table td{
    padding:14px 16px;
    font-size:13px;
}

.scroll-top{
    bottom:20px;
    right:20px;
    width:44px;
    height:44px;
}


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

@media (max-width:576px){

.lang-btn{
    padding:5px 10px;
    font-size:12px;
}

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

.hero-subtitle{
    letter-spacing:2px;
    font-size:11px;
}

.hero p{
    font-size:15px;
}

.container{
    width:92%;
}

.logo img{
    height:40px;
}

.stat-box{
    width:100%;
}

.hero-stats{
    flex-direction:column;
    align-items:center;
}

.chisel-content h2,
.contact-info h2{
    font-size:28px;
}

.nav-links{
    width:100%;
}

.company-card{
    padding:28px 22px;
}

}


/*==================================================
                EXTRA SMALL
==================================================*/

@media (max-width:400px){

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

.hero p{
    font-size:14px;
}

.section-header h2{
    font-size:26px;
}

}