/* ========================================================================== */
/*                               RESPONSIVE STYLES                            */
/* ========================================================================== */
/*
* This file contains responsive styles for various screen sizes.
* Media queries are organized from larger to smaller devices.
*/

/* Default styles for larger screens */
.mobile_icon_wrap, .resposnive_header_nav, .resposnive_header {
    display: none;
}

/* XX-Large devices (larger desktops, 2200px and up) */
@media (min-width: 2200px) and (max-width: 2800px) {
    .about_content_wrap {
        left: 19%;
    }
    .about_content_wrap h4 {
        font-size: clamp(2rem, 6vw, 3.5rem);
    }
    .about_content_wrap p {
        width: 28%;
    }
}

@media (min-width: 2001px) and (max-width: 2199px) {
    .about_content_wrap {
        left: 19%;
    }
    .about_content_wrap h4 {
        font-size: clamp(2rem, 6vw, 3.5rem);
    }
    .about_content_wrap p {
        width: 29%;
    }
}

@media (min-width: 2000px) and (max-width: 2099px) {
    .about_content_wrap p {
        width: 30%;
    }
}

/* X-Large devices (large desktops, 1600px and up) */
@media (max-width: 1600px) {
    .web_nav li a, .transit_bg.web_nav li a {
        padding: 30px 18px 30px 18px !important;
    }
}

/* Large devices (desktops, 1500px and up) */
@media (max-width: 1500px) {
    .career_wrap h1{padding-top: 80px;}
    #project-quotes-content h1{padding-top: 80px;}
    .index_service_anchor {
        left: -150px;
    }
    .index_service_title h5 {
        font-size: 1.3rem;
    }
    .keep_secure_wrap h4 {
        font-size: 4rem;
    }
    .web_nav li a, .transit_bg.web_nav li a {
        padding: 30px 15px 30px 15px !important;
    }
    .banner_main_wrap p:after {
        width: 110%;
        bottom: -70px;
    }
    .about_bg_img img {
        aspect-ratio: 3 / 1;
    }
}

/* Medium devices (tablets, 1400px and up) */
@media (max-width: 1400px) {
    .about_content_wrap p {
        width: 46%;
    }

    .web_nav li a, .transit_bg.web_nav li a {
        padding: 30px 13px 30px 13px !important;
    }
}

/* Small devices (landscape phones, 1301px and up) */
@media (max-width: 1301px) {
    .quote_content_info h6 {
        font-size: 3rem;
    }
    .banner_main_wrap h1 {
        font-size: clamp(2.5rem, 9vw, 4rem);
    }
    .banner_main_wrap p {
        font-size: clamp(2rem, 6vw, 3rem);
        padding-top: 20px;
    }
    .about_bg_img img {
        aspect-ratio: 2 / 1;
    }
    .web_nav li a, .transit_bg.web_nav li a {
        padding: 30px 12px 30px 12px !important;
    }
}

/* Extra Small devices (portrait phones, 1255px and up) */
@media (max-width: 1255px) {
    .web_nav li a, .transit_bg.web_nav li a {
        padding: 30px 8px 30px 8px !important;
    }
}

/* Extra Small devices (portrait phones, 1200px and up) */
@media (max-width: 1200px) {
    .web_nav li a, .transit_bg.web_nav li a {
        padding: 30px 5px 30px 5px !important;
    }
    .keep_secure_wrap h4 {
        font-size: 3.2rem;
    }
    .about_content_wrap p {
        width: 54%;
    }
}

/* Extra Small devices (portrait phones, 1143px and up) */
@media (max-width: 1143px) {
    .about_content_wrap p {
        width: 59%;
    }
    .menu_secion_wrap {
        display: none;
    }
    .transit_bg:before {
        box-shadow: none;
    }
    .top_menu {
        background-image: none;
    }
    .transit_bg {
        box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
    }
    .desk_top_menu {
        display: none;
    }
    .mobile_icon_wrap {
        display: block;
        text-align: right;
    }
    .mobile_icon i {
        font-size: 3rem;
        padding-top: 12px;
        color: #764293;
    }
    .resposnive_header {
        display: block;
    }
    .resposnive_header img {
        width: 100%;
        padding-top: 4px;
    }
    .resposnive_header a {
        color: #764293;
        text-decoration: none;
        font-family: 'Source Sans 3', sans-serif;
        font-weight: 600;
        font-size: 1rem;
    }
    .btn_sign {
        background-color: #fff;
        padding: 9px;
        border-radius: 20px;
    }
    .top_menu li {
        padding: 6px 0px;
    }
    .resposnive_header li {
        list-style: none;
    }
    .social_icon_wrap ul li {
        padding: 0px 5px;
    }
    .social_main_wrap {
        justify-content: space-around;
    }
    #open_nav {
        left: 0;
        z-index: 100000;
        padding-left: 12px;
    }
    /* .resposnive_header .active{left: -600px!important;} */
    .resposnive_header_nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        height: 100%;
        display: block;
        background-color: #fff;
        box-shadow: 0px 0px 12px 2px #000;
        left: -700px;
        transition: left 0.2s linear;
        width: 50%;
        margin: 0px;
    }
    .web_menu_bar {
        display: none;
    }
    .menu_holder {
        height: 96px;
    }
    .resposnive_header {
        display: block;
        background-color: #fff;
        position: fixed;
        top: -3px;
        left: 0;
        right: 0;
        z-index: 15;
        box-shadow: 0px 0px 8px 0px #505050;
        padding: 20px 0px;
    }
    .quote_content_info h6 {
        font-size: 1.9rem;
    }
    .banner_main_wrap p {
        font-size: clamp(2rem, 6vw, 2.3rem);
    }
    .product_single_content {
        padding: 0px 10px;
    }
    .service_single_main_wrap {
        position: relative;
    }
    .service_single_img {
        height: 300px;
        position: relative;
        z-index: 1;
    }
    .index_service_content {
        margin-top: 0px;
    }
    .index_service_title {
        position: relative;
        z-index: 2;
        left: 0;
        width: 100%;
        min-height: auto !important;
    }
    .index_service_title::after {
        bottom: -10px;
        top: unset;
        right: 50% !important;
        z-index: 1;
        left: unset;
        transform: rotate(89deg);
    }
    .index_service_anchor {
        position: relative;
        top: -200px;
        transition: all 1s ease;
        z-index: 1;
        overflow: hidden;
        width: 100%;
        min-height: auto !important;
        left: unset;
    }
    .service_single_cont:hover .index_service_title {
        left: 0;
        width: 100%;
    }
    .service_single_cont:hover .index_service_anchor {
        top: 0px;
    }
    .service_single_cont:hover .index_service_title::after {
        bottom: -24px;
    }
}

/* Tablets (portrait and landscape, 987px and down) */
@media (max-width: 987px) {
    .quote_img_wrap {
     aspect-ratio: unset;
}
    .check-list{text-align: start;}
    .index_like_wrap{min-height: 550px;}
    #testimonial .owl-wrapper-outer{overflow: hidden!important;}
    .service-item {text-align: center;}
    .about_page_content h2 {text-align: center;}
    .about_page_content p{text-align: center;}
    .index_banner_wrap::before {
        background-position: right;
    }
 .index_like_wrap::before{background: radial-gradient(unset);background-color: #000; opacity: 80%;}
.about_page_content .col-lg-4{padding: 0px 10px;}
.about_page_content .col-lg-4::after {display: none;}
    .product_single_info {
        padding: 30px 0px 10px 0px;
    }
    .index_like_content h5 {
        font-size: 1.9rem;width: 100%;
    }
    .index_like_content span {
        font-size: 1.9rem
    }
    .quote_img_wrap img {
        height: 300px;
    }
    /* .index_like_wrap {
        top: 105px;
    } */
    .index_service_wrap {
        background-color: #ffffff;padding-top: 20px;
    }
    .back_img_wrap img {
        min-height: 350px;
    }
    .upper_logo_part img {
        width: 30%;
        object-fit: contain;
    }
    .footer_logo_wrap {
        width: 100%;
    }
    .banner_main_wrap h1 {
        color: #ffffff;
        font-size: 2rem;
    }
    .banner_main_wrap p {
        font-size: 1.2rem;
        padding-bottom: 20px;
        padding-top: 10px;
    }
    .quote_content_info h6 {
        margin: 0px auto;
    }
    .quote_main_content {
        padding-top: 20px;
        text-align: center;
    }
    .index_like_content p {
        padding-right: 0px;
    }
    .index_like_content {
        text-align: center;
        padding: 30px 20px;
    }
    .production_main_wrap p {
        padding: 0px 0px;
    }
    .production_upper_info {
        width: 100%;
    }
    .about_bg_img img {
        aspect-ratio: unset;
        height: 250px;
    }
    .about_content_wrap p {
        padding-right: 20px;
        padding-left: 20px;
        width: 100%;
    }
    .about_content_wrap {
        position: unset;
        width: 100%;
        text-align: center;
        background-color: #000;
        padding: 30px 20px;
    }
    .keep_secure_wrap h4 {
        font-size: 2rem;
        padding: 50px 0px;
    }
    .menu_secion_wrap {
        display: none;
    }
    .transit_bg:before {
        box-shadow: none;
    }
    .top_menu {
        background-image: none;
    }
    .transit_bg {
        box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
    }
    .desk_top_menu {
        display: none;
    }
    .mobile_icon_wrap {
        display: block;
        text-align: right;
    }
    .mobile_icon i {
        font-size: 3rem;
        padding-top: 12px;
        color: #764293;
    }
    .resposnive_header {
        display: block;
    }
    .resposnive_header img {
        width: 100%;
        padding-top: 4px;
    }
    .resposnive_header a {
        color: #764293;
        text-decoration: none;
        font-family: 'Source Sans 3', sans-serif;
        font-weight: 600;
        font-size: 1rem;
    }
    .btn_sign {
        background-color: #fff;
        padding: 9px;
        border-radius: 20px;
    }
    .top_menu li {
        padding: 6px 0px;
    }
    .resposnive_header li {
        list-style: none;
    }
    .social_icon_wrap ul li {
        padding: 0px 5px;
    }
    .social_main_wrap {
        justify-content: space-around;
    }
    #open_nav {
        left: 0;
        z-index: 100000;
        padding-left: 12px;
    }
    .resposnive_header_nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        height: 100%;
        display: block;
        background-color: #fff;
        box-shadow: 0px 0px 12px 2px #000;
        left: -750px;
        transition: left 0.2s linear;
        width: 77%;
        margin: 0px;
    }
    .web_menu_bar {
        display: none;
    }
    .menu_holder {
        height: 96px;
    }
    .resposnive_header {
        display: block;
        background-color: #fff;
        position: fixed;
        top: -3px;
        left: 0;
        right: 0;
        z-index: 15;
        box-shadow: 0px 0px 8px 0px #505050;
        padding: 20px 0px;
    }
  
}

/* Smallest devices (portrait phones, 768px and down) */
@media (max-width: 768px) {
     
    .quote_content_info h6::after {
        right: -20px;
        min-width: 100%;
        bottom: -20px;
    }
    .keep_secure_wrap h4 {
        padding: 0px 0px;
    }
    .keep_bg_img img {
        min-height: 48px;
        object-fit: cover;
    }
    .about_content_wrap h4 {
        padding: 0px 20px 20px 20px;
        font-size: 2.2rem;
    }
    .about_industries_wrap{margin-top: -80px;}
}

/* Extra Smallest devices (portrait phones, 650px and down) */
@media (max-width: 650px) {
    .footer_logo_wrap ul{gap: 10px;}
    .footer_logo_wrap ul li{padding: 0px 0px;}
        .owlCarousel .service_single_img{width: 100%;margin: 0px auto;}
    .owlCarousel .index_service_anchor{left: 0;top: 0;}
    .owlCarousel .service_single_cont:hover .service_single_img::before{left: 0px;opacity: 0;} 
    #testimonial .owl-buttons .owl-next{right: 0px;top: 40%;background-color: transparent;}
        #testimonial .owl-buttons .owl-prev{left: 0px;top: 40%;background-color: transparent;}
    .keep_secure_wrap .container-fluid {
        top: 11px;
    }
    .keep_secure_wrap h4 {
        padding: 0px 0px;
        font-size: 1rem
    }
}

/* Extra Smallest devices (portrait phones, 500px and down) */
@media (max-width: 500px) {
        .about_bg_img img{min-height: 350px;}
        .quote_content_info h6::after {
        right: -35px;
        min-width: 112%;
        bottom: -1px;
    }
    .banner_main_wrap p:after {
        width: 119%;
        bottom: -75px;
    }
       .index_like_wrap {
        min-height: 500px;
    }
    .back_img_wrap img{
        height: 350px;
    }
    /* .index_like_wrap {
        top: 91px;
    } */
}