/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: #fff0f0;
    --secondary: #FFD76C;
    --gradient: linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
}

section {
    padding-top: 1rem !important;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;

}

* {
    
    margin: 0;
    text-decoration: none;
}

.container-fluid {
    list-style: none;
}


body {
    font-family: "Poppins", sans-serif;
    background-color: white;
}


.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #E01A21 !important;
}

.navbar-nav .nav-link:hover {
    color: #E01A21;
}

/* hero */

.hero-section {
    background-image: url("/images/landing_page/bg-hero.png");
    margin-top: 5rem;
}

.Collaboration {
    background: var(--gradient);
}

.create {
    background-color: #E54545;

}

.tab-create {
    background-color: white;
}

.tab-create:hover {
    background-color: #FFB21D !important;
    border: 1px solid #FFB21D;
    color: white;
}

.aktif2 {
    background-color: #FFB21D !important;
    border: 1px solid #FFB21D !important;
    color: white;
}

.tab-create .title,
.step {
    font-family: "poppins", sans-serif;
}

.aktif {
    background: linear-gradient(to top, #e31111, #ea2c28, #ef3f3b, #f44f4d, #f85e5e) !important;
    border-color: red !important;
    color: white !important;
}

/* animation */
@keyframes fadeLeft {
    0% {
        stroke-dasharray: 0 1500;
        opacity: 1;
        width: 0;
    }

    25%,
    100% {
        stroke-dasharray: 1500 1500;
        opacity: 1;
        width: 100%;
    }
}

/* .benefit-card:hover {
    background: linear-gradient(0.11deg, #E31111 0.17%, #F85E5E 99.91%);
    color: white;
    cursor: pointer;
} */

.benefit-card:active {
    background: linear-gradient(0.11deg, #E31111 0.17%, #F85E5E 99.91%);
    color: white;
    cursor: pointer;
}

#bg-row {
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.btn-register {
    text-align: center;
}


/* FAQ */
.faq .title h2 {
    font-size: 32px;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
}


/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: #F9FAFB !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z'/%3E%3C/svg%3E");
    transform: scale(.7) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M19 12.998H5v-2h14z'/%3E%3C/svg%3E");
}

.contact {
    background-image: url(/images/landing_page/bg-contact.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.footer li a {
    list-style: none;
    text-decoration: none;
    color: #3E3E3E;
}


/* Desktop */
@media (min-width: 1400px) {
    .hero-section {
        margin-top: 5rem;
        margin-bottom: 15rem;
    }

    .hero-section .text-hero,
    .text-hero2 {
        font-size: 30px;
        font-weight: 500;
        /* line-height: 65px; */
    }

    .text-hero3 {
        font-size: 18px;
        font-family: "Poppins", sans-serif;
    }

    .hero-section .curved-line span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 30px;
    }

    .img-hero {
        position: absolute;
        top: 15%;
        right: 0;
    }

    /* Animation */
    .curved-line::before {
        content: "";
        position: absolute;
        top: 35%;
        left: 12%;
        width: 100%;
        max-width: 500px;
        height: 20px;
        border-top: 4px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .curved-line2::before {
        content: "";
        position: absolute;
        top: 98%;
        left: 50%;
        width: 100%;
        max-width: 350px;
        height: 20px;
        border-top: 4px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* End Animation */

    .Collaboration {
        width: fit-content;
    }

    .title-collab {
        font-size: 36px;
        font-weight: 700;
        color: var(--secondary);
    }

    .heading-collab {
        font-size: 40px;
        font-weight: 700;
    }

    .text-collab {
        font-size: 18px;
        font-weight: 400;
    }

    .benefit .heading {
        font-size: 18px;
        font-weight: 500;
        color: var(--secondary);
    }

    .img-decor {
        position: absolute;
        left: -290px;
        top: -220px;
        z-index: -1;
    }

    .benefit .sub-heading {
        font-size: 48px;
        font-weight: 700;
        width: 100%;
        max-width: 22em;
    }

    .benefit .sub-heading span {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .benefit-img {
        box-shadow: 0px 16px 40px 0px rgba(144, 112, 112, 0.2);
    }

    .benefit-card {
        color: black;
        height: 165px;
        border: 1px solid rgba(204, 34, 204, 0.1333);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .benefit-card p {
        font-size: 18px;
        font-weight: 700;
    }

    .carousel-title h5 {
        font-size: 42px;
        font-weight: 700;
    }

    .review .heading {
        font-weight: 700;
        color: #3E3E3E;
    }

    .card-review {
        height: 330px;
    }

    .card-review .reviewer {
        height: 150px;
    }

    .card-review .user {
        font-family: "inter", sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #061C3D;
    }

    .card-review .job {
        font-family: "inter", sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: #42526B;
    }

    .card-review .comment {
        font-family: "inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #061C3D;
        ;
    }

    .card-review .review-logo {
        width: 100%;
        max-width: 100px;
    }

    .create .heading {
        font-size: 48px;
        font-weight: 700;
    }

    .tab-create .title {
        font-size: 22px;
        font-weight: 700;
    }

    .tab-create .step {
        font-size: 15px;
        font-weight: 400;
    }

    .img-create {
        position: absolute;
        right: 0;
        transform: translateY(10%);
    }

    .accordion-button {
        height: 80px;
    }


    .contact {
        background-image: url(/images/landing_page/bg-contact.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }


}

/* Laptop */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero-section {
        margin-top: 5rem;
        margin-bottom: 12rem;
    }

    .hero-section .text-hero {
        font-size: 30px;
        font-weight: 500;
        line-height: 65px;
    }

    .hero-section .text-hero span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
    }

    .img-hero {
        position: absolute;
        top: 100px;
        right: 0;
    }

    .img-decor {
        position: absolute;
        left: -290px;
        top: -240px;
        z-index: -1;
    }

    .hero-section .text-hero,
    .text-hero2 {
        font-size: 30px;
        font-weight: 500;
        /* line-height: 65px; */
    }

    .text-hero3 {
        font-size: 18px;
        font-family: "Poppins", sans-serif;
    }


    .hero-section .curved-line span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 28px;
    }

    /* Animation */
    .curved-line::before {
        content: "";
        position: absolute;
        top: 35%;
        left: 12%;
        width: 100%;
        max-width: 30rem;
        height: 20px;
        border-top: 4px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* End Animation */


    .title-collab {
        font-size: 36px;
        font-weight: 700;
        color: var(--secondary);
    }

    .heading-collab {
        font-size: 40px;
        font-weight: 700;
    }

    .text-collab {
        font-size: 18px;
        font-weight: 400;
    }

    .benefit .heading {
        font-size: 18px;
        font-weight: 500;
        color: var(--secondary);
    }

    .benefit .sub-heading {
        font-size: 48px;
        font-weight: 700;
        width: 100%;
        max-width: 22em;
    }

    .benefit .sub-heading span {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .benefit-img {
        box-shadow: 0px 16px 40px 0px rgba(144, 112, 112, 0.2);
    }

    .benefit-card {
        color: black;
        height: 165px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid rgba(204, 34, 204, 0.1333);
    }

    .benefit-card p {
        font-size: 16px;
        font-weight: 700;
    }

    .review .heading {
        font-size: 42px;
        font-weight: 700;
        color: #3E3E3E;
    }

    .card-review {
        height: 300px;
    }

    .card-review .reviewer {
        height: 150px;
    }

    .card-review .user {
        font-size: 11px;
        font-weight: 500;
        color: #061C3D;
    }

    .card-review .job {
        font-size: 10px;
        font-weight: 400;
        color: #42526B;
    }

    .card-review .comment {
        font-size: 12px;
        font-weight: 400;
        color: #061C3D;
        ;
    }

    .card-review .review-logo {
        width: 100%;
        max-width: 50px;
    }

    .create {
        background-image: url(/images/landing_page/bg-create.svg);
    }

    .create .heading {
        font-size: 48px;
        font-weight: 700;
    }

    .tab-create .title {
        font-size: 18px;
        font-weight: 700;
    }

    .tab-create .step {
        font-size: 15px;
        font-weight: 400;
    }

    .img-create {
        position: absolute;
        right: 0;
        transform: translateY(10%);
    }

    .accordion-button {
        height: 80px;
    }


    .contact {
        background-image: url(/images/landing_page/bg-contact.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-nav {
        font-size: 16px;
    }

    .hero-section {
        margin-top: 5rem;
        margin-bottom: 15rem;
    }

    .hero-section .text-hero {
        font-size: 22px;
        font-weight: 500;
        line-height: 65px;
    }

    .hero-section .text-hero span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
    }

    .img-hero {
        position: absolute;
        top: 100px;
        right: 0;
        max-width: 430px;
    }

    .img-decor {
        position: absolute;
        left: -290px;
        top: -240px;
        z-index: -1;
    }

    .hero-section .text-hero,
    .text-hero2 {
        font-size: 22px;
        font-weight: 500;
        line-height: 36px;
    }

    .text-hero3 {
        font-size: 18px;
        font-family: "Poppins", sans-serif;
    }


    .hero-section .curved-line span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 22px;
    }

    /* Animation */
    .curved-line::before {
        content: "";
        position: absolute;
        top: 29%;
        left: 7%;
        width: 100%;
        max-width: 23rem;
        height: 20px;
        border-top: 4px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* End Animation */

    .Collaboration {
        margin-top: -10rem;
        max-width: 50rem;
    }

    .title-collab {
        font-size: 36px;
        font-weight: 700;
        color: var(--secondary);
    }

    .heading-collab {
        font-size: 40px;
        font-weight: 700;
    }

    .text-collab {
        font-size: 18px;
        font-weight: 400;
    }

    .benefit .heading {
        font-size: 18px;
        font-weight: 500;
        color: var(--secondary);
    }

    .benefit .sub-heading {
        font-size: 40px;
        font-weight: 700;
        width: 100%;
        max-width: 22em;
    }

    .benefit .sub-heading span {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .benefit-img {
        box-shadow: 0px 16px 40px 0px rgba(144, 112, 112, 0.2);
    }

    .benefit-card {
        color: black;
        height: 165px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid rgba(204, 34, 204, 0.1333);
    }

    .benefit-card p {
        font-size: 16px;
        font-weight: 700;
    }

    .review .heading {
        font-size: 42px;
        font-weight: 700;
        color: #3E3E3E;
    }

    .card-review {
        height: 300px;
    }

    .card-review .reviewer {
        height: 150px;
    }

    .card-review .user {
        font-size: 11px;
        font-weight: 500;
        color: #061C3D;
    }

    .card-review .job {
        font-size: 10px;
        font-weight: 400;
        color: #42526B;
    }

    .card-review .comment {
        font-size: 12px;
        font-weight: 400;
        color: #061C3D;
        ;
    }

    .card-review .review-logo {
        width: 100%;
        max-width: 50px;
    }

    .create {
        background-image: url(/images/landing_page/bg-create.svg);
    }

    .create .heading {
        font-size: 48px;
        font-weight: 700;
    }

    .tab-create .title {
        font-size: 14px;
        font-weight: 700;
    }

    .tab-create .step {
        font-size: 15px;
        font-weight: 400;
    }

    .img-create {
        position: absolute;
        right: 0;
        transform: translateY(25%);
        max-width: 30rem;
    }

    .accordion-button {
        height: 80px;
    }

    .contact {
        background-image: url(/images/landing_page/bg-contact.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

}

/* Tablet*/
@media (min-width: 768px) and (max-width: 991.98px) {

    .navbar-brand {
        max-width: 90px;
    }

    .hero-section {
        margin-top: 7rem;
    }

    .hero-section .text-hero,
    .text-hero2 {
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        /* line-height: 65px; */
    }

    .text-hero3 {
        font-size: 16px;
        font-family: "Poppins", sans-serif;
        text-align: center;
    }

    .hero-section .curved-line span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 24px;
    }


    /* Animation */
    .curved-line::before {
        content: "";
        position: absolute;
        top: 82px;
        left: 25%;
        width: 100%;
        max-width: 370px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* End Animation */

    .img-hero {
        width: 100%;
        max-width: 40rem;
        margin-top: 3rem;
    }

    .btn-hero {
        text-align: center;
    }

    .btn-hero .btn {
        font-size: 16px;
        font-weight: 700;
    }

    .title-collab {
        font-size: 16px;
        font-weight: 700;
        color: var(--secondary);
    }

    .heading-collab {
        font-size: 36px;
        font-weight: 700;
    }

    .text-collab {
        font-size: 16px;
        font-weight: 400;
    }

    .benefit .heading {
        font-size: 12px;
        font-weight: 500;
        color: var(--secondary);
    }

    .benefit .sub-heading {
        font-size: 22px;
        font-weight: 700;
        width: 100%;
        max-width: 22em;
    }

    .benefit .sub-heading span {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .benefit-card {
        color: black;
        height: 130px;
        width: 100%;
        max-width: 17rem;
        border: 1px solid rgba(204, 34, 204, 0.1333);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .benefit-card p {
        font-size: 11px;
        font-weight: 700;
    }

    .curved-line3::before {
        content: "";
        position: absolute;
        top: 98%;
        left: 25%;
        width: 100%;
        max-width: 180px;
        height: 20px;
        border-top: 2px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .benefit-card p {
        font-size: 16px;
        font-weight: 700;
    }

    /* Modal-benefit */
    .modal-body .modal-title {
        font-size: 14px;
        font-weight: 600;
        color: #FD9226;
    }

    .modal-body .sub-heading {
        font-size: 22px;
        font-weight: 700;
        color: #121127;
        line-height: 36px;
    }

    .content p {
        font-size: 16px;
        font-weight: 400;
        text-align: justify;
    }

    .curved-line4::before {
        content: "";
        position: absolute;
        top: 18%;
        left: 25%;
        width: 100%;
        max-width: 160px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .curved-line5::before {
        content: "";
        position: absolute;
        top: 16%;
        left: 25%;
        width: 100%;
        max-width: 160px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* tabs-pills */
    .nav-pills {
        font-weight: 700;
    }

    .tab-pill {
        background: url(/images/landing_page/bg-carousel-1m.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        background-color: white;
        color: #E01A21;
    }

    .pills-scroll {
        overflow: scroll;
    }

    .btn-pill {
        background: rgba(255, 255, 255, 0.5);
        color: white;
    }

    .btn-pill:hover {
        background: white;
        color: #E01A21;
    }

    .tab-create {
        text-align: center;
        padding: 5px 32px;
        height: 90px;
    }

    .tab-create .step {
        font-size: 16px;
        font-weight: 400;
    }

    .tab-create .title {
        font-size: 18px;
        font-weight: 700;
    }

    .review .heading {
        font-size: 22px;
        font-weight: 700;
        color: #3E3E3E;
    }

    .card-review {
        height: 330px;
    }

    .owl-carousel .owl-item img {
        display: block;
        width: 100%;
        max-width: 90px;
    }

    .owl-theme .owl-nav {
        display: none;
    }

    .owl-theme .owl-dots .owl-dot span {
        background: #FFD76C;
    }

    .accordion-button {
        height: 90px;
    }

}


/* Mobile Landscape */
@media (min-width: 576px) and (max-width: 767.98px) {

    .navbar-brand {
        max-width: 90px;
    }

    .hero-section {
        margin-top: 8rem;
    }

    .hero-section .text-hero,
    .text-hero2 {
        font-size: 24px;
        font-weight: 600;
        text-align: center;
        /* line-height: 65px; */
    }

    .text-hero3 {
        font-size: 16px;
        font-family: "Poppins", sans-serif;
        text-align: center;
    }

    .hero-section .curved-line span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 24px;
    }


    /* Animation */
    .curved-line::before {
        content: "";
        position: absolute;
        top: 82px;
        left: 25%;
        width: 100%;
        max-width: 370px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* End Animation */

    .img-hero {
        width: 100%;
        max-width: 40rem;
        margin-top: 3rem;
    }

    .btn-hero {
        text-align: center;
    }

    .btn-hero .btn {
        font-size: 16px;
        font-weight: 700;
    }

    .title-collab {
        font-size: 16px;
        font-weight: 700;
        color: var(--secondary);
    }

    .heading-collab {
        font-size: 36px;
        font-weight: 700;
    }

    .text-collab {
        font-size: 16px;
        font-weight: 400;
    }

    .benefit .heading {
        font-size: 12px;
        font-weight: 500;
        color: var(--secondary);
    }

    .benefit .sub-heading {
        font-size: 22px;
        font-weight: 700;
        width: 100%;
        max-width: 22em;
    }

    .benefit .sub-heading span {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .benefit-card {
        color: black;
        height: 130px;
        width: 100%;
        max-width: 17rem;
        border: 1px solid rgba(204, 34, 204, 0.1333);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .benefit-card p {
        font-size: 11px;
        font-weight: 700;
    }

    .curved-line3::before {
        content: "";
        position: absolute;
        top: 98%;
        left: 33%;
        width: 100%;
        max-width: 180px;
        height: 20px;
        border-top: 2px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .benefit-card p {
        font-size: 16px;
        font-weight: 700;
    }

    /* Modal-benefit */
    .modal-body .modal-title {
        font-size: 14px;
        font-weight: 600;
        color: #FD9226;
    }

    .modal-body .sub-heading {
        font-size: 22px;
        font-weight: 700;
        color: #121127;
        line-height: 36px;
    }

    .content p {
        font-size: 16px;
        font-weight: 400;
        text-align: justify;
    }

    .curved-line4::before {
        content: "";
        position: absolute;
        top: 21%;
        left: 25%;
        width: 100%;
        max-width: 160px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .curved-line5::before {
        content: "";
        position: absolute;
        top: 16%;
        left: 25%;
        width: 100%;
        max-width: 160px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* tabs-pills */
    .nav-pills {
        font-weight: 700;
    }

    .tab-pill {
        background: url(/images/landing_page/bg-carousel-1m.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        background-color: white;
        color: #E01A21;
    }

    .pills-scroll {
        overflow: scroll;
    }

    .btn-pill {
        background: rgba(255, 255, 255, 0.5);
        color: white;
    }

    .btn-pill:hover {
        background: white;
        color: #E01A21;
    }

    .tab-create {
        text-align: center;
        padding: 5px 32px;
        height: 90px;
    }

    .tab-create .step {
        font-size: 16px;
        font-weight: 400;
    }

    .tab-create .title {
        font-size: 16px;
        font-weight: 700;
    }

    .review .heading {
        font-size: 22px;
        font-weight: 700;
        color: #3E3E3E;
    }

    .card-review {
        height: 450px;
    }

    .owl-carousel .owl-item img {
        display: block;
        width: 100%;
        max-width: 90px;
    }

    .owl-theme .owl-nav {
        display: none;
    }

    .owl-theme .owl-dots .owl-dot span {
        background: #FFD76C;
    }

}



/* Mobile */
@media (max-width: 575.98px) {

    .container-fluid {
        margin-top: 6rem;
    }

    .navbar-brand {
        max-width: 90px;
    }

    .hero-section .text-hero,
    .text-hero2 {
        font-size: 17px;
        font-weight: 600;
        text-align: center;
        /* line-height: 65px; */
    }

    .text-hero3 {
        font-size: 12px;
        font-family: "Poppins", sans-serif;
        text-align: center;
    }

    .hero-section .curved-line span {
        background: -webkit-linear-gradient(0deg, #E31111 0.17%, #F85E5E 99.91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 17px;
    }


    /* Animation */
    .curved-line::before {
        content: "";
        position: absolute;
        top: 65px;
        left: 10%;
        width: 100%;
        max-width: 300px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* End Animation */

    .img-hero {
        width: 100%;
    }

    .btn-hero {
        text-align: center;
    }

    .btn-hero .btn {
        font-size: 16px;
        font-weight: 700;
    }

    .title-collab {
        font-size: 16px;
        font-weight: 700;
        color: var(--secondary);
    }

    .heading-collab {
        font-size: 36px;
        font-weight: 700;
    }

    .text-collab {
        font-size: 16px;
        font-weight: 400;
    }

    .benefit .heading {
        font-size: 12px;
        font-weight: 500;
        color: var(--secondary);
    }

    .benefit .sub-heading {
        font-size: 22px;
        font-weight: 700;
        width: 100%;
        max-width: 22em;
    }

    .benefit .sub-heading span {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .benefit-card {
        color: black;
        height: 130px;
        width: 145px;
        border: 1px solid rgba(204, 34, 204, 0.1333);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .benefit-card p {
        font-size: 11px;
        font-weight: 700;
    }

    .curved-line3::before {
        content: "";
        position: absolute;
        top: 98%;
        left: 25%;
        width: 100%;
        max-width: 180px;
        height: 20px;
        border-top: 2px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .benefit-card p {
        font-size: 11px;
        font-weight: 700;
    }

    /* Modal-benefit */
    .modal-body .modal-title {
        font-size: 14px;
        font-weight: 600;
        color: #FD9226;
    }

    .modal-body .sub-heading {
        font-size: 22px;
        font-weight: 700;
        color: #121127;
        line-height: 36px;
    }

    .content p {
        font-size: 16px;
        font-weight: 400;
        text-align: justify;
    }

    .curved-line4::before {
        content: "";
        position: absolute;
        top: 20%;
        left: 32%;
        width: 100%;
        max-width: 160px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    .curved-line5::before {
        content: "";
        position: absolute;
        top: 16%;
        left: 32%;
        width: 100%;
        max-width: 160px;
        height: 20px;
        border-top: 3px solid #dd8500;
        border-radius: 75% 45% 0 0;
        animation: fadeLeft 3.5s forwards infinite;
    }

    /* tabs-pills */
    .nav-pills {
        font-weight: 700;
    }

    .tab-pill {
        background: url(/images/landing_page/bg-carousel-1m.svg);
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        background-color: white;
        color: #E01A21;
    }

    .pills-scroll {
        overflow: scroll;
    }

    .btn-pill {
        background: rgba(255, 255, 255, 0.5);
        color: white;
    }

    .btn-pill:hover {
        background: white;
        color: #E01A21;
    }

    .tab-create {
        text-align: center;
        padding: 5px 32px;
        height: 90px;
    }

    .tab-create .step {
        font-size: 14px;
        font-weight: 700;
    }

    .tab-create .title {
        font-size: 12px;
        font-weight: 400;
    }

    .review .heading {
        font-size: 22px;
        font-weight: 700;
        color: #3E3E3E;
    }

    .card-review {
        height: 330px;
    }

    .owl-carousel .owl-item img {
        display: block;
        width: 100%;
        max-width: 90px;
    }

    .owl-theme .owl-nav {
        display: none;
    }

    .owl-theme .owl-dots .owl-dot span {
        background: #FFD76C;
    }

    .accordion-button {
        height: 80px;
    }

}