/* fonts */
@font-face {
    font-family: 'Poppins-Medium';
    src: url(fonts/Poppins-Medium.ttf) format("truetype");
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url(fonts/Poppins-SemiBold.ttf) format("truetype");
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url(fonts/Poppins-Bold.ttf) format("truetype");
}

@font-face {
    font-family: 'Poppins-Light';
    src: url(fonts/Poppins-Light.ttf) format("truetype");
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url(fonts/Poppins-Regular.ttf) format("truetype");
}

.poppins-medium {
    font-family: 'Poppins-Medium';
}
/* end fonts */

/* general stylings */
body {
    background-color: #9da06e;
    color: white;
    margin: 0;
    font-size: 1.1vw;
}

h1 {
    font-family: 'Poppins-SemiBold';
    font-size: 3.5vw;
}

h2 {
    font-family: 'Poppins-SemiBold';
    font-size: 2.6vw;
}

p {
    font-family: 'Poppins-Regular';
    margin: 0.75em 0;
}

.absolute {
    position: absolute;
    width: 100%;
}

.no-margin {
    margin: 0;
}

.no-margin-top {
    margin-top: 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.no-padding {
    padding: 0;
}

.no-padding-top {
    padding-top: 0;
}

.no-padding-bottom {
    padding-bottom: 0;
}

.bold {
    font-family: 'Poppins-Bold';
}

.head-text {
    font-family: 'Poppins-Light';
    font-size: 1.6vw
}

.bottom-text {
    font-family: 'Poppins-Regular';
    font-size: 0.8vw;
}

.flex-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

button, .form-input, .form-submit {
    font-family: 'Poppins-Regular';
    font-size: 1vw;
    flex: 0 0 auto;
    width: 10vw;
    background-color: transparent;
    color: #9da06e;
    padding: 1.5vh 0;
    margin: 3.5vh 0;
    border: 1px solid #9da06e;
    cursor: pointer;
}

button:hover, .form-submit:hover {
    opacity: 0.8;
}

.underline-link {
    color: inherit;
    text-decoration: underline;
}
/* end general stylings */

/* form stylings */
.form-input {
    margin: 1vh 0;
    padding: 1.25vh 1vw;
    box-sizing: border-box;
    flex: 1;
    color: #9da06e;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    width: 100%;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

textarea {
    resize: none;
    height: 40vh;
}
/* end form stylings */

/* content stylings */
:root {
    --side-padding: 12%;
}

.content {
    width: 50%;
    box-sizing: border-box;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
}

.welcome-message {
    margin-top: 8%;
}

.padding-right {
    padding-right: var(--side-padding);
}

.padding-left {
    padding-left: var(--side-padding);
}

.padding-footer {
    padding: 5% var(--side-padding);
    padding-right: 18%;
}

.padding-vertical {
    padding-top: 3%;
    padding-bottom: 3%;
}

.logo {
    width: 18vw;
}

.photo {
    width: 50%;
    align-self: center;
}

.illustration {
    width: 50%;
    object-fit: contain;
    box-sizing: border-box;
    padding: 5% 5%;
    padding-right: 10%;
}

.registration-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* end content stylings */

/* different color combinations */
.section-avocado {
    display: flex;
    justify-content: space-between;
    background-color: #9da06e;
    color: white;
}

.section-floral {
    display: flex;
    justify-content: space-between;
    background-color: #fffbf3;
    color: #9da06e;
}

.section-feta {
    display: flex;
    justify-content: space-between;
    background-color: #e1e3d4;
    color: #9da06e;
}

.section-white {
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    color: #9da06e;
}
/* end different color combinations */

/* navigation */
nav {
    font-family: 'Poppins-Medium';
    font-size: 1.2vw;
    overflow: hidden;
    padding: 1.2% var(--side-padding);
    position: relative;
    z-index: 2;
}

.mobile-nav {
    display: none;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

nav ul {
    font-size: 83%;
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li {
    float: left;
    margin-left: 1vw;
    margin-right: 1vw;
}

nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 1vh 1vw;
    text-decoration: none;
}

nav a:hover {
    color: #d8ceca;
}

nav a.active {
    color: #d8ceca;
}

.vertical-nav {
    padding: 0;
}

.vertical-nav ul {
    font-size: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.hamburger {
    display: none;
}
/* end navigation */

/* contact information list */
.contact-info {
    font-family: 'Poppins-Regular';
    font-size: 0.9vw;
}

.contact-info ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.contact-margin {
    margin: 0 0 1.5em 0;
}
/* end contact information list */

/* mobile device styles */
@media (max-width: 768px) {
    /* general stylings */
    :root {
        --side-padding: 10%;
    }

    h1 {
        font-size: 6vw;
    }

    h2 {
        font-size: 4.5vw;
    }

    p {
        font-size: 3.5vw;
    }

    .head-text {
        font-size: 4vw;
    }

    .bottom-text {
        font-size: 2vw;
    }

    .flex-container {
        flex-direction: column;
    }

    button, .form-input, .form-submit {
        font-size: 3vw;
        width: 30vw;
    }
    /* end general stylings */

    /* navigation */
    .nav-menu {
        display: none;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .hamburger .line {
        width: 50px;
        height: 3px;
        background-color: white;
        margin: 4px 0;
        transition: all 0.3s ease;
    }

    .hamburger .line.home-page {
        background-color: #9da06e;
    }

    /* cross icon transition */
    .hamburger.active .line:nth-child(1) {
        transform: rotate(-45deg) translate(-7.5px, 7.5px);
    }

    .hamburger.active .line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .line:nth-child(3) {
        transform: rotate(45deg) translate(-7.5px, -7.5px);
    }
    /* end cross icon transition */

    .mobile-nav {
        background-color: white;
        font-size: 3vw;
    }

    .mobile-nav a {
        color: #9da06e;
        text-align: left;
        padding: 1vw 0;
    }

    .mobile-nav li {
        margin-left: 0;
        margin-right: 0;
    }

    .mobile-nav.active {
        display: flex;
    }

    .mobile-nav-menu {
        display: flex;
        flex-direction: column;
    }

    .vertical-nav {
        display: none;
    }
    /* end navigation */

    /* sections */
    .section-avocado {
        flex-direction: column;
    }

    .section-floral {
        flex-direction: column;
    }

    .section-feta {
        flex-direction: column;
    }

    .section-white {
        flex-direction: column;
    }
    /* end sections */

    /* content */
    .content {
        width: 100%;
        padding: 5% var(--side-padding);
    }

    .welcome-message {
        margin-top: 0%;
    }

    .logo {
        width: 35vw;
    }

    .photo {
        width: 100%;
    }

    .illustration {
        width: 100%;
        padding: 5% 5%;
    }
    /* end content */

    /* contact information list */
    .contact-info {
        font-size: 3vw;
    }

    .mobile-contact-padding {
        padding: 8% 0%;
    }

    /* mobile fixes */
    .mobile-row-flex {
        flex-direction: row;
    }

    .mobile-reverse-flex {
        flex-direction: column-reverse;
    }
    /* end mobile fixes */
}
/* end mobile device styles */