@import url(./system.css?=1.0.4);
@import url(./layouts.css?=1.0.4);

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: poppins-bold; color: var(--color-text); line-height: 1.6; overflow-x: hidden; padding-bottom: 0; }
h1 { font-size: var(--fsize-8); color:black; font-weight: 600; font-family: poppins-bold;}
h2 { font-size: var(--fsize-7); color:black; font-weight: 600; font-family: poppins-bold;}
h3 { font-size: var(--fsize-6); color:black; font-weight: 600; font-family: poppins-medium;}
h4 { font-size: var(--fsize-5); color:black; font-weight: 500; font-family: poppins-medium;}
p { font-size: 1.2rem; line-height: 1.6; font-family: poppins-regular;}

html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg2); }
::-webkit-scrollbar-thumb { background: var(--color-primary); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

@font-face {
font-family: poppins-bold;
src: url(../fonts/Poppins-Bold.ttf);
}
@font-face {
font-family: poppins-medium;
src: url(../fonts/Poppins-Medium.ttf);
} 
@font-face {
font-family: poppins-regular;
src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
font-family: poppins-light;
src: url(../fonts/Poppins-light.ttf);
}

section { padding: 10rem 2rem }
@media (max-width:968px){
    section {padding: 5rem 0.5rem;}
}

.section-title-dark { text-align: center; color: white; text-transform: uppercase; font-weight: bold; }
.section-title-light { text-align: center; color: var(--color-primary); text-transform: uppercase; font-weight: bold; }

.btn { padding: var(--space-4) var(--space-8); border: none; border-radius: 0; font-size: var(--fsize-4); cursor: pointer; transition: all 0.3s ease; font-weight: 600; text-decoration: none; display: inline-block; text-transform: uppercase; letter-spacing: 1px; }
.btn-primary { background: var(--color-primary); color: white; border: 2px solid var(--color-primary); }
.btn-primary:hover { background: white; color: var(--color-primary); border: 2px solid white; }
.btn-outline { background: transparent; border: 2px solid var(--color-dark); color: var(--color-dark); }
.btn-outline:hover { background: var(--color-primary); color: var(--color-dark); }
.btn-primary-solid { background: var(--color-primary); color: white; border: 2px solid var(--color-primary); }



.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

.info-i hr {
    width: 100px;
    height: 0.3rem;
    background-color: var(--color-primary);
    border: none;
    margin-bottom: 2rem;
    border-radius: 2px;
}

@media (max-width:991px){
    .info-i hr {
    width: 100px;
    height: 0.3rem;
    background-color: var(--color-primary);
    border: none;
    margin: 0 auto;
    margin-bottom: 2rem;
    border-radius: 2px;
}

.text-list-text hr{
    width: 100px;
    height: 0.3rem;
    background-color: var(--color-primary);
    border: none;
    margin:0 auto;
}
}

.text-list-text hr{
    width: 100px;
    height: 0.3rem;
    background-color: var(--color-primary);
    border: none;
    margin:0 auto;
}

.text-list-text {
    text-align: center;
    margin-bottom: 2rem;
}

/* ------------------------ */
/* Event Notice Bar         */
/* ------------------------ */
.event-notice-s{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:var(--color-primary);
    z-index:1000;
    box-shadow:0 -5px 20px rgba(0,0,0,0.2);
}

.event-notice-c{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-around;
    padding:1rem 1.5rem;
    color:white;
    gap:1rem;
    position:relative;
}

/* Text */
.event-notice-text h2{
    font-size:0.8rem;
    margin:0;
    opacity:0.8;
    text-transform:uppercase;
}

.event-notice-text h3{
    margin:0;
    font-size:1.1rem;
    font-weight:700;
    color: white;
}

/* CTA Button */
.btn-register{
    color:white;
    border: 2px solid;
    padding:0.7rem 1.3rem;
    text-decoration:none;
    font-weight:700;
    border-radius:6px;
    white-space:nowrap;
    transition:0.3s ease;
}

.btn-register:hover{
    background:black;
}

/* Close Button */
.notice-close{
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 99%;
    background-color: white;
    position:absolute;
    top:50%rem;
    right:0.7rem;

    border:none;
    color:rgb(0, 0, 0);
    font-weight: bold;
    font-size:1rem;
    cursor:pointer;
    line-height:1;
}

.notice-close:hover{
    opacity:1;
}

/* ------------------------ */
/* Mobile Layout            */
/* ------------------------ */
@media (max-width:768px){
    body{
        padding-bottom:140px;
    }

    .event-notice-c{
        flex-direction:column;
        align-items:flex-start;
        gap:0.6rem;
        padding-right:2.5rem; /* Space for close button */
    }

    .btn-register{
        width:100%;
        text-align:center;
        padding:1rem;
        font-size:1rem;
    }

    .notice-close{
    position:absolute;
    top:0.5rem;
    right:0.7rem;
}

}