/* =========================
   FONTS
========================= */




@import url('https://fonts.cdnfonts.com/css/high-cruiser');
@import url('https://fonts.cdnfonts.com/css/glacial-indifference');


/* =========================
   RESET
========================= */

html {
    width: 100vw ;
    min-width: 100vw ;
    max-width: 100vw ;
    overflow-x: hidden ;
}

body {
    width: 100vw ;
    min-width: 100vw ;
    max-width: 100vw ;
    overflow-x: hidden ;
    margin: 0 ;
}

/* =========================
   HERO
========================= */

.hero{
    position:relative;
    min-height:100vh;

    background-image:url("BGHERO.JPG");
    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding-bottom:40px;
}

/* =========================
   OVERLAY
========================= */

.overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.70) 100%),

    linear-gradient(
        to bottom,
        rgba(0,0,0,.20),
        rgba(0,0,0,.75)
    );
}

/* =========================
   NAVBAR
========================= */

.navbar{

    position: fixed;

    top:25px;
    left:50%;
    transform:translateX(-50%);

    width:92%;
    max-width:1250px;
    height:72px;

    padding:0 28px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-radius:22px;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.80),
        rgba(79,57,57,.80),
        rgba(0,0,0,.80)
    );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.45);

    z-index:9999;
}
.vote-box{
    width:50px;
    height:50px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.5rem;
}

.navbar-title{
    position:absolute;

    left:50%;
    transform:translateX(-50%);

    

    color:white;

    letter-spacing:2px;

    font-size:2rem;
}

.menu-btn{
    background:none;
    border:none;

    color:white;

    font-size:2rem;

    cursor:pointer;
}

/* =========================
   HERO CONTENT
========================= */

.hero-content{

    position:relative;

    z-index:5;

    width:min(1100px,90%);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
    
    margin-top: 140px;
}

.hero-title{

    font-size:clamp(3rem,7vw,5rem);

    color:white;

    letter-spacing:6px;

    margin-bottom:8px;

    text-shadow:
    0 4px 12px rgba(0,0,0,.55);
}

.hero-period{

    color:white;

    font-size:2rem;

    letter-spacing:4px;

    margin-bottom:18px;

    text-shadow:
    0 2px 6px rgba(0,0,0,.4);
}

.hero-slogan-svg{

    width:1000px;

    max-width:90%;

    display:block;

    margin:15px auto 25px;
}

.hero-slogan-svg text{

    fill:white;

    font-family:"Glacial Indifference";

    font-style:italic;

    font-size:28px;

    letter-spacing:2px;

    text-shadow:0 3px 8px rgba(0,0,0,.4);
}

/* =========================
   GLASS BOX
========================= */

.glass-box{

    width:min(900px,80%);

    margin-top:20px;

    margin-bottom:40px;

    padding:30px 40px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(0,0,0,.25),
        rgba(79,57,57,.25),
        rgba(0,0,0,.25)
    );

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.35);
}

.glass-box p{

    color:#c4b7bd;

    font-size:1.08rem;

    line-height:1.9;

    font-family:"Poppins",sans-serif;

    font-weight:300;

    text-align:center;
}
/* =========================
   HERO FADE
========================= */

.hero-fade{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    height:100px;

    background:
    linear-gradient(
        transparent,
        #090909
    );
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

    .navbar{
        top:20px;
        height:65px;
        width:78%;
    }

    .hero{
        padding-top:110px;
    }

    .navbar-title{
        font-size:1.4rem;
    }


    .hero-title{
        font-size:2rem;
    }

    .hero-period{
        font-size:1.2rem;
    }

    .hero-slogan{
        font-size:1rem;
    }

    .glass-box{
        padding:20px;
    }
}

/* =========================
   ABOUT
========================= */

.about{

    position:relative;

    margin-top:-60px;
    padding-top: 40px;
    padding:40px 0 120px;

    background:linear-gradient(
        180deg,
        #090909 0%,
        #120a0b 55%,
        #090909 100%
    );
}

/* Container */

.about-container{

    width:min(1200px,90%);

    margin:auto;
}

/* Heading */

.about-heading{

    text-align:center;

    margin-bottom:55px;
}

.about-title{

    color:white;

    font-size:clamp(3rem,5vw,4.5rem);

    line-height:1;

    letter-spacing:3px;

    text-shadow:
    0 5px 15px rgba(0,0,0,.4);

    margin-bottom: 10px;
}

/* Cards */

.about-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    width:min(1200px,90%);

    margin:auto;
}

/* Individual Card */

.about-card{

    min-height:430px;
    margin-top: 20px;
    padding:40px 30px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,.25),
        rgba(79,57,57,.22),
        rgba(0,0,0,.25)
    );

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 15px 35px rgba(0,0,0,.30);

    display:flex;

    flex-direction:column;

    align-items:center;

    transition:.35s;
}

.about-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.45);
}

/* Icon */

.card-icon{

    width:120px;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;
}

.card-icon img{

    width:100%;

    object-fit:contain;
}

/* Card Title */

.about-card-title{

    color:white;

    font-size:1.6rem;

    text-align:center;

    margin-bottom:20px;

    letter-spacing:1px;
}

/* Card Text */

.about-card-text{

    color:#c2b7bc;

    font-family:Poppins,sans-serif;

    line-height:1.8;

    text-align:center;

    font-size:.95rem;
}

/* =========================
   MOBILE ABOUT
========================= */

@media (max-width: 768px) {

    .about{
        padding:35px 0 70px;
    }

    .about-container{
        width:90%;
        margin:auto;
    }

    .about-heading{
        margin-bottom:25px;
    }

    .about-title{
        font-size:2.2rem;
        line-height:.9;
        letter-spacing:1px;
    }

    .about-grid{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content: center;
        gap:20px;

        
    }

    .about-card{

        width:100%;

        max-width:340px;
        
        min-height: fit-content;
        
        margin-top: 15px;

        padding:15px 10px;

        border-radius:18px;
    }

    .card-icon{

        width:38px;
        height:38px;

        margin:0 auto 12px;
    }

    .card-icon img{

        width:170%;
        height:170%;
        object-fit:contain;
    }

    .about-card-title{

        padding-top: 10px;
        font-size:1.3rem;

        line-height:1.1;

        margin-bottom:10px;
    }

    .about-card-text{

        font-size:1.1rem;
        margin: 10px;
        line-height:1.45;

        text-align:center;
    }

}

/* =========================
   TIMELINE
========================= */

.timeline{

    padding:70px 0;
    overflow: hidden;
    background:linear-gradient(
        180deg,
        #090909 0%,
        #120a0b 55%,
        #090909 100%
    );
}

.timeline-container{

    width:min(95%,1400px);

    margin:auto;
}

.timeline-title{

    color:white;

    text-align:center;

    font-size:clamp(2.5rem,5vw,4rem);

    margin-bottom:45px;
}

/* Scroll */

.timeline-scroll{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior-x:contain;

    scrollbar-width:none;
}

.timeline-scroll::-webkit-scrollbar{
    display:none;
}

.timeline-scroll::-webkit-scrollbar{

    display:none;
}

/* Track */

.timeline-track{

    position:relative;
    display:inline-flex;
    gap:20px;
    padding:90px 40px;
}

/* Center Line */

.timeline-line{
    position:absolute;
    left:40px;
    width:calc(100% - 80px);
    top:50%;
    transform:translateY(-50%);
    height:4px;

    background:linear-gradient(
        90deg,
        #8c5cff,
        white,
        #8c5cff
    );

    border-radius:50px;
}

/* Item */

.timeline-item{

    position:relative;

    width:160px;

    display:flex;

    flex-shrink: 0;

    height: 220px;

    justify-content:center;
}

/* Timeline Dot */

.timeline-item::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%, -50%);

    width:16px;
    height:16px;

    background:white;

    border-radius:50%;

    box-shadow:0 0 12px white;

    z-index:5;
}

/* Top */

.timeline-item.top{

    align-items:flex-start;
}

.timeline-item.top .timeline-card{

    position:absolute;

    bottom:157px;


    left:50%;

    transform:translateX(-50%);
}

/* Bottom */

.timeline-item.bottom{

    align-items:flex-end;
}

.timeline-item.bottom .timeline-card{

    position:absolute;


    top:157px;

    left:50%;

    transform:translateX(-50%);
}

/* Card */

.timeline-card{

    width:145px;

    padding:14px;
    
    border-radius:18px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        #c0a17599,
        #441c0099,
        #c0a17599

    
    );

    border:1px solid #8c8287;

    backdrop-filter:blur(15px);

    transition:.35s;
}

.timeline-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.timeline-card h3{

    color:white;

    font-size:.95rem;

    margin-bottom:10px;

    font-family:"Glacial Indifference",sans-serif;
}

.timeline-card span{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    background:#B8904E;

    color:black;

    font-weight:700;

    font-family:"Glacial Indifference", sans-serif;
    font-size:.75rem;
}


/* =========================
INFORMATION PORTAL
========================= */

.portal-section{

    padding:90px 5%;
    background:linear-gradient(
        180deg,
        #090909 0%,
        #120a0b 55%,
        #090909 100%
    );
    text-align:center;
}

.portal-title{

    color:white;

    font-size:clamp(2.5rem,5vw,4rem);

    line-height:.9;

    margin-bottom:20px;
}

.portal-subtitle{

    color:#9d9d9d;

    margin-bottom:60px;

    font-size:1rem;
}

.portal-container{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;
}

.portal-card{

    width:250px;

    height:230px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(0,0,0,.18),
        rgba(79,57,57,.22),
        rgba(0,0,0,.18)
    );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

    cursor:pointer;
}

.portal-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.35);
}

.portal-icon{
    width:80px;
    height:80px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 auto 25px;
}

.portal-card h3{

    color:white;

    font-family:"Glacial Indifference",sans-serif;

    font-size:1.6rem;

    line-height:1.3;
}

.portal-icon img{

    width:100%;
    height:100%;

    object-fit:contain;
}

@media(max-width:768px){

    .portal-container{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;
    }



    .portal-card{

        max-width:245px;
        max-height:245px;

    }
    .portal-title{
        font-size:clamp(2.3rem,5vw,4rem);
    }
    .portal-icon{

        width:90px;
        height:90px;

        margin-bottom:18px;
    }

    .portal-card h3{

        font-size:1.3rem;
    }

}

/* =========================
   SCAIS PROFILE
========================= */

.scais-section{

    padding:90px 5%;
    background:linear-gradient(
        180deg,
        #090909 0%,
        #120a0b 55%,
        #090909 100%
    );
    text-align:center;
}

.scais-title{

    color:white;

    font-size:clamp(2.8rem,5vw,4rem);

    line-height:.9;

    margin-bottom:10px;
}

.scais-subtitle{

    color:#999;

    margin-bottom:50px;
}

.scais-container{

    display:flex;

    flex-direction:column;

    gap:40px;

    align-items:center;
}

/* Card */

.scais-card{

    width:min(900px,100%);

    
    overflow:hidden;

    border-radius:35px;

    background:linear-gradient(
        135deg,
        rgba(0,0,0,.18),
        rgba(79,57,57,.22),
        rgba(0,0,0,.18)
    );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(15px);

    transition:.35s;

    cursor:pointer;
}

.scais-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

/* Image */

.scais-image{

    width:100%;

    height:240px;

    overflow:hidden;
}

.scais-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* Text */

.scais-content{

    padding:28px;
}

.scais-content h2{

    color:white;

    font-size:2.2rem;

    margin-bottom:5px;
}

.scais-content h3{

    color:white;

    font-size:2rem;
}

@media(max-width:768px){

    .scais-image{

        height:140px;
    }

    .scais-card{
        width: 90%;
        
    }
    .scais-content{

        padding:20px;
    }

    .scais-content h2{

        font-size:1.5rem;
    }

    .scais-content h3{

        font-size:1.3rem;
    }

}

.pdf-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.8);

    backdrop-filter:blur(8px);

    z-index:9999;
}

.pdf-window{

    width:90%;

    height:90%;

    border-radius:20px;

    overflow:hidden;

    background:#111;
}

#pdfFrame{

    width:100%;

    height:100%;

    border:none;
}

.portal-link{

    text-decoration:none;

    color:inherit;

    display:block;
}

.mobile-menu{

    position:fixed;

    inset:0;             

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:28px;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;
}

.mobile-menu.active{

    opacity:1;
    visibility:visible;
}

.mobile-menu.active{
    right:0;
}

.mobile-menu a{
    color:white;
    text-decoration:none;
    font-size:1.5rem;
    font-family:'High Cruiser',sans-serif;
    transition:.25s;
}

.mobile-menu a:hover{
    color:#c89d57;
}

#menu-toggle{
    cursor:pointer;
}

.close-menu{

    position:absolute;

    top:35px;
    right:35px;

    background:none;
    border:none;

    color:white;

    font-size:2.4rem;

    cursor:pointer;

    transition:.25s;
}

.close-menu:hover{

    color:#c89d57;

    transform:rotate(90deg);
}

.mobile-menu{

    opacity:0;
    visibility:hidden;

    transition:.35s;
}

.mobile-menu.active{

    opacity:1;
    visibility:visible;
}
.cruiser{
    font-family: "High Cruiser", sans-serif;
}
.glacial{
    font-family: "Glacial Indifference", sans-serif;
}
.glacial-italic{
    font-family: "Glacial Indifference", sans-serif;
    font-style: italic;
}