﻿@media (min-width: 769px) {
    /* Tiny-Slider styles commented out */
    /*
    .tns-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    */

    .slide-content {
        display: flex;
        align-items: flex-start;
        position: relative;
    }

    .slide-image {
        width: 650px;
        max-height: 431px;
        margin-right: 20px;
    }

    .slide-text {
        max-width: 500px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 30px; /* Add padding to make space for read-more */
    }

        .slide-text h2 {
            margin: 0;
            font-size: 3rem;
            line-height: 1.2;
            font-family: 'Montserrat', sans-serif;
        }

        .slide-text h3 {
            margin: 0;
            margin-top: 30px;
            font-size: 1.25rem;
            color: #888;
            font-family: 'Open Sans', sans-serif;
        }

        .slide-text h3, .read-more {
            margin: 0;
            margin-top: 30px;
        }

    .read-more {
        position: absolute;
        bottom: 0;
        left: 0;
        color: blue;
        text-decoration: underline;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
    }
}

/* Ensure proper stacking on mobile devices */
@media (max-width: 768px) {
    /* Tiny-Slider styles commented out */
    /*
    .tns-wrapper {
        max-height:350px;
    }

    .tns-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        margin-right: 0;
        position: relative;
    }
    */

    .slide-image {
        width: 100%; /* Make the image full width */
        height: auto;
        max-height: 40vh; /* Limit height to 40% of the viewport height */
        object-fit: cover; /* Cover the available space without distortion */
        margin-bottom: 15px; /* Add space between the image and the text */
    }

    .slide-text {
        width: 100%; /* Text takes most of the width */
        text-align: center; /* Center align the text */
        padding: 0 10px; /* Add padding for better spacing */
        margin-top: 20px; /* Add margin to separate from the image */
    }

        .slide-text h2 {
            font-size: 1rem; /* Reduce font size */
            line-height: 1.2;
            margin: 10px 0; /* Add some margin around the title */
        }

        .slide-text h3 {
            font-size: 0.5rem; /* Reduce subtitle font size */
            margin-top: 10px;
        }

    .read-more {
        font-size: 1rem;
        margin-top: 10px; /* Space the read-more link from the text */
    }
}

/* Glider styles */
.glider-contain {
    width: 100%;
    margin: 0 auto;
}

.glider {
    width: 100%;
}

    .glider .glider-track {
        display: flex; /* Ensure the track arranges the slides horizontally */
        width: auto; /* Let the track width grow based on the number of slides */
    }

    .glider .slide {
        min-width: 250px; /* Set a reasonable minimum width for each slide */
        padding: 10px;
        box-sizing: border-box;
    }

        .glider .slide img {
            max-width: 100%;
        }



.slide-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

/* Style the loader image */
.slide-loader {
    max-width: 150px; /* Limit the loader's width */
    width: 100%; /* Make it responsive */
    height: auto; /* Maintain aspect ratio */
}