/* ===============================
   RESPONSIVE.CSS
================================== */

/* Large Tablet */
@media (max-width:1024px){

.topbar{
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

.logo{
    text-align:center;
}

.search-box{
    width:100%;
    max-width:500px;
}

.hero{
    padding:80px 20px;
}

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

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

}

/* Tablet */
@media (max-width:768px){

.topbar{
    flex-direction:column;
}

.logo h1{
    font-size:26px;
}

.logo p{
    font-size:14px;
}

.hero{
    padding:70px 15px;
}

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

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

.hero-btn{
    padding:14px 28px;
}

.section{
    padding:50px 15px;
}

.section-title{
    font-size:28px;
}

.card-container{
    grid-template-columns:1fr;
}

.tool-img{
    height:220px;
}

.popup-box{
    width:92%;
}

}

/* Mobile */
@media (max-width:480px){

body{
    font-size:14px;
}

.logo h1{
    font-size:22px;
}

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

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

.search-box input{
    font-size:14px;
}

.card{
    padding:15px;
}

.tool-img{
    height:180px;
}

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

.download-btn,
.done-btn{
    padding:12px;
    font-size:14px;
}

.whatsapp{
    width:55px;
    height:55px;
    font-size:28px;
}

#topBtn{
    width:45px;
    height:45px;
}

footer{
    padding:30px 15px;
}

footer h3{
    font-size:20px;
}

footer p{
    font-size:13px;
}

}

/* Ultra Small */
@media (max-width:360px){

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

.section-title{
    font-size:22px;
}

.logo h1{
    font-size:20px;
}

.download-btn{
    font-size:13px;
}

}