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

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

/* html{
    scroll-behavior:smooth;
} */

/* body{
    direction:rtl;
    overflow-x:hidden;
    background:#111;
    color:#fff;
    font-family:IRANSans, sans-serif;
} */

a{
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

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

#header{

    position:fixed;

    top:0;
    right:0;

    width:100%;

    z-index:9999;

    transition:.4s;

}

#header.active{

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

    backdrop-filter:blur(12px);

    box-shadow:0 10px 25px rgba(0,0,0,.2);

}

#header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}
.header-dark{
    background-color: #2d2d2dba;
}
.header-transparent{
    background-color: transparent;
}
/*==============================
        LOGO
==============================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:28px;

    font-weight:bold;

}

.logo img{

    width:85px;

    transition:.4s;

}

.logo span{

    letter-spacing:1px;

}

/*==============================
        MENU
==============================*/

#nav{

    display:flex;

    gap:35px;

}

#nav a{

    color:#fff;

    font-size:17px;

    position:relative;

    transition:.3s;

}

/* خط طلایی زیر منو */

#nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    right:0;

    width:0;

    height:2px;

    background:#ffc107;

    transition:.35s;

}

#nav a:hover{

    color:#ffc107;

}

#nav a:hover::after{

    width:100%;

}

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

.header-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}

.login-btn{

    background:#ffc107;

    color:#111;

    padding:12px 26px;

    border-radius:40px;

    font-weight:bold;

    transition:.35s;

}

.login-btn:hover{

    transform:translateY(-3px);

}

/*==============================
      MENU BUTTON
==============================*/

#menuBtn{

    display:none;

    border:none;

    background:none;

    color:#fff;

    font-size:34px;

    cursor:pointer;

}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

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

.hero img{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

/* تصویر روشن */

.hero-light{

    z-index:1;

}

/* تصویر تاریک */

.hero-dark{

    z-index:2;

    opacity:1;

    transition:opacity 4.2s ease;

}

/* جاوااسکریپت این کلاس را اضافه می‌کند */

.hero-dark.hide{

    opacity:0;

}

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

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
            rgba(0,0,0,.35),
            rgba(0,0,0,.55)
    );

    z-index:3;

}

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

.hero-content{

    position:absolute;

    top:50%;

    left:50%;

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

    width:90%;

    max-width:900px;

    text-align:center;

    z-index:4;

}

.hero-content h1{

    font-size:64px;

    margin-bottom:25px;

    line-height:1.3;

    font-weight:800;

}

.hero-content p{

    font-size:24px;

    line-height:45px;

    margin-bottom:45px;

    color:#f2f2f2;

}


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

#lightBtn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 42px;

    border:none;

    border-radius:60px;

    background:#ffc107;

    color:#111;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.35s;

    overflow:hidden;

    box-shadow:
        0 0 12px rgba(255,193,7,.45),
        0 0 30px rgba(255,193,7,.25);

    animation:glow 2s infinite;

}

#lightBtn:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 0 20px rgba(255,193,7,.8),
        0 0 60px rgba(255,193,7,.45);

}

#lightBtn:active{

    transform:scale(.96);

}

#lightBtn i{

    font-size:22px;

}

/*==============================
        BUTTON SHINE
==============================*/

#lightBtn::before{

    content:"";

    position:absolute;

    top:0;

    right:-100%;

    width:80px;

    height:100%;

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

    transform:skewX(-25deg);

}

#lightBtn:hover::before{

    animation:shine .8s;

}

@keyframes shine{

    to{

        right:120%;

    }

}

/*==============================
      BUTTON GLOW
==============================*/

@keyframes glow{

    0%{

        box-shadow:
        0 0 10px rgba(255,193,7,.35),
        0 0 25px rgba(255,193,7,.15);

    }

    50%{

        box-shadow:
        0 0 25px rgba(255,193,7,.8),
        0 0 60px rgba(255,193,7,.35);

    }

    100%{

        box-shadow:
        0 0 10px rgba(255,193,7,.35),
        0 0 25px rgba(255,193,7,.15);

    }

}

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

.hero-content h1{

    opacity:0;
    color:#fff;
    animation:titleAnimation 1s forwards;

}

.hero-content p{

    opacity:0;

    animation:textAnimation 1s .4s forwards;

}

#lightBtn{

    opacity:0;

    animation:

    glow 2s infinite,

    buttonAnimation 1s .8s forwards;

}

@keyframes titleAnimation{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes textAnimation{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes buttonAnimation{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.logo:hover img{

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

    filter:

    drop-shadow(0 0 10px #ffc107)

    drop-shadow(0 0 25px #ffc107);

}

.logo:hover span{

    color:#ffc107;

}

/*==============================
      LOGIN BUTTON
==============================*/

.login-btn{

    transition:.35s;

}

.login-btn:hover{

    background:#ffd54f;

    box-shadow:

    0 8px 25px rgba(255,193,7,.35);

}

/*==============================
      SCROLL DOWN
==============================*/

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:38px;

    z-index:5;

    animation:scrollArrow 2s infinite;

}

@keyframes scrollArrow{

    0%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

    100%{

        transform:translate(-50%,0);

    }

}

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

#header{

    transition:

    background .4s,

    backdrop-filter .4s,

    box-shadow .4s,

    height .4s;

}

#header.active{

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

    backdrop-filter:blur(15px);

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

}

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

.hero-light,
.hero-dark{

    animation:zoomHero 18s linear infinite alternate;

}

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{


transform:scale(1.08);

    }

}


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

#about{

    padding:100px 0;

    background:#fff;

    color:#333;

}

#about h2{

    text-align:center;

    font-size:42px;

    margin-bottom:30px;

}

#about p{

    max-width:900px;

    margin:auto;

    text-align:center;

    line-height:2.2;

    font-size:18px;

}


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

@media (max-width:992px){

    #menuBtn{

        display:block;

        z-index:1001;

    }

    #nav{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

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

        backdrop-filter:blur(15px);

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.4s;

        z-index:1000;

    }

    #nav.active{

        right:0;

    }

    #nav a{

        font-size:20px;

    }

    .login-btn{

        display:none;

    }
    .login-btn2{
        display:flex !important;
        color:#111 !important;
    }

}


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

@media (max-width:992px){

    #header .container{

        height:75px;

    }

    .logo span{

        font-size:24px;

    }

    .hero-content{

        width:95%;

    }

    .hero-content h1{

        font-size:48px;

    }

    .hero-content p{

        font-size:20px;

        line-height:38px;

    }

}


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

@media (max-width:768px){

    .hero{

        min-height:100vh;

    }

    .hero-content h1{

        font-size:36px;

    }

    .hero-content p{

        font-size:18px;

        line-height:34px;

        margin-bottom:30px;

    }

    #lightBtn{

        width:100%;

        max-width:330px;

        justify-content:center;

        font-size:18px;

        padding:16px;

    }

    .scroll-down{

        font-size:28px;

    }

}


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

@media (max-width:480px){

    .logo img{

        width:66px;

    }
    .hero img{
        object-fit: fill;
    }

    .logo span{

        font-size:20px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .hero-content p{

        font-size:15px;

        line-height:28px;

    }

    #lightBtn{

        font-size:16px;

        padding:14px;

    }

}


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

/* ::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#ffc107;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ffcf33;

} */


/*====================================
        SELECTION
====================================*/

::selection{

    background:#ffc107;

    color:#111;

}


/*====================================
        SMOOTH TRANSITION
====================================*/

.hero,
.hero *,
header,
header *{

    transition:.35s;

}