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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ========================================= */
/* ROOT */
/* ========================================= */

:root{

    --bg:#050505;
    --white:#F5F5F5;
    --text:#A0A0A0;

    --card:#0F0F0F;

    --border:rgba(255,255,255,0.08);

}

/* ========================================= */
/* GLOBAL */
/* ========================================= */

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--white);

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

}

/* ========================================= */
/* SCROLLBAR */
/* ========================================= */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{

    background:#4A4A4A;

    border-radius:20px;

}

/* ========================================= */
/* BACKGROUND */
/* ========================================= */

.background-glow{

    position:fixed;

    inset:0;

    z-index:-2;

    overflow:hidden;

}

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

}

.glow-1{

    width:520px;
    height:520px;

    background:#2A2A2A;

    top:-120px;
    left:-120px;

    opacity:.12;

}

.glow-2{

    width:450px;
    height:450px;

    background:#484848;

    right:-120px;
    bottom:-120px;

    opacity:.06;

}

.grid-overlay{

    position:fixed;

    inset:0;

    z-index:-1;

    background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

    background-size:80px 80px;

}

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

nav{

    position:fixed;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    width:92%;
    max-width:1450px;

    height:82px;

    padding:0 28px;

    border-radius:30px;

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

    backdrop-filter:blur(16px);

    border:1px solid var(--border);

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

    z-index:100;

    transition:.35s;

}

nav.scrolled{

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

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

}


/* ========================================= */
/* LOGO */
/* ========================================= */

.logo{

    display:flex;
    align-items:center;

    gap:16px;

    text-decoration:none;

}

.logo img{

    width:150px;
    height:150px;

    object-fit:contain;

    filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.08));

}

.logo-text{

    font-family:'Sora',sans-serif;

    font-size:24px;

    font-weight:600;

    color:#FFFFFF;

    letter-spacing:1px;

    line-height:1;

}

.logo-text span{
    color:#CFCFCF;
}
/* ========================================= */
/* NAV LINKS */
/* ========================================= */

.nav-links{

    display:flex;

    align-items:center;

    gap:28px;

}

.nav-links a{

    text-decoration:none;

    color:#8D8D8D;

    transition:.3s;

    font-size:15px;

}

.nav-links a:hover,
.active-nav{

    color:#FFFFFF !important;

}

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

.about-hero{

    min-height:100vh;

    padding:220px 7% 140px;

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.hero-mini-title{

    width:fit-content;

    padding:12px 20px;

    border-radius:40px;

    background:#111111;

    border:1px solid var(--border);

    margin-bottom:34px;

    color:#B0B0B0;

    font-size:14px;

    letter-spacing:1px;

}

.about-hero h1{

    font-family:'Sora',sans-serif;

    font-size:clamp(60px,9vw,140px);

    line-height:1;

    margin-bottom:34px;

    max-width:1100px;

}

.about-hero p{

    max-width:760px;

    font-size:18px;

    line-height:2;

    color:var(--text);

}

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

.timeline-section{

    position:relative;

    padding:0 7% 180px;

}

.timeline-line{

    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:2px;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    rgba(255,255,255,.04),
    rgba(255,255,255,.18),
    rgba(255,255,255,.04)
    );

}

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

.timeline-item{

    position:relative;

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

    margin-bottom:140px;

}

.timeline-item:nth-child(even){

    flex-direction:row-reverse;

}

/* ========================================= */
/* YEAR */
/* ========================================= */

.timeline-year{

    width:42%;

    display:flex;
    justify-content:center;

    font-family:'Sora',sans-serif;

    font-size:clamp(48px,6vw,110px);

    color:#2A2A2A;

    transition:.5s;

}

.active-year{

    color:#FFFFFF;

    text-shadow:
    0 0 24px rgba(255,255,255,.16);

}

/* ========================================= */
/* CARD */
/* ========================================= */

.timeline-card{

    width:42%;

    padding:42px;

    border-radius:36px;

    background:var(--card);

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

    transition:.4s;

    opacity:0;

    transform:translateY(40px);

}

.show-element{

    opacity:1 !important;

    transform:translateY(0) !important;

}

.timeline-card:hover{

    transform:translateY(-8px);

    background:#151515;

    border-color:rgba(255,255,255,.16);

}

/* ========================================= */
/* ICON */
/* ========================================= */

.timeline-icon{

    width:78px;
    height:78px;

    border-radius:24px;

    background:#1A1A1A;

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

    font-size:34px;

    margin-bottom:30px;

}

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

.timeline-card h3{

    font-family:'Sora',sans-serif;

    font-size:34px;

    line-height:1.2;

    margin-bottom:20px;

}

.timeline-card p{

    color:#A8A8A8;

    line-height:2;

    font-size:16px;

}

.active-card{

    border-color:rgba(255,255,255,.16);

    box-shadow:
    0 0 50px rgba(255,255,255,.03);

}

/* ========================================= */
/* LEADERSHIP */
/* ========================================= */

.leadership-section{

    padding:60px 7% 180px;

}

/* ========================================= */
/* HEADER */
/* ========================================= */

.leadership-header{

    margin-bottom:80px;

}

.leadership-header h2{

    font-family:'Sora',sans-serif;

    font-size:clamp(44px,5vw,82px);

    line-height:1.05;

    margin-top:24px;

}

/* ========================================= */
/* DIRECTOR CARD */
/* ========================================= */

.director-card{

    position:relative;

    display:flex;

    min-height:720px;

    border-radius:42px;

    overflow:visible;

    background:#0F0F0F;

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

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .8s ease,
    transform .8s ease;

    margin-bottom:120px;

}

/* ========================================= */
/* HOVER BUFFER */
/* ========================================= */

.director-card::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:-60px;

    height:60px;

    background:transparent;

}
/* ========================================= */
/* STABLE HOVER */
/* ========================================= */

.director-card:hover{

    z-index:20;

}

.director-image{

    position:relative;

    width:100%;

    overflow:hidden;

    transition:.8s cubic-bezier(.77,0,.18,1);

}

.director-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:grayscale(100%);

    transition:.8s cubic-bezier(.77,0,.18,1);

}

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

.director-overlay{

    position:absolute;

    left:50px;
    bottom:50px;

    z-index:3;

}

.director-overlay h3{

    font-family:'Sora',sans-serif;

    font-size:44px;

    margin-bottom:12px;

}

.director-overlay span{

    color:#B0B0B0;

    font-size:18px;

}

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

.director-content{

    position:absolute;

    top:0;
    right:-100%;

    width:50%;
    height:100%;

    padding:80px;

    background:#121212;

    display:flex;
    flex-direction:column;
    justify-content:center;

    transition:.8s cubic-bezier(.77,0,.18,1);

}

.director-card:hover .director-content{

    right:0;

}

.director-card:hover .director-image{

    width:50%;

}

.director-card:hover .director-image img{

    filter:grayscale(0%);

    transform:scale(1.05);

}

/* ========================================= */
/* QUOTE */
/* ========================================= */

.director-quote{

    font-family:'Sora',sans-serif;

    font-size:38px;

    line-height:1.5;

    margin-bottom:40px;

}

/* ========================================= */
/* DESCRIPTION */
/* ========================================= */

.director-description{

    color:#A0A0A0;

    line-height:2;

    font-size:17px;

}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:991px){

    .timeline-line{
        left:20px;
    }

    .timeline-item,
    .timeline-item:nth-child(even){

        flex-direction:column;

        align-items:flex-start;

        padding-left:70px;

    }

    .timeline-year,
    .timeline-card{

        width:100%;

    }

    .timeline-year{

        justify-content:flex-start;

        margin-bottom:30px;

    }

    .director-card{

        flex-direction:column;

        min-height:auto;

    }

    .director-image,
    .director-card:hover .director-image{

        width:100%;

        height:520px;

    }

    .director-content,
    .director-card:hover .director-content{

        position:relative;

        right:auto;

        width:100%;

        padding:50px 30px;

    }

}
/* ========================================= */
/* FOOTER */
/* ========================================= */

.site-footer{

    position:relative;

    padding:32px 5%;

    border-top:1px solid rgba(255,255,255,.06);

    background:#050505;

    overflow:hidden;

}

.footer-container{

    display:flex;

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

    gap:20px;

    flex-wrap:wrap;

}

.footer-container p{

    color:#8E8E8E;

    font-size:15px;

    line-height:1.7;

}

.footer-container span{

    color:#FFFFFF;

    font-weight:600;

}

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

@media(max-width:768px){

    .footer-container{

        flex-direction:column;

        text-align:center;

    }

    .footer-container p{

        font-size:14px;

    }

}

@media(max-width:600px){

    .logo img{
    width:40px;
    height:40px;
}

.logo-text{
    font-size:20px;
}

    nav{

        width:94%;

        height:72px;

        padding:0 18px;

    }

    .logo{
        font-size:20px;
    }

    .about-hero{

        padding:180px 20px 120px;

    }

    .timeline-section,
    .leadership-section{

        padding-left:20px;
        padding-right:20px;

    }

    .timeline-card{

        padding:30px;

    }

    .timeline-card h3{

        font-size:28px;

    }

    .director-overlay{

        left:30px;
        bottom:30px;

    }

    .director-overlay h3{

        font-size:30px;

    }

    .director-quote{

        font-size:28px;

    }

}

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

.timeline-progress{

    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:80px;
    height:100%;

    z-index:20;

    pointer-events:none;

}

/* ========================================= */
/* LINE */
/* ========================================= */

.timeline-progress-line{

    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:2px;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    rgba(255,255,255,.04),
    rgba(255,255,255,.22),
    rgba(255,255,255,.04)
    );

}

/* ========================================= */
/* CORE */
/* ========================================= */

.timeline-core{

    position:absolute;

    left:50%;
    top:0;

    transform:translate(-50%, 0);

    width:34px;
    height:34px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.9) 15%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.08) 75%,
    transparent 100%
    );

    box-shadow:
    0 0 12px rgba(255,255,255,.45),
    0 0 30px rgba(255,255,255,.18),
    0 0 80px rgba(255,255,255,.08);

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

    transition:
    transform .15s linear;

}

/* ========================================= */
/* INNER CORE */
/* ========================================= */

.core-inner{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#FFFFFF;

    box-shadow:
    0 0 10px rgba(255,255,255,.8);

}

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

.active-card{

    border-color:rgba(255,255,255,.16);

    box-shadow:
    0 0 60px rgba(255,255,255,.04);

}

.active-card .timeline-icon{

    background:#222222;

    box-shadow:
    0 0 24px rgba(255,255,255,.05);

}

.active-year{

    color:#FFFFFF;

    text-shadow:
    0 0 28px rgba(255,255,255,.22);

}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:991px){

    .timeline-progress{

        left:20px;

        transform:none;

    }

    .timeline-progress-line{

        left:16px;

    }

    .timeline-core{

        left:16px;

    }

}
/* ========================================= */
/* SECOND DIRECTOR SPACING */
/* ========================================= */

.second-director{

    margin-top:350px;

}

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

.about-ending{

    padding:40px 7% 180px;

}

.about-ending-content{

    position:relative;

    padding:100px 80px;

    border-radius:42px;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.01)
    );

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

}

.about-ending-content::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(255,255,255,.08),
    transparent 40%
    );

    pointer-events:none;

}

.ending-mini-title{

    display:inline-flex;

    padding:12px 20px;

    border-radius:40px;

    background:#111111;

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

    color:#B0B0B0;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:34px;

}

.about-ending h2{

    font-family:'Sora',sans-serif;

    font-size:clamp(42px,5vw,82px);

    line-height:1.08;

    margin-bottom:34px;

    max-width:900px;

}

.about-ending p{

    max-width:850px;

    color:#A0A0A0;

    font-size:18px;

    line-height:2;

    margin-bottom:50px;

}

.ending-btn{

    width:fit-content;

    display:flex;
    align-items:center;
    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    background:#FFFFFF;

    color:#000000;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.ending-btn:hover{

    transform:translateY(-4px);

    gap:18px;

}

@media(max-width:600px){

    .about-ending{

        padding:20px 20px 120px;

    }

    .about-ending-content{

        padding:60px 30px;

    }

}