body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
}

/* ************************************************************* */
/* Landing  */
/* ************************************************************* */
.landing {
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/assets/images/footer_BG.jpg");
    background-size: cover;
    background-position: center;
}

    .landing h1 {
        font-size: var(--font-heading1);
        font-weight: bold;
        color: transparent;
        font-size: 12rem;
        font-family: sans-serif;
        -webkit-text-stroke: 2px white;
        /* White outline */
        text-transform: uppercase;
    }

/* ************************************************************* */
/* car  */
/* ************************************************************* */
.car .container1 {
    background: url("/assets/images/about-page-exp-bg.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    padding: 7rem 1rem;
    text-align: center;
}

    .car .container1 h2 {
        text-align: center;
        font-size: var(--font-heading3);
    }

.car .container2 {
    padding: 5rem 10rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    flex-direction: column;
}

    .car .container2 > p {
        font-size: var(--font-para2);
    }

    .car .container2 > h3 {
        font-size: var(--font-para1);
    }

    .car .container2 > div span {
        font-weight: bold;
        color: var(--header-color);
        display: inline-block;
        margin-bottom: 1rem;
        font-size: var(--font-para3);
    }

    .car .container2 > div p {
        font-weight: 300;
        color: var(--sub-header-color);
        font-size: var(--font-para3);
    }

.services {
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-direction: column;
    min-height: 50vh;
    background-color: #F2F7FA;
    padding: 4rem 0rem;
}

    .services > p {
        width: 80%;
        font-size: var(--font-para2);
        text-align: center;
        color: var(--sub-header-color);
    }

    .services .cards {
        width: 80%;
        margin: auto;
        display: flex;
        align-items: stretch;
        /* ensures all cards are same height */
        justify-content: flex-start;
        gap: 4rem;
        font-size: var(--font-para2);
        text-align: center;
        flex-wrap: wrap;
    }

        .services .cards .eachCard {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* Distributes space inside */
            flex: 1 1 30%;
            background-color: white;
            border-radius: 0.8rem;
            overflow: hidden;
            max-width: 30%;
            border: 1px solid black;
        }


            .services .cards .eachCard img {
                height: 20rem;
                min-width: 100%;
            }

            .services .cards .eachCard h3 {
                margin: 2rem 0rem;
                color: var(--header-color);
            }

            .services .cards .eachCard p {
                width: 95%;
                margin: auto;
                margin-bottom: 2rem;
                font-weight: 500;
                font-size: var(--font-para2);
                color: var(--sub-header-color);
            }

            .services .cards .eachCard a {
                width: 100%;
                outline: none;
                border: none;
                padding: 0.7rem;
                background-color: var(--deep-blue);
                color: white;
                border-radius: 0.4rem;
                cursor: pointer;
                margin-bottom: 0px;
                font-weight: bold;
            }



@media (max-width: 1100px) {
    .landing {
        min-height: 20vh;
    }

        .landing h1 {
            font-size: 5rem;
        }


    .services > p {
        width: 90%;
        font-size: var(--font-para2);
        text-align: center;
    }

    .services .cards {
        width: 85%;
        /* Increase width for more space */
        gap: 2.5rem;
        /* Reduce gap slightly */
        flex-wrap: wrap;
        /* Allow cards to wrap to the next line */
        justify-content: center;
        /* Center cards in the row */
    }

        .services .cards .eachCard {
            /*
         Allow two cards per row (approx. 50% width minus half of the gap)
         flex-grow: 0 (don't grow), flex-shrink: 0 (don't shrink below basis), flex-basis: calculated width
        */
            flex: 0 0 calc(50% - 1.25rem);
            /* 50% width minus half the new gap (2.5rem / 2) */
            margin-bottom: 2.5rem;
            /* Add vertical space between rows */
            min-width: unset;
            /* Remove min-width constraint to allow calc() to work */
            max-width: unset;
            /* Remove max-width constraint */
        }
}

@media (max-width: 767px) {
    .landing {
        min-height: 20vh;
    }

        .landing h1 {
            margin: 5rem;
        }

    .services .cards {
        width: 90%;
        /* Increase width even more */
        gap: 2rem;
        /* Further reduce the gap */
    }

        .services .cards .eachCard {
            flex: 0 0 calc(100% - 1rem);
            margin-bottom: 2rem;
        }
}