/* surodi watershed development */

/*====================================*/
/*   SURODI WATERSHED DEVELOPMENT CSS */
/*====================================*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*====================================*/
/*          MAIN SECTION              */
/*====================================*/

.surodi-wsd{
    width: 100%;
    min-height: 100vh;

    padding: 70px 5%;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 45%,
            #f5fff8 100%
        );

    position: relative;

    overflow: hidden;
}

/* Soft Background Glow */

.surodi-wsd::before{
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    top: -120px;
    left: -120px;

    border-radius: 50%;

    background: rgba(59,130,246,0.07);

    filter: blur(90px);
}

.surodi-wsd::after{
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -120px;
    right: -120px;

    border-radius: 50%;

    background: rgba(34,197,94,0.08);

    filter: blur(90px);
}

/*====================================*/
/*             HEADING                */
/*====================================*/

.surodi-wsd h2{
    position: relative;
    z-index: 2;

    text-align: center;

    font-size: 2.7rem;
    font-weight: 800;

    color: #0f172a;

    margin-bottom: 22px;

    line-height: 1.3;

    letter-spacing: 0.5px;

    text-transform: capitalize;
}

/* Gradient Highlight */

.surodi-wsd h2 span{
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #06b6d4,
            #16a34a
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Decorative Underline */

.surodi-wsd h2::after{
    content: "";

    display: block;

    width: 110px;
    height: 5px;

    margin: 18px auto 0;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #16a34a
        );

    box-shadow:
        0 4px 14px rgba(37,99,235,0.18);
}

/* Soft Glow Behind Title */

.surodi-wsd h2::before{
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 240px;
    height: 70px;

    border-radius: 50%;

    background:
        rgba(37,99,235,0.08);

    filter: blur(35px);

    z-index: -1;
}

/*====================================*/
/*            PARAGRAPHS              */
/*====================================*/

.surodi-wsd p{
    position: relative;
    z-index: 2;

    max-width: 1050px;

    margin:
        0 auto 24px auto;

    color: #475569;

    font-size: 1rem;

    line-height: 2;

    text-align: justify;

    background: rgba(255,255,255,0.72);

    padding: 24px 28px;

    border-radius: 22px;

    border:
        1px solid rgba(226,232,240,0.9);

    box-shadow:
        0 10px 25px rgba(15,23,42,0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Paragraph Hover */

.surodi-wsd p:hover{
    transform: translateY(-4px);

    box-shadow:
        0 14px 32px rgba(37,99,235,0.08);
}

/* Decorative Left Border */

.surodi-wsd p::before{
    content: "";

    position: absolute;

    left: 0;
    top: 15%;

    width: 6px;
    height: 70%;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #2563eb,
            #16a34a
        );
}

/*====================================*/
/*             IMAGES                 */
/*====================================*/

.surodi-wsd img{
    width: 100%;

    max-width: 1000px;

    display: block;

    margin:
        35px auto;

    border-radius: 28px;

    object-fit: cover;

    border:
        1px solid rgba(226,232,240,0.9);

    box-shadow:
        0 15px 40px rgba(15,23,42,0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

/* Image Hover */

.surodi-wsd img:hover{
    transform:
        translateY(-6px)
        scale(1.01);

    box-shadow:
        0 20px 50px rgba(37,99,235,0.14);
}

/*====================================*/
/*        IMAGE GRID SUPPORT          */
/*====================================*/

/* If multiple images are added */

.surodi-wsd .img-grid{
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 28px;

    margin-top: 40px;
}

.surodi-wsd .img-grid img{
    margin: 0;

    height: 260px;
}

/*====================================*/
/*          CUSTOM SCROLLBAR          */
/*====================================*/

.surodi-wsd::-webkit-scrollbar{
    width: 10px;
}

.surodi-wsd::-webkit-scrollbar-track{
    background: #e2e8f0;
}

.surodi-wsd::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #22c55e
        );

    border-radius: 20px;
}

/*====================================*/
/*         RESPONSIVE DESIGN          */
/*====================================*/

/* Tablet */

@media (max-width: 992px){

    .surodi-wsd{
        padding: 60px 4%;
    }

    .surodi-wsd h2{
        font-size: 2.1rem;
    }

    .surodi-wsd p{
        padding: 22px;
    }
}

/* Mobile */

@media (max-width: 768px){

    .surodi-wsd{
        padding: 45px 20px;
    }

    .surodi-wsd h2{
        font-size: 1.8rem;
    }

    .surodi-wsd h2::after{
        width: 80px;
    }

    .surodi-wsd p{
        font-size: 0.93rem;

        line-height: 1.9;

        padding: 18px 18px 18px 22px;

        border-radius: 18px;
    }

    .surodi-wsd img{
        border-radius: 22px;
    }

    .surodi-wsd .img-grid{
        gap: 20px;
    }

    .surodi-wsd .img-grid img{
        height: 220px;
    }
}