/* Import the font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'avenir'; /* Custom name for the font */
    src: url('../fonts//avenir-font/AvenirLTStd-Medium.otf') format('truetype'); /* Path to the font file */
}

@font-face {
    font-family: 'avenirlite'; /* Custom name for the font */
    src: url('../fonts//avenir-font/AvenirLTStd-Light.otf') format('truetype'); /* Path to the font file */
}


* {
    padding: 0;
    margin: 0;
}

html, body {
    font-family: avenir;
}

.header {
    width: 100%;
    height: 250px;
    background-image: url('../images/Rectangle\ 3\ \(2\).svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

    .header .left {
        width: 51%;
        height: 250px;
        border-radius: 0px 0px 100px 0px;
        background: #04204A;
        display: flex;
        align-items: end;
        gap: 4.7rem;
    }

    .header h4 {
        width: 40%;
        text-align: center;
        font-family: Avenir;
        font-size: 45px;
        font-weight: 800;
        line-height: 80px;
        margin-bottom: 30px;
        margin-left: 30px;
        color: #FFFFFF;
    }

/* section1 start */
#sec-1 {
    width: 100%;
    height: fit-content;
    background: #F8F8F8;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
    display: flex;
    padding-top: 100px;
}

#filter {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 4rem;
}

    #filter #inp {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 50%;
    }

        #filter #inp label {
            font-family: Avenir, sans-serif;
            font-size: 40px;
            font-weight: 800;
            line-height: 30px;
            color: #000;
        }

        #filter #inp input {
            width: 100%;
            height: 70px;
            border-radius: 10px;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.25);
            text-indent: 20px;
            font-size: 18px;
        }

    #filter button {
        width: 30%;
        height: 70px;
        padding: 15px 35px;
        border-radius: 10px;
        background: #1E9948;
        color: #fff;
        border: none;
        font-family: Avenir, sans-serif;
        font-size: 25px;
        font-weight: 500;
        outline: none;
        opacity: 1;
        align-self: flex-end;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

        #filter button:hover {
            background: #157434; /* Slightly darker green */
            transform: scale(1.05); /* Slight zoom effect */
            box-shadow: 0 8px 15px rgba(30, 153, 72, 0.3); /* Glow effect */
        }

.card button:hover {
    background: #157434; /* Slightly darker green */
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 8px 15px rgba(30, 153, 72, 0.3); /* Glow effect */
}

#sec-1-con {
    width: 100%;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#card-title {
    font-family: Avenir, sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: #1C1C1C;
    margin-bottom: 30px;
    place-self: center;
    width: 100%;
}

.main {
    width: 80%;
}

#card-con {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    border: 1px solid #1E9948;
    border-radius: 10px;
    padding: 3rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

    .card .miles {
        border-radius: 10px;
        background: #DADADA;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20%;
        font-size: 13px;
        padding: 0.5rem 2rem;
    }

    .card .card-title {
        font-family: Avenir, sans-serif;
        font-size: 30px;
        font-weight: 800;
        color: #1C1C1C;
    }

    .card .details {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

        .card .details .link {
            display: flex;
            gap: 10px;
        }

            .card .details .link p {
                font-family: Avenir, sans-serif;
                font-size: 18px;
                font-weight: 400;
                color: #1C1C1C;
                overflow: hidden;
                width: 100%;
            }

    .card button {
        width: 90%;
        height: fit-content;
        padding: 15px 35px;
        border-radius: 10px;
        background: #1E9948;
        border: none;
        outline: none;
        font-family: Avenir, sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: #fff;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

#paggination {
    width: 40%;
    height: fit-content;
    margin: 4rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#paggination-con {
    display: flex;
    gap: 1rem;
}

    #paggination-con button {
        width: 80%;
        padding: 10px 20px;
        border-radius: 10px;
        border: 1px solid #1E9948;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        font-family: Avenir, sans-serif;
        font-size: 20px;
        font-weight: 400;
        color: #1C1C1C;
    }

        #paggination-con button:hover {
            background: #1E9948;
            color: #FFFFFF;
        }

    #paggination-con .angle {
        color: #1E9948;
        font-weight: 800;
        font-size: 22px;
        margin: 0px 18px;
    }

    #paggination-con .active {
        background-color: #1E9948;
        color: #FFFFFF;
    }
/* section1 end */




/* faq start */
/* FAQ Section */
#faq {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
}

#faq-con {
    width: 80%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#faq-title {
    font-family: Avenir, sans-serif;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    color: #1C1C1C;
}

#question-con {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* FAQ Item */
.question {
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid rgba(57, 57, 57, 0.25);
    overflow: hidden;
}

/* Header Section */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    transition: background 0.3s;
}

    .question-header p {
        font-family: Avenir, sans-serif;
        font-size: 20px;
        color: #000;
        margin: 0;
    }

.toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Answer Section (Initially Hidden) */
.answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.5;
    font-family: Avenir, sans-serif;
    color: #7c7c7c;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* When Active (Expanded) */
.question.active .answer {
    max-height: 150px; /* Adjust for longer text */
    padding: 10px 20px;
}

.question.active .toggle-icon {
    transform: rotate(45deg);
}
/* faq end */




/* footer  */

#footer {
    width: 100%;
    height: 689.72px;
    background: #04204A;
}

#footer-con {
    width: 80%;
    height: 85%;
    margin: auto;
}

#f-top {
    width: 75%;
    display: flex;
    justify-content: space-between;
    height: 90%;
    align-items: center;
}


    #f-top .quick {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        height: 60%;
    }

        #f-top .quick p {
            font-family: Inter;
            font-size: 20px;
            font-weight: 400;
            line-height: 24.2px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #1E9948;
        }

        #f-top .quick .links {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

            #f-top .quick .links a {
                font-family: Inter;
                font-size: 18px;
                font-weight: 200;
                line-height: 24.2px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #ffffffb2;
                text-decoration: none;
            }



    #f-top .social {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        height: 60%;
    }

        #f-top .social p {
            font-family: Inter;
            font-size: 20px;
            font-weight: 400;
            line-height: 24.2px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #1E9948;
        }

        #f-top .social .links {
            display: flex;
            gap: 1rem;
        }

    #f-top .quick .links a {
        font-family: Inter;
        font-size: 18px;
        font-weight: 100;
        line-height: 24.2px;
        text-align: left;
        color: #FFFFFF;
        text-decoration: none;
    }








#f-b {
    border-top: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
    height: 15%;
}

    #f-b #f-b-con {
        width: 80%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #f-b .left {
        font-family: Inter;
        font-size: 16px;
        font-weight: 200;
        line-height: 19.36px;
        color: #FFFFFF;
    }

#f-b-con .right {
    display: flex;
    gap: 20px;
}

    #f-b-con .right a {
        text-decoration: none;
        color: #FFFFFF;
        font-family: Inter;
        font-size: 16px;
        font-weight: 200;
        line-height: 19.36px;
    }