/* You can add global styles to this file, and also import other style files */ 

@font-face {
    font-family: 'ClashGrotesk';
    src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'),
         url('../fonts/ClashGrotesk-Variable.woff') format('woff'),
         url('../fonts/ClashGrotesk-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;
}

*:after,
*:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}


:root {
    --orange-clr:#F86F03;
    --orangelight-clr:#F78023;
    --skyblue-clr:#EDEFFF;
    --lightpink-clr:#FFF8F2;
    --blue-clr: #11196B;
    --bluelight:#1F256E;
    --darkblue-clr:#02083D;
    --white-clr: #FFF;
    --balck-clr:#1F1F1F;
    --black-clr-sec: #3A342E;
    --ash-clr: #615B57;
    --cement-clr:#E0DFDE;
    --darkcement-clr:#8C8885;
    --cementlight-clr:#F5F5F5;

    --fw300:300;
    --fw400:400;
    --fw500:500;
    --fw600:600;
    --fw700:700;
    --fw800:800;
    --fw900:900;
  }
  

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

caption,
th {
  text-align: left;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
}

header,
nav,
section,
article,
aside,
footer,
hgroup,
figure {
  display: block;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
button{border: none;background: none;}
button:focus,
input:focus,
.form-control:focus,
.btn:focus {
  outline: none;
  box-shadow: none;
  outline-color: transparent;
  outline-width: 0;
}
input, button, textarea, select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
  margin-bottom: 0;
  overflow-wrap: break-word;
}
ul , li {list-style: none;padding-left: 0px;}

html,
body {
  font-family: 'ClashGrotesk';
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}

a,
a:hover {
  text-decoration: none;
  outline: 0;
  outline-color: transparent;
  outline-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: initial;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body {
  font-size: 16px;
  width: 100% !important;
  color: #000000;
  font-weight: 400;
}

/*text font-styles */
.fs-100,h1{font-size: 100px;font-weight: var(--fw700);line-height: 110%;letter-spacing: -2px;color: var(--blue-clr);text-transform: uppercase;}
.fs-64,h2{font-size: 64px;font-weight:  var(--fw700);line-height: 120%;letter-spacing: -1px;color: var(--blue-clr);text-transform: uppercase;}
.fs-48,h3{font-size: 48px;font-weight:  var(--fw600);line-height: 120%;color: var(--blue-clr);text-transform: uppercase;}
.fs-40,h4{font-size: 40px;font-weight: var(--fw600);line-height: 120%;color: var(--blue-clr);text-transform: uppercase;}
.fs-32,h5{font-size: 32px;font-weight: var(--fw600);line-height: 120%;color: var(--blue-clr);}
.fs-24,h6{font-size: 24px;font-weight: var(--fw500);line-height: 140%;color: var(--blue-clr);}

.p-20,p{font-size: 20px;font-weight: var(--fw500);line-height: 150%;color: var(--black-clr-sec);}
.p-16{font-size: 16px;font-weight: var(--fw500);line-height: 150%;color: var(--black-clr-sec);}
.fs-14{font-size: 14px;font-weight: var(--fw500);line-height: 120%;color: var(--white-clr);}
.container {max-width: 1086px;padding: 0 15px;}
.hf-container{max-width: 1296px;}
.wrapper {width: 100%;overflow-x: hidden;position: relative !important;}

/* colors  */
.orange-clr{color: var(--orange-clr);}
.white-clr{color: var(--white-clr);}
.blue-clr{color: var(--blue-clr);}
.darkblue-clr{color: var(--darkblue-clr);}
.black-clr{color: var(--black-clr);}
.black-clr-sec{color: var(--black-clr-sec);}
.cement-clr{color: var(--cement-clr);}
.darkcement-clr{color: var(--darkcement-clr);}
.cementlight-clr{color: var(--cementlight-clr);}
.ash-clr{color: var(--ash-clr);}
/* bg */
.lightpink-bg{background-color: var(--lightpink-clr);}
.skyblue-bg{background-color: var(--skyblue-clr);}
.cementlight-clr-bg{background-color: var(--cementlight-clr);}

/* font weights */
.fw300{font-weight: var(--fw300);}
.fw400{font-weight: var(--fw400);}
.fw500{font-weight: var(--fw500);}
.fw600{font-weight: var(--fw600);}
.fw700{font-weight: var(--fw700);}
.fw800{font-weight: var(--fw800);}
.fw900{font-weight: var(--fw900);}


/* btn styes */
.orange-btn{display: inline-block; background: var(--orange-clr);color: var(--white-clr);font-size: 20px;font-weight: 500;line-height: 28px;letter-spacing: -0.02em;text-align: center;padding: 10px 24px 10px 24px;border-radius:50px ;min-width: 140px;transition: 0.2s;white-space: nowrap;}
.orange-btn:hover{color: var(--white-clr);background-color: var(--orangelight-clr);}
.white-btn{border: 1px solid var(--orange-clr);display: inline-block; background: var(--white-clr);color: var(--orange-clr);font-size: 20px;font-weight: 500;line-height: 28px;letter-spacing: -0.02em;text-align: center;padding: 9px 24px 9px 24px;border-radius:50px ;min-width: 140px;transition: 0.2s;}
.white-btn:hover{color: var(--orange-clr);background-color: var(--lightpink-clr);}

/* footer css */

footer{background-color: var(--darkblue-clr);padding: 80px 0px 24px;color: var(--white-clr);}
footer .social-media li a{width: 36px;height: 36px;border-radius: 4px 0px 0px 0px;border-radius: 4px;background-color:var(--bluelight);display: flex;align-items: center;justify-content: center;}
.hr{border-top: 2px solid var(--bluelight);margin: 64px 0 24px;}
footer h6{margin-bottom: 40px;}
footer h4{margin-bottom: 6px;}
footer .btns-group{margin-bottom: 80px;}
.hf-container .row{align-items: center;}



/* header css*/
header{position: fixed;width: 100%;height: auto;top: 0px;z-index: 9999;}
header .navbar{padding-top: 24px;}

header .header-list .nav-link,header .nav-link.active{transition: all 0.2s;position: relative !important;overflow: hidden;display: inline-block;padding: 15px 0px;font-size: 20px;font-weight: var(--fw500);line-height: 28px;letter-spacing: 0px;color: var(--black-clr-sec);}
header .header-list .nav-link:hover,header .nav-link.active:hover,header .nav-link.active{color:var(--orange-clr);}
/* header .nav-link::before,.nav-link.active::before{content: '';position: absolute;width:0%; border-bottom: 2px solid var(--orange-clr);bottom: 0px;transition: 0.5s;}
header .nav-link:hover::before,.nav-link.active:hover::before{width: 100%;} */
.Resources-dd .Resources-dd-menu{display: none;padding:8px;box-shadow: 0px 20px 24px 0px #0C0C0C14;}
.Resources-dd .Resources-dd-menu li{margin: 0px;}
.Resources-dd .Resources-dd-menu .nav-link{padding:6px;}
.Resources-dd .Resources-dd-menu .nav-link:hover{background-color: var(--lightpink-clr);width: 100%;border-radius: 8px;}
.Resources-dd:hover .Resources-dd-menu{width: 240px;top: 0px;background-color: var(--white-clr);display: block;margin-top: 30px;position: absolute;border-radius: 8px;top: 20px;}
header .header-list li{display: flex;align-items: center;margin: 0 16px;}

/* header offcanvas */
.header-offcanvas .offcanvas{max-width: 320px;}
.header-offcanvas .offcanvas-header{padding: 56px 20px ;}
.header-offcanvas .offcanvas-body{padding:0;}
.header-offcanvas .offcanvas-body .py-20{padding: 0 20px;}
.mobile-header-list li a{font-size: 16px;font-weight: var(--fw500);color: var(--black-clr-sec);}
.mobile-header-list li:last-child{border-bottom: 0px;}
.mobile-header-list li{padding-block: 12px;border-bottom: 1px solid #4E494914;}
.header-offcanvas .btn-close{background: none;opacity: 1;padding: 0px;height: 24px;width: 24px;}

.margin-negative{margin-top: -90px;}
label.error ,.wpcf7-not-valid-tip{color: red !important;font-size: 14px !important;}
header .header-list .nav-link.active{color:var(--orange-clr);}

.navheader-menubar {
  display: flex;
  align-items: center;
}
@media screen and (max-width:767px){
  .navheader-menubar {
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    overflow-y: auto;
  }
  .no-scroll {
    overflow: hidden;
  }
}