.background-image {
  position: relative;
  height: 400px; /* Adjust the height as needed */
  overflow: hidden;
}
  
  .background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("src/623_623-0365_preview.mp4");
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
  .fas{
    font-size: 90px !important;
    text-align: center !important;
}

/* Custom CSS for aligning social media icons to the right */
.social-media-icons {
    margin-left: auto;
  }
  
  #myVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  .centered-text {
    padding: 0 20px;
    max-width: 800px; /* Adjust the max-width as needed */
    margin: 0 auto;
    color: #ffffff;
  }
  
  @media (max-width: 768px) {
    .background-image {
      height: 400px; /* Adjust the height as needed for smaller screens */
    }
  
    .centered-text p {
      color: white;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px !important;
      /* text-align: left; */
      text-align: center !important;
    }
    
  }

  
  .centered-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    font-weight: 900;
    z-index: 2;
    width: 100%;
  }

  .centered-text h5 {
    margin-bottom: 10px;
  }

  .centered-text p {
    font-size: 18px;
    font-weight: 400;
    margin-top: 20px;
    text-align: center !important;
  }

  .card-img-top{
    height: 350px !important;
    /* width: 300px; */
    padding: 0px !important;
  }

  .horizontal-card:hover{
    transform: translateY(-3%);
    border-radius: .375rem;
    box-shadow: 0 0 2rem rgba(0,0,0,.25);
    transition: .25s all;
  }

    .horizontal-card{
      position: relative;
      overflow: hidden;
      border: none;
      color: #ffffff;
      /* background-color: #4099bf; */
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      height: 100%;
    }

    /* .horizontal-card{

    } */

  .card:hover{
    transform: translateY(-3%);
    border-radius: .375rem;
    box-shadow: 0 0 2rem rgba(0,0,0,.25);
    transition: .25s all;
  }

  .card {
    position: relative;
    overflow: hidden;
    border: none;
    color: #000;
    /* background-color: #4099bf; */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    height: 100%;
  }
  
  .card .card-img-top {
    padding: 20px;
    position: relative;
    z-index: 1;
  }
  
  .card .card-img-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    z-index: 2;
  }
  
  .enablers-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 50px; */
  }
  
  .enablers-header {
    text-align: center;
  }
  
  .enablers-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 25px;
  }
  
  .enablers-logos img {
    max-width: 100px;
    margin: 0 10px;
  }

  .fas{
    font-size: 100px;
  }

  h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900 !important;
  }

  .centered-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* height: 200px;
    width: 200px; */
  }
  

  .contactBtn {
    /* background-color: #6C63FF; */
    /* color: #4e4aa0da; */
    /* background-image: linear-gradient(315deg, #bab8e3da 0%, #4e4aa0da 100%); */
    line-height: 42px;
    padding: 0;
    border: none;
    width: 30% !important;
    color: white;
  }

  .btn{
    color: #ffffff;
    background-color: #4099bf;
    /* width: 20%; */
  }

  .servicesBtn{
    margin: 0 auto !important;
    text-align: center;
  }
/*   body{
    background: rgba(235, 225, 225, 0.842);
} */
  

/* Navigation bar styles */
.navbar {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; /* Existing style */
}

.navbar-nav .nav-link {
  color: black; /* Existing style */
}

/* Styles for the active link */
/* This section targets only those links with the 'active' class */
.navbar-nav .nav-link.active {
  /* Add your desired styles for the active link here */
  color: #800080; /* Example: Change text color to blue */
  font-weight: bold; /* Example: Make text bold */
  background-color: #f8f9fa; /* Example: Add a subtle background highlight */
}


/* This class defines the styles for links */
.link {
  cursor: pointer;
}

/* This class defines the styles for links when hovered over */
.link:hover {
  font-weight: bold; 
  text-decoration: underline; /* Optional: You can add underlines on hover */
}
.link.active {
  color: yellow; 
  font-weight: bold; 
}