@media (min-width: 1499.98px) {
    :root {
        --text-size: 8px;
        --margin-unit: 4.687vw;
        --form-width: 40vw;
    }

    .display-md {
        display: none;
    }

    .display-mx {
        display: block;
    }
}


@media (max-width: 1500.02px) {
    :root {
        --text-size: 6px;
        --margin-unit: 4.687vw;
        --form-width: 50vw;
    }

    .display-mx {
        display: none;
    }

    .display-sm {
        display: none;
    }

    .display-md {
        display: block;
    }
}

@media (max-width: 1200px) {
    :root {
        --text-size: 5.5px;
        --margin-unit: 5vw;
        --form-width: 60vw;
    }

    .display-md {
        display: none;
    }

    .display-sx {
        display: none;
    }

    .display-sm {
        display: block;
    }
}

@media (max-width: 992px) {
    :root {
        --text-size: 5px;
        --margin-unit: 5vw;
        --form-width: 60vw;
    }

    .display-md {
        display: none;
    }

    .display-sm {
        display: none;
    }

    .display-sx {
        display: block;
    }
}

/* Title at Section 1 */
.title-group {
    position: absolute;
    top: 10vw;
    left: 7vw;
}

a, u {
    text-decoration: none;
}


.text-logo {
    font-family: RocBold;
    font-size: calc(var(--text-size) * 5);
    margin-left: var(--text-size);
}

.text-navbar {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 5);
}

.text-title {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 15);
    line-height: 1;
    background-image: linear-gradient(45deg, rgba(247,115,23,1) -20%, rgba(239,223,159,1) 70%);
}

.text-slogan {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 8);
    line-height: 1;
}

.text-header {
    font-family: RocBold;
    font-size: calc(var(--text-size) * 7);
}

.text-normal {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 6);
    text-align: center;
}

.text-card-header {
    font-family: RocBold;
    font-size: calc(var(--text-size) * 4);
    text-align: left;
    padding-left: var(--text-size);
}

.text-card-normal {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 3.5);
    text-align: left;
    padding-left: var(--text-size);
}

.text-form {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 4);
    text-align: left;
}

.text-form-info {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 3);
    text-align: left;
}

.text-footer {
    font-family: RocRegular;
    font-size: calc(var(--text-size) * 3);
    text-align: left;
    margin-left: var(--text-size);
}

.text-margin {
    margin-bottom: var(--margin-unit);
}

/* Background Colors */
body {
    background-color: #1e1e1e;
}

.fume-background {
    background: rgb(51,51,51);
    background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(36,36,36,1) 100%);
}

/* Logo */
.logo {
    width: calc(var(--text-size) * 5);
    height: calc(var(--text-size) * 5);
}

.logo-footer {
    width: calc(var(--text-size) * 3);
    height: calc(var(--text-size) * 3);
}

/* Buttons */
.gradient-button {
    position: relative;
    background: transparent;
    padding: 10px 40px;
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
    border-radius: 25px;
    overflow: hidden;
    display: inline-block;
}

    .gradient-button span {
        position: relative;
        z-index: 2;
        color: transparent;
        display: inline-block;
    }


    .gradient-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 35px;
        padding: 5px;
        background: linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 1;
    }

    .gradient-button::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        background: transparent;
        border-radius: 20px;
        transition: background 0.3s ease;
        z-index: 0;
    }

    .gradient-button:hover::after {
        background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(36,36,36,1) 100%);
    }

/* Cards */
.card-c {
    position: relative;
    background: transparent;
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
    border-radius: 35px;
    overflow: hidden;
    display: inline-block;
}

    .card-c span {
        position: relative;
        z-index: 2;
        color: transparent;
        display: inline-block;
    }


    .card-c::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 35px;
        padding: 5px;
        background: linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 3;
    }

    .card-c::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        background: transparent;
        border-radius: 20px;
        transition: background 0.3s ease;
        z-index: 0;
    }

    .card-c:hover::after {
        background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(36,36,36,1) 100%);
    }

/* Sections */
.sections {
    width: 100%;
    padding-top: var(--margin-unit);
    padding-bottom: var(--margin-unit);
    /*margin-top: 90px;
  margin-bottom: 90px;
  /*height: 75vh;*/
}

.section-1 {
    margin-top: calc(-1 * var(--margin-unit));
    /*height: 95vh;*/
}

.section-2 {
    padding-top: 0px;
    /*height: 95vh;*/
}

.sec5-img-wrapper {
    display: inline-block;
    ;
    padding: 5px;
    background: linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
    border-radius: 70px 0 70px 0;
}

    .sec5-img-wrapper img {
        display: block;
        border-radius: 65px 0 65px 0; /* 35px - 5px padding */
    }

/* Form */
form {
    width: var(--form-width);
}

.content {
    background-color: #1e1e1e;
}

/* From Input Area */
.custom-input-container {
    position: relative;
    width: 100%;
    margin-top: calc(var(--margin-unit) / 2);
}


.custom-input-field {
    width: 100%;
    padding: 5px;
    background: transparent;
    border-bottom: 2px solid linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
}

    .custom-input-field input {
        border: none;
        outline: none;
        width: 100%;
    }

    .custom-input-field textarea {
        border: none;
        outline: none;
        width: 100%;
        line-height: 1.25;
    }

.custom-input-container::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
}

.custom-input-field:focus-within {
    background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(36,36,36,1) 100%);
}

    .custom-input-field:focus-within + .custom-input-container::after {
        background: linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
    }

footer {
    height: var(--margin-unit);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(calc(1*var(--margin-unit)));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    opacity: 0; /* Initially hidden */
    animation: fadeInUp 1s ease-out forwards;
    animation-play-state: paused; /* Starts paused */
    animation-delay: 0.25s;
}
    /* Class added when element is in viewport */
    .fade-up.visible {
        animation-play-state: running;
    }

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(calc(-1*var(--margin-unit)));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-down {
    opacity: 0; /* Initially hidden */
    animation: fadeInDown 1s ease-out forwards;
    animation-play-state: paused; /* Starts paused */
    animation-delay: 0.25s;
}

.fade-down-f {
    opacity: 0; /* Initially hidden */
    animation: fadeInDown 1s ease-out forwards;
    animation-play-state: paused; /* Starts paused */
    animation-delay: 0.01s;
}
/* Class added when element is in viewport */
.fade-down.visible {
    animation-play-state: running;
}
/* Class added when element is in viewport */
.fade-down-f.visible {
    animation-play-state: running;
}


@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(calc(1*var(--margin-unit)));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-left {
    opacity: 0; /* Initially hidden */
    animation: fadeInLeft 1s ease-out forwards;
    animation-play-state: paused; /* Starts paused */
    animation-delay: 0.25s;
}

    /* Class added when element is in viewport */
    .fade-left.visible {
        animation-play-state: running;
    }

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(calc(-1*var(--margin-unit)));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-right {
    opacity: 0; /* Initially hidden */
    animation: fadeInRight 1s ease-out forwards;
    animation-play-state: paused; /* Starts paused */
    animation-delay: 0.25s;
}
    /* Class added when element is in viewport */
    .fade-right.visible {
        animation-play-state: running;
    }

[class^="text-"] {
    background-image: linear-gradient(45deg, rgba(247,115,23,1) 0%, rgba(239,223,159,1) 100%);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

@font-face {
    font-family: RocRegular;
    src: url("fonts/Roc Regular.otf") format("opentype");
}

@font-face {
    font-family: RocBold;
    src: url("fonts/Roc Bold.otf") format("opentype");
}



@media (max-width: 992px) {
    .section-1 img {
        width: auto; /* Allows the image to extend or crop in the x-direction */
        min-height: 75vh; /* Set your desired fixed height */
        max-width: none;
        object-fit: cover; /* Crops the image to fit the dimensions */
        object-position: center;
    }

    .text-title {
        font-size: calc(var(--text-size) * 13);
    }

    .text-slogan {
        font-size: calc(var(--text-size) * 7);
    }

    .title-group {
        position: absolute;
        top: 20vh;
        left: 10vw;
    }

    .container {
        max-width: 90vw;
    }

    .img-fluid {
        max-height: 70vw;
    }
}

@media (max-width: 768px) {
    .fade-left {
        opacity: 0; /* Initially hidden */
        animation: fadeInUp 1s ease-out forwards;
        animation-play-state: paused; /* Starts paused */
        animation-delay: 0.25s;
    }

    .fade-right {
        opacity: 0; /* Initially hidden */
        animation: fadeInDown 1s ease-out forwards;
        animation-play-state: paused; /* Starts paused */
        animation-delay: 0.25s;
    }
}