/* start of variables */
:root 
{
  --primary: #082567;
  --accent: #082567;
  --secondary: #151313;
  --ancient: #1976D2;
}
  
  .bg_primary {background-color: var(--primary);}

  .bg_accent {background-color: var(--accent);}

  .text_primary {color: var(--primary);}
  
  .bg_secondary {background-color: var(--secondary);}
  
  html, body 
  {
    font-family: 'Lexend', sans-serif;
    /* background-color: #e5e8eb; */
    overflow-x: hidden;
    /* overflow: hidden; */
  }

  .text_uppercase { text-transform: uppercase; }

  .text_capitalize { text-transform: capitalize; }
  
  .fs-sm {font-size: small;}
  .fs-md {font-size: medium;}
  .fs-lg {font-size: large;}
  .fs-xlg {font-size: larger;}
  .fs-95 {font-size: 95%;}
  .fs-90 {font-size: 90%;}
  .fs-85 {font-size: 85%;}
  .fs-80 {font-size: 80%;}
  .fs-75 {font-size: 75%;}
  .fs-110 {font-size: 110%;}
  .fs-120 {font-size: 120%;}
  
  .fw-200 {font-weight: 200;}
  .fw-300 {font-weight: 300;}
  .fw-400 {font-weight: 400;}
  .fw-500 {font-weight: 500;}
  .fw-600 {font-weight: 600;}
  .fw-700 {font-weight: 700;}
  .fw-800 {font-weight: 800;}
  .fw-900 {font-weight: 900;}
  
  .navbar-brand .logo {
    margin-right: 5px;
  }

  .mobile-menu {
    color: white !important;
    border: 1px white;
  }
  
  .navbar-toggler-icon {
    color: white !important;
  }

  .nav-icons  {
    margin-right: 5px;
  }

  .carousel-img {
    height: 400px;
    max-width: 100%;
    object-fit: cover;
  }
  
  a {
    text-decoration: none;
  }

  /* .rounded-btn {
    border-radius: 50%;
  } */
  
  .view-all-link:hover {
    text-decoration: underline;
    font-weight: 400;
  }
  
  .section-title, .card-title {
    color: darkslategrey;
  }
  
  .brand-name {
    color: rgb(23, 55, 55);
  }
  
  .card {
    border-radius: 10px;
  }
  
  .card img{
    border-radius: 10px;
  }

  .card img.about-img{
    border-radius: 10px 10px 0px 0px;
  }
  
  .card-img-top {
    max-width: 100%;
    object-fit: cover;
  }
  
  .card-title {
    font-size: 95%;
    font-weight: 300;
  }

  .icons-card {
    border-radius: 10px;
  }

  .impact a {
    text-decoration: underline;
  }

  .bottom-img {
    object-fit: cover;
    height: 1000px;
  }

  /* .nav-item:hover .dropdown-menu {
    display: block;
  } */

/* Adjust the size of the submenu */
/* .dropdown-menu {
    width: 400px;
} */

.navbar-nav {
  display: flex;
  justify-content: space-between;
}

.nav-item.dropdown {
  position: static; /* Change position to static to keep the dropdown at the end */
}

.nav-item:hover .dropdown-menu {
  display: block;
}

/* Adjust the size of the submenu */
.dropdown-menu {
  min-width: 400px; /* Adjust the min-width as needed */
}

  /* .center-list {
    text-align: center;
    list-style-type: none;
    padding: 0;
  }

  .center-list li {
    display: inline-block;
    margin: 0 10px;
  } */
  
  .footer {
    bottom: 0;
  }
  
  .footer-text {
    font-weight: 300;
    font-size: 90%;
    color: #6e7173;
  }
  
  .footer-link {
    text-decoration: none;
    color: #6e7173;
    font-size: 90%;
    font-weight: 300;
  }
  
  .footer-link:hover {
    text-decoration: none;
    color: #515455;
  }
  
  .upper-footer {
    border-bottom: 1px solid rgb(180, 179, 179);
    border-top: 1px solid rgb(180, 179, 179);
  }
  
  .upper-footer-horizontal-line {
    color: rgb(125, 122, 122);
  }
  
  .social-link, .social-link:hover {
    text-decoration: none;
    color: white;
  }
  
  .lower-footer-link-icon {
    color: #dc3e4e;
    margin-right: 2px;
  }

  .jumbo {
    min-height: 600px;
  }

.map-container 
{
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* This sets the aspect ratio (height/width) to 75% (4:3 for standard maps), change as needed */
}

.map-container iframe 
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* .horizontal-scroll-wrapper 
{
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg) translateY(-100px);
  transform-origin: right top;
}

.horizontal-scroll-wrapper > div 
{
  width: 50%;
  transform: rotate(90deg);
  transform-origin: right top;
  background-color: red;
} */

/* Custom CSS to make carousel control icons dark */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* Invert the color to make it dark */
}

/* .carousel-control-next-icon {} */
  
  @media (max-width: 500px) {
    .search-form {
      width: 100%;
      margin-top: 10px;
    }
  }
  
  @media (min-width: 600px) {
    .search-form {
      width: 25%;
    }
  }