#contact-banner {
    width: 100%;
    background-image: url("/images/about-banner-img.jfif");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
}


    #contact-banner .contact-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        color: white;
    }

        #contact-banner .contact-wrapper h1 {
            color: white;
            font-size: 5vw;
        }

        #contact-banner .contact-wrapper .pervLink {
            border: 4px solid #f76c31;
            padding: 15px;
            font-weight: 600;
            letter-spacing: 1px;
        }

            #contact-banner .contact-wrapper .pervLink a {
                color: white;
                text-decoration: none;
            }

                #contact-banner .contact-wrapper .pervLink a:hover {
                    text-decoration: underline;
                }



.contact-section {
    padding: 50px 20px;
    /* background: #f9f9f9; */
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
    gap: 30px;
}

.map {
    flex: 1;
    width: 250px;
    height: 600px;
    /* max-width: 600px; */
}

.contact-info {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background: white;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
}

.help-btn {
    border: 3px solid #f76c31;
    color: #f76c31;
    padding: 10px 20px;
    /* background-color: white; */
    margin-bottom: 20px;
    width: fit-content;
    font-size: 15px;
    letter-spacing: 1px;
}

.contact-info h2 {
    margin: 30px 0;
    font-size: 3vw;
    width: 50%;
}

.contact-info p {
    width: 60%;
    line-height: 22px;
    font-size: 16px;
    margin-bottom: 20px;
}

.contact-item {
    display: flex;
    /* align-items: center; */
    margin-bottom: 25px;
}

    .contact-item i {
        background-color: #f76c31;
        font-size: 15px;
        padding: 15px;
        border-radius: 50%;
        color: white;
    }

    .contact-item div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .contact-item div p {
            width: 100%;
        }

        .contact-item div .addr {
            width: 60%;
        }

    .contact-item span {
        font-size: 24px;
        margin-right: 15px;
    }



.form {
    text-align: center;
    padding: 50px;
}

    .form h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

.contact-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 3px solid #f76c31;
    color: #f76c31;
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 15px;
}

.form-container {
    max-width: 700px;
    margin: auto;
    display: grid;
    gap: 15px;
}

    .form-container input, .form-container textarea {
        width: 100%;
        padding: 12px;
        border: none;
        background-color: #F9F8F7;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .form-container .input-con {
        display: flex;
        gap: 20px;
    }


    .form-container textarea {
        height: 100px;
        resize: none;
    }

.submit-btn {
    background: #f76c31;
    color: white;
    padding: 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    width: fit-content;
    margin: auto;
    font-weight: 600;
    letter-spacing: 1.5px;
    position: relative;
}

    .submit-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background-color: #262626;
        z-index: 1;
        transition: all 0.4s;
    }

    .submit-btn:hover::before {
        width: 100%;
    }

    .submit-btn span {
        z-index: 2;
        position: relative;
    }

.all-err{
    margin-top: 10px;
    margin-bottom: 10px;
}

.error-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 4px;
    text-align: center;
}




@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }


    .map {
        flex: none;
        width: 100%;
        height: 50vw;
    }


    .contact-info {
        padding: 10px;
    }


        .contact-info p {
            width: 100%;
        }


        .contact-info h2 {
            font-size: 7vw;
            width: 50%;
        }
}


@media (max-width: 600px) {
    .form-container div {
        display: flex;
        flex-direction: column;

    }

    .form-container .input-con {
        gap: 0px;
    }
}



@media (max-width: 500px) {
    .contact-info h2 {
        font-size: 9vw;
        width: 100%;
    }
}