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


/* ==========================
   1400px
========================== */

@media (max-width:1400px){

}


/* ==========================
   1200px
========================== */

@media (max-width:1200px){




.header{
    width:95%;
}

.hero-content{
    width:95%;
}

.features-bar{
    width:95%;
}

.timeline{
    width:95%;
}


}


/* ==========================
   992px
========================== */

@media (max-width:992px){

.hero-content{
    width:min(92%, 720px);
    padding-top:clamp(84px, 11vw, 106px);
}

.hero-content h1{
    font-size:clamp(2.7rem, 8vw, 4rem);
}

.hero-content h2{
    font-size:clamp(1.2rem, 3.1vw, 1.7rem);
}

.hero-content p{
    font-size:1rem;
    line-height:1.8;
    margin-bottom:30px;
}

.hero-buttons{
    gap:14px;
}

.header{

    width:95%;
    padding:18px 0;

}

.logo img{

    width:140px;

}

}


/* ==========================
   1024px
========================== */

@media (max-width:768px){

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

.hero-buttons a{
    width:100%;
    justify-content:center;
    padding:15px 22px;
}

}


/* ==========================
   576px
========================== */

@media (max-width:576px){

.hero-content{
    width:min(92%, 620px);
    padding-top:70px;
}

.hero-content h1{
    font-size:clamp(2.25rem, 9vw, 2.9rem);
    line-height:1;
}

.hero-content h2{
    font-size:1.05rem;
    line-height:1.45;
}

.hero-content p{
    font-size:0.95rem;
    line-height:1.75;
}

.footer{
    padding:72px 0 36px;
}

.footer__contact{
    flex-direction:column;
    gap:15px;
    margin-bottom:20px;
}

.footer__contact-link{
    justify-content:center;
}

}