/*--------------------------------------------------------------
# Common CSS 
--------------------------------------------------------------*/
.text-image-section {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-justify {
    text-align: justify;
}

.text-left {
    text-align: left;
}

.text-40 {
    font-size: 40px !important;
}

.text-20 {
    font-size: 20px !important;
}

.mt-big {
    margin-top: 200px;
}

.mb-6 {
    margin-bottom: 5rem !important;
}

@media screen and (max-width: 500px) {
    .mt-big {
        margin-top: 100px;
    }
}

.solution-card,
.btn-colored,
.collapsible-button {
    will-change: transform;
}

body {
    transform: translateZ(0);
}

#header {
    transition: background-color 0.5s ease;
}

/*--------------------------------------------------------------
# Text Image Container 
--------------------------------------------------------------*/

.text-image-container {
    text-align: left;
}

/* Header */
.text-image-container h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 30px;
}

/* Description */
.text-image-container p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 30px;
}

.text-image-container img {
    border-radius: 50px;
}

.text-image-container .px-big {
    padding-left: 8%;
    padding-right: 8%;
}

.text-image-container .px-small {
    padding-left: 3%;
    padding-right: 3%;
}

@media screen and (max-width: 500px) {
    .text-image-container h2 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .text-image-container p {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .text-image-container .mt-big {
        margin-top: 100px;
    }

    .text-image-container .px-small {
        padding-left: 0%;
        padding-right: 0%;
    }

    .text-image-container .px-big {
        padding-left: 0%;
        padding-right: 0%;
    }
}

.px-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}

/*--------------------------------------------------------------
# General Carousel Splide CSS 
--------------------------------------------------------------*/
.general-carousel-splide .splide {
    padding-bottom: 100px;
}

.general-carousel-splide .splide__slide {
    height: 550px;
}

.general-carousel-splide .carousel-card {
    height: 522px;
}

/* Navigation buttons */
.general-carousel-splide .carousel-btn {
    margin-top: 20px;
    color: var(--color-primary);
    border: none;
    font-size: 2rem;
    font-weight: 900;
    padding: 0.4rem 1rem;
    cursor: pointer;
    background: transparent;
    bottom: 15px !important;
    top: auto !important;
}

.general-carousel-splide .carousel-btn.left {
    left: 10px;
}

.general-carousel-splide .carousel-btn.right {
    left: 70px;
}

/* Cursor style when dragging */
.general-carousel-splide .splideCarousel {
    cursor: grab;
}

.general-carousel-splide .splideCarousel:active {
    cursor: grabbing;
}

/* Responsive */
@media (max-width: 768px) {
    .general-carousel-splide h2 {
        font-size: 30px;
    }

    .general-carousel-splide p {
        font-size: 17px;
    }

    .general-carousel-splide .carousel-card {
        min-width: 220px;
    }

    .general-carousel-splide .carousel-btn {
        font-size: 1.5rem;
        padding: 0.2rem 0.8rem;
    }
}

/*--------------------------------------------------------------
# Image Carousel Splide CSS 
--------------------------------------------------------------*/
.image-carousel-splide .splide ul li {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Make arrows vertically centered and outside of images */
.image-carousel-splide .splide__arrows {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none; /* so only arrows receive clicks */
}

/* Ensure the carousel container is a positioning context */
.image-carousel-splide .splide {
    position: relative;
}

.image-carousel-splide .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    z-index: 10; /* keep above images */
    pointer-events: auto; /* ensure clickable */
    opacity: 1 !important;
    font-size: 50px;
}

.image-carousel-splide .splide__arrow--prev {
    left: -40px; /* move left arrow outside the image */
}

.image-carousel-splide .splide__arrow--next {
    right: -40px; /* move right arrow outside the image */
}

/* On small screens, bring arrows closer in */
@media (max-width: 768px) {
    .image-carousel-splide .splide__arrow--prev {
        left: -20px;
    }
    .image-carousel-splide .splide__arrow--next {
        right: -20px;
    }
}

.image-carousel-splide .splide__arrow svg {
    width: 35px;
    height: 35px;
    fill: var(--color-primary);
}