@font-face {
    font-family: 'estedad';
    src: url('../fonts/estedad.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }
    
    
@font-face {
    font-family: 'estedad';
    src: url('../fonts/estedad-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    }
        .login-btn{
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid #00ff9d;
  color: #00ff9d;
  transition: 0.3s;
  background: transparent;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  padding:10px;
}



        :root {
            --primary-green: #10b981; 
            --dark-green: #059669;
            --light-green: #d1fae5;
            --white: #ffffff;
            --gray-100: #f3f4f6;
            --gray-800: #1f2937;
            --text-color: #374151;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --transition: all 0.3s ease;
        }
        

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: estedad;
            z-index:200;
        }

        body {
            font-family: estedad;
            background-color: var(--gray-100);
            color: white;
            line-height: 1.6;
            
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        header {
            background-color: #111;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 1000;
            font-family: estedad;
            position: fixed;
            width: 100%;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80px;
            max-width: 1200px;
            margin: 0 auto;
            padding:0 2rem;
        }


        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-green);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo span {
            color: white;
        }

        .nav-menu {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .nav-link {
            color: white;
            position: relative;
            transition: var(--transition);
            padding: 0.5rem 0;
        }


        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            right: 0;
            background-color: var(--primary-green);
            transition: var(--transition);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .auth-buttons {
            display: flex;
            gap: 1rem;
            margin-right: 1rem;
        }

        .btn {
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: inline-block;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary-green);
            color: var(--primary-green);
        }

        .btn-outline:hover {
            background: #0000;
            transform: translateY(-2px);
        }

        .btn-primary {
            background: var(--primary-green);
            color: var(--white);
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
        }

        .btn-primary:hover {
            background: var(--dark-green);
            transform: translateY(-2px);
        }


        .hamburger {
            display: none;
            cursor: pointer;
        }

        .bar {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            transition: var(--transition);
            background-color: white;
            border-radius: 2px;
        }

 
        .lists{
         display: flex;   
        justify-content: center;
        align-items: center;
        gap: 35px;
        }


        @media (max-width: 768px) {
            .hamburger {
                display: block;
            }

            .hamburger.active .bar:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active .bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }

            .nav-menu {
                position: fixed;
                right: -100%;
                top: 80px; /* ارتفاع هدر */
                gap: 0;
                flex-direction: column;
                background-color: #000;
                width: 100%;
                height: calc(100vh - 80px); /* تمام صفحه به جز هدر */
                text-align: center;
                transition: 0.3s;
                box-shadow: 0 10px 10px rgba(0,0,0,0.1);
                padding-top: 2rem;
                overflow-y: auto;
            }

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

            .nav-item {
                margin: 1.5rem 0;
            }

            .nav-link {
                font-size: 1.2rem;
            }

            .auth-buttons {
                flex-direction: column;
                width: 80%;
                gap: 1rem;
            }
            
            .btn {
                width: 100%;
                text-align: center;
            }
            .lists{
                display: block;
            }
            main{
                margin-top:0;
            }
        }
i {
    color: white;
    padding-left: 5px;
    font-size: 14px;
}
.auth-buttons i {
    color: #10b981;
    padding-left: 5px;

}

#bg-iframe{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
border: none;
z-index: 1;
pointer-events: none;
}

main{
position: relative;
z-index: 5;
width: 100%;
height: auto;
}

.footer{
    z-index:10;
    position:relative;
}


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(6px); /* تار کردن پس‌زمینه (مات کردن شیشه) */
    -webkit-backdrop-filter: blur(6px); /* پشتیبانی برای مرورگر سافاری */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* From Uiverse.io by nima-mollazadeh */ 
.loader {
  --dur: 2s;
  --hue: 120; /* رنگ سبز */
  display: block;
  margin: auto;
  width: 14em;
  height: auto;
  background: transparent;
}
.loader__glare-top,
.loader__glare-bottom,
.loader__model,
.loader__motion-thick,
.loader__motion-medium,
.loader__motion-thin,
.loader__sand-drop,
.loader__sand-fill,
.loader__sand-grain-left,
.loader__sand-grain-right,
.loader__sand-line-left,
.loader__sand-line-right,
.loader__sand-mound-top,
.loader__sand-mound-bottom {
  animation-duration: var(--dur);
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  animation-iteration-count: infinite;
}
.loader__glare-top {
  animation-name: glare-top;
}
.loader__glare-bottom {
  animation-name: glare-bottom;
}
.loader__model {
  animation-name: loader-flip;
  transform-origin: 12.25px 16.75px;
}
.loader__motion-thick,
.loader__motion-medium,
.loader__motion-thin {
  transform-origin: 26px 26px;
}
.loader__motion-thick {
  animation-name: motion-thick;
}
.loader__motion-medium {
  animation-name: motion-medium;
}
.loader__motion-thin {
  animation-name: motion-thin;
}
.loader__sand-drop {
  animation-name: sand-drop;
}
.loader__sand-fill {
  animation-name: sand-fill;
}
.loader__sand-grain-left {
  animation-name: sand-grain-left;
}
.loader__sand-grain-right {
  animation-name: sand-grain-right;
}
.loader__sand-line-left {
  animation-name: sand-line-left;
}
.loader__sand-line-right {
  animation-name: sand-line-right;
}
.loader__sand-mound-top {
  animation-name: sand-mound-top;
}
.loader__sand-mound-bottom {
  animation-name: sand-mound-bottom;
  transform-origin: 12.25px 31.5px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 10%);
    --fg: hsl(var(--hue), 90%, 90%);
  }
}
/* Animation */
@keyframes loader-flip {
  from { transform: translate(13.75px, 9.25px) rotate(-180deg); }
  24%, to { transform: translate(13.75px, 9.25px) rotate(0); }
}
@keyframes glare-top {
  from { stroke: rgba(255, 255, 255, 0); }
  24%, to { stroke: white; }
}
@keyframes glare-bottom {
  from { stroke: white; }
  24%, to { stroke: rgba(255, 255, 255, 0); }
}
@keyframes motion-thick {
  from { animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0); stroke: rgba(255, 255, 255, 0); stroke-dashoffset: 153.94; transform: rotate(0.67turn); }
  20% { animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); stroke: rgb(32, 32, 32); stroke-dashoffset: 141.11; transform: rotate(1turn); }
  40%, to { stroke: rgba(255, 255, 255, 0); stroke-dashoffset: 153.94; transform: rotate(1.33turn); }
}
@keyframes motion-medium {
  from, 8% { animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0); stroke: rgba(255, 255, 255, 0); stroke-dashoffset: 153.94; transform: rotate(0.5turn); }
  20% { animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); stroke: white; stroke-dashoffset: 147.53; transform: rotate(0.83turn); }
  32%, to { stroke: rgba(255, 255, 255, 0); stroke-dashoffset: 153.94; transform: rotate(1.17turn); }
}
@keyframes motion-thin {
  from, 4% { animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0); stroke: rgba(255, 255, 255, 0); stroke-dashoffset: 153.94; transform: rotate(0.33turn); }
  24% { animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); stroke: rgb(53, 53, 53); stroke-dashoffset: 134.7; transform: rotate(0.67turn); }
  44%, to { stroke: rgba(255, 255, 255, 0); stroke-dashoffset: 153.94; transform: rotate(1turn); }
}
@keyframes sand-drop {
  from, 10% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); stroke-dashoffset: 1; }
  70%, to { stroke-dashoffset: -107; }
}
@keyframes sand-fill {
  from, 10% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); stroke-dashoffset: 55; }
  70%, to { stroke-dashoffset: -54; }
}
@keyframes sand-grain-left {
  from, 10% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); stroke-dashoffset: 29; }
  70%, to { stroke-dashoffset: -22; }
}
@keyframes sand-grain-right {
  from, 10% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); stroke-dashoffset: 27; }
  70%, to { stroke-dashoffset: -24; }
}
@keyframes sand-line-left {
  from, 10% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); stroke-dashoffset: 53; }
  70%, to { stroke-dashoffset: -55; }
}
@keyframes sand-line-right {
  from, 10% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); stroke-dashoffset: 14; }
  70%, to { stroke-dashoffset: -24.5; }
}
@keyframes sand-mound-top {
  from, 10% { animation-timing-function: linear; transform: translate(0, 0); }
  15% { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); transform: translate(0, 1.5px); }
  51%, to { transform: translate(0, 13px); }
}
@keyframes sand-mound-bottom {
  from, 31% { animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); transform: scale(1, 0); }
  56%, to { transform: scale(1, 1); }
}