/* ==========================================================
   JOSWEBTECH Sections
========================================================== */

/* =========================
   Technologies
========================= */

.technologies{
    background:var(--surface);
}

.tech-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    margin-top:50px;
}

.tech-item{
    text-align:center;
    padding:40px 25px;
    transition:var(--transition);
    cursor:pointer;
}

.tech-item:hover{
    transform:translateY(-10px);
    box-shadow:var(--glow);
}

.tech-item i{
    font-size:3rem;
    color:var(--accent);
    margin-bottom:20px;
}

.tech-item h3{
    color:var(--white);
}

/* =========================
   Services
========================= */

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.service-card{
    padding:35px;
    transition:.35s;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--glow);
}

.service-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-primary);
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
}

.service-card p{
    margin:18px 0;
}

.service-card a{
    color:var(--accent);
    font-weight:600;
}

/* =========================
   Why JOSWEBTECH
========================= */

.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.feature-card{
    padding:35px;
    transition:.35s;
}

.feature-card:hover{
    transform:translateY(-8px);
}

.feature-card i{
    font-size:2.5rem;
    color:var(--primary);
    margin-bottom:20px;
}

/* =========================
   Projects
========================= */

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:35px;
}

.project-card{
    overflow:hidden;
    border-radius:20px;
    transition:.35s;
}

.project-card:hover{
    transform:translateY(-10px);
}

.project-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.project-content{
    padding:25px;
}

/* =========================
   Process Timeline
========================= */

.process-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.process-step{
    text-align:center;
    padding:35px 25px;
}

.process-number{
    width:60px;
    height:60px;
    margin:auto auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-primary);
    color:#fff;
    font-size:1.3rem;
    font-weight:bold;
}

/* =========================
   Testimonials
========================= */

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.testimonial-card{
    padding:35px;
}

.testimonial-card p{
    font-style:italic;
}

.client{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
}

.client img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}

/* =========================
   Blog
========================= */

.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.blog-card{
    overflow:hidden;
    border-radius:20px;
}

.blog-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.blog-content{
    padding:25px;
}

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

.cta{
    text-align:center;
    padding:120px 20px;
    background:linear-gradient(
        135deg,
        rgba(10,132,255,.12),
        rgba(0,212,255,.08)
    );
}

.cta h2{
    margin-bottom:20px;
}

.cta p{
    max-width:700px;
    margin:0 auto 35px;
}

/* =========================
   Responsive
========================= */

@media(max-width:768px){

    .services-grid,
    .projects-grid,
    .testimonial-grid,
    .blog-grid{
        grid-template-columns:1fr;
    }

}
/* Why JOSWEBTECH Enhancements */

.feature-card{
    text-align:center;
}

.feature-card i{
    transition:transform .35s ease,color .35s ease;
}

.feature-card:hover i{
    transform:scale(1.15) rotate(5deg);
    color:var(--accent);
}

.feature-card:hover{
    box-shadow:var(--glow);
}
/* =========================
   Project Tags
========================= */

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.project-tags span{
    padding:8px 14px;
    background:rgba(10,132,255,.12);
    color:var(--accent);
    border:1px solid rgba(10,132,255,.25);
    border-radius:50px;
    font-size:.85rem;
    font-weight:600;
}
/* ==========================
   Technology Stack
========================== */

.tech-stack{
    background:linear-gradient(
        180deg,
        var(--bg),
        var(--surface)
    );
}

.tech-stack .tech-item p{
    margin-top:15px;
    color:var(--muted);
    font-size:.95rem;
}

.tech-stack .tech-item:hover{
    transform:translateY(-12px) scale(1.03);
}
/* ==========================
   Development Process
========================== */

.development-process{
    background:var(--surface);
}

.process-step{
    transition:var(--transition);
}

.process-step:hover{
    transform:translateY(-10px);
    box-shadow:var(--glow);
}

.process-icon{
    font-size:2.5rem;
    color:var(--accent);
    margin:20px 0;
}

.process-step h3{
    margin-bottom:15px;
}
/* ==========================
   Testimonials
========================== */

.testimonials{
    background:var(--bg);
}

.stars{
    color:#FBBF24;
    font-size:1.2rem;
    margin-bottom:20px;
}

.client h4{
    color:var(--white);
    margin-bottom:4px;
}

.client span{
    color:var(--muted);
    font-size:.9rem;
}
/* ==========================
   Blog Preview
========================== */

.blog-preview{
    background:var(--surface);
}

.blog-card{
    transition:var(--transition);
}

.blog-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--glow);
}

.blog-content small{
    color:var(--accent);
    font-weight:600;
    display:block;
    margin-bottom:12px;
}

.read-more{
    display:inline-block;
    margin-top:18px;
    color:var(--accent);
    font-weight:600;
}
/* ==========================================
   CTA SECTION
========================================== */

.cta{
    background:
        linear-gradient(
            180deg,
            var(--bg),
            var(--surface)
        );
}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:70px 40px;

}

.cta-badge{

    display:inline-block;

    padding:10px 20px;

    margin-bottom:25px;

    border-radius:50px;

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

    color:var(--accent);

    border:1px solid rgba(10,132,255,.2);

    font-weight:600;

}

.cta h2{

    margin-bottom:20px;

}

.cta p{

    max-width:700px;

    margin:0 auto 40px;

}
/* ==========================
   ABOUT PAGE
========================== */


.about-grid{

display:grid;

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

gap:30px;

}


.about-card{

padding:40px;

}


.about-card i{

font-size:3rem;

color:var(--accent);

margin-bottom:20px;

}


.mission-vision{

background:var(--surface);

}


.feature-card{

padding:35px;

}
/* ==========================
   FOUNDER SECTION
========================== */


.founder{

background:var(--surface);

}


.founder-grid{

display:grid;

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

gap:50px;

align-items:center;

}



.founder-image img{

width:100%;

max-width:420px;

border-radius:30px;

object-fit:cover;

box-shadow:var(--glow);

}



.founder-content{

padding:40px;

}



.founder-content h2{

font-size:2.5rem;

margin:20px 0;

}



.founder-skills{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:25px;

}



.founder-skills span{

padding:8px 16px;

border-radius:50px;

background:rgba(10,132,255,.15);

color:var(--accent);

font-size:.9rem;

}
/* ==========================
   Expertise
========================== */

.expertise{
    background:var(--bg);
}

.expertise-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.expertise-card{
    padding:35px;
    text-align:center;
    transition:var(--transition);
}

.expertise-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--glow);
}

.expertise-card i{
    font-size:2.5rem;
    color:var(--accent);
    margin-bottom:20px;
}
/* ==========================================
   FAQ
========================================== */

.faq{

background:var(--surface);

}


.faq-container{

max-width:900px;

margin:auto;

}


.faq-item{

margin-bottom:20px;

border-radius:20px;

overflow:hidden;

background:var(--glass);

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

}


.faq-question{

width:100%;

padding:22px 25px;

display:flex;

justify-content:space-between;

align-items:center;

background:none;

border:none;

cursor:pointer;

font-size:1rem;

font-weight:600;

color:var(--white);

text-align:left;

}


.faq-question i{

transition:.3s;

color:var(--accent);

}


.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}


.faq-answer p{

padding:0 25px 25px;

margin:0;

}


.faq-item.active .faq-answer{

max-height:250px;

}


.faq-item.active .faq-question i{

transform:rotate(45deg);

}
/* ==========================================
   FEATURED ARTICLE
========================================== */

.featured-blog{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:50px;
    align-items:center;
}

.featured-image img{
    width:100%;
    border-radius:20px;
    object-fit:cover;
    box-shadow:var(--shadow-md);
}

.featured-content small{
    display:block;
    margin:20px 0;
    color:var(--accent);
    font-weight:600;
}

.featured-content h2{
    margin-bottom:20px;
}
/* ==========================================
   CONTACT FORM
========================================== */

.contact-form-wrapper{

max-width:800px;

margin:auto;

}


.contact-form-wrapper form{

display:flex;

flex-direction:column;

gap:20px;

}


.contact-form-wrapper input,
.contact-form-wrapper textarea,
.contact-form-wrapper select{

width:100%;

padding:16px 20px;

border-radius:15px;

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

background:var(--glass);

color:var(--white);

font-family:inherit;

outline:none;

}


.contact-form-wrapper textarea{

resize:vertical;

}


.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus,
.contact-form-wrapper select:focus{

border-color:var(--accent);

}


.contact-form-wrapper select option{

background:var(--bg);

}


.note{

margin-top:15px;

font-weight:600;

color:var(--accent);

}
/* ==========================================
   LEGAL CONTENT
========================================== */

.legal-content{

background:var(--surface);

}


.legal-box{

max-width:900px;

margin:auto;

}


.legal-box h2{

margin-top:40px;

color:var(--white);

}


.legal-box p{

line-height:1.8;

}


.legal-box ul{

padding-left:25px;

color:var(--text);

}


.legal-box li{

margin-bottom:10px;

}