.contactMainBox{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px;
}


.contactInnerBox{
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}


.contactUpperMainBox{
    width: 100%;
    height: 100%;
    display: flex;
   background-color: rgb(161, 130, 248);
   gap: 10px;
   padding: 2rem;

}

.contactMapBox{
    width: 100%;
    height: 100%;
}

.contactMapBox .ContactMap{
    width: 100%;
    height: 100%;
}
.contactMapBox .ContactMap iframe{
    width: 100%;
}
.contactDetailForm{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contactDetailForm h2{
    font-size: 2rem;
}

.contactDetailForm input{
 height: 30px;   
 margin-top: 10px;
 padding: 0.5rem;
}
.contactfont{
    font-family: calibri;
    font-size: 1.3rem;
    color: white;
}
.NameAndEmail{
    display: flex;
    gap: 1rem;


}

.NameDetail{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.EmailDetail{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.SubjectDetail{
    display: flex;
    flex-direction: column;
}

.MessageDetail{
    display: flex;
    flex-direction: column;
}

#sendbutton{
    width: 150px;
    height: 40px;
    font-size: 1.3rem;
    border-bottom: 10px;
    background-color: rgb(225, 225, 234);
    border: none;
}


@media (max-width:894px){
    .contactMainBox{
        padding: 1rem;
    }

    .contactInnerBox{
        width: 100%;
        padding: 1rem;
    }

    .contactUpperMainBox{
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    .NameAndEmail{
        flex-direction: column;
    }


    .contactMapBox .ContactMap iframe{
        width: 100%;
        height: 200px;
    }
    
}