@charset "utf-8";
/* CSS Document */

/* Begin Font  */

@font-face {
    font-family: 'Work Sans-light';
    src: url('../fonts/WorkSans-Light.eot');
    src: url('../fonts/WorkSans-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-Light.woff2') format('woff2'),
        url('../fonts/WorkSans-Light.woff') format('woff'),
        url('../fonts/WorkSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans-medium';
    src: url('../fonts/WorkSans-Medium.eot');
    src: url('../fonts/WorkSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-Medium.woff2') format('woff2'),
        url('../fonts/WorkSans-Medium.woff') format('woff'),
        url('../fonts/WorkSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans-semiBold';
    src: url('../fonts/WorkSans-SemiBold.eot');
    src: url('../fonts/WorkSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WorkSans-SemiBold.woff2') format('woff2'),
        url('../fonts/WorkSans-SemiBold.woff') format('woff'),
        url('../fonts/WorkSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}





:root {
    /* Colors: */
    --forest: #347A6A;
    --forest-original: #578270;
    --grass: #A8CC3D;
    --grass-original: #AEC700;
    --shadow: #657076;
    --shadow-original: #737373;
    --orange: #F78F1D;
    --orange-original: #F28000;
    --berry: #B92E92;
    --berry-original: #C4008F;
    --magenta: #D6006E;
    --night: #492F91;
    --night-original: #59178A;
    --sky: #0FBBE5;
    --sky-original: #00B8E0;
    --steel: #5786C5;
    --steel-original: #667DD1;
    --petrol: #0FA9A6;
    --petrol-original: #00A39C;
    --ice: #D7D8DA;
    --ice70-: #E3E3E5;
    --ice-10-: #F5F6F6;
    --ice-original: #DBD9D1;
    --white: #FFFFFF;
    --text: #61676A;
    --footer: #37393B;

    --hoverRed:#d5474c;
    --trans-3:.3s all ease-in-out 0s;
    --btnBg:#d50b13;
    --textRed:#d9151c;
    --btnGradient:linear-gradient(45deg, #c71d1d, #7a0000);
    --btnGray:#3a3a42;
    
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-weight-normal: normal;

    --unnamed-font-size-15: 15px;
    --unnamed-font-size-45: 45px;
    --unnamed-font-size-70: 70px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-character-spacing-0-75: 0.75px;
    --unnamed-line-spacing-25: 25px;
    --unnamed-line-spacing-40: 40px;
    --unnamed-line-spacing-43: 43px;
    --unnamed-line-spacing-60: 60px;
    --unnamed-text-transform-uppercase: uppercase;


    --font-light: 'Work Sans-light';
    --font-medium: 'Work Sans-medium';
    --font-semiBold: 'Work Sans-semiBold';

    }
    
    /* Character Styles */
    h1 {
    font-family: var( --font-light);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-70);
    line-height: var(--unnamed-line-spacing-60);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    text-transform: var(--unnamed-text-transform-uppercase);
    }
    h2 {
    font-family: var( --font-light);
    font-style: var(--unnamed-font-style-normal);
    line-height: var(--unnamed-line-spacing-40);
    margin-bottom: .5em;
    text-transform: var(--unnamed-text-transform-uppercase);
    font-size: clamp(20px,3vw,36px);
    color: #000;
    text-align: center;
    letter-spacing: 1px;
    }
    h3 {
    font-family: var( --font-light);
    font-style: var(--unnamed-font-style-normal);
    font-size: var(--unnamed-font-size-15);
    line-height: var(--unnamed-line-spacing-43);
    letter-spacing: var(--unnamed-character-spacing-0-75);
    color: var(--unnamed-color-ffffff);
    text-transform: var(--unnamed-text-transform-uppercase);
    }
    h4{font-family: var( --font-light);}

    body {
    font-style: var( --font-light);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-15);
    line-height: var(--unnamed-line-spacing-25);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-657076);
    }
    b{ font-family: var( --font-semiBold);}


    /*Begin Page loader style */
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; 
    height: 100%; overflow: visible; background: #fff url("../images/preloader.gif") no-repeat center center; }
div#preloader1 { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; 
    height: 100%; overflow: visible; background: #fff url("../images/preloader.gif") no-repeat center center; }
    /*End Page loader style */

/* common tag style ------------------------------*/
html,body{scroll-behavior: smooth;}
:focus{outline:none;}
body{margin:0; font-size:15px; color:#333333;overflow-x:hidden;font-family: var( --font-light), sans-serif; }

[disabled] {pointer-events: none;}

a{color:#333333;outline:none!important;}
a:hover,a:focus{color:#114aa0;}
p {font-size: 14px;color:#000; line-height: 28px;font-family: var( --font-light); }
.btn{color: #fff; border-radius: 2px; font-family:var( --font-light), sans-serif;letter-spacing: 2px;
padding: 10px 15px; text-transform: uppercase; position: relative;background: #3a3a42;font-size: 12px;  border: none;border-radius: 3px;
transition:.3s all ease-in-out 0s; -moz-transition:.3s all ease-in-out 0s;-webkit-transition:.3s all ease-in-out 0s; -o-transition:.3s all ease-in-out 0s;}
.btn:hover, .btn:focus {background: none; color:#fff;}
.anim{transition:.3s all ease-in-out 0s; -moz-transition:.3s all ease-in-out 0s;-webkit-transition:.3s all ease-in-out 0s; -o-transition:.3s all ease-in-out 0s;}
.white{color:#fff;}
/*------------------------------------*/




.wrapper{/*min-height:800px;*/ min-height: initial;}
.container-fluidCustom {width: min(1920px,85%);margin: 0px auto;}
.container2 {width: min(1500px,85%);}

.menuSec{z-index: 50;padding: 10px;; position: fixed;margin: 0px auto; left: 0; right: 0;margin-top:3em;transition: .3s all ease-in-out 0s;}
header {width: 100%;top: 0;z-index: 10;background: none;padding:0;   margin: 0; }
.headerSec {align-items: center;   margin-top: -2px; margin-bottom: 0;}
.nav-up {top: -9em; overflow: hidden; top:0;}
.logo img {max-width: 80%;}

.sticky {box-shadow: -2px -4px 31px 1px #545454; position: fixed;  width: 100%;  top: 0;  z-index: 100; transition: var(--trans-3);}
.sticky .headerMenu {border-top: 1px solid #585555; border-bottom: 1px solid #585555;}

.headerTop { display: flex;  flex-wrap: nowrap;  justify-content: space-between; align-items: center;margin:0px auto;position: relative;}
.hTopleft {margin-left:3em;margin-left: clamp(0px,3vw,3em);max-width: 55%; flex: 1 0 0;}
.hTopleft ul{justify-content: flex-start;}
.hTopRight ul{    justify-content: flex-start;}
.hTopleft ul,.hTopRight ul { list-style: none; padding: 0; display: flex; margin: 0;align-items: center;}
.hTopleft ul{justify-content: space-between;}
.headerTop li a { color: #fff; font-family:  var( --font-light), sans-serif; font-size: 15px;text-transform: uppercase; padding: 0 2px;text-decoration: none;transition: .3s all ease-in-out 0s;
display: flex;flex-wrap: nowrap;  align-items: center; white-space: nowrap;  }
.headerTop li a:hover, .headerTop li a:focus {color: #000;}
.headerTop li.active a{color: #000;}

.marg-0 {margin-top: 0;background: linear-gradient(134deg, #763cc0, #6c71d8);}

.headerBar {background: #3A3A42;box-shadow: 0px 4px 6px 1px #141414;}
.headerBFlex{ padding: 7px 170px; display: flex;align-items: center;max-width: 1920px; margin: 0px auto;position: relative;}
.container-fluid{padding-left: 3em;  padding-right: 3em;}

/* for header going to bottom box */
.marg-0 {margin-top: 0;background: linear-gradient(134deg, #1d93b7, #1168a7);
height: 230px;width: 112px;right: 5px;margin: 0;left: auto;bottom: 5px;top: auto;margin: 0px auto;border-radius: 10px;}
.marg-0 .hTopCenter {display: none;}
.marg-0 .menuList { display: flex;flex-direction: column;    gap: 5px;justify-content: flex-start;    text-align: left;width: 100%;}
.marg-0 .hTopleft {margin: 0;}
.marg-0 .headerTop {align-items: center;justify-content: center;}
.marg-0 .menuList li a { font-size: 12px;}
/* End for header going to bottom box */

.sliderBg{background: url(../images/slider-BG.svg) no-repeat scroll center center;height: 1075px;background-size: cover; max-width: 1920px; margin:0px auto;}
.sliderSec{position: relative;}
.slideContent {position: absolute; top: 0; left: 0; right: 0;}
.slidePic{width: 100%;}
.slideVid img {max-width: 85%; border-radius: 5px;}
.sliderRow {display: flex;padding-top: 13em;gap: 20px;justify-content: center;align-items: center;}
.sliderLeft,.sliderRight {flex: 1 0 50%;max-width: 50%;}
.sliderLeft {padding-right: 2em;}
.sliderLeft h1 {font-size: clamp(15px,3vw,46px);color: #fff;font-weight: initial;line-height: normal;    margin-bottom: .5em;}
.sliderLeft p {color: #fff;}
.slideVid video {width:100%; border-radius: 5px;}


.homeVideoSec video {width: 100%;}
section.homeVideoSec {padding-top: 2em;}
section.homeVideoSec video { border-radius: 3px;}


.secRow {display: flex;gap: 20px;margin-bottom: 3em;gap: 30px;padding: 2em 0;}
.secRow .secLeft,.secRow .secRight {flex: 1 0 0;}
.secRow h2 {font-size: clamp(20px,3vw,36px);text-align: left;}
.secRow h4 {color: #2633CB;margin-bottom: 1em;}
.secRow img{max-width: 100%; border-radius: 20px;}
.colTwist .secLeft {order: 2;}
.grayBg{background: url(../images/bg2.svg) no-repeat scroll center center;height: 840px;background-size: cover;padding-top: 8em; max-width: 1920px; margin:0px auto;}
#manufacture .secRow { margin-bottom: 0;}


.footerBg{background: url(../images/footerBg.svg) no-repeat scroll center center;height: 65em;background-size: cover;padding-top: 8em; max-width: 1920px; margin:0px auto;}
.formBox {margin: 0px auto;width: min(500px,95%);display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.getInTouchSec h2,.contactInfoSec h2 {color: #fff;margin-bottom: 1em;}
.getInTouchSec {margin-top: 3em;}
.formGp input,.formGp textarea {width: 100%;padding: 10px;background: no-repeat;border: 1px solid #c1c1c1;color: #fff;border-radius: 2px;}
.formGp input::placeholder, .formGp textarea::placeholder {color: #fff;}
/*.formBox .formGp:nth-child(5) {grid-column: 1/3;}*/
.formBox .formGp:nth-child(6) {grid-column: 1/3;text-align: center;}
.subBtn {padding: 10px 50px;background: no-repeat;border: 1px solid #ddd;border-radius: 2px;background: #ddd;color: #000; font-size: 14px;}

.contactInfoSec {margin: 5em auto;text-align: center;width: min(500px,90%);}
.contactInfoSec p {color: #fff;margin: 0 0 .5em;}
.height100{height:100%;display: flex;flex-direction: column;}
.copyrightBtm {margin-top: auto;text-align: center;width: 100%;color: #ddd;}

.manuListUL {list-style: none;padding: 0;display: grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(200px,1fr));}
.manuListUL li img {max-width: 100%;}
.manuListUL li {transition:.3s all ease-in-out 0s;}
.manuListUL li:hover,.manuListUL li:focus{transform: scale(1.1);}
.manuListUL li figure {margin: 0;border: 1px solid #edebeb;padding: 1em;border-radius: 20px;}
.manuListUL li figcaption {white-space: nowrap;font-size:clamp(12px,1vw,14px);overflow: hidden;text-overflow: ellipsis;text-align: center;}
.manufactureListRow { margin-bottom: 3em;}

.themeSelection {display: flex;align-items: center;justify-content: center;border: 1px solid #fff;padding: 0 10px;border-radius: 48px;}
.icon {width: 19px;height: 19px;font-size: 17px;}
.ico {width: 25px;margin-right: 2px;}


body.dark-mode {background: #17152d;}
.themeSelection{cursor: pointer;border-color: #1f0d58;background: #1f0d58;color: #ddd !important;}
.themeSelection a{color: #fff;;}
.dark-mode h2 {color: #fff;}
.dark-mode .secRow h4 {color: #b49aff;}
.dark-mode p {color: #eee;}
.dark-mode .manuListUL li figcaption {color: #eee;}
.dark-mode .themeSelection {background: #ebebeb;color: #222 !important; border-color:#ebebeb;}
.dark-mode .grayBg {background: url(../images/bg2-dark.svg) no-repeat scroll center center;}
.dark-mode .sliderBg {background: url(../images/slider-BG-dark.svg) no-repeat scroll center center;}
.dark-mode .footerBg {background: url(../images/footerBg-dark.svg) no-repeat scroll center center;}
.dark-mode .marg-0 {background: linear-gradient(134deg, #3e387e, #26254a);}


@media (min-width: 2000px) {
    .sliderSec{background: linear-gradient(45deg, #7831bb, #6984e1);}
    .sliderBg{height: fit-content; background: none;padding-bottom: 5em;}
    .grayBgOuter {  background: #f3f4fc; }
    .grayBg{height: fit-content; background: none;padding-bottom: 2em;}
    .footerSec{background: linear-gradient(45deg, #7831bb, #6984e1);}
    .footerBg{height: fit-content; background: none;padding-bottom: 5em;}
}

@media (min-width: 1920px) {
    
  

}

@media (min-width: 1600px) {
    .container-fluid{max-width: 1920px;padding: 0 170px;}
   
  

}

@media (max-width: 1600px) {

 

 
   
       
}

@media (max-width: 1500px) {








 }


@media (max-width: 1399.98px) { 

p {font-size: 12px; line-height: 22px;}





}

@media (max-width: 1199.98px) { 

p {font-size: 12px;line-height: 21px;  }





 }

@media (min-width: 991.98px) {
    #cssmenu{ display: block !important;}
    .topMenuMobContent {display: none!important; }
    .mobIconsMenu{display: none;}
}

@media (max-width: 991.98px) {
    .mobIconsMenu{display: block;position: absolute; top: -51px;width: 100%;left:0;display: flex;justify-content: flex-end;align-items: center;right: 50px;gap: 15px;padding-right: 2em;}
    .onlyMobView{display: block;}
    .headerTop{height:80px;}
    .headerTop { padding: 10px 1em 10px; position: unset;}
    .menuSec { z-index: 100;  margin-top: -30px;  padding-top: 30px;background: #fff;  position: inherit;background: linear-gradient(45deg, #063260, #31a5c3);}
    .headerMenu {border-top: 1px solid #2f2f2f;border-bottom: 0;height: 61px; background: #1d1d1d;}


.sliderRow{padding-top:2em;    flex-direction: column;}
.sliderLeft{order:2;}
.sliderLeft, .sliderRight{max-width: 100%;}
.secRow {flex-direction: column;}
.secRow .secLeft, .secRow .secRight{max-width:100%;}
.colTwist .secLeft { order: initial;}
.grayBg{height:auto;}





/*mobile icon Tab  start*/
.mobileIcon,.topMenuMobIco{display: block;top: 20px;width: 40px; height:30px; border-radius: 100px; right: 0; left: auto; margin-left: auto;background:#fff;border: 2px solid transparent;
display: flex; justify-content: center; align-items: center;transition: .3s all ease-in-out 0s;}
.mobileIcon:hover,.mobileIcon:focus{border-color:#3c87f3;width: 45px;}
.mobileIcon i, .topMenuMobIco i {font-size: 25px;    color: #161616;}
.menuList{flex-direction: column;padding: 0;width: 100%;margin-left: -15px; }
.headerMenu{position: relative;}
#cssmenu{position: relative;display: none;position: absolute !important; background:linear-gradient(45deg, #063260, #31a5c3);  top: 77px; left:0;  padding: 15px;    width: 100%;  height: 100%; z-index: 20;box-shadow:0px 12px 11px 0px #636363;}
#cssmenu > ul > li > a{display: flex; justify-content: center;}
.menuList li{position: relative; width: 100%;}
.megaSub{position: absolute!important;top:50px; display: none;}
.megaSub { height: auto!important; width:100%;left: 0; right: 0; min-height: auto; margin: 0px auto;margin-left: auto;opacity: 1; visibility: visible; display: none;}
.subMenuTab { opacity: 1;  visibility: visible;  height: auto;}
#cssmenu > ul { position: initial;}
#cssmenu > ul > li:hover .megaSub {height: 380px;opacity: 1;visibility: visible;}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a{border: none; background:#e9e9e9;}
li.megaLi.open .megaSub { display: block;}
.megaSub{box-shadow: none;}
.mobSearch:hover span i,.mobileLoginIcon:hover i,.mobbileCartIcon:hover i,.mobileIcon:hover i { color: #ed1c24;}
.hTopleft ul {height: 85%;}

.mobIco {width: 24px; height: 24px; display: block;background-size: contain !important;}
.moSearch{background: url(../images/mobile-search.svg) no-repeat scroll center center;}
.mobUser{background: url(../images/mobile-user.svg) no-repeat scroll center center;}
.mobCart{background: url(../images/mobile-cart.svg) no-repeat scroll center center;}
.mobMenu{background: url(../images/mobile-menu.svg) no-repeat scroll center center;}



}


 
@media (max-width: 767.98px) { 


.btn{font-size: 10px;padding: 8px 15px;}
h2{font-size: 17px;}
p{font-size: 12px;line-height: 25px;}
.logo img {max-width: 50%;}
.menuSec{margin-top:0;}
.headerTop {height: 30px;}
.menuSec{padding-top:17px;}
#cssmenu{top:55px;}
.sliderBg{background: linear-gradient(45deg, #063260, #31a5c3);height:auto;}
.secRow h4{font-size: 16px;}
.formGp input, .formGp textarea{padding:5px; font-size: 12px;}
.formGp {grid-column: 1/3;}
.manuListUL{grid-template-columns: repeat(auto-fill, minmax(150px,1fr));}

}

 
 @media (max-width: 575.98px) { 







 }