@import url('reset.css');
@import url('color.css');
@import url('layout.css');
@import url('typography.css');
@import url('media.css');

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    background-color: var(--sandy-nude);
    position: relative;
    background-image: url('../images/abstract-gradient.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Hero */
.hero-home {
    margin-top: 7.1875rem;
    width: 100%;
    height: calc(100vh - 7.1875rem);
    
    
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 24px;
}

.hero-logo {
    width: 100%;
    height: 60vh;
    object-fit: contain;
}

/* Scroll-down */
.scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;

}

.scroll-down span {
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

.scroll-down img {
    width: 24px;
    height: 24px;
    animation: scrolldown 1.5s ease-in-out infinite;
}

@keyframes scrolldown{
    0% {
        transform: translateY(-8px);
        opacity: 1;
    }
    100% {
        transform: translateY(24px);
        opacity: 0;
    }
}

/* About Page */
.about-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;

}

.about-right .img {
    width: 100%;
    object-fit: cover;
    box-shadow: -0.5rem .5rem .9375rem 0 rgba(0, 0, 0, 0.15);
}

/* Contact Page */
.contact-grid {
    width: 100%;
    display: flex;
    gap: 4rem;
}

.contact-left {
    grid-column: 1 / 5;
    display: flex;
    flex-direction: column;
}

.contact-right {
    grid-column: 5 / 11;
}

/* Form Grid */
.form-grid {
    margin: 0 0 2.5rem 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem 2rem;
}

/* First Name */
.f-grid1 {
    grid-column: 1 / 4;
    grid-row: 1;
}

/* Last Name */
.f-grid2 {
    grid-column: 4 / 7;
    grid-row: 1;
}

/* Email */
.f-grid3 {
    grid-column: 1 / 7;
    grid-row: 2;
}

/* Message */
.f-grid5 {
    grid-column: 1 / 7;
    grid-row: 3 / 5;
}

/* Break Point: about page, form grid (1 column) */
@media screen and (max-width: 640px) {
    .about-grid {
    display: flex;
    flex-direction: column-reverse;
    }
    .form-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    }
}