@import url('./base.css');
@import url('./header.css');
@import url('./hamburger.css');
@import url('./footer.css');


/* Hero section */
.hero {
    margin-top: 5em;
}

.hero__fig {
    position: relative;
    z-index:2;
}

.hero__img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 100%);
    filter: brightness(50%);
    
    min-width: 260px;
    width: 100vw;
}

.hero__figc {
    position: absolute;
    left: calc(1em + 1.5625vw);
    top: 45%;
    transform: translateY(-50%);
}

.hero__heading {
    color: var(--white);
    font-size: clamp(2.2rem, calc(2.25rem + 1.5vw), 3rem);
    font-weight: 700;
}

.hero__heading::after {
    content: '.';
    color: var(--red-secondary);
}

@media (min-width: 450px) {
    .hero__figc {
        top: clamp(40%, calc(50% + 1.5vw), 80%);
    }
}

/* Contact section */
.contact {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.enquiries {
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 2em calc(1em + 1.5625vw);
}

.enquiries__fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.enquiries__img-c {
    min-width: 200px;
    max-width: 350px;
}

.enquiries__figc {
    color: var(--black);
    font-size: 1.25rem;
    line-height: 1.5;
}

@media (min-width: 700px) {
    .enquiries__fig {
        flex-direction: row;
        align-items: flex-start;
    }

    .enquiries__img-c,
    .enquiries__figc {
        flex: 1;
    }

    .enquiries__figc {
        min-width: 200px;
    }
}

/* Form section */
.form {
    background: #EEEEEE;
    margin: 2em calc(1em + 1.5625vw) 6em;
    padding: 2em;
}

.form__input-wrapper {
    margin: 1em 0;
    max-width: 490px;
    
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.form__label {
    font-size: 1.25rem;
}

.form__input {
    border: none;
    border-radius: 1px;
    color: rgba(0, 0, 30, 0.4);
    font-size: 1.125rem;
    outline: none;
    padding: .65em 1em;
}

.form__input--message {
    resize: none;
}

/* Chrome/Opera/Safari */
.form__input::-webkit-input-placeholder {
    color: rgba(0, 0, 30, 0.4);
}

/* Firefox 19+ */
.form__input::-moz-placeholder {
    color: rgba(0, 0, 30, 0.4);
}

/* IE 10+ */
.form__input:-ms-input-placeholder {
    color: rgba(0, 0, 30, 0.4);
}

/* Firefox 18- */
.form__input:-moz-placeholder {
    color: rgba(0, 0, 30, 0.4);
}

.form__btn {
    background: var(--red-secondary);
    border: none;
    border-radius: .5em;
    color: var(--white);
    cursor: pointer;
    font-size: 1.125rem;
    margin: 1.5em 0;
    max-width: 490px;
    padding: .65em 1em;
    text-transform: uppercase;
    width: 100%;
}

@media (min-width: 900px) {
    .contact {
        flex-direction: row;
    }

    .enquiries,
    .form {
        flex: 1;
    }

    .form {
        margin-bottom: 0;
        margin-right: 0;
        margin-top: -14em;
        padding-bottom: 4em;
        padding-top: 16em;
        position: relative;
    }
}


/* Success modal */
.success-modal {
    border: none;
    border-radius: .5em;

    position: fixed;
    left: 50%;
    max-width: 650px;
    padding: calc(2em + 1.5vw) 2em;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    z-index: 5;
}

.success-modal::backdrop {
    background: rgba(0, 0, 0, .7);
}

.success-modal__figc {
    margin: 0 auto;
    max-width: 500px;
}

.success-modal__heading {
    margin: 1em 0;
    text-transform: none;
}

.success-modal__p {
    line-height: 1.5;
}

/* General media queries styles */
@media (min-width: 1250px) {
    .hero__figc {
        left: 150px;
    }

    .enquiries {
        margin-left: 150px;
        margin-right: 150px;
    }
}