/* ==========================================
   responsive.css
   Wellness Care Responsive Styles
==========================================*/

/* Large Devices */
@media (max-width:1200px){

.container{
    width:92%;
}

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

}

/* Medium Devices */
@media (max-width:992px){

header .container{
    flex-direction:column;
    gap:20px;
}

nav ul{
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

.hero{
    padding-top:180px;
}

.hero-content{
    grid-template-columns:1fr;
    text-align:center;
}

.hero-image{
    order:-1;
}

.hero-image img{
    width:80%;
    margin:auto;
}

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

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

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

.about p{
    width:100%;
}

form{
    width:100%;
}

}

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

header{
    position:relative;
}

.hero{
    padding:70px 0;
}

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

nav ul{
   
    gap:12px;
}

.btn{
    padding:12px 22px;
}

.hero-content{
    gap:40px;
}

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

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

section{
    padding:70px 0;
}

section h2{
    font-size:30px;
}

.cards{
    grid-template-columns:1fr;
}

.card{
    padding:28px;
}

.card i{
    font-size:42px;
}

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

.card p{
    font-size:15px;
}

form input,
form textarea{
    font-size:15px;
    padding:14px;
}

footer{
    padding:25px 0;
}

}

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

.container{
    width:94%;
}

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

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

.hero-image img{
    width:100%;
}

section h2{
    font-size:26px;
}

.logo h2{
    font-size:24px;
}

.card{
    padding:22px;
}

.card i{
    font-size:38px;
}

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

.btn{
    width:100%;
    text-align:center;
}

form button{
    width:100%;
}

}

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

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

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

section h2{
    font-size:22px;
}

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

.card{
    padding:18px;
}

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

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

}