/* =========================
   HERO — MOBILE FIRST
========================= */

.HeroContainer {
  width: 100%;
  height: 600px;
  margin-top: 25px;
}

.herocenter {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* =========================
   Hero Image
========================= */

.heroimgarea {
  width: 100%;
  height: 100%;
}

.heroimgarea > img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================
   Hero Text
========================= */

.heroTxtarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: rgba(242, 234, 234, 0.5);
}

/* =========================
   Greeting
========================= */

.heroGreeting {
  display: block;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  
}

/* =========================
   Name
========================= */

.heroTxtarea h1 {
  margin: 0;
  font-family: "DM Serif Display", serif;
  font-size: clamp(48px, 14vw, 72px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -1px;
}

/* =========================
   Profession
========================= */

.heroTxtarea h2 {
  margin: 16px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}

.heroTxtarea h2 span {
  display: block;
}

/* =========================
   Description
========================= */

.heroDesc {
  max-width: 500px;
  margin: 16px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

/* =========================
   Buttons
========================= */

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.heroActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
    border-radius: 4px;
}

/* =========================
   Primary Button
========================= */

.btnPrimary {
  background-color: #111;
  color: #fff;
  border: 1px solid #111;
}

/* =========================
   Secondary Button
========================= */

.btnSecondary {
  border: 1px solid #111;

  background-color: transparent;
  color: #111;
}

/* =========================
   Hover
========================= */

.btnPrimary:hover {
  background-color: #fff;
  color: #111;
}

.btnSecondary:hover {
  background-color: #111;
  color: #fff;
}

/* .sidename {
  display: none;
} */

.IntroSection {
  width: 100%;
  padding: 80px 20px;
  background-color: #fff;
  color: #111;
}

.introContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================
   LABEL
========================= */

.introLabel {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 45px;

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.introLabel span:first-child {
  opacity: 0.5;
}

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

.introContent {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/* =========================
   HEADING
========================= */

.introContent h2 {
  margin: 0;

  font-family: "DM Serif Display", serif;
  font-size: clamp(48px, 14vw, 90px);
  font-weight: 400;

  line-height: 0.95;
  letter-spacing: -2px;
}

.introContent h2 span {
  display: block;
}

/* =========================
   RIGHT CONTENT
========================= */

.introRight {
  max-width: 500px;
}

.introDescription {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   LINK
========================= */

.introLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 25px;

  padding-bottom: 6px;

  border-bottom: 1px solid #111;

  color: #111;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;

  text-decoration: none;
}

.introLink span {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.introLink:hover span {
  transform: translate(3px, -3px);
}

/* =========================
   CAPABILITIES
========================= */

.introCapabilities {
  display: grid;
  grid-template-columns: 1fr;

  margin-top: 80px;

  border-top: 1px solid #d5d5d5;
}

.capability {
  padding: 25px 0;

  border-bottom: 1px solid #d5d5d5;
}

.capabilityNumber {
  display: block;

  margin-bottom: 18px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
}

.capability h3 {
  margin: 0 0 10px;

  font-family: "DM Serif Display", serif;
  font-size: 27px;
  font-weight: 400;
}

.capability p {
  max-width: 350px;

  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================
    SELECTED WORK
 ========================= */

.WorkSection {
  width: 100%;
  padding: 80px 20px;

  background-color: #111;
  color: #fff;
}

.workContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.workHeader {
  display: flex;
  flex-direction: column;
  gap: 30px;

  margin-bottom: 60px;
}

.workLabel {
  display: flex;
  align-items: center;
  gap: 12px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.workLabel span:first-child {
  opacity: 0.5;
}

.workIntro {
  max-width: 420px;

  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.7;

  opacity: 0.7;
}

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

.projectList {
  display: flex;
  flex-direction: column;
}

.project {
  display: flex;
  flex-direction: column;

  padding: 25px 0 60px;

  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* =========================
   IMAGE
========================= */

.projectImage {
  display: block;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  background-color: #222;
}

.projectImage img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;
}

.projectImage:hover img {
  transform: scale(1.04);
}

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

.projectInfo {
  padding-top: 25px;
}

.projectMeta {
  display: flex;
  justify-content: space-between;

  margin-bottom: 20px;

  font-family: "Manrope", sans-serif;
  font-size: 10px;

  letter-spacing: 1px;
}

.projectMeta span:last-child {
  opacity: 0.5;
}

.projectInfo h3 {
  margin: 0;

  font-family: "DM Serif Display", serif;
  font-size: 42px;
  font-weight: 400;

  line-height: 1;
}

.projectInfo p {
  max-width: 430px;

  margin: 18px 0 20px;

  font-family: "Manrope", sans-serif;
  font-size: 13px;

  line-height: 1.7;

  opacity: 0.7;
}

/* =========================
   TAGS
========================= */

.projectTags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.projectTags span {
  padding: 7px 10px;

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

  font-family: "Manrope", sans-serif;
  font-size: 9px;

  letter-spacing: 0.5px;
}

/* =========================
   PROJECT LINK
========================= */

.projectLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 25px;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;

  text-decoration: none;
}

.projectLink span {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.projectLink:hover span {
  transform: translate(4px, -4px);
}

/* =========================
   ALL PROJECTS
========================= */

.allProjects {
  padding-top: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.allProjects a {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;

  text-decoration: none;
}

.allProjects a span {
  font-size: 22px;
}

/* =========================
   EXPERTISE
========================= */

.ExpertiseSection {
  width: 100%;
  padding: 90px 20px;

  background-color: #fff;
  color: #111;
}

.expertiseContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.expertiseHeader {
  margin-bottom: 70px;
}

.expertiseLabel {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 45px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.expertiseLabel span:first-child {
  opacity: 0.5;
}

.expertiseHeader h2 {
  margin: 0;

  font-family: "DM Serif Display", serif;
  font-size: clamp(48px, 13vw, 90px);
  font-weight: 400;

  line-height: 0.95;
  letter-spacing: -2px;
}

.expertiseHeader h2 span {
  display: block;
}

/* =========================
   LIST
========================= */

.expertiseList {
  border-top: 1px solid #111;
}

/* =========================
   ITEM
========================= */

.expertiseItem {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 20px;

  padding: 30px 0;

  border-bottom: 1px solid #d5d5d5;
}

.expertiseNumber {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  opacity: 0.45;
}

.expertiseContent h3 {
  margin: 0;

  font-family: "DM Serif Display", serif;
  font-size: 30px;
  font-weight: 400;

  line-height: 1;
}

.expertiseContent p {
  max-width: 500px;

  margin: 15px 0 22px;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.7;

  color: #555;
}

/* =========================
   TECHNOLOGIES
========================= */

.techList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.techList span {
  padding: 7px 10px;

  border: 1px solid #cfcfcf;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.5px;
}

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

.AboutSection {
  width: 100%;
  padding: 90px 20px;

  background-color: #f5f5f5;
  color: #111;
}

.aboutContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================
   LABEL
========================= */

.aboutLabel {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 55px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.aboutLabel span:first-child {
  opacity: 0.5;
}

/* =========================
   MAIN
========================= */

.aboutMain {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.aboutMain h2 {
  margin: 0;

  font-family: "DM Serif Display", serif;
  font-size: clamp(48px, 13vw, 90px);
  font-weight: 400;

  line-height: 0.95;
  letter-spacing: -2px;
}

.aboutMain h2 span {
  display: block;
}

/* =========================
   DESCRIPTION
========================= */

.aboutDescription {
  max-width: 520px;
}

.aboutDescription p {
  margin: 0 0 18px;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

.aboutDescription p:last-of-type {
  margin-bottom: 0;
}

/* =========================
   LINK
========================= */

.aboutLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 30px;
  padding-bottom: 6px;

  border-bottom: 1px solid #111;

  color: #111;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;

  text-decoration: none;
}

.aboutLink span {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.aboutLink:hover span {
  transform: translate(3px, -3px);
}

/* =========================
   FACTS
========================= */

.aboutFacts {
  display: grid;
  grid-template-columns: 1fr;

  margin-top: 80px;

  border-top: 1px solid #111;
}

.aboutFact {
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 22px 0;

  border-bottom: 1px solid #ccc;
}

.aboutFact span {
  font-family: "Manrope", sans-serif;
  font-size: 10px;

  letter-spacing: 1px;
  text-transform: uppercase;

  opacity: 0.5;
}

.aboutFact strong {
  font-family: "DM Serif Display", serif;
  font-size: 23px;
  font-weight: 400;
}


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

.ContactSection {
  width: 100%;
  padding: 100px 20px;

  background-color: #111;
  color: #fff;
}

.contactContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================
   LABEL
========================= */

.contactLabel {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 60px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.contactLabel span:first-child {
  opacity: 0.5;
}

/* =========================
   MAIN
========================= */

.contactMain h2 {
  margin: 0;

  font-family: "DM Serif Display", serif;
  font-size: clamp(55px, 15vw, 110px);
  font-weight: 400;

  line-height: 0.9;
  letter-spacing: -2px;
}

.contactMain h2 span {
  display: block;
}

/* =========================
   DESCRIPTION
========================= */

.contactDescription {
  max-width: 480px;

  margin: 35px 0 0;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.7;

  opacity: 0.7;
}

/* =========================
   EMAIL
========================= */

.contactEmail {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-top: 35px;
  padding-bottom: 8px;

  border-bottom: 1px solid #fff;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 500;

  text-decoration: none;
}

.contactEmail span {
  font-size: 20px;

  transition: transform 0.3s ease;
}

.contactEmail:hover span {
  transform: translate(4px, -4px);
}

/* =========================
   SOCIAL LINKS
========================= */

.contactLinks {
  display: flex;
  flex-direction: column;

  margin-top: 100px;

  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

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

  padding: 18px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 500;

  text-decoration: none;
}

.contactLink span:last-child {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.contactLink:hover span:last-child {
  transform: translate(4px, -4px);
}


/* =========================
   TABLET
========================= */

@media (min-width: 768px) {

  .IntroSection {
    padding: 100px 40px;
  }

  .introContent {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
  }

  .introContent h2 {
    max-width: 650px;
  }

  .introRight {
    flex: 0 0 35%;
  }

  .introCapabilities {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
  }

  .capability {
    border-bottom: none;
  }

   .AboutSection {
    padding: 110px 40px;
  }

  .aboutMain {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    gap: 80px;
  }

  .aboutMain h2 {
    max-width: 650px;
  }

  .aboutDescription {
    flex: 0 0 38%;
  }

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

    column-gap: 50px;
  }

  .ContactSection {
    padding: 130px 40px;
  }

  .contactDescription {
    margin-top: 50px;
  }

  .contactLinks {
    flex-direction: row;

    margin-top: 130px;
  }

  .contactLink {
    flex: 1;

    padding: 18px 20px;

    border-top: none;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }

  .contactLink:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* /* =========================
   DESKTOP
========================= */

@media (min-width: 1024px) {
  .HeroContainer {
    height: 800px;

    width: 100%;
  }

  .herocenter {
    position: relative;
    width: min(90%, 1200px);
    height: 100%;
    margin: 0 auto;
  }

  .heroimgarea {
    position: absolute;
    right: 0;
    top: 0;

    width: 55%;
    height: 100%;
    margin: 0;

    transform: scale(0.8);
  }

  .heroimgarea > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .heroTxtarea {
    position: absolute;
    left: 0;
    top: 0;

    width: 55%;
    height: 100%;

    padding: 0;

    background: transparent;

    z-index: 2;
  }

  .sidename {
    display: block;
    position: absolute;
    left: 0;
    top: 45%;
    transform: rotate(90deg);
    width: 750px;
    margin-left: 200px;
    text-align: center;
    z-index: 3;

    font-family: "DM Serif Display", serif;
    font-size: 60px;
    color: #111;
  }

  .IntroSection {
    padding: 130px 50px;
  }

  .introLabel {
    margin-bottom: 70px;
  }

  .introContent h2 {
    font-size: clamp(70px, 8vw, 110px);
  }

  .introCapabilities {
    margin-top: 120px;
  }

  .capability {
    padding-top: 30px;
    border-top: 1px solid #111;
  }
  .AboutSection {
    padding: 140px 50px;
  }

  .aboutLabel {
    margin-bottom: 90px;
  }

  .aboutMain h2 {
    font-size: clamp(70px, 8vw, 110px);
  }

  .aboutFacts {
    grid-template-columns: repeat(4, 1fr);

    margin-top: 130px;

    column-gap: 40px;
  }

  .aboutFact {
    border-top: 1px solid #111;
    border-bottom: none;

    padding-top: 25px;
  }

  .ContactSection {
    padding: 160px 50px;
  }

  .contactLabel {
    margin-bottom: 100px;
  }

  .contactMain h2 {
    font-size: clamp(80px, 10vw, 140px);
  }

  .contactDescription {
    font-size: 15px;
  }

  .contactEmail {
    font-size: 20px;
  }

  .contactLinks {
    margin-top: 160px;
  }
}