/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) { 
    .logo img{
        width: 15%
    }
    .sub-header{
        font-size: 12px;
    }
    #myBtn{
        bottom: 90px;
    }
    section.body-bannar{
        margin-top: 7rem;
    }

    html{
        font-size: 90%;
    }
    
}
/* Tablet & mobile Layout: 768px. */
@media only screen and (max-width: 991px) { 

    .logo img{
        width: 25%
    }
    .main-header .logo a{
        font-size: 2rem;
    }
    .main-header{
        padding: .25rem 1rem;
    }
    .sub-header{
        font-size: 12px;
    }
    .sub-head{
        display: flex;
        flex-direction: column;
    }
    .pro-gal-area{
        column-count: 3;
        column-gap: 1em;
    }
    #myBtn{
        bottom: 90px;
    }
    section.body-bannar{
        margin-top: 7rem;
    }
    .single-slide{
        position: relative;
        height: 70vh;
    }

    #menu-btn{
        display: initial;
    }

    #menu-btn.fa-times{
        transform:rotate(180deg);
    }

    .header .navbar{
        position: absolute;
        top:99%; left:0; right:0;
        background:#fff;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    .header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    .header .navbar ul li{
        display: block;
        text-align: center;
        transition: all 2s;
    }
    html{
        scroll-padding-top: 5.5rem;
    }


}

/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) { 
    html{
        scroll-padding-top: 7rem;
    }
    .logo img{
        width: 16%
    }
    .sub-head{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .sub-header .fas, .far, .fab {
        margin-right: .5rem;
        margin-bottom: 2px;
    }
    .sub-header .container .row{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-header .logo a{
        font-size: 3.5rem;
    }
    section.body-bannar{
        margin-top: 7rem;
    }
    .single-slide{
        position: relative;
        height: 70vh;
    }
    .right-col {
        margin-left: 0;
    }
    .right-col p {
        margin-left: 0;
        font-size: 15px;
    }
    .right-col ul.item-name{
        font-size: 15px;
    }
    .right-col .item-name span {
        font-size: 15px;
        font-weight: 600;
        display: block;
    }
    .right-col .item-name i{
        font-size: 10px;
        text-align: center;
        margin: 0 8px;
        color: rgb(140, 165, 172);
    }
    .pro-gal-area{
        column-count: 3;
    }
    .social-like .social-icon{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }
    .social-icon i {
        margin: 0 12px;
        font-size: 26px;
    }   
    .social-like .row {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
        text-align: center;
        margin: 5px 0;
    }
    .social-like .social-icon:nth-child(2n+2){
        border-right:none;
    }
    .logo-carousel .owl-nav {
        width: 25%;
    }
    #myBtn{
        bottom: 90px;
    }
    .footer-area p, .footer-area li a{
        font-size: 14px;
    }
    .footer-area h2{
        font-size: 24px;;
    }
    .footer-area ul li {
        margin: 0 0;
    }

}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) { 
    html,body{
        overflow-x: hidden;
    }
    html{
        scroll-padding-top: 5rem;
    }
    .main-header .logo a{
        display: none;
    }
    .sub-header{
        display: none;
    }
    .sub-head{
        display: flex;
        flex-direction: column;
    }
    .header{
        padding: 10px 0;
    }
    section.body-bannar{
        margin-top: 80px;
    }
    .box-boder{
        border-right: none;
    }
    .main-header .bannar a{
        font-size: 2rem;
    }
    .logo img{
        width: 25%
    }
    .menu-bar{
        display: block;
    }
    .bannar{
        text-align: center;
    }
    .single-slide{
        position: relative;
        height: 45vh;
    }
    .content-text{
        display: block;
        width: 100%;
        color: #fff;
        padding: 10px 10px;
    }
    .content-text h4{
        font-size: 18px;
        font-weight: 400;
    }
    .content-text p{
        font-size: 15px;
        font-weight: 200;
    }
    .social-area{
        padding: 5px 5px;
        height: auto;
    }
    .pro-gal-area{
        column-count: 2;
    }
    .product-img img{
        background-color: #eee;
        display: inline-block;
        width: 100%;
    }
    .logo-carousel .owl-nav {
        display: none;
    }
    .testimonial-slider .single-slides{
        width: 90%;
        margin: 0 auto;
    }
    .sub-footer .col-md-6{
        text-align: center;
    }
    .social-like .social-icon{
        font-size: 20px;
        border-right: 2px solid grey;
    }
    .social-like .social-icon:nth-child(2n+2){
        border-right:none;
    }
    .right-col {
        margin-left: 0;
    }
    .right-col p {
        margin-left: 0;
        font-size: 16px;
    }
    .right-col ul.item-name{
        font-size: 16px;
    }
    .right-col .item-name span {
        font-size: 18px;
        font-weight: 600;
        display: block;
    }
    .right-col .item-name i{
        font-size: 8px;
        text-align: center;
        margin: 0 8px;
        color: rgb(140, 165, 172);
    }
    .alignleft {
        margin-right: 0;
    }
 
    .social-area{
        margin: 0 auto;
    }
    .section-title h3{
        font-size: 1.6rem;
    }
    .section-title h3 .fab{
        margin: 0 .5rem;
    }
    .social-like .row{
        display: grid;
        grid-template-columns: auto auto ;
        row-gap:2px;
        text-align: center;
    }
    .social-icon span {
        width: 60px;
    }
    .slide-area .owl-nav {
        font-size: 30px;
    }
    #myBtn{
        bottom: 90px;
    }
    .about{
        padding-top: 0;
    }
    .sub-footer{
        font-size: 14px;
    }
    .footer-area p{
        font-size: 16px;
    }
    .footer-area .head-line{
        font-size: 18px;
    }
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    html,body{
        overflow-x: hidden;
    }
    .sub-header{
        display: none;
    }
    .sub-head{
        display: flex;
        flex-direction: column;
    }
    .header{
        padding-top: 20px;
    }
    section.body-bannar{
        margin-top: 6.5rem;
    }

    .box-boder{
        border-right: none;
    }
    .main-header .logo a{
        font-size: 2.0rem;
    }
    .logo img{
        width: 20%;
    }
    .menu-bar{
        display: block;
    }
    .single-slide{
        position: relative;
        height: 60vh;
    }
    .content-text{
        display: block;
        width: 100%;
        color: #fff;
        padding: 10px 10px;
    }
    .content-text h4{
        font-size: 18px;
        font-weight: 400;
    }
    .content-text p{
        font-size: 15px;
        font-weight: 200;
    }
    .social-area{
        padding: 5px 5px;
        height: auto;
    }
    .pro-gal-area{
        column-count: 2;
    }
    .product-img img{
        background-color: #eee;
        display: inline-block;
        width: 100%;
    }
    .logo-carousel .owl-nav {
        display: none;
    }
    .testimonial-slider .single-slides{
        width: 90%;
        margin: 0 auto;
    }
    .sub-footer .col-md-6{
        text-align: center;
    }
    .social-like .social-icon{
        font-size: 20px;
        border-right: 2px solid grey;
    }
    .social-like .social-icon:nth-child(2n+2){
        border-right:none;
    }
    .right-col {
        margin-left: 0;
    }
    .right-col p {
        margin-left: 0;
        font-size: 16px;
    }
    .right-col ul.item-name{
        font-size: 16px;
    }
    .right-col .item-name span {
        font-size: 18px;
        font-weight: 600;
        display: block;
    }
    .right-col .item-name i{
        font-size: 8px;
        text-align: center;
        margin: 0 8px;
        color: rgb(140, 165, 172);
    }
    .alignleft {
        margin-right: 0;
    }
 
    .social-area{
        margin: 0 auto;
    }
    .section-title h3{
        font-size: 2rem;
    }
    .social-like .row{
        display: grid;
        grid-template-columns: auto auto;
        row-gap:5px;
        text-align: center;
    }
    .social-icon span {
        width: 60px;
    }
    .slide-area .owl-nav {
        font-size: 30px;
    }
    #myBtn{
        bottom: 90px;
    }
    .about{
        padding-top: 0;
    }
    .sub-footer{
        font-size: 14px;
    }
    .footer-area p{
        font-size: 16px;
    }
    .footer-area .head-line{
        font-size: 18px;
    }
}