/* ==========================================
   KARAJ SITE COMPONENTS
========================================== */

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

.site-header.scrolled{

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

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

}

/* ==========================================
   SCROLL PROGRESS BAR
========================================== */

.scroll-progress{

    position:fixed;

    top:0;
    right:0;

    height:3px;

    width:0;

    z-index:999999;

    background:linear-gradient(
    90deg,
    var(--gold-light),
    var(--gold)
    );

    box-shadow:
    0 0 20px rgba(200,146,61,.7);

}

/* ==========================================
   MOUSE GLOW
========================================== */

.mouse-glow{

    position:fixed;

    width:350px;
    height:350px;

    border-radius:50%;

    pointer-events:none;

    z-index:0;

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

    background:
    radial-gradient(
        circle,
        rgba(200,146,61,.10) 0%,
        rgba(200,146,61,.05) 25%,
        transparent 70%
    );

}

/* ==========================================
   SERVICE CARDS
========================================== */

.services-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.service-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:32px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

    transition:.4s;

}

.service-card::before{

    content:"";

    position:absolute;

    top:-100px;
    left:-100px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(200,146,61,.20),
    transparent 70%
    );

}

.service-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(200,146,61,.35);

    box-shadow:
    var(--shadow-gold);

}

.service-icon{

    width:70px;
    height:70px;

    border-radius:20px;

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

    font-size:30px;

    color:var(--gold);

    background:
    rgba(200,146,61,.10);

    margin-bottom:25px;

}

.service-card h3{

    margin-bottom:15px;

    font-size:1.3rem;

}

.service-card p{

    color:var(--text-muted);

}

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

.features-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.feature-box{

    padding:35px;

    text-align:center;

    border-radius:28px;

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

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

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-gold);

}

.feature-number{

    font-size:3rem;

    font-weight:900;

    color:var(--gold);

    margin-bottom:10px;

}

/* ==========================================
   PORTFOLIO
========================================== */

.portfolio-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:35px;

}

.portfolio-card{

    overflow:hidden;

    border-radius:30px;

    background:#111;

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

    transition:.4s;

}

.portfolio-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    var(--shadow-gold);

}

.portfolio-image{

    height:260px;

    overflow:hidden;

}

.portfolio-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.8s;

}

.portfolio-card:hover img{

    transform:scale(1.08);

}

.portfolio-content{

    padding:30px;

}

.portfolio-content h3{

    margin-bottom:10px;

}

.portfolio-content p{

    color:var(--text-muted);

}

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

.pricing-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(330px,1fr));

    gap:30px;

}

.price-card{

    position:relative;

    padding:45px;

    border-radius:35px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

}

.price-card.featured{

    border:
    1px solid rgba(200,146,61,.4);

    transform:scale(1.03);

}

.price-badge{

    position:absolute;

    top:20px;
    left:20px;

    background:var(--gold);

    color:#000;

    padding:8px 16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

}

.price-card h3{

    margin-bottom:20px;

    font-size:1.6rem;

}

.price{

    font-size:3rem;

    color:var(--gold);

    font-weight:900;

    margin-bottom:25px;

}

.price-features{

    list-style:none;

}

.price-features li{

    padding:12px 0;

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

}

/* ==========================================
   STEPS
========================================== */

.steps-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.step-card{

    position:relative;

    padding:40px;

    border-radius:28px;

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

}

.step-number{

    font-size:4rem;

    font-weight:900;

    color:
    rgba(200,146,61,.25);

}

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

.faq{

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:18px;

    border-radius:22px;

    overflow:hidden;

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

}

.faq-question{

    padding:25px;

    cursor:pointer;

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

    font-weight:700;

}

.faq-answer{

    padding:25px;

    display:none;

    color:var(--text-muted);

}

.faq-item.active .faq-answer{

    display:block;

}

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

.contact-form{

    max-width:850px;

    margin:auto;

}

.form-grid{

    display:grid;

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

    gap:20px;

}

.input-group{

    margin-bottom:20px;

}

.input-group input,
.input-group textarea{

    width:100%;

    border:none;

    outline:none;

    padding:18px 22px;

    border-radius:18px;

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

    color:#fff;

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

    font-family:inherit;

}

.input-group textarea{

    min-height:220px;

    resize:vertical;

}

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

.cta-box{

    text-align:center;

    padding:80px;

    border-radius:40px;

    overflow:hidden;

    position:relative;

    background:
    linear-gradient(
    135deg,
    rgba(200,146,61,.12),
    rgba(200,146,61,.04)
    );

    border:
    1px solid rgba(200,146,61,.2);

}

.cta-box h2{

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

    margin-bottom:20px;

}

.cta-box p{

    color:var(--text-muted);

    max-width:800px;

    margin:auto;

}

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

.call-float{

    text-decoration:none;

}

.call-float:hover{

    transform:
    scale(1.08);

}

.call-float.bounce{

    animation:
    bounce .9s ease;

}

@keyframes bounce{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }

}

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

.menu-toggle{

    width:52px;
    height:52px;

    display:none;

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

    cursor:pointer;

    border-radius:14px;

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

}

.menu-toggle span{

    width:24px;
    height:2px;

    background:#fff;

    position:relative;

}

.menu-toggle span::before,
.menu-toggle span::after{

    content:"";

    position:absolute;

    width:100%;
    height:2px;

    background:#fff;

    right:0;

}

.menu-toggle span::before{

    top:-7px;

}

.menu-toggle span::after{

    top:7px;

}

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

.footer-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr;

    gap:40px;

}

.footer-title{

    color:var(--gold);

    margin-bottom:20px;

    font-size:1.2rem;

}

.footer-links{

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:var(--text-muted);

}

.footer-links a:hover{

    color:var(--gold);

}