/* Medium screen  */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about-us-left {
        margin-right: 0;
    }

    .main-service-one-sec-content {
        padding: 38px 20px 45px;
    }

    .main-service-one-sec-content h3 {
        font-size: 20px;
    }

    .funfacts-one-single .content p {
        font-size: 13px;
        line-height: 23px;
    }

    .portfolio-text h4 {
        font-size: 11px;
        line-height: 22px;
    }

    .blog-one-title h3 {
        font-size: 17px;
    }

    .footer-widget-gallery {
        margin-left: 0;
        margin-top: 40px;
    }

    .footer-widget-contact {
        margin-top: 40px;
    }

    .about-two-left-content {
        margin-bottom: 50px;
    }

    .history-one-sec-content {
        margin-right: 0;
    }

    .history-one-video-sec {
        margin-left: 0;
    }

    .service-details-sidebar {
        margin-bottom: 50px;
    }

    .faq-one-left h3 {
        font-size: 34px;
        line-height: 44px;
    }

    .error-image img {
        max-width: 800px;
        margin: 0 auto;
    }

    .contact-one-image {
        max-width: 800px;
        margin: 0 auto 60px;
    }

    .contact-one-form {
        max-width: 800px;
        margin: 0 auto;
    }

    .contactinfo-content p {
        font-size: 11px;
    }








}






/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about-us-left {
        margin-right: 0;
    }

    .about-us-right {
        max-width: 600px;
        margin: 30px auto 0;
    }

    .portfolio-text h4 {
        font-size: 11px;
        line-height: 22px;
    }

    .portfolio-one-content .filter-tabs li {
        padding: 12px 18px 12px;
    }

    .footer-widget-gallery {
        margin-left: 0;
        margin-top: 40px;
    }

    .footer-widget-contact {
        margin-top: 40px;
    }

    .about-two-left-content {
        margin-bottom: 50px;
    }

    .history-one-sec-content {
        margin-right: 0;
        margin-bottom: 75px;
    }

    .history-one-video-sec {
        margin-left: 0;
    }

    .service-details-sidebar {
        margin-bottom: 50px;
    }

    .testimonials-one-single .client-info .client-content h3 {
        font-size: 21px;
    }

    .faq-one-left {
        margin-bottom: 50px;
    }

    .error-image img {
        max-width: 750px;
        margin: 0 auto;
    }

    .contact-one-image {
        margin: 0 auto 60px;
    }

    .sidebar-tag {
        margin-bottom: 30px;
    }

    .blog-details-two-img-box-single.mar-30 {
        margin-bottom: 30px;
    }

    .comment-form {
        margin-bottom: 50px;
    }

    .inner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }


    .book p {
        font-size: 12px;
        margin-bottom: 15px;
        line-height: 18px;
        margin-top: 12px;
    }

    .usage h3 {
        font-weight: 700;
        color: var(--thm-primary);
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cover h1 {
        color: var(--thm-primary);
        font-size: 22px;
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        /* top: 0px; */
        /* margin-bottom: 20%; */
        font-family: var(--body-font);
        margin-top: 30%;
    }

    .prd- span {
        justify-content: start;
        display: flex;
        width: 100%;
        max-width: max-content;
        border: 0px solid var(--light-medium-gray);
        border-bottom: 0px solid var(--light-medium-gray);
        padding: 8px 0px;
        position: absolute;
        top: 50%;
        background-color: transparent;
        font-size: 16px;
        color: black;
    }

    .prdt span {
        justify-content: flex-end !important;
        display: flex !important;
        width: 100% !important;
        max-width: max-content;
        border: 0px solid var(--light-medium-gray);
        border-bottom: 0px solid var(--light-medium-gray);
        padding: 8px 0px;
        position: absolute;
        top: 50%;
        background-color: transparent !important;
        font-size: 16px;
        color: black;
    }


}

/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
    .about-us-left {
        margin-right: 0;
    }

    .about-us-right {
        max-width: 600px;
        margin: 30px auto 0;
    }

    .about-us-left .experience-years .year h3 {
        font-size: 40px;
        line-height: 40px;
    }

    .about-us-left .experience-years {
        bottom: 20px;
    }

    .about-us-right .title h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .main-service-one-sec-content {
        padding: 38px 20px 45px;
    }

    .main-service-one-sec-content h3 {
        font-size: 20px;
    }

    .funfacts-one-single {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .funfacts-one-single .icon span {
        line-height: 70px;
    }

    .portfolio-text h4 {
        font-size: 11px;
        line-height: 22px;
    }

    .portfolio-one-content .filter-tabs li {
        max-width: 243px;
        width: 100%;
    }

    .most-trusted-skill {
        padding-left: 0;
    }

    .most-trusted-skill-icon {
        position: relative;
    }

    .most-trusted-text {
        margin-left: 0;
    }

    .blog-one-title h3 {
        font-size: 17px;
    }

    .footer-widget-gallery {
        margin-left: 0;
        margin-top: 40px;
    }

    .footer-widget-contact {
        margin-top: 40px;
    }

    .footer-widget-useful-links {
        margin-top: 40px;
    }

    .about-two-left-content {
        margin-bottom: 50px;
    }

    .about-two-right-content {
        margin-left: 0;
        margin-top: 0;
    }

    .video-two-sec-inner {
        flex-direction: column;
    }

    .video-two-sec-content {
        margin-left: 0;
        text-align: center;
        margin-top: 20px;
    }

    .history-one-sec-content {
        margin-right: 0;
        margin-bottom: 75px;
    }

    .history-one-video-sec {
        margin-left: 0;
    }

    .history-one-sec-title h2 {
        font-size: 36px;
        line-height: 46px;
    }

    .testimonials-one-single .client-info .client-content h3 {
        font-size: 16px;
    }

    .faq-one-left {
        margin-bottom: 50px;
    }

    .accordion-box .block .acc-btn .icon-outer {
        right: 8px;
    }

    .error-title h3 {
        font-size: 40px;
        line-height: 50px;
    }

    .error-image img {
        max-width: 305px;
        margin: 0 auto;
    }

    .contact-one-image {
        margin: 0 auto 60px;
    }

    .blog-pg-pagination .pg-pagination li {
        margin-right: 0px;
    }

    .sidebar-tag {
        margin-bottom: 30px;
    }

    .blog-details-two-img-box-single.mar-30 {
        margin-bottom: 30px;
    }

    .author-one {
        flex-direction: column;
        align-items: inherit;
    }

    .author-one-content {
        margin-left: 0;
        margin-top: 20px;
    }

    .comment-one-single {
        flex-direction: column;
    }

    .comment-one-content {
        margin-left: 0;
        margin-top: 20px;
    }

    .comment-form {
        margin-bottom: 50px;
    }

    .grid_video {
        height: 400px;
        width: 100vw;
    }

    .grid-wrapper>div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 100vw;
        padding: 10px;
    }

    .grid-wrapper>div>img {
        width: 90%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;

    }

    .grid-wrapper .wide {
        grid-column: span 2;
        /* width: fit-content; */
        width: 100vw;
    }

    .grid-wrapper .tall {
        grid-row: span 2;
        width: fit-content;
        width: 100vw;
    }

    .grid-wrapper .big {
        grid-column: span 2;
        /* grid-row: span 1; */
        /* width: fit-content; */
        width: 100vw;
    }

    .grid-wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
        /* grid-auto-rows: 200px; */
        /* grid-auto-flow: dense; */
        margin-bottom: 5%;
    }

    .inner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }

    .book p {
        font-size: 12px;
        margin-bottom: 15px;
        line-height: 18px;
        margin-top: 12px;
    }

    .usage h3 {
        font-weight: 700;
        color: var(--thm-primary);
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cover h1 {
        color: var(--thm-primary);
        font-size: 22px;
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        /* top: 0px; */
        /* margin-bottom: 20%; */
        font-family: var(--body-font);
        margin-top: 30%;
    }

    .prd- span {
        justify-content: start;
        display: flex;
        width: 100%;
        max-width: max-content;
        border: 0px solid var(--light-medium-gray);
        border-bottom: 0px solid var(--light-medium-gray);
        padding: 8px 0px;
        position: absolute;
        top: 50%;
        background-color: transparent;
        font-size: 16px;
        color: black;
        right: 97%;
    }

    .prdt span {
        justify-content: flex-end !important;
        display: flex !important;
        width: 100% !important;
        max-width: max-content;
        border: 0px solid var(--light-medium-gray);
        border-bottom: 0px solid var(--light-medium-gray);
        padding: 8px 0px;
        position: absolute;
        top: 50%;
        background-color: transparent !important;
        font-size: 16px;
        color: black;
    }
    .footer_padding{
        padding: 0;
}
}







@media only screen and (min-width: 1200px) and (max-width: 1765px) {}











/* Responsive CSS  */

@media only screen and (max-width: 7000px) {
    .wrapper_box {
        overflow: hidden;
    }
}


@media only screen and (min-width: 1200px) {
    .mobile-menu .menu-box {
        display: none;
    }

    .nav-outer .mobile-nav-toggler {
        display: none;
    }

    .mobile-menu {
        pointer-events: none;
        background: transparent;
    }
}


@media only screen and (min-width: 991px) {

    .main-menu .navigation>li>ul,
    .main-menu .navigation>li>ul>li>ul {
        display: block !important;
        visibility: hidden;
        opacity: 0;
    }
}




@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header_upper_two_box .icon-search-box {
        float: left;
        margin-left: 0;
        margin-right: 25px;
    }

    .main-header .nav-outer {
        float: right;
    }

    .main-header-two-nav-box .icon-search-box {
        float: right;
        margin-right: 5px;
    }

    .main-header-two-nav-box .nav-outer {
        float: left;
    }

}

@media only screen and (max-width: 1199px) {
    .main-header-two-nav-box-inner {
        padding: 0 17px;
    }

    .header_upper-two_inner {
        padding: 18px 0;
    }

    .fixed-header .sticky-header {
        display: none;
    }

    .banner-section.two {
        margin-top: 190px;
    }

    .features-one-sec-single {
        margin-bottom: 30px;
    }

    .header_upper_two_box .icon-search-box {
        padding: 23px 0;
    }

    .header_upper_two_box.one {
        margin-top: 13px;
    }
}

@media only screen and (max-width: 991px) {
    .banner-section.two {
        margin-top: 130px;
    }

    .header_upper_one_box .logo {
    position: relative;
    display: block;
    padding: 0px 0 14px;
}
}

@media only screen and (max-width: 767px) {}



@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header_top {
        display: none;
    }

    .header_upper_two_box .icon-search-box {
        float: left;
        margin-left: 0;
        margin-right: 25px;
    }

    .main-header .nav-outer {
        float: right;
    }

    main-header.two .header_top {
        display: none;
    }

    .header_upper_two-right_box {
        display: none;
    }


    .main-header-two-nav-box .icon-search-box {
        float: right;
        margin-right: 5px;
    }

    .main-header-two-nav-box .nav-outer {
        float: left;
    }

    .header_upper_two_box {
        float: none;
        text-align: center;
    }

    .header_upper_two_box.one .icon-search-box {
        float: right;
    }






}

@media only screen and (max-width: 767px) {
    .header_top {
        display: none;
    }

    .header_upper_two_box .icon-search-box {
        display: none;
    }

    main-header.two .header_top {
        display: none;
    }

    .header_upper_two-right_box {
        display: none;
    }

    .main-header-two-nav-box .icon-search-box {
        float: right;
        margin-right: 5px;
    }

    .main-header-two-nav-box .nav-outer {
        float: left;
    }

    .header_upper_two_box {
        float: none;
        text-align: center;
    }

    .header_upper_two_box.one .nav-outer {
        float: right;
        width: 40px;
    }

}



/* Slider Responsive CSS  */


@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .banner-section .content-box {
        padding-left: 130px;
    }

    .banner-section.two .content-box {
        padding-left: 130px;
    }



}





@media only screen and (max-width: 767px) {
    .banner-section .banner-slider-nav {
        display: none;
    }

    .banner-section .content-box h1 {
        font-size: 49px;
        line-height: 60px;
    }

    .banner-section .content-box h1 br {
        display: none;
    }

    .banner-section .link-box a.right-btn {
        margin-left: 0;
        margin-top: 20px;
    }











}






















@media only screen and (min-width: 1200px) and (max-width: 1435px) {
    .banner-section .content-box {
        padding-left: 150px;
    }

    .banner-section.two .content-box {
        padding-left: 150px;
    }

}

@media only screen and (min-width: 360px) and (max-width: 767px) {
    /* .front,
.back {
    position: relative;
    flex: none;
    width: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    background-color: #fff;
Fix backface visibility Firefox:
     translate: 0px;
    height:400px;
}*/

    .book {
        position: relative;
        display: flex;
        margin: auto;
        width: 337px;
        pointer-events: none;
        transform-style: preserve-3d;
        transition: translate 1s;
        translate: calc(min(var(--c), 1) * 50%) 0%;
        rotate: 1 0 0 0deg;
    }

    .book_scroll {
        overflow: scroll;
    }

    .book {
        width: 700px !important;
    }

    .page {
        width: 50%;
        height: 65vh;
    }

    .h-9 {
        height: auto;
    }

    .back .fix {
        width: 120px;
    }

    .front.newf {
        display: flex;
        flex-direction: row;
        overflow: scroll;
    }

    .back {
        display: flex;
        flex-direction: row;
        overflow: scroll;
    }
    .width-contact {
    max-width: 100%;
}

.contactinfo {
    position: relative;
    display: block;
    padding: 0 0 70px;
    margin-top: 50px;
    z-index: 1;
}
}







/* responsive css */

@media only screen and (min-width:367px) and (max-width: 767px) {
    .banner-section .content-box {
        position: relative;
        display: table-cell;
        vertical-align: middle;
        padding: 6px 0 0px;
    }

    .about-two2-sec-image-bg-1 {
        /* position: absolute;
        top: 383px;
        left: -22px;
        height: 212px;
        width: 233px;
        background-repeat: no-repeat;
        background-position: top left;
        z-index: -1; */
        display: none;
    }

    .banner-big-title {
        position: absolute;
        right: 40px;
        bottom: 50px;
        text-transform: uppercase;
        font-size: 54px;
        font-weight: 900;
        letter-spacing: 5px;
        line-height: 145px;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: rgb(255 255 255 / 0.2);
        color: transparent;
        z-index: 99;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family: var(--heading-font);
    }

    .theme-btn {
        display: inline-block;
        font-size: 16px;
        color: #ffffff;
        background: var(--thm-primary);
        /* padding: 8px 35px; */
        font-weight: 500;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .why-choose-two-image img {
        width: 100%;
        height: 405px;
    }

    .quary {

        height: 444px !important;
        position: absolute;
        width: 179px !important;

    }

    .box-image-2 {
        height: 195px;
        width: 200px;
        left: 146px;
        /* border: 12px solid white; */
        border-top: 12px solid white;
        border-left: 12px solid white;
    }

    .box-main {
        background-color: var(--thm-primary);
        height: 250px;
        width: 164px;
        ;
        text-align: center;
        padding: 7px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: white;
    }

    .about-two-sec-image-bg-1 {
        /* position: absolute;
        top: 383px;
        left: -22px;
        height: 233px;
        width: 233px;
        background-repeat: no-repeat;
        background-position: top left;
        z-index: -1; */
        display: none;
    }

    .font-25 {
        font-size: 41px;
        font-weight: lighter;
        margin-top: 65px;
        margin-left: 13px;
    }

    .eco {
        height: 326.62px;
        width: auto;
    }

    .portfolio-text p {
        font-size: 18px;
        color: white;
        margin: 0;
        font-weight: bold;
        letter-spacing: 0.7px;
    }

    .portfolio-text {
        position: absolute;
        bottom: 79px;
        left: 50%;
        right: -13px;
        transform: translateX(-50%) translateY(80px);
        text-align: center;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        background-color: #ffffff7a;
        padding: 10px;
        width: 100%;
        margin: auto;
    }

    .counter-wrap4 {
        /* padding: 0 0.75rem; */
        margin-left: 8px;
        /* line-height: 20px; */
    }

    .conter-gap {
        display: flex;
        gap: 20px;
        align-items: center;
        margin-top: 30px;
    }

    .about-two-btn .theme-btn {
        padding-left: 43px;
        padding-right: 42px;
        text-transform: uppercase;
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .box_con {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* border: 1px solid black; */
        padding: 30px;
        gap: 40px;
        margin: 60px 0px 80px;
    }

    .cover h1 {
        color: var(--thm-primary);
        font-size: 22px;
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        /* top: 0px; */
        /* margin-bottom: 20%; */
        font-family: var(--body-font);
        margin-top: 30%;
    }
    .footer_padding{
        padding: 26px !important;
    }
     .contect_img{
          width: 100%;
     }
     
     .logo img {
    width: 165px;
}
.nav-outer .mobile-nav-toggler {
    position: relative;
    font-size: 21px;
    line-height: 20px;
    cursor: pointer;
    color: #FD8E0F;
    padding: 7.5px 9px 2px;
    right: 0;
    /*background-color: var(--thm-primary);*/
    top: 10px;
    border-radius: 5px;
}
     

}





@media only screen and (min-width:768px) and (max-width: 1024px) {
    .quary {
        height: 595px;
        position: absolute !important;
        width: 368px !important;
    }

    .counter-wrap4 {
        padding: 0 0.75rem;
        margin-left: 0px;
    }

    .counter-area-4:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: var(--smoke-color);
        /* width: 21%; 
         -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); 
        z-index: 0;
        background-color: rgb(241, 238, 238); */
    }

    .eco {
        height: 326.62px;
        width: auto;
    }

    .features-two-sec-single {
        position: relative;
        display: block;
        background: #ffffff;
        margin-bottom: 30px;
        border-radius: 5px;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        box-shadow: 0 0 20px 3px rgb(0 0 0 / 2%);
        padding: 50px 40px;
        height: 506px;
    }

    .portfolio-text p {
        font-size: 18px;
        color: white;
        margin: 0;
        font-weight: bold;
        letter-spacing: 0.7px;
    }

    .box_con {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* border: 1px solid black; */
        padding: 30px;
        gap: 40px;
        margin: 60px 0px 80px;
    }

    .book {
        position: relative;
        display: flex;
        margin: auto;
        width: 337px;
        pointer-events: none;
        transform-style: preserve-3d;
        transition: translate 1s;
        translate: calc(min(var(--c), 1) * 50%) 0%;
        rotate: 1 0 0 0deg;
    }

    .book_scroll {
        overflow-y: scroll;
    }

    .book {
        width: 1000px !important;
        height: 60vh;
    }

    .page {
        width: 50%;
        height: 60vh;
    }

    .h-9 {
        height: auto;
    }

    .back .fix {
        width: 220px;
    }

    .front.newf {
        display: flex;
        flex-direction: row;
        overflow: scroll;
    }

    .back {
        display: flex;
        flex-direction: row;
        overflow: scroll;
    }

    .book_con {
        display: flex;
        justify-content: start;
    }

    .product_description {
        flex-direction: column;
    }

    .prdt {
        display: flex !important;
        justify-content: end !important;
        width: auto !important;
    }

    .cover h1 {
        color: var(--thm-primary);
        font-size: 22px;
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        /* top: 0px; */
        /* margin-bottom: 20%; */
        font-family: var(--body-font);
        margin-top: 36%;
    }


    .banner-section .content-box {
        padding-left: 130px;
    }

    .banner-section .content-box h1 {
        font-size: 70px;
        line-height: 80px;
    }

    .banner-section.two .content-box {
        padding-left: 130px;
    }

    .banner-section.two .content-box h1 {
        font-size: 70px;
        line-height: 80px;
    }

}