*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.contact-info {
    margin-top: -136px;
}

.google-map {
    width: 100%;
    height: 550px;
    position: relative;
    overflow: hidden;
    background-image: url(../assets/images/location.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.google-map img {
    width: 100%;
    height: 100%;
}

.location {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.location i {
    font-size: 2.5rem;
    color: var(--color-theme);
}

.contact-info .items {
    background-color: var(--color-theme);
}

.contact-info .items .items-wrapper {
    padding: 50px 0px 30px;
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    color: #fff;
    flex-wrap: wrap;
}

.contact-info .items .item {
    width: 30%;
    display: flex;
    gap: 32px;
}

.contact-info .items .item .icon {
    margin-top: 15px;
    font-size: 42px;
}

.contact-info .items .item .desc p {
    font-size: 0.875rem;
}

.contact-message {
    width: 80%;
    margin: auto;
    padding: 100px 0px 50px;
    display: flex;
    gap: 20px;
}

.contact-message h4, 
.contact-message h5 {
    color: var(--color-black);
}

.contact-message .side {
    flex: 4;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.side__info {
    border-bottom: 2px solid rgba(0, 0, 0, .08);
}


.side__info p {
    font-size: 0.875rem;
}

.contact-message .main {
    flex: 7;
}

.contact-message .main form {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main form input,
.main form textarea {
    outline: none;
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 14px;
    font-family: "Nunito Sans", sans-serif;
    border: 1px solid #e9e9e9;
    color: #9c9c9c;
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.02);
}

.main form textarea {
    min-height: 80px;
    line-height: 20px;
    resize: vertical;
    overflow: auto;
}

.main form input:focus,
.main form textarea:focus {
    color: #979797;
    background: rgba(241, 241, 241, 1) !important;
    border-color: #dedede;
}

.main form input::placeholder,
.main form textarea::placeholder {
    color: #9c9c9c;
}

.main form #Name,
.main form #Email {
    width: 48%;
}

.main form #Subject,
.main form #Message,
.main form button {
    width: 100%;
}

.main form button {
    padding: 10px 20px;
    background-color: var(--color-theme);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;    
}

@media(max-width:768px) {
    .contact-info {
        margin-top: 0px;
    }
    .contact-info .items .items-wrapper {
        width: 90%;
        gap: 40px;
    }
    
    .contact-info .items .item {
        width: 100%;
    }

    .contact-message {
        width: 90%;
        flex-direction: column;
        padding-top: 60px;
    }
}