/* =========================
   Fonts
========================= */

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Black.ttf');
    font-weight: 900;
}

/* =========================
   Root
========================= */

:root {

    --primary: #1e2a78;

    --accent: #ff4fd8;

    --bg: #f5f7fb;

    --text: #111827;

    --card: rgba(255,255,255,.55);
--muted-text: #6b7280;

--card-border: rgba(15,23,42,.06);

--glass-bg: rgba(255,255,255,.58);

--soft-bg: rgba(15,23,42,.03);

--title-color: #0f172a;
}

/* =========================
   Dark Mode
========================= */

body.dark {

    --bg: #08090d;

    --text: #f3f4f6;

    --card: rgba(17,25,40,.55);

    --primary: #7c8cff;

    --accent: #ff6be1;
--muted-text: rgba(255,255,255,.55);

--card-border: rgba(255,255,255,.06);

--glass-bg: rgba(17,25,40,.55);

--soft-bg: rgba(255,255,255,.03);

--title-color: #ffffff;
}

/* =========================
   Reset
========================= */

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

body {

    font-family: 'Vazir';

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

}

/* =========================
   Background Lights
========================= */

.bg-light {

    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    z-index: -1;

}

.bg-light-1 {

    background: rgba(255, 79, 216, 0.18);

    top: -100px;
    right: -100px;

}

.bg-light-2 {

    background: rgba(30, 42, 120, 0.12);

    bottom: -150px;
    left: -150px;

}

/* =========================
   Navbar
========================= */

.navbar-wrapper {

    width: 100%;

    display: flex;

    justify-content: center;

    padding-top: 24px;

}

.navbar {

    width: 92%;

    max-width: 1400px;

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 28px;

    border-radius: 28px;

}

.logo {

    height: 48px;

}

.nav-links {

    display: flex;

    align-items: center;

    gap: 38px;

    list-style: none;

}

.nav-links a {

    text-decoration: none;

    color: var(--text);

    font-size: 15px;

    font-weight: 500;

    transition: 0.3s;

}

.nav-links a:hover {

    color: var(--primary);

}

.nav-left {

    display: flex;

    align-items: center;

    gap: 14px;

}

.login-btn {

    height: 48px;

    padding: 0 24px;

    background: var(--primary);

    color: white;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;

}

.login-btn:hover {

    transform: translateY(-2px);

}

.theme-btn {

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 16px;

    cursor: pointer;

    font-size: 18px;

}

.mobile-menu-btn {

    display: none;

}

/* =========================
   Hero Section
========================= */

.hero-section {

    width: 92%;

    max-width: 1400px;

    margin: auto;

    padding-top: 60px;
    padding-bottom: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

}

/* Right */

.hero-content {

    flex: 1;

}

.hero-badge {

    width: fit-content;

    padding: 10px 18px;

    border-radius: 100px;

    font-size: 14px;

    margin-bottom: 28px;

}

.hero-title {

    font-size: 72px;

    line-height: 1.2;

    font-weight: 900;

    margin-bottom: 24px;

}

.hero-title span {

    color: var(--accent);

}

.hero-description {

    max-width: 650px;

    line-height: 2.2;

    font-size: 18px;

    color: #4b5563;

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

}

.primary-btn {

    height: 58px;

    padding: 0 32px;

    background: var(--primary);

    color: white;

    text-decoration: none;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s;

}

.primary-btn:hover {

    transform: translateY(-3px);

}

.secondary-btn {

    height: 58px;

    padding: 0 32px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: var(--text);

}

/* =========================
   Hero Image
========================= */

.hero-image-wrapper {

    flex: 1;

    position: relative;

    display: flex;

    justify-content: center;

}

.hero-image {

    width: 100%;

    max-width: 620px;

    animation: floatImage 6s ease-in-out infinite;

}

.hero-image {

    width: 100%;

    max-width: 620px;

    border-radius: 30px;

    overflow: hidden;

    box-shadow:
    0 30px 80px rgba(15,23,42,.12);

    animation: floatImage 6s ease-in-out infinite;

}
/* =========================
   Floating Cards
========================= */

.floating-card {

    position: absolute;

    width: 180px;

    padding: 18px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    gap: 12px;

}

.card-icon {

    font-size: 24px;

}

.card-text {

    font-size: 14px;

    font-weight: 700;

}

.card-1 {

    top: 12%;

    right: -20px;

}

.card-2 {

    bottom: 18%;

    right: -40px;

}

.card-3 {

    left: -10px;

    top: 45%;

}

/* =========================
   Animation
========================= */

@keyframes floatImage {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0px);
    }

}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Black.ttf');
    font-weight: 900;
}
/* =========================
   Mobile Menu
========================= */

.mobile-menu {

    position: fixed;

    top: 100px;

    right: 20px;

    left: 20px;

    padding: 24px;

    border-radius: 28px;

    display: flex;

    flex-direction: column;

    gap: 20px;

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transform:
    translateY(-20px);

    transition: .35s;

}

.mobile-menu.active {

    opacity: 1;

    visibility: visible;

    transform:
    translateY(0);

}

.mobile-menu a {

    text-decoration: none;

    color: var(--text);

    font-size: 16px;

    font-weight: 600;

}

body,
.navbar,
.glass,
.hero-title,
.hero-description,
.nav-links a {

    transition:
    background .35s ease,
    color .35s ease,
    border .35s ease;

}
.logo {

    width: 64px;

    height: 64px;

    object-fit: contain;

    border-radius: 14px;

    transition: .35s;

}
body.dark .logo {

    filter:
    brightness(0)
    invert(1);

}
.mobile-menu-btn,
.mobile-menu,
.login-btn,
.primary-btn,
.secondary-btn {

    transition:
    background .35s ease,
    color .35s ease,
    border .35s ease;

}
body.dark {

    background: #08090d;

    color: #f3f4f6;

}
body.dark .navbar,
body.dark .mobile-menu,
body.dark .glass,
body.dark .mobile-menu-btn {

    background: rgba(17,25,40,.55);

    color: #f3f4f6;

}
.hero-name {

    background:
        linear-gradient(
            135deg,
            #4f7cff,
            #7c8cff,
            #b38cff
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    position: relative;

    text-shadow:
        0 0 22px rgba(124,140,255,.18);

}

/* دارک مود */

body.dark .hero-name {

    text-shadow:
        0 0 30px rgba(140,160,255,.28);

}
.section-divider {

    width: 100%;

    max-width: 1200px;

    height: 1px;

    margin: 35px auto 70px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(124,140,255,.35),
        transparent
    );

}