/* =====================================================
PROJECT DETAILS PAGE
XTREME IT SOLUTIONS USA
===================================================== */



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


.project-hero{

padding:100px 0 80px;

text-align:center;

}



.project-category{

display:inline-block;

background:var(--green-light);

color:var(--green-dark);

padding:8px 18px;

border-radius:50px;

font-size:13px;

font-weight:800;

letter-spacing:.1em;

margin-bottom:25px;

}



.project-hero h1{

font-size:clamp(45px,6vw,70px);

line-height:1.05;

max-width:900px;

margin:auto;

}



.project-intro{

max-width:750px;

margin:30px auto 60px;

font-size:19px;

color:var(--gray);

}




.project-image{

max-width:1100px;

margin:auto;

border-radius:35px;

overflow:hidden;

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

background:#fff;

cursor:zoom-in;

}


.project-image img{

width:100%;

height:auto;

display:block;

object-fit:contain;

}


.fullscreen-btn{

position:absolute;

bottom:25px;

right:25px;

background:#050505;

color:white;

border:none;

padding:12px 25px;

border-radius:50px;

font-weight:700;

cursor:pointer;

opacity:.9;

}


.project-image{

position:relative;

}



/* ================= PROJECT BACK BUTTON ================= */


.project-back-wrapper{

max-width:1200px;

margin:40px auto 0;

padding:0 20px;

}



.project-back-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:50px;

background:white;

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

color:#111;

font-weight:700;

font-size:14px;

transition:.3s;

}



.project-back-btn:hover{

background:#050505;

color:white;

border-color:#050505;

transform:translateX(-5px);

}





/* ================= PROJECT SUMMARY ================= */



.project-summary{

padding:100px 0;

background:#fafafa;

}



.summary-grid{

display:grid;

grid-template-columns:1fr 400px;

gap:70px;

align-items:center;

}



.section-label{

font-size:13px;

font-weight:800;

letter-spacing:.12em;

color:var(--green-dark);

}



.summary-grid h2{

font-size:48px;

line-height:1.1;

margin:20px 0;

}



.summary-grid p{

font-size:17px;

color:var(--gray);

margin-bottom:20px;

}








/* ================= PROJECT INFO CARD ================= */



.project-info-card{

background:white;

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

border-radius:30px;

padding:35px;

}



.project-info-card div{

padding:20px 0;

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

}



.project-info-card div:last-child{

border-bottom:none;

}



.project-info-card strong{

display:block;

font-size:13px;

color:var(--green-dark);

margin-bottom:5px;

text-transform:uppercase;

letter-spacing:.08em;

}



.project-info-card span{

font-size:17px;

font-weight:600;

}









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


.project-challenge{

padding:110px 0;

}



.challenge-grid{

display:grid;

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

gap:30px;

}



.challenge-card{

background:white;

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

border-radius:28px;

padding:40px;

transition:.35s;

}



.challenge-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:

0 30px 70px rgba(0,0,0,.08);

}



.challenge-number{

font-size:14px;

font-weight:800;

color:var(--green);

}



.challenge-card h3{

font-size:26px;

margin:20px 0;

}



.challenge-card p{

color:var(--gray);

}









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


.project-solution{

padding:110px 0;

background:#fafafa;

}



.solution-flow{

display:flex;

align-items:center;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}



.solution-node{

width:280px;

background:white;

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

border-radius:28px;

padding:35px;

text-align:center;

transition:.35s;

}



.solution-node:hover{

transform:translateY(-8px);

}



.solution-node.active{

border:2px solid var(--green);

box-shadow:

0 20px 60px rgba(16,185,129,.18);

}





.solution-icon{

height:60px;

width:60px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:var(--green-light);

}



.solution-icon svg{

height:30px;

width:30px;

stroke:var(--green-dark);

fill:none;

stroke-width:2;

}



.solution-node h3{

font-size:24px;

margin:20px 0 10px;

}



.solution-node p{

color:var(--gray);

}



.solution-line{

font-size:40px;

color:var(--green);

font-weight:800;

}

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


.project-results{

padding:110px 0;

}



.results-grid{

display:grid;

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

gap:30px;

}



.result-card{

background:#050505;

border-radius:30px;

padding:45px;

text-align:center;

color:white;

position:relative;

overflow:hidden;

transition:.35s;

}



.result-card:before{

content:"";

position:absolute;

height:180px;

width:180px;

background:rgba(16,185,129,.2);

filter:blur(60px);

top:-60px;

right:-60px;

}



.result-card:hover{

transform:translateY(-10px);

}



.result-card strong{

display:block;

position:relative;

z-index:2;

font-size:50px;

font-family:"Space Grotesk";

color:var(--green);

margin-bottom:15px;

}



.result-card p{

position:relative;

z-index:2;

color:#aaa;

font-size:16px;

}









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



.technology-section{

padding:100px 0;

background:#fafafa;

}



.tech-box{

background:#050505;

border-radius:35px;

padding:60px;

display:flex;

justify-content:space-between;

align-items:center;

gap:50px;

color:white;

}



.tech-box span{

color:var(--green);

font-size:13px;

font-weight:800;

letter-spacing:.12em;

}



.tech-box h2{

font-size:42px;

margin-top:15px;

line-height:1.1;

}



.tech-tags{

display:flex;

gap:15px;

flex-wrap:wrap;

max-width:500px;

}



.tech-tags div{

padding:14px 22px;

border-radius:50px;

background:#111;

border:1px solid #333;

font-size:14px;

font-weight:600;

transition:.3s;

}



.tech-tags div:hover{

border-color:var(--green);

color:var(--green);

}









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



.project-cta{

padding:100px 0;

}



.project-cta-box{

background:#050505;

border-radius:35px;

padding:60px;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

color:white;

position:relative;

overflow:hidden;

}



.project-cta-box:before{

content:"";

position:absolute;

height:300px;

width:300px;

background:rgba(16,185,129,.25);

filter:blur(100px);

right:-80px;

top:-80px;

}



.project-cta-box span{

position:relative;

z-index:2;

color:var(--green);

font-size:13px;

font-weight:800;

letter-spacing:.12em;

}



.project-cta-box h2{

position:relative;

z-index:2;

font-size:48px;

line-height:1.1;

margin:20px 0;

}



.project-cta-box p{

position:relative;

z-index:2;

color:#aaa;

font-size:17px;

max-width:600px;

}



.project-cta-box a{

position:relative;

z-index:2;

white-space:nowrap;

}









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



.project-details-footer{

margin-top:0;

}









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


.solution-node.active{

animation:aiGlow 3s infinite;

}



@keyframes aiGlow{


50%{

box-shadow:

0 0 60px rgba(16,185,129,.35);

}


}









.project-image img{

transition:.5s;

}



.project-image:hover img{

transform:scale(1.03);

}

/* ================= PROJECT PAGE RESPONSIVE ================= */



@media(max-width:1200px){



.summary-grid{

grid-template-columns:1fr;

}



.challenge-grid{

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

}



.results-grid{

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

}



.tech-box{

flex-direction:column;

align-items:flex-start;

}



}









@media(max-width:900px){



.project-hero{

padding:70px 0;

}



.project-hero h1{

font-size:42px;

}



.project-intro{

font-size:17px;

}



.project-image img{

height:400px;

}



.summary-grid h2{

font-size:38px;

}



.challenge-grid{

grid-template-columns:1fr;

}



.solution-flow{

flex-direction:column;

}



.solution-line{

transform:rotate(90deg);

}



.results-grid{

grid-template-columns:1fr;

}



.project-cta-box{

flex-direction:column;

align-items:flex-start;

}



.project-cta-box h2{

font-size:38px;

}



}









@media(max-width:600px){



.project-hero h1{

font-size:34px;

}



.project-category{

font-size:11px;

}



.project-image{

border-radius:20px;

}



.project-image img{

height:280px;

}



.summary-grid h2{

font-size:32px;

}



.project-info-card{

padding:25px;

}



.challenge-card{

padding:30px;

}



.solution-node{

width:100%;

}



.solution-icon{

height:55px;

width:55px;

}



.result-card{

padding:35px;

}



.result-card strong{

font-size:40px;

}



.tech-box{

padding:35px;

border-radius:25px;

}



.tech-box h2{

font-size:32px;

}



.tech-tags div{

font-size:13px;

padding:12px 18px;

}



.project-cta-box{

padding:35px;

border-radius:25px;

}



.project-cta-box h2{

font-size:32px;

}



}