section.banner {
    background-image: url("../../assets/img/homepage/banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 950px;
    align-content: center;
}

section.banner .banner__content {
    max-width: 600px;
    width: 100%;
    margin-right: auto;
}

section.banner .banner__content *:not(a) {
    color: #ffffff;
}

section.banner .banner__content p {
    font-size: 18px;
    line-height: normal;
}

section.banner .banner__content a {
    padding: 15px 40px;
}

section.banner .banner__content a span {
    font-weight: 600;
}

section.banner .banner__content .radial-button:hover::before {
    background: transparent;
}

section.banner .banner__content .radial-button:hover {
    background-color: transparent;
}

section.about {
    background-color: white;
    border-radius: 50px 50px 0 0;
    position: relative;
    bottom: 50px;
}

section.about .image_carousel {
    max-width: 926px;
    width: 100%;
}

section.about .about__text {
    max-width: 600px;
    width: 100%;
}

section.about .image_slider {
    display: flex;
    gap: 25px;
}


/* Initial state for individual image containers (.image1, .image2) */

section.about .image_slider .image1,
section.about .image_slider .image2 {
    /* Define the transition for all animatable properties */
    transition: all 0.8s ease-out;
    /* Adjust timing as needed */
    /* Initially hide and move off-screen */
    opacity: 0;
    transform: translateX(-100px);
    /* Start 100px to the left */
}


/* Delay for the second image to create a staggered effect */

section.about .image_slider .image2 {
    transition-delay: 0.1s;
    /* Start animating slightly after image1 */
}

section.about #aboutImageCarousel.animated .image_slider .image1,
section.about #aboutImageCarousel.animated .image_slider .image2 {
    opacity: 1;
    /* Make them visible */
    transform: translateX(0);
    /* Slide them to their original position */
}

section.about .image_slider .image1 {
    /* position: relative;

    top: 40px; */
    margin-top: 40px;
}


/* --- INACTIVE DOTS (Default appearance) --- */


/* Target all indicator buttons specifically */

section.about .carousel-indicators button {
    /* Required to override Bootstrap's semi-transparent background and reset border */
    background-color: #b4b4b4;
    /* Solid grey fill for inactive dots */
    opacity: 1;
    border: none;
    /* Shape and Size */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /* Space between dots. IMPORTANT: Set a consistent margin-left/right */
    /* margin-left: 5px; 

    margin-right: 5px;  */
    /* Ensure border doesn't clip the background if you add a border */
    background-clip: unset;
    /* Animation - APPLYING TO ALL PROPERTIES (including background-color and transform) */
    transition: all 0.3s ease-in-out;
    /* Add the border on the inactive state too, but make it transparent. 

       This prevents a jump in width/height when the active state adds the border. */
    border: 2px solid transparent;
}


/* --- ACTIVE DOT (Outlined and Scaled appearance for smoothness) --- */

section.about .carousel-indicators button.active {
    /* TRANSITION ADJUSTMENT: 

       Keep width/height at 10px and use transform: scale() to make it visually larger (1.4x) 

       This prevents layout shifting issues that come with changing dimensions directly. */
    /* Background and Outline */
    background-color: transparent;
    border-color: var(--blue);
    /* Now the border color is visible (2px solid) */
    /* Scale the dot to be 1.4 times its original size (10px * 1.4 = 14px visual size) */
    transform: scale(1.4);
    /* Resetting margin is now less critical since we used transform, 

       but keeping margins consistent helps overall layout stability. */
    /* margin-left: 5px; 

    margin-right: 5px; */
    /* The Bootstrap 'active' class usually sets opacity: 1, but we keep it to be explicit */
    opacity: 1;
}


/* Optional: Clean up default Bootstrap margin on the indicator wrapper */

section.about .carousel-indicators {
    /* Center the indicators horizontally and remove default margin */
    margin: 0 auto;
    /* bottom: 20px; Example: Position it consistently */
}

section.about .carousel-indicators {
    position: unset;
    margin: 0;
    justify-content: start;
    align-items: center;
    gap: 25px;
    margin-top: 100px;
}

section.trusted_clients .heading {
    font-size: 22px;
    font-weight: 500;
}

section.trusted_clients .logo-card {
    /* Ensure the cards take up necessary space and don't shrink */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    width: 100%;
    border-radius: 15px;
    background: rgba(29, 166, 161, 0.2);
}

section.trusted_clients .logo-card img {
    max-height: 100%;
    width: auto;
}

section.trusted_clients .owl-nav.disabled {
    display: none;
}

section.trusted_clients .owl-stage-outer {
    overflow: hidden;
}

section.trusted_clients .owl-stage {
    display: flex;
    overflow: hidden;
}


/* --- Revised CSS --- */


/* The main section now only handles positioning/background for its children */

section.reason {
    position: relative;
    /* This background will show *before* the reveal animation starts */
    background: #fff;
    overflow: hidden;
    /* Still good practice for the section */
    padding-inline: 0;
    /* REMOVED: --clip-radius, clip-path, and transition */
}


/* New: The actual background element is now the animated target */

section.reason .radial_background_center {
    /* Define initial CSS Variable for the clip-path radius */
    --clip-radius: 0%;
    /* Use the variable for the clip-path property (centered) */
    clip-path: circle(var(--clip-radius) at 50% 50%);
    -webkit-clip-path: circle(var(--clip-radius) at 50% 50%);
    /* Add a smooth transition for the clip-path property */
    transition: clip-path 1.5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-clip-path 1.5s cubic-bezier(0.86, 0, 0.07, 1);
    /* Add styling to make the background element visible and cover the area */
    position: absolute;
    /* Allows it to cover the section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Give it a distinct background color to be revealed */
    background-color: #181e22;
    /* Example color, replace with your final background */
    z-index: 0;
    /* Ensure it stays behind the content */
}


/* The content of the section must be placed *above* the animated background */

section.reason .reason__content {
    position: relative;
    z-index: 1;
    /* Keep content above the background */
}


/* Add a class for the "revealed" state, now targeting the child element */

.reason.is-revealed .radial_background_center {
    /* Set the final radius when the element is in view and fully revealed */
    --clip-radius: 300vmax;
}

section.reason .reason__header,
section.reason .reason_grid {
    position: relative;
    z-index: 1;
}

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


/* --- New CSS for reason_grid Animation --- */


/* 1. Define the transition for all animatable properties on the image containers */

.reason_grid .reason_image {
    /* Apply transition to make the slide-in smooth */
    transition: all 0.8s ease-out;
    /* Initially hide the elements */
    opacity: 0;
    /* Start images 50px to the left, ready to slide right */
    transform: translateX(-50px);
}


/* 2. Define the animated state, triggered by the 'animated' class on the parent */

.reason_grid.animated .reason_image {
    /* Make them visible */
    opacity: 1;
    /* Slide them to their original position */
    transform: translateX(0);
}


/* 3. Staggered Delay for the images */


/* The first image is already defined by the base rule */

.reason_grid .reason_image:nth-child(3) {
    /* Delay for the second image (third child in the grid) */
    transition-delay: 0.1s;
}

.reason_grid .reason_image:nth-child(5) {
    /* Delay for the third image (fifth child in the grid) */
    transition-delay: 0.2s;
}

.reason_grid .reason_image:nth-child(7) {
    /* Delay for the fourth image (seventh child in the grid) */
    transition-delay: 0.3s;
}


/* end animation */

section.reason .reason__padding {
    padding-inline: 30px;
}

section.reason .reason_image {
    height: 100%;
    border-radius: 15px;
}

section.reason .reason_image img {
    object-fit: cover;
    height: 100%;
    border-radius: 15px;
    width: 100%;
}

section.reason .reason__header span {
    color: var(--blue);
    font-family: var(--montserrat-semibold);
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

section.reason .reason__header h2 {
    color: white;
}

section.reason .reason_card {
    padding: 50px;
    border-radius: 15px;
    background: var(--blue);
    display: flex;
    flex-direction: column;
}

section.reason .reason_card h3 {
    margin-bottom: 10px;
}

section.reason .reason_card * {
    color: white;
}

section.reason .reason_card .reason_card_icon svg {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

section.reason .card_blue {
    background: var(--blue);
}

section.reason .card_teal {
    background: var(--teal);
}

section.reason .explore__row {
    display: flex;
    /* gap: 50px; */
    /* align-items: center; */
}

section.reason .owl-stage {
    display: flex;
}

section.reason .explore__carousel {
    overflow: hidden;
}

section.reason .owl-nav,
section.reason .owl-dots {
    display: none;
}


/* .owl-item {

    max-width: 512px;

    width: 100%;

}  */


/* This targets every carousel item ONLY inside the .explore__carousel */


/* .explore__carousel .owl-item {

    width: 512px !important;

}



.explore__carousel .owl-item .item-content-selector {

    max-width: 100%;

} */

.glider-track {
    gap: 20px;
}

button.glider-dot {
    width: 12px;
    height: 12px;
    background: #6d6d6d;
    transition: 0.3s ease-in-out;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    border: 2px solid #6d6d6d;
}

button.glider-dot.active {
    width: 25px;
    height: 25px;
    background: transparent;
    border-color: #1da6a1;
}

section.reason .explore__row .explore_carousel_dots {
    margin-top: 177px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: start;
    height: 30px;
}

section.reason .explore__content {
    position: relative;
    z-index: 1;
    margin-top: 150px;
    padding-top: 50px;
}

section.reason .explore__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

section.reason .explore__header .explore_header1 {
    color: var(--blue);
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-family: var(--montserrat-semibold);
}

section.reason .explore__header .explore_header2 {
    color: white;
    font-family: var(--montserrat-semibold);
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

section.reason .explore__text {
    max-width: 482px;
    width: 100%;
}

section.reason .explore__text p,
section.reason .explore__text h2 {
    color: white;
}

section.reason .explore_card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 15px;
    /* border: 1px solid rgba(0, 0, 0, 0.15); */
    background: #fff;
    position: relative;
    /* Make sure this is present */
    overflow: hidden;
    max-width: 512px;
    width: 100%;
    justify-content: space-between;
    /* margin-right: 20px; */
}


/* 2. Define the gradient overlay using a pseudo-element (initially hidden/transparent) */

section.reason .explore_card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Start fully transparent/invisible */
    background: linear-gradient(180deg, rgba(24, 30, 34, 0) 0%, #181e22 100%);
    opacity: 0;
    /* Set opacity to 0 initially */
    transition: opacity 0.3s ease-in-out;
    /* Smooth transition */
    pointer-events: none;
    /* Allows clicks to pass through */
}


/* 3. Make the overlay visible on hover */

section.reason .explore_card:hover::after {
    opacity: 1;
}

section.reason .explore_card:hover .explore_content * {
    color: white;
}

section.reason .explore_card:hover .post_image {
    transform: scale(2.2);
}

section.reason .explore_card .post_image {
    width: 100%;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

section.reason .explore_card .post_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}


/* section.reason .explore_card:hover .post_image img {

    transform: scale(1.2);

} */

section.reason .explore_content {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 1;
}

section.reason .explore_read_more {
    padding: 20px 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}

section.reason .explore_read_more a {
    font-family: var(--opensans-semibold);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--blue);
}

section.reason .explore_read_more a svg {
    /* 1. Add transition to the arrow's transform property */
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

section.reason .explore_card:hover .explore_read_more a svg {
    /* 2. Move the arrow 10 pixels to the right on card hover */
    transform: translateX(10px);
}

section.reason .explore_card:hover .explore_read_more a {
    color: var(--teal);
}

section.reason .explore_card:hover .explore_read_more a svg path {
    stroke: var(--teal);
}

section.reason .see-more-btn {
    display: flex;
    justify-content: center;
}

section.reason .see-more-btn a {
    padding: 15px 40px;
}


/* add animation in explore_content */


/* Base styles for the sliding element */

.header_outer {
    position: relative;
    top: 0;
    opacity: 1;
    /* Ensure it starts visible and ready */
    visibility: visible;
    pointer-events: auto;
    /* Allow interaction */
    transition: top 1s ease-out, opacity 0.5s ease-out, visibility 0s 0.5s;
    /* Important for visibility delay */
}


/* State when the animation is active (slides up and fades) */

.header_outer.slide-up-active {
    top: -50px;
    opacity: 0;
}


/* 🌟 New State for Invisible 🌟 */

.header_outer.slide-up-invisible {
    opacity: 0;
    /* Already set by slide-up-active, but kept for clarity */
    visibility: hidden;
    /* Makes it completely invisible */
    pointer-events: none;
    /* Prevents clicks on the now-invisible element */
    /* Delay visibility: hidden until the opacity transition (1s) is finished. 
       This makes the element disappear *after* it fades out. */
    transition-delay: 0s, 0s, 1s;
}


/* 1. Initial State (Hidden and Shifted Left) - Ready to slide in */

.slide-in-left-content {
    /* Starts hidden off to the left */
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}


/* 2. Active State (Visible and In Place) */

.slide-in-left-content.animate-active {
    /* Slides from left to center */
    transform: translateX(0);
    opacity: 1;
}


/* 3. Slide-Out State (Shifted Right) - When scrolled away */


/* .slide-in-left-content.animate-inactive {
    transform: translateX(100%); 
    opacity: 0; 
} */


/* In your style sheet */

section.how_to_order {
    /* Existing background styles */
    background-image: url(/wp-content/themes/aquacube/assets/img/homepage/choose.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* * ADD THIS LINE:

     * It tells the browser to transition the background-image property 

     * over 0.6 seconds using an ease-in-out timing function.

     * Note: Not all browsers handle transitions on background-image smoothly.

     * The opacity-based solution below is often more reliable.

     */
    transition: background-image 0.6s ease-in-out;
    min-height: 900px;
}

section.how_to_order .order-accordion-container {
    max-width: 550px;
    background-color: #181e22;
    border-radius: 15px;
    overflow: hidden;
    padding: 7px;
}

section.how_to_order .order-accordion-container h2 {
    color: white;
    padding: 20px 0 0 20px;
}

section.how_to_order .order-accordion-container h3 {
    margin-bottom: 0;
    color: white;
}

section.how_to_order .order-accordion-container p {
    color: white;
    margin-left: 75px;
}

section.how_to_order .accordion-header {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 50px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: none;
}

section.how_to_order .accordion-body {
    padding: 10px 20px 20px 20px;
}

section.how_to_order .accordion-header.active {
    background: #2b3236;
    box-shadow: none;
    padding-bottom: 0;
}

section.how_to_order .step-number {
    font-size: 26px;
    font-weight: 700;
    margin-right: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border: 2px solid var(--black);
    background: #0c1012;
    border-radius: 120px;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    font-family: var(--montserrat-semibold);
}

section.how_to_order .accordion-item {
    margin-bottom: 5px;
    background: #2b3236;
    border: none;
    border-radius: 15px;
}

section.how_to_order .accordion-header.active .step-number {
    color: #fff;
    border-color: var(--teal);
    background: var(--teal);
}

section.how_to_order .accordion-header::after {
    content: unset;
}

section.contact_form .forms {
    padding: 30px 50px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: #fff;
    max-width: 778px;
    width: 100%;
}

section.contact_form .forms form p {
    margin-bottom: 0;
}

section.contact_form .forms form input,
section.contact_form .forms form select,
section.contact_form .forms form textarea {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    width: 100%;
}

section.contact_form .forms form input::placeholder,
section.contact_form .forms form textarea::placeholder {
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--opensans-light);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

section.contact_form .forms form input[type="submit"] {
    font-family: var(--montserrat-medium);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

section.contact_form .forms form select {
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--opensans-light);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    width: 100%;
}

section.contact_form .forms form .contact_row span.wpcf7-form-control-wrap {
    width: 100%;
}

section.contact_form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

section.contact_form .forms form .contact_row p {
    display: flex;
    gap: 20px;
}

section.contact_form .image {
    max-width: 779px;
    width: 100%;
}

section.contact_form .image img {
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}


/* 1. Wrapper Styling */


/* This container is essential for positioning the SVG relative to the select box */

section.contact_form .cf7-select-wrapper {
    position: relative;
    display: inline-block;
    /* Adjust if your select is block-level */
    width: 100%;
    /* Ensure the wrapper takes the full width of the select */
}


/* 2. SVG Positioning */

section.contact_form .cf7-dropdown-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    /* Adjust this value to set distance from the right edge */
    transform: translateY(-50%);
    pointer-events: none;
    /* Crucial: Allows clicks to pass through to the select element */
    z-index: 2;
    /* Ensure it is above the select box */
}


/* 3. Hide the Native Browser Arrow */


/* This is the tricky part, as it differs slightly by browser */

section.contact_form .cf7-select-wrapper select.wpcf7-select {
    /* Remove default dropdown arrow in WebKit (Chrome, Safari) */
    -webkit-appearance: none;
    /* Remove default dropdown arrow in Firefox */
    -moz-appearance: none;
    /* Remove default dropdown arrow in Edge/IE (optional) */
    appearance: none;
    /* Ensure there is padding on the right side so the text doesn't hide behind the SVG */
    padding-right: 35px !important;
    /* Add background image to none to prevent IE/Edge from adding default arrow */
    background-image: none !important;
}

section.contact_form .wpcf7 form .wpcf7-response-output {
    margin: 0;
}

section.contact_form .radial-button-wrapper {
    width: 100%;
}

section.latest_blogs .blog_card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
}

section.latest_blogs .blog_card .post_image {
    width: 100%;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
}

section.latest_blogs .blog_card .post_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: 0.5s ease-in-out;
}

section.latest_blogs .blog_card:hover .post_image img {
    transform: scale(1.2);
}

section.latest_blogs .blog_content {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

section.latest_blogs .blog_content span {
    color: #000;
    line-height: 25px;
}

section.latest_blogs .blog_read_more {
    padding: 20px 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

section.latest_blogs .blog_read_more a {
    font-family: var(--opensans-semibold);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
    color: var(--blue);
}

section.latest_blogs .blog_card:hover .blog_read_more a {
    color: var(--teal);
}

section.latest_blogs .blog_card:hover .blog_read_more a svg path {
    stroke: var(--teal);
}

section.latest_blogs .see-more-btn {
    display: flex;
    justify-content: center;
}

section.latest_blogs .see-more-btn a {
    padding: 15px 40px;
}

section.latest_blogs .latest_blogs_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1199px) {
    section.about .image_carousel {
        max-width: 100%;
    }
    section.about .about__text {
        max-width: 100%;
    }
    section.about .carousel-indicators {
        margin-top: 70px;
    }
    section.about .image_slider .image1 {
        width: 100%;
    }
    section.about .image_slider .image2 {
        width: 100%;
    }
    section.reason .reason_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    section.reason .reason_image {
        height: 400px;
    }
    section.reason .reason_card {
        height: 400px;
    }
    section.reason .explore__row {
        gap: 50px;
    }
    section.reason .explore__row .explore_carousel_dots {
        margin-top: 50px;
    }
    section.reason .explore_card {
        max-width: 100%;
    }
    section.contact_form .image,
    section.contact_form .forms {
        max-width: 100%;
    }
    section.contact_form .image img {
        width: 100%;
    }
    section.latest_blogs .latest_blogs_content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    section.reason .reason_card {
        padding: 30px;
    }
    section.reason .reason_grid {
        grid-template-columns: repeat(1, 1fr);
    }
    /* 
    .reason_grid .reason_image:nth-of-type(1) {
        order: 0;
    }

    .reason_card.card_blue:nth-of-type(1) {
        order: 1;
    }

    .reason_grid .reason_image:nth-of-type(2) {
        order: 2;
    }

    .reason_card.card_blue:nth-of-type(2) {
        order: 3;
    }

    .reason_grid .reason_image:nth-of-type(3) {
        order: 4;
    }

    .reason_card.card_teal:nth-of-type(1) {
        order: 5;
    }

    .reason_grid .reason_image:nth-of-type(4) {
        order: 6;
    }

    .reason_card.card_teal:nth-of-type(2) {
        order: 7;
    } */
    section.reason .reason_card {
        height: auto;
    }
    section.reason .reason_image {
        height: auto;
    }
    section.reason .explore_card {
        margin: 0;
    }
    section.contact_form .forms {
        padding: 30px;
    }
    section.latest_blogs .latest_blogs_content {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 575px) {
    section.contact_form .forms form .contact_row p {
        flex-direction: column;
        gap: 0;
    }
}

.about__text p {
    color: #000;
}


/* wrapper to place buttons beside each other */

.carousel-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 30px;
}


/* button design */

.custom-carousel-btn {
    display: flex;
    width: 70px;
    height: 70px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid #1DA6A1;
    background: #FFF;
    box-shadow: 0 0 8px rgba(29, 166, 161, 0.40);
    transition: all .3s ease;
    cursor: pointer;
}


/* hover state */

.custom-carousel-btn:hover {
    border: 1px solid #1DA6A1;
    box-shadow: 0 0 8px rgba(29, 166, 161, 0.40), 0 0 16px rgba(29, 166, 161, 0.25);
    transform: scale(1.05);
}

.catalog-download-wrapper {
    margin-bottom: 15px;
}

.catalog-download-btn {
    color: #1DA6A1;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    /* 156.25% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}