@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
:root {
    --font-family: 'Poppins', sans-serif;
    --primary: #091526;
    --secondary: #1C4670;
    --tertiary: #D328A7;
    --btn_color: #78F9FF;
    --text_color: White;
    --hover_color: #849f9f;
  }

  body {
    font-family: var(--font-family);
  }

  .accordion-button:hover,
  .accordion-button:focus,
  .accordion-button:active {
  color: var(--tertiary) !important;
}

.accordion-button:active-color{
  color: var(--secondary) !important;
}

.btn-hover{
  background-color: var(--btn_color);
  color: #000;
}
.btn-hover:hover{
  background-color: var(--tertiary);
  color: white;
}

.nav-link:active-color{
  color: var(--tertiary) !important;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  text-align: center;
}

.close-popup {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 25px;
  cursor: pointer;
}

.bi-chevron-up {
  color: white;
}

.bi-chevron-up:hover {
  color: var(--btn_color); /* Change to primary color on hover */
}

#fc_frame {
  bottom: 100px !important;
}

.nav-link:hover,
  .nav-link.active {
    color: var(--tertiary) !important; /* Change this to your desired secondary color for active/hover state */
  }

  .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    border-color: var(--secondary) !important; /* Change this to your desired secondary color for the line */
  }

  .card:hover{
    border-color: var(--hover_color); 
    transition: border-color 0.3s ease;
    box-shadow: 0px 3px 7px 0px var(--hover_color);
    transition: box-shadow 0.3s ease;
  }

  #image{
    margin-top: 7.2rem;
  }

  .custom-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .custom-alert-text {
    margin-right: 10px;
  }
  
  .custom-alert-close {
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  
  .custom-alert-close:hover {
    text-decoration: underline;
  }
  
 /* Show the loader and hide the text when the button is in loading state */
 .newsletter-button .loader {
  display: none;
}


.custom-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-button.loading .text {
  display: none;
}

.custom-button.loading .loader {
  display: inline-block;
}


  .cards-body{
    border-color: var(--hover_color); 
    transition: border-color 0.3s ease;
    box-shadow: 0px 3px 7px 0px var(--hover_color);
    transition: box-shadow 0.3s ease;
  }

  .custom-line-height {
    line-height: 2.1; /* Adjust the value as needed */
  }

  .plus-sign::after {
    content: "+";
    display: inline-block;
    margin-left: 5px; /* Adjust the spacing as needed */
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }

  .custom-button{
    background-color: var(--btn_color) !important;
    color: var(--primary) !important;
  }

  .custom-button:hover{
    background-color: var(--tertiary) !important;
    color: var(--text_color) !important;
  }

  @media (max-width: 1400px) {
    #image {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0;
    }
    #hero{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  @media (max-width: 1000px) {
    #image {
      width: 70dvw;;
    }
    #hero{
      position: relative !important;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      margin-top: 4rem;
    }
    .custom-mb{
      margin-bottom: 1.5rem !important;
    }
    .custom_mb{
      margin-bottom: 2rem !important;
    }
  }

  @media (min-width: 1000px) {
    #image{
      position: absolute;
    }
    #hero-content{
      padding-top: 6rem !important;
    }
  }

  @media (max-width: 768px) {
    .accordion-button{
      font-size: 0.9rem !important;
    }
 
  }