/* =========================================
   FONTS
========================================= */
@font-face {
  font-family: "Shree714";
  src: url("Shree714-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Shree714";
  src: url("Shree714-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}


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

html {
  scroll-behavior: smooth;
}

/* =========================================
   HOME PAGE
========================================= */
body.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  font-family: "Shree714", sans-serif;
}

/* VIDEO BACKGROUND */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}

/* GLOBAL HEADER */
.name {
  position: fixed;
  top: 20px;
  left: 40px;
  font-family: "Shree714", sans-serif;
  font-size: 22px;
  font-weight: 700;
  font-style: italic; /* renders Bold Italic */
  color: white;
  text-decoration: none;
  letter-spacing: 0.5px;
  z-index: 100;
}

.menu {
  position: fixed;
  top: 20px;
  right: 40px;
  display: flex;
  gap: 34px;
  z-index: 100;
}

.menu a {
  font-family: "Shree714", sans-serif;
  font-size: 17px;
  font-weight: 700;
  font-style: italic; /* Bold Italic */
  color: white;
  text-decoration: none;
}


/* GLOBAL FOOTER (Home, Projects, Contact, etc.) */
footer {
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 40px 40px;
  color: black;
  position: static;  /* important */
}


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

body.about-page {
  width: 100%;
  background: white;
  font-family: "Shree714", sans-serif;
  overflow-x: hidden;
}

/* HEADER */

/* ABOUT PAGE HEADER COLOR */

.about-page .name,
.about-page .menu a {
  color: black;
}

.about-page footer {
  color: black; /* or whatever color it should be */
}


/* HERO SECTION */
#about-hero {
  height: 95vh;   /* instead of 100vh */
}

#about-hero h1 {
  position: absolute;
  font-size: 80px;
  font-weight: 600;
  font-style: italic;
  color: #ff3eb5;
  z-index: 10;
}

/* WORD POSITIONS (Figma precision approximation) */
.hi { top: 28%; left: 37.5%; }
.my { top: 28%; left: 56.7%; }
.name-word { top: 42%; left: 28%; }
.is { top: 42%; left: 56.8%; }
.marium { top: 69%; left: 48%; }
.jamal { top: 78%; left: 36%; }

/* HERO IMAGE */
.hero-image {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 240px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ===============================
   ABOUT CONTENT GRID
================================ */

#about-content {
  display: grid;
  grid-template-columns: 310px 310px 310px;
  column-gap: 160px;
  margin: 0 auto;
  width: 1200px;
  padding-top: 40px;
  padding-bottom: 80px;   /* reduced */
}


/* SECTION BLOCKS */
.section-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-number {
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  color: #ff3eb5;
  margin-bottom: 10px;
}

.section-title {
  font-size: 22px;
  font-style: italic;
  font-weight: 700;
  color: #ff3eb5;
  margin-bottom: 20px;
}

.section-text {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* BODY TEXT STYLING FOR ABOUT PAGE */
.about-page .section-text {
  color: #ff3eb5;       /* pink body text */
  text-align: justify;  /* clean print-style alignment */
  text-align-last: left;
  hyphens: auto;
  line-height: 1.7;     /* increases vertical spacing */
  font-weight: 300;     /* light body text look from Figma */
}

.section-row:nth-child(1) {
  margin-top: 0;   /* first column stays highest */
}

.section-row:nth-child(2) {
  margin-top: 620px;  /* adjust value to match figma */
}

.section-row:nth-child(3) {
  margin-top: 920px;  /* deeper step */
}



/* FOOTER */
.about-page footer {
  position: static;   /* removes floating */
  margin-top: 120px;  /* spacing above footer */
  padding: 0 40px 40px;
  color: black;
}