/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

section {
    /* padding: 10px; */
}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- section-home -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#section-home {
    /* background-image: url("../images/Gradient_000.svg");
    background-repeat: no-repeat;
    background-clip: border-box;
    background-size: cover; */
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- section-intro -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#section-intro {
    width: 100%;
    height: 100dvh;
    padding: 10px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: whitesmoke;
    background: hsla(0, 0%, 0%, 0.5) url("../images/compressed/image_(5).jpg") no-repeat fixed center;
    background-size: cover;
    -webkit-background-size: cover; /* Safari */
    background-blend-mode: normal;
}

@media screen and (max-width: 500px) {
    #section-intro h1 {
        font-size: 1.2rem;
    }

    #section-intro h4 {
        font-size: 1.2rem;
    }
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- about_benefits -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

.about_benefits {
    background: hsla(0, 0%, 0%, 0.5) url("../images/compressed/image_(2).jpg") no-repeat fixed center;
    background-size: cover;
    -webkit-background-size: cover; /* Safari */
    background-blend-mode: normal;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- section-about -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#section-about {
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#section-about .about {
    position: relative;
    background: whitesmoke;
    text-align: justify;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
}

#section-about .about .section_header {
    font-size: 3rem;
    padding: 20px;
    text-align: center;
}

#section-about .headings {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

#section-about .headings h4 {
    position: relative;
}

#section-about .headings .heading {
    padding: 5px;
    padding-left: 45px;
}

#section-about .headings .heading h4::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: -35px;
}


#section-about .headings .heading:nth-child(1) {
    background: hsl(120, 60%, 95%);
    border-top: 2px solid hsl(120, 60%, 50%);
}

#section-about .headings .heading:nth-child(1) h4::before {
    /* FontAwesome icon for users */
    content: "\f140";
    color: hsl(120, 60%, 50%);
}


#section-about .headings .heading:nth-child(2) {
    background: hsl(209, 92%, 95%);
    border-top: 2px solid hsl(209, 92%, 50%);
}

#section-about .headings .heading:nth-child(2) h4::before {
    /* FontAwesome icon for suitcase */
    content: "\f3ed";
    color: hsl(209, 92%, 50%);
}


#section-about .headings .heading:nth-child(3) {
    background: hsl(27, 98%, 95%);
    border-top: 2px solid hsl(27, 98%, 54%);
}

#section-about .headings .heading:nth-child(3) h4::before {
    /* FontAwesome icon for star */
    content: "\f2b5";
    color: hsl(27, 98%, 54%);
}

#section-about .headings .heading:nth-child(4) {
    background: hsl(45, 100%, 95%);
    border-top: 2px solid hsl(45, 100%, 51%);
}

#section-about .headings .heading:nth-child(4) h4::before {
    /* FontAwesome icon for star */
    content: "\f0eb";
    color: hsl(45, 100%, 51%);
}

#section-about .headings .heading:nth-child(5) {
    background: hsl(276, 70%, 95%);
    border-top: 2px solid hsl(276, 70%, 54%);
}

#section-about .headings .heading:nth-child(5) h4::before {
    /* FontAwesome icon for star */
    content: "\f118";
    color: hsl(276, 70%, 54%);
}

@media (max-width: 900px) {
    #section-about {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0;
    }

    #section-about .headings .heading {
        padding: 10px;
    }

    #section-about .headings .heading h4::before {
        position: static;
    }


}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- section-benefits -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#section-benefits {
    width: 100%;
    height: 50dvh;
    padding: 10px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: whitesmoke;
    /* background: hsla(0, 0%, 0%, 0.5) url("https://static.vecteezy.com/system/resources/previews/017/775/421/non_2x/irrigation-water-flow-from-pipe-to-canal-for-agriculture-fields-free-photo.jpg") no-repeat fixed center;
    background-size: cover;
    background-blend-mode: color; */
}

#section-benefits h2 {
    /* font-size: 1.7rem; */
}


.scroll-animation {
    font-size: 2rem;
    width: 100%;
}

.scroll-container {
    display: inline-block;
    /* Make sure it displays inline */
    vertical-align: middle;
    /* Align it with the text */
    height: 50px;
    /* Adjust based on your text height */
    overflow: hidden;
    position: relative;
    /* border: 1px solid #ccc; */
    width: 100%;
    /* Adjust based on your requirement */
}

.scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
}

.scroll-item {
    width: inherit;
    height: 50px;
    /* Adjust to match the container height */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.7rem;
    /* Adjust based on your text size */
}

@media (max-width: 900px) {
    .scroll-item {
        font-size: 1rem;
        /* Adjust based on your text size */
    }
}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- section-products -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#section-products {
    text-align: center;
    padding: 50px 0;
    background: whitesmoke;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */

}