body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
}

/* ************************************************************* */
/* landing section  */
/* ************************************************************* */
.landing {
    position: relative;
    min-height: 40vh;
    padding-bottom: 2rem;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6),
    /* top = darker */
    rgba(0, 0, 0, 0.6),
    /* middle = medium */
    rgba(0, 0, 0, 0.6)
    /* bottom = lighter */
    ), url("../images/hero-alt.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


    .landing .container {
        padding: 1rem 0rem;
        /* border: 1px solid red; */
        color: white;
        text-align: center;
        width: 90%;
        margin: auto;
        margin-bottom: 5rem;
    }

        .landing .container h1 {
            font-size: var(--font-heading1);
            margin: 2rem 0rem;
            width: 100%;
            /* border: 1px solid red; */
        }

        .landing .container p {
            font-size: var(--font-para2);
            margin: 3rem 0rem;
            width: 90%;
            font-style: italic;
            margin: auto;
        }

        .landing .container a {
            display: block;
            font-size: var(--font-para3);
            border: 1px solid rgb(238, 238, 238);
            padding: 1.5rem 2.5rem;
            background-color: var(--deep-orange);
            cursor: pointer;
            color: white;
            z-index: 999;
            color: black;
            font-weight: 600;
            letter-spacing: 0.1rem;
            width: fit-content;
            margin: 5rem auto;
        }

            .landing .container a:hover {
                background-color: white;
                color: black;
                border: 1px solid black;
            }

    .landing img:nth-child(3) {
        position: absolute;
        bottom: -30%;
        left: 0;
        width: 45rem;
        /* border: 1px solid red; */
    }

    .landing img:nth-child(2) {
        position: absolute;
        bottom: -30%;
        /* border: 1px solid red; */
        right: 0;
        width: 45rem;
    }

/* ************************************************************* */
/* testimonials section  */
/* ************************************************************* */

.testimonials {
    min-height: 20vh;
    padding: 5rem 0rem;
    background-color: var(--deep-blue);
    margin-top: 12rem;
}

    .testimonials .container {
        /* border: 1px solid red; */
        display: flex;
        width: 90%;
        margin: auto;
        gap: 4rem;
    }

        .testimonials .container form {
            background-color: var(--deep-orange);
            border-radius: 2rem;
            width: 35%;
            min-height: 60vh;
        }

        .testimonials .container .content {
            width: 65%;
        }

            .testimonials .container .content h3 {
                font-size: var(--font-heading2);
                margin: 2rem 0rem;
                color: white;
                font-family: "Ubuntu", sans-serif;
                /* border: 1px solid red; */
            }

            .testimonials .container .content p {
                color: white;
                font-size: var(--font-para2);
                margin-top: 2rem;
            }

/* ************************************************************* */
/* about section  */
/* ************************************************************* */
.about {
    /* margin-top: 10rem; */
    position: relative;
    /* border: 1px solid red; */
}

    .about .container {
        /* border: 1px solid black; */
        width: 90%;
        margin: auto;
        padding: 5rem 1rem;
        display: flex;
        align-items: stretch;
        justify-content: center;
        /* border: 1px solid red; */
        gap: 4rem;
    }

        .about .container .aboutImg {
            /* flex: 0 0 30%; */
            /* min-height: 320px; */
            /* aspect-ratio: 4/3; */
            flex: 0.3;
            position: relative;
            height: 100%;
            /* border: 1px solid red; */
        }

            .about .container .aboutImg img {
                border-radius: 1.9rem;
                width: 85%;
                /* object-fit: cover; */
                /* border: 1px solid red; */
            }

        .about .container .content {
            flex: 0.7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* gap: 1rem; */
            justify-content: flex-start;
        }

            .about .container .content .title {
                padding: 1rem 4rem;
                border-radius: 0.5rem;
                width: fit-content;
                font-size: var(--font-para1);
                background-color: var(--deep-orange);
                color: white;
                font-weight: bold;
            }

            .about .container .content h2 {
                margin: 1rem 0rem;
                font-size: var(--font-heading3);
                line-height: 5rem;
                /* border: 1px solid red; */
                font-family: "Ubuntu", sans-serif;
                color: var(--header-color);
            }

            .about .container .content p {
                font-size: var(--font-para3);
                line-height: 1.5;
                color: var(--sub-header-color);
            }

            .about .container .content h3 {
                font-size: var(--font-para1);
                color: var(--header-color);
                position: relative;
            }

                .about .container .content h3::before {
                    background-color: var(--deep-orange);
                    width: 100%;
                    height: 0.5rem;
                    content: "";
                    position: absolute;
                    top: -30%;
                    left: 0;
                }

            .about .container .content .options {
                display: grid;
                /* border: 1px solid red; */
                row-gap: 1rem;
                /* column-gap: 1rem; */
                grid-template-columns: auto auto;
                width: 90%;
                border-left: 0.7rem solid var(--deep-orange);
                padding-left: 1rem;
                color: var(--header-color);
            }

                .about .container .content .options span {
                    font-size: var(--font-para2);
                    color: var(--header-color);
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 1rem;
                    /* border: 1px solid red; */
                }

            .about .container .content .contact {
                display: flex;
                width: 100%;
                justify-content: flex-start;
                margin-top: 6rem;
            }

                .about .container .content .contact > div:nth-child(1) {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-wrap: nowrap;
                    border: 1px solid green;
                    font-size: var(--font-para2);
                    background-color: rgb(78, 78, 252);
                    color: white;
                    gap: 1rem;
                    border-radius: 0.3rem;
                    font-weight: bold;
                    border: none;
                    cursor: pointer;
                    padding: 1rem 2rem;
                    margin-right: 5rem;
                }

                    .about .container .content .contact > div:nth-child(1) div {
                        background-color: white;
                        padding: 1rem;
                        border-radius: 0.4rem;
                    }

                .about .container .content .contact > div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .about .container .content .contact > div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 1rem;
                }

                    .about .container .content .contact > div .call {
                        /* border: 1px solid red; */
                        background-color: rgb(255, 160, 160);
                        padding: 1rem;
                        border-radius: 50%;
                    }

                    .about .container .content .contact > div .number {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-start;
                        /* border: 1px solid red; */
                        font-size: var(--font-para2);
                        text-wrap: nowrap;
                    }

                        .about .container .content .contact > div .number > span:nth-child(1) {
                            font-weight: bold;
                            color: var(--deep-orange);
                        }

                        .about .container .content .contact > div .number > span:nth-child(2) {
                            font-weight: bold;
                            font-size: var(--font-para3);
                            color: var(--header-color);
                        }

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


/* ************************************************************* */
/* experience section  */
/* ************************************************************* */
.experience {
    background: url("/assets/images/footer_BG.jpg");
    background-size: cover;
    padding: 4rem;
    position: relative;
    margin-bottom: 8rem;
}

    .experience p {
        font-family: "Ubuntu", sans-serif;
        margin: auto;
        text-align: center;
        color: white;
        font-size: var(--font-heading3);
        /* margin-bottom: 3rem; */
        width: 90%;
        margin-bottom: 3rem;
    }

    .experience > div:nth-child(2) {
        margin: auto;
        margin-bottom: 10rem;
        text-wrap: nowrap;
    }

    .experience .container {
        color: white;
        /* border: 1px solid red; */
        /* width: 70%; */
        margin: auto;
        display: grid;
        grid-template-columns: auto auto auto auto;
        background-color: var(--deep-orange);
        padding: 2rem;
        border-radius: 1rem;
        gap: 3rem;
        position: absolute;
        bottom: -20%;
        left: 50%;
        width: 80%;
        transform: translateX(-50%);
    }

        .experience .container div {
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-around;
            align-items: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            text-wrap: nowrap;
            min-width: 100px;
        }

            .experience .container div .fa-solid {
                font-size: var(--font-heading3);
            }

            .experience .container div span {
                font-size: var(--font-heading3);
            }



/* Why choose Us section starts here  */

.why {
    min-height: 50vh;
    padding: 4rem 0rem;
    padding-bottom: 0rem;
    /* border: 1px solid red; */
    background-color: #F2F7FA;
}

    .why .container1 {
        width: 90%;
        margin: 2rem auto;
    }

        .why .container1 h2 {
            font-size: var(--font-heading2);
            width: 80%;
            margin: 2rem 0rem;
            color: var(--header-color);
            font-family: "Ubuntu", sans-serif;
        }

        .why .container1 p {
            font-size: var(--font-para2);
            color: var(--sub-header-color);
        }

    .why .container2 {
        /* border: 1px solid red; */
        margin-top: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        width: 90%;
    }

        .why .container2 img {
            flex: 1;
            width: 20rem;
        }

        .why .container2 .right {
            flex: 1;
            /* border: 1px solid red; */
            margin: 2rem;
        }

            .why .container2 .right .item {
                display: flex;
                align-items: flex-start;
                gap: 1rem;
                justify-content: flex-start;
                gap: 3rem;
                margin: 6rem 0rem;
            }

                .why .container2 .right .item .icon {
                    /* border: 1px solid rgb(99, 99, 99); */
                    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
                    max-width: 8rem;
                    max-height: 8rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                }

                    .why .container2 .right .item .icon .orange {
                        border: 2px solid orange;
                        padding: 1rem;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 6rem;
                        height: 6rem;
                    }

                        .why .container2 .right .item .icon .orange .fa-solid {
                            color: var(--deep-orange);
                            font-size: var(--font-para1);
                        }

            .why .container2 .right .text {
                width: 70%;
            }

                .why .container2 .right .text h3 {
                    font-size: var(--font-para1);
                    color: var(--header-color);
                }

                .why .container2 .right .text p {
                    margin-top: 1rem;
                    font-size: var(--font-para3);
                    color: var(--sub-header-color);
                }

/* footer section starts from here  */


@media (max-width: 1100px) {
    .landing .container {
        width: 100%;
        /* border: 1px solid red; */
        margin-bottom: 0rem;
    }

        .landing .container p {
            margin-bottom: 1rem;
            width: 95%;
        }

        .landing .container a {
            margin-bottom: 0rem;
        }

    .landing img:nth-child(3) {
        display: none;
    }

    .landing img:nth-child(2) {
        display: none;
    }


    .testimonials {
        margin-top: 0rem;
    }

        .testimonials .container {
            /* border: 1px solid black; */
            gap: 2rem;
        }

            .testimonials .container form {
                width: 40%;
            }

            .testimonials .container .content {
                width: 60%;
            }

    /* about section start from here .  */

    .about .container {
        /* border: 1px solid black; */
        width: 90%;
    }

        .about .container .aboutImg {
            flex: 0 0 40%;
        }

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

    .why .container1 {
        width: 90%;
        margin: 2rem auto;
    }
}

@media (max-width: 767px) {
    .about .container {
        flex-direction: column;
        gap: 3rem;
    }

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

    .testimonials .container {
        flex-direction: column;
    }

        .testimonials .container form {
            background-color: var(--deep-orange);
            border-radius: 2rem;
            width: 100%;
            min-height: 60vh;
        }

        .testimonials .container .content {
            width: 100%;
        }

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

    .experience p {
        width: 80%;
    }

    .experience .container {
        flex-wrap: wrap;
        bottom: -20%;
        width: 80%;
        grid-template-columns: auto auto;
        /* align-items: flex-start; */
        /* justify-content: flex-start; */
    }

    .why .container1 h2 {
        width: 100%;
    }

    .why .container2 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .why .container2 img {
            width: 100%;
        }
}

@media (max-width: 454px) {
    .about .container .content h2 {
        line-height: 3rem;
    }

    .about .container .content .contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        width: 100%;
    }

    .about .container .content .options {
        grid-template-columns: auto;
    }

    .why .container2 .right {
        width: 100%;
        /* border: 1px solid red; */
        margin: auto;
    }



        .why .container2 .right .item {
            align-items: flex-start;
            flex-direction: column;
            margin: 1rem;
            margin-bottom: 4rem;
            align-items: center;
            gap: 1rem;
            /* border: 1px solid red; */
        }

            .why .container2 .right .item .icon {
                /* border: 1px solid rgb(99, 99, 99); */
                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
                max-width: 8rem;
                max-height: 8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                display: none;
            }

            .why .container2 .right .item .icon {
                /* border: 1px solid rgb(99, 99, 99); */
                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
            }

        .why .container2 .right .text {
            /* border: 1px solid red; */
            width: 100%;
        }
}