:root {
    --black: #000000;

    --white: #ffffff;

    --blue: #0081FF;
    --cyan: #14FCEF;
    --green: #0EB042;
    --orange: #FF981A;
    --purple: #9140F0;
    --red: #FB252C;
    --yellow: #ECFB07;
    --brand-orange: #FE5000; 

    --container-padding: 1.5rem;
    --container-gutter: 1.5rem;

    --font-weight-bold: 800;
    --font-weight-semi-bold: 600;
    --font-weight-medium: 400;
    --font-weight-regular: 200;
    --font-weight-normal: 500;

    --line-height-title: 100%;
    --line-height-text: 150%;

    --letter-spacing: 0.02rem;

    --heading-1: 5rem;
    --heading-2: 4rem;
    --heading-3: 3rem;
    --heading-4: 2.25rem;
    --heading-5: 1.5rem;
    --text-28: 1.75rem;
    --text-24: 1.5rem;
    --text-20: 1.25rem;
    --text-18: 1.125rem;
    --text-16: 1rem;
    --text-14: 0.875rem;
    --text-12: 0.75rem;

    --spacing-128: 8rem;
    --spacing-80: 5rem;
    --spacing-64: 4rem;
    --spacing-40: 2.5rem;
    --spacing-28: 1.75rem;
    --spacing-24: 1.5rem;
    --spacing-18: 1.125rem;
    --spacing-16: 1rem;
    --spacing-12: 0.75rem;
    --spacing-8: 0.5rem;

    --border-radius: 6249.9375rem;
    --border-radius-24: 1.5rem;
    --border-radius-16: 1rem;

}

html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', sans-serif;
}

.hero-section {
    background-image: url('../assets/img/headliners-assets/bg-header.webp');
    @media (max-width: 575.98px) {
        background-image: url('../assets/img/headliners-assets/bg-header-mobile.webp');
    }
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    overflow: visible;
    color: var(--white);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    padding: 1.5rem 3rem;
}

.logo-container .logo {
    width: 5.4rem;
}

.about-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1.25rem;
    gap: 0.625rem;
}

.about-link:hover {
    color: var(--white);
}

.content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0rem 3rem;
}

.headline {
    color: var(--white);
    font-family: 'Bolota';
    font-size: 6rem;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: .25rem;
    margin: 0;
    text-transform: uppercase;
}

.i-orange{
    font-style: italic;
    color: var(--brand-orange);
}

.title-headliners {
    width: 65%;
    margin: auto;
    text-align: center;
}

.image-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px;
    width: 20.25rem;
    height: auto;
    margin-right: var(--spacing-64);
}

/* powered section */
.powered-section {
    color: var(--white);
    background-color: #000000;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.text-upcoming-events {
    color: var(--white);
    font-family: 'Bolota';
    font-size: 2.25rem;
    line-height: 100%;
    text-transform: uppercase;
    /* margin-bottom: 3rem; */
    font-family: 'Bolota';
    letter-spacing: .25rem;
}

/* .new-centered{
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/headliners-assets/services.webp');
    @media (max-width: 575.98px) {
        background-image: url('../assets/img/headliners-assets/services-mobile.webp');
        height: 100vh;
    }
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
} */

.centered-content{
    width: 41.25rem;
}

.btn-ticket {
    background-color: var(--brand-orange);
    width: 13.25rem;
    height: 3rem;
    padding: 0.625rem 1.75rem;
    border-radius: 749.92506rem;
    text-decoration: none;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: none;
    font-size: 1.05rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-more{
    background-color: transparent;
    width: 13.25rem;
    height: 3rem;
    padding: 0.625rem 1.75rem;
    border-radius: 749.92506rem;
    text-decoration: none;
    color: var(--white);
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    font-size: 1.05rem;
    font-weight: 500;
}

.event-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
}

.btn-more:hover, .btn-ticket:hover{
    color: var(--white);
}

.chaos-svg {
    width: 17.97081rem;
    height: auto;
    margin-bottom: 1.5rem;
}

.powered-by{
    margin-bottom: 1.5rem;
    margin-right: 0.875rem;
}

.powered-by-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.powered-by-text {
    margin: 0;
    font-size: 1rem;
}

.fever-logo {
    height: 20px;
}

.event-date{
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--white);
    font-weight: var(--font-weight-normal);
}

.highlighted{
    font-size: 1rem;
    color: var(--brand-orange);
    font-weight: var(--font-weight-bold);
}

.event-description{
    margin-bottom: 2.5rem;
    font-size: 1rem;
    color: var(--white);
    font-weight: var(--font-weight-normal);
}

.fever-svg {
    width: 3.75281rem;
    height: auto;
}
/* powered section */

/* footer section */
.footer-section {
    padding: 4rem 3rem;
    height: auto;
    color: var(--white);
    background-color: #000000;
    position: relative;
}

.text-touch {
    font-family: Bolota;
    font-size: 1.5rem;
    color: var(--white);
    border-bottom: 1px solid var(--brand-orange);
    display: inline-block;
    margin-bottom: 3rem;
}

.fw-700 {
    font-weight: 700;
}

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

.headliners-bottom{
    width: 12.625rem;
    height: auto;
}

.footer-bottom {
    text-align: left;
    font-size: 0.875rem;
    color: var(--brand-orange);
    padding-top: 1rem;
    margin: 0;
}

.footer-bottom a {
    color: var(--brand-orange);
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.copyright-logo{
    width: 50%;
}

.find-us{
    width: 25%;
}

.social-media{
    width: 25%;
}

.text-red{
    color: var(--red) !important;
}

.text-find-us{
    font-size: 1.125rem;
    color: var(--brand-orange);
}

.text-socialize{
    font-size: 1.125rem;
    color: var(--brand-orange);
}

.social-icons {
    display: flex;
    gap: 0.7rem; /* Memberikan jarak antar ikon media sosial */
}

.address{
    font-size: 1rem;
    color: var(--white);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--white);
    display: inline-block;
}

.address a{
    color: var(--white);
    text-decoration: none;
}
/* footer section */

/* about hero section */
.hero-about-section {
    background-image: url('../assets/img/headliners-assets/bg-about-us.webp');
    @media (max-width: 575.98px) {
        background-image: url('../assets/img/headliners-assets/bg-about-us-mobile.webp');
    }
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    color: var(--white);
    /* z-index: -1; */
}

.bg-orange{
    background-color: var(--brand-orange);
    /* z-index: 2; */
}

.title-about-headliners{
    width: 80%;
    margin: auto;
    text-align: center;
}

.sub-headline{
    color: var(--white);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 100%;
    letter-spacing: 0,25rem;
    margin: 2.5rem 0 0 0;
}

.sub-headline-2{
    color: var(--white);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 100%;
    letter-spacing: 0;
    margin: 2.5rem 0 0 0;
}
/* about hero section */

/* about service section */
.service-section {
    width: 100%;
    background-color: var(--brand-orange);
    /* border: 1px solid var(--white); */
    padding: 8.4375rem 3rem;
}

.about-us{
    text-align: center;
    width: 90%;
    margin: auto;
}

.text-we-are{
    color: var(--white);
    font-family: Inter;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    margin: 0 0 4rem 0;
}

.text-quote{
    color: var(--white);
    font-family: Inter;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    margin: 0;
}

.our-service{
    padding: 10rem 0 0 0;
}

.text-our-service{
    border-bottom: 1px solid var(--white);
    font-family: Bolota;
    padding: 0rem 0rem 4rem 0rem;
    margin: 0;
    font-size: 2.25rem;
    color: var(--white);
}

.text-child-our-service{
    border-bottom: 1px solid var(--white);
    padding: 2.5rem 0rem;
    margin: 0;
    font-size: 1.5rem;
    color: var(--white);
}

.text-18{
    font-size: 1.25rem !important;
}

.text-parent-ecosystem{
    font-family: Bolota;
    border-bottom: 1px solid rgba(10, 10, 10, 0.80);
    padding: 0rem 0rem 4rem 0rem;
    margin: 0;
    font-size: 2.25rem;
    color: var(--white);
}

.text-ecosystem{
    border-bottom: 1px solid rgba(10, 10, 10, 0.80);
    padding: 2.5rem 0rem;
    margin: 0;
    display: flex;
    color: var(--white);
}

.text-ecosystem p{
    margin: 0;
}

.text-child-ecosystem-parent{
    width: 45%;
    font-size: 1.125rem;
    font-weight: 700;
}

.text-child-ecosystem-child{
    width: 55%;
    font-size: 1rem;
    font-weight: 400;
}

.our-ecosystem{
    background-color: #E04700;
    padding: 4rem 3rem;
}
/* about service section */

@media (max-width: 575.98px) {
    .headline{
        font-size: 2.5rem;
        font-weight: var(--font-weight-bold);
        margin: 0;
    }

    .logo-container .logo {
        width: 4.32rem;
    }

    .about-link {
        color: var(--white);
        text-decoration: none;
        font-size: 1rem;
        gap: 0.625rem;
    }

    .header {
        padding: 1.5rem 1rem;
    }

    .content {
        padding: 0rem 2rem;
    }

    .title-headliners {
        width: 100%;
        margin: auto;
        text-align: center;
    }

    .powered-section {
        padding: 4rem 1rem;
    }

    .text-upcoming-events {
        font-size: 1.5rem;
        font-weight: 800;
    }

    .event-description{
        width: 75%;
        margin: 0 auto 2.5rem auto;
    }

    .chaos-svg{
        width: 13.47813rem;
    }
    
    .powered-by-container {
        margin-bottom: 1.5rem;
    }
    
    .powered-by-text {
        font-size: 0.875rem;
    }
    
    .event-date{
        margin-bottom: 1.5rem;
        font-size: 0.875rem;
        color: var(--white);
        font-weight: var(--font-weight-normal);
    }
    
    .highlighted{
        font-size: 0.875rem;
    }
    
    .event-description{
        margin-bottom: 2.5rem;
        font-size: 0.875rem;
    }

    .btn-ticket{
        width: 8.83331rem;
        height: 2rem;
        padding: 0.375rem 1.125rem;
        font-size: 0.75rem;
        gap: 0rem;
        font-weight: 500;
    }
    
    .btn-more{
        width: 8.83331rem;
        height: 2rem;
        padding: 0.375rem 1.125rem;
        border: 1px solid #fff;
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    .copyright-logo {
        width: 100%;
    }
    
    .find-us {
        width: 100%;
    }

    .social-media {
        width: 100%;
    }
    
    .social-icons {
        display: flex;
        gap: 1rem;
    }

    .text-touch {
        margin-bottom: 4rem;
    }

    .headliners-bottom {
        margin-bottom: 1.5rem;
    }

    .footer-bottom p{
        margin-bottom: 2.5rem;
    }

    .text-find-us{
        margin-bottom: 2.0625rem;
    }

    .text-socialize{
        margin-bottom: 2.0625rem;
    }

    .address{
        margin: 0;
    }

    .find-us{
        margin-bottom: 2.5rem;
    }

    .footer-section {
        padding: 4rem 1.5rem;
    }

    .sub-headline{
        font-size: 1.75rem;
        margin: 1.5rem 0 0 0;
    }

    .sub-headline-2{
        font-size: 1rem;
        margin: 1.5rem 0 0 0;
    }

    .service-section {
        padding: 4rem 1rem 8rem 1rem;
    }

    .text-we-are{
        font-size: 1rem;
        font-weight: 500;
        margin: 0 0 3rem 0;
    }
    
    .text-quote{
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
    }

    .our-service{
        padding: 5rem 0 0 0;
    }

    .text-our-service{
        padding: 0rem 0rem 2.5rem 0rem;
        font-size: 1.5rem;
    }
    
    .text-child-our-service{
        padding: 1.5rem 0rem;
        font-size: 1.125rem;
    }
    
    .text-parent-ecosystem{
        padding: 0rem 0rem 2.5rem 0rem;
        font-size: 2rem;
    }
    
    .text-ecosystem{
        border-bottom: 1px solid #000;
        margin: 0;
        display: flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1.5rem 0rem;
    }
    
    .text-child-ecosystem-parent{
        width: 100%;
        font-size: 1rem;
        margin-bottom: 1.5rem !important;
    }
    
    .text-child-ecosystem-child{
        width: 100%;
        font-size: 0.875rem;
    }

    .our-ecosystem{
        padding: 4rem 1rem;
    }
}


/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 576px) and (max-width: 820px) {
    .headline{
        font-size: 4rem;
        font-weight: var(--font-weight-bold);
        margin: 0;
    }

    .title-headliners {
        width: 100%;
        margin: auto;
        text-align: center;
    }

    .header {
        padding: 1.5rem 2rem;
    }

    .powered-section {
        padding: 4rem 1.5rem;
    }

    .text-upcoming-events {
        font-size: 2rem;
        font-weight: 800;
    }

    .event-description{
        width: 95%;
        margin: 0 auto 2.5rem auto;
    }
    
    .copyright-logo {
        width: 100%;
    }
    
    .find-us,
    .social-media {
        width: 50%;
    }
    
    .social-icons {
        display: flex;
        gap: 1rem;
    }

    .text-touch {
        margin-bottom: 4rem;
    }

    .headliners-bottom {
        margin-bottom: 1.5rem;
    }

    .footer-bottom p{
        margin-bottom: 2.5rem;
    }

    .text-find-us{
        margin-bottom: 2.0625rem;
    }

    .text-socialize{
        margin-bottom: 2.0625rem;
    }

    .footer-section {
        padding: 4rem 1.5rem;
    }

    .sub-headline{
        font-size: 2rem;
        margin: 1.5rem 0 0 0;
    }

    .service-section {
        padding: 4rem 1.5rem 8rem 1.5rem;
    }

    .text-we-are{
        font-size: 1rem;
        font-weight: 500;
        margin: 0 0 3rem 0;
    }
    
    .text-quote{
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
    }

    .our-service{
        padding: 5rem 0 0 0;
    }

    .text-our-service{
        padding: 0rem 0rem 2.75rem 0rem;
        font-size: 1.75rem;
    }
    
    .text-child-our-service{
        padding: 1.5rem 0rem;
        font-size: 1.25rem;
    }
    
    .text-parent-ecosystem{
        padding: 0rem 0rem 2.75rem 0rem;
        font-size: 2.15rem;
    }
    
    .text-ecosystem{
        border-bottom: 1px solid #000;
        margin: 0;
        display: flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1.5rem 0rem;
    }
    
    .text-child-ecosystem-parent{
        width: 100%;
        font-size: 1rem;
        margin-bottom: 1.5rem !important;
    }
    
    .text-child-ecosystem-child{
        width: 100%;
        font-size: 0.875rem;
    }

    .our-ecosystem{
        padding: 4rem 1rem;
    }
}