.elementor-1400 .elementor-element.elementor-element-4648d04{--display:flex;}/* Start custom CSS for html, class: .elementor-element-f99f773 */:root{

    --bg:#e0e5ec;

    --primary:#9056f6;
    --secondary:#43acac;

    --text:#3b4252;
    --muted:#6b7280;

    --white:#ffffff;

    --shadow-light:#ffffff;
    --shadow-dark:#bec5cf;

    --radius:32px;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    direction:rtl;

    background:var(--bg);

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

    color:var(--text);

    overflow-x:hidden;

    line-height:2;
}

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

.container{

    width:min(1180px,92%);

    margin:auto;

}

section{



    position:relative;

}

h1,h2,h3,h4{

    line-height:1.7;

    font-weight:800;

}

p{

    color:var(--muted);

    font-size:1rem;

}

img{

    max-width:100%;

    display:block;

}

.gradient-text{

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

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

}

.neu-card{

    background:var(--bg);

    border-radius:var(--radius);

    box-shadow:
    18px 18px 35px rgba(190,197,207,.65),
    -18px -18px 35px rgba(255,255,255,.9);

}

.soft-inset{

    background:var(--bg);

    box-shadow:
    inset 6px 6px 12px rgba(190,197,207,.7),
    inset -6px -6px 12px rgba(255,255,255,.9);

}

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

.btn{

    border:none;

    outline:none;

    cursor:pointer;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:18px;

    font-family:inherit;

    font-size:1rem;

    font-weight:700;

    transition:.35s ease;

}

.btn-primary{

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    10px 10px 24px rgba(0,0,0,.12),
    -8px -8px 18px rgba(255,255,255,.5);

}

.btn-primary:hover{

    transform:translateY(-5px);

}

.hero-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/* =========================
BADGE
========================= */

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:60px;

    font-size:.95rem;

    margin-bottom:28px;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.hero-content h1{

    font-size:clamp(2.2rem,5vw,5rem);

    margin-bottom:24px;

}

.hero-content p{

    font-size:1.15rem;

    margin-bottom:38px;

    max-width:650px;

}

.character-box{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-character-img{

    width:100%;

    max-width:520px;

    position:relative;

    z-index:2;

}

.glow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(144,86,246,.25),
    transparent 70%);

    z-index:1;

}

/* =========================
SECTION TITLE
========================= */

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:2.7rem;

    margin-bottom:18px;

}

/* =========================
FEATURES
========================= */

.features-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    padding:42px 30px;

    text-align:center;

    transition:.35s ease;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-icon{

    width:90px;
    height:90px;

    margin:0 auto 24px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}

/* =========================
PRICING TABLE
========================= */

.pricing-table-wrapper{

    overflow-x:auto;

    padding:25px;

}

.pricing-table{

    width:100%;

    min-width:900px;

    border-collapse:collapse;

}

.pricing-table th{

    padding:22px;

    text-align:center;

    color:var(--text);

    font-weight:800;

    background:
    linear-gradient(
    135deg,
    rgba(144,86,246,.12),
    rgba(67,172,172,.12));

}

.pricing-table td{

    padding:20px;

    text-align:center;

    color:var(--muted);

    border-bottom:
    1px solid rgba(0,0,0,.05);

}

.pricing-table tr:hover{

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

}

/* =========================
OFFER
========================= */

.offer-list{

    margin:28px 0;

    padding-right:18px;

}

.offer-list li{

    margin-bottom:14px;

    color:var(--muted);

}

/* =========================
FORM
========================= */

.form-wrapper{

    max-width:760px;

    margin:auto;

    padding:50px;

}

.form-group{

    margin-bottom:22px;

}

.form-control{

    width:100%;

    border:none;

    outline:none;

    background:var(--bg);

    border-radius:18px;

    padding:18px 22px;

    font-family:inherit;

    font-size:1rem;

    color:var(--text);

    box-shadow:
    inset 6px 6px 12px rgba(190,197,207,.7),
    inset -6px -6px 12px rgba(255,255,255,.9);

}

.form-control:focus{

    box-shadow:
    inset 4px 4px 10px rgba(190,197,207,.7),
    inset -4px -4px 10px rgba(255,255,255,.9),
    0 0 0 3px rgba(144,86,246,.12);

}

.submit-btn{

    width:100%;

}

/* =========================
FAQ
========================= */

.faq-container{

    max-width:920px;

    margin:auto;

}

.faq-item{

    margin-bottom:24px;

    overflow:hidden;

}

.faq-question{

    padding:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-weight:700;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    padding:0 24px;

}

.faq-item.active .faq-answer{

    max-height:250px;

    padding-bottom:24px;

}

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

footer{

    padding:50px 0;

    text-align:center;

}

/* =========================
ANIMATIONS
========================= */

@keyframes floating{

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

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

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

}

.floating-element{

    animation:
    floating 4s ease-in-out infinite;

}

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

@media(max-width:992px){

    section{

        padding:80px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content p{

        margin:auto auto 38px;

    }

    .hero-actions{

        justify-content:center;

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .hero-character-img{

        max-width:380px;

        margin:auto;

    }

    .section-title h2{

        font-size:2rem;

    }

}

@media(max-width:576px){

    body{

        font-size:15px;

    }

    section{

        padding:65px 0;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .btn{

        width:100%;

    }

    .hero-actions{

        flex-direction:column;

    }

    .form-wrapper{

        padding:30px 22px;

    }

    .pricing-table{

        min-width:760px;

    }

    .hero-character-img{

        max-width:280px;

    }

}
/* =========================
OFFER SECTION
========================= */

.offer{
    padding:100px 0;
}

.offer-wrapper{

    padding:60px;

    text-align:right;

}

.offer-content{

    max-width:700px;

    margin:auto;

}

.offer-content h2{

    font-size:3rem;

    margin-bottom:20px;

}

.offer-content p{

    margin-bottom:30px;

    font-size:1.05rem;

}

.offer-list{

    margin-bottom:35px;

    padding-right:20px;

}

.offer-list li{

    margin-bottom:14px;

    color:var(--muted);

}

@media(max-width:768px){

    .offer-wrapper{

        padding:35px 25px;

    }

    .offer-content h2{

        font-size:2rem;

    }

}
/* =========================
DISCOUNT SECTION
========================= */

.discount-section{

    padding:100px 0;

}

.discount-box{

    max-width:760px;

    margin:auto;

    padding:60px;

    text-align:center;

}

.discount-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:60px;

    margin-bottom:24px;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    rgba(144,86,246,.12),
    rgba(67,172,172,.12));

    color:var(--primary);

}

.discount-box h2{

    font-size:3rem;

    margin-bottom:18px;

}

.discount-box p{

    margin-bottom:35px;

    font-size:1.05rem;

}

.coupon-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:14px;

    border-radius:24px;

    max-width:520px;

    margin:auto;

}

#discountCode{

    font-size:1.3rem;

    font-weight:800;

    color:var(--text);

    letter-spacing:1px;

    user-select:all;

}

.copy-btn{

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 28px;

    border-radius:16px;

    font-family:inherit;

    font-size:1rem;

    font-weight:700;

    color:#fff;

    transition:.3s ease;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

.copy-btn:hover{

    transform:translateY(-3px);

}

.copy-message{

    margin-top:18px;

    color:var(--secondary);

    font-weight:700;

    opacity:0;

    transition:.3s ease;

}

.copy-message.show{

    opacity:1;

}

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

@media(max-width:768px){

    .discount-box{

        padding:35px 24px;

    }

    .discount-box h2{

        font-size:2rem;

    }

    .coupon-wrapper{

        flex-direction:column;

    }

    #discountCode{

        font-size:1.1rem;

    }

    .copy-btn{

        width:100%;

    }

}/* End custom CSS */