header {
    padding: 7rem 5rem;
    margin-bottom: 8rem;
}

.services-header {
    display: flex;
    gap: 4rem;
    align-items: center;


    .text h1 {
        font-weight: 700;
        font-size: 5.6rem;
        line-height: 80px;
    }

    .text p {
        color: #0E1628B2;
        /* margin: 2.4rem 0; */
    }

    .header-img {
        flex: 1 1 0%;
        /* max-width: 52.7rem;
        max-height: 52.7rem; */
    }

    .header-img img {
        width: 100%;
    }

    .btns {
        display: flex;
        align-items: center;
        gap: 1.6rem;
    }

    .btns button {
        padding: 1.6rem 2.4rem;
    }
}

/* WHY CHOOSE US */
.why-choose-us {
    background: #0E1628;
    padding: 10rem 4vw;
    border-radius: 0 0 50px 50px;
    margin-bottom: 8rem;


    .core-values-heading {
        max-width: 86.2rem;
        margin: 0 auto;
    }

    h2 {
        font-size: 3rem;
        text-align: center;
        max-width: 56.4rem;
        margin: 0 auto;
        line-height: 4rem;
        color: #0E1628;
    }


    .cards {
        /* margin-top: 5.6rem; */
        gap: 3.2rem;
        row-gap: 10rem;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(3, 1fr);

    }

    .card1 {
        background-color: transparent;
        /* padding: 4rem 3.2rem; */
        display: flex;
        border: none;
        flex-direction: column;
        align-items: start;
        gap: 1.2rem;
        text-align: left;

        h3 {
            font-weight: 700;
            color: #FFFFFF;
            font-size: 3rem;
        }

        p {
            font-weight: 500;
            color: #FFFFFFB2;
            line-height: 3rem;
        }
    }

    .card {
        background-color: transparent;
        /* padding: 4rem 3.2rem; */
        display: flex;
        border: none;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        text-align: center;

        h3 {
            font-weight: 500;
            color: #FFFFFF;
            font-size: 3rem;
        }

        p {
            font-weight: 500;
            color: #FFFFFFB2;
            line-height: 3rem;
        }

        /* transition: transform 0.2s ease-in-out; */

        span {
            width: 6rem;
            height: 6rem;
            border-radius: 100%;
            background-color: #D9D9D9;
        }
    }

}

/* OUR SERVICES */
.our-services {
    background: #F3F7FD;
    padding: 10rem 5rem;
    margin-bottom: 10rem;

    .heading {
        max-width: 93.2rem;
        margin: 0 auto;
        text-align: center;

        h3 {
            font-weight: 700;
            font-size: 3.5rem;
            margin-bottom: .8rem;

            span {
                color: #F8AC34;
            }
        }

        p {
            color: #0E1628B2;
        }
    }

    .service-cards {
        margin-top: 5.6rem;
        gap: 2.8rem;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(3, 1fr);

        .card {
            background-color: transparent;
            display: flex;
            border: none;
            border: 0.5px solid #0E16284D;
            border-radius: 4rem 4rem 0 0;
            flex-direction: column;
            align-items: center;

            .card-img {
                width: 100%;
                height: 26rem;

                img {
                    width: 100%;
                    /* height:; */
                    height: 100%;
                    border-radius: 4rem 4rem 0 0;
                }
            }

            .card-body {
                padding: 2.4rem;
                /* border: 0.5px solid #0E16284D; */

                h4 {
                    font-weight: 500;
                    color: #000;
                    font-size: 2.4rem;
                    margin-bottom: 1rem;
                }

                p {
                    color: #0E1628B2;
                    line-height: 3rem;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    header {
        padding: 3rem 2rem;
        margin-bottom: 2rem;
    }

    .services-header {
        flex-direction: column;
        text-align: center;

        gap: 5rem;
        border-radius: 0;
    }

    .services-header .text {
        align-items: center;
    }

    .services-header .text h1 {
        font-size: 3rem;
        line-height: normal;
    }


    .services-header .header-img img {
        width: 80%;
    }

    .why-choose-us {
        border-radius: 0;
        padding: 5rem 2rem;

        .cards {
            margin-top: 4rem;
            gap: 1.6rem;
            grid-template-columns: 1fr;
        }

        .card1 {
            align-items: center;
            text-align: center;
        }
    }

    .our-services {
        padding: 5rem 2rem;
        margin-bottom: 4.8rem;

        h3 {
            font-size: 3.6rem;
        }

        .service-cards {
            margin-top: 3.6rem;
            gap: 1.6rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            .card {
                .card-img {
                    width: 100%;
                    height: 18rem;
                }
            }
        }
    }
}

@media (min-width:768px) and (max-width: 992px) {
    header {
        padding: 5rem 4rem;
        margin-bottom: 6.4rem;
    }

    .services-header .text h1 {
        font-size: 3.2rem;
        line-height: normal;
    }

    .services-header .header-img img {
        width: 90%;
    }

    .why-choose-us {
        border-radius: 0 0 20px 20px;
        padding: 5rem 4rem;


        .cards {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
    }

    .our-services {
        padding: 5rem 4rem;
        margin-bottom: 6.4rem;

        .service-cards {
            margin-top: 4.8rem;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


        }
    }
}