@import "styles.css";

.map{
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30vh;
}

.map.desktop{
    display: none;
}

.map iframe{
    height: 100%;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.39);
}

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

.container .contactContainer .contactInfo{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    background-color: var(--secondary-color-dark);
    padding: 40px;
}

.container .contactContainer .contactInfo .contactInfoContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 30px;
    color: var(--gray-100);
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoTitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoTitle .title{
    font-size: var(--h1-font-size);
    font-weight: var(--font-semi-bold);
    font-family: var(--serif-family);
    text-transform: capitalize;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoTitle .subtitle{
    font-size: var(--normal-font-size);
    font-weight: var(--font-regular);
    font-family: var(--sans-family);
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoDetails{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoDetails div{
    display: flex;
    gap: 30px;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoDetails div i{
    font-size: var(--h3-font-size);
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoDetails div{
    font-size: var(--normal-font-size);
    line-height: 20px;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoSocials{
    display: flex;
    gap: 30px;
    margin-top: 50px;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoSocials i{
    font-size: var(--h1-font-size);
    color: var(--gray-300);
    transition: all .3s ease;
}

.container .contactContainer .contactInfo .contactInfoContainer .contactInfoSocials i:hover{
    color: var(--primary-color-light);
    transform: scale(1.2);
}

.container .contactContainer .contactForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    width: 100%;
}

.container .contactContainer .contactForm form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.container .contactContainer .contactForm form .formInputs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.container .contactContainer .contactForm form .formInputs input, .container .contactForm form .formInputs textarea{
    width: 80%;
    height: 40px;
    padding: 10px 8px;
    font-size: var(--normal-font-size);
    color: var(--gray-900);
    border: none;
    border-bottom: 2px solid var(--gray-700);
    outline: none;
    border-radius: 3px;
}

.container .contactContainer .contactForm form .formInputs textarea{
    height: 120px;
}

.container .contactContainer .contactForm form button{
    padding: 10px;
    border-radius: 4px;
    border: none;
    outline: none;
    background-color: var(--primary-color-light);
    color: var(--gray-100);
    font-size: var(--normal-font-size);
    cursor: pointer;
    transition: all .3s ease;
    min-width: 120px;
}

.container .contactContainer .contactForm form button:hover{
    background-color: var(--primary-color-dark);
    color: var(--gray-100);
}

.container .contactContainer .contactForm a{
    padding: 10px;
    border-radius: 4px;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: var(--gray-100);
    font-size: var(--normal-font-size);
    cursor: pointer;
    transition: all .3s ease;
}

.container .contactContainer .contactForm a:hover{
    filter: brightness(80%);
    color: var(--gray-100);
}

.container .newsletter{
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color-dark);
}

.container .newsletter .newsletterTitle .subtitle{
    color: var(--gray-100);
}

.container .newsletter .newsletterTitle .title{
    color: var(--gray-100);
}

.container .newsletter .newsletterInfo form input{
    border: none;
}

.container .newsletter .newsletterInfo form button{
    border: none;
}

.container .newsletter .newsletterInfo form button:hover{
    filter: brightness(150%);
}

/* Small Devices */
@media screen and ( max-width:350px ) {
    .container .contactContainer .contactForm form button{
        padding: 8px;
        font-size: var(--small-font-size);
    }
    
    .container .contactContainer .contactForm a{
        padding: 8px;
        font-size: var(--small-font-size);
    }
}

/* Medium Devices */
@media screen and ( min-width:768px ) {
    .container .contactContainer{
        flex-direction: row;
    }

    .container .contactContainer .contactForm form .formInputs{
        width: 100%;
    }
}

/* Large Devices */
@media screen and ( min-width:1024px ) {
    .map.desktop{
        display: block;
        height: 40vh;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .map{
        display: none;
    }

    .map iframe{
        box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0);
    }

    .container .contactContainer{
        overflow: hidden;
        background-color: var(--gray-300);
        border-radius: 8px;
        width: 70%;
        margin: 40px 0;
    }

    .container .contactContainer .contactInfo{
        width: 50%;
        margin: 10px 8px;
        border-radius: 8px;
    }
    
    .container .contactContainer .contactForm{
        gap: 20px;
        width: 50%;
    }

    .container .contactContainer .contactForm form .formInputs{
        gap: 20px;
    }

    .container .contactContainer .contactForm form .formInputs input, .container .contactContainer .contactForm form .formInputs textarea{
        font-size: var(--h3-font-size);
        background-color: transparent;
    }

    .container .contactContainer .contactForm form .formInputs textarea{
        height: 150px;
    }
}

@media screen and ( min-width:1244px ) {
    .container .contactContainer .contactInfo{
        width: 40%;
    }
    
    .container .contactContainer .contactForm{
        width: 60%;
    }
}