:root {
    /* Declare Variables Here */
    --small-font-size: 0.875rem;
    --normal-font-size: 1rem;
    --medium-font-size: 1.5rem;
    --extra-medium-font-size: 2rem;
    --large-font-size: 4rem;
    --extra-large-font-size: 4.5rem;
    --huge-font-size: 10rem;

    --small-column: 9vw;
    --max-width: 1800px;
    --full-width: 100%;

    --tiny-gap: 0.5rem;
    --small-gap: 1rem;
    --medium-gap: 1.5rem;
    --large-gap: 2rem;
    --extra-large-gap: 3rem;
    --huge-gap: 6rem;
    --side-gap: 8rem;

    --tag-padding: 0.375rem 1.125rem;

    --transition-duration: 0.25s;

    --underline-hidden: underline #00000000;
    --underline-accent-small: underline var(--accent-color-100) 2px;
    --underline-accent-big: underline var(--accent-color-100) 4px;
    --underline-primary-small: underline var(--primary-color-100) 2px;
    --underline-primary-big: underline var(--primary-color-100) 4px;

    --border-accent-tiny: 0.75px var(--accent-color-100) solid;
    --border-accent-small: 1px var(--accent-color-100) solid;
    --border-accent-big: 2px var(--accent-color-100) solid;
    --border-accent-huge: 7px solid var(--accent-color-100);

    --border-radius: 2rem;

    --primary-font: "Rovelle Uno", sans-serif;
    --logo-font: "Ralokun", sans-serif;
    --heading-font: "Moga", sans-serif;

    --font-weight-normal: 400;
    --font-weight-light: 200;
    --font-weight-semibold: 600;

    /* Colors */
    --primary-color-100: #fbfaee;
    --secondary-color-100: #1d1d1d;
    --secondary-color-75: hsla(0, 0%, 11%, 0.75);
    --accent-color-100: #a3268d;
    --accent-color-25: hsla(311, 62%, 39%, 0.25);
    --second-accent-color-100: #f9ed19;

    --accent-gradient: linear-gradient(
        105.14deg,
        #a3268d -5.7%,
        #711565 24.36%,
        #490744 104.59%
    );
}

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

body {
    font-size: var(--normal-font-size);
    background-color: var(--primary-color-100);
    color: var(--secondary-color-100);
    font-family: var(--primary-font);
    margin: 0;
    justify-content: space-between;
    align-items: center;
    /* overflow-x: hidden; */
}

main {
    width: var(--full-width);
}

.main-wrapper {
    max-width: var(--max-width);
    gap: var(--huge-gap);
}

.flex-row,
.flex-col {
    display: flex;
    flex-wrap: wrap;
}

.flex-row {
    flex-direction: row;
}

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

a {
    text-decoration: none;
    color: var(--secondary-color-100);
}

.header {
    width: var(--full-width);
    position: sticky;
    top: 0;
    z-index: 10000;
    background-color: var(--primary-color-100);
    justify-content: center;
}

.header-wrapper {
    width: var(--full-width);
    max-width: var(--max-width);
    padding: var(--large-gap) var(--side-gap);
    font-size: var(--medium-font-size);
    justify-content: space-between;
    align-items: end;
}

#headerLogo {
    width: var(--small-column);
    cursor: pointer;
}

.hamburger-icon {
    display: none;
    opacity: 0;
}

nav {
    font-family: var(--logo-font);
}

.nav-large {
    gap: var(--huge-gap);
}

.nav-link {
    text-decoration: var(--underline-hidden);
    transition: all var(--transition-duration) ease;
    cursor: pointer;
}

.nav-link:hover {
    text-decoration: var(--underline-accent-big);
}

.hero-wrapper {
    position: relative;
    justify-content: flex-start;
    align-items: center;
    width: var(--full-width);
    background-color: var(--primary-color-100);
    padding-inline: var(--side-gap);
    margin-top: var(--huge-gap);
}

.hero-content {
    /* max-width: 50vw; */
    color: var(--accent-color-100);
    justify-content: center;
    align-items: center;
    width: var(--full-width);
    gap: var(--huge-gap);
}

.hero-video-box {
    color: var(--secondary-color-100);
    width: 35vw;
}

.hero-wrapper h1 {
}

.title-letter {
    display: inline-block; /* Required for transforms on inline elements */
    transform: scaleY(1); /* Initial state */
    opacity: 0;
}

.separator {
    border: var(--border-accent-huge);
    width: 65%;
    position: absolute;
    left: -8rem;
    bottom: 0;
}

h1 {
    font-size: var(--huge-font-size);
    font-weight: var(--font-weight-normal);
    margin: var(--small-gap) auto;
    font-family: var(--heading-font);
}

h2 {
    font-size: var(--large-font-size);
    margin: var(--small-gap) auto;
}

.hero-content p {
    font-size: var(--medium-font-size);
    margin: var(--small-gap) auto;
}

.portfolio-container,
.services-container,
.contact-container {
    justify-content: center;
}

.portfolio-wrapper,
.services-wrapper {
    justify-content: center;
    max-width: 85vw;
    gap: var(--large-gap);
}

.portfolio-wrapper {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: var(--small-gap);
    grid-row-gap: var(--small-gap);
    width: var(--full-width);
    grid-template-areas:
        "cell1 cell1 cell2"
        "cell3 cell5 cell5"
        "cell4 cell5 cell5"
        "cell6 cell6 cell6"
        "cell7 cell7 cell8"
        "cell9 cell11 cell11"
        "cell10 cell11 cell11"
        "cell12 cell12 cell12";
}

#portfolioCell1 {
    grid-area: cell1;
}

#portfolioCell2 {
    grid-area: cell2;
}

#portfolioCell3 {
    grid-area: cell3;
}

#portfolioCell4 {
    grid-area: cell4;
}

#portfolioCell5 {
    grid-area: cell5;
}

#portfolioCell6 {
    grid-area: cell6;
}

#portfolioCell7 {
    grid-area: cell7;
}

#portfolioCell8 {
    grid-area: cell8;
}

#portfolioCell9 {
    grid-area: cell9;
}

#portfolioCell10 {
    grid-area: cell10;
}

#portfolioCell11 {
    grid-area: cell11;
}

#portfolioCell12 {
    grid-area: cell12;
}

.portfolio-cell img {
    width: var(--full-width);
    height: var(--full-width);
    object-fit: cover;
}

.portfolio-cell {
    position: relative;
    /* cursor: pointer; */
}

.portfolio-strip {
    position: absolute;
    top: 0;
    opacity: 0;
    left: var(--large-gap);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* background-color: var(--accent-color-100); */
    background: var(--accent-gradient);
    color: var(--primary-color-100);
    text-align: center;
    height: var(--full-width);
    padding: var(--small-gap);
    transform-origin: center top;
    transform: scaleY(0);
}

.portfolio-strip h3 {
    transform: rotate(180deg);
}

.services-container {
    width: var(--full-width);
    align-items: center;
    margin: var(--huge-gap) auto;
    padding: var(--huge-gap) 0;

    background: var(--accent-gradient);

    color: var(--primary-color-100);
}

.services-wrapper {
    width: var(--full-width);
    padding-inline: var(--side-gap);
}

.services-cell {
    width: var(--full-width);
    gap: var(--large-gap);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.services-section-heading {
    text-align: center;
}

.service-heading-wrapper {
    justify-content: space-between;
    align-items: center;
}

.feather-plus {
    width: var(--large-font-size);
    height: var(--large-font-size);
    stroke-linecap: square;
    stroke: var(--second-accent-color-100);
    transition: all var(--transition-duration) ease;
}

.service-heading {
    font-weight: var(--font-weight-light);
    font-size: var(--large-font-size);
}

.service-cell-line {
    border: var(--border-accent-tiny);
}

.service-cell-content-wrapper {
    justify-content: center;
}

.service-cell-content-wrapper {
    /* opacity: 0; */
    /* height: 0; */
    visibility: hidden;
    /* transition: all var(--transition-duration) ease; */
}

.active .service-cell-content-wrapper {
    /* opacity: 1; */
    /* height: var(--full-width); */
    visibility: visible;
}

.active .feather-plus {
    transform-origin: center center;
    rotate: -45deg;
}

.service-cell-list {
    list-style: square inside url(../images/list-style.svg);
    gap: var(--large-gap);
}

.service-cell-list-item {
    font-size: var(--medium-font-size);
    font-weight: var(--font-weight-light);
}

.contact-wrapper {
    gap: var(--large-gap);
}

.contact-details-wrapper {
    gap: var(--small-gap);
    font-size: var(--normal-font-size);
}

.contact-details-wrapper h2 {
    margin: 0;
    font-size: var(--extra-large-font-size);
    font-family: var(--logo-font);
    color: var(--accent-color-100);
}

.contact-details-bottom {
    gap: var(--small-gap);
}

.contact-links-wrapper {
    gap: var(--small-gap);
}

.contact-link {
    color: var(--secondary-color-100);
    text-decoration: var(--underline-hidden);
    transition: all var(--transition-duration) ease;
    gap: var(--small-gap);
}

.contact-link:hover {
    font-weight: var(--font-weight-semibold);
    text-decoration: var(--underline-accent-small);
}

.contact-form-container {
    gap: var(--large-gap);
    width: 50vw;
}

.category-selector-wrapper,
.budget-selector-wrapper,
.contact-form-wrapper {
    border-left: var(--border-accent-big);
    padding-left: var(--small-gap);
    gap: 1.5rem;
}

.contact-form-heading {
    margin: 0;
    /* font-size: var(--medium-font-size); */
    font-size: var(--extra-medium-font-size);
}

.category-tags-wrapper,
.budget-tags-wrapper {
    flex-wrap: wrap;
    gap: var(--small-gap);
}

.category-tag,
.budget-tag {
    padding: var(--tag-padding);
    border: var(--border-accent-big);
    background-color: var(--primary-color-100);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-normal);
    /* font-size: var(--medium-font-size); */
    /* font-size: 0.9rem; */
    color: var(--accent-color-100);
    transition: all var(--transition-duration) ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.category-tag.active,
.budget-tag.active,
.category-tag:hover,
.budget-tag:hover {
    /* background-color: var(--accent-color-100); */
    background: var(--accent-gradient);
    color: var(--primary-color-100);
    border: var(--border-accent-big);
}

.contact-form-wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    width: var(--full-width);
    border-left: var(--border-accent-big);
    padding-left: var(--small-gap);
}

.the-form {
    flex-wrap: wrap;
    gap: var(--large-gap);
    width: 80%;
    justify-content: space-between;
}

.form-field {
    margin: 0;
    font-size: var(--medium-font-size);
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--large-gap);
}

.form-field .tooltiptext,
.category-selector-wrapper .tooltiptext,
.budget-selector-wrapper .tooltiptext {
    visibility: hidden;
    font-size: var(--small-font-size);
    color: var(--accent-color-100);
    position: absolute;
}

.form-field .tooltiptext {
    margin-top: 5rem;
}

.category-selector-wrapper .tooltiptext,
.budget-selector-wrapper .tooltiptext {
    margin-top: -1rem;
}

.form-field input {
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-bottom: var(--border-accent-small);
    width: var(--full-width);
    color: var(--secondary-color-100);
}

.form-field textarea {
    border: none;
    border-bottom: var(--border-accent-small);
    background: none;
    width: var(--full-width);
    color: var(--secondary-color-100);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--secondary-color-75);
    font-size: var(--small-font-size);
    font-family: var(--primary-font);
}

.form-button-wrapper {
    align-items: flex-end;
}

.contact-form-wrapper button {
    border: none;
    background-color: var(--accent-color-25);
    color: var(--secondary-color-100);
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-semibold);
    padding: var(--tiny-gap) var(--small-gap);
    transition: all var(--transition-duration) ease;
}

.contact-form-wrapper button:hover {
    /* background-color: var(--accent-color-100); */
    background: var(--accent-gradient);
    color: var(--primary-color-100);
    cursor: pointer;
}

#backButton {
    margin-top: var(--small-gap);
}

.footer {
    margin-top: var(--huge-gap);
    width: var(--full-width);
    /* background-color: var(--accent-color-100); */
    background: var(--accent-gradient);
    align-items: center;
}

.footer-wrapper {
    max-width: var(--max-width);
    width: var(--full-width);
    justify-content: space-between;
    align-items: stretch;
    padding: var(--extra-large-gap) var(--side-gap);
}

#footerLogo {
    width: var(--small-column);
    cursor: pointer;
}

.footer-nav {
    height: var(--full-width);
    justify-content: space-between;
}

.social-media-links-wrapper {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--tiny-gap);
}

.footer-nav .nav-link,
.social-media-link {
    color: var(--primary-color-100);
    text-decoration: var(--underline-hidden);
    transition: all var(--transition-duration) ease;
    cursor: pointer;
}

.footer-nav .nav-link:hover,
.social-media-link:hover {
    font-weight: var(--font-weight-semibold);
    text-decoration: var(--underline-primary-small);
}

.copyright {
    color: var(--primary-color-100);
}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width*/

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    :root {
        /* Declare Variables Here */
        --extra-medium-font-size: 1.8rem; /* Changed */
        --large-font-size: 3rem; /* Changed */
        --extra-large-font-size: 3.5rem; /* Changed */
    }

    .separator {
        bottom: 12rem;
        width: 85%;
    }

    .hero-video-box {
        width: 75vw;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    :root {
        /* Declare Variables Here */
        --medium-font-size: 1.25rem; /* Changed */
        --large-font-size: 2rem; /* Changed */
        --extra-medium-font-size: 1.25rem;
        --huge-gap: 3rem; /* Changed */
    }

    .separator {
        bottom: 10rem;
        width: 95%;
    }

    .contact-details-wrapper {
        width: var(--full-width);
        flex-direction: row;
        padding-inline: var(--side-gap);
        justify-content: space-between;
    }

    .contact-details-wrapper h2 {
        font-size: calc(var(--large-font-size) + var(--normal-font-size));
    }

    .contact-details-bottom {
        justify-content: space-between;
    }

    .contact-form-container {
        width: var(--full-width);
        padding-inline: var(--side-gap);
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    :root {
        --extra-medium-font-size: 1.3rem; /* Changed */
        --large-font-size: 2rem; /* Changed */
        --huge-font-size: 6rem; /* Changed */
        --small-column: 12vw; /* Changed */

        --border-accent-huge: 5px solid var(--accent-color-100);
        --side-gap: 2rem;
    }

    .separator {
        bottom: 11rem;
    }

    .portfolio-wrapper {
        width: var(--full-width);
        grid-template-areas:
            "cell1 cell1 cell1"
            "cell2 cell2 cell2"
            "cell3 cell3 cell3"
            "cell4 cell4 cell4"
            "cell5 cell5 cell5"
            "cell6 cell6 cell6"
            "cell7 cell7 cell7"
            "cell8 cell8 cell8"
            "cell9 cell9 cell9"
            "cell10 cell10 cell10"
            "cell11 cell11 cell11"
            "cell12 cell12 cell12";
    }

    .portfolio-cell img {
        min-height: 300px;
    }

    .portfolio-strip {
        opacity: 1;
        transform: scaleY(1);
        left: var(--tiny-gap);
        font-size: var(--small-font-size);
        padding: var(--tiny-gap);
    }

    .footer-logo-wrapper {
        width: var(--full-width);
        margin-bottom: var(--medium-gap);
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    :root {
        --large-font-size: 2rem;
        --huge-font-size: 5rem;

        --small-column: 15vw;
    }

    .hamburger-icon {
        display: block;
        opacity: 1;
        /* width: 100%; */
    }

    .feather-menu {
        width: var(--large-font-size);
        height: var(--large-font-size);
    }

    .nav-large {
        flex-direction: column;
        position: absolute;
        width: var(--full-width);
        right: 0;
        top: 5rem;
        background-color: var(--primary-color-100);
        align-items: center;
        padding: var(--large-gap);
        opacity: 0;
    }

    .nav-large .nav-link-wrapper {
        width: fit-content;
        font-size: var(--large-font-size);
    }

    .separator {
        bottom: 11rem;
        width: var(--full-width);
    }

    .contact-details-wrapper h2 {
        font-size: var(--extra-large-font-size);
    }

    .footer-wrapper {
        justify-content: center;
        gap: var(--small-gap);
    }

    .footer-logo-wrapper {
        text-align: center;
    }

    .footer-nav-wrapper {
        width: var(--full-width);
    }
    .footer-nav {
        gap: var(--small-gap);
    }
    .nav-link-wrapper,
    .social-media-link-wrapper {
        width: var(--full-width);
        font-size: var(--large-font-size);
        text-align: center;
    }

    #footerLogo {
        width: 70%;
    }
}

@media (max-width: 546px) {
    .separator {
        bottom: 13rem;
    }
}

@media (max-width: 470px) {
    :root {
        --large-font-size: 1.8rem;
    }
    .separator {
        bottom: 14rem;
    }
}

@media (max-width: 402px) {
    :root {
        --large-font-size: 1.3rem;
    }

    .separator {
        bottom: 18rem;
    }
}

@media (max-width: 360px) {
    :root {
        --large-font-size: 1rem;
    }

    .separator {
        bottom: 18rem;
    }
}