/* =====================================================
   KHANE TV SERVICES PAGE
   Modern UI/UX 2026
   ===================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{
    direction:rtl;
    overflow-x:hidden;

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

    background:#070b16;
    color:#ffffff;
    line-height:1.9;
    min-height:100vh;
}

/* ==========================
   VARIABLES
========================== */

:root{

    --primary:#00d4ff;
    --primary-light:#4de4ff;

    --secondary:#7b61ff;

    --accent:#00ffb3;

    --dark:#070b16;
    --dark-2:#0f1629;
    --dark-3:#17213a;

    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.12);

    --text:#ffffff;

    --text-muted:#a9b2c7;

    --radius:24px;

    --shadow:
    0 20px 50px rgba(0,0,0,.35);

}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#09101f;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:100px;
}

/* ==========================
   CONTAINER
========================== */

.container{
    width:min(1400px,92%);
    margin:auto;
}

/* ==========================
   ANIMATED BACKGROUND
========================== */

.mesh-bg{

    position:fixed;
    inset:0;

    z-index:-2;

    background:

    radial-gradient(
    circle at 15% 20%,
    rgba(0,212,255,.18),
    transparent 35%
    ),

    radial-gradient(
    circle at 80% 25%,
    rgba(123,97,255,.20),
    transparent 35%
    ),

    radial-gradient(
    circle at 55% 80%,
    rgba(0,255,179,.12),
    transparent 35%
    ),

    #070b16;

    animation:
    meshMove 18s ease-in-out infinite;
}

@keyframes meshMove{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }

}

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

.grid-overlay{

    position:fixed;
    inset:0;

    z-index:-1;

    opacity:.03;

    background-image:

    linear-gradient(
    rgba(255,255,255,.15) 1px,
    transparent 1px
    ),

    linear-gradient(
    90deg,
    rgba(255,255,255,.15) 1px,
    transparent 1px
    );

    background-size:
    40px 40px;

}

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

section{
    padding:100px 0;
    position:relative;
}

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

.section-header{

    text-align:center;
    margin-bottom:70px;

}

.section-header span{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    margin-bottom:15px;

    font-size:.95rem;

    letter-spacing:1px;
}

.section-header h2{

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

    line-height:1.3;

}

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

.services-hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:60px;

    width:min(1400px,92%);
    margin:auto;
}

.hero-content{
    position:relative;
    z-index:5;
}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:
    12px 20px;

    border-radius:100px;

    border:1px solid var(--glass-border);

    background:var(--glass);

    backdrop-filter:blur(15px);

    margin-bottom:30px;

    color:var(--primary);
}

.hero-content h1{

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

    line-height:1.25;

    margin-bottom:25px;
}

.hero-content p{

    color:var(--text-muted);

    font-size:1.15rem;

    max-width:700px;

    margin-bottom:40px;
}

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

.hero-image{

    position:relative;
}

.hero-image img{

    width:100%;

    border-radius:40px;

    box-shadow:var(--shadow);

    animation:
    floating 5s ease-in-out infinite;
}

@keyframes floating{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

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

.hero-buttons{

    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.btn-primary{

    display:inline-flex;

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

    padding:
    16px 34px;

    border-radius:100px;

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

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;
}

.btn-primary:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 35px
    rgba(0,212,255,.35);
}

.btn-secondary{

    display:inline-flex;

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

    padding:
    16px 34px;

    border-radius:100px;

    border:
    1px solid var(--glass-border);

    backdrop-filter:blur(14px);

    background:var(--glass);

    text-decoration:none;

    color:#fff;

    transition:.35s;
}

.btn-secondary:hover{

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

    transform:
    translateY(-4px);
}

/* ==========================
   BREADCRUMB
========================== */

.breadcrumb{

    position:sticky;
    top:0;

    z-index:100;

    width:min(1400px,92%);
    margin:auto;

    padding:18px 0;

    display:flex;
    gap:12px;

    backdrop-filter:blur(20px);

    background:
    rgba(7,11,22,.65);

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

.breadcrumb a{

    color:var(--primary);

    text-decoration:none;
}

.breadcrumb span{

    color:#c8d0e2;
}

/* ==========================
   TRUST SECTION
========================== */

.trust-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:25px;
}

.trust-card{

    background:var(--glass);

    backdrop-filter:blur(20px);

    border:
    1px solid var(--glass-border);

    border-radius:28px;

    padding:35px;

    text-align:center;

    transition:.4s;
}

.trust-card:hover{

    transform:
    translateY(-10px);

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

.trust-card h3{

    margin-bottom:10px;

    font-size:1.25rem;
}

.trust-card p{

    color:var(--text-muted);
}

/* ==========================
   CATEGORY CARDS
========================== */

.service-category-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:30px;
}

.category-card{

    position:relative;

    overflow:hidden;

    text-decoration:none;

    color:white;

    border-radius:30px;

    padding:45px;

    min-height:220px;

    background:

    linear-gradient(
    145deg,
    rgba(0,212,255,.12),
    rgba(123,97,255,.12)
    );

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

    transition:.4s;
}

.category-card:hover{

    transform:
    translateY(-12px);
}

.category-card h3{

    font-size:1.7rem;
}

/* ==========================
   SERVICE GRID
========================== */

.service-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:30px;
}

.service-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:

    rgba(255,255,255,.05);

    backdrop-filter:blur(25px);

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

    transition:.45s;
}

.service-card:hover{

    transform:
    translateY(-14px);

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

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

.service-card img{

    width:100%;
    height:240px;

    object-fit:cover;
}

.service-card h3{

    font-size:1.35rem;

    padding:
    25px 25px 10px;
}

.service-card p{

    color:var(--text-muted);

    padding:
    0 25px;

    min-height:90px;
}

.service-card a{

    display:inline-block;

    margin:
    25px;

    text-decoration:none;

    color:var(--primary);

    font-weight:700;
}

.service-card a:hover{

    color:var(--accent);
}

/* ==========================
   FLOATING CALL
========================== */

.floating-call{

    position:fixed;

    left:30px;
    bottom:30px;

    width:65px;
    height:65px;

    border-radius:50%;

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

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

    color:white;

    font-size:1.4rem;

    text-decoration:none;

    z-index:999;

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

    animation:
    pulse 2s infinite;
}

@keyframes pulse{

    0%{
        box-shadow:
        0 0 0 0
        rgba(0,212,255,.5);
    }

    70%{
        box-shadow:
        0 0 0 20px
        rgba(0,212,255,0);
    }

    100%{
        box-shadow:
        0 0 0 0
        rgba(0,212,255,0);
    }

}



/* =====================================================
   PROBLEMS SECTION
===================================================== */

.problems-section{
    position:relative;
}

.problem-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:25px;
}

.problem-grid a{

    display:flex;

    align-items:center;

    min-height:110px;

    padding:25px;

    text-decoration:none;

    color:#fff;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;
}

.problem-grid a:hover{

    transform:
    translateY(-8px);

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

    background:
    rgba(255,255,255,.08);
}

/* =====================================================
   BRANDS
===================================================== */

.brands-section{

    position:relative;
}

.brands-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:25px;
}

.brand-card{

    height:140px;

    display:flex;

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

    border-radius:24px;

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

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

    transition:.35s;
}

.brand-card:hover{

    transform:
    translateY(-8px);

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

.brand-card img{

    max-width:70%;
    max-height:70%;
    object-fit:contain;
}

/* =====================================================
   TIMELINE
===================================================== */

.timeline{

    width:min(1200px,92%);
    margin:auto;

    display:grid;

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

    gap:20px;

    position:relative;
}

.timeline::before{

    content:"";

    position:absolute;

    top:40px;
    right:8%;

    width:84%;
    height:4px;

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

    z-index:0;
}

.timeline-item{

    position:relative;

    z-index:1;

    text-align:center;

    padding-top:80px;
}

.timeline-item::before{

    content:"";

    position:absolute;

    top:20px;
    left:50%;

    transform:
    translateX(-50%);

    width:40px;
    height:40px;

    border-radius:50%;

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

    box-shadow:
    0 0 25px
    rgba(0,212,255,.4);
}

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

.faq-container{

    width:min(1000px,92%);
    margin:auto;
}

.faq-item{

    margin-bottom:20px;

    border-radius:24px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

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

.faq-question{

    width:100%;

    border:none;

    background:none;

    color:#fff;

    text-align:right;

    cursor:pointer;

    font-size:1.1rem;

    font-family:inherit;

    padding:25px;
}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:
    max-height .4s ease;

    color:var(--text-muted);
}

.faq-answer p{

    padding:
    0 25px 25px;
}

.faq-item.active .faq-answer{

    max-height:300px;
}

/* =====================================================
   CTA
===================================================== */

.cta-section{

    padding:
    120px 0;
}

.cta-box{

    width:min(1100px,92%);
    margin:auto;

    text-align:center;

    padding:
    80px 50px;

    border-radius:40px;

    overflow:hidden;

    position:relative;

    background:
    linear-gradient(
    135deg,
    rgba(0,212,255,.18),
    rgba(123,97,255,.18)
    );

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

    backdrop-filter:blur(25px);
}

.cta-box::before{

    content:"";

    position:absolute;

    inset:-100px;

    background:

    radial-gradient(
    circle,
    rgba(255,255,255,.15),
    transparent 60%
    );

    animation:
    rotateGlow 18s linear infinite;
}

@keyframes rotateGlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.cta-box h2{

    position:relative;

    z-index:2;

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

    margin-bottom:20px;
}

.cta-box p{

    position:relative;

    z-index:2;

    max-width:700px;

    margin:auto;

    color:var(--text-muted);

    margin-bottom:35px;
}

.cta-box .btn-primary{

    position:relative;
    z-index:2;
}

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

.reveal{

    opacity:0;

    transform:
    translateY(50px);

    transition:
    .8s ease;
}

.reveal.active{

    opacity:1;

    transform:
    translateY(0);
}

/* =====================================================
   HOVER GLOW
===================================================== */

.service-card::after,
.category-card::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    transition:.4s;

    background:

    linear-gradient(
    135deg,
    rgba(0,212,255,.08),
    rgba(123,97,255,.08)
    );
}

.service-card:hover::after,
.category-card:hover::after{

    opacity:1;
}

/* =====================================================
   IMAGE EFFECTS
===================================================== */

.service-card img{

    transition:
    transform .8s ease;
}

.service-card:hover img{

    transform:
    scale(1.08);
}

/* =====================================================
   DARK GLASS
===================================================== */

.service-card,
.category-card,
.trust-card,
.problem-grid a,
.brand-card,
.faq-item{

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

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

.mobile-hidden{
    display:block;
}

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

@media(max-width:1200px){

    .service-grid{
        grid-template-columns:
        repeat(3,1fr);
    }

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

    .brands-grid{
        grid-template-columns:
        repeat(4,1fr);
    }

}

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

@media(max-width:992px){

    .services-hero{

        grid-template-columns:
        1fr;

        text-align:center;

        padding-top:120px;
    }

    .hero-content p{
        margin-inline:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .service-grid{

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

    .problem-grid{

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

    .brands-grid{

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

    .timeline{

        grid-template-columns:
        repeat(3,1fr);
        row-gap:60px;
    }

    .timeline::before{
        display:none;
    }

}

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

@media(max-width:768px){

    section{
        padding:70px 0;
    }

    .service-category-grid{

        grid-template-columns:1fr;
    }

    .service-grid{

        grid-template-columns:1fr;
    }

    .problem-grid{

        grid-template-columns:1fr;
    }

    .brands-grid{

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

    .trust-grid{

        grid-template-columns:1fr;
    }

    .timeline{

        grid-template-columns:1fr;
    }

    .cta-box{

        padding:
        60px 25px;
    }

    .floating-call{

        width:58px;
        height:58px;

        left:20px;
        bottom:20px;
    }

    .hero-content h1{

        font-size:2.4rem;
    }

}

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

@media(max-width:480px){

    .hero-badge{

        font-size:.85rem;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;
    }

    .breadcrumb{

        font-size:.85rem;

        overflow-x:auto;
    }

    .service-card img{

        height:210px;
    }

}




.services-intro p{

    max-width:1100px;
    margin:0 auto 25px;

    color:var(--text-muted);

    text-align:justify;

    line-height:2.2;
}

.stats-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:25px;
}

.stat-card{

    text-align:center;

    padding:40px;

    border-radius:30px;

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

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

.stat-number{

    font-size:3rem;
    font-weight:800;

    color:var(--primary);
}

.stat-label{

    margin-top:10px;

    color:var(--text-muted);
}

.why-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

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

    gap:25px;
}

.why-card{

    padding:35px;

    border-radius:28px;

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

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

.why-card h3{

    margin-bottom:15px;
}

.why-card p{

    color:var(--text-muted);
}

.seo-links-grid{

    width:min(1200px,92%);
    margin:auto;

    display:grid;

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

    gap:20px;
}

.seo-links-grid a{

    display:block;

    padding:22px;

    border-radius:20px;

    text-decoration:none;

    color:#fff;

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

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

    transition:.3s;
}

.seo-links-grid a:hover{

    transform:translateY(-6px);

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

@media(max-width:768px){

    .stats-grid,
    .why-grid,
    .seo-links-grid{

        grid-template-columns:1fr;
    }

}



.featured-services-content{
    position:relative;
}

.service-content-grid{

    width:min(1400px,92%);
    margin:auto;

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

    gap:30px;
}

.service-content-card{

    padding:40px;

    border-radius:30px;

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

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

.service-content-card h3{

    margin-bottom:20px;

    color:var(--primary);
}

.service-content-card p{

    color:var(--text-muted);

    margin-bottom:20px;

    line-height:2;
}

.service-content-card a{

    color:var(--accent);

    text-decoration:none;

    font-weight:700;
}

.brands-links,
.search-tags{

    width:min(1400px,92%);
    margin:auto;

    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
}

.brands-links a,
.search-tags a{

    padding:14px 22px;

    border-radius:100px;

    text-decoration:none;

    color:#fff;

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

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

    transition:.3s;
}

.brands-links a:hover,
.search-tags a:hover{

    transform:translateY(-5px);

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

.service-area-content{

    width:min(1000px,92%);
    margin:auto;
}

.service-area-content p{

    color:var(--text-muted);

    line-height:2.2;

    margin-bottom:25px;

    text-align:justify;
}

@media(max-width:768px){

    .service-content-grid{

        grid-template-columns:1fr;
    }

}


<section class="final-cta">

    <div class="container">

        <div class="final-cta-box">

            <h2>
                تلویزیون یا سیستم صوتی شما دچار مشکل شده است؟
            </h2>

            <p>
                برای دریافت مشاوره تخصصی و ثبت درخواست تعمیر با کارشناسان خانه تی وی تماس بگیرید.
            </p>

            <div class="cta-buttons">

                <a href="tel:09183183537" class="btn-primary">
                    تماس مستقیم
                </a>

                <a href="/contact/" class="btn-secondary">
                    ثبت درخواست تعمیر
                </a>

            </div>

        </div>

    </div>

</section>