/* =====================================================
   SZN WEBSITE
   Version 1.0
===================================================== */



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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050505;

    color:#ffffff;

    overflow-x:hidden;

}



:root{

    --red:#b30000;

    --red-light:#ff2d2d;

    --black:#050505;

    --dark:#111111;

    --gray:#d4d4d4;

    --white:#ffffff;

    --glass:rgba(20,20,20,.55);

}



.container{

    width:min(1400px,92%);

    margin:auto;

}



a{

    text-decoration:none;

    color:inherit;

}



img{

    max-width:100%;

    display:block;

}



.btn{

    padding:15px 40px;

    border-radius:14px;

    transition:.35s;

    font-weight:700;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

.btn-red{

    background:var(--red);

    color:white;

    box-shadow:0 0 25px rgba(255,0,0,.35);

}

.btn-red:hover{

    background:#cf0000;

    transform:translateY(-5px);

    box-shadow:0 0 45px red;

}

.btn-outline{

    border:2px solid white;

    color:white;

}

.btn-outline:hover{

    background:white;

    color:black;

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

.navbar{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:95%;

    z-index:999;

    background:rgba(15,15,15,.55);

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    box-shadow:0 0 40px rgba(255,0,0,.12);

    transition:.35s;

}

nav{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}

.navbar:hover{

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

}

.nav-container{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo{

    position:absolute;

    right:30px;

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:52px;

    transition:.35s;

}

.logo img:hover{

    transform:rotate(-10deg) scale(1.08);

    filter:drop-shadow(0 0 20px red);

}

.logo span{

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

    font-size:28px;

    font-weight:900;

    letter-spacing:3px;

}



.nav-links{

    display:flex;

    align-items:center;

    gap:34px;

    list-style:none;

}

.nav-links a{

    position:relative;

    color:white;

    font-size:16px;

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--red-light);

}



.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--red-light);

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}



.language{

    position:absolute;

    left:30px;

    display:flex;

    align-items:center;

}

.language:hover{

    transform:scale(1.08);

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:url("../images/hero.webp") center center/cover no-repeat;

}



.overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            rgba(0,0,0,.35),
            rgba(0,0,0,.85)
        ),

        radial-gradient(
            circle at top,
            rgba(179,0,0,.20),
            transparent 65%
        );

}



.hero::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    left:50%;

    top:-400px;

    transform:translateX(-50%);

    background:

    radial-gradient(

    circle,

    rgba(255,0,0,.22),

    transparent 70%

    );

    animation:pulse 7s infinite;

}



.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

}



.hero h1{

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

    font-size:110px;

    font-weight:900;

    letter-spacing:8px;

    text-shadow:

    0 0 15px red,

    0 0 45px rgba(255,0,0,.6);

    animation:glow 2s infinite alternate;

}



.hero h2{

    margin-top:20px;

    font-size:46px;

    line-height:1.4;

    font-weight:700;

}



.hero p{

    margin-top:30px;

    color:#d0d0d0;

    line-height:2;

    font-size:18px;

}



.hero-buttons{

    margin-top:25px;

    transform:translateY(-20px);

    display:flex;

    justify-content:center;

    gap:20px;

}



.scroll-down{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    z-index:3;

    font-size:34px;

    animation:scrollDown 1.8s infinite;

}



@keyframes glow{

    from{

        text-shadow:

        0 0 15px #700;

    }

    to{

        text-shadow:

        0 0 25px red,

        0 0 60px red;

    }

}

@keyframes floatLogo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes scrollDown{

    0%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

    100%{

        transform:translate(-50%,0);

    }

}

@keyframes pulse{

    0%{

        transform:translateX(-50%) scale(1);

    }

    50%{

        transform:translateX(-50%) scale(1.15);

    }

    100%{

        transform:translateX(-50%) scale(1);

    }

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

.about{

    padding:140px 0;

    background:#090909;

    position:relative;

}

.about::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    top:-150px;

    background:

    radial-gradient(circle,

    rgba(255,0,0,.12),

    transparent 70%);

    pointer-events:none;

}

.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    direction:ltr;

}

.about-image{

    position:relative;

    direction:ltr;

}

.about-image img{

    width:100%;

    border-radius:22px;

    box-shadow:

    0 0 50px rgba(255,0,0,.18);

    transition:.5s;

}

.about-image img:hover{

    transform:scale(1.03);

}

.section-title{

    display:inline-block;

    color:#ff2d2d;

    font-size:15px;

    font-family:Orbitron,sans-serif;

    letter-spacing:4px;

    margin-bottom:18px;

}

.about-content h2{

    font-size:54px;

    line-height:1.3;

    margin-bottom:25px;

}

.about-content p{

    color:#cfcfcf;

    font-size:18px;

    line-height:2;

}

.about-stats{

    margin-top:45px;

    display:grid;

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

    gap:20px;

}

.stat-card{

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,0,0,.4);

    box-shadow:

    0 0 35px rgba(255,0,0,.20);

}

.stat-card h3{

    font-family:Orbitron,sans-serif;

    font-size:36px;

    color:#ff2d2d;

    margin-bottom:10px;

}

.stat-card span{

    color:#d0d0d0;

}
/* =====================================================
   ABOUT - PERSIAN
===================================================== */

.about {
    font-family: "Vazirmatn", sans-serif;
}

.about-container {
    direction: rtl;
}

.about-image {
    direction: rtl;
}

.about-content {
    direction: rtl;
    text-align: right;
}

.section-title {
    font-family: "Vazirmatn", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
}

.about-content h2 {
    font-family: "Vazirmatn", sans-serif;
    font-weight: 900;
    font-size: 52px;
    line-height: 1.5;
    letter-spacing: 0;
}

.about-content p {
    font-family: "Vazirmatn", sans-serif;
    font-size: 18px;
    line-height: 2.2;
    text-align: justify;
}

.about-stats {
    direction: rtl;
}

.stat-card {
    font-family: "Vazirmatn", sans-serif;
}

.stat-card h3 {
    font-family: "Vazirmatn", sans-serif;
    font-weight: 900;
    letter-spacing: 0;
}

.stat-card span {
    font-family: "Vazirmatn", sans-serif;
}
/* =====================================================
   ABOUT - RTL FINAL OVERRIDE
===================================================== */

.about-container {
    direction: rtl !important;
}

.about-content {
    direction: rtl !important;
    text-align: right;
}

.about-image {
    direction: rtl !important;
}
/* =====================================================
   ABOUT - RTL LAYOUT
===================================================== */

.about-container {
    direction: rtl !important;
}

.about-content {
    direction: rtl !important;
    text-align: right !important;
}


.about-content h2,
.about-content p,
.section-title {
    direction: rtl !important;
    text-align: right !important;
}


.stat-card {
    text-align: center !important;
}

.stat-card h3,
.stat-card span {
    text-align: center !important;
}
/* =====================================================
                    SENIOR MEMBERS
===================================================== */

#members{

    padding:140px 0;

    background:#050505;

    position:relative;

}

#members h2{

    text-align:center;

    font-size:54px;

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

    margin-bottom:70px;

}

.members-grid{

    display:grid;

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

    gap:35px;

}

.member-card{

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.03);

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

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.45s;

}

.member-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,0,0,.12),

    transparent

    );

    transition:.8s;

}

.member-card:hover::before{

    left:100%;

}

.member-card:hover{

    transform:

    translateY(-12px)

    rotateX(5deg);

    box-shadow:

    0 0 45px rgba(255,0,0,.25);

}

.member-card img{

    width:170px;

    height:170px;

    margin:auto;

    border-radius:50%;

    object-fit:cover;

    border:4px solid rgba(255,0,0,.25);

    transition:.4s;

}

.member-card:hover img{

    transform:scale(1.08);

    border-color:#ff2d2d;

}

.member-card h3{

    margin-top:28px;

    font-size:30px;

}

.member-card span{

    display:inline-block;

    margin-top:12px;

    color:#ff2d2d;

    font-weight:bold;

    letter-spacing:2px;

}

/* =====================================================
                        NEWS
===================================================== */

#news{

    padding:140px 0;

    background:#090909;

    position:relative;

}

#news h2{

    text-align:center;

    font-size:54px;

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

    margin-bottom:70px;

}

.news-grid{

    display:grid;

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

    gap:35px;

}

.news-card{

    overflow:hidden;

    border-radius:24px;

    background:#121212;

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

    transition:.4s;

    cursor:pointer;

}

.news-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 45px rgba(255,0,0,.20);

}

.news-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.news-card:hover img{

    transform:scale(1.08);

}

.news-content{

    padding:28px;

}

.news-tag{

    display:inline-block;

    background:#b30000;

    color:white;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    letter-spacing:1px;

    margin-bottom:15px;

}

.news-date{

    color:#888;

    font-size:14px;

    margin-bottom:15px;

}

.news-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.news-card p{

    color:#cfcfcf;

    line-height:1.9;

}

.news-btn{

    display:inline-block;

    margin-top:25px;

    color:#ff2d2d;

    font-weight:bold;

    transition:.3s;

}

.news-btn:hover{

    letter-spacing:2px;

}
/* =====================================================
                    GALLERY
===================================================== */

#gallery{

    padding:140px 0;

    background:#050505;

    position:relative;

}

#gallery h2{

    text-align:center;

    font-size:54px;

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

    margin-bottom:70px;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-grid img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    transition:.45s;

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

}

.gallery-grid img:hover{

    transform:

        scale(1.05)

        rotate(.6deg);

    box-shadow:

        0 0 40px rgba(255,0,0,.25);

}
/* =====================================================
                    JOIN
===================================================== */

#join{

    padding:140px 0;

    background:#090909;

}

#join h2{

    text-align:center;

    font-size:54px;

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

}

#join p{

    text-align:center;

    color:#d0d0d0;

    margin-top:20px;

    margin-bottom:50px;

}

.join-form{

    max-width:750px;

    margin:auto;

}

.join-form input,

.join-form textarea{

    width:100%;

    background:#151515;

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

    color:white;

    padding:18px;

    border-radius:14px;

    margin-bottom:20px;

    outline:none;

    transition:.35s;

    font-family:inherit;

}

.join-form input:focus,

.join-form textarea:focus{

    border-color:#b30000;

    box-shadow:

        0 0 20px rgba(255,0,0,.2);

}

.join-form textarea{

    resize:none;

    height:170px;

}

.rules{

    background:#121212;

    padding:25px;

    border-radius:18px;

    margin-bottom:25px;

}

.rules h3{

    margin-bottom:15px;

}

.rules ul{

    padding-right:22px;

    line-height:2;

}

.join-form label{

    display:flex;

    gap:12px;

    align-items:center;

    margin-bottom:30px;

}

.join-form button{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:#b30000;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.35s;

}

.join-form button:hover{

    background:#d00000;

    transform:translateY(-5px);

    box-shadow:

        0 0 40px red;

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

footer{

    background:#040404;

    padding:70px 0 40px;

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

}

.footer-logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.footer-logo img{

    width:90px;

}

.footer-logo h2{

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

    font-size:34px;

}

footer p{

    text-align:center;

    color:#bbb;

    margin:25px 0;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

}

.footer-links a{

    transition:.3s;

}

.footer-links a:hover{

    color:#ff2d2d;

}

.socials{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:35px 0;

}

.socials a{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#151515;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    transition:.35s;

}

.socials a:hover{

    background:#b30000;

    transform:translateY(-5px);

}

.copyright{

    text-align:center;

    color:#777;

    margin-top:30px;

}
/* =====================================================
                MOBILE RESPONSIVE
===================================================== */



.menu-toggle{
    display:none;
}




@media(max-width:992px){

    .members-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .news-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

}




@media(max-width:768px){


    body{
        overflow-x:hidden;
    }


    

    .navbar{

        width:100%;
        top:0;
        border-radius:0;

    }


    .nav-container{

        height:75px;
        position:relative;
        justify-content:center;

    }


    

    .logo{

        position:static;

        display:flex;

        flex-direction:row;

        gap:10px;

    }


    .logo img{

        width:42px;

    }


    .logo span{

        font-size:20px;

    }



    

    .language{

        display:none !important;

    }



    

    .menu-toggle{

        display:flex;

        position:absolute;

        right:20px;

        width:45px;

        height:45px;

        background:none;

        border:none;

        color:white;

        font-size:28px;

        align-items:center;

        justify-content:center;

        cursor:pointer;

    }



    nav{

        position:absolute;

        top:75px;

        left:0;

        width:100%;

        transform:none;

    }


    .nav-links{

        display:none;

        flex-direction:column;

        background:#111;

        width:100%;

        padding:25px;

        gap:25px;

        text-align:center;

    }


    .nav-links.active{

        display:flex;

    }




    

    .hero{

        min-height:100vh;

        padding:0 20px;

    }


    .hero h1{

        font-size:45px;

        letter-spacing:3px;

    }


    .hero h2{

        font-size:24px;

    }


    .hero p{

        font-size:15px;

    }



    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }



    


    .about,
    #members,
    #news,
    #gallery,
    #join{

        padding:80px 0;

    }



    .about-container{

        grid-template-columns:1fr;

    }


    .about-content{

        text-align:center;

    }



    .about-content h2,
    .about-content p{

        text-align:center;

    }



    .about-stats{

        grid-template-columns:1fr;

    }



    .members-grid,
    .news-grid,
    .gallery-grid{

        grid-template-columns:1fr;

    }



}





@media(max-width:480px){


    .hero h1{

        font-size:34px;

    }


    .hero h2{

        font-size:20px;

    }


    .section-title{

        font-size:12px;

    }


    #members h2,
    #news h2,
    #gallery h2,
    #join h2{

        font-size:30px;

    }


}


::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#b30000;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff2d2d;

}



::selection{

    background:#b30000;

    color:white;

}



.fade{

    animation:fade .8s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.logo{
    position:absolute;
    left:30px;
    right:auto;
    display:flex;
    align-items:center;
    gap:14px;
    flex-direction:row-reverse;
}


.language{
    position:absolute;
    right:30px;
    left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}
.about-content{
    direction:rtl;
}
.about-container{
    direction:ltr;
}

.about-content{
    direction:rtl;
    text-align:right;
}

.section-title,
.about-content h2,
.about-content p{
    direction:ltr;
}
.section-title{
    display:block;
    direction:ltr;
    text-align:left;
}
.member-card span{
    display:block;
    margin-top:12px;
    color:#ff2d2d;
    font-weight:bold;
    letter-spacing:1px;
    line-height:1.6;
}
.member-card{
    text-align:center;
}
.socials img{
    width:28px;
    height:28px;
    object-fit:contain;
    transition:.35s;
}

.socials a:hover img{
    transform:scale(1.15);
}
.checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
}

.checkbox-label input{
    width:18px;
    height:18px;
}

.checkbox-label a{
    color:#ff2d2d;
    text-decoration:none;
    font-weight:bold;
}

.checkbox-label a:hover{
    text-decoration:underline;
}
.rules .btn{
    display:inline-flex;
    margin:20px auto 0;
}
.rules{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.rules p{
    text-align:center;
    margin:15px 0 20px;
}
.page-title{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:50px;

}

.page-title h2{

    margin:0;

}

.page-title .section-title{

    margin:0;

    direction:ltr;

}
.language{
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 20px;
}


.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    animation: fadeIn .25s ease;
}

.image-modal img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(255,0,0,.35);
    animation: zoomIn .25s ease;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    transition: .2s;
}

.close:hover {
    color: #ff3b3b;
}

.gallery-grid img {
    cursor: zoom-in;
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes zoomIn {
    from {
        transform: scale(.8);
        opacity:0;
    }
    to {
        transform: scale(1);
        opacity:1;
    }
}
.modal-caption{
    margin-top:20px;
    color:#fff;
    font-size:22px;
    font-weight:600;
    text-align:center;
    text-shadow:0 0 12px rgba(255,0,0,.5);
    animation:fadeIn .25s ease;
}
.image-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0,0,0,.88);
    backdrop-filter: blur(8px);

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

    flex-direction: column;   

    animation: fadeIn .25s ease;
}
/* ==========================
   MOBILE FIX FINAL
========================== */

@media(max-width:768px){

    html,body{
        width:100%;
        overflow-x:hidden;
    }


    .navbar{

        left:0;
        transform:none;
        width:100%;
        top:0;

        border-radius:0;

    }


    .nav-container{

        width:100%;
        height:75px;

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

    }


    .logo{

        position:static !important;

        display:flex;

        flex-direction:row !important;

        align-items:center;

    }


    .logo img{

        width:40px;

    }


    .logo span{

        font-size:18px;

        white-space:nowrap;

    }



    .hero{

        width:100%;

        min-height:100vh;

        overflow:hidden;

    }


    .hero-content{

        width:100%;

        padding:0 20px;

    }



    .scroll-down{

        bottom:20px;

    }


}
/* =====================================================
                    MUSIC PLAYER
===================================================== */

.music-button{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:rgba(179,0,0,.95);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:9999;

    color:#fff;

    font-size:26px;

    box-shadow:0 0 35px rgba(255,0,0,.45);

    transition:.35s;

}

.music-button:hover{

    transform:scale(1.1);

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

}

.music-panel{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    height:100vh;

    background:rgba(10,10,10,.88);

    backdrop-filter:blur(18px);

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

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

    transition:.45s ease;

    z-index:9998;

    display:flex;

    flex-direction:column;

}

.music-panel.active{

    right:0;

}

.music-header{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

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

}

.music-header h3{

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

    letter-spacing:2px;

}

.music-header button{

    background:none;

    border:none;

    color:white;

    font-size:24px;

    cursor:pointer;

}

.playlist{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

.song{

    display:flex;

    align-items:center;

    gap:15px;

    padding:12px;

    margin-bottom:15px;

    background:rgba(255,255,255,.04);

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

}

.song:hover{

    background:rgba(179,0,0,.2);

    transform:translateX(-5px);

}

.song img{

    width:70px;

    height:70px;

    border-radius:12px;

    object-fit:cover;

}

.song-info{

    flex:1;

}

.song-info h4{

    margin-bottom:8px;

}

.song-info p{

    color:#bdbdbd;

    font-size:14px;

}

.song i{

    color:#ff3b3b;

    font-size:20px;

}
.player{

    padding:20px;

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

}

.player img{

    width:100%;

    border-radius:18px;

    margin-bottom:15px;

}

.player h3{

    text-align:center;

}

.player p{

    text-align:center;

    color:#bdbdbd;

    margin:10px 0 20px;

}

#progress{

    width:100%;

    cursor:pointer;

}

.time{

    display:flex;

    justify-content:space-between;

    color:#999;

    margin-top:8px;

    font-size:14px;

}

.controls{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:25px;

}

.controls button{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#b30000;

    color:white;

    cursor:pointer;

    font-size:20px;

    transition:.3s;

}

.controls button:hover{

    transform:scale(1.1);

}
.music-button.hide{

    opacity:0;

    pointer-events:none;

    transform:scale(.8);

}
.extra-controls{

    margin-top:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}


.extra-controls button{

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:#151515;

    color:white;

    cursor:pointer;

    transition:.3s;

}


.extra-controls button:hover{

    background:#b30000;

}


.extra-controls button.active{

    background:#b30000;

    box-shadow:0 0 20px red;

}


.volume{

    display:flex;

    align-items:center;

    gap:10px;

    color:white;

}


#volume{

    width:100px;

    cursor:pointer;

}
/* ==========================
        MUSIC EQUALIZER
========================== */


.equalizer{

    position:absolute;

    bottom:8px;

    right:8px;

    display:flex;

    gap:3px;

    height:15px;

    align-items:end;

    opacity:0;

}


.equalizer span{

    width:3px;

    height:5px;

    background:white;

    border-radius:5px;

}


.music-button.playing .equalizer{

    opacity:1;

}


.music-button.playing .equalizer span{

    animation:musicWave .8s infinite;

}


.equalizer span:nth-child(2){

    animation-delay:.2s;

}


.equalizer span:nth-child(3){

    animation-delay:.4s;

}


.equalizer span:nth-child(4){

    animation-delay:.6s;

}



@keyframes musicWave{


    0%,100%{

        height:5px;

    }


    50%{

        height:15px;

    }


}
#playerCover{

    animation:coverRotate 12s linear infinite;

    animation-play-state:paused;

}


#playerCover.playing{

    animation-play-state:running;

}


@keyframes coverRotate{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}
.song.active{

    border:1px solid #ff2d2d;

    background:rgba(179,0,0,.18);

    box-shadow:0 0 20px rgba(255,0,0,.25);

}
/* ==========================
        MUSIC COVERS
========================== */

.song img{

    width:70px;

    height:70px;

    min-width:70px;

    min-height:70px;

    object-fit:cover;

    border-radius:50%;

    overflow:hidden;

}


#playerCover{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:50%;

    display:block;

    margin:15px auto;

    box-shadow:0 0 25px rgba(255,0,0,.35);

}
.player{

    padding:15px;

}


.player h3{

    font-size:18px;

    margin:5px 0;

}


.player p{

    margin:5px 0 10px;

    font-size:14px;

}
.playlist{

    flex:1;

    overflow-y:auto;

    padding:15px;

    min-height:200px;

}
.controls{

    direction:ltr;

}
/* ==========================
        MUSIC LTR MODE
========================== */

.music-panel{

    direction:ltr;

}


.music-panel h3,
.music-panel p,
.music-panel span,
.song-info{

    direction:ltr;

    text-align:left;

}


.music-header{

    direction:ltr;

}


.player{

    direction:ltr;

}


.controls,
.extra-controls{

    direction:ltr;

}
/* ==========================
      PLAYLIST SCROLL LEFT
========================== */

.playlist{

    direction:rtl;

}




.playlist{

    direction:rtl;

    overflow-y:auto;

}


.song{

    direction:ltr;

}
.persian-logo{

    position:absolute;

    right:30px;

    display:flex;

    align-items:center;

    gap:14px;

    flex-direction:row;

}


.persian-logo img{

    width:52px;

    transition:.35s;

}


.persian-logo img:hover{

    transform:rotate(10deg) scale(1.08);

    filter:drop-shadow(0 0 20px red);

}
.persian-logo span{

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

    font-size:34px;

    font-weight:900;

    letter-spacing:1px;

    text-shadow:
        0 0 10px rgba(255,0,0,.4);

}
.language-buttons {

    display:flex;
    justify-content:center;
    gap:20px;
    margin:30px 0;

}


.language-buttons button {

    background:none;
    border:none;
    cursor:pointer;
    padding:0;

}


.language-buttons img {

    width:55px;
    height:35px;
    object-fit:cover;
    border-radius:8px;
    transition:.3s;

}


.language-buttons img:hover {

    transform:scale(1.15);

}
.language-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}


@media(max-width:768px){

    .persian-logo{
        display:none !important;
    }

}
/* ==========================
        MEMBER MODAL
========================== */

.member-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    overflow:hidden;

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

    backdrop-filter:blur(8px);

    z-index:99999;

}

.member-box{

    width:450px;
    max-width:90%;

    background:#111;

    border-radius:18px;

    overflow:hidden;

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

    animation:memberOpen .3s;

}

.member-image{

    height:230px;       

}

.member-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.member-content{

    padding:30px;
    min-height:320px;   

}

.member-content h2{

    font-size:30px;
    margin-bottom:8px;

}

.member-content h4{

    color:#ff2d2d;
    margin-bottom:20px;

}

.member-content p{

    line-height:2;
    color:#d5d5d5;

}

.member-box{

    width:450px;
    max-width:90%;

    background:#111;

    border-radius:18px;

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

    position:relative;

    overflow:visible;

    animation:memberOpen .3s;

}
.member-close{

    position:absolute;

    top:-55px;
    right:0;

    color:white;

    font-size:40px;

    cursor:pointer;

    z-index:999999;

}


.member-close:hover{

    color:#ff2d2d;

}


.member-close{

    position:absolute;

    top:-45px;
    right:0;

    color:white;

    font-size:38px;

    cursor:pointer;

    line-height:1;

    transition:.3s;

}


.member-close:hover{

    color:#ff2d2d;

    transform:scale(1.15);

}

@keyframes memberOpen{

    from{

        transform:scale(.8);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}
/* ==========================================
        SENIOR MEMBERS - SHOW MORE
========================================== */

.members-grid .member-card:nth-child(n+4){
    display:none;
}




.members-grid.show-all .member-card{
    display:block;
}




.members-toggle{

    display:flex;

    justify-content:center;

    margin-top:45px;

}


.members-toggle button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:14px 28px;

    background:rgba(179,0,0,.12);

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

    border-radius:14px;

    color:white;

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

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}


.members-toggle button:hover{

    background:#b30000;

    border-color:#ff2d2d;

    box-shadow:0 0 30px rgba(255,0,0,.3);

    transform:translateY(-3px);

}


.members-toggle i{

    font-size:14px;

    transition:.35s;

}




.members-toggle button.active i{

    transform:rotate(180deg);

}




.members-grid.show-all .member-card:nth-child(n+4){

    animation:memberReveal .45s ease both;

}


@keyframes memberReveal{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}




@media(max-width:768px){

    .members-toggle{

        margin-top:30px;

    }

    .members-toggle button{

        width:190px;

        padding:13px 20px;

    }

}
/* =====================================================
   ABOUT - FINAL PERSIAN FIX
===================================================== */

.about-content {
    direction: rtl !important;
    text-align: right !important;
}


.about-content .section-title {
    font-family: "Vazirmatn", sans-serif !important;
    direction: rtl !important;
    unicode-bidi: normal !important;
    text-align: right !important;
    display: block;
    letter-spacing: 0 !important;
}


.about-content h2 {
    font-family: "Vazirmatn", sans-serif !important;
    direction: rtl !important;
    unicode-bidi: normal !important;
    text-align: right !important;
}


.about-content p {
    font-family: "Vazirmatn", sans-serif !important;
    direction: rtl !important;
    unicode-bidi: normal !important;
    text-align: justify !important;
}


.about-stats {
    direction: rtl !important;
}

.stat-card {
    text-align: center !important;
}

.stat-card h3,
.stat-card span {
    text-align: center !important;
}

.join-form button {
    font-family: "Vazirmatn", sans-serif !important;
    font-weight: 700;
    direction: rtl;
}
/* =====================================================
                SZN 2026 MOTTO
===================================================== */

.szn-motto{

    padding:70px 20px;

    background:#050505;

    display:flex;

    justify-content:center;

    position:relative;

    overflow:hidden;

}

.szn-motto::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:50%;
    left:50%;

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

    background:radial-gradient(
        circle,
        rgba(255,0,0,.14),
        transparent 70%
    );

    pointer-events:none;

}

.szn-motto-card{

    position:relative;

    width:min(900px,100%);

    padding:55px 30px;

    text-align:center;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

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

    border-radius:24px;

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

    overflow:hidden;

    transition:.4s;

}

.szn-motto-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,0,0,.10),
        transparent
    );

    transition:.8s;

}

.szn-motto-card:hover::before{

    left:100%;

}

.szn-motto-card:hover{

    transform:translateY(-6px);

    border-color:rgba(255,0,0,.35);

    box-shadow:
        0 0 55px rgba(255,0,0,.20);

}

.szn-motto-label{

    display:block;

    color:#ff2d2d;

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

    font-size:13px;

    letter-spacing:4px;

    margin-bottom:18px;

}

.szn-motto-card h2{

    position:relative;

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

    font-size:48px;

    font-weight:900;

    letter-spacing:4px;

    color:white;

    text-shadow:
        0 0 15px rgba(255,0,0,.6),
        0 0 40px rgba(255,0,0,.25);

}

.szn-motto-card p{

    position:relative;

    margin-top:18px;

    color:#aaa;

    font-size:16px;

}


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

@media(max-width:768px){

    .szn-motto{

        padding:45px 15px;

    }

    .szn-motto-card{

        padding:40px 15px;

        border-radius:20px;

    }

    .szn-motto-card h2{

        font-size:27px;

        letter-spacing:2px;

    }

    .szn-motto-label{

        font-size:11px;

        letter-spacing:3px;

    }

    .szn-motto-card p{

        font-size:14px;

    }

}
.szn-motto-card h2{
    direction:ltr;
    text-align:center;
}
/* =====================================================
        MOBILE - 3 MEMBERS PER ROW
===================================================== */

@media(max-width:768px){

    .members-grid{

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

        gap:10px;

    }

    .member-card{

        padding:12px 6px;

        border-radius:15px;

    }

    .member-card img{

        width:75px;

        height:75px;

        border-width:3px;

    }

    .member-card h3{

        margin-top:12px;

        font-size:15px;

        line-height:1.4;

    }

    .member-card span{

        margin-top:6px;

        font-size:10px;

        letter-spacing:.5px;

        line-height:1.4;

    }


    /* =========================
          SZN MOTTO CARD
    ========================= */

    .szn-motto{

        padding:45px 20px;

    }

    .szn-motto-card{

        width:100%;

        max-width:340px;

        aspect-ratio:1 / 1;

        padding:25px 15px;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        border-radius:22px;

    }

    .szn-motto-card h2{

        font-size:26px;

        line-height:1.4;

        letter-spacing:1px;

        direction:ltr;

        text-align:center;

    }

}


.szn-motto-card h2{

    direction:ltr;

    text-align:center;

    white-space:nowrap;

}

.szn-motto-card h2 span{

    display:inline;

}




@media(max-width:768px){

    .szn-motto-card h2{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:2px;

        white-space:normal;

    }

    .szn-motto-card h2 span{

        display:block;

        white-space:nowrap;

    }

}
/* =====================================================
        EXISTING JOIN REQUEST
===================================================== */

.existing-join{

    width:100%;
    max-width:750px;

    margin:35px auto 0;

    padding:30px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

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

    border-radius:22px;

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

    animation:existingJoinOpen .45s ease;

}


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

.existing-join-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding-bottom:22px;

    margin-bottom:25px;

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

}

.existing-join-header i{

    color:#ff2d2d;

    font-size:24px;

    filter:drop-shadow(
        0 0 10px rgba(255,0,0,.5)
    );

}

.existing-join-header h3{

    font-size:24px;

    font-weight:800;

}


/* =========================
        INFO GRID
========================= */

.existing-join-info{

    display:grid;

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

    gap:15px;

}


/* =========================
        INFO ITEM
========================= */

.join-info-item{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:18px;

    background:rgba(255,255,255,.035);

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

    border-radius:15px;

    transition:.3s;

}

.join-info-item:hover{

    border-color:rgba(255,0,0,.3);

    background:rgba(179,0,0,.08);

    transform:translateY(-3px);

}

.join-info-item span{

    color:#999;

    font-size:13px;

}

.join-info-item strong{

    color:white;

    font-size:16px;

    line-height:1.7;

    word-break:break-word;

}


/* =========================
        WARNING
========================= */

.existing-join-warning{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:22px;

    padding:18px;

    border-radius:15px;

    background:rgba(179,0,0,.08);

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

    color:#d8d8d8;

    line-height:1.8;

}

.existing-join-warning i{

    color:#ff2d2d;

    font-size:18px;

    margin-top:4px;

}


/* =========================
        DELETE BUTTON
========================= */

.delete-join-button{

    width:100%;

    height:55px;

    margin-top:22px;

    border:none;

    border-radius:14px;

    background:rgba(179,0,0,.85);

    color:white;

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

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.delete-join-button:hover{

    background:#d00000;

    transform:translateY(-4px);

    box-shadow:
        0 0 35px rgba(255,0,0,.4);

}

.delete-join-button i{

    margin-left:8px;

}


/* =========================
        ANIMATION
========================= */

@keyframes existingJoinOpen{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:768px){

    .existing-join{

        padding:20px;

        border-radius:18px;

    }

    .existing-join-header h3{

        font-size:19px;

    }

    .existing-join-info{

        grid-template-columns:1fr;

        gap:10px;

    }

    .join-info-item{

        padding:15px;

    }

    .existing-join-warning{

        font-size:13px;

        padding:15px;

    }

    .delete-join-button{

        height:52px;

        font-size:15px;

    }

}
.join-hidden {
    display: none !important;
}
/* =====================================
   CONTACT SELECT
===================================== */

.contact-wrapper {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}




.contact-select {
    position: relative;
    flex: 1;
    min-width: 0;
}


.contact-select select {
    width: 100%;
    height: 100%;

    padding: 0 18px 0 42px;

    border: 1px solid rgba(255, 0, 0, 0.35);
    border-radius: 12px;

    background: rgba(20, 20, 20, 0.9);
    color: #fff;

    font-family: "Vazirmatn", sans-serif;
    font-size: 14px;

    outline: none;

    cursor: pointer;

    appearance: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.contact-select select:hover {
    border-color: rgba(255, 0, 0, 0.7);
}


.contact-select select:focus {
    border-color: #ff0000;

    box-shadow:
        0 0 0 3px rgba(255, 0, 0, 0.12),
        0 0 20px rgba(255, 0, 0, 0.15);
}




.contact-select i {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #ff3b3b;

    pointer-events: none;

    transition: transform 0.25s ease;
}




#contact {
    flex: 1;

    min-width: 0;

    padding: 14px 18px;

    border: 1px solid rgba(255, 0, 0, 0.35);
    border-radius: 12px;

    background: rgba(20, 20, 20, 0.9);
    color: #fff;

    font-family: "Vazirmatn", sans-serif;
    font-size: 15px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


#contact::placeholder {
    color: #888;
}


#contact:focus {
    border-color: #ff0000;

    box-shadow:
        0 0 0 3px rgba(255, 0, 0, 0.12),
        0 0 20px rgba(255, 0, 0, 0.15);
}


#contact:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}


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

@media (max-width: 600px) {

    .contact-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .contact-select {
        width: 100%;
        height: 52px;
    }

    .contact-select select {
        height: 52px;
    }

    #contact {
        width: 100%;
        height: 52px;
    }

}
/* =====================================
   CONTACT BOXES - EQUAL WIDTH
===================================== */

.contact-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

.contact-wrapper .contact-select,
.contact-wrapper #contact {
    width: 50%;
    flex: 0 0 calc(50% - 10px);
    min-width: 0;
}

.contact-wrapper #contact {
    margin-bottom: 20px;
}

.contact-wrapper .contact-select select {
    width: 100%;
}
.contact-wrapper .contact-select,
.contact-wrapper #contact,
.contact-wrapper .contact-select select {
    height: 58px;
}
.contact-wrapper .contact-select {
    width: 35%;
    flex: 0 0 calc(35% - 10px);
}

.contact-wrapper #contact {
    width: 65%;
    flex: 0 0 calc(65% - 10px);
}
#contact {
    direction: ltr;
    text-align: left;
}
/* =====================================================
        MOBILE - ABOUT STATS 3 PER ROW
===================================================== */

@media(max-width:768px){

    .about-stats{

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

        gap:8px;

    }

    .stat-card{

        padding:18px 6px;

        min-height:110px;

        border-radius:15px;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

    }

    .stat-card h3{

        font-size:22px;

        line-height:1.3;

    }

    .stat-card span{

        font-size:11px;

        line-height:1.5;

        margin-top:5px;

    }


    /* =========================
          SZN MOTTO CARD
    ========================= */

    .szn-motto{

        padding:45px 20px;

    }

    .szn-motto-card{

        width:100%;

        max-width:340px;

        aspect-ratio:1 / 1;

        padding:25px 15px;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        border-radius:22px;

    }

    .szn-motto-card h2{

        font-size:26px;

        line-height:1.4;

        letter-spacing:1px;

        direction:ltr;

        text-align:center;

    }

}
/* =====================================
   JOIN CONTACT MOBILE FIX
===================================== */

@media (max-width:768px){

    .contact-wrapper{
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
    }


    .contact-wrapper .contact-select{
        width:100%;
        flex:0 0 100%;
    }


    .contact-wrapper #contact{
        width:100%;
        flex:0 0 100%;
        margin-bottom:20px;
    }


    .contact-wrapper .contact-select select{
        width:100%;
        height:58px;
    }


    .contact-wrapper #contact{
        height:58px;
    }

}
#contact::placeholder{
    direction:rtl;
    text-align:right;
}
/* =====================================================
        SENIOR MEMBER - CIRCULAR PROFILE IMAGE
===================================================== */

.member-image{
    height:230px;

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

    background:#111;
}

.member-image img{

    width:180px;
    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid rgba(255,0,0,.35);

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

    transition:.4s;

}

.member-image img:hover{

    transform:scale(1.05);

    border-color:#ff2d2d;

    box-shadow:
        0 0 35px rgba(255,0,0,.45),
        0 0 80px rgba(255,0,0,.15);

}
/* =====================================================
   MEMBER MODAL - MOBILE FIX
===================================================== */

.member-modal {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.member-box {
    width: min(450px, 100%);
    max-width: 100%;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: auto;
}

.member-image {
    height: 230px;
    flex-shrink: 0;
}

.member-content {
    padding: 25px;
    min-height: 0;
}

.member-content h2 {
    font-size: 28px;
    line-height: 1.4;
}

.member-content h4 {
    font-size: 15px;
    line-height: 1.7;
}

.member-content p {
    font-size: 15px;
    line-height: 2;
}


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

@media (max-width: 600px) {

    .member-modal {
        padding: 12px;
        align-items: center;
    }

    .member-box {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    .member-image {
        height: 180px;
    }

    .member-image img {
        width: 140px;
        height: 140px;
    }

    .member-content {
        padding: 20px 18px;
    }

    .member-content h2 {
        font-size: 23px;
        line-height: 1.4;
    }

    .member-content h4 {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .member-content p {
        font-size: 14px;
        line-height: 2;
    }

}


/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 380px) {

    .member-modal {
        padding: 8px;
    }

    .member-box {
        max-height: calc(100dvh - 16px);
        border-radius: 15px;
    }

    .member-image {
        height: 150px;
    }

    .member-image img {
        width: 115px;
        height: 115px;
    }

    .member-content {
        padding: 16px 14px;
    }

    .member-content h2 {
        font-size: 20px;
    }

    .member-content h4 {
        font-size: 13px;
    }

    .member-content p {
        font-size: 13px;
        line-height: 1.9;
    }

}
.member-close {
    position: absolute;
    top: 15px;
    right: 18px;
    z-index: 10;

    font-size: 32px;
    line-height: 1;

    color: #fff;
    cursor: pointer;

    transition: .25s;
}

.member-close:hover {
    color: #ff2d2d;
    transform: scale(1.15);
}
/* =====================================================
   HERO - RESPONSIVE DESKTOP / LAPTOP FIX
===================================================== */

.hero {
    width: 100%;
    min-height: 100svh;
    height: auto;

    padding: 120px 20px 80px;

    overflow: hidden;
}

.hero-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    padding: 0 20px;
}



.hero h1 {
    font-size: clamp(42px, 7vw, 110px);

    line-height: 1.05;

    letter-spacing: clamp(2px, .6vw, 8px);

    max-width: 100%;

    overflow-wrap: break-word;
}



.hero h2 {
    font-size: clamp(24px, 3vw, 46px);

    line-height: 1.3;

    margin-top: clamp(12px, 2vw, 20px);

    max-width: 100%;
}



.hero p {
    font-size: clamp(14px, 1.3vw, 18px);

    line-height: 1.8;

    margin-top: clamp(15px, 2vw, 30px);

    max-width: 100%;
}



.hero-buttons {
    margin-top: 25px;

    transform: none;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;
}

.hero-buttons .btn {
    min-width: 130px;
}



.hero::before {
    max-width: 100vw;
    max-height: 100vh;
}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1400px) {

    .hero {
        padding-top: 110px;
        padding-bottom: 70px;
    }

    .hero-content {
        max-width: 1100px;
    }

}


/* =====================================================
   SMALL LAPTOP / 1366x768 / 1280x720
===================================================== */

@media (max-width: 1200px) {

    .hero {
        padding-top: 105px;
        padding-bottom: 65px;
    }

    .hero h1 {
        font-size: clamp(38px, 6.5vw, 82px);
    }

    .hero h2 {
        font-size: clamp(22px, 2.8vw, 38px);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .hero {
        min-height: 100svh;

        padding: 105px 15px 70px;
    }

    .hero-content {
        padding: 0 10px;
    }

    .hero h1 {
        font-size: clamp(34px, 10vw, 60px);

        letter-spacing: 2px;
    }

    .hero h2 {
        font-size: clamp(20px, 6vw, 32px);
    }

    .hero p {
        font-size: 14px;
    }

}


/* =====================================================
   PHONE
===================================================== */

@media (max-width: 480px) {

    .hero {
        padding: 100px 12px 65px;
    }

    .hero-content {
        padding: 0 5px;
    }

    .hero h1 {
        font-size: clamp(30px, 11vw, 48px);

        letter-spacing: 1px;
    }

    .hero h2 {
        font-size: clamp(18px, 6vw, 27px);
    }

    .hero p {
        font-size: 13px;
    }

    .hero-buttons {
        gap: 10px;
    }

    .hero-buttons .btn {
        min-width: 115px;
        padding: 12px 25px;
    }

}


/* =====================================================
   VERY SHORT SCREENS
   مثلا لپتاپ 1366x768
===================================================== */

@media (max-height: 800px) and (min-width: 769px) {

    .hero {
        padding-top: 90px;
        padding-bottom: 55px;
    }

    .hero h1 {
        font-size: clamp(42px, 6vw, 75px);
    }

    .hero h2 {
        font-size: clamp(22px, 2.7vw, 36px);
        margin-top: 12px;
    }

    .hero p {
        margin-top: 12px;
        font-size: 15px;
    }

    .hero-buttons {
        margin-top: 15px;
    }

}


html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    position: relative;
}

* {
    max-width: 100%;
}
@media (max-width: 768px) {

    .nav-container {
        position: relative;
        width: 100%;
    }

    
    .logo {
        position: static;
        display: block;
    }

    .logo img {
        position: absolute;
        left: 15px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
    }

    
    .logo span {
        position: absolute;
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    
    .menu-toggle {
        position: absolute;
        right: 15px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        z-index: 10;
    }

}
@media (max-width: 768px) {

    .logo img:hover {
        transform: translateY(-50%);
        filter: none;
    }

}
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

body {
    overflow-x: hidden !important;
}

.hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
}
@media (max-width: 768px) {
    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        position: relative;
        left: 0 !important;
        right: 0 !important;
    }
}

* {
    -webkit-tap-highlight-color: transparent;
}

a,
button,
.member-card,
.btn,
.menu-toggle,
.music-toggle,
.music-panel,
.gallery-item {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

a:focus,
button:focus,
.member-card:focus,
.btn:focus {
    outline: none;
}