/* Scroll to Explore Button Styling */
    .scroll-to-explore-container {
        position: absolute;
        bottom: 20px; /* Distance from the bottom */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Center align the button */
        opacity: 0; /* Initially hidden */
        transition: opacity 0.5s ease-in-out; /* Smooth fade-in effect */
    }

    .scroll-to-explore-container.visible {
        opacity: 1; /* Make visible */
    }

    /* Styling for the scroll button */
    .scroll-to-explore {
        padding: 10px 20px;
        font-size: 18px;
        background-color: transparent;
        color: #EEF2F7;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
    }

    /* Styling for the downward arrow */
    .scroll-arrow {
        margin-left: 10px; /* Adds space between text and arrow */
        font-size: 18px;
        opacity: 1;
        animation: arrow-animation 1.5s infinite ease-in-out; /* Infinite animation loop */
    }

    /* Animation for fading the arrow from full opacity to 0% */
    @keyframes arrow-animation {
        0% {
            transform: translateY(-60%) scale(0.9);
            opacity: 0;
        }
        35% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        65% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        100% {
            transform: translateY(60%) scale(0.9);
            opacity: 0;
        }
    }




    .line-item {
    display: block;
    }

    /* Move hero container content to the right between 990px and 1200px */
@media (max-width: 1200px) and (min-width: 990px) {
    .hero  {
        padding-left: 220px; /* Adjust the padding to shift content to the right */
    }
}

@media (max-width: 767px) {
    .line-item {
        font-size: 18px;
    }
}


@media (max-width: 390px) {
  h4.text-white.fw-bold.mb-4 {
    font-size: 46px; /* or whatever smaller size you prefer */
  }

  h4.text-white.fw-bold.mb-4 span {
    font-size: 46px; /* match or adjust for the colored text too */
  }
}

/* General Styling for Event Items */
.event-box {
    margin-bottom: 30px;
    padding: 0; /* Ensure no extra padding */
}

.event-item {
    background-color: white;
    border-radius: 5px;
    padding: 0; /* Remove padding to avoid white gaps */
    box-sizing: border-box;
    width: 100%;
    overflow: hidden; /* Ensure content fits inside the box */
}

.service-box-home-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0; /* Remove padding to avoid white gaps */
}

.service-box-home-inner .box-wrapper {
    text-align: center;
    width: 100%;
    padding: 0; /* Remove padding to avoid white gaps */
}

.side {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.side.front, .side.back {
    width: 100%;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* For larger screens - ensure items are in columns */
@media (min-width: 768px) {
    .event-box {
        max-width: 350px;
        padding: 15px;
    }
}

@media (min-width: 992px) {
    .event-box {
        max-width: 400px;
        padding: 15px;
    }
}

@media (min-width: 1200px) {
    .event-box {
        max-width: 450px;
        padding: 15px;
    }
}

/* Mobile View - Maintain original box style */
@media (max-width: 767.98px) {
    .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0; /* Remove any margin from row to avoid gaps */
        padding: 0; /* Remove any padding from row to avoid gaps */
    }

    .event-box {
        flex: 0 0 auto;
        margin-right: 15px;
        max-width: 100%;
        padding: 0; /* Remove padding to avoid white gaps */
    }

    .row::-webkit-scrollbar {
        display: none; /* Hide scrollbar for mobile devices */
    }

    .event-content {
        padding: 0; /* Remove padding from event-content to avoid white gaps */
    }
}






    @media (min-width: 1200px) {
    .home-feature-buttons.home-services a.btn-hover-bg,
    .home-feature-buttons.home-services a.custom-btn {
        width: 20%; /* Each button takes 50% width */
        margin-right: 10px; /* Optional: Add space between the buttons */
    }
}

@media (min-width: 767px) and (max-width: 1200px) {
    .home-feature-buttons .btn .trusted {
        width: 50%; /* Each button takes 50% width */
        margin-right: 10px; /* Optional: Add space between the buttons */
    }
}




    /* Hide the original heading on smaller screens */
.desktop-heading {
    display: block; /* Show on larger screens */
}

/* Hide the simplified heading on larger screens */
.mobile-heading {
    display: none; /* Hide on larger screens */
}

.custom-hr-top {
    border: 0; /* Remove any default border */
    height: 1px; /* Define the height of the hr */
    background-color: #C0D62F !important; /* Set your desired green color */
    margin: 10px 0; /* Add some margin for spacing */
    margin-bottom: 20px;
    width: 70%;
 opacity: 1;
}

/* Center content and adjust visibility on small screens */
@media (max-width: 767px) {
    .text-left {
        text-align: center; /* Center align text on smaller screens */
    }

.custom-hr-top {
    width: 100%;
}


    .desktop-heading {
        display: none; /* Hide the original heading on smaller screens */
    }

    .mobile-heading {
        display: block; /* Show the simplified heading on smaller screens */
        text-align: left; /* Center align the text */
        margin-top: 20px; /* Adjust the top margin */
    }

    .feature-buttons button {
        width: 100%; /* Full width buttons on mobile */
        margin-bottom: 10px; /* Add space between buttons */
        box-sizing: border-box; /* Include padding and border in width */
        margin-top: 15px;
    }
}

/* Desktop-specific adjustments */
@media (min-width: 992px) {
  .feature-box {
    text-align: left; /* Ensure text is left-aligned on larger screens */
  }
}

/* Mobile-specific adjustments */
@media (max-width: 991.98px) {
  .feature-box {
    text-align: left; /* Center-align text on smaller screens */
  }
}


/* Buttons formatting fix */

.home-feature-buttons {
    width: 100%; /* Ensure the container takes full width */
}

.home-feature-buttons a {
    width: 80%; /* Set buttons to be 80% of the container width */
    margin-bottom: 10px; /* Add some space between buttons on small screens */
}

.home-feature-buttons .btn {
    margin: 0 5px; /* Adjust margin to create a smaller gap between buttons */
}

/* Ensure proper spacing on larger screens */
@media (min-width: 768px) {
    .home-feature-buttons a {
        margin-bottom: 0; /* Remove bottom margin on larger screens */
    }
    
    .home-feature-buttons .btn {
        margin: 0; /* Reset margin for buttons in row layout */
    }
}


/* HF Features Grid */


.hf-features-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  padding: 40px;
  max-width: 1350px;
  margin: 0 auto;
  align-items: stretch;
  box-sizing: border-box;
}


@media (min-width: 1200px) {
  .bottom-row-2 {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .center-grid .bottom-row-2 {
    display: grid;
    grid-column: span 4;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
   
  }
}

@media (max-width: 1200px) {
  .center-grid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
  }

  .center-grid .bottom-row,
  .bottom-row-2 {
    justify-content: center;
    width: 100%;
  }
}

@media (min-width: 990px) and (max-width: 1200px) {
  .feature-card.main.tablet-hide span {
    font-size: 3.5rem !important; /* Adjust this value as needed */
  }
}


@media (max-width: 1200px) {
  .center-grid {
    gap: 16px;
  }

  .hf-features-grid {
    padding: 16px;
  }
}

.side-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%; /* Match height to center */
}

.center-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  height: 100%;
  width: 100%;
}

.feature-card.feature-gap-md

{
    padding-top: 15px;
}

.feature-card.feature-gap-lg

{
    padding-top: 50px;
}

.center-grid .bottom-row {
  display: grid;
  grid-column: span 4;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  height: 100%; /* Let cards fill their containers */
  box-sizing: border-box;
  padding: 20px 16px 14px 16px; /* controlled padding */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;

}


.feature-card.wide {
  min-width: 250px;
}





.hf-features-grid > * {
  height: 100%; /* ensure children stretch equally */
}

@media (max-width: 1250px) {
  .hf-features-grid {
    padding: 20px;
  }
}


.feature-text {
  font-size: 18px;
  font-weight: 600;
}


.side-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature-card {
  background: #EEF2F7;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Push text to the bottom */
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 140px;
  position: relative;
  padding-top: 30px;
  padding-bottom: 12px; /* tighter bottom */
}

.feature-card img {
  display: block;
  margin: 0 auto 16px auto; /* space between image and text */
  object-fit: contain;
  max-width: 40px;
  max-height: 40px;
}

.feature-card img.custom-size {
  max-width: 100px;
  max-height: 100px;
  margin-top: 15px;

}

.feature-card img.custom-size-lg {
  max-width: 125px;
  max-height: 200px;
  padding-bottom: 0;
  margin-bottom: 4px; /* reduce space below the image */
  padding-top: 30px;
}

.feature-card img.custom-size-xlg {
  max-width: 170px;
  max-height: 200px;
  padding-bottom: 0;
  margin-bottom: 4px; /* reduce space below the image */
  padding-top: 0px;
}




.feature-card.tall {
  min-height: 300px;


}

.feature-card.main {
  background-color: #6a7eea;
  color: white;
  font-weight: bold;
  line-height: 1;
  font-size: 3rem;
  justify-content: center;
  min-width: 265px;
  padding: 10px 20px; /* custom padding for the main card */
}

.center-grid .bottom-row {
  display: grid;
  grid-column: span 4;
  grid-template-columns: 1fr 1fr 1.18fr; /* makes the 3rd box ~40% wider */
  gap: 20px;
}



@media (max-width: 1024px) {
  .hf-features-grid {
    grid-template-columns: 1fr;
  }

  .center-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .side-column {
    flex-direction: row;
    justify-content: space-between;
  }

  .feature-card.tall {
    min-height: 200px;
  }
}

@media (max-width: 1200px) {
  .hf-features-grid {
    padding: 20px;
    gap: 16px;
  }

  .center-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .center-grid .bottom-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .side-column {
    gap: 16px;
  }

  .feature-card {
    padding: 16px;
    min-height: 120px;
  }

  .feature-card.tall {
    min-height: 240px;
  }

  .feature-card.main {
   
    min-width: 200px;
  }



 

  .feature-text {
    font-size: 16px;
  }
}

@media (max-width: 990px) {
  .hf-features-grid {
    grid-template-columns: 1fr;
  }

  .center-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .side-column {
    flex-direction: row;
    justify-content: space-between;
  }

  .feature-card.tall {
    min-height: 200px;
  }
}






    .drag-drop-img {
width: 90vw; /* Adjust to control space on sides */
max-width: 1400px; /* Prevents stretching on large screens */
height: auto;
display: block;
margin: auto; /* Centers the image */
padding-top: 60px;
}





/* Hide header-tablist-visible by default */
.header-tablist-visible {
  display: none; /* Hidden by default */
}

/* Show header-tablist-visible between 990px and 767px */
@media (max-width: 989px) and (min-width: 767px) {
  .header-tablist-visible {
    display: block; /* Hidden by default */
    width: 100%; /* Ensure it takes full width */
    margin-bottom: 20px; /* Space below header */
    text-align: center; /* Center the text */
    padding: 0 15px; /* Padding for spacing */
  }
}

/* Additional mobile styles for smaller screens */
@media (max-width: 767.98px) {
  .header-tablist-visible {
    display: none; /* Ensure it is hidden on screens smaller than 767px */
  }

  .feature-buttons {
  margin-top: -30px;
}
}
/* Default visibility - item is visible */
.hide-between-767-990 {
  display: block; /* Show by default */
}

/* Hide between 767px and 990px */
@media (max-width: 990px) and (min-width: 767px) {
  .hide-between-767-990 {
    display: none; /* Hide within this viewport range */
  }

  .feature-buttons {
    display: block;
    gap: 10px; /* Space between buttons */

  }

  .feature-buttons button {
 
 
  }


}

/* Ensure visibility outside the specified range */
@media (max-width: 767px), (min-width: 990px) {
  .hide-between-767-990 {
    display: block; /* Show outside the specified range */
  }


}


    /* Base styles for tabs */
.tab {
    padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.3s, border-radius 0.3s;
  white-space: nowrap; 
}

/* Styles for active tab */
.tab.active {
  background-color: #EEF2F7; /* Background color for active tab */
  border-radius: 10px; /* Rounded corners */
  padding: 12px 24px;
  white-space: nowrap; 
}



/* Base styles for header-tablist */
.header-tablist {
text-align: center; /* Default center alignment for larger screens */
margin-left: -45px; 


margin-bottom: 45px;
}

@media (max-width: 1200px) and (min-width: 990px) {
  .header-tablist {
    margin-right: 0; /* Remove margin-right between 990px and 1200px */
    margin-top: -20px;
    margin-left: 0px; /* Ensure no extra margin on mobile */
  }
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
.header-tablist {
text-align: center !important; /* Align text to the left on mobile */


margin-top: 40px;
}
}


     /* Base styles for header-tablist */
     .header-tablist {
          text-align: center; /* Default center alignment for larger screens */
          margin-right: 0; /* Reset any default margin */
        }
      
        /* Adjustments for one-column tick section */
        .details {
          display: flex;
         
        }

          /* Hide image below 990px */
  @media (max-width: 989px) {
    .responsive-img {
      display: none;
    }
  }
      
        /* Mobile-specific adjustments */
        @media (max-width: 767px) {
          .header-tablist {
            text-align: center !important; /* Align text to the center on mobile */
            margin-left: 0; /* Reset margin-left on mobile */
            margin-right: 0; /* Ensure no extra margin on mobile */
            margin-top: 40px;
          }
        }

    /* CSS for mobile view adjustments */
@media (max-width: 768px) {
    .header-tablist span {
        margin-right: 0; /* Remove or reduce the margin on mobile */
        margin-left: ;
        text-align: center; /* Align text to the left on mobile */
        display: inline-block; /* Use inline-block to allow text to wrap naturally */
        width: 100%; /* Ensure it takes the full width available */
        line-height: 1.2; /* Adjust line height for better spacing */
    }
}


/* —————————————— 1 */



    /* Base styles for the heading */
.heading-title {
  color: #C0D62F;
  margin-top: 100px; /* Existing margin-top */
  margin-bottom: 20px; /* Default margin-bottom */
}

/* Adjust margin-bottom for mobile devices */
@media (max-width: 990px) {
  .heading-title {
    margin-bottom: 40px; /* Increased margin-bottom on mobile */
  }
}

        /* Specific styling for the feature details column */
        .features-section-condensed .feature-details-column {
        display: flex;
        flex-direction: column;
        justify-content: left; /* Center content vertically */
    }
    
    /* Feature details styling */
    .feature-details {
        display: flex;
        flex-direction: column;
        justify-content: left; /* Center content vertically */
    }
    
    /* Mobile-specific adjustments */
    @media (max-width: 767px) {
        .feature-details {
            align-items: left; /* Center the content horizontally */
            text-align: left; /* Ensure text is aligned to the left */
        }
    
        .feature-icon-text-pair {
            width: 100%; /* Ensure each item takes up full width */
            justify-content: flex-start; /* Align icon and text to the left */
            max-width: 300px; /* Optionally, set a max-width for readability */
        }
    
        /* Center buttons while maintaining left-aligned text */
        .home-feature-buttons {
            align-items: center;
            justify-content: left;
            text-align: left;
        }
    }


/* —————————————— 2 */



  /* Base styles for header-tablist */
  .header-tablist {
    text-align: center; /* Default center alignment for larger screens */
    margin-right: 0; /* Reset any default margin */
  }

/* Base styles for the details section */
.details {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to create multiple rows if needed */
  justify-content: space-between; /* Distribute space between columns */
}

/* Icon Text Pair */
.icon-text-pair {
  display: flex;
  align-items: center;
  width: 50%; /* Two columns layout */
  margin-bottom: 10px; /* Space between rows */
  color: #383835;
  font-weight: 700;
}

/* Single-column layout for smaller screens */
@media (max-width: 991px) {
  .details {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center-align items in column */
  }

  .icon-text-pair {
    width: 100%; /* Full width for single column */
    margin-bottom: 15px; /* Adjusted margin for better spacing on smaller screens */
  }
}

  /* Hide image below 990px */
  @media (max-width: 989px) {
    .responsive-img {
      display: none;
    }
  }

  /* Mobile-specific adjustments - same for max-width 990px and 767px */
  @media (max-width: 990px) {
    .header-tablist {
      text-align: center !important; /* Align text to the center on smaller screens */
      margin-left: 0; /* Reset margin-left */
      margin-right: 0; /* Reset margin-right */
      margin-top: 40px; /* Add top margin */
    }

    .header-tablist span {
      margin-right: 0; /* Remove or reduce the margin */
      text-align: center; /* Align text to center */
      display: inline-block; /* Use inline-block to allow text to wrap naturally */
      width: 100%; /* Ensure it takes the full width available */
      line-height: 1.2; /* Adjust line height for better spacing */
    }

    .heading-title {
      margin-bottom: 40px; /* Increased margin-bottom */
    }

    .feature-details {
      align-items: center; /* Center the content horizontally */
      text-align: left; /* Ensure text is aligned to the left */
    }

    .feature-icon-text-pair {
      width: 100%; /* Ensure each item takes up full width */
      justify-content: flex-start; /* Align icon and text to the left */
      max-width: 300px; /* Optionally, set a max-width for readability */
    }

    .home-feature-buttons {
      align-items: center;
      justify-content: center;
      text-align: left;
    }
  }

  /* Specific styling for the feature details column */
  .features-section-condensed .feature-details-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
  }

  /* Feature details styling */
  .feature-details {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
  }

    /* Adjustments for tab content, rows, and columns at 990px or below */
    @media (max-width: 990px) {
    .tab-content .row {
    /*   display: block; Make row block on screens smaller than 990px */
    }




    .tab-content .column {
      width: 100%; /* Make columns full width */
      margin-bottom: 20px; /* Optional: Adjust spacing between columns */
      margin-top: -30px;
    }

    .two-column-box {
      flex-direction: column; /* Stack columns vertically */
    }

    .left-column {
      width: 100%;
      padding: 20px; /* Add padding around the left column */
    }

    .right-column {
      width: 100%;
      margin-top: 20px; /* Add margin above the right column */
    }

    .right-column img {
      width: 95%; /* Make the image responsive */
      height: auto;
      border-radius: 10px;
      object-fit: cover; /* Maintain image aspect ratio */
    }

    .text-center-mobile {
      text-align: center !important; /* Center-align text */
    }

    .header-tablist {
      text-align: center !important; /* Align text to the center on smaller screens */
      margin-left: 0; /* Reset margin-left */
      margin-right: 0; /* Reset margin-right */
      margin-top: 40px; /* Add top margin */
    }

    .header-tablist span {
      margin-right: 0; /* Remove or reduce the margin */
      text-align: center; /* Align text to center */
      display: inline-block; /* Use inline-block to allow text to wrap naturally */
      width: 100%; /* Ensure it takes the full width available */
      line-height: 1.2; /* Adjust line height for better spacing */
    }

    .feature-details {
      display: flex;
      flex-direction: column;
      align-items: center; /* Center the content horizontally on smaller screens */
    }

    .feature-details .feature-icon-text-pair {
      width: 100%; /* Ensure each item takes up full width */
      text-align: left; /* Align text to the left */
      font-size: 26px; /* Adjust font size for readability */
      justify-content: left; /* Center-align content */
      align-items: left;
    }

    .feature-icon-text-pair {
      width: 100%; /* Ensure each item takes up full width */
      text-align: left; /* Align text to the left */
      font-size: 26px; /* Adjust font size for readability */
      justify-content: center; /* Center-align content */
      align-items: left;
    }

    .feature-buttons.text-center {
      text-align: center; /* Center buttons */
    }
  }


  @media (max-width: 1400px) and (min-width: 1200px) {

    .right-column {padding-top: 75px;
   
    }

  }


  @media (min-width: 1400px) {
    .mb-md-5 {
        margin-bottom: 0.5rem !important;
    }
  }


  @media (max-width: 1200px)  {
    .mb-md-5 {
        margin-bottom: 0.5rem !important;
    }
  }




  /* Adjust the layout for mobile screens below 767px */
  @media (max-width: 767px) {
    .tab {
      font-size: 16px; /* Decrease font size for smaller screens */
    }

    .column {
      padding: 0; /* Remove padding around columns on smaller screens */
    }

    .details {
      text-align: left; /* Adjust text alignment for details on smaller screens */
    }

    .row {
      display: block; /* Make row block on smaller screens */
    }

    .header-tablist {
      text-align: center !important; /* Align text to the center on smaller screens */
      margin-left: 0; /* Reset margin-left */
      margin-right: 0; /* Ensure no extra margin */
      margin-top: 140px; /* Add top margin */
    }
  }

/* Container to hide overflow and center the tab list */
.tablist-container {
  width: 100%;
  overflow: hidden; /* Hide scrollbars */
  position: relative;
  display: flex; /* Flexbox for easy alignment */
  justify-content: center; /* Center the tab list within the container */
}

/* Tab list container */
.tablist {
  display: flex;
  align-items: center;

  min-width: 80%; /* Ensure container takes full width */
  transition: transform 0.3s ease;
}

/* Tab styles */
.tab {
    flex: 1; /* Make each tab flex equally to fill the container */
  text-align: center; /* Center the text within the tab */
  padding: 12px 24px;
  background-color: #f0f0f0; /* Background color for inactive tabs */
  cursor: pointer; /* Change cursor to pointer on hover */
  border-radius: 10px; /* Optional: add rounded corners */
  border: 1px solid #ddd; /* Optional: border to differentiate tabs */
  margin-right: 5px; /* Optional: spacing between tabs */
  transition: background-color 0.3s; /* Smooth transition for background color */
}

/* Active tab style */
.tab.active {
  background-color: #EEF2F7; /* Highlight active tab */
  color: #333;
  padding: 12px 24px;
}

/* Desktop styles: Show only 4 tabs and center the tablist */
@media (min-width: 767px) {
  .tablist-container {
    display: flex; /* Enable flexbox on the parent container */
    justify-content: center; /* Center the tablist horizontally */
    align-items: center; /* Center the tablist vertically if needed */
    width: 100%; /* Ensure the container takes the full width */
  }

  .tablist-desktop {
    width: auto; /* Let the tablist grow based on its content */
  
    display: flex; /* Flexbox to align children if necessary */
    justify-content: center !important; /* Optional: Center tabs within the tablist */
  }
}

/* Style for the active tab */
.tablist-desktop .tab.active {
  background-color: #EEF2F7; /* Grey background for active tab */
  border-radius: 10px; /* Rounded corners for active tab */
   /* White text color for contrast */
   padding: 12px 24px;
}


  /* Ensure the tablist container is centered by aligning items */
  .tablist-container { {
    display: flex;
    justify-content: center; /* Center horizontally */
  }

  .tab {
    margin: 0 10px; /* Adjust spacing as needed */
  }
}

  .tablist { {
    width: 100%; /* Ensure tab list fits container */
  }

  .tab {
    margin: 0 10px; /* Adjust spacing as needed */
  }
}


/* —————————————— 4 */



    /* Base styles for tabs */
.tab {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, border-radius 0.3s;
  white-space: nowrap; 
}

/* Styles for active tab */
.tab.active {
  background-color: #EEF2F7; /* Background color for active tab */
  border-radius: 10px; /* Rounded corners */
  padding: 12px 24px;
  white-space: nowrap; 
}



/* Base styles for header-tablist */
.header-tablist {
text-align: center; /* Default center alignment for larger screens */
margin-right: 0; /* Reset any default margin */
margin-bottom: 40px;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
.header-tablist {
text-align: center !important; /* Align text to the left on mobile */
margin-left: 100px; /* Ensure no extra margin on mobile */
margin-right: ; /* Ensure no extra margin on mobile */
margin-top: 40px;
}

.tablist .tab {
    font-size: 22px; /* Adjust as needed */
}

.details {
    font-size: 18px; /* Adjust as needed */
}

}

/* Base styles for header-tablist */
     .header-tablist {
          text-align: center; /* Default center alignment for larger screens */
          margin-right: 0; /* Reset any default margin */
        }
      
        /* Adjustments for one-column tick section */
        .details {
          display: flex;
         
        }

          /* Hide image below 990px */
  @media (max-width: 989px) {
    .responsive-img {
      display: none;
    }
  }
      
        /* Mobile-specific adjustments */
        @media (max-width: 767px) {
          .header-tablist {
            text-align: center !important; /* Align text to the center on mobile */
            margin-left: 0; /* Reset margin-left on mobile */
            margin-right: 0; /* Ensure no extra margin on mobile */
            margin-top: 40px;
          }
        }

    /* CSS for mobile view adjustments */
@media (max-width: 767px) {
    .header-tablist span {
        margin-right: 0; /* Remove or reduce the margin on mobile */
        margin-left: ;
        text-align: center; /* Align text to the left on mobile */
        display: inline-block; /* Use inline-block to allow text to wrap naturally */
        width: 100%; /* Ensure it takes the full width available */
        line-height: 1.2; /* Adjust line height for better spacing */
    }
}


/* —————————————— 1 */



    /* Base styles for the heading */
.heading-title {
  color: #C0D62F;
  margin-top: 100px; /* Existing margin-top */
  margin-bottom: 20px; /* Default margin-bottom */
}

/* Adjust margin-bottom for mobile devices */
@media (max-width: 990px) {
  .heading-title {
    margin-bottom: 40px; /* Increased margin-bottom on mobile */
  }
}

        /* Specific styling for the feature details column */
        .features-section-condensed .feature-details-column {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
    }
    
    /* Feature details styling */
    .feature-details {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
    }
    
    /* Mobile-specific adjustments */
    @media (max-width: 767px) {
        .feature-details {
            align-items: center; /* Center the content horizontally */
            text-align: left; /* Ensure text is aligned to the left */
        }
    
        .feature-icon-text-pair {
            width: 100%; /* Ensure each item takes up full width */
            justify-content: flex-start; /* Align icon and text to the left */
            max-width: 300px; /* Optionally, set a max-width for readability */
        }
    
        /* Center buttons while maintaining left-aligned text */
        .home-feature-buttons {
            align-items: center;
            justify-content: center;
            text-align: left;
        }
    }


/* —————————————— 2 */

.who-uses-buttons {
  padding-top: 20px;
}

  /* Base styles for header-tablist */
  .header-tablist {
    text-align: center; /* Default center alignment for larger screens */
    margin-right: 0; /* Reset any default margin */
  }

/* Base styles for the details section */
.details {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to create multiple rows if needed */
  justify-content: space-between; /* Distribute space between columns */
}

/* Icon Text Pair */
.icon-text-pair {
  display: flex;
  align-items: center;
  width: 50%; /* Two columns layout */
  margin-bottom: 10px; /* Space between rows */
  color: #383835;
  font-weight: 700;
  gap: 0px;
}

/* Single-column layout for smaller screens */
@media (max-width: 991px) {
  .details {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center-align items in column */
  }

  .icon-text-pair {
    width: 100%; /* Full width for single column */
    margin-bottom: 15px; /* Adjusted margin for better spacing on smaller screens */
  }
}

  /* Hide image below 990px */
  @media (max-width: 989px) {
    .responsive-img {
      display: none;
    }
  }

  /* Mobile-specific adjustments - same for max-width 990px and 767px */
  @media (max-width: 990px) {
    .header-tablist {
      text-align: center !important; /* Align text to the center on smaller screens */
      margin-left: 0; /* Reset margin-left */
      margin-right: 0; /* Reset margin-right */
      margin-top: 40px; /* Add top margin */
      margin-bottom: 10px;
    }

    .header-tablist span {
      margin-right: 0; /* Remove or reduce the margin */
      text-align: center; /* Align text to center */
      display: inline-block; /* Use inline-block to allow text to wrap naturally */
      width: 100%; /* Ensure it takes the full width available */
      line-height: 1.2; /* Adjust line height for better spacing */
    }

    .heading-title {
      margin-bottom: 20px; /* Increased margin-bottom */
    }

    .feature-details {
      align-items: center; /* Center the content horizontally */
      text-align: left; /* Ensure text is aligned to the left */
    }

    .feature-icon-text-pair {
      width: 100%; /* Ensure each item takes up full width */
      justify-content: flex-start; /* Align icon and text to the left */
      max-width: 300px; /* Optionally, set a max-width for readability */
    }

    .home-feature-buttons {
      align-items: center;
      justify-content: center;
      text-align: left;
    }
  }

  /* Specific styling for the feature details column */
  .features-section-condensed .feature-details-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
  }

  /* Feature details styling */
  .feature-details {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
  }


  /* Adjust the layout for mobile screens below 767px */
  @media (max-width: 767px) {
    .tab {
      font-size: 16px; /* Decrease font size for smaller screens */
    }

    .column {
      padding: 0; /* Remove padding around columns on smaller screens */
    }

    .details {
      text-align: left; /* Adjust text alignment for details on smaller screens */
    }

    .row {
      display: block; /* Make row block on smaller screens */
    }

    .header-tablist {
      text-align: center !important; /* Align text to the center on smaller screens */
      margin-left: 0; /* Reset margin-left */
      margin-right: 0; /* Ensure no extra margin */
      margin-top: 110px; /* Add top margin */
    }
  }

/* Container to hide overflow and center the tab list */
.tablist-container {
  width: 100%;
  overflow: hidden; /* Hide scrollbars */
  position: relative;
}

/* Tab list container */
.tablist {
  display: flex;
  align-items: center;
 
  min-width: 100%; /* Ensure container takes full width */
  transition: transform 0.3s ease;
}

/* Tab styles */
.tab {
  flex: 0 0 auto; /* Prevent tabs from shrinking */
  padding: 12px 24px;
  border-radius: 10px;
  background-color: #FFF;
  
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  text-align: center;
}

/* Active tab style */
.tab.active {
  background-color: #EEF2F7; /* Highlight active tab */
  color: #333;
  padding: 12px 24px;
}

/* Desktop styles: Show only 4 tabs and center the tablist */
@media (min-width: 768px) {
  .tablist-container {
    display: flex; /* Enable flexbox on the parent container */
    justify-content: center; /* Center the tablist horizontally */
    align-items: center; /* Center the tablist vertically if needed */
    width: 100%; /* Ensure the container takes the full width */
  }

  .tablist-desktop {
    width: 100%; /* Ensure tablist takes full width of container */
  
    display: flex; /* Flexbox to align children if necessary */
    justify-content: center !important; /* Optional: Center tabs within the tablist */
  }
}

/* Style for the active tab */
.tablist-desktop .tab.active {
  background-color: #EDF5FF; /* Grey background for active tab */
  border-radius: 10px; /* Rounded corners for active tab */
   /* White text color for contrast */
   padding: 12px 24px;
}


  /* Ensure the tablist container is centered by aligning items */
  .tablist-container { {
    display: flex;
    justify-content: center; /* Center horizontally */
  }

  .tab {
    margin: 0 10px; /* Adjust spacing as needed */
  }
}

  .tablist { {
    width: 100%; /* Ensure tab list fits container */
  }

  .tab {
    margin: 0 10px; /* Adjust spacing as needed */
  }
}


/* —————————————— 4 */


/* Mobile styles: Enable infinite scrolling */
@media (max-width: 767.98px) {


  .tablist {
    display: flex;
    flex-wrap: nowrap; /* Ensure tabs stay in a single line */
    width: auto; /* Auto width for carousel effect */
  }

  .tab {
    scroll-snap-align: center; /* Snap each tab to center */
    flex: 0 0 auto; /* Prevent tabs from shrinking */
    width: 50%; /* Make each tab fill the container width */
  }

  .tab.active {

    border-radius:10px;
  }


}



/* Base styles for the tablist container */
.tablist-container {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center the tablist container */
  width: 100%; /* Ensure tablist takes full width of container */
  overflow: hidden; /* Hide overflow to prevent scrollbars */
  position: relative;
}

/* Desktop tablist styles */
.tablist-desktop {
  display: flex; /* Arrange tabs in a row */
  align-items: center;

  transition: transform 0.3s ease;
}


/* —————————————— 5 */

/* Tab styles */
.tab {
    flex: 1; /* Make each tab flex equally to fill the container */
    padding: 12px 24px; /* Consistent padding for all tabs */
    border-radius: 10px;
    background-color: #EEF2F7; /* Light grey for inactive tabs */
    margin: 0 10px; /* Space between tabs */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover or active */
    cursor: pointer;
    text-align: center;
    border: none; /* Remove any border */
    box-sizing: border-box; /* Ensures padding doesn't affect overall size */
}

/* Active tab style */
.tab.active {
    background-color: #EDF5FF; /* Highlight active tab */
    color: #333;
    /* Padding remains the same to ensure uniform size */
    border: none; /* No border change */
    padding: 12px 24px; /* Consistent padding for all tabs */
}

.tab.active::after {
    content: '';
    display: block;
    width: 100%;
    margin: auto;
    height: 1px;
    /* Optional: background-color: #5779DD; Blue underline effect */
}

/* Ensuring the hover state doesn't affect size */
.tab:hover {
    background-color: #E0E7EE; /* Slightly different color on hover */
    color: #383835; /* Darker text color on hover */
}

/* Keeping padding consistent in hover state */
.tab:hover,
.tab.active {
    padding: 12px 24px; /* Ensures padding remains constant */
}


@media (max-width: 767px) {
/* Hide the mobile tablist by default (desktop-first approach) */
.tablist-mobile {
  display: none;
}
}

/* Desktop styles: Show only 4 tabs */
@media (min-width: 768px) {
  .tablist-container {
   
    overflow: hidden; /* Ensure no horizontal scrollbars */
    justify-content: center; /* Center tablist in container */
  }

  .tablist-desktop {
    
    width: 100%; /* Ensure tablist takes full width of container */
  }

  .tab {
    margin: 0 10px; /* Adjust spacing as needed */
  }
}



  .tab {
    scroll-snap-align: center; /* Snap each tab to center */
    flex: 0 0 auto; /* Prevent tabs from shrinking */
  }

  /* Hide scrollbars */
  .tablist-container::-webkit-scrollbar {
    display: none;
  }


@media (max-width: 767.98px) {
    .tablist-container {
width: 100%;
    }
}


/* Mobile-specific adjustments */
@media (max-width: 767.98px) {
  .details {
    padding: 0 15px; /* Add some padding on mobile */
    text-align: left;
    margin-left: 70px;
    line-height: 1;
    margin-top: -20px;
  }

  .icon-text-pair {
    display: flex;
    align-items: center; /* Center icon and text vertically */
    justify-content:left; /* Center icon and text horizontally */
    margin: 10px 0; /* Space between each icon-text pair */


  }

  .icon-text-pair i {
    margin-right: 10px; /* Space between icon and text */
  }
}



/* ------------------- */

/* Base styles for the layout */
.header-tablist, .details {
    width: 100%; /* Ensure full width for header-tablist and details */
}


/* Media query for specific screen sizes */
@media (max-width: 2000px) and (min-width: 1400px) {
    .tab-content {
        margin-left: 40px; /* Move only the mockup to the left */
        margin-right: -40px; /* Move only the mockup to the left */
    }
}

/* Media query for specific screen sizes */
@media (max-width: 1400px) and (min-width: 1200px) {
    .tab-content {
        margin-left: 20px; /* Move only the mockup to the left */
        margin-right: -20px; /* Move only the mockup to the left */
    }
}


/* Adjust layout for screens between 990px and 767px */
@media (max-width: 990px) and (min-width: 767px) {
  .row {
    display: flex; /* Use flexbox for the row to manage space */
    flex-wrap: wrap; /* Allow wrapping of content if necessary */
  }

  .column {
    width: 100%; /* Make .column take full width */
    padding: 0 15px; /* Add padding for spacing */
  }

  .mockup, .details {
    flex: 1; /* Ensure .mockup and .details take up equal space */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
  }

  .mockup {
    flex: 1.5; /* Increase space allocation for the mockup */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    padding: 10px; /* Add some padding to ensure spacing */
    object-fit: scale-down;

  }



  .details {
    text-align: left; /* Align text to the left within .details */
    padding: 20px 0; /* Add padding for spacing */
    line-height: 1;
    margin-bottom: -40px;
    margin-top: 35px;
  }

  .header-tablist {
    width: 100%; /* Ensure .header-tablist takes full width */
    margin-bottom: 20px; /* Space between header and content */
  }

  /* Fix tablist issue where last tab cuts off */
  .tablist {
    display: flex;
    flex-wrap: wrap; /* Ensure tabs wrap as needed */
    justify-content: space-between; /* Distribute tabs evenly across the container */
  }

  .tablist .tab {
    flex: 1 1 calc(25% - 10px); /* Ensure each tab takes up 25% of the row with space between */
    max-width: calc(25% - 10px); /* Prevent tabs from overflowing */
    margin: 5px; /* Consistent margin */
    box-sizing: border-box;
  }

  /* Ensure tabs stay within container */
  .tablist-container {
    padding: 0 10px; /* Add padding to the container to prevent cut off */
  }
}

/* Adjust layout for screens below 767px */
@media (max-width: 767.98px) {
  .row {
    display: flex;
    flex-direction: column; /* Stack .mockup and .details vertically */
  }

  .column {
    width: 100%; /* Make .column take full width */
    padding: 0 15px; /* Add padding for spacing */
  }

  .mockup, .details {
    flex: 1; /* Ensure .mockup and .details take up equal space */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
  }

  .details {
    text-align: left; /* Align text to the left within .details */
    padding: 20px 0; /* Add padding for spacing */
    margin-bottom: -30px;
  }

  .header-tablist {
    width: 100%; /* Ensure .header-tablist takes full width */
    margin-bottom: 20px; /* Space between header and content */
    margin-top: 190px;
  }
}

@media (max-width: 500px) {

    .details {
    text-align: left; /* Align text to the left within .details */
    padding: 20px 0; /* Add padding for spacing */
    margin-bottom: -50px;
    margin-left: 30px;
    width: 80%;
  }
}


/* grid layout on mobile */
@media (max-width: 767px) {
    .tablist {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center;    /* Center items horizontally */
        gap: 10px;              /* Adjust the gap between items as needed */
    }
    
    .tablist > * {
        width: 100%;            /* Make each item take the full width */
        text-align: center;     /* Center content within each item, if desired */
    }

    /* General styling for the tablist container */
.tablist-container {
  
    padding: 0 15px; /* Add some padding on the sides */

    width: 100%; /* Ensure the container takes full width */
}

}

/* Each tab */
.tablist .tab {
    flex: 1 1 calc(25%); /* Each tab takes roughly 23% width minus margin on larger screens */
    box-sizing: border-box;
    text-align: center;
   
    padding: 12px 24px; /* Consistent padding for all tabs */
    width: 100%; /* Ensure tablist takes full width of container */

}






/* Two-column layout for details section between 767px and 990px */
@media (max-width: 990px) and (min-width: 767px) {
    .details {
        flex-direction: row; /* Switch to a row layout */
        flex-wrap: wrap; /* Allow items to wrap to the next line */
    }

    .details .icon-text-pair {
        flex: 1 1 50%; /* Each item takes up 50% of the width */
        box-sizing: border-box;
    }

    .tablist .tab {
        flex: 1 1 calc(50% - 10px); /* Each tab takes 50% width minus margin on medium screens */
        max-width: calc(50% - 10px); /* Prevent tabs from growing beyond 50% */
    }

  /* Header tablist adjustments */
  .header-tablist {
        margin-top: 5px;
        margin-bottom: -30px;
        margin-right: 50px;
        font-size: 22px; /* Decrease text size to fit the container better */
        text-align: left; /* Center the text */
        line-height: 1.4; /* Adjust line height for readability */
        width: 100%; /* Ensure the header takes up the full width */
    }

    /* Ensure the text inside the header-tablist spans the entire container */
    .header-tablist span {
        display: block;
        width: 100%; /* Ensure span fills the width of its container */
    }

    .column img {
    margin: 50px 0;
}


}

@media (max-width: 1200px) and (min-width: 990px) { 

.header-tablist {
    margin-top: -10px;
}

.feature-buttons {
        padding-top: 0px;
    }
}

/* Specific styling for exactly 767px width */
@media (max-width: 767px) and (min-width: 767px) {

.tablist-container {
    flex: 1;
    margin: 0 auto; /* Center the container on the page */
    padding: 0 15px; /* Add some padding on the sides */
    width: 100%;
}

/* General styling for the tablist */
.tablist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute tabs evenly across the width */
    margin: -5px; /* Adjust to counteract padding inside the tab */
}

.header-tablist {
        /* margin-bottom: -10px; */
        margin-top: 170px;
        margin-bottom: -40px;
}

/* Each tab */
.tablist .tab {
    flex: 1 1 25%; /* Each tab takes up 25% of the container */
  
    box-sizing: border-box;
    text-align: center;
    margin: 0; /* Remove margin to ensure full width */
    padding: 15px;
    background-color: #f8f9fa;
    cursor: pointer;
    color: #383835; /* Default text color */
    width: 100%;
}

.mockup-header.header-tablist {
    display: none;
}

/* Ensure the mockup content stacks vertically on smaller screens */
.column.mockup {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align items to the left */
    width: 100%; /* Ensure the column takes full width */
}

/* Ensure image takes full width and scales */
.mockup img {
    width: 100%; /* Full width of parent container */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center image horizontally */
}


    .only-visible-767-990 {
        display: block; /* Show the element */
    }

    .details {
    font-size: 18px;
}

}



/* Ensure mockup header appears above the image and text is left-aligned */
.mockup-header {
    display: block;
    margin-bottom: 10px; /* Space between header and image */
    text-align: left; /* Left-align the text */
    font-size: 24px; /* Adjust font size */
    padding: 10px 0; /* Optional: Add vertical padding */
}

.mockup img {
    display: block;
    margin: 0 auto;
 
    max-width: 100%; /* Ensure image scales responsively */
}

/* For smaller screens (below 767px) */
@media (max-width: 767px) {
    .mockup-header {
        text-align: left; /* Maintain left alignment on smaller screens */
        font-size: 18px; /* Adjust font size for smaller screens */
        
    }

    .mockup img {
        width: 100%; /* Ensure the image scales responsively */
    }
}

/* Hide the element by default */
.only-visible-767-990 {
    display: none;
}

/* Make it visible only between 767px and 990px */
@media (min-width: 767px) and (max-width: 990px) {


/* Ensure the mockup content stacks vertically on smaller screens */
.column.mockup {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align items to the left */
    width: 100%; /* Ensure the column takes full width */
}

/* Ensure image takes full width and scales */
.mockup img {
    width: 100%; /* Full width of parent container */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center image horizontally */
}


    .only-visible-767-990 {
        display: block; /* Show the element */
    }
}

.details {
    font-size: 18px;
}


@media (min-width: 1400px){
.column.who-uses {
    margin-left: 60px;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    text-align: left; /* Ensures text is centered */
    height: 100%; /* Optional: ensures full height usage */
}


.mockup img {
 
  margin-top: 15px;
}

}

@media (min-width: 1200px)and (max-width: 1400px) {
.column.who-uses {
    margin-left: 80px;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    text-align: left; /* Ensures text is centered */
    height: 100%; /* Optional: ensures full height usage */
}


/* Specific rule for screens between 1200px and 1400px */
@media (max-width: 1400px) and (min-width: 1200px) { 
    .who-uses .feature-buttons {
        margin-left: 10px; /* Add left margin to the buttons */
    }
}


.feature-buttons {
    padding-top: 0px;
  
}

.mockup img {
 
   margin-top: 40px;
}

}



.mobile-join {

}

@media (max-width: 767px) {
    .left-column p {
margin-bottom: -30px;
}
}




.color-coded-text {
               
            }


                @media (max-width: 767px) {
            .line-item.tracker {
                font-size: 20px;
            }

            .color-coded-text {
              
            }


            .justify-content-center.features {
                padding: 0px;
            }

        
        }
        



@media (max-width: 990px) and (min-width: 767px) {
    .white-box.planning-tracker {
        min-height: 450px; /* Set the minimum height to 450px */
    }
}

    /* Default: Hide the small-screen header */
.small-screen-header {
    display: none;
}

/* Show the small-screen header below 990px, hide the large-screen header */
@media (max-width: 990px) {
    .small-screen-header {
        display: block;
    }

    .large-screen-header {
        display: none;
    }
}

/* Show the large-screen header above 990px, hide the small-screen header */
@media (min-width: 991px) {
    .large-screen-header {
        display: block;
    }

    .small-screen-header {
        display: none;
    }
}




    .white-box .pair {
        width: 90%;
    }

    /* Base styles for desktop screens */
.feature-details {
  margin: 0px; 
  text-align: left;
 
}

/* Styles for screens smaller than 767px (mobile screens) */
@media (max-width: 990px) {
  .feature-details {
    margin-left: 0; /* Remove margin-left for smaller screens */
  }
}

/* Styles for screens smaller than 767px (mobile screens) */
@media (max-width: 990px) {
  .feature-details.statistics {
   /* margin-left: 100px; /* Remove margin-left for smaller screens */
  }
}

/* Styles for screens smaller than 767px (mobile screens) */
@media (max-width: 990px) {
  .feature-details.members {
 /*   margin-left: 50px;  Remove margin-left for smaller screens */
  }
}


.custom-text {
    /* Normal styling for all screens */
   
    line-height: 1.5;
    text-align: left;
}

/* Responsive styling for screens below 500px */
@media (max-width: 500px) {
    .planning-tracker-text,
    .color-coded-text {
        white-space: normal; /* Ensure text wraps normally */
        word-break: break-word; /* Break long words */
        overflow-wrap: break-word; /* Support wrapping for long words */
        display: inline-block; /* Helps control wrapping */
    }

    .planning-tracker-text {
        margin-bottom: 30px; /* Adjust margin for better spacing on mobile */
    }

    .color-coded-text {
        margin-bottom: -20px; /* Adjust margin for better spacing on mobile */
    }
}

    /* Adjust to avoid single-word lines */
    .planning-applications-text { {
        display: inline-block; /* Helps control wrapping more gracefully */
        word-break: break-word; /* Break long words */
        overflow-wrap: break-word; /* Support wrapping for long words */
    }
}


/* Styling for small screens (500px and below) */
@media (max-width: 500px) {
    .custom-text {
        white-space: normal; /* Allows text wrapping */
        word-break: break-word; /* Prevents single words from breaking to a new line */
    }
}


    .features-section {
    /* General styling if needed */
}

.white-box {
    background-color: #fff; /* White background for individual boxes */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Internal padding */
    margin-bottom: 20px; /* Space between feature boxes */
}

.header-features {
    font-size: 36px;
    line-height: 1.2;
    color: #383835; /* Darker text color for headings */
}

.feature-details .feature-icon-text-pair {
    margin-bottom: 10px; /* Space between feature items */
}

.home-feature-buttons {
    gap: 10px; /* Space between buttons */
    margin-top: 20px;
}

/* Ensure buttons stay in a row on larger screens */
.home-feature-buttons {
    display: flex;
    flex-direction: column; /* Default stack buttons on top of each other */
    gap: 10px; /* Space between buttons */
}



.custom-btn {
  background-color: transparent;
  border: 1px solid #5779DD;
 
  padding: 10px 20px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-btn:hover {
  background-color: #eef4fe; /* light blue */
  border-color: #5779DD;
}


/* Media query to change button layout on larger screens */
@media (min-width: 768px) {
    .home-feature-buttons {
        flex-direction: row; /* Arrange buttons side-by-side on medium and larger screens */
    }
}

@media (max-width: 767px) {
    .home-feature-buttons {
        display: flex;
        flex-direction: column; /* Stack buttons on top of each other */
        align-items: center; /* Center align buttons */
    }
}

/* General styles for all screen sizes */
.home-feature-buttons.d-flex.flex-column {
    display: flex;
    flex-direction: row; /* Default to horizontal layout for larger screens */
    gap: 1.5rem; /* Space between the boxes */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Styles for screens below 1200px */
@media (max-width: 1200px) and (min-width: 767px) {
    .home-feature-buttons.d-flex.flex-column {
       /* flex-direction: column !important;  Stack buttons vertically */
        align-items: center;
        gap: 1.5rem; /* Space between the buttons or boxes */
    }

    /* Optional: If you want buttons to be full width */
    .home-feature-buttons.d-flex.flex-column button {
      
        text-align: center; /* Center the text inside the button */
    }
}



.home-feature-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons on small screens by default */
    gap: 10px; /* Space between buttons */
    align-items: center; /* Center align buttons */
    margin-top: 20px; /* Space above the buttons */
}

/* Ensure buttons stay in a row on larger screens */
@media (min-width: 768px) {
    .home-feature-buttons {
        flex-direction: row; /* Arrange buttons side-by-side on medium and larger screens */
    }
}

/* Optional: Ensure buttons do not overflow on small screens */
@media (max-width: 767px) {
    .home-feature-buttons button {
        width: 100%; /* Full width buttons on small screens */
        box-sizing: border-box; /* Include padding and border in width */
    }
}



/* Ensure boxes take more space on small screens */
@media (max-width: 767px) {
    .white-box {
        width: 100%; /* Full width for mobile screens */
        padding: 15px; /* Adjust padding if needed */
    }
}

.home-feature-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons on small screens by default */
    gap: 10px; /* Space between buttons */
    align-items: center; /* Center align buttons */
    margin-top: 20px; /* Space above the buttons */
}

/* Ensure buttons stay in a row on larger screens */
@media (min-width: 768px) {
    .home-feature-buttons {
        flex-direction: row; /* Arrange buttons side-by-side on medium and larger screens */
    }
}





/* Restrict the container size specifically within the features section */
.features-section .container,
.features-section .container-md,
.features-section .container-sm {
    max-width: 1220px;
}



/* Feature details central alignment for screens between 767px and 990px */
@media (max-width: 990px) and (min-width: 767px) {
    .feature-details.statistics,
    .feature-details.members {
        margin: 0 auto; /* Center the feature-details container */
        text-align: left; /* Center-align text */
    }

    /* Ensure the container of icon-text pairs is centered */
    .feature-icon-text-pair {
        justify-content: left; /* Center the icon and text pairs */
    }

    /* Ensure both white boxes (Advanced Stats and Members) have the same size */
    .white-box {
        width: 100%; /* Full width on medium screens */
        min-height: 550px; /* Ensures both boxes are of equal height */
      
    }

    /* Center align buttons and content */
    .home-feature-buttons {
        justify-content: center;
    }

    .header-features {
        font-size: 32px; /* Adjusted heading size for medium screens */
        margin-bottom: 20px;
    }

    .custom-text {
        margin-bottom: 30px; /* Space between the header and feature details */
    }
}

@media (max-width: 1200px) and (min-width: 990px) {

.white-box {
 /*   min-height: 700px;  Ensures a minimum height across all screen sizes */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures content is spaced within the box */
}
}

@media (max-width: 990px) and (min-width: 767px) {

.white-box {
 /*   min-height: 700px;  Ensures a minimum height across all screen sizes */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures content is spaced within the box */
}

.header-features.pt {
        text-align: left !important; /* Override center alignment */
    }

}

@media (max-width: 767px) {
   
    .feature-details.statistics {
        text-align: left !important; /* Center text content */
        margin: 0 10px;    /* Adjust horizontal margins to shift content left */
    }

    .feature-details.members {
        text-align: left !important; /* Center text content */
        margin: 0 10px;    /* Adjust horizontal margins to shift content left */
    }

    .feature-icon-text-pair {
        justify-content:left; /* Center icon-text pairs */
    }
}

.white-box {
   
    flex: 1 1 100%; /* Allow the box to grow and shrink with equal space */
    box-sizing: border-box; /* Ensure padding is included in width/height */

}

/* Ensure white-boxes take equal height */
@media (min-width: 768px) {
    .row {
        align-items: stretch; /* Make sure all items in the row have the same height */
    }
}

/* Adjust for mobile screens */
@media (max-width: 767px) {
    .white-box {
        min-height: auto; /* Adjust minimum height if needed */
    }
}

@media (max-width: 990px) and (min-width: 767px) {
    .features-section .white-box .feature-details {
        text-align: left; /* Align the feature details to the left */
        padding-left: 15px; /* Optional: Add some padding for better spacing */
    }
}

/* Hide the element by default */
.header-features.text-center-mobile.pt.planning-tracker-header-display {
    display: none; /* Hide element by default */
    text-align: left; /* Ensure text is left-aligned */
    width: 100%; /* Full width to allow alignment adjustments */
}


@media (max-width: 990px) and (min-width: 767px) { 
    .home-feature-buttons.d-flex.flex-column {
        flex-direction: row; /* Align buttons side by side */
        justify-content: flex-start; /* Align the buttons to the left */
       
    }

    .home-feature-buttons.d-flex.flex-column button {
        margin-right: 10px; /* Optional: add space between buttons */
        margin-bottom: 0; /* Remove bottom margin to keep them in a row */
        width: 100%;/* Ensure buttons do not take full width */
   
    }

    
   .planning-tracker-header {
        display: none; /* Hide the element */
    }

    /* Hide the element by default */
.header-features.text-center-mobile.pt.planning-tracker-header{
    display: none;
}


.header-features.text-center-mobile.pt.planning-tracker-header-display {
        display: block; /* Make the element visible */
        /* No need for positioning if already above */
        margin-bottom: 0px; /* Add space below the header to separate it from the image */
        text-align: left;
    }

}


/* Base styles for button alignment */
.planning-tracker-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically by default */
}

    /* Adjust button layout specifically for Planning Tracker between 990px and 767px */
    @media (max-width: 990px) and (min-width: 767px) {
    .planning-tracker-buttons {
        flex-direction: row; /* Align buttons side by side */
        justify-content: flex-start; /* Align buttons to the left */
    }
}

/* General styles for button alignment */
.planning-tracker-buttons {
    display: flex;
    flex-direction: column; /* Default to vertical stacking */
    align-items: center; /* Center align items (optional) */
    gap: 1.5rem; /* Space between the buttons */
}

/* Make sure buttons are side by side in the Planning Tracker section between 1200px and 767px */
@media (max-width: 1200px) {
    .planning-tracker-buttons {
        flex-direction: row !important; /* Align buttons side by side */
        justify-content: flex-start; /* Align buttons to the left */
    }
}


/* General styles for Planning Tracker buttons */
.planning-tracker-btn, .custom-planning-tracker-btn {
    white-space: nowrap; /* Prevent text wrapping */
}

/* Hide new buttons by default */
.new-planning-tracker-buttons {
    display: none;
}

/* Display the original Planning Tracker buttons only above 990px */
@media (min-width: 991px) {
    .original-planning-tracker-buttons {
        display: flex; /* Ensure the original buttons are visible */
    }
    
    .new-planning-tracker-buttons {
        display: none; /* Hide the new buttons */
    }
}

/* Display the new Planning Tracker buttons and hide the original buttons between 990px and 767px */
@media (max-width: 990px) and (min-width: 767px) {
    .original-planning-tracker-buttons {
        display: none; /* Hide the original buttons */
    }

    .new-planning-tracker-buttons {
        display: flex; /* Show the new buttons */
        flex-direction: row; /* Align buttons side by side */
        justify-content: flex-start; /* Align buttons to the left */
        gap: 1rem; /* Space between the buttons */
    }
}

/* Display new Planning Tracker buttons as a column layout below 767px */
@media (max-width: 767px) {
    .original-planning-tracker-buttons {
        display: none; /* Ensure original buttons are hidden */
    }

    .new-planning-tracker-buttons {
        display: flex; /* Show the new buttons */
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align items */
        gap: 1.5rem; /* Space between the buttons */
    }
}





    /* Targeting only images within the Charities section */
.counter .img-fluid {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* Testimonials Container */
.testimonials-container {
   
    padding: 20px;
    text-align: left;
    position: relative; /* Required for pagination positioning */
}

/* Testimonials Header */
.testimonials-header {
    margin-top: 30px;
    margin-bottom: 30px;
    color:#383835;
}

/* Testimonials Grid for Desktop */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
}

.testimonial-box {
    background-color: #EEF2F7;
    border-radius: 5px;
    padding: 20px;
    border-top: 5px solid #C0D62F; Green line at the top of each box 
}

/* Responsive adjustments */
@media (max-width: 990px) and (min-width: 768px) {
    .testimonials {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 767px) {
    .testimonials {
        display: block; /* Ensure the testimonials are displayed as blocks on small screens */
        /* Remove any grid or flex styling */
    }

    .testimonial-box {
        display: block; /* Each testimonial box as a block element */
        margin-bottom: 20px; /* Add some space between blocks on mobile */
        width: 100%; /* Ensure full width on mobile */
    }

    /* Testimonials Container */
.testimonials-container {
    padding: 0px;
}
}





/* FAQ Section Styles */
.faq-container {
  
    margin: 0 auto; /* Center the section */
    max-width: 1200px; /* Optional: restrict max width for large screens */
}

.faq-container h2 {
    text-align: left;
    margin-bottom: 20px;
}

.faq-container p {
    text-align:left;
    margin-bottom: 40px;
}




.faq-item .question {


}

.faq-item .answer {
 

}

/* Media Queries */
@media (max-width: 1400px) {
    .faq-container {
        padding: 20px; /* Ensure padding on medium screens */
    }
}

@media (max-width: 767px) {
    .faq-container {
        padding: 15px; /* Reduce padding on smaller screens if needed */
    }

    .faq-item {
        border-radius: 5px; /* Adjust border radius for smaller screens */
    }
}


    /* Remove padding from the trial-support-section */

/* General styles for the columns */
.trial-support-section .column {
  flex: 1;
  min-width: 250px;
  margin: 30px; /* Default margin for desktop */
  padding: 30px; /* Default padding for desktop */
}

.trial-support-section .column .image-container {
  width: 100%;
}

.column img.full-width-image {
  width: 100%; /* Ensure the image spans the full width of the container */
  height: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .four-columns {
    flex-direction: column;
    align-items: center;
  }

  .trial-support-section .column {
    width: 100%;
    margin: 10px 0; /* Reduced margin for mobile to decrease the gap */
    padding: 15px; /* Reduced padding for mobile */
  }

  .column img {
    width: 100%;
  }

  .trial-header {
    margin-top: 20px; /* Decrease margin-top for mobile to reduce the gap */
    margin-bottom: -5px; /* Slight adjustment to keep consistent spacing */
  }

  .buttons {
    margin-top: 10px; /* Reduce top margin for mobile */
  }
}

/* Responsive adjustments */
@media (max-width: 990px) and (min-width: 767px) {
 
    .trial-support-section .column {
        width: 100%;
        margin: 10px 0; /* Reduced margin for medium screens */
        padding: 20px; /* Adjusted padding for medium screens */
    }

    .column img {
        width: 100%;
    }

    .trial-header {
        margin-top: 20px; /* Decrease margin-top for medium screens */
        margin-bottom: 10px; /* Adjust margin-bottom for consistency */
    }

    .buttons {
        margin-top: 10px; /* Reduce top margin for medium screens */
    }
}

@media (max-width: 767px) {
  

    .trial-support-section .column {
        width: 100%;
        margin: 10px 0; /* Reduced margin for mobile */
        padding: 15px; /* Reduced padding for mobile */
    }

    .column img {
        width: 100%;
    }

    .trial-header {
        margin-top: 20px; /* Decrease margin-top for mobile */
        margin-bottom: -5px; /* Slight adjustment for spacing */
    }

    .buttons {
        margin-top: 10px; /* Reduce top margin for mobile */
    }
}


.foursteps-buttons {
  padding-left: 0px;
  padding-top: 20px;
  padding-bottom: 20px;

}

.foursteps-buttons a {
  padding: 10px 20px; /* Reduce padding */
 
  width: auto; /* Allow buttons to size based on content */
  text-align: center;
}

@media (max-width: 1200px) {

.foursteps-buttons a {
  padding: 10px 20px; /* Reduce padding */
 
  width: 70%; /* Allow buttons to size based on content */
  text-align: center;
}

.foursteps-buttons {
  padding: 20px;
}
}

@media (max-width: 768px) {

  .foursteps-buttons {
      padding: 0px !important;
  }

  .foursteps-buttons a {
      padding: 10px 20px; /* Reduce padding */
    
      width: 70%; /* Allow buttons to size based on content */
      text-align: center;
  }
  }

  /* Optional: Ensure buttons do not overflow on small screens */
@media (max-width: 767px) {
  .home-feature-buttons button {
      width: 100%; /* Full width buttons on small screens */
      box-sizing: border-box; /* Include padding and border in width */
      margin-top: -30px;
  }



.home-feature-buttons.d-flex.flex-column {
  padding-top: 30px;
}

}