/* ------------------- Media Query For All Devices -------- */
/* ---------For All Type of Mobile Phone and IOS Phones-- */

@media only screen and (max-width:767px) {
    .mobile-banner {
        display: block;
    }

    .desktop-banner {
        display: none;
    }

    #serviceList {
        padding: 2em;
    }

    nav {
        margin-top: 0px;
    }

    nav .navbar {
        margin: 0;
        align-items: center;
    }

    nav .logo img {
        width: 100px;
    }

    .aboutBanner img {
        height: 200px !important;
    }

    .header {
        position: fixed;
        z-index: 9999;
        height: 84px;
        width: 100%;
        background: #000;
        padding: 0px;
        -webkit-transition: all ease-out .5s;
        -moz-transition: all ease-out .5s;
        -o-transition: all ease-out .5s;
        transition: all ease-out .5s;
    }

    #main-wrapper {
        padding-top: 18%;
    }

    .carousel-item img {
        height: auto;
    }

    .form-section form input {
        margin-bottom: 15px;
    }

    .hair-style {
        display: block;
    }

    .hair-style .hair1 {
        width: 100%;
        height: 300px;
    }

    .text-section .banner-content h1,
    #beauty-section .beauty-content h1 {
        font-size: 24px;
    }

    .text-section .banner-content p {
        width: 90%;
    }

    .beauty-image {
        padding-top: 50px;
    }

    .beauty-image .beauty2 {
        position: absolute;
        top: 45%;
        right: 0%;
    }

    .beauty-image .beauty2 img {
        width: 90% !important;
    }

    .hair-price h2 {
        font-size: 30px;
        text-align: center;
        margin-bottom: 1rem;
    }

    .Price-heading h3 {
        font-size: 13px;
    }

    #brand-slider {
        height: auto;
    }

    .box .title {
        font-size: 14px;
    }

    .subscribe-section h1 {
        font-size: 15px;
    }

    .subscribe-section .input-group {
        width: 100%;
        margin: 0;
    }

    .subscribe-section .input-group input{
        width: 100%;
    }

    .subscribe-section .input-group .input-group-append{
        width: 100%;
        margin-top: 10px;
    }

    .subscribe-section .input-group .input-group-append button{
        width: 100%;
    }

    .description {
        font-size: 14px;
        line-height: 29px;
    }

    .contact h3 {
        font-size: 24px;
        margin-top: 2rem;
        text-align: center;
    }

    #blog-section .blog-heading h4 {
        font-size: 18px;
    }

    .blogquoet h3 {
        font-size: 14px;
    }

    .blogquoet p {
        font-size: 12px;
    }

    .hair-style .hair1 .content-section h1 {
        font-size: 18px;
    }

    .serviceBox {
        height: auto;
    }

    #services .service-heading h1 {
        font-size: 30px;
    }

    .hair-style .hair1 .content-section span {
        font-size: 30px;
    }

    .boxcontent h3 {
        font-weight: 700;
        font-size: 20px;
    }

    #serviceList .service-heading h2 {
        font-size: 20px;
    }

    .size24 {
        font-size: 16px;
        font-weight: bold;
    }

    .contact-info span {
        font-size: 14px;
    }

    .contact-info a {
        font-size: 15px;
        color: #000;
        display: inline-block;
        text-decoration: none;
        text-transform: lowercase;
    }

}

/* Styles for medium screens */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .carousel-caption {
        width: 50%;
        top: 5%;
        position: absolute;
        /* right: 15%; */
        left: 25%;
        z-index: 10;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #fff;
        text-align: center;
        z-index: 1;
    }

    .carousel-caption h1 {
        font-size: 23px;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: #fff;
        padding: 1rem;
    }

    .carousel-caption h3.aos-init.aos-animate {
        font-size: 18px;
    }

    nav {
        margin-top: 15px;
    }

    nav .navbar {
        margin: 0;
    }

    .header {
        position: fixed;
        z-index: 9999;
        height: 100px;
        width: 100%;
        background: #000;
        padding: 0px;
        -webkit-transition: all ease-out .5s;
        -moz-transition: all ease-out .5s;
        -o-transition: all ease-out .5s;
        transition: all ease-out .5s;
    }

    #main-wrapper {
        padding-top: 10%;
    }

    .carousel-item img {
        height: auto;
    }

    .form-section form input {
        margin-bottom: 10px;
    }

    .hair-style {
        display: block;
    }

    .hair-style .hair1 {
        width: 100%;
        height: 400px;
    }

    .beauty-image .beauty2 {
        position: absolute;
        top: 48%;
        right: 0%;
    }

    .hair-price h2 {
        font-size: 30px;
    }

    #brand-slider {
        height: auto;
    }

    .subscribe-section h1 {
        font-size: 24px;
    }

    .owl-carousel {
        display: none;
        position: relative;
        width: 100%;
        margin-left: 12%;
    }
}

/* Styles for larger screens */
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .beauty-image .beauty2 {
        position: absolute;
        top: 47%;
        right: 0%;
    }

    .beauty-image .beauty2 img {
        width: 80% !important;
    }

    .owl-carousel {
        display: none;
        position: relative;
        width: 100%;
        margin-left: 12%;
    }
}

/* Styles for extra-large screens */
@media only screen and (min-width: 1280px) {
    .beauty-image .beauty2 {
        position: absolute;
        top: 20%;
        right: -20%;
    }

    .owl-carousel {
        display: none;
        position: relative;
        width: 100%;
        margin-left: 12%;
    }
}