HF about.css

<!-- CSS -->

    /* 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;

}

@media (min-width: 992px) {
    .start-50 {
        left: 25% !important;
    }
    
}

@media (max-width: 992px) {
    .start-50 {
        width: 100% !important; /* Three columns per row on medium screens */
    }
    
}




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


@media (max-width: 990px) {
    .about .nav-item {
        width: 100%; /* Ensures each button takes the full width on mobile */
        margin: 0;   /* Removes any margin */
        padding: 0;  /* Removes any padding to ensure alignment */
    }

    .about .nav-item a {
        width: 100%; /* Ensures each button link takes full width */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0; /* Optional: Adjust padding for consistent button height */
    }

    /* Add vertical spacing between buttons if desired */
    .about .nav-item + .nav-item {
        margin-top: 5px;
    }
}


@media (max-width: 990px) {
    .about .nav-item {
        width: 100%; /* Ensures each button takes the full width on mobile */
        margin: 0;   /* Removes any margin */
        padding: 0;  /* Removes any padding to ensure alignment */
    }

    .about .nav-item a {
        width: 100%; /* Ensures each button link takes full width */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0; /* Optional: Adjust padding for consistent button height */
    }

    /* Add vertical spacing between buttons if desired */
    .about .nav-item + .nav-item {
        margin-top: 5px;
    }
}


    .nav {
    display: flex;
    gap: 20px; /* Adjust as needed for spacing */
}

    .counter-item {
        background-color: #fff;
        border-radius: 8px;
       
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #C0D62F;
        border-radius: 50%;
    }
    
    .users {
        border-top: 5px solid #C0D62F;
      
    }

    @media (min-width: 1201px) {
        .users {
       height: 400px;
        }
       .users-block {
        max-width: 1320px!important;
       }
     
    }

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

        .small-text  {
   font-size: 26px;

    }
}
    
    /* Mobile View - Horizontal Scrolling */
    @media (max-width: 767.98px) {
        .mobile-scroll {
            display: flex; /* Enable flex layout */
            flex-wrap: nowrap; /* Prevent wrapping */
            overflow-x: auto; /* Horizontal scrolling */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling */
            margin: 0; /* Remove row margin */
            padding: 0; /* Remove row padding */
        }
    
        .mobile-scroll .col-6 {
            flex: 0 0 auto; /* Prevent shrinking or growing */
            width: 80%; /* Control item width */
            margin-right: 15px; /* Add spacing between items */
        }
    
        /* Hide scrollbar for mobile */
        .mobile-scroll::-webkit-scrollbar {
            display: none;
        }
    }
    

.container-fluid.event {
    margin-bottom: -60px;
}
    /* General Styling for Event Items */
    .event-box {
        margin-bottom: 30px;
        padding: 0; /* Ensure no extra padding */
    }
    
    .event-item {
      
        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 */
        background-color: #fff;
      
    }

    .service-box-home .box-wrapper

    { 
        background-color: #fff;
   

    }

    .service-box-home .front {
    border-top: none:
}

    .top-left-img {
    position: absolute;
    top: 10px;
    left: 35px;
    width: 75%; /* Set image size to 25% of the container */
}


@media (max-width: 768px) {
    .top-left-img {
        position: absolute;
    top: 10px;
    left: 35px;
    width: 75%; /* Set image size to 25% of the container */
}

.col-md-3 .service-box-home img {
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 15px;
    height: auto;
    object-fit: contain;
}
}



.whouses-text {
    margin-top: 180px;
    font-size: 26px;
   
}
    
    .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;
    }

    .services-text {
        margin-bottom: 70px;
    }
    
    /* 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: 500px;
            padding: 0px;
        }
    }

    .who-uses-text p, h5 {
font-size: 18px;
        }
    
    /* 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 */
        }

        .whouses-text p,
.whouses-text h5 {
    font-size: 22px;
}

.whouses-text h2 {
    font-size: 36px;
}

    }


    @media (max-width: 1400px) and (min-width: 1200px) {
.who-uses-text-outer {
    margin-left: 0px;
}
    
}

@media (max-width: 1200px) and (min-width: 990px) {
    .col-md-3 .service-box-home img {
    padding:60px;
    margin-top: -30px;
    margin-left: 30px;
}
.who-uses-text-inner {
    margin-left: 30px!important;
}


.row .event-box {
        max-width: 800px;
    }
}


@media (max-width: 990px) and (min-width: 767px) {
    .col-md-3 .service-box-home img {
    padding:30px;
   
}
.who-uses-text-inner {
    margin-left: 30px!important;
}
}

@media (max-width: 767px) and (min-width: 500px) {
    .col-md-3 .service-box-home img {
       
    }

.who-uses-text-inner {
    margin-left: 30px!important;
}
}


@media (max-width: 550px) {
    .col-md-3 .service-box-home img {  
   
    }
.who-uses-text-inner {
    margin-left: 30px!important;
}
}



@media (max-width: 767px) {
    /* Scroll Indicator Styling */
    .scroll-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -15px; /* Space above the dots */
        margin-bottom: 25px; /* Space below the dots */
    }

    /* Styling for each dot */
    .scroll-indicator .dot {
        width: 10px;
        height: 10px;
        margin: 0 5px; /* Spacing between dots */
        background-color: #C0D62F; /* Match the theme color */
        border-radius: 50%; /* Make dots circular */
        opacity: 0.7; /* Slightly transparent */
        animation: pulse 1.5s infinite ease-in-out; /* Optional animation */
    }

    /* Optional pulse animation */
    @keyframes pulse {
        0%, 100% {
            opacity: 0.7;
        }
        50% {
            opacity: 1;
        }
    }
}


/* General Timeline Container */
.timeline-container {
    display: flex;
    justify-content: space-between; /* Space between items */
    align-items: flex-start;
    padding: 50px 5%; /* Adds margins on both sides */
    position: relative;
    text-align: center;
}

.timeline-container-2 {
    display: flex;
    justify-content: space-between; /* Space between items */
    align-items: flex-start;
    padding: 50px 5%; /* Adds margins on both sides */
    padding-top: 0px;
    position: relative;
    text-align: center;
}

@media (min-width: 767px) {
    .desktop-hide {
        display: none !important;
  
    }
}


.timeline-item {
    background-color: #EEF2F7;
    padding: 20px;
    width: 30%; /* Each box takes up 30% of the container */
    border-radius: 8px;
    position: relative;
    z-index: 1;
    display: flex; /* Enable flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    text-align: center; /* Center text */
  height: 400px;
    border-top: 5px solid #C0D62F;
   
}

/* Support Icon Styling */
.support-icon {
    display: block;
    margin-top: 20px;
    width: 30%;
    height: auto;
    align-self: center; /* Ensure the icon stays centered */
}

/* Year Styling */
.timeline-item .year {
    font-size: 48px;
    color: #a4cc27;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
/* Lowering Items */
.timeline-item-top.lower {
    margin-top: 50px;
}

/* Lowering Items */
.timeline-item-top.lower {
    margin-top: 0px;
}

.timeline-item.lower-lower {
    margin-top: 0px;
}

/* Lowering Items */
.timeline-item-bottom.lower {
    margin-top: 0px;
}

/* Lowering Items */
.timeline-item-bottom.lower {
    margin-top: 0px;
}

.timeline-item-bottom.lower-lower {
    margin-top: 0px;
}


/* Horizontal dotted lines */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%; /* Align in the middle */
    left: 100%; /* Start at the right edge */
    width: calc(100% + 20px); /* Length of line extends slightly */
    height: 2px;
    background-image: linear-gradient(to right, #a4cc27 50%, transparent 50%);
    background-size: 10px 2px; /* Dotted effect */
    background-repeat: repeat-x;
    transform: translateY(-50%);
    z-index: 0;
}



.timeline-item-top {
    background-color: #EEF2F7;
    padding: 20px;
    width: 30%; /* Each box takes up 30% of the container */
    border-radius: 8px;
    position: relative;
    z-index: 1;
    display: flex; /* Enable flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    text-align: center; /* Center text */
    height: 400px;
    border-top: 5px solid #C0D62F;
    
}

/* Horizontal dotted lines */
.timeline-item-top::after {
    content: '';
    position: absolute;
    top: 50%; /* Align in the middle */
    left: 100%; /* Start at the right edge */
    width: calc(100% + 20px); /* Length of line extends slightly */
    height: 2px;
    background-image: linear-gradient(to right, #a4cc27 50%, transparent 50%);
    background-size: 10px 2px; /* Dotted effect */
    background-repeat: repeat-x;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-item-top::before {
    content: '';
    position: absolute;
    top: 50%; /* Align vertically with the dotted line */
    left: calc(111% - 10px); /* Align it to the green dotted line */
    transform: translate(-50%, -50%); /* Center the arrowhead horizontally and vertically */
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #a4cc27; /* Arrowhead color */
    z-index: 1; /* Ensure it appears above the dotted line */
}




.timeline-item-bottom {
    background-color: #EEF2F7;
    padding: 20px;
    width: 30%; /* Each box takes up 30% of the container */
    border-radius: 8px;
    position: relative;
    z-index: 1;
    display: flex; /* Enable flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    text-align: center; /* Center text */
    height: 400px;
    border-top: 5px solid #C0D62F;
  
}


@media (min-width: 1200px) {
    .timeline-item,
.timeline-item-top,
.timeline-item-bottom {
height: 300px;
}
}



/* Horizontal dotted lines */
.timeline-item-bottom::after {
    content: '';
    position: absolute;
    top: 50%; /* Align in the middle */
    left: 100%; /* Start at the right edge */
    width: calc(80% + 20px); /* Length of line extends slightly */
    height: 2px;
    background-image: linear-gradient(to right, #a4cc27 50%, transparent 50%);
    background-size: 10px 2px; /* Dotted effect */
    background-repeat: repeat-x;
    transform: translateY(-50%);
    z-index: 0;
}

.timeline-item-bottom::before {
    content: '';
    position: absolute;
    top: 50%; /* Align vertically with the dotted line */
    left: calc(108% - 10px); /* Align it to the green dotted line */
    transform: translateX(50%) translateY(-50%); /* Center horizontally with the line */
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #a4cc27; /* Arrowhead pointing left */
    z-index: 1; /* Ensure it appears above the dotted line */
}

@media (max-width: 767px) {
    .timeline-item-bottom::before {
        display: none !important;
    }
}



/* Remove line after the last item in a row */
.timeline-item:last-child::after {
    display: none;
}

/* Arrowhead for horizontal line */
.timeline-item::after::after {
    content: '';
    position: absolute;
    top: 50%; /* Align with the horizontal line */
    left: 100%; /* Position at the end of the line */
    transform: translate(-50%, -50%) rotate(90deg); /* Rotate for alignment */
    border-top: 10px solid #a4cc27; /* Arrowhead color */
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    z-index: 2; /* Ensure it appears above the line */
}

/* Arrowhead for vertical line below box 3 */
#box3::before {
    content: ''; /* Required to render the pseudo-element */
    position: absolute;
    bottom: -50px; /* Extend below the box */
    left: 50%; /* Center the line horizontally */
    transform: translateX(-50%); /* Adjust for true centering */
    width: 2px;
    height: 50px; /* Height of the vertical line */
    background-image: linear-gradient(to bottom, #a4cc27 50%, transparent 50%);
    background-size: 2px 10px; /* Create dotted effect */
    background-repeat: repeat-y;
  
    
    z-index: 0;
}

/* Arrowhead for the vertical line below box 3 */
#box3::after {
    content: '';
    position: absolute;
    bottom: -50px; /* Align with the bottom of the vertical line */
    left: 50%;
    transform: translate(-50%, 100%); /* Adjust positioning */
   
    z-index: 1;
}





/* Year Styling */
.timeline-item-top .year {
    font-size: 48px;
    color: #a4cc27;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Year Styling */
.timeline-item-bottom .year {
    font-size: 48px;
    color: #a4cc27;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Support Icon Styling */
.support-icon {
    display: block;
    margin-top: 20px;
    width: 30%;
    height: auto;
    align-items: center;
}


    @media (max-width: 767px) {
    /* Set timeline container to block format */
    .timeline-container, .timeline-container-2 {
        display: block;
        padding: 20px 5%; /* Adjust padding for smaller screens */
    }

    .timeline-item {
        width: 100%; /* Full width */
        margin-bottom: 30px; /* Spacing between items */
        margin-top: -30px;
        position: relative; /* Ensure positioning context for lines */
    }

    /* Remove dotted lines */
    .timeline-item::after {
        display: none;
    }

       /* Set timeline container to block format */
       .timeline-container, .timeline-container-2 {
        display: block;
        padding: 20px 5%; /* Adjust padding for smaller screens */
    }

    .timeline-item-top {
        width: 100%; /* Full width */
        margin-bottom: 30px; /* Spacing between items */
        position: relative; /* Ensure positioning context for lines */
    }

    /* Remove dotted lines */
    .timeline-item-top::after {
        display: none;
    }

    /* Remove dotted lines */
    .timeline-item-top::before {
        display: none;
    }

    .timeline-item-bottom {
        width: 100%; /* Full width */
        margin-bottom: 30px; /* Spacing between items */
        position: relative; /* Ensure positioning context for lines */
    }

    /* Remove dotted lines */
    .timeline-item-bottom::after {
        display: none;
    }

        /* Remove dotted line below 2023 box */
        #box3::before {
        display: none;
      
    }

    .timeline-item.lower-lower {
     margin-top: 20px;
     margin-bottom: 20px; /* Match the spacing of other boxes */
}

.timeline-item.lower {
    margin-top: 20px;
    margin-bottom: 20px; /* Match the spacing of other boxes */
}

.timeline-item-top.lower-lower {
     margin-top: 20px;
     margin-bottom: 20px; /* Match the spacing of other boxes */
}

.timeline-item-top.lower {
    margin-top: 20px;
    margin-bottom: 20px; /* Match the spacing of other boxes */
}

.timeline-item-bottom.lower-lower {
     margin-top: 20px;
     margin-bottom: 20px; /* Match the spacing of other boxes */
}

.timeline-item-bottom.lower {
    margin-top: 20px;
    margin-bottom: 20px; /* Match the spacing of other boxes */
}

    /* Reduce gap between timeline containers */
    .timeline-container + .timeline-container-2 {
        margin-top: 0; /* Remove extra space between containers */
        padding-top: 10px; /* Optional: Add a small padding for a smoother transition */
    }

    
      /* Specific adjustments for box3 */
      .box3-margin {
        margin-bottom: 0px; /* Match the spacing of other boxes */
        margin-top: 20px; /* Optional: Adjust top margin if necessary */
    }

      /* Reduce gap between timeline containers */
      .timeline-container + .timeline-container-2 {
        margin-top: -50px; /* Ensure no extra spacing between containers */
        padding-top: 10px; /* Optional small padding for smooth transition */
    }


}


.service .service-item .service-link {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end; /* Align content at the bottom */
    justify-content: center; /* Center content horizontally */
    background: none;
    transition: 0.5s;
    text-align: center;
   
}


.logos {
    width: 80%!important;         /* Set the image width */
    display: block;     /* Make sure it behaves like a block element */
    margin: 0 auto;     /* Center the image horizontally */
}

/* Media query for screens below 990px */
@media (max-width: 990px) {
    .logos {
        width: 40% !important;     /* Set the image width to 40% on smaller screens */
    }

    
.service .service-item .service-link a {
    color: #C0D62F; 
    transition: 0.5s;
    font-size: 26px !important;
}
}



    .service-item {
    position: relative;
    padding-bottom: 20px; /* Add space at the bottom to move text down */
    justify-content: center; /* Centers content vertically */
    align-items: center !important;     /* Centers content horizontally */
    height: 100%;            /* Ensures the full container height is used */
    text-align: center !important;      /* Centers text in case of overflow */
}

.service .service-item .service-link a {
    color: #C0D62F; 
    transition: 0.5s;
    font-size: 36px;
}

.service .service-item .service-link a:hover,
.service .service-item .service-link a:focus {
    color: #5779DD !important; /* Use !important to override other styles */
    transition: color 0.5s ease;
}


.service .service-item .service-link:hover {
    background: none;
    
}

.service-link a {
    color: #C0D62F; /* Set text color */
    text-decoration: none;
    font-size: 24px; /* Adjust font size */
    text-align: center;
    
}

.service-link a:hover {
    color: #C0D62F; /* No change on hover */
}

.service-item img {
    transition: none !important; /* Disable any transition effects */
    transform: none !important;  /* Ensure no transformation is applied */
    margin-bottom: 30px !important;
}

.service-item:hover img {
    transform: none !important;  /* Ensure no scaling occurs on hover */
}

.service-item a {
    position: relative; /* Position relative to the service item */
    z-index: 10; /* Bring anchor links to the front */
}


/* 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;
}

/* 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;
}

.testimonials-header {
    padding-top: 20px;
  
}
}


/* Dark background class */

.certificates {
    align-items: center;
}

.dark-bg {
    background-color: #383835; /* Dark background color */
    color: #ffffff; /* White text color for contrast */
}

.service-item {
 
    align-items: center; /* Vertical centering */
}

/* Adjust links inside the dark background */
.dark-bg .service-link a {
    color: #c0d62f; /* Greenish color for links */
    text-decoration: none;
}

.dark-bg .service-link a:hover {
    text-decoration: underline; /* Optional hover effect */
}

/* Logos inside the dark background */
.dark-bg .logos {
    filter: brightness(0.9); /* Slight adjustment for logos on dark background */
}


/* 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 */
    }
}