/* =========================================================
                PROJECTS PAGE CSS
                PART 1
========================================================= */

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

.projects-hero{

padding:170px 8% 100px;

min-height:100vh;

display:flex;

align-items:center;

text-align:center;

}

.projects-hero .container{

max-width:1100px;

margin:auto;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

background:rgba(37,99,235,.12);

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

border-radius:50px;

color:var(--primary);

font-weight:600;

margin-bottom:25px;

}

.projects-hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.projects-hero h1 span{

display:block;

color:var(--primary);

}

.hero-text{

max-width:820px;

margin:auto;

font-size:19px;

line-height:34px;

color:var(--text-light);

margin-bottom:55px;

}

/* ==========================================
            PROJECT STATS
========================================== */

.project-stats{

display:grid;

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

gap:25px;

margin-top:50px;

}

.stat-box{

background:var(--glass);

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

border-radius:22px;

padding:30px;

backdrop-filter:blur(20px);

transition:.35s;

box-shadow:var(--shadow);

}

.stat-box:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.stat-box h2{

font-size:34px;

font-weight:800;

margin-bottom:10px;

color:var(--primary);

}

.stat-box p{

font-size:16px;

color:var(--text-light);

}

/* ==========================================
        FEATURED PROJECTS
========================================== */

.featured-projects{

padding:110px 8%;

}

.projects-container{

display:flex;

flex-direction:column;

gap:60px;

}

.section-title{

text-align:center;

font-size:48px;

font-weight:800;

margin-bottom:15px;

}

.section-subtitle{

text-align:center;

font-size:18px;

color:var(--text-light);

margin-bottom:70px;

max-width:760px;

margin-left:auto;

margin-right:auto;

}
/* =========================================================
                PROJECT CARDS
                PART 2
========================================================= */

.project-card{

display:grid;

grid-template-columns:380px 1fr;

gap:40px;

align-items:center;

padding:35px;

background:var(--glass);

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

border-radius:28px;

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

}

.project-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.project-image{

position:relative;

overflow:hidden;

border-radius:20px;

}

.project-image img{

width:100%;

height:280px;

object-fit:cover;

display:block;

transition:.45s;

}

.project-card:hover .project-image img{

transform:scale(1.05);

}

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

.status{

position:absolute;

top:18px;

left:18px;

padding:8px 18px;

border-radius:50px;

font-size:14px;

font-weight:600;

color:#fff;

backdrop-filter:blur(15px);

}

.completed{

background:#16a34a;

}

.progress{

background:#f59e0b;

}

.planned{

background:#2563eb;

}

/* ==========================================
        PROJECT CONTENT
========================================== */

.project-content h3{

font-size:34px;

font-weight:700;

margin-bottom:18px;

}

.project-content p{

font-size:17px;

line-height:32px;

color:var(--text-light);

margin-bottom:25px;

}

/* ==========================================
            TECH STACK
========================================== */

.tech-stack{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:25px;

}

.tech-stack span{

padding:9px 18px;

background:rgba(37,99,235,.10);

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

border-radius:50px;

font-size:14px;

font-weight:500;

transition:.3s;

}

.tech-stack span:hover{

background:var(--primary);

color:#fff;

}

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

.project-features{

list-style:none;

display:grid;

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

gap:14px;

margin-bottom:30px;

padding:0;

}

.project-features li{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

color:var(--text-light);

}

.project-features li::before{

content:"✓";

display:flex;

align-items:center;

justify-content:center;

width:22px;

height:22px;

background:var(--primary);

color:#fff;

border-radius:50%;

font-size:12px;

font-weight:700;

}

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

.project-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.project-buttons a{

text-decoration:none;

}
/* =========================================================
                CTA SECTION
                PART 3
========================================================= */

.cta{

padding:110px 8%;

}

.cta-box{

padding:70px 50px;

text-align:center;

border-radius:30px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

box-shadow:0 25px 60px rgba(37,99,235,.35);

overflow:hidden;

position:relative;

}

.cta-box::before{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:260px;

height:260px;

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

border-radius:50%;

}

.cta-box h2{

font-size:46px;

font-weight:800;

color:#fff;

margin-bottom:20px;

position:relative;

z-index:1;

}

.cta-box p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:34px;

color:rgba(255,255,255,.92);

margin-bottom:40px;

position:relative;

z-index:1;

}

.cta-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

position:relative;

z-index:1;

}

.cta-buttons .primary-btn{

background:#fff;

color:#2563EB;

}

.cta-buttons .primary-btn:hover{

transform:translateY(-5px);

}

.cta-buttons .secondary-btn{

border:2px solid #fff;

color:#fff;

background:transparent;

}

.cta-buttons .secondary-btn:hover{

background:#fff;

color:#2563EB;

}

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

footer{

padding:40px 8%;

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

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

backdrop-filter:blur(18px);

}

.footer-container{

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.footer-container p{

font-size:15px;

color:var(--text-light);

}

/* =========================================================
                PAGE EFFECTS
========================================================= */

.projects-hero,
.featured-projects,
.cta{

animation:fadeUp .8s ease;

}

.project-card{

animation:fadeUp .9s ease;

}

.project-card:nth-child(2){

animation-delay:.1s;

}

.project-card:nth-child(3){

animation-delay:.2s;

}

.project-card:nth-child(4){

animation-delay:.3s;

}

/* =========================================================
                SMALL EFFECTS
========================================================= */

.project-card h3{

transition:.3s;

}

.project-card:hover h3{

color:var(--primary);

}

.project-image{

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

}

.project-buttons .primary-btn,
.project-buttons .secondary-btn{

min-width:150px;

text-align:center;

}
/* =========================================================
            PROJECTS RESPONSIVE
            PART 4 (FINAL)
========================================================= */

/* ==========================
        Laptop
========================== */

@media (max-width:1200px){

.projects-hero h1{

font-size:58px;

}

.project-card{

grid-template-columns:320px 1fr;

gap:30px;

}

.project-image img{

height:240px;

}

}

/* ==========================
        Tablet
========================== */

@media (max-width:992px){

.projects-hero{

padding:140px 6% 80px;

}

.projects-hero h1{

font-size:50px;

}

.hero-text{

font-size:17px;

line-height:30px;

}

.project-stats{

grid-template-columns:1fr;

}

.project-card{

grid-template-columns:1fr;

text-align:center;

}

.project-image{

max-width:520px;

margin:auto;

}

.project-content{

display:flex;

flex-direction:column;

align-items:center;

}

.project-features{

grid-template-columns:1fr;

}

.project-buttons{

justify-content:center;

}

}

/* ==========================
        Mobile
========================== */

@media (max-width:768px){

.projects-hero{

padding:120px 20px 60px;

}

.projects-hero h1{

font-size:40px;

}

.hero-text{

font-size:16px;

line-height:28px;

}

.stat-box{

padding:22px;

}

.project-card{

padding:24px;

}

.project-image img{

height:220px;

}

.project-content h3{

font-size:28px;

}

.project-content p{

font-size:15px;

line-height:28px;

}

.tech-stack{

justify-content:center;

}

.project-buttons{

flex-direction:column;

width:100%;

}

.project-buttons .primary-btn,
.project-buttons .secondary-btn{

width:100%;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:30px;

}

.cta-box p{

font-size:16px;

line-height:28px;

}

}

/* ==========================
      Small Mobile
========================== */

@media (max-width:480px){

.projects-hero h1{

font-size:34px;

}

.hero-tag{

font-size:14px;

padding:8px 18px;

}

.hero-text{

font-size:15px;

}

.project-card{

padding:18px;

}

.project-image img{

height:190px;

}

.project-content h3{

font-size:24px;

}

.tech-stack span{

font-size:13px;

padding:8px 14px;

}

.project-features li{

font-size:14px;

}

.cta-box{

padding:30px 18px;

}

.cta-box h2{

font-size:24px;

}

footer{

padding:30px 20px;

}

}

/* ==========================
      Large Screens
========================== */

@media (min-width:1600px){

.projects-hero .container{

max-width:1400px;

}

.projects-hero h1{

font-size:88px;

}

.hero-text{

font-size:21px;

line-height:38px;

}

.projects-container{

gap:80px;

}

.project-card{

grid-template-columns:450px 1fr;

}

.project-image img{

height:320px;

}

}