@media screen and (min-width: 300px) {
    .page-name {
        width: 100%;
        height: 350px;
        /* background: url(/contact/image/IMG_8529.jpg); */
        background-size: cover;

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 30px;
            color: var(--thm-white);
            font-weight: 800;
            align-items: center;
            padding-left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
        }
    }


    .first-section {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;


        .building,
        .deliver,
        .manage {
            height: 450px;
            background-color: var(--thm-white);
            border: 1px solid var(--thm-gray);
            padding: 40px;
            transition: border-color 0.7s ease, color 0.7s ease;


            .top {
                width: 100%;
                height: 50%;
                font-size: 60px;
                color: var(--bs-gray);
            }



            .down {
                width: 100%;
                height: 50%;

                h2 {
                    color: var(--bs-dark);
                }

                p {
                    color: var(--bs-gray-dark);
                    font-weight: 500;
                    margin-top: 25px;
                }
            }
        }

        .building:hover,
        .deliver:hover,
        .manage:hover {
            .top {
                color: var(--thm-primary);
            }

            border-bottom: 8px solid var(--thm-base);
            box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1),
            5px 0px 10px rgba(0, 0, 0, 0.1),
            0px 5px 10px rgba(0, 0, 0, 0.1),
            -5px 0px 10px rgba(0, 0, 0, 0.1);
        }
    }


    /* PERSONAL AND COOPERATE CONTAINER STARTS HERE */

    .personal-cooperate {
        width: 100%;
        padding: 10px 0px 10px 0px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* background-color: var(--bs-gray); */

        .personal {
            height: fit-content;
            background-color: #0dcaf0;
            /* background: url(/home/images/personal.JPG); */

            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(24, 42, 120, 0.441);
                /* opacity: 0.5; */
                color: var(--bs-white);

                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 10px 120px 15px;

                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        line-height: 50px;
                    }

                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }

                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }

                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }
                }
            }
        }

        .cooperate {
            height: fit-content;
            background-color: var(--bs-dark);
            /* background: url(/home/images/cooperate.JPG); */

            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.839);
                /* opacity: 0.5; */

                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 10px 120px 15px;

                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        line-height: 50px;
                    }

                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }

                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }

                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }

                }
            }
        }
    }

    /* ENDS HERE */


    .testmonials {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-gray-bg);
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;


        .top {
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;

            h2 {
                font-size: 45px;
                color: var(--bs-gray-dark);
            }
        }

        /* this down is for the container but not inside the container */

        .down {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;


            .test {
                height: 450px;
                background-color: var(--thm-white);
                border-radius: 10px;
                padding: 20px;
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.05),
                    5px 0px 10px rgba(0, 0, 0, 0.05),
                    0px 5px 10px rgba(0, 0, 0, 0.05),
                    -5px 0px 10px rgba(0, 0, 0, 0.05);
                transition: box-shadow 0.3s ease-in-out;


                .top {
                    width: 100%;
                    height: 50%;
                    display: block;
                    text-align: center;

                    .font {
                        width: 100%;
                        height: 60%;
                        font-size: 50px;
                        color: #6c757d;
                    }

                    .note {
                        width: 100%;
                        height: 40%;
                        color: var(--bs-gray-dark);
                        font-weight: 500;
                        margin-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }
                }

                .down {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;


                    .pic {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .pro-pic {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background-color: var(--thm-gray);
                            margin-bottom: 20px;
                        }
                    }

                    .details {
                        width: 100%;
                        height: 30%;
                        line-height: 5px;

                        h2 {
                            font-size: 30px;
                            color: var(--bs-dark);
                        }

                        p {
                            font-size: 18px;
                            color: var(--bs-gray-dark);
                            font-weight: 500;
                            margin-top: 20px;
                        }
                    }
                }
            }

            .test:hover {
                .font {
                    color: var(--thm-primary);
                }

                box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2),
                5px 0px 10px rgba(0, 0, 0, 0.2),
                0px 5px 10px rgba(0, 0, 0, 0.2),
                -5px 0px 10px rgba(0, 0, 0, 0.2);
            }
        }
    }



    .third-section {
        width: 100%;
        height: fit-content;
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;
        background: linear-gradient(120deg, #ff7a00 25%, #ff7b00ea 50%, #ee7708ea 75%, #d56d0bea 100%);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;


        .head {
            width: 100%;
            height: fit-content;
            color: var(--thm-white);
            text-align: center;


            h2 {
                font-size: 40px;
                font-weight: 800;
                margin-top: 20px;
                line-height: 45px;
            }

            p {
                font-weight: 600;
            }
        }

        .body-sec {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            padding-top: 50px;


            .active,
            .satisfied,
            .awards {
                width: 100%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */


                .left {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 50px;
                    padding-left: 30px;
                }

                .right {
                    width: 70%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 10px;


                    h2 {
                        font-size: 60px;
                        font-weight: 400;
                        line-height: 80px;
                    }

                    p {
                        font-size: 15px;
                        font-weight: 500;
                    }
                }
            }

            .awards {
                width: 100%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */

                .left {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 70px;
                    padding-left: 30px;
                }
            }
        }
    }
    

}

@media screen and (min-width: 350px) {
    .page-name {
        width: 100%;
        height: 350px;
        /* background: url(/contact/image/IMG_8529.jpg); */
        background-size: cover;

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 30px;
            color: var(--thm-white);
            font-weight: 800;
            align-items: center;
            /* padding-left: 10px; */
            background-color: rgba(0, 0, 0, 0.7);
        }
    }

    .first-section {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;


        .building,
        .deliver,
        .manage {
            height: 450px;
            background-color: var(--thm-white);
            border: 1px solid var(--thm-gray);
            padding: 40px;
            transition: border-color 0.7s ease, color 0.7s ease;


            .top {
                width: 100%;
                height: 50%;
                font-size: 60px;
                color: var(--bs-gray);
            }



            .down {
                width: 100%;
                height: 50%;

                h2 {
                    color: var(--bs-dark);
                }

                p {
                    color: var(--bs-gray-dark);
                    font-weight: 500;
                    margin-top: 25px;
                }
            }
        }

        .building:hover,
        .deliver:hover,
        .manage:hover {
            .top {
                color: var(--thm-primary);
            }

            border-bottom: 8px solid var(--thm-base);
            box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1),
            5px 0px 10px rgba(0, 0, 0, 0.1),
            0px 5px 10px rgba(0, 0, 0, 0.1),
            -5px 0px 10px rgba(0, 0, 0, 0.1);
        }
    }


    /* PERSONAL AND COOPERATE CONTAINER STARTS HERE */

    .personal-cooperate {
        width: 100%;
        padding: 10px 0px 10px 0px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* background-color: var(--bs-gray); */

        .personal {
            height: fit-content;
            background-color: #0dcaf0;
            /* background: url(/home/images/personal.JPG); */

            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(24, 42, 120, 0.441);
                /* opacity: 0.5; */
                color: var(--bs-white);

                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 10px 120px 15px;

                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        line-height: 50px;
                    }

                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }

                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }

                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }
                }
            }
        }

        .cooperate {
            height: fit-content;
            background-color: var(--bs-dark);
            /* background: url(/home/images/cooperate.JPG); */

            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.839);
                /* opacity: 0.5; */

                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 10px 120px 15px;

                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        line-height: 50px;
                    }

                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }

                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }

                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }

                }
            }
        }
    }

    /* ENDS HERE */


    .testmonials {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-gray-bg);
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;


        .top {
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;

            h2 {
                font-size: 45px;
                color: var(--bs-gray-dark);
            }
        }

        /* this down is for the container but not inside the container */

        .down {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;


            .test {
                height: 450px;
                background-color: var(--thm-white);
                border-radius: 10px;
                padding: 40px;
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.05),
                    5px 0px 10px rgba(0, 0, 0, 0.05),
                    0px 5px 10px rgba(0, 0, 0, 0.05),
                    -5px 0px 10px rgba(0, 0, 0, 0.05);
                transition: box-shadow 0.3s ease-in-out;


                .top {
                    width: 100%;
                    height: 50%;
                    display: block;
                    text-align: center;

                    .font {
                        width: 100%;
                        height: 60%;
                        font-size: 50px;
                        color: #6c757d;
                    }

                    .note {
                        width: 100%;
                        height: 40%;
                        color: var(--bs-gray-dark);
                        font-weight: 500;
                        margin-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }
                }

                .down {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;


                    .pic {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .pro-pic {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background-color: var(--thm-gray);
                            margin-bottom: 20px;
                        }
                    }

                    .details {
                        width: 100%;
                        height: 30%;
                        line-height: 5px;

                        h2 {
                            font-size: 30px;
                            color: var(--bs-dark);
                        }

                        p {
                            font-size: 18px;
                            color: var(--bs-gray-dark);
                            font-weight: 500;
                            margin-top: 20px;
                        }
                    }
                }
            }

            .test:hover {
                .font {
                    color: var(--thm-primary);
                }

                box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2),
                5px 0px 10px rgba(0, 0, 0, 0.2),
                0px 5px 10px rgba(0, 0, 0, 0.2),
                -5px 0px 10px rgba(0, 0, 0, 0.2);
            }
        }
    }



    .third-section {
        width: 100%;
        height: fit-content;
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;
        background: linear-gradient(120deg, #ff7a00 25%, #ff7b00ea 50%, #ee7708ea 75%, #d56d0bea 100%);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;


        .head {
            width: 100%;
            height: fit-content;
            color: var(--thm-white);
            text-align: center;


            h2 {
                font-size: 40px;
                font-weight: 800;
                margin-top: 20px;
                line-height: 45px;
            }

            p {
                font-weight: 600;
            }
        }

        .body-sec {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            padding-top: 50px;


            .active,
            .satisfied,
            .awards {
                width: 100%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */


                .left {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 50px;
                    padding-left: 30px;
                }

                .right {
                    width: 70%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 10px;


                    h2 {
                        font-size: 60px;
                        font-weight: 400;
                        line-height: 80px;
                    }

                    p {
                        font-size: 15px;
                        font-weight: 500;
                    }
                }
            }

            .awards {
                width: 100%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */

                .left {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 70px;
                    padding-left: 30px;
                }
            }
        }
    }
}

@media screen and (min-width: 750px) {
    .page-name {
        width: 100%;
        height: 350px;
        /* background: url(/contact/image/IMG_8529.jpg); */
        background-size: cover;

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 35px;
            color: var(--thm-white);
            font-weight: 800;
            align-items: center;
            padding-left: 30px;
            background-color: rgba(0, 0, 0, 0.7);
        }
    }

    .first-section {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        padding-top: 100px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 100px;


        .building,
        .deliver,
        .manage {
            height: 450px;
            background-color: var(--thm-white);
            border: 1px solid var(--thm-gray);
            padding: 40px;
            transition: border-color 0.7s ease, color 0.7s ease;


            .top {
                width: 100%;
                height: 50%;
                font-size: 60px;
                color: var(--bs-gray);
            }



            .down {
                width: 100%;
                height: 50%;

                h2 {
                    color: var(--bs-dark);
                }

                p {
                    color: var(--bs-gray-dark);
                    font-weight: 500;
                    margin-top: 25px;
                }
            }
        }

        .building:hover,
        .deliver:hover,
        .manage:hover {
            .top {
                color: var(--thm-primary);
            }

            border-bottom: 8px solid var(--thm-base);
            box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1),
            5px 0px 10px rgba(0, 0, 0, 0.1),
            0px 5px 10px rgba(0, 0, 0, 0.1),
            -5px 0px 10px rgba(0, 0, 0, 0.1);
        }
    }


    /* PERSONAL AND COOPERATE CONTAINER STARTS HERE */

    .personal-cooperate {
        width: 100%;
        padding: 10px 0px 10px 0px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* background-color: var(--bs-gray); */

        .personal {
            height: fit-content;
            background-color: #0dcaf0;
            /* background: url(/home/images/personal.JPG); */

            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(24, 42, 120, 0.441);
                /* opacity: 0.5; */
                color: var(--bs-white);

                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 45px 120px 45px;

                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        line-height: 50px;
                    }

                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }

                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }

                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }
                }
            }
        }

        .cooperate {
            height: fit-content;
            background-color: var(--bs-dark);
            /* background: url(/home/images/cooperate.JPG); */

            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.839);
                /* opacity: 0.5; */

                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 45px 120px 45px;

                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        line-height: 50px;
                    }

                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }

                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }

                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }

                }
            }
        }
    }

    /* ENDS HERE */

    .testmonials {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-gray-bg);
        padding-top: 100px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 100px;


        .top {
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;

            h2 {
                font-size: 45px;
                color: var(--bs-gray-dark);
            }
        }

        /* this down is for the container but not inside the container */

        .down {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;


            .test {
                height: 450px;
                background-color: var(--thm-white);
                border-radius: 10px;
                padding: 30px;
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.05),
                    5px 0px 10px rgba(0, 0, 0, 0.05),
                    0px 5px 10px rgba(0, 0, 0, 0.05),
                    -5px 0px 10px rgba(0, 0, 0, 0.05);
                transition: box-shadow 0.3s ease-in-out;


                .top {
                    width: 100%;
                    height: 50%;
                    display: block;
                    text-align: center;

                    .font {
                        width: 100%;
                        height: 60%;
                        font-size: 50px;
                        color: #6c757d;
                    }

                    .note {
                        width: 100%;
                        height: 40%;
                        color: var(--bs-gray-dark);
                        font-weight: 500;
                        margin-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }
                }

                .down {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;


                    .pic {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .pro-pic {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background-color: var(--thm-gray);
                            margin-bottom: 20px;
                        }
                    }

                    .details {
                        width: 100%;
                        height: 30%;
                        line-height: 5px;

                        h2 {
                            font-size: 30px;
                            color: var(--bs-dark);
                        }

                        p {
                            font-size: 18px;
                            color: var(--bs-gray-dark);
                            font-weight: 500;
                            margin-top: 20px;
                        }
                    }
                }
            }

            .test:hover {
                .font {
                    color: var(--thm-primary);
                }

                box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2),
                5px 0px 10px rgba(0, 0, 0, 0.2),
                0px 5px 10px rgba(0, 0, 0, 0.2),
                -5px 0px 10px rgba(0, 0, 0, 0.2);
            }
        }
    }



    .third-section {
        width: 100%;
        height: fit-content;
        padding-top: 100px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;
        background: linear-gradient(120deg, #ff7a00 25%, #ff7b00ea 50%, #ee7708ea 75%, #d56d0bea 100%);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;


        .head {
            width: 100%;
            height: fit-content;
            color: var(--thm-white);
            text-align: center;


            h2 {
                font-size: 40px;
                font-weight: 800;
                margin-top: 20px;
                line-height: 45px;
            }

            p {
                font-weight: 600;
            }
        }

        .body-sec {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            padding-top: 50px;


            .active,
            .satisfied,
            .awards {
                width: 60%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: auto;


                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 60px;
                    padding-left: 50px;
                }

                .right {
                    width: 60%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 0px;


                    h2 {
                        font-size: 70px;
                        font-weight: 400;
                        line-height: 80px;
                    }

                    p {
                        font-size: 15px;
                        font-weight: 500;
                    }
                }
            }

            .awards {
                width: 60%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: auto;

                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 70px;
                    padding-left: 30px;
                }
            }
        }
    }
}

@media screen and (min-width: 800px) {
    .page-name {
        width: 100%;
        height: 350px;
        /* background: url(/contact/image/IMG_8529.jpg); */
        background-size: cover;

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 35px;
            color: var(--thm-white);
            font-weight: 800;
            align-items: center;
            padding-left: 45px;
            background-color: rgba(0, 0, 0, 0.7);
        }
    }

    .first-section {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        padding-top: 100px;
        padding-left: 45px;
        padding-right: 45px;
        padding-bottom: 100px;


        .building,
        .deliver,
        .manage {
            height: 450px;
            background-color: var(--thm-white);
            border: 1px solid var(--thm-gray);
            padding: 40px;
            transition: border-color 0.7s ease, color 0.7s ease;


            .top {
                width: 100%;
                height: 50%;
                font-size: 60px;
                color: var(--bs-gray);
            }



            .down {
                width: 100%;
                height: 50%;

                h2 {
                    color: var(--bs-dark);
                }

                p {
                    color: var(--bs-gray-dark);
                    font-weight: 500;
                    margin-top: 25px;
                }
            }
        }

        .building:hover,
        .deliver:hover,
        .manage:hover {
            .top {
                color: var(--thm-primary);
            }

            border-bottom: 8px solid var(--thm-base);
            box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1),
            5px 0px 10px rgba(0, 0, 0, 0.1),
            0px 5px 10px rgba(0, 0, 0, 0.1),
            -5px 0px 10px rgba(0, 0, 0, 0.1);
        }
    }


    /* PERSONAL AND COOPERATE CONTAINER STARTS HERE */

.personal-cooperate {
    width: 100%;
    padding: 10px 0px 10px 0px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* background-color: var(--bs-gray); */

    .personal {
        height: fit-content;
        background-color: #0dcaf0;
        /* background: url(/home/images/personal.JPG); */

        .content {
            width: 100%;
            height: 100%;
            background-color: rgba(24, 42, 120, 0.441);
            /* opacity: 0.5; */
            color: var(--bs-white);

            .details {
                width: 100%;
                color: white;
                justify-content: center;
                padding: 120px 55px 140px 55px;

                h2 {
                    font-size: 40px;
                    font-weight: 700;
                    margin-bottom: 30px;
                    line-height: 50px;
                }

                p {
                    font-size: 20px;
                    margin-bottom: 55px;
                }

                a {
                    text-decoration: none;
                    color: var(--bs-white);
                    padding: 20px;
                    font-size: 18px;
                    border: 2px solid var(--bs-white);
                }

                i {
                    color: white;
                    background-color: var(--bs-gray);
                    padding: 5px;
                    border-radius: 50%;
                }
            }
        }
    }

    .cooperate {
        height: fit-content;
        background-color: var(--bs-dark);
        /* background: url(/home/images/cooperate.JPG); */

        .content {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.839);
            /* opacity: 0.5; */

            .details {
                width: 100%;
                color: white;
                justify-content: center;
                padding: 120px 55px 140px 55px;

                h2 {
                    font-size: 40px;
                    font-weight: 700;
                    margin-bottom: 30px;
                    line-height: 50px;
                }

                p {
                    font-size: 20px;
                    margin-bottom: 55px;
                }

                a {
                    text-decoration: none;
                    color: var(--bs-white);
                    padding: 20px;
                    font-size: 18px;
                    border: 2px solid var(--bs-white);
                }

                i {
                    color: white;
                    background-color: var(--bs-gray);
                    padding: 5px;
                    border-radius: 50%;
                }

            }
        }
    }
}

/* ENDS HERE */

    .testmonials {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-gray-bg);
        padding-top: 100px;
        padding-left: 45px;
        padding-right: 45px;
        padding-bottom: 100px;


        .top {
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;

            h2 {
                font-size: 45px;
                color: var(--bs-gray-dark);
            }
        }

        /* this down is for the container but not inside the container */

        .down {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;


            .test {
                height: 450px;
                background-color: var(--thm-white);
                border-radius: 10px;
                padding: 30px;
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.05),
                    5px 0px 10px rgba(0, 0, 0, 0.05),
                    0px 5px 10px rgba(0, 0, 0, 0.05),
                    -5px 0px 10px rgba(0, 0, 0, 0.05);
                transition: box-shadow 0.3s ease-in-out;


                .top {
                    width: 100%;
                    height: 50%;
                    display: block;
                    text-align: center;

                    .font {
                        width: 100%;
                        height: 60%;
                        font-size: 50px;
                        color: #6c757d;
                    }

                    .note {
                        width: 100%;
                        height: 40%;
                        color: var(--bs-gray-dark);
                        font-weight: 500;
                        margin-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }
                }

                .down {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;


                    .pic {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .pro-pic {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background-color: var(--thm-gray);
                            margin-bottom: 20px;
                        }
                    }

                    .details {
                        width: 100%;
                        height: 30%;
                        line-height: 5px;

                        h2 {
                            font-size: 30px;
                            color: var(--bs-dark);
                        }

                        p {
                            font-size: 18px;
                            color: var(--bs-gray-dark);
                            font-weight: 500;
                            margin-top: 20px;
                        }
                    }
                }
            }

            .test:hover {
                .font {
                    color: var(--thm-primary);
                }

                box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2),
                5px 0px 10px rgba(0, 0, 0, 0.2),
                0px 5px 10px rgba(0, 0, 0, 0.2),
                -5px 0px 10px rgba(0, 0, 0, 0.2);
            }
        }
    }



    .third-section {
        width: 100%;
        height: fit-content;
        padding-top: 100px;
        padding-left: 45px;
        padding-right: 45px;
        padding-bottom: 100px;
        background: linear-gradient(120deg, #ff7a00 25%, #ff7b00ea 50%, #ee7708ea 75%, #d56d0bea 100%);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;


        .head {
            width: 100%;
            height: fit-content;
            color: var(--thm-white);
            text-align: center;


            h2 {
                font-size: 50px;
                font-weight: 800;
                margin-top: 20px;
                line-height: 45px;
            }

            p {
                font-weight: 600;
            }
        }

        .body-sec {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            padding-top: 50px;


            .active,
            .satisfied,
            .awards {
                width: 60%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: auto;


                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 65px;
                    padding-left: 50px;
                }

                .right {
                    width: 60%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 0px;


                    h2 {
                        font-size: 75px;
                        font-weight: 400;
                        line-height: 80px;
                    }

                    p {
                        font-size: 15px;
                        font-weight: 500;
                    }
                }
            }

            .awards {
                width: 60%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: auto;

                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 75px;
                    padding-left: 30px;
                }
            }
        }
    }

}

@media screen and (min-width: 1100px) {
    .page-name {
        width: 100%;
        height: 350px;
        /* background: url(/contact/image/IMG_8529.jpg); */
        background-size: cover;

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 35px;
            color: var(--thm-white);
            font-weight: 800;
            align-items: center;
            padding-left: 70px;
            background-color: rgba(0, 0, 0, 0.7);
        }
    }

    .first-section {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding-top: 100px;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 100px;


        .building,
        .deliver,
        .manage {
            height: 450px;
            background-color: var(--thm-white);
            border: 1px solid var(--thm-gray);
            padding: 40px;
            transition: border-color 0.7s ease, color 0.7s ease;


            .top {
                width: 100%;
                height: 50%;
                font-size: 60px;
                color: var(--bs-gray);
            }



            .down {
                width: 100%;
                height: 50%;

                h2 {
                    color: var(--bs-dark);
                }

                p {
                    color: var(--bs-gray-dark);
                    font-weight: 500;
                    margin-top: 25px;
                }
            }
        }

        .building:hover,
        .deliver:hover,
        .manage:hover {
            .top {
                color: var(--thm-primary);
            }

            border-bottom: 8px solid var(--thm-base);
            box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1),
            5px 0px 10px rgba(0, 0, 0, 0.1),
            0px 5px 10px rgba(0, 0, 0, 0.1),
            -5px 0px 10px rgba(0, 0, 0, 0.1);
        }
    }


    /* PERSONAL AND COOPERATE CONTAINER STARTS HERE */

.personal-cooperate {
    width: 100%;
    padding: 10px 0px 10px 0px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* background-color: var(--bs-gray); */

    .personal {
        height: fit-content;
        background-color: #0dcaf0;
        /* background: url(/home/images/personal.JPG); */

        .content {
            width: 100%;
            height: 100%;
            background-color: rgba(24, 42, 120, 0.441);
            /* opacity: 0.5; */
            color: var(--bs-white);

            .details {
                width: 100%;
                color: white;
                justify-content: center;
                padding: 120px 80px 140px 80px;

                h2 {
                    font-size: 40px;
                    font-weight: 700;
                    margin-bottom: 30px;
                    line-height: 50px;
                }

                p {
                    font-size: 20px;
                    margin-bottom: 55px;
                }

                a {
                    text-decoration: none;
                    color: var(--bs-white);
                    padding: 20px;
                    font-size: 18px;
                    border: 2px solid var(--bs-white);
                }

                i {
                    color: white;
                    background-color: var(--bs-gray);
                    padding: 5px;
                    border-radius: 50%;
                }
            }
        }
    }

    .cooperate {
        height: fit-content;
        background-color: var(--bs-dark);
        /* background: url(/home/images/cooperate.JPG); */

        .content {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.839);
            /* opacity: 0.5; */

            .details {
                width: 100%;
                color: white;
                justify-content: center;
                padding: 120px 80px 140px 80px;

                h2 {
                    font-size: 40px;
                    font-weight: 700;
                    margin-bottom: 30px;
                    line-height: 50px;
                }

                p {
                    font-size: 20px;
                    margin-bottom: 55px;
                }

                a {
                    text-decoration: none;
                    color: var(--bs-white);
                    padding: 20px;
                    font-size: 18px;
                    border: 2px solid var(--bs-white);
                }

                i {
                    color: white;
                    background-color: var(--bs-gray);
                    padding: 5px;
                    border-radius: 50%;
                }

            }
        }
    }
}

/* ENDS HERE */

    .testmonials {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-gray-bg);
        padding-top: 100px;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 100px;


        .top {
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;

            h2 {
                font-size: 45px;
                color: var(--bs-gray-dark);
            }
        }

        /* this down is for the container but not inside the container */

        .down {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;


            .test {
                height: 450px;
                background-color: var(--thm-white);
                border-radius: 10px;
                padding: 30px;
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.05),
                    5px 0px 10px rgba(0, 0, 0, 0.05),
                    0px 5px 10px rgba(0, 0, 0, 0.05),
                    -5px 0px 10px rgba(0, 0, 0, 0.05);
                transition: box-shadow 0.3s ease-in-out;


                .top {
                    width: 100%;
                    height: 50%;
                    display: block;
                    text-align: center;

                    .font {
                        width: 100%;
                        height: 60%;
                        font-size: 50px;
                        color: #6c757d;
                    }

                    .note {
                        width: 100%;
                        height: 40%;
                        color: var(--bs-gray-dark);
                        font-weight: 500;
                        margin-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }
                }

                .down {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;


                    .pic {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .pro-pic {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background-color: var(--thm-gray);
                            margin-bottom: 20px;
                        }
                    }

                    .details {
                        width: 100%;
                        height: 30%;
                        line-height: 5px;

                        h2 {
                            font-size: 30px;
                            color: var(--bs-dark);
                        }

                        p {
                            font-size: 18px;
                            color: var(--bs-gray-dark);
                            font-weight: 500;
                            margin-top: 20px;
                        }
                    }
                }
            }

            .test:hover {
                .font {
                    color: var(--thm-primary);
                }

                box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2),
                5px 0px 10px rgba(0, 0, 0, 0.2),
                0px 5px 10px rgba(0, 0, 0, 0.2),
                -5px 0px 10px rgba(0, 0, 0, 0.2);
            }
        }
    }



    .third-section {
        width: 100%;
        height: fit-content;
        padding-top: 100px;
        padding-left: 45px;
        padding-right: 45px;
        padding-bottom: 100px;
        background: linear-gradient(120deg, #ff7a00 25%, #ff7b00ea 50%, #ee7708ea 75%, #d56d0bea 100%);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;


        .head {
            width: 100%;
            height: fit-content;
            color: var(--thm-white);
            text-align: center;


            h2 {
                font-size: 50px;
                font-weight: 800;
                margin-top: 20px;
                line-height: 45px;
            }

            p {
                font-weight: 600;
            }
        }

        .body-sec {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            padding-top: 50px;


            .active,
            .satisfied,
            .awards {
                width: 60%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: auto;


                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 65px;
                    padding-left: 50px;
                }

                .right {
                    width: 60%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 0px;


                    h2 {
                        font-size: 75px;
                        font-weight: 400;
                        line-height: 80px;
                    }

                    p {
                        font-size: 15px;
                        font-weight: 500;
                    }
                }
            }

            .awards {
                width: 60%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: auto;

                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 75px;
                    padding-left: 30px;
                }
            }
        }
    }
}


@media screen and (min-width: 1250px) {
    .page-name {
        width: 100%;
        height: 350px;
        /* background: url(../image/IMG_8529.jpg); */
        background-size: cover;

        .cover {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 35px;
            color: var(--thm-white);
            font-weight: 800;
            align-items: center;
            padding-left: 70px;
            background-color: rgba(0, 0, 0, 0.7);
        }
    }

    .first-section {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding-top: 100px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 100px;
    
    
        .building,
        .deliver,
        .manage {
            height: 450px;
            background-color: var(--thm-white);
            border: 1px solid var(--thm-gray);
            padding: 50px;
            transition: border-color 0.7s ease, color 0.7s ease;
    
    
            .top {
                width: 100%;
                height: 60%;
                font-size: 60px;
                color: var(--bs-gray);
            }
    
            
    
            .down {
                width: 100%;
                height: 40%;
    
                h2 {
                    color: var(--bs-dark);
                }
    
                p {
                    color: var(--bs-gray-dark);
                    font-weight: 500;
                    margin-top: 25px;
                }
            }
        }
    
        .building:hover,
        .deliver:hover,
        .manage:hover {
            .top {
                color: var(--thm-primary);
            }
            
            border-bottom: 8px solid var(--thm-base);
            box-shadow:
                0px -5px 10px rgba(0, 0, 0, 0.1),
                5px 0px 10px rgba(0, 0, 0, 0.1),
                0px 5px 10px rgba(0, 0, 0, 0.1),
                -5px 0px 10px rgba(0, 0, 0, 0.1);
        }
    }
    
    
    /* PERSONAL AND COOPERATE CONTAINER STARTS HERE */
    
    .personal-cooperate {
        width: 100%;
        padding: 10px 0px 10px 0px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* background-color: var(--bs-gray); */
    
        .personal {
            height: 500px;
            background-color: #0dcaf0;
            /* background: url(../image/personal.JPG); */
    
            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(24, 42, 120, 0.441);
                /* opacity: 0.5; */
                color: var(--bs-white);
    
                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 40px 50px 120px;
    
                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 20px;
                    }
    
                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }
    
                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }
    
                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }
                }
            }
        }
    
        .cooperate {
            height: 500px;
            background-color: var(--bs-dark);
            /* background: url(../image/cooperate.JPG); */
    
            .content {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.839);
                /* opacity: 0.5; */
    
                .details {
                    width: 100%;
                    color: white;
                    justify-content: center;
                    padding: 100px 40px 50px 120px;
    
                    h2 {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 20px;
                    }
    
                    p {
                        font-size: 20px;
                        margin-bottom: 55px;
                    }
    
                    a {
                        text-decoration: none;
                        color: var(--bs-white);
                        padding: 20px;
                        font-size: 18px;
                        border: 2px solid var(--bs-white);
                    }
    
                    i {
                        color: white;
                        background-color: var(--bs-gray);
                        padding: 5px;
                        border-radius: 50%;
                    }
    
                }
            }
        }
    }
    
    /* ENDS HERE */
    
    .testmonials {
        width: 100%;
        height: fit-content;
        background-color: var(--thm-gray-bg);
        padding-top: 100px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 100px;
    
    
        .top {
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;
    
            h2 {
                font-size: 65px;
                color: var(--bs-gray-dark);
            }
        }
    
        /* this down is for the container but not inside the container */
    
        .down {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
    
    
            .test {
                height: 450px;
                background-color: var(--thm-white);
                border-radius: 10px;
                padding: 40px;
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.05),
                    5px 0px 10px rgba(0, 0, 0, 0.05),
                    0px 5px 10px rgba(0, 0, 0, 0.05),
                    -5px 0px 10px rgba(0, 0, 0, 0.05);
                transition: box-shadow 0.3s ease-in-out;
    
    
                .top {
                    width: 100%;
                    height: 50%;
                    display: block;
                    text-align: center;
    
                    .font {
                        width: 100%;
                        height: 60%;
                        font-size: 50px;
                        color: #6c757d;
                    }
    
                    .note {
                        width: 100%;
                        height: 40%;
                        color: var(--bs-gray-dark);
                        font-weight: 500;
                        margin-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                    }
                }
    
                .down {
                    width: 100%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
    
    
                    .pic {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
    
                        .pro-pic {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            background-color: var(--thm-gray);
                            margin-bottom: 20px;
                        }
                    }
    
                    .details {
                        width: 100%;
                        height: 30%;
                        line-height: 5px;
    
                        h2 {
                            font-size: 30px;
                            color: var(--bs-dark);
                        }
    
                        p {
                            font-size: 18px;
                            color: var(--bs-gray-dark);
                            font-weight: 500;
                            margin-top: 20px;
                        }
                    }
                }
            }
    
            .test:hover {
                .font {
                    color: var(--thm-primary);
                }
                box-shadow:
                    0px -5px 10px rgba(0, 0, 0, 0.2),
                    5px 0px 10px rgba(0, 0, 0, 0.2),
                    0px 5px 10px rgba(0, 0, 0, 0.2),
                    -5px 0px 10px rgba(0, 0, 0, 0.2);
            }
        }
    }
    
    
    
    .third-section {
        width: 100%;
        height: fit-content;
        padding-top: 100px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 100px;
        background: linear-gradient(120deg, #ff7a00 25%, #ff7b00ea 50%, #ee7708ea 75%, #d56d0bea 100%);
        background-size: 400% 400%;
        animation: gradientAnimation 10s ease infinite;
    
    
        .head {
            width: 100%;
            height: fit-content;
            color: var(--thm-white);
            text-align: center;
    
    
            h2 {
                font-size: 50px;
                font-weight: 800;
            }
    
            p {
                font-weight: 600;
            }
        }
    
        .body-sec {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding-top: 50px;
    
    
            .active,
            .satisfied,
            .awards {
                width: 100%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: 0;
    
    
                .left {
                    width: 35%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 90px;
                    padding-left: 5px;
                }
    
                .right {
                    width: 65%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
    
    
                    h2 {
                        font-size: 80px;
                        font-weight: 400;
                        line-height: 80px;
                    }
    
                    p {
                        font-size: 18px;
                        font-weight: 500;
                    }
                }
            }
    
            .awards{
                width: 100%;
                height: 200px;
                display: flex;
                color: var(--thm-white);
                /* background-color: #198754; */
                margin: 0;
    
                .left {
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 100px;
                    padding-left: 50px;
                }
            } 
        }
    }

}