:root {
  --light: #fff;
  --light-bg: #fff;
  --mild-bg: #C8D8EB;
  --dark-bg: #001E60;
  --brand-bg: #0047BB;

  --pri-col: #0047BB;
  --sec-col: #001E60;
  --tri-col: #CC0034;

  --tri-col: #95553E;
  /*not final*/
  --light-col: #EFEFF6;
  /*not final*/
  --highlight-col: #B92E4A;
  /*not final*/

  --text-light: #f7f8ff;
  --text-white: #fff;
  --text-dark: #001E60;
  --text-grey: #4B4F54;
  --text-impact: #001E60;

  --brand-bg-light: #f5f5f5;
  /*not final*/
  --brand-bg-dark: #001E60;
  /*not final*/
  --brand-bg-lighter: #FCFCFC;
  /*not final*/
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: .833rem;
  margin: 0;
  padding: 0;
}

body {
  padding: 0px 0px;
  margin: 0px 0px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  width: 100vw;
  overflow-x: hidden !important;
  color: #444655;
  /* background: linear-gradient(to bottom right, #fafafa, #e9f4ff); */
}

.logo {
  width: 100%;
  height: auto;
  max-height: 52px !important;
}

.logo-icon {
  width: auto;
  height: 100%;
  max-height: 32px;
}

#nav-div {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.footer-CTA {
  max-height: 40px;
}

.maxwidth {
  max-width: 100vw !important;
}

.nav-item {
  font-weight: 500;
}

.bg-lighter {
  background-color: #dcedf8 !important;
}

.bg-light {
  background-color: var(--light-bg) !important;
}

.bg-light-gr{
  background: rgb(180,208,255);
background: linear-gradient(0deg, rgba(180,208,255,1) 0%, rgba(234,238,255,1) 24%, rgba(253,253,253,1) 98%);
}
.box {
  --mask:
    radial-gradient(26.88px at 50% calc(100% - 37.60px),#000 99%,#0000 101%) calc(50% - 32px) 0/64px 100%,
    radial-gradient(26.88px at 50% calc(100% + 21.60px),#0000 99%,#000 101%) 50% calc(100% - 16px)/64px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.bg-mild {
  background-color: var(--mild-bg);
}

.bg-dark {
  background-color: var(--dark-bg);
}

.bg-brand {
  background-color: var(--brand-bg);
}

.col-lighter {
  color: var(--light) !important;
}

.col-light {
  color: var(--light-bg) !important;
}

.col-mild {
  color: var(--mild-bg);
}

.col-dark {
  color: var(--dark-bg);
}

.col-brand {
  color: var(--brand-bg);
}

.navbar {
  height: 88px !important;
}

.top-div {
  margin-top: 88px !important;
}

.pri-col {
  color: var(--pri-col);
}

.tri-col {
  color: var(--tri-col);
}


.card-text{
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 24px;
}

.highlight-color1 {
  color: var(--highlight-col);
}

.light-col {
  color: #fbfbfb;
}

.pad-main {
  padding: 1.440rem !important;
}

.impact-text{
  color: var(--text-impact);
  font-weight: 500;
}

.fs-header {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 33.2px !important;
  font-weight: 600;
  color: #0050AF;
}

.fs-sub {
  font-size: 19.2px;
  font-weight: 500;
  color: var(--text-dark);
}

.sec-col {
  color: var(--sec-col);
}




.button {
  background-color: var(--brand-bg);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

.button:hover {
  background-color: #307FE2;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}
.button-3 {
  background-color: var(--brand-bg-dark);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

.button-3:hover {
  background-color: var(--brand-bg-dark);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

.inquiry-button {
  background-color: var(--pri-col);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
}

.inquiry-button:hover {
  background-color: var(--sec-col);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}

.button2 {
  color: var(--pri-col);
  text-decoration: none;
  font-weight: 400;
}

.button2:hover {
  color: var(--pri-col);
  text-decoration: none;
  transition: 1.200sec;
  font-weight: 500;
}

.button-2 {
  color: var(--text-grey);
  background-color: var(--light-bg);
  border: 1px solid var(--text-grey);
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}

.button-2:hover {
  color: var(--pri-col);
  background-color: rgb(247, 246, 246);
  border: 1px solid var(--sec-col);
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: 1.200sec;
}

.button-sm {
  color: white;
  background-color: var(--sec-col);
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-size: smaller;
}



h2 {
  font-size: 1.440rem;
  color: var(--dark-bg);
  font-weight: 500 !important;
}

h4,
.f1 {
  font-size: 1rem;
  font-weight: 500;
  padding-top: .694rem;
  color: var(--sec-col);
}

.foot-list,
li a {
  font-size: 1rem;
  color: var(--text-dark) !important;
  font-weight: lighter;
  list-style: none;
  padding-top: .265rem;
}

p {
  color: var(--text-grey);
}

a {
  text-decoration: none;
}

.title-text {
  font-size: 2.074rem;
  color: var(--pri-col);
  font-weight: 600;
}

.bg-sec {
  background-color: var(--pri-col);
}

.disclaimer {
  font-size: .833rem;
  color: var(--text-grey);
  font-weight: 300;
  line-height: 1.200rem;
}

.footer-links {
  font-size: .833rem;
  color: var(--text-grey);
  font-weight: 500;
  line-height: 1.200rem;
}

.fa-xl {
  font-size: 1.728rem !important;
}

.nav-space {
  margin-top: 88px;
}

.carousel-label-overlay {
  overflow-x: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: var(--pri-col);
  background-color: rgba(0, 0, 40, 0.72);
  padding: 12px 20px;
}

#hard-title {
  font-size: 1rem;
  font-style: italic;
  font-weight: 600 !important;
}

/* This id for about us page */


.two-column-list {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style-type: none;
  padding: 20px;
  border-radius: 10px;
}

.two-column-list li {
  margin-bottom: 8px;
  margin-right: 2rem;
  background-color: rgba(81, 142, 255, 0.16);
  border-radius: 8px;
  padding: 8px 24px;
  color: var(--pri-col);
  font-size: 1rem;
  font-weight: 500;
  /* list-style-type: circle; */
}

.list-serv {
  background-color: var(--brand-bg-lighter);
  color: var(--pri-col);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: .5rem;
  /* border-radius: 4px !important; */
}

figcaption {
  color: var(--pri-col);
  font-size: 1.2rem;
  font-weight: 500;
  padding-bottom: 6px;
}

.testimonial {
  color: var(--sec-col);
  font-size: 1rem;
  font-weight: 500;
}

.portfolio-image {
  border: solid .4px rgba(9, 29, 66, 0.24);
}

.service-box {
  border-radius: 16px;
}

.navbar-toggler-icon {
  color: var(--sec-col) !important;
}


/* Cookie Disclaimer */
.cookie-disclaimer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--brand-bg-dark);
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

.cookie-accept-button {
  color: #fff;
  background-color: var(--pri-col);
  border-radius: 4px;
  padding: 8px 16px;
  text-decoration: none;
}
.cookie-accept-button:hover {
  color: #fff;
  background-color: #1c85f5;
  border-radius: 4px;
  padding: 8px 16px;
  text-decoration: none;
}





.section-box{
  height: 48vh;
}

.Landing-services {
  /* background-color: var(--light-bg); */
  border-radius: 40px;
  padding-left: 4.1667vw;
  padding-right: 4.1667vw;
}

.client-box {
  border-radius: 24px;
  height:fit-content;
}

.card-box {
  height: max-content;
}

.mission {
  background-color: #FF8D6D;
}
.vision {
  background-color: #FFC658;
}

/* .rotate-left {
  rotate: -1.8deg;
}

.rotate-right {
  rotate: 2.4deg;
} */

.CTA-banner {
  background-image: url(images/2023/ctabanner.jpg);
  border-radius: 16px;
}

.landing-page {
  background-color: var(--light);
}

.section-title {
  color: var(--dark-bg);
  font-family: 'Raleway', sans-serif;
  font-size: 27.65px;
  font-weight: 500;
}

.section-para {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #444655;
}

.img-grey{
  filter: grayscale(100%);
}
.img-grey:hover{
  filter: grayscale(0%);
}

.cta-text {
  font-family: 'Raleway', sans-serif;
  font-size: 23.04px;
  font-weight: 400;
}
.cta-subtext {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 300;
}
.cta-subtext2 {
  font-family: 'Raleway', sans-serif;
  font-size: 13.3px;
  font-weight: 400;
}

.serve-box{
  width: 180px;
  height: 180px;
  border-radius: 16px;
}

.bg1{
  background-color: #B15EBE;
}
.bg2{
  background-color: #FA669F;
}
.bg3{
  background-color: #498CFF;
}
.bg4{
  background-color: #FFC658;
}
.bg5{
  background-color:   #FFB35E;
}
.bg6{
  background-color:   #FFC160;
}
.col1{
  color: #B15EBE;
}
.col2{
  color: #FA669F;
}
.col3{
  color: #FF8B79;
}
.col4{
  color: #FFC160;
}
.col5{
  color: #F9F871;
}


/* .form-box{
  position:relative;
  overflow-y:visible;
  z-index: 1;
} */

/* .form-container{
  position: relative;
  overflow: visible;
 height: 48vh;
} */

.form-control{
  background-color: var(--light) !important;
  border-radius: 4px !important;
}


.client-logo-box{
  width: 220px;
}


@media screen and (min-width: 960px) {
  /* .hero-section { */
    /* background-image: url(images/2023/herobackground.svg); */
    /* background-size: contain;
    background-position: center;
    background-repeat: repeat; */
  /* } */
  
  .rotate-left {
    rotate: -1.8deg;
  }
  
  .rotate-right {
    rotate: 2.4deg;
  }
  .banner-section {
    min-height: 56vh;
    /* background-image: url(images/2023/backgroundtest.png); */
    background-size: cover;
    background-repeat: no-repeat;
  }

  .form-page{
    z-index: 0;
    position: center;
    overflow-y: visible;
  }

}