.each-service-header {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    max-height: 48rem;
    max-width: 144rem;
    margin: 0 auto;
}

/* Background image */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(4px);
    z-index: 1;
}

/* Overlay with color */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.content {
    position: relative;
    z-index: 3;
    color: white;
    text-align: center;
    padding: 20px;
    top: 50%;
    transform: translateY(-50%);

    h1 {
        font-size: 5rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    p {
        max-width: 69.2rem;
        margin: 0 auto;
        color: #FFFFFFB2;
    }
}

.each-service-body {
    padding: 7rem 5rem;

    .inner {
        display: flex;
        gap: 10rem;
        position: relative;
        min-height: 100vh;
    }



    .left {
        width: 60%;

        h4 {
            font-weight: 700;
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .offer {
            border-bottom: 0.7px dashed #0E16284D;
            padding-bottom: 8rem;
            margin-bottom: 8rem;

            p {
                color: #0E1628B2;
                line-height: 3.5rem;
                font-size: 1.8rem;

                span {
                    font-weight: 600;
                }
            }
        }

        .services-rendered {
            border-bottom: 0.7px dashed #0E16284D;
            padding-bottom: 8rem;
            margin-bottom: 8rem;


            .service-cards {
                margin-top: 2rem;
                gap: 1.6rem;
                row-gap: 4rem;
                display: grid;
                overflow: hidden;
                grid-template-columns: repeat(2, 1fr);
                /* -ms-overflow-style: none;
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }

                &::-webkit-scrollbar-thumb {
                    display: none;
                } */

                .card5 {
                    grid-column: span 2;
                }

                .card {
                    background-color: #fff;
                    display: flex;
                    border: none;
                    border-radius: 4rem 4rem 0 0;
                    flex-direction: column;
                    align-items: center;
                    box-shadow: 2px 2px 10px 0px #0000000D;
                    /* border: .5px solid #0E16284D; */


                    .card-img {
                        width: 100%;
                        height: 20rem;
                        border-radius: 4rem 4rem 0 0;

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

                    .card-body {
                        padding: 2.4rem;
                        border: 0.2px solid #0E162822;

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

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

        .our-work {
            .heading {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .social-icons {
                display: flex;
                gap: 2.4rem;
                align-items: center;
                justify-content: center;

                svg path {
                    fill: #0E1628;
                }
            }

            .image-section {
                /* padding: 0rem 5rem; */
                margin-top: 2rem;


                .image-grid {
                    /* border-bottom: 0.7px solid #0E16284D;
                    padding-bottom: 7rem;
                    margin-bottom: 2rem; */
                    display: grid;

                    gap: 8px;
                    grid-template-columns: repeat(3, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                }

                .image-item {
                    position: relative;
                    overflow: hidden;
                    /* height: 20rem; */
                    /* border-radius: 8px; */

                }

                .item1 {
                    grid-column: span 1;
                    grid-row: span 2;
                    border-radius: 4rem 0 0 0;
                    max-height: 31rem;
                }

                .item2 {
                    grid-column: span 2;
                    grid-row: span 2;
                    border-radius: 0 4rem 0 0;
                    max-height: 31rem;
                }

                .item3 {
                    grid-column: span 1;
                    grid-row: span 1;
                    max-height: 24.6rem;
                }

                .item4 {
                    grid-column: span 1;
                    grid-row: span 1;
                    max-height: 24.6rem;
                }

                .item5 {
                    grid-column: span 1;
                    grid-row: span 1;
                    max-height: 24.6rem;
                }

                .item6 {
                    grid-column: span 3;
                    grid-row: span 1;
                    max-height: 31rem;
                    border-radius: 0 0 4rem 4rem;
                }

                .beauty .item6 {
                    grid-column: span 2;
                    grid-row: span 1;
                    max-height: 31rem;
                    border-radius: 0 0 0rem 4rem;
                }

                .beauty .item7 {
                    grid-column: span 1.5;
                    grid-row: span 1;
                    max-height: 31rem;
                    border-radius: 0 0 4rem 0rem;
                }


                .image-item img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease-in-out;
                }

                .image-item:hover img {
                    transform: scale(1.05);
                }
            }
        }
    }

    .right {
        position: sticky;
        top: 15%;
        /* right: 0; */
        width: 40%;
        height: fit-content;
        background: #0E1628;
        border-radius: 0 50px 50px 0;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        align-items: center;
        text-align: center;

        h4 {
            font-weight: 700;
            font-size: 3rem;
            max-width: 28.3rem;
            margin: 0 auto;
            color: #FFF;
        }

        p {
            color: #FFFFFFB2;
        }
    }
}

/* 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;
        }
    }

}

.approach {
    background: #F3F7FD;
    padding: 10rem 4vw;
    border-radius: 0 0 50px 50px;
    margin-bottom: 8rem;


    .approach-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;
        display: grid;
        overflow: hidden;
        grid-template-columns: repeat(3, 1fr);

    }

    .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: #0E1628;
            font-size: 3rem;
        }

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

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

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

    .approach-btns {
        display: flex;
        width: fit-content;
        margin: 0 auto;
        gap: 1.6rem;
        margin-top: 6.4rem;
    }

}

@media (max-width: 768px) {
    .each-service-body {
        padding: 5rem 2rem;



        .left {
            width: 100%;

            .services-rendered {
                h4 {
                    font-size: 2.4rem;
                }

                .service-cards {
                    /* margin-top: 2rem; */
                    /* gap: 1.6rem; */
                    row-gap: 2rem;
                    /* display: grid; */
                    grid-template-columns: 1fr;

                    .card5 {
                        grid-column: span 1;
                    }
                }
            }

            .our-work .heading {
                flex-direction: column;
                align-items: flex-start;

                .social-icons {
                    align-self: flex-end;
                    margin-top: 2rem;
                }
            }
        }

        .right {
            display: none;
        }

    }

    .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;

        .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;
                }
            }
        }
    }

    .approach {
        border-radius: 0;
        padding: 5rem 2rem;

        .cards {
            margin-top: 4rem;
            gap: 1.6rem;
            /* padding: 7rem 0rem; */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
    }
}

@media (min-width:768px) and (max-width: 992px) {
    .each-service-body {
        padding: 5rem 2rem;



        .left {
            width: 100%;

            .services-rendered {
                h4 {
                    font-size: 2.4rem;
                }

                .service-cards {
                    /* margin-top: 2rem; */
                    /* gap: 1.6rem; */
                    row-gap: 2rem;
                    /* display: grid; */
                    grid-template-columns: repeat(2, 1fr);

                    .card5 {
                        grid-column: span 1;
                    }
                }
            }

            .our-work .heading {
                flex-direction: column;
                align-items: flex-start;

                .social-icons {
                    align-self: flex-end;
                    margin-top: 2rem;
                }
            }
        }

        .right {
            display: none;
        }

    }

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


        .cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

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

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


        }
    }
}