/* ===========================================
   LARGE LAPTOPS (1200px and below)
=========================================== */

@media (max-width:1200px){

.container{
    width:92%;
}

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

.hero-grid{
    gap:60px;
}

}

/* ===========================================
   TABLETS (992px and below)
=========================================== */

@media (max-width:992px){

section{
    padding:90px 0;
}

.hero{
    padding-top:150px;
}

.hero-grid,
.contact-grid,
.footer-grid{

    grid-template-columns:1fr;
    gap:60px;

}

.hero-left{

    text-align:center;

}

.hero-left p{

    margin:auto;
    margin-bottom:35px;

}

.hero-buttons{

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

}



.hero-right img{

    max-width:450px;

}

nav ul{

    gap:20px;

}

h2{

    font-size:38px;

}

.cards,
.why-grid,
.steps,
.pricing-grid,
.portfolio-grid,
.about-grid{

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

}

}

/* ===========================================
   MOBILE (768px and below)
=========================================== */

@media (max-width:768px){

header .container{

    flex-direction:column;
    height:auto;
    padding:18px 0;

}

.logo{

    margin-bottom:15px;

}

nav ul{

    flex-wrap:wrap;
    justify-content:center;
    gap:15px;

}

.btn{

    padding:13px 28px;

}

.hero{

    padding-top:210px;

}

.hero h1{

    font-size:42px;
    line-height:1.2;

}

.hero p{

    font-size:17px;

}

h2{

    font-size:34px;

}

.cards,
.why-grid,
.steps,
.pricing-grid,
.portfolio-grid,
.about-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;
    text-align:center;

}

.footer-grid ul{

    align-items:center;

}

}

/* ===========================================
   SMALL PHONES (480px and below)
=========================================== */

@media (max-width:480px){

.container{

    width:94%;

}

.hero{

    padding-top:220px;
    padding-bottom:80px;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

h2{

    font-size:28px;
    margin-bottom:40px;

}

.card,
.about-box,
.price-card,
.contact-form,
.info-box{

    padding:24px;

}

.hero-buttons{

    flex-direction:column;

}

.btn,
.btn-outline{

    width:100%;
    text-align:center;

}

.floating-contact{

    right:18px;
    bottom:18px;

}

.floating-toggle{

    width:56px;
    height:56px;

}

.floating-menu{

    width:200px;

}

}