/* style.css */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

/* :root{

  --primary:#4F46E5;
  --secondary:#7C3AED;
  --accent:#06B6D4;

  --bg:#F8FAFC;
  --card-bg:rgba(255,255,255,0.75);

  --text:#0F172A;
  --text-light:#64748B;

  --border:rgba(79,70,229,0.12);

  --shadow:
  0 12px 30px rgba(79,70,229,0.10);

  --radius:24px;

  --sans:'DM Sans', sans-serif;
  --serif:'DM Serif Display', serif;
} */

:root{

  --primary:#5A0F1C;      /* Burgundy */
  --secondary:#7A1D2B;    /* Wine Red */
  --accent:#B7B9BC;       /* Soft Silver */

  --bg:#F5F3F2;           /* Warm Ivory */
  --card-bg:rgba(255,255,255,0.82);

  --text:#24191B;         /* Rich Charcoal */
  --text-light:#6D6668;

  --border:rgba(90,15,28,0.12);

  --shadow:
  0 12px 30px rgba(90,15,28,0.08);

  --radius:24px;

  --sans:'DM Sans', sans-serif;
  --serif:'DM Serif Display', serif;
}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  position:relative;
}

/* BACKGROUND GRID */

body::before{

  content:'';

  position:fixed;

  inset:0;

  background-image:
  /* linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px); */
  linear-gradient(rgba(90,15,28,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(90,15,28,0.03) 1px, transparent 1px);

  background-size:60px 60px;

  z-index:-2;
}

/* BLUR */

.blur{
  position:fixed;
  width:350px;
  height:350px;
  border-radius:50%;
  filter:blur(120px);
  z-index:-1;
}

.blur1{
  background:#5A0F1C;
  top:-100px;
  left:-100px;
  opacity:0.25;
}

.blur2{
  background:#7A1D2B;
  bottom:-100px;
  right:-100px;
  opacity:0.25;
}

/* NAVBAR */

nav{

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

  padding:1rem 8%;

  position:sticky;
  top:0;

  background:rgba(255,255,255,0.82);

  border-bottom:1px solid rgba(90,15,28,0.08);

  backdrop-filter:blur(16px);

  z-index:999;
}

.logo{
  font-family:var(--serif);
  font-size:1.3rem;
}

.nav-links{
  display:flex;
  gap:2rem;
}

.nav-links a{
  text-decoration:none;
  color:var(--text-light);
  transition:0.3s;
}

.nav-links a:hover{
  color:var(--primary);
}

/* COMMON SECTION */

section{
  padding:2rem 8%;
}

.hero,
.skills-grid,
.projects-grid,
.about-grid,
.timeline,
.contact-section{
  max-width:1400px;
  margin:auto;
}

/* .section-title{

  font-size:14px;

  text-transform:uppercase;

  letter-spacing:3px;

  color:var(--primary);

  margin-bottom:2rem;
} */

.section-title{

  font-size:15px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:3px;

  color:var(--primary);

  margin-bottom:2.5rem;
}

/* HERO */

.hero{

  min-height:90vh;

  display:grid;

  grid-template-columns:1.1fr 0.9fr;

  align-items:center;

  gap:3rem;

  padding:6rem 8% 3rem;
}

.hero-left{
  max-width:700px;
}

.floating-badge{

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(255,255,255,0.6);

  border:1px solid rgba(255,255,255,0.4);

  backdrop-filter:blur(14px);

  margin-bottom:1.5rem;

  color:var(--primary);

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

.hero-tag{

  letter-spacing:3px;

  color:var(--primary);

  margin-bottom:1rem;

  font-size:14px;
}

.hero h1{

  font-family:var(--serif);

  font-size:4.5rem;

  line-height:1.05;

  margin-bottom:1.5rem;
}

.hero h1 span{

  background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-desc{

  color:var(--text-light);

  line-height:1.9;

  max-width:620px;

  margin-bottom:2rem;

  font-size:1.05rem;
}

/* BUTTONS */

.hero-buttons{
  display:flex;
  gap:1rem;
  margin-bottom:2rem;
}

.primary-btn,
.secondary-btn{

  padding:14px 28px;

  border:none;

  border-radius:14px;

  cursor:pointer;

  font-weight:600;

  transition:0.3s;
}

.primary-btn{

    background:linear-gradient(
   135deg,
   #5A0F1C,
   #7A1D2B
  );

  color:white;

  box-shadow:
  0 20px 40px rgba(90,15,28,0.18);
}

.secondary-btn{

  /* background:white;

  border:1px solid var(--border); */
  
    background:linear-gradient(
   135deg,
   #5A0F1C,
   #7A1D2B
  );

  color:white;

  box-shadow:
  0 20px 40px rgba(90,15,28,0.18);
}

.primary-btn:hover,
.secondary-btn:hover{
  transform:translateY(-4px);
}

/* STATS */

.hero-stats{

  display:flex;
  gap:2rem;
}

.stat h3{

  font-size:2rem;

  background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat p{
  color:var(--text-light);
  font-size:14px;
}

/* HERO RIGHT */

.hero-right{

  position:relative;

  height:500px;
}

.floating-card{

  position:absolute;

  background:var(--card-bg);

  backdrop-filter:blur(18px);

  padding:1.1rem;

  border:1px solid rgba(90,15,28,0.08);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  width:280px;

  transition:0.4s;

  border:1px solid transparent;
}

.floating-card:hover{
  transform:translateY(-10px);
  border-color:rgba(90,15,28,0.15);

  box-shadow:
  0 20px 40px rgba(90,15,28,0.12);
}

.floating-card i{

  font-size:40px;

  color:var(--primary);

  margin-bottom:1rem;
}

.floating-card h3{
  margin-bottom:0.7rem;
}

.floating-card p{

  color:var(--text-light);

  line-height:1.7;
}

.card-one{
  top:20px;
  left:20px;
}

.card-two{
  top:180px;
  right:10px;
}

.card-three{
  bottom:20px;
  left:20px;
}

/* ABOUT */
/* 
.about-grid{

  display:grid;

  grid-template-columns:1fr 380px;

  gap:2rem;
}

.about-left p{
  color:var(--text-light);
  line-height:2;
  margin-bottom:1rem;
}

.info-card{

  background:var(--card-bg);

  padding:2rem;

  border-radius:var(--radius);

  backdrop-filter:blur(14px);

  box-shadow:var(--shadow);

  border:1px solid transparent;

  transition:0.3s;
}

.info-card:hover{
  border-color:rgba(99,102,241,0.15);

  box-shadow:
  0 20px 40px rgba(99,102,241,0.15);
}

.info-row{

  display:flex;
  justify-content:space-between;

  padding:1rem 0;

  border-bottom:1px solid rgba(0,0,0,0.05);
}

.info-row span{
  color:var(--text-light);
} */

/* ABOUT */

.about-section{
  position:relative;
}

.about-grid{

  display:grid;

  grid-template-columns:1.2fr 0.8fr;

  gap:3rem;

  align-items:center;
}

/* LEFT */

.about-left{
  max-width:750px;
}

.about-highlight{

  display:flex;

  gap:1rem;

  align-items:flex-start;

  padding:1.5rem;

  border-radius:24px;

  background:
  linear-gradient(
    135deg,
    rgba(99,102,241,0.08),
    rgba(139,92,246,0.06)
  );

  border:1px solid rgba(99,102,241,0.08);

  margin-bottom:2rem;
}

.highlight-icon{

  min-width:60px;
  height:60px;

  border-radius:18px;

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

  background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  color:white;

  font-size:28px;
}

.about-highlight h2{

  font-size:2rem;

  margin-bottom:0.5rem;

  font-family:var(--serif);
}

.about-highlight p{

  color:var(--text-light);

  line-height:1.8;
}

.about-text p{

  color:var(--text-light);

  line-height:2;

  margin-bottom:1.2rem;

  font-size:1.05rem;
}

/* MINI STATS */

.mini-stats{

  display:flex;

  gap:1rem;

  margin-top:2rem;

  flex-wrap:wrap;
}

.mini-card{

  background:rgba(255,255,255,0.7);

  backdrop-filter:blur(12px);

  padding:1rem 1.4rem;

  border-radius:20px;

  min-width:120px;

  box-shadow:var(--shadow);

  transition:0.3s;
}

.mini-card:hover{
  transform:translateY(-6px);
}

.mini-card h3{

  font-size:1.5rem;

  color:var(--primary);

  margin-bottom:0.3rem;
}

.mini-card span{
  color:var(--text-light);
  font-size:14px;
}

/* RIGHT */

.about-right{
  display:flex;
  justify-content:center;
}

.info-card{

  width:100%;

  max-width:420px;

  background:rgba(255,255,255,0.75);

  backdrop-filter:blur(18px);

  padding:2rem;

  border-radius:32px;

  box-shadow:
  0 20px 50px rgba(99,102,241,0.12);

  border:1px solid rgba(255,255,255,0.5);

  transition:0.4s;
}

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

/* TOP */

.info-top{

  display:flex;

  align-items:center;

  gap:1rem;

  margin-bottom:2rem;
}

.profile-circle{

  width:70px;
  height:70px;

  border-radius:50%;

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

  background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  color:white;

  font-weight:700;

  font-size:1.4rem;
}

.info-top h3{
  margin-bottom:0.3rem;
}

.info-top p{
  color:var(--text-light);
}

/* ROWS */

.info-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:1.1rem 0;

  border-bottom:
  1px solid rgba(0,0,0,0.06);
}

.education-row{
  align-items:flex-start;
}

.education-content{
  text-align:right;
  max-width:260px;
}

.education-content p{
  margin-bottom:4px;
  line-height:1.5;
}

.education-content strong{
  color:var(--text);
} 

.info-row span{
  color:var(--text-light);
}

.info-row p{
  font-weight:500;
}

/* MOBILE */

@media(max-width:1000px){

  .about-grid{
    grid-template-columns:1fr;
  }

  .about-highlight h2{
    font-size:1.7rem;
  }

}

@media(max-width:700px){

  .about-highlight{
    flex-direction:column;
  }

  .mini-stats{
    gap:0.8rem;
  }

  .mini-card{
    flex:1;
    min-width:100px;
  }

}


/* SKILLS */

.skills-grid{

  display:grid;

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

  gap:1.2rem;
}

/* .skill-card{

  background:var(--card-bg);

  padding:2rem;

  border-radius:var(--radius);

  backdrop-filter:blur(14px);

  box-shadow:var(--shadow);

  transition:0.3s;

  border:1px solid transparent;
} */

.skill-card{

  background:var(--card-bg);

  padding:2rem;

  border-radius:24px;

  backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,0.4);

  box-shadow:var(--shadow);

  transition:0.35s ease;
}

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

  border-color:rgba(99,102,241,0.15);

  box-shadow:
  0 20px 40px rgba(99,102,241,0.15);
}

.skill-card i{
  font-size:40px;
  color:var(--primary);
  margin-bottom:1rem;
}

/* .skill-card p{
  color:var(--text-light);
} */

.skill-card h3{
  margin-bottom:10px;
  font-size:1.1rem;
}

.skill-card p{

  color:var(--text-light);

  line-height:1.7;

  font-size:0.95rem;
}

/* TIMELINE */

.timeline{
  position:relative;
  margin-left:1rem;
}

.timeline-content ul{

  padding-left:20px;

  margin-top:15px;
}

.timeline-content li{

  color:var(--text-light);

  margin-bottom:10px;

  line-height:1.7;
}

.timeline::before{

  content:'';

  position:absolute;

  left:0;
  top:0;

  width:2px;
  height:100%;

  background:var(--primary);
}

.timeline-item{
  position:relative;
  padding-left:3rem;
  margin-bottom:2rem;
}

.timeline-dot{

  position:absolute;

  left:-10px;
  top:5px;

  width:20px;
  height:20px;

  border-radius:50%;

  background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );
}

.timeline-content{

  background:var(--card-bg);

  padding:2rem;

  border-radius:var(--radius);

  backdrop-filter:blur(14px);

  box-shadow:var(--shadow);

  transition:0.3s;

  border:1px solid transparent;
}

.timeline-content:hover{

  border-color:rgba(99,102,241,0.15);

  box-shadow:
  0 20px 40px rgba(99,102,241,0.15);
}

.timeline-date{
  color:var(--primary);
}

.timeline-content h3{
  margin:1rem 0 0.5rem;
}

.timeline-content h4{
  color:var(--text-light);
  margin-bottom:1rem;
}

.timeline-content p{
  color:var(--text-light);
  line-height:1.8;
}

/* PROJECTS */

.projects-grid{

  display:grid;

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

  gap:1.3rem;
}

.project-card{

  background:var(--card-bg);

  padding:2rem;

  border-radius:var(--radius);

  backdrop-filter:blur(14px);

  box-shadow:var(--shadow);

  transition:0.3s;

  border:1px solid transparent;
}

.project-card:hover{

  transform:translateY(-10px);

  border-color:rgba(99,102,241,0.15);

  box-shadow:
  0 20px 40px rgba(99,102,241,0.15);
}

.project-icon i{
  font-size:42px;
  color:var(--primary);
}

.project-card h3{
  margin:1rem 0;
}

.project-card p{
  color:var(--text-light);
  line-height:1.8;
}

.tags{

  display:flex;
  flex-wrap:wrap;

  gap:0.6rem;

  margin-top:1.5rem;
}

.tags span{

  padding:7px 14px;

  border-radius:999px;

  background:#F1E9EA;

  color:var(--primary);

  font-size:13px;
}

/* ==========================
   ACHIEVEMENTS
========================== */

.achievement-grid{

  display:grid;

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

  gap:1.5rem;
}

.achievement-card{

  text-align:center;

  background:var(--card-bg);

  backdrop-filter:blur(14px);

  padding:2.5rem 2rem;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  border:1px solid transparent;

  transition:0.35s;
}

.achievement-card:hover{

  transform:translateY(-10px);

  border-color:rgba(99,102,241,0.15);

  box-shadow:
  0 20px 40px rgba(99,102,241,0.15);
}

.achievement-card i{

  font-size:55px;

  color:var(--primary);

  margin-bottom:1rem;
}

.achievement-card h3{

  margin-bottom:1rem;

  font-size:1.3rem;
}

.achievement-card p{

  color:var(--text-light);

  line-height:1.8;
}

/* ==========================
   CERTIFICATIONS
========================== */

.certifications-grid{

  display:grid;

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

  gap:1.5rem;
}

.cert-card{

  background:var(--card-bg);

  backdrop-filter:blur(14px);

  padding:2rem;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  border:1px solid transparent;

  transition:0.35s;
}

.cert-card:hover{

  transform:translateY(-8px);

  border-color:rgba(99,102,241,0.15);

  box-shadow:
  0 20px 40px rgba(99,102,241,0.15);
}

.cert-card i{

  font-size:42px;

  color:var(--primary);

  margin-bottom:1rem;
}

.cert-card h3{

  margin-bottom:0.8rem;

  font-size:1.15rem;
}

.cert-card p{

  color:var(--text-light);

  line-height:1.8;
}

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

.contact-section {

  position:relative;

  overflow:hidden;

  padding:50px 8%;

  text-align:center;
}

.contact-glow {

  position:absolute;

  width:500px;
  height:00px;

  background:radial-gradient(circle,
      rgba(90,15,28,0.12) 0%,
      transparent 70%);

  top:-220px;
  left:50%;

  transform:translateX(-50%);

  z-index:0;
}

.contact-section>* {

  position:relative;

  z-index:2;
}

.contact-badge {

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(255,255,255,0.6);

  border:1px solid rgba(255,255,255,0.5);

  backdrop-filter:blur(12px);

  font-size:14px;

  margin-bottom:24px;

  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.contact-section h2 {

  font-size:clamp(3rem, 7vw, 5.5rem);

  line-height:1.05;

  margin-bottom:24px;

  font-family:var(--serif);
}

.contact-desc {

  max-width:700px;

  margin:auto;

  margin-bottom:35px;

  font-size:1.1rem;

  line-height:1.8;

  color:#64748b;
}

.contact-tags {

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:50px;
}

.contact-tags span {

  padding:12px 18px;

  border-radius:999px;

  background:rgba(255,255,255,0.65);

  border:1px solid rgba(255,255,255,0.5);

  backdrop-filter:blur(12px);

  font-size:14px;

  transition:0.3s;
}

.contact-tags span:hover {

  transform:translateY(-4px);

  box-shadow:0 10px 25px rgba(90,15,28,0.12);
}

.contact-links {

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:24px;
}

.contact-card {

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

  padding:22px 28px;

  min-width:280px;

  text-decoration:none;

  border-radius:24px;

  background:rgba(255,255,255,0.85);

  border:1px solid rgba(90,15,28,0.10);

  backdrop-filter:blur(16px);

  box-shadow:0 12px 30px rgba(90,15,28,0.06);

  transition:all 0.35s ease;
}

.contact-card:hover {

   transform:translateY(-8px);

  border-color:rgba(90,15,28,0.25);

  box-shadow:0 20px 45px rgba(90,15,28,0.12);
}

.contact-icon{

  width:60px;
  height:60px;

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

  border-radius:18px;

  background:linear-gradient(
    135deg,
    rgba(90,15,28,0.12),
    rgba(129,31,47,0.10)
  );

  font-size:26px;

  color:var(--primary);
}

.contact-card h3{
  color:var(--text);
  margin-bottom:4px;
  font-size:1.05rem;
}

.contact-card p{
  color:var(--text-light);
  font-size:0.95rem;
}

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

footer{

  padding:2rem;

  text-align:center;

  color:var(--text-light);
}

/* RESPONSIVE */

@media(max-width:1000px){

  .hero,
  .about-grid{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:auto;
    padding-top:6rem;
  }

  .hero-right{
    display:none;
  }

  .hero h1{
    font-size:3rem;
  }

  .about-grid{
    gap:1.5rem;
  }

}

@media(max-width:700px){

  .nav-links{
    display:none;
  }

  section{
    padding:4rem 6%;
  }

  .hero h1{
    font-size:2.5rem;
  }

  .hero-stats{
    flex-wrap:wrap;
    gap:1rem;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .contact-section h2{
    font-size:2.5rem;
  }

}