/* ======================================
   TABLETS
====================================== */

@media (max-width:1200px){

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

section h2{
    font-size:48px;
}

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

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

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

}

/* ======================================
   SMALL TABLETS
====================================== */

@media (max-width:992px){

.container{
    padding:0 24px;
}

.header .container{
    height:70px;
}

.nav{
    gap:20px;
}

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

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

.hero-stats{
    grid-template-columns:1fr;
    gap:20px;
}

.hero-stats strong{
    font-size:32px;
}

section{
    padding:100px 0;
}

section h2{
    font-size:42px;
}

.calculator-box{
    padding:35px;
}

}

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

@media (max-width:768px){

.header{
    backdrop-filter:none;
    background:#ffffff;
}

.nav{
    display:none;
}

.btn-header{
    display:none;
}

.logo{
    font-size:20px;
}

.hero{
    min-height:auto;
    padding-top:140px;
    padding-bottom:100px;
}

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

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

.hero-buttons{
    flex-direction:column;
}

.btn-primary,
.btn-secondary{
    width:100%;
    text-align:center;
}

.hero-stats{
    margin-top:50px;
}

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

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

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

.numbers-grid strong{
    font-size:54px;
}

.footer-contact{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

}

/* ======================================
   PHONES
====================================== */

@media (max-width:576px){

.container{
    padding:0 18px;
}

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

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

section{
    padding:80px 0;
}

section h2{
    font-size:32px;
    margin-bottom:45px;
}

.card{
    padding:28px;
}

.step{
    padding:28px;
}

.step span{
    font-size:42px;
}

.step h3{
    font-size:18px;
}

.calculator-box{
    padding:25px;
    border-radius:20px;
}

.calculator select{
    font-size:16px;
}

.price-result strong{
    font-size:42px;
}

#map{
    height:350px;
}

#leadForm input{
    height:58px;
    font-size:16px;
}

#leadForm button{
    height:58px;
}

.footer-logo{
    font-size:28px;
}

}

/* ======================================
   VERY SMALL PHONES
====================================== */

@media (max-width:390px){

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

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

.price-result strong{
    font-size:36px;
}

.numbers-grid strong{
    font-size:42px;
}

}

/* ======================================
   STICKY CTA MOBILE
====================================== */

@media (max-width:768px){

.mobile-cta{

    position:fixed;
    bottom:15px;
    left:15px;
    right:15px;

    z-index:9999;

}

.mobile-cta a{

    display:block;

    text-align:center;

    background:#171A20;
    color:#fff;

    padding:18px;

    border-radius:999px;

    font-weight:600;

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

}

}

/* ======================================
   LARGE MONITORS
====================================== */

@media (min-width:1700px){

.container{
    max-width:1480px;
}

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

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

section h2{
    font-size:64px;
}

}