h1 {
    color: #038CD0;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
}

.stlHomeContent {
    width: 100%;
    margin: 0px auto 0px auto;
    font-family: Verdana;
    display: table;
}

.stlHomeContent h1 {
    font-size: large;
    margin: 5px;
    padding-bottom: 5px;
    color: #666;
}

.stlHomeProductsSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: 35dvw;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 1%;
}

.stlHomeProductsText {
    width: 45dvw;
    text-align: center;
}

.stlHomeProductsText h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.stlHomeProductsText p {
    color: #01354F;
    font-size: 1.5rem;
}

.stlHomeProductsText button {
    width: 14rem;
    height: 4rem;
    font-size: 1.75rem;
}

button {
    border-radius: 0.5rem;
    border-width: 0;
    cursor: pointer;
    background: linear-gradient(90deg, #005B96 8.5434%, #0099DE 100%);
    color: #ffffff;
    text-align: center;

}

.stlHomeProductsImage {
    width: 35dvw;
}

.stlHomeProductsImage img {
    width: 100%;
}

.stlChemicalProductsBgImage {
    background-image: url('../images/shape_chemcial_bg-01.png');
    /* <<< REPLACE WITH YOUR ACTUAL CHEMICAL PRODUCTS BG IMAGE PATH */
    background-position: left center;
    /* Positions the image on the left side */
    background-repeat: no-repeat;
    background-size: 35dvw;
    /* Adjust size to fit the visual style in your screenshot */
}

.stlITProductsBgImage {
    background-image: url('../images/Shape_IT_bg-01.png');
    /* <<< REPLACE WITH YOUR ACTUAL IT PRODUCTS BG IMAGE PATH */
    background-position: right center;
    /* Positions the image on the right side */
    background-repeat: no-repeat;
    background-size: 35dvw;
    /* Adjust size to fit the visual style in your screenshot */
}








.stlWhyChooseUsCardWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stlWhyChooseUsCards {
    width: 30dvw;
    padding: 1dvw;
    border-radius: 10px;
    box-shadow: 7px 7px 5px rgba(192, 190, 190, 0.75);
    background-image: url(../images/why_choose_us_cards_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    margin-left: 2%;
    margin-right: 2%;
}

.stlWhyChooseUsCards img {
    width: 12dvw;
    display: block;
    margin: 1dvw auto 2dvw auto;
}

.stlWhyChooseUsCards h3 {
    font-size: 1.5rem;
    color: #01354F;
    font-family: 'open sans';
    font-weight: bold;
    height: 3rem;
}

.stlWhyChooseUsCards p {
    font-size: 1.1rem;
    color: #01354F;
    font-family: 'open sans';
    font-weight: normal;
    margin-bottom: 2dvw;
    /* height: 5rem; */
}

.stlWhyChooseUsCards button {
    width: 10rem;
    height: 3rem;
    font-size: 1.1rem;
    margin-bottom: 1dvw;
}

.stlClientStories {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4dvw 2% 3dvw 2%;
}


.stlClientStoryCards {
    background: #fff;
    border: 2px solid #008acf;
    border-radius: 5px;
    padding: 20px;
    text-align: left;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-logo {
    text-align: left;
    margin-bottom: 15px;
}

.client-logo img {
    max-height: 40px;
    object-fit: contain;
}

.stlClientStoryCards p {
    font-size: 18px;
    color: #333;
    margin-top: 60px;
    margin-bottom: 10px;
    text-align: justify;
}

.client-name {
    font-size: 16px;
    font-weight: 600;
    color: #008acf;
}

.stlClientStoriesWrapper {
    width: 65dvw;
    height: 30dvw;
    background-color: #008acf;
    border-radius: 10px;
    padding: 2% 0.5% 2% 1% !important;
    /*change mobile*/
    margin-right: 0 !important;
    overflow: hidden;
}

.stlClientStoriesSlider {
    width: 105%;
    height: 100%;
    margin-left: 5% !important;
}


@media (max-width: 768px) {

    /* General h1 styling -   can be overridden by more specific rules */
    h1 {
        font-size: 40px;
    }

    .stlHomeProductsSection {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 8% 5%;
        background-size: cover;
    }

    .stlHomeProductsSection .stlHomeProductsText,
    .stlHomeProductsSection .stlHomeProductsImage {
        display: contents;
    }

    .stlHomeProductsSection h1 {
        /* This targets the h1 that was inside .stlHomeProductsText */
        font-size: 30px;
        /* Adjusted for emphasis as title */
        order: 1;
        /* Title first */
        width: 90vw;
        /* Apply width here */
        max-width: 100%;
        margin-bottom: 15px;
        /* Space after title */
    }

    .stlHomeProductsSection img {
        /* This targets the img that was inside .stlHomeProductsImage */
        order: 2;
        /* Image second */
        width: 90vw;
        /* Apply width here */
        max-width: 100%;
        /* Ensure it doesn't overflow */
        height: auto;
        /* Maintain aspect ratio */
        display: block;
        /* Good practice for images */
        margin-bottom: 15px;
        /* Space after image */
    }

    .stlHomeProductsSection p {
        /* This targets the p that was inside .stlHomeProductsText */
        font-size: 1.1rem;
        /* Your original font size */
        order: 3;
        /* Paragraph third */
        width: 90vw;
        /* Apply width here */
        max-width: 100%;
        margin-bottom: 20px;
        /* Space after paragraph, before button */
        line-height: 1.5;
        /* Improve readability */
    }

    /* Button (BUTTON from within the original .stlHomeProductsText) */
    .stlHomeProductsSection button {
        /* This targets the button that was inside .stlHomeProductsText */
        order: 4;
        width: 12rem;
        height: 3rem;
        /* Your original height */
        font-size: 1.25rem;
        /* Your original font size */
        /* 'order: 4;' from your original specific .stlHomeProductsText button rule now applies here */
    }
}

@media (max-width: 768px) {
    .stlWhyChooseUsCardWrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100dvw 27dvw;
        padding-bottom: 1.1dvw;

    }

    .stlWhyChooseUsCardWrapper {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 60px;
        padding: 40px;

    }

    .stlWhyChooseUsCards {
        /*card aligment with slim body done*/
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 95%;
        max-width: 90%;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 4dvw;
    }

    .stlWhyChooseUsCards p {
        margin-bottom: 6dvw;
        /* height: 5rem; */
    }

    .stlWhyChooseUsCards img {
        width: 40vw;
    }

    /* this wraps the slider and dots */
    .slider-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }


    .slide {
        /* actual slide wrapper */
        width: 100%;
        height: auto;
        text-align: center;
        margin-bottom: 1rem;
        display: none;
        /* Add margin-bottom if for spacing */
    }

    /* Dots container */
    .dots {
        text-align: center;
        margin-top: 10px;
        position: relative;
    }

    /* Individual dots */
    .dots span {
        display: inline-block;
        height: 10px;
        width: 10px;
        margin: 0 5px;
        background-color: #cccccc;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    /* Active dot */
    .dots span.active {
        background-color: #e4e9ee;
    }

    @media (max-width: 768px) {

        /*done*/
        #divClientStories {
            padding: 0px 20px;
        }

        .stlClientStories {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 4dvw 2% 3dvw 2%;
            flex-direction: column;
        }

        .stlClientStoriesWrapper {
            width: 95dvw;
            height: 82dvw;
            background-color: #008acf;
            border-radius: 10px;
            padding: 10% 3% 10% 1% !important;
            margin-right: 5 !important;
            overflow: hidden;

        }

        .stlClientStoriesSlider {
            width: 105%;
            height: 100%;
            margin-left: 5% !important;

        }

        .stlClientStoriesSlider .swiper-slide {
            background-color: #fff;
            border-radius: 10px;
            width: 90% !important;
            /* full width slide */
            height: 300px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }
}




/* Tablets */
@media (max-width: 992px) {
    .stlClientStories h1 {
        font-size: 28px;
    }

    .stlClientStoryCards {
        padding: 18px;
    }

    .stlClientStoryCards p {
        font-size: 13px;
        text-align: justify;
    }
}

/* Mobiles */
@media (max-width: 600px) {
    .stlClientStories {
        padding: 40px 15px;
    }

    .stlClientStories h1 {
        font-size: 24px;
    }

    .stlClientStoryCards {
        padding: 15px;
        border-width: 1.5px;
    }

    .client-logo img {
        max-height: 30px;
    }

    .stlClientStoryCards p {
        font-size: 16px;
        text-align: justify;
    }

    .client-name {
        font-size: 14px;
    }
}