@charset "utf-8";
/*..............embedded fonts..............*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*..............embedded fonts..............*/
/*font-family: "Montserrat", sans-serif;*/

/*..............custom fonts..............*/

:root{
    /* ~-~-~-~-~ common transition ~-~-~-~-~ */
    --transition-common: all 0.6s ease-in-out 0s;
    /* ~-~-~-~-~ common transition ~-~-~-~-~ */

    /* ~-~-~-~-~ colors ~-~-~-~-~ */
    --clr-primary: #555555;
    --clr-secondary: #474A53;
    --clr-orange: #FF5F15;
    --clr-white: #fff;
    --gray-bg: #EEEEEE;

    /* ~-~-~-~-~ colors ~-~-~-~-~ */

    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */
    --margin-title: 0 0 25px 0;
    --button-border-width: 1px;
    --button-border-style: solid;
    --button-broder-radius: 8px;

    --border-radius-image: 15px;
    --border-radius-card: 20px;
    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */
}

:root{
    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */
    --ff-base: "Montserrat", sans-serif;
    /*--ff-title: "Roboto", sans-serif;*/
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-sami-bold: 600;
    --fw-bold: 700;
    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */
    --f-size-XXXL: 60px;
    --f-size-XXL: 48px;
    --f-size-XL: 24px;
    --f-size-L: 22px;
    --f-size-M: 20px;
    --f-size-S: 18px;
    --f-size-Body: 18px;
    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */
}

body,p{ font-family: var(--ff-base); font-weight: var(--fw-regular); font-size: var(--f-size-Body); color: var(--clr-primary);}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ font-family: var(--ff-title); margin: var(--margin-title);}
h1,.h1{ font-size: var(--f-size-XXXL); font-weight: var(--fw-sami-bold); color: var(--clr-primary);}
h2,.h2{ font-size: var(--f-size-XXL); font-weight: var(--fw-sami-bold); color: var(--clr-secondary);}
h3,.h3{ font-size: var(--f-size-XL); font-weight: var(--fw-sami-bold); color: var(--clr-primary);}
h4,.h4{ font-size: var(--f-size-L); font-weight: var(--fw-sami-bold); color: var(--clr-primary);}
h5,.h5{ font-size: var(--f-size-M); font-weight: var(--fw-sami-bold); color: var(--clr-primary);}
h6,.h6{ font-size: var(--f-size-S); font-weight: var(--fw-bold); color: var(--clr-orange);}
p{margin: var(--margin-title);}


/*..............common styles..............*/
body { margin: 0; padding: 0; }
img{ max-width: 100%;}
a, img{ border:0; text-decoration: none; outline: none;}
a, a:link, a:visited, a:focus, a:hover { /*color: #179ae2;*/ outline: none; text-decoration: none; transition:all 0.3s ease 0s;}
a:hover{ text-decoration:none;}

input, textarea, select{ font-family: var(--ff-base); font-weight: var(--fw-regular); font-size: var(--f-size-Body); color: var(--clr-primary); outline: none;}
/*input[type="submit"]{ font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-size: 16px; transition:all 0.3s ease 0s; outline: none;}*/



/* --- Button Styles --- */
.btn { border: 0; display: inline-block; vertical-align: top; background-color: var(--clr-orange); color: var(--clr-white); 
    padding: 17px 50px; min-width: 200px; font-size: var(--f-size-Body); font-weight: var(--fw-medium); border-radius: 8px; text-transform: capitalize; position: relative; transition: var(--transition-common); overflow: hidden; z-index: 1;}
.btn.border { background-color:transparent; color: var(--clr-orange); border: 2px solid var(--clr-orange) !important; }
.btn:before{background-color: rgba(71, 74, 83, 0.3); position: absolute; left: 0; top: 0; height: 100%; width: 0; content: ""; transition: var(--transition-common); z-index: -1;}
.btn:hover:before{width: 100%;}
.btn:hover{background-color: var(--clr-orange); color: var(--clr-white); }

.btn.medium-size { /* Your custom Styles */ }
.btn.large-size { /* Your custom Styles */}

.btn:focus, button:focus{outline: none; box-shadow: none;}


/* --- Button Styles --- */


/*..............common styles..............*/

.click { display:none; /*color: #000; float: right; font-size: 28px;*/ position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;}
.main_menu a.closebtn{
    display: none;
    }

.common-padding{padding-top: 100px; padding-bottom: 100px;}
.gray-bg{background-color: var(--gray-bg);}
.common-bg{background-repeat: no-repeat; background-size: cover;}
.sec-overlay{position: relative;}
.sec-overlay:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); content: "";}
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p{color: var(--clr-white);}
.sec-overlay .row { position: relative;}

/*for header css*/
.main-header { /*background: rgba(30, 30, 34, 0.9);*/ padding: 20px 0;}
.headerRow{display: flex; justify-content: space-between; align-items: center;}

/*.logo { float: left;}*/
/*.dnt-btn { float: right; margin-left: 10px; padding-top: 5px;}
.dnt-btn a { background: #97c88b; color: #fff; text-transform: uppercase; border-radius: 6px; padding: 10px 25px; letter-spacing: 1px;}*/


.main_menu ul { margin: 0; padding: 0; list-style: none;}
.main_menu ul li { list-style: none; display: inline-block; vertical-align: top; margin: 0 25px; text-transform: capitalize; position: relative;}
.main_menu ul li a { display: block; padding: 15px 0; color: var(--clr-secondary);}
.main_menu ul li:hover a, .main_menu ul li.current-menu-item a { color: var(--clr-orange);}

.main_menu ul li.menu-item-has-children span { position: absolute; top: 12px; right: -15px; width: 10px; height: 24px;}

/*for header css*/

.slider-wrap { position: relative; padding-top: 40%;}
.slider-wrap>img { width: 100%; position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; z-index: -1;} 
.bann-content{position: absolute; top: 50%; transform: translateY(-50%); max-width: 955px;}
.slider-wrap:before{background: linear-gradient(89.54deg, #000000 -1.2%, rgba(0, 0, 0, 0) 105.23%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";}

.bann-content h1, .bann-content p{margin-bottom: 30px;}

/*for main sections css*/

.slick-arrow {
    background-color: var(--clr-orange) !important;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    z-index: 1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);
    transition: all 0.6s ease-in-out 0s;
}
.slick-prev {
    background-image: url(../images/strategic-arrowL.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    left: -60px;
}
.slick-next {
    background-image: url(../images/strategic-arrowR.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    right: -60px;
}
/*.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus*/

.slick-prev:before, .slick-next:before{display: none;}
.slick-arrow:hover{opacity: 0.8;}

/*-- hom-about-sec(Start) --*/

.hom-about-left{max-width: 785px;}
/*.hom-about-pics{position: relative;}*/
.hom-about-pics-top{position: relative; padding-top: 45%; border-radius: var(--border-radius-image); overflow: hidden; max-width: 592px;}
.hom-about-pics-top>img{position: absolute; top: 0; right: 0; width: calc(100% - 62px); height: calc(100% - 34px); object-fit: cover; border-radius: var(--border-radius-image);}

.hom-about-pics-bottom{position: relative; padding-top: 35%; border-radius: var(--border-radius-image); overflow: hidden; max-width: 419px;}
.hom-about-pics-bottom>img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 10px solid #FFF; border-radius: var(--border-radius-card);}

/*-- hom-service-sec(Start) --*/
.hom-service-box.slick-slide{margin: 0 15px;}
.hom-service-box{position: relative;}
.service_carousel .hom-service-box{ /*padding-top: 6.2%;*/ padding-top:22.2%;}
.hom-service-icon{width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-image); background-color: var(--clr-white); border: 1px solid var(--clr-orange); position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1; transition: var(--transition-common);}
.hom-service-box:hover .hom-service-icon{background-color: var(--clr-orange);}
.hom-service-box .hom-service-icon img{ transition: var(--transition-common);}
.hom-service-box:hover .hom-service-icon img{filter: brightness(0) invert(1);}

.hom-service-pic{position: absolute; left: 0; right: 0; top: 47px; bottom: 0; border-radius: var(--border-radius-card); overflow: hidden;}
.hom-service-pic img{width: 100%; height: 100%; object-fit: cover;}
.hom-service-pic:before{top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.45); position: absolute; content: "";}

.hom-service-content{position: absolute; left: 0; right: 0; padding: 10px; bottom: 28px; margin: 0 auto;}
.service_carousel .hom-service-content{ max-width: 261px;}
.hom-service-content h3{margin-bottom: 15px; text-transform: capitalize;}

.hom-service-arrow{width: 46px; height: 46px; margin: 0 auto; margin: 0 auto; border-radius: 100px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--clr-white); background-color: var(--clr-white); transition: var(--transition-common);}
.hom-service-arrow:hover{background-color: var(--clr-orange);}
.hom-service-arrow:hover img{filter: brightness(100) invert(1);}

/*-- hom-network-sec(Start) --*/
.hom-network-content { max-width: 648px; margin-left: auto;}

/*for main sections css*/


/*for footer sections css*/

footer { background-color: #2F3136;}
.ftr-top { padding: 100px 0 0px;}
.ftr-logo { margin: 0 0 30px;}
.ftr-menu { width: fit-content; margin-left: auto;}
.ftr-menu ul { margin: 0; padding: 0; list-style: none;}
.ftr-menu ul li { margin-bottom: 15px; text-transform:capitalize;}
.ftr-menu ul li a { color: var(--clr-white); transition: var(--transition-common);}
.ftr-menu ul li a:hover { color: var(--clr-orange); padding-left: 10px;}


.ftr-btm { border-top: 1px solid var(--clr-white); padding: 35px 0; text-align: center; color: #fff; margin-top: 50px;}
.ftr-btm p {margin-bottom: 0;}

.ftr-col h3 { text-transform: capitalize; margin-bottom: 30px; color: var(--clr-white);}


/*for footer sections css*/





/*-- map-location-css(Start) --*/

.map-container {
  position: relative;
  width: 600px;
}

.us-map {
  width: 100%;
}

.state {
  fill: #f4a582;
  stroke: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.state:hover {
  fill: #ff5722;
}

.marker {
  position: absolute;
  width: 18px;
  height: 18px;
  background: red;
  border-radius: 50%;
  display: none;
  transform: translate(-50%, -50%);
}

.state-name {
  margin-top: 10px;
  font-weight: bold;
}
/*-- map-location-css(End) --*/

/*--------- Inner-pages(Start) ---------*/

.slider-wrap.banner-inner {
    padding-top: 33%;
}

/*-- About-page(Start) --*/

.approach-pics-top {
    position: relative;
    padding-top: 45%;
    border-radius: var(--border-radius-image);
    overflow: hidden;
    max-width: 592px;
}
.approach-pics-top>img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 62px);
    height: calc(100% - 34px);
    object-fit: cover;
    border-radius: var(--border-radius-image);
}
.approach-pics-bottom {
    position: relative;
    padding-top: 35%;
    border-radius: var(--border-radius-image);
    overflow: hidden;
    max-width: 419px;
    margin-left: auto;
}
.approach-pics-bottom>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 10px solid #FFF;
    border-radius: var(--border-radius-card);
}

.approach-content{
    max-width: 785px;
    margin-left: auto;
}
.values-box{border: 1px solid var(--clr-white); border-radius: var(--border-radius-image); padding: 20px; height: 100%; position: relative; overflow: hidden;}
.values-box:hover{background-color: var(--clr-orange); transition: var(--transition-common);}
.values-icon{border: 1px solid var(--clr-orange); border-radius: 100%; overflow: hidden;  height: 60px; width: 60px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background-color: var(--clr-white);}
.values-content h6{margin-bottom: 10px;}
.box-link{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*-- About-page(End) --*/

/*-- New-pages-start(09-03-2026) --*/

    /*-- Services-page(Start) --*/

.hom-service-box {
    /* padding-top: 70%; */
    padding-top: 100%;
}

    /*-- Services-page(End) --*/

    /*-- Network-page(Start) --*/
    .network-box{
        border-radius: var(--border-radius-card);
        border: 2px solid var(--clr-orange);
        overflow: hidden;
        padding: 30px;
        transition: var(--transition-common);
        box-shadow: 0px 0px 1px 0px #757575;
        height: 100%;
    }
    .network-box:hover{background-color: var(--clr-orange); box-shadow: 0px 0px 7px 2px #757575;}
    .network-icon{margin-bottom: 30px; height: 108px;}
    .network-icon img{transition: var(--transition-common);}
    .network-box:hover .network-icon img{filter: brightness(2) invert(2);}
    .network-content h3 a{color: var(--clr-secondary); transition: var(--transition-common);}
    .network-box:hover .network-content h3 a{color: var(--clr-white);}

    .traffic-control-row{padding: 30px; box-shadow: 0px 4px 54px 0px #0000001A; border-radius: var(--border-radius-card); display: flex; flex-flow: row wrap; align-items: center;}
    .traffic-control-logo{border-radius: var(--border-radius-card); width: 34%; padding: 50px 30px;}
    .traffic-control-content{ width: 66%; padding-left: 30px;}
    .hom-network-pic{overflow: hidden;}

    /*-- Network-page(End) --*/

    /*-- Contact-page(Start) --*/

    .contect-box{padding: 50px; box-shadow: 0px 4px 54px 0px #0000001A; border-radius: var(--border-radius-card);}
    .form-control {
    border-radius: 50px;
    border: 1px solid var(--clr-primary);
    height: 58px;
    font-size: 14px;
    font-weight: var(--fw-regular);}


.form-control::placeholder {
  opacity: 1;
  color: var(--clr-primary);
}
.form-control::-webkit-input-placeholder { 
  color: var(--clr-primary);
}
.form-control::-moz-placeholder {
  color: var(--clr-primary);
}
.form-control:-ms-input-placeholder {
  color: var(--clr-primary);
}
textarea.form-control{height: 220px; border-radius: 20px;}
textarea { resize: none;}

    /*-- Contact-page(End) --*/



/*-- New-pages-End(09-03-2026) --*/

/*Media Query css*/


@media only screen and ( min-width:1201px ) {
    .container { max-width: 1124px;}
}

@media only screen and ( min-width:1401px ) {
    .container { max-width: 1224px;}
}

@media only screen and ( min-width:1601px ) {
    .container { max-width: 1424px;}
}

@media only screen and ( min-width: 1801px ) {
    .container { max-width: 1624px;}
}


/*@media only screen and ( min-width:1921px ) {

    body{max-width: 1920px!important; margin: 0 auto!important;}
    header { max-width: 1920px; margin: 0 auto; }
    
}*/

@media only screen and ( max-width:1800px ) {
    .main_menu ul li { margin: 0 20px;}
    .common-padding { padding-top: 80px;  padding-bottom: 80px;}
    .ftr-top { padding: 80px 0 0px;}
    .ftr-btm { padding: 25px 0; margin-top: 40px;}
    .ftr-logo { max-width: 275px;}

}
@media only screen and ( max-width:1600px ) {
    /*:root{
        --f-size-XXXL: 70px;
        --f-size-XXL: 65px;
        --f-size-XL: 55px;
        --f-size-L: 40px;
    }*/

    :root{
        --f-size-XXXL: 50px;
        --f-size-XXL: 40px;
        /*--f-size-XL: 24px;
        --f-size-L: 22px;
        --f-size-M: 20px;
        --f-size-S: 18px;
        --f-size-Body: 18px;*/

        /*--f-size-XXXL: 60px;
        --f-size-XXL: 48px;
        --f-size-XL: 24px;
        --f-size-L: 22px;
        --f-size-M: 20px;
        --f-size-S: 18px;
        --f-size-Body: 18px;*/

    }

    .main_menu ul li {
        margin: 0 16px;
    }
    .btn { padding: 12px 30px; min-width: 150px; border-radius: 6px;}
    .logo { max-width: 170px;}

    .common-padding { padding-top: 70px;  padding-bottom: 70px;}
    .ftr-top { padding: 70px 0 0px;}
    .ftr-btm { padding: 20px 0; margin-top: 30px;}

    .hom-service-icon { width: 80px; height: 80px;}
    .hom-service-box .hom-service-icon img { height: 45px;}
    .hom-service-arrow { width: 36px; height: 36px;}
    .hom-service-arrow img { width: 20px;}
    .hom-service-content { bottom: 10px;}
    .hom-service-box.slick-slide { margin: 0 10px;}
    .hom-service-pic {top: 37px;}
    .hom-about-pics-bottom>img { border-width: 6px;}
    .approach-pics-bottom>img { border-width: 6px;}
    .values-box { padding: 15px 10px;}
    .values-icon { margin-bottom: 15px;}


}
@media only screen and ( max-width: 1500px ) {
    :root{
        --f-size-XXXL: 42px;
        --f-size-XXL: 35px;
        --f-size-XL: 22px;
        --f-size-L: 20px;
        --f-size-M: 19px;
        --f-size-S: 17px;
        --f-size-Body: 17px;
    }
    .btn { padding: 10px 15px; min-width: 140px;}
    .logo { max-width: 150px;}
    .main-header { padding: 15px 0;}

    .common-padding { padding-top: 60px;  padding-bottom: 60px;}
    .ftr-top { padding: 60px 0 0px;}
    .ftr-btm { padding: 15px 0; margin-top: 20px;}
    
    

}
@media only screen and ( max-width: 1400px ) {
    :root{
        --f-size-XXXL: 38px;
        --f-size-XXL: 30px;
        --f-size-XL: 21px;
        --f-size-L: 19px;
        --f-size-M: 18px;
        --f-size-S: 16px;
        --f-size-Body: 16px;

        --margin-title: 0 0 20px 0;
    }
.slick-arrow { width: 34px; height: 34px; background-size: 15px !important;}
    .slick-prev {
    left: -40px;
}
.slick-next {
    right: -40px;
}
.bann-content h1, .bann-content p { margin-bottom: 25px;}
    
.hom-about-pics-bottom>img { border-width: 4px;}
.hom-about-pics-bottom { max-width: 359px;}
.approach-pics-bottom{ max-width: 359px;}
.approach-pics-bottom>img { border-width: 4px;}

.hom-service-arrow { width: 30px; height: 30px;}
.hom-service-arrow img { width: 14px;}
.hom-service-content h3 { margin-bottom: 10px;}
.ftr-logo { max-width: 200px;}

}
@media only screen and ( max-width:1300px ) {
	.service_carousel .hom-service-box {
    padding-top: 9.2%;}
}
@media only screen and ( max-width:1199px ) {
    :root{
        --f-size-XXXL: 34px;
        --f-size-XXL: 28px;

        /*--f-size-XL: 21px;
        --f-size-L: 19px;
        --f-size-M: 18px;
        --f-size-S: 16px;
        --f-size-Body: 16px;*/

        /*--f-size-XXXL: 38px;
        --f-size-XXL: 30px;
        --f-size-XL: 21px;
        --f-size-L: 19px;
        --f-size-M: 18px;
        --f-size-S: 16px;
        --f-size-Body: 16px;*/

        --border-radius-image: 10px;
        --border-radius-card: 15px;
    }
    .main_menu ul li { margin: 0 12px;}
    .btn { padding: 8px 10px; min-width: 130px;}
    .logo { max-width: 140px;}
    .main-header { padding: 10px 0;}
    .slick-arrow { width: 30px; height: 30px;}
    .slick-prev { left: -20px;}
    .slick-next { right: -20px;}
    .common-padding { padding-top: 50px; padding-bottom: 50px;}
    .ftr-top { padding: 50px 0 0px;}
    .ftr-logo { max-width: 160px;}
    .ftr-menu ul li a:hover { padding-left: 0px;}
    .values-icon { height: 50px; width: 50px;}
    

}
@media only screen and ( min-width: 1025px ) {
    .main_menu{
        display: block !important;
    }
    #mySidenav{
        width: auto !important;
    }
    .main_menu ul li.mob-contact-btn{display: none;}
}
@media only screen and ( max-width:1024px ) {

    :root{
        --f-size-XXXL: 32px;
        --f-size-XXL: 24px;

        --f-size-XL: 20px;
        --f-size-L: 18px;
        --f-size-M: 16px;
        --f-size-S: 15px;
        --f-size-Body: 15px;

        /*--f-size-XXXL: 34px;
        --f-size-XXL: 28px;
        --f-size-XL: 21px;
        --f-size-L: 19px;
        --f-size-M: 18px;
        --f-size-S: 16px;
        --f-size-Body: 16px;*/
    }

    /*-- toggle-new-menu-icon to cross-icon(Start) --*/
  /*{position: relative;
  padding: 1.5rem;}*/
    .menu-toggle {
  position: relative;
  right: 0;
  top: 0;
  /*transform: translate(0, -50%);*/
  /*height: 26px;
  width: 29px;*/
}
.menu-toggle, .menu-toggle:hover {
  color: #000;
}

.menu-toggle-bar {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  right: 0;
  margin: 0 auto;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 4px;
  background-color: var(--clr-orange);
  transition: all 0.3s ease;
}
.menu-toggle-bar.menu-toggle-bar--top {
  transform: translate(0, -8px);
}
.menu-toggle-bar.menu-toggle-bar--bottom {
  transform: translate(0, 8px);
}
.nav-open .menu-toggle-bar.menu-toggle-bar--top {
  transform: translate(0, 0) rotate(45deg);
}
.nav-open .menu-toggle-bar.menu-toggle-bar--middle {
  opacity: 0;
}
.nav-open .menu-toggle-bar.menu-toggle-bar--bottom {
  transform: translate(0, 0) rotate(-45deg);
}
    /*-- toggle-new-menu-icon to cross-icon(End) --*/

    .click{
        display: block;
        cursor: pointer;
    }
    .main_menu a.closebtn{
        color: #000;
        display: block;
    }
    /*.main_menu{
        display: none;
        width: 100%;
        position: relative;
    }
    .main_menu ul {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background: #fff;
    width: 100%;
    }
    .main_menu ul li{
       display: block;
    }
    .main_menu ul li a {
    padding: 6px 0px;
    }*/

    /*-- For_mob_menu(Start) --*/
    .main_menu {
        /*height: 100%;*/
    min-height: calc(100vh - 60px);
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 60px;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.98);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 999;
    right: -100%;
    }
    body.nav-open .main_menu {
    right: 0 !important;
    }

    .main_menu a {
        /*padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;*/
        display: block;
        transition: 0.3s;
    }

    .main_menu a:hover {
        color: #333;
    }

    .main_menu .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    body.scrollOff{height: 100vh; overflow: hidden; position: relative;}
    /*body.scrollOff:before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, 0.5); z-index: 1;}*/

    .main_menu>ul { max-width: 720px; margin: 0 auto;}
    .main_menu ul li:hover ul.sub-menu { display: none;}
    .main_menu ul li.menu-item-has-children.active ul.sub-menu{display: block;}
    ul.sub-menu { position: relative; left: 0; width: 100%; border-radius: 0px; top: 0px;}
    .main_menu ul li.menu-item-has-children span { top: 12px; right: 0px; width: 14px; height: 18px;}
    .main_menu ul li{display: block;}
    .header-right{display: none;}
    .main_menu ul li a { padding: 12px 0;}

    .main_menu ul li.mob-contact-btn a{text-align: center; background-color: var(--clr-orange); color: var(--clr-white); border-radius: 6px;}

    /*-- For_mob_menu(End) --*/
    .bann-content h1, .bann-content p { margin-bottom: 20px;}
    

}
@media only screen and ( max-width: 991px ) {
    :root{
        --f-size-XXXL: 26px;
        --f-size-XXL: 22px;

        --f-size-XL: 19px;
        --border-radius-image: 8px;
        --border-radius-card: 12px;
        /*--f-size-L: 18px;
        --f-size-M: 16px;
        --f-size-S: 15px;
        --f-size-Body: 15px;*/


        /*--f-size-XXXL: 32px;
        --f-size-XXL: 24px;

        --f-size-XL: 20px;
        --f-size-L: 18px;
        --f-size-M: 16px;
        --f-size-S: 15px;
        --f-size-Body: 15px;*/
    }
    .bann-content { max-width: 505px;}
    .logo { max-width: 120px;}
    .hom-about-pics-top, .hom-network-pic, .approach-pics-top{ margin: 0 auto 30px; }
    .hom-network-content { max-width: inherit; margin-left: 0;  text-align: center;}
    .hom-about-left, .approach-content{ text-align: center;}
    .ftr-logo { max-width: 150px;}
    .ftr-menu ul li { margin-bottom: 10px;}

}
/*@media only screen and ( min-width: 767px ) {
    .main_menu{
        display: block !important;
    }
}*/

@media only screen and ( max-width: 767px ) {
    .main_menu>ul { max-width: 540px;}
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        width: 95%;
    }
    .slider-wrap>img { height: auto;}
    .slider-wrap { padding-top: 39%;}
    .slider-wrap.banner-inner { padding-top: 32%;}




    .slick-arrow { width: 30px; height: 30px; background-size: 15px !important;}
    
    .slick-prev { left: -10px;}
    .slick-next { right: -10px;}
    .hom-service-box.slick-slide { margin: 0 5px;}
    .bann-content { position: relative; top: 0; transform: translateY(0px); padding: 30px 20px; text-align: center;}
    .slider-wrap .container { background-color: #333;  width: 100%; max-width: inherit;}
    .bann-content { margin: 0 auto;}
    .main-header { padding: 6px 0;}
    .main_menu { min-height: calc(100vh - 52px); top: 52px; padding-top: 40px;}
    .ftr-menu { width: auto; text-align: center;}
    .ftr-content{text-align: center; margin-bottom: 30px;}
    .ftr-logo { margin: 0 auto 20px; max-width: 130px;}
    .ftr-col h3 { margin-bottom: 20px;}

    .slider-wrap.banner-inner .bann-content h1{margin-bottom: 0;}
    

}
@media only screen and ( max-width: 575px ) {
    :root{
        --f-size-XXXL: 22px;
        --f-size-XXL: 20px;

        --f-size-XL: 18px;
        --f-size-L: 17px;
        --f-size-M: 15px;
        --f-size-S: 14px;
        --f-size-Body: 14px;

        /*--f-size-XXXL: 26px;
        --f-size-XXL: 22px;

        --f-size-XL: 19px;
        --f-size-L: 18px;
        --f-size-M: 16px;
        --f-size-S: 15px;
        --f-size-Body: 15px;*/
    }
    .logo { max-width: 100px;}
    .main_menu ul li a { padding: 9px 0;}
    .hom-about-pics-top>img { width: calc(100% - 32px); height: calc(100% - 24px);}
    .hom-about-pics-bottom { max-width: 319px;}
    .approach-pics-top>img { width: calc(100% - 32px); height: calc(100% - 24px);}
    .approach-pics-bottom { max-width: 319px;}
    .values-box { text-align: center;}
    .values-icon { margin: 0 auto 15px;}
    .common-padding { padding-top: 40px; padding-bottom: 40px;}
    .ftr-top { padding: 40px 0 0px;}
    .bann-content { padding: 20px 0px;}
    


}
@media only screen and ( max-width: 480px ) {
.slick-arrow {
        width: 24px;
        height: 24px;
        background-size: 12px !important;}
        .hom-service-icon {
        width: 70px;
        height: 70px;
    }
    .hom-service-box .hom-service-icon img {
        height: 38px;
    }
    .hom-about-pics-bottom {
        max-width: 219px;
    }
    .approach-pics-bottom { max-width: 219px;}
    


}

/*Media Query css*/