@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root{

--bg:#090909;
--card:#131313;
--purple:#8b5cf6;
--purple2:#a855f7;
--white:#ffffff;
--text:#cfcfcf;
--border:rgba(255,255,255,.08);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:white;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

section{

padding:100px 8%;

}

.container{

max-width:1300px;
margin:auto;

}

/*================ NAVBAR ================*/

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

padding:22px 8%;

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

background:rgba(9,9,9,.95);

backdrop-filter:blur(15px);

z-index:1000;

border-bottom:1px solid rgba(139,92,246,.15);

}

.logo{

font-family:'Cormorant Garamond',serif;
font-size:2rem;
font-weight:700;

color:white;

letter-spacing:1px;

}

.logo:hover{

color:var(--purple);

}

nav{

display:flex;
align-items:center;
gap:30px;

}

nav a{

color:#d6d6d6;

font-size:.95rem;

font-weight:500;

transition:.3s;

}

nav a:hover,

nav a.active{

color:var(--purple);

}

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

.hero{

height:100vh;

background:

linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.82)),

url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1800");

background-size:cover;
background-position:center;

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

position:relative;

padding:0 8%;

}

.hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(
90deg,
rgba(0,0,0,.55),
rgba(0,0,0,.35)
);

}

.hero-content{

position:relative;

max-width:900px;

text-align:center;

z-index:2;

}

.hero-tag{

display:inline-block;

padding:10px 18px;

border:1px solid rgba(139,92,246,.35);

border-radius:50px;

background:rgba(139,92,246,.12);

color:#d8c8ff;

font-size:.85rem;

letter-spacing:2px;

margin-bottom:30px;

}

.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:5rem;

line-height:1.1;

margin-bottom:25px;

}

.hero p{

max-width:760px;

margin:auto;

font-size:1.08rem;

line-height:1.9;

color:var(--text);

margin-bottom:40px;

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

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

display:inline-block;

padding:15px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-primary{

background:linear-gradient(135deg,var(--purple),var(--purple2));

color:white;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(139,92,246,.45);

}

.btn-secondary{

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

color:white;

}

.btn-secondary:hover{

background:var(--purple);

transform:translateY(-4px);

}

.project-btn{

background:#1b1b1b;

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

color:white;

margin-top:20px;

text-align:center;

}

.project-btn:hover{

background:var(--purple);

}

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

.section-title{

text-align:center;

max-width:800px;

margin:0 auto 70px;

}

.section-title span{

color:var(--purple);

font-size:.9rem;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

}

.section-title h2{

font-family:'Cormorant Garamond',serif;

font-size:3.2rem;

margin:20px 0;

line-height:1.2;

}

.section-title p{

color:var(--text);

font-size:1.05rem;

line-height:1.8;

}

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

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

background:var(--card);

padding:40px 30px;

border-radius:22px;

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

text-align:center;

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

border-color:rgba(139,92,246,.4);

box-shadow:0 18px 45px rgba(139,92,246,.25);

}

.feature-card i{

font-size:2.5rem;

color:var(--purple);

margin-bottom:20px;

}

.feature-card h3{

font-size:1.35rem;

margin-bottom:15px;

}

.feature-card p{

color:var(--text);

line-height:1.7;

}

/*================ SIMPLE ANIMATION ================*/

.feature-card,
.project-card,
.btn-primary,
.btn-secondary{

transition:all .35s ease;

}
/*================ PROJECTS ================*/

.projects-home{

background:#0d0d0d;

}

.projects-grid{

display:grid;

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

gap:35px;

}

.project-card{

background:var(--card);

border-radius:24px;

overflow:hidden;

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

transition:.4s;

display:flex;

flex-direction:column;

}

.project-card:hover{

transform:translateY(-10px);

border-color:rgba(139,92,246,.35);

box-shadow:0 20px 50px rgba(139,92,246,.25);

}

.project-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.45s;

}

.project-card:hover img{

transform:scale(1.05);

}

.project-content{

padding:30px;

display:flex;

flex-direction:column;

flex:1;

}

.project-content h3{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

margin-bottom:15px;

}

.project-content p{

color:var(--text);

line-height:1.8;

margin-bottom:25px;

flex:1;

}

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

.cta{

text-align:center;

background:

linear-gradient(

135deg,

#0b0b0b,

#121212

);

}

.cta span{

display:inline-block;

margin-bottom:20px;

letter-spacing:3px;

color:var(--purple);

font-size:.9rem;

font-weight:600;

}

.cta h2{

font-family:'Cormorant Garamond',serif;

font-size:3.5rem;

margin-bottom:20px;

}

.cta p{

max-width:750px;

margin:auto;

line-height:1.9;

color:var(--text);

margin-bottom:40px;

}

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

footer{

padding:45px 8%;

background:#090909;

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

}

.footer-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.footer-left h3{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

margin-bottom:10px;

}

.footer-left p{

color:#9ca3af;

}

.footer-links{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.footer-links a{

color:#d4d4d4;

transition:.3s;

}

.footer-links a:hover{

color:var(--purple);

}

.footer-social a{

width:50px;

height:50px;

display:flex;

justify-content:center;

align-items:center;

background:#161616;

border-radius:50%;

color:white;

font-size:1.2rem;

transition:.35s;

}

.footer-social a:hover{

background:var(--purple);

transform:translateY(-5px);

}

.copyright{

margin-top:35px;

padding-top:20px;

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

text-align:center;

color:#888;

font-size:.95rem;

}
/*================ RESPONSIVE ================*/

@media (max-width:1100px){

.projects-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:4rem;

}

}

@media (max-width:768px){

.navbar{

flex-direction:column;

padding:18px 6%;

gap:18px;

}

.logo{

font-size:1.8rem;

}

nav{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

nav a{

font-size:.9rem;

}

section{

padding:80px 6%;

}

.hero{

height:auto;

padding:170px 6% 100px;

}

.hero h1{

font-size:3rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,
.btn-secondary{

width:230px;

text-align:center;

}

.feature-grid{

grid-template-columns:1fr;

}

.project-card img{

height:220px;

}

.section-title h2{

font-size:2.4rem;

}

.cta h2{

font-size:2.5rem;

}

.footer-container{

flex-direction:column;

text-align:center;

}

.footer-links{

justify-content:center;

}

}

@media (max-width:500px){

.hero{

padding-top:160px;

}

.hero h1{

font-size:2.4rem;

}

.section-title h2{

font-size:2rem;

}

.logo{

font-size:1.5rem;

}

nav{

gap:12px;

}

nav a{

font-size:.85rem;

}

.project-content{

padding:24px;

}

.project-content h3{

font-size:1.6rem;

}

.feature-card{

padding:30px 22px;

}

.cta h2{

font-size:2rem;

}

.cta p{

font-size:.95rem;

}

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0d0d0d;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#8b5cf6,

#a855f7

);

border-radius:20px;

}

/*================ TEXT SELECTION ================*/

::selection{

background:#8b5cf6;

color:#fff;

}

/*================ SMOOTH EFFECTS ================*/

.project-card,
.feature-card,
.btn-primary,
.btn-secondary,
.project-btn,
nav a,
.footer-social a{

transition:all .35s ease;

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

#contactForm{
    max-width:700px;
    margin:60px auto 0;
    display:flex;
    flex-direction:column;
    gap:22px;
}

#contactForm input,
#contactForm textarea{

    width:100%;
    padding:18px 24px;

    background:#111111;

    border:1px solid rgba(139,92,246,.35);

    border-radius:18px;

    color:#fff;

    font-size:16px;

    font-family:"Poppins",sans-serif;

    transition:.35s;

    outline:none;
}

#contactForm textarea{

    min-height:180px;

    resize:none;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder{

    color:#9b9b9b;
}

#contactForm input:focus,
#contactForm textarea:focus{

    border-color:#8b5cf6;

    box-shadow:0 0 18px rgba(139,92,246,.35);

    background:#181818;
}

#contactForm button{

    width:100%;

    border:none;

    cursor:pointer;
}
/* Card Grid */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* Individual Card */
.card {
  background: #151515;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(139,92,246,0.25); /* subtle purple glow */
}

.card:hover {
  transform: translateY(-8px);
  border-color: #8b5cf6;
  box-shadow: 0 0 30px rgba(139,92,246,0.6); /* stronger glow on hover */
}

.card h2, .card h3 {
  color: #b084f7;
  margin-bottom: 12px;
  font-family: 'Cormorant Garamond', serif;
}

.card p {
  color: #cfcfcf;
  font-size: 0.95rem;
  line-height: 1.6;
}