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

@media(max-width:1100px){


.header{

    padding:0 15px;

}


.logo{

    font-size:25px;

}


.navbar{

    gap:5px;

}


.navbar a{

    padding:10px 12px;

    font-size:14px;

}


.sidebar{

    width:210px;

}


.card-grid{

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

}


.slide .text h1{

    font-size:35px;

}

}



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

@media(max-width:850px){


.header{

    height:auto;

    padding:15px;

    flex-wrap:wrap;

    gap:15px;

}



.navbar{

    order:3;

    width:100%;

    overflow-x:auto;

}



.container{

    display:block;

}



.sidebar{

    width:100%;

    min-height:auto;

}



.sidebar ul{

    display:grid;

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

}



.sidebar li{

    justify-content:center;

    font-size:15px;

}



.content{

    padding:15px;

}



.slide{

    height:250px;

    padding:25px;

}



.slide .text h1{

    font-size:30px;

}



.slide img{

    width:35%;

}



.card-grid{

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

}


}



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


@media(max-width:600px){


.header{

    flex-direction:column;

    align-items:center;

}



.logo{

    font-size:28px;

}



.navbar{

    justify-content:flex-start;

}



.navbar a{

    white-space:nowrap;

}



.login-btn{

    width:100%;

}



.sidebar ul{

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

}



.sidebar li{

    padding:14px 5px;

}



.slide{

    height:230px;

    text-align:center;

    justify-content:center;

}



.slide img{

    display:none;

}



.slide .text h1{

    font-size:25px;

}



.slide button{

    padding:12px 25px;

}



.section-title h2{

    font-size:25px;

}



.card-grid{

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

}



.card img{

    height:220px;

}


}



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


@media(max-width:380px){


.sidebar ul{

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

}



.section-title{

    flex-direction:column;

    gap:10px;

}



.section-title h2{

    font-size:22px;

}



}