/* ==========================================
            LARGE LAPTOPS
========================================== */

@media(max-width:1400px){

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

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

}


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

@media(max-width:1024px){

header .container{

    justify-content:space-between;

}

nav{

    display:none;

}

.logo img{

    height:55px;

}

.hero{

    height:90vh;

}

.hero-content{

    max-width:600px;

}

.hero h1{

    font-size:56px;

}

.hero h2{

    font-size:28px;

}

.hero p{

    font-size:18px;

}

.highlights .container{

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

}

}


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

@media(max-width:768px){

.container{

    width:92%;

}

.logo img{

    height:48px;

}

.header-btn{

    display:none;

}

.hero{

    height:85vh;

}

.hero-content{

    max-width:100%;

    text-align:center;

    align-items:center;

}

.tag{

    margin-bottom:18px;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:22px;

    line-height:1.4;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

    gap:15px;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

    padding:16px;

}

.highlights{

    padding:60px 0;

}

.highlights .container{

    grid-template-columns:1fr;

    gap:20px;

}

.highlight{

    padding:35px 20px;

}

.highlight h3{

    font-size:24px;

}

}


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

@media(max-width:480px){

.hero{

    height:80vh;

}

.hero h1{

    font-size:34px;

}

.hero h2{

    font-size:19px;

}

.hero p{

    font-size:15px;

}

.tag{

    font-size:12px;

    padding:8px 18px;

}

.highlight i{

    font-size:34px;

}

}