:root {
  --tab-width: 18vw;
  --content-width: calc(100vw - calc(var(--tab-width) + 1vw));
}
html {
  scroll-behavior: smooth;
}

.body-container {
  height: fit-content;
  width: 100vw;
}
.tab-tag {
  text-decoration: none !important;
  color: white;
}
.tab-tag:hover {
  color: rgb(255, 132, 0);
}

.tab-content-container {
  height: 100vh;
  /*    border: 2px solid aqua;*/
}
.tabs-container {
  height: 100vh;

  width: var(--tab-width);
}
.bo-nav-tabs {
  display: flex;
  align-items: flex-end; /* Aligns buttons to the bottom */
  height: 10vh;
  background-color: #6fad9c;
  justify-content: center;
  flex-wrap: nowrap !important;
  width: 100%; /* Take full width of the container */
  padding: 0; /* Remove any padding */
  margin: 0; /* Remove any margin */
}
.nav-pills-custom {
  background-color: #038443;
}
.bo-nav-link {
  width: 20vh;
  height: 63px;
  background-color: #008641;
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px 15px;
  font-size: 16px;
  display: flex;
  align-items: center; /* Ensures text stays centered vertically */
  justify-content: center;
  border: 0px;
}
.bo-nav-link.active {
  background-color: white;
  color: black;
}
.bo-text {
  font-family: "Inter", serif;
  font-size: 2vh;
  font-weight: 400;
  color: #ffffff;
}
.bo-nav-link.active h1 {
  color: #000000;
}
.nav-link-custom {
  position: relative; /* Needed for smooth transitions */
  z-index: 1; /* Ensure tabs stay above other elements during animation */
  transition: transform 0.4s ease; /* Default transition */
}

/* Disable transition during platform switch */
.platform-switching .nav-link-custom {
  transition: none !important;
}

.nav-link-custom {
  color: white;
  height: 8%;
  width: 30vh;
  text-align: center;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative; /* Necessary to position the border */
  white-space: nowrap;
}
.nav-link-custom::after {
  content: "";
  position: absolute;
  bottom: 0; /* Keep the border at the bottom */
  right: 0; /* Start the border from the left */
  width: 80%; /* Make the border 80% of the width */
  height: 2px; /* Border thickness */
  background-color: white; /* Border color */
}
#fp {
  height: 85vh !important;
}
#tx {
  height: 85vh !important;
}
#ibroker {
  height: 85vh !important;
}
.my-nav-tabs {
  width: 15.75vw !important;
}
/* .my-nav-link {
  background-color: #6fad9c; 
  color: black;
  width: 360px;
  height: 80px;
  margin-top: 10px;
  font-size: 24px;
  font-family: inter-regular, serif;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  border: 0px;
}
.my-nav-link.active,
.my-nav-link:focus,
.my-nav-link:hover {
  background-color: rgb(
    255,
    255,
    255
  ) !important; 
  color: white !important;
} */

/* Curved Platform Selector */
/* Main container */
/* Main Container */
.top-img-div {
  position: relative;
  height: 25vh;
  min-height: 250px;
  display: flex;
  overflow: hidden !important;
  background-color: #28a745 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

/* Platform Selector - Positioned at bottom left */
.platform-selector-curve {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 3 !important;
}

/* Dropdown Menu Positioning */
.platform-dropdown-curved .dropdown-menu {
  position: absolute !important;

  left: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 10px !important;
}

/* Banner Styles */
.banner-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.banner-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Button Styles */
.platform-btn-curve {
  background: white !important;
  border: none !important;
  padding: 10px 15px !important;
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.btn-content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: center !important;
}

.platform-btn-curve img {
  height: 30px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  margin-right: 10px !important;
}

.dropdown-indicator {
  font-size: 20px !important;
  transform: rotate(90deg) !important;
  transition: all 0.3s ease !important;
}

.platform-btn-curve.show .dropdown-indicator {
  transform: rotate(0deg) !important;
}

/* Dropdown Items */
.dropdown-item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 15px !important;
  transition: all 0.3s ease !important;
}

.dropdown-item img {
  height: 25px !important;
  width: auto !important;
  margin-right: 10px !important;
}

.dropdown-item:hover,
.dropdown-item.active {
  background-color: #f7941d !important;
  color: white !important;
}

/* Active/Hover States */
.platform-btn-curve:hover,
.platform-btn-curve:focus {
  background: rgba(247, 148, 29, 0.1) !important;
}

.platform-btn-curve.show {
  background: rgba(247, 148, 29, 0.2) !important;
}

/* Z-index Management */
.platform-dropdown-curved {
  z-index: 1000 !important;
}

/* Responsive Considerations */
@media (max-width: 992px) {
  .platform-selector-curve {
    width: 160px !important;
    padding-left: 15px !important;
  }

  .platform-dropdown-curved .dropdown-menu {
    width: 160px !important;
  }
}
/* Mobile responsiveness */
@media (max-width: 992px) {
  .top-img-div > div:first-child {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 10px 0;
  }

  #nav-tab {
    flex-direction: row !important;
    justify-content: center;
    padding-left: 0 !important;
    gap: 10px !important;
  }

  .my-nav-link {
    text-align: center;
  }

  .my-nav-link.active {
    border-left: none !important;
    border-bottom: 3px solid white;
    padding-left: 5px !important;
    padding-bottom: 2px;
  }
}
.nav-link-custom:hover {
  color: rgb(255, 132, 0);
}

.nav-link-custom.active {
  color: rgb(255, 132, 0);
}

.nav-link-custom.active > .tab-link-caption {
  width: 80%;
  height: 65%;
  background-color: white;
  color: rgb(255, 132, 0);
  border-right: 6px solid rgb(255, 132, 0);
  margin-left: 20%;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  transition: 0.2s ease all;
}
.name-overlay {
  font-size: 80px;
  font-weight: 800;
  font-family: Inter;
}
.first-img {
  width: 90% !important;
}

#all-features {
  height: 70vh;
}
.my-menu {
  display: none; /* Bootstrap default */
  position: static !important; /* override absolute */
  float: none;
  will-change: unset;
  transform: none !important;
  background-color: white; /* white background */
  width: 100%; /* full width of parent OR use fixed width */

  border-radius: 6px;
}

.dropdown.show .my-menu {
  display: block;
}
#dropdownMenuButton {
  background: white;
  width: 100%;
}
.dropdown-item:hover {
  background-color: rgb(255, 255, 255);
  color: white;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: rgb(255, 255, 255);
  color: white;
}
.online-steps-button {
  font-family: inter;
  background-color: #002366; /* Dark blue */
  color: white;
  padding: 10px 20px;
  border: 2px solid white; /* White border */
  border-radius: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); /* Shadow */
  width: 17%;
  height: 6vh;
}

.online-steps-button:hover {
  background-color: #0033a0; /* Slightly lighter blue on hover */
}
.benefits,
.eligibility {
  margin-top: 20px;
}
.benefits li,
.eligibility li {
  font-size: 16px;
}
.steps-container {
  margin-bottom: 20px;
}

.step {
  background-color: #e9ecef;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.step strong {
  font-weight: bold;
  color: #f8f8f8;
  border: 1px solid #6d7271;
  padding: 5px;
  border-radius: 4px;
  background-color: #6a7270;
}

.beneficiary-details {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 0.9em;
  color: rgb(255, 132, 0);
}
.beneficiary-details > div::before {
  content: ""; /* Required for pseudo-elements */
  display: inline-block;
  width: 10px; /* Adjust size as needed */
  height: 10px; /* Adjust size as needed */
  border: 1px solid #ff9800; /* Create the square border */
  margin-right: 8px;
  vertical-align: middle;
}
.instruction-box {
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: fit-content;
  padding: 5px 15px;
  padding-right: 160px;
  position: relative;
  font-family: Arial, sans-serif;
  background-color: #fff;
}

@media (max-width: 768px) {
  .name-overlay {
    font-size: 40px !important;
  }
}
.box-header {
  position: absolute;
  top: -12px;
  left: 10px;
  padding: 3px 10px;
  font-weight: bold;
  color: #000000;
  border-radius: 5px;
}

/* Specific styles */
.amend-box {
  border: 2px solid #f4a07a;
}

.amend-box .box-header {
  background-color: #f4a07a;
  padding-right: 200px;
}

.cancel-box {
  border: 2px solid #c9dfc4;
}

.cancel-box .box-header {
  background-color: #86c07a;
  padding-right: 200px;
}
.list-custom {
  font-family: inter regular;
  margin-bottom: 0px !important;
  margin-top: 15px !important;
}
/* You can put this in a <style> tag or your CSS file */
.dropdown-menu.pushdown {
  display: none;
  position: static !important; /* So it takes up space */
  transform: none !important; /* Remove animation shift */
  will-change: auto !important;
}
.hidden-tab {
  display: none !important;
}

@media (max-width: 768px) {
  /* Your styles here */
  .online-steps-button {
    width: 50%;
    height: 6vh;
    font-size: 12px;
  }

  .regsiter-img {
    width: 100% !important;
  }
  .register-img2 {
    width: 150%;
    max-width: 150%;

    padding-left: 12vh;
    padding-right: 12vh;
  }
  .full-mobile-img {
    width: 100% !important;
    height: 100% !important;
  }
  .event-calendar-img {
    width: 89% !important;
  }
  .bo-steps-phone {
    width: 20vh !important; /* adjust size as needed */
    bottom: -15vh !important;
    right: 0;
    z-index: 1;
    transform: translateX(-20%) !important; /* shifts image to the left */
  }
}
.regsiter-img {
  width: 60%;
}
.register-img2 {
  width: 150%;
  max-width: 150%;
}
.custom-dotted-line {
  display: inline-block;
  height: 5px;
  width: 100%;
  background-image: radial-gradient(green 2px, transparent 2px);
  background-size: 15px 5px;
  background-repeat: repeat-x;
  background-position: center;
}
.full-mobile-img {
  height: 60%;
  width: 70%;
}
.required {
  border-color: #f28d6d;
  position: relative;
}

.required::before {
  content: "Required Documents";
  position: absolute;
  top: -15px;
  left: 20px;
  background: linear-gradient(to right, #f9b69d, #f28d6d);
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
}

.additional {
  border-color: #c6e5b3;
  position: relative;
}

.additional::before {
  content: "Additional Information";
  position: absolute;
  top: -15px;
  left: 20px;
  background: #a4d28c;
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
}
.text-box {
  border: 2px solid #f9b69d;
  border-radius: 6px;
  margin: 20px 0;
  padding: 20px;
  background-color: #f9f9f9;
}
.text-box2 {
  border: 2px solid #a4d28c;
  border-radius: 6px;
  margin: 20px 0;
  padding: 20px;
  background-color: #f9f9f9;
}
.bo-steps-wrapper {
  position: relative;
  width: 100%;
}

.bo-steps {
  width: 100%;
  height: auto;
  display: block;
  transform: translateX(-10%); /* shifts image to the left */
}

.bo-steps-phone {
  position: absolute;
  bottom: -10vh;
  right: 0;
  width: 40vh; /* adjust size as needed */
  z-index: 1;
  transform: translateX(-20%); /* shifts image to the left */
}
.amend {
  border-color: #f28d6d;
  position: relative;
}

.amend::before {
  content: "Amend";
  position: absolute;
  top: -15px;
  left: 20px;
  background: linear-gradient(to right, #f9b69d, #f28d6d);
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
}

.cancel {
  border-color: #c6e5b3;
  position: relative;
}

.cancel::before {
  content: "Cancel";
  position: absolute;
  top: -15px;
  left: 20px;
  background: #a4d28c;
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
}
.portal-title {
  display: inline-block;
  text-align: left;
  margin-bottom: 30px;
  position: relative;
  padding-right: 100px; /* make room for tagline */
}

.main-title {
  font-size: 2rem;
  color: #008641;
}

.subtitle {
  font-size: 1.2rem;
  color: #8e44ad;
  margin-top: 4px;
}

.tagline {
  position: absolute;
  right: -2vh;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #000;
}
.main-sub {
  border-right: 2px solid #f7941d;
  padding-right: 1vh;
}

.features-header {
  color: #f7941d;
}
.color-orange {
  color: #f7941d !important;
}
.color-green {
  color: #008641 !important;
}
/* Custom Dropdown Styles */
.custom-dropdown,
.custom-dropdown2,
.custom-dropdown3,
.custom-dropdown4,
.custom-dropdown5,
.custom-dropdown6 {
  position: relative;
  width: fit-content; /* Optional: make width fit content or use 100% if needed */
}

.custom-dropdown-toggle,
.custom-dropdown-toggle2,
.custom-dropdown-toggle3,
.custom-dropdown-toggle4,
.custom-dropdown-toggle5,
.custom-dropdown-toggle6 {
  background-color: #008641;
  color: #ffffff;
  font-weight: bold;
  border: none;
  padding: 2vh 10vh;
  font-size: 16px;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 100%;
  line-height: 2;
  cursor: pointer;
}

.custom-dropdown-menu,
.custom-dropdown-menu2,
.custom-dropdown-menu3,
.custom-dropdown-menu4,
.custom-dropdown-menu5,
.custom-dropdown-menu6 {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  width: 100%;
  margin-top: 5px;
  padding: 10px 0;
  background-color: #008641;
  border-radius: 8px;
  display: none;
  color: white;
  text-align: center;
}

.custom-dropdown-menu.show,
.custom-dropdown-menu2.show,
.custom-dropdown-menu3.show,
.custom-dropdown-menu4.show,
.custom-dropdown-menu5.show,
.custom-dropdown-menu6.show {
  display: block;
}

.custom-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-weight: bold;
  padding: 0 16px;
}

.close-dropdown {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
}

.custom-dropdown-item,
.custom-dropdown-item2,
.custom-dropdown-item3,
.custom-dropdown-item4,
.custom-dropdown-item5,
.custom-dropdown-item6 {
  display: block;
  background: none;
  border: none;
  color: white;
  font-weight: bold;
  padding: 10px 0;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.custom-dropdown-item:hover,
.custom-dropdown-item2:hover,
.custom-dropdown-item3:hover,
.custom-dropdown-item4:hover,
.custom-dropdown-item5:hover,
.custom-dropdown-item6:hover {
  background-color: #007236;
}
hr {
  margin: 8px auto;
  width: 90%;
  border: 0;
  border-top: 1px solid #ffffff55;
}
.pdf-section {
  overflow: hidden !important;
}
@media only screen and (max-width: 768px) {
  .pdf-section ._df_book {
    height: 60vh !important; /* Adjust height for smaller screens */
    width: 90vw !important; /* Adjust width for smaller screens */
  }
}
/* Platform visibility control */
.platform-container {
  display: none !important; /* Add !important to ensure it overrides */
}

.platform-container.platform-visible {
  display: flex !important; /* Add !important to ensure it overrides */
}

/* Mobile behavior remains the same */
@media (max-width: 767.98px) {
  .platform-container {
    display: none !important;
  }
}
.dropup .dropdown-menu {
  bottom: 100%;
  top: auto !important;
  margin-bottom: 0.5rem;
}