/*====================================
 IQ Hair Plus Responsive CSS
====================================*/

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

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

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

section{
    padding:70px 0;
}

}


/* Laptops (992px and below) */
@media (max-width:992px){

.navbar{
    padding:12px 0;
}

.navbar-nav{
    text-align:center;
    padding-top:15px;
}

.navbar .btn{
    margin-top:15px;
    width:100%;
}

.hero{
    text-align:center;
    padding:80px 0;
}

.hero img{
    margin-top:40px;
    max-width:80%;
}

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

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

.hero .btn{
    margin-bottom:10px;
}

.card{
    margin-bottom:25px;
}

section h2{
    font-size:34px;
}

}


/* Tablets (768px and below) */
@media (max-width:768px){

.hero{
    padding:60px 0;
}

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

.hero h3{
    font-size:26px;
}

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

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

section{
    padding:60px 0;
}

section h2{
    font-size:30px;
}

.card img{
    height:220px;
}

.btn-lg{
    width:100%;
    margin-bottom:12px;
}

footer{
    text-align:center;
}

}


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

.navbar-brand{
    font-size:24px;
}

.hero{
    padding:50px 0;
}

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

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

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

.hero .btn{
    width:100%;
    margin-bottom:12px;
}

.card img{
    height:200px;
}

.card-body{
    padding:20px;
}

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

section h2{
    font-size:26px;
}

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

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

form{
    padding:20px;
}

.form-control{
    height:50px;
}

textarea.form-control{
    height:120px;
}

.whatsapp{
    width:55px;
    height:55px;
    font-size:26px;
    right:15px;
    bottom:15px;
}

}


/* Small Mobile (400px and below) */
@media (max-width:400px){

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

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

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

section h2{
    font-size:22px;
}

.card img{
    height:180px;
}

.btn{
    font-size:14px;
    padding:10px 20px;
}

footer{
    font-size:14px;
}

}


/* Ultra Wide Screens */
@media (min-width:1400px){

.container{
    max-width:1320px;
}

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

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

.hero img{
    max-width:95%;
}

}