@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Fonts */
:root {
  --default-font: "Poppins", "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins", "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #001e1e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #7ab7b0; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --accent-color-light: rgba(122, 183, 176, 0.6);
  --contrast-color: #427279; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

body, html {
    height: 100%;
}

body {
  margin: 0;
  font-family: 'Jost', "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: left;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: 'Jost', sans-serif;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

.btn-purple {
    background: #EF6523;
    color: #fff;
    border:1px solid #EF6523;
}
.btn-purple:hover {
    background: #CEDD73;
    color: #000;
    border:1px solid #000;
}


/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}



/* Place text in the middle of the image */
.hero-text {
  color: black;
  margin-top: 300px !important;
}

.hero-image h2 {
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size:  30px;
	line-height: 36px;
	color: #fff;
}

.hero-image p {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size:  16px;
	line-height: 25px;
	color: #fff;
}
.hero-image p i {
	position: relative;
	top: 5px;
	font-size:  30px;
}
.hero-image .text-success {
	color: #02de02 !important;
}

.form-body {
	font-family: 'Jost', sans-serif;
	font-size:  22px;
	line-height: 25px;
	background: #465ca8;
	color: #000;
}
.form-body h2 {
	background: #1f2b65;
	color: #fff;
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size:  24px;
	line-height: 46px;
	text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.form-body h3 {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size:  22px;
	line-height: 24px;
	color:#fff;
}
.form-body .form-label-small {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size:  12px;
	line-height: 16px;
}
.form-body .location-img {
	width:50px;
	max-width:50px;
	min-width:50px;
	margin-bottom:15px;
}
.form-body .tcpa {
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size:  14px;
	line-height: 18px;
	color: #fff;
	/*max-height: 60px;
	overflow-y: auto; */
}

/*image gallery*/
.image-checkbox {
	cursor: pointer;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    border: 1px solid #b4b4b4;
    background: #ebebeb;
    color: #363636;
    border-radius: 10px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    transition: all .2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.image-checkbox input[type="radio"] {
	display: none;
}
.image-checkbox:hover {
		background: #CEDD73;
   color: #000;
}

/*image gallery*/
.green-checked {
	  background: #CEDD73;
	  color: #fff;
}
.green-checked:hover {
		background: #ebebeb;
   	color: #363636;
}
.fs-small {
	font-size: 22px !important;
	line-height: 26px !important;
	max-height: 50px !important;
	min-height: 50px !important;
	padding: 5px !important;
}
.text-small {
	font-size: 14px !important;
	line-height: 20px !important;
}

#footer {
	font-family: 'Jost', sans-serif;
	font-size:  14px;
	line-height: 20px;
	color: #000;
}
.bg-success {
		background: #CEDD73 !important;
}
.bg-success-50 {
		background: rgba(206, 221, 115, 0.5); !important;
}

.form-select {
	    font-size: 1.3rem !important;
}
.form-control {
	    font-size: 1.3rem !important;
}
.form-label {
    font-size: 18px !important;
    font-weight:600;
    color: #fff;
}
@media (min-width: 769px) {

	/* The hero image */
	.hero-image {
	  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
	  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)), url("images/hero-bg.jpg");

	  /* Position and center the image to scale nicely on all screens */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;

	/* The hero image */
  		height: 100vh;
  	}
  	.text-hero {
  		 background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2))
  	}
 }
@media (max-width: 768px) {
	/* The hero image */
	.hero-image-mobile {

	  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
	  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url("images/hero-bg.jpg");

	  /* Position and center the image to scale nicely on all screens */
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: 20% center;

		/* The hero image */
	  	height: 30vh;
  	}
	.hero-text {
		color: ##465CA9;
  	margin-top: 10px !important;
	}
	.hero-image h2 {
		font-family: 'Jost', sans-serif;
		font-weight: 700;
		font-size:  24px;
		line-height: 28px;
		color: #fff;
	}
	.hero-image p {
		font-family: 'Jost', sans-serif;
		font-weight: 500;
		font-size:  15px;
		line-height: 24px;
		color: #fff;
	}
	.hero-image p i {
		position: relative;
		top: 0px;
		font-size:  16px;
	}
	.form-body .form-label-small {
		font-family: 'Jost', sans-serif;
		font-weight: 500;
		font-size:  10px;
		line-height: 16px;
	}
}

@media (max-width: 540px) {
	.form-body{
		margin-top:-60px;
	}
	.form-body2 {
		margin-top:0px;
	}
	.hero-image-mobile {
		/* The hero image */
	  height: 35vh;
	  background-repeat: no-repeat;
	}
	.hero-image-mobile h2 {
		font-size: 18px;
	}
}

@media (max-width: 430px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 30vh;
	  background-repeat: no-repeat;
	}
	.hero-image-mobile h2 {
		font-size: 18px;
	}
}

@media (max-width: 414px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 35vh;
	  background-repeat: no-repeat;
	}
	.hero-image-mobile h2 {
		font-size: 18px;
	}
}

@media (max-width: 390px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 32vh;
	  background-repeat: no-repeat;
	}
}

@media (max-width: 384px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 40vh;
	  background-repeat: no-repeat;
	}
}

@media (max-width: 375px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 35vh;
	  background-repeat: no-repeat;
	}
}

@media (max-width: 360px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 40vh;
	  background-repeat: no-repeat;
	}
	.hero-image-mobile h2 {
		font-size: 14px;
	}
	.hero-image-mobile p {
		font-size: 13px;
	}
}

@media (max-width: 320px) {
	.hero-image-mobile {
		/* The hero image */
	  height: 55vh;
	  background-repeat: no-repeat;
	}
	.hero-image-mobile h2 {
		font-size: 14px;
	}
	.hero-image-mobile p {
		font-size: 13px;
	}
}


/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  background-color: #0095c8;
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.call-to-action p {
  color: #fff;
}

.call-to-action .cta-btn {
  font-family: 'Jost', "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  background: #006ba6;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none !important;
}

.call-to-action .cta-btn:hover {
  background: #fff;
  border: 2px solid #006ba6;
  color: #0095c8 !important;
}


    .header-bar {
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      background-color: white;
      padding: 10px 0;
      transition: all 0.3s ease;
    }

    .logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
    }

    .logo-container.scrolled {
      justify-content: flex-start;
      padding-left: 20px;
    }

    .logo {
      width: 300px;
      transition: all 0.3s ease;
    }

    .logo.scrolled {
      width: 200px;
    }

    .content {
      margin-top: 100px;
      padding: 20px;
    }



    .carousel-wrapper {
      margin: auto;
      overflow: hidden;
    }

    .card-carousel {
      overflow: hidden;
      position: relative;
    }

    .card-track {
      display: flex;
      transition: transform 0.5s ease;
      gap: 16px;
    }

    .card-item {
      flex: 0 0 auto;
      box-sizing: border-box;
    }

    /* Width per card depending on screen size */
    @media (min-width: 992px) {
      .card-item {
        width: calc((100% - 32px) / 3); /* 3 cards, 2 gaps (16px each) */
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .card-item {
        width: calc((100% - 16px) / 2); /* 2 cards, 1 gap */
      }
    }

    @media (max-width: 767px) {
      .card-item {
        width: 100%; /* 1 card */
      }
    }

    .carousel-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 15px;
    }

    .carousel-indicators-custom {
      display: flex;
      gap: 10px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .carousel-indicators-custom li {
      width: 22px;
      height: 22px;
      background-color: #fff;
      border:2px solid #465ca8;
      border-radius: 50%;
      cursor: pointer;
    }

    .carousel-indicators-custom .active {
      background-color: #465ca8;
    }

    .carousel-controls i {
    	color: #465ca8; !important;
    	font-weight:700;
    }



		.logo-bar{
			background: #465ca8;
			padding: 10px;
		}
    .logo-carousel {
      overflow: hidden;
      position: relative;
      background-color: #465ca8;
      padding: 0 0;
    }

    .logo-track {
      display: flex;
      width: max-content;
      animation: scrollLeft 50s linear infinite;
    }

    .logo-item {
      flex: 0 0 5%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-item img {
      max-width: 100%;
      height: auto;
      max-height: 80px;
      object-fit: contain;
    }

    @keyframes scrollLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .subtext em {
    	position: relative;
   		font-style: normal;
    }
    .subtext em:after {
	    content: "";
	    display: block;
	    margin-left: 5px;
	    width: 20px;
	    height: auto;
	    position: absolute;
	    left: -10px;
	    bottom: -18px;
	    width: 197px;
	    background-size: 200%;
	    background: url(images/underline.svg);
	    height: 17px;
	    background-size: contain;
	    background-repeat: no-repeat;
	}
	@media (max-width: 768px) {
			.subtext em:after {
				display:none;
			}
	}
	.bg-light { background-color: #eceff6; }