@font-face {
  font-family: "Cairo";
  src: url("fonts/Cairo-Regular.woff2") format("woff2"),
  url("fonts/Cairo-Regular.woff") format("woff"),
  url("fonts/Cairo-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.woff2") format("woff2"),
  url("fonts/Roboto-Regular.woff") format("woff"),
  url("fonts/Roboto-Regular.ttf") format("truetype");
}

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

:root {
  /* Colors */
  --color-default: #030712;
  --color-50: #111827;
  --color-100: #1f2937;
  --color-200: #374151;
  --color-300: #4b5563;
  --color-400: #6b7280;
  --color-500: #9ca3af;
  --color-600: #d1d5db;
  --color-700: #e5e7eb;
  --color-800: #f3f4f6;
  --color-900: #f9fafb;
  --color-950: #ffffff;
  --color-emerald-500: #10b981;

  /*   REAL COLOR
--color-default: #ffffff;
--color-50: #f9fafb;
--color-100: #f3f4f6;
--color-200: #e5e7eb;
--color-300: #d1d5db;
--color-400: #9ca3af;
--color-500: #6b7280;
--color-600: #4b5563;
--color-700: #374151;
--color-800: #1f2937;
--color-900: #111827;
--color-950: #030712;
--color-emerald-500: #10b981; */

  /* Shadows */

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Font Family */
  --font-family-primary: "Inter", sans-serif;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;

  /* Font Sizes */
  --font-size-h1-desktop: 60px;
  --font-size-h1-tablet: 48px;
  --font-size-h1-mobile: 36px;

  --font-size-h2-desktop: 36px;
  --font-size-h2-tablet: 18px;

  --font-size-h3-desktop: 30px;
  --font-size-h3-tablet: 24px;

  --font-size-subtitle: 20px;
  --font-size-subtitle-tablet: 18px;

  --font-size-body1: 18px;
  --font-size-body1-tablet: 16px;

  --font-size-body2: 16px;
  --font-size-body3: 14px;

  /* Line Heights */
  --line-height-h1-desktop: 72px;
  --line-height-h1-tablet: 48px;
  --line-height-h1-mobile: 40px;

  --line-height-h2-desktop: 40px;
  --line-height-h2-tablet: 28px;

  --line-height-h3-desktop: 36px;
  --line-height-h3-tablet: 32px;

  --line-height-subtitle: 28px;

  --line-height-body1: 28px;
  --line-height-body1-tablet: 24px;

  --line-height-body2: 24px;
  --line-height-body3: 20px;
}

.dark-mode {
  --color-default: #ffffff;
  --color-50: #f9fafb;
  --color-100: #f3f4f6;
  --color-200: #e5e7eb;
  --color-300: #d1d5db;
  --color-400: #9ca3af;
  --color-500: #6b7280;
  --color-600: #4b5563;
  --color-700: #374151;
  --color-800: #1f2937;
  --color-900: #111827;
  --color-950: #030712;
  --color-emerald-500: #10b981;

  /*   REAL COLOR
--color-default: #030712;
--color-50: #111827;
--color-100: #1f2937;
--color-200: #374151;
--color-300: #4b5563;
--color-400: #6b7280;
--color-500: #9ca3af;
--color-600: #d1d5db;
--color-700: #e5e7eb;
--color-800: #f3f4f6;
--color-900: #f9fafb;
--color-950: #ffffff;
--color-emerald-500: #10b981; */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1);
  color: var(--color-500);
  background-color: var(--color-50);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

/* start header */
.main-container {
  overflow: hidden;
}

.main-container header {
  background-color: var(--color-default);
  opacity: 1;
  width: 100%;
  padding: 16px 80px;
  position:;
}

.main-container header .header-container {
  width: 1444px;
  margin: 0 auto;
  padding: 0 23px;
  display: flex;
  justify-content: space-between;
}

/* start logo */

.main-container header .header-container .logo {
  display: flex;
  align-items: center;
  color: var(--color-900);
  font-weight: bold;
  font-size: var(--font-size-subtitle);
}

.main-container header .header-container .logo span {
  color: var(--color-emerald-500);
}

/* end logo */
/* start nav */
/* start nav */

.main-container header .header-container .menu {
  background-color: transparent;
  color: var(--color-600);
  border: none;
  outline: none;
  align-items: center;
  justify-content: center;
}

.main-container header .header-container .menu,
.main-container header .header-container .menu #menu-nav-open,
.main-container header .header-container .menu #menu-nav-close {
  display: none;
}

.main-container header .header-container nav {
  position: relative;
}

.main-container header .header-container nav,
.main-container header .header-container nav ul,
.main-container header .header-container nav .actions {
  display: flex;
  align-items: center;
  column-gap: 24px;
}

.main-container header .header-container nav ul li {
  list-style: none;
}

.main-container header .header-container nav ul li a {
  text-decoration: none;
  color: var(--color-500);
  font-size: var(--font-size-body2);
}

.main-container header .header-container nav ul li a:hover,
.main-container header .header-container nav ul li a:active {
  color: var(--color-600);
}

.main-container header .header-container nav .actions .switch-theme > span {
  display: none;
}

.main-container header .header-container nav .actions .theme {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container header .header-container nav .actions .theme #disactive-mode {
  display: none;
}

.main-container header .header-container nav .actions .theme {
  background-color: transparent;
  border: none;
  outline: none;
}

.main-container header .header-container nav .actions .theme span {
  font-size: 21px;
  padding: 6px;
  color: var(--color-600);
}

.main-container header .header-container nav .actions .downl-cv {
  text-align: center;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  padding: 9px 16px;
  background-color: var(--color-900);
  color: var(--color-50);
  font-size: var(--font-size-body2);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border: none;
  outline: none;
}

.main-container header .header-container nav .actions .downl-cv:hover {
  background-color: var(--color-700);
}

.main-container header .header-container nav .actions .downl-cv:active {
  background-color: var(--color-800);
}

.no-scroll {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* end nav */






/* start responsive design */
@media (max-width: 1444px) {
  .main-container header {
    padding: 16px 0;
  }
  .main-container header .header-container {
    width: 1024px;
  }
}

@media (min-width: 768px) and (max-width: 1123px) {
  .main-container header {
    padding: 16px 0px;
  }
  .main-container header .header-container {
    max-width: 758px;
  }
}

@media (max-width: 767px) {
  .main-container header {
    padding: 0;
  }
  .main-container header .header-container {
    padding: 16px;
    max-width: 100%;
    min-width: 315px;
    margin: 0;
  }
  .main-container header .header-container .logo {
    font-size: 18px !important;
  }

  .main-container header .header-container nav {
    box-shadow: var(--shadow-md);
    width: 70%;
    height: 100vh;
    background-color: var(--color-default);
    position: absolute;
    top: 50px;
    right: 0;
    transform: translateX(100%);
    /* hidden off-screen */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 110000;
    padding-bottom: 15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .main-container header .header-container nav.active {
    transform: translateX(0);
    /* slide in */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-container header .header-container nav > span {
    width: 100%;
    height: 2px;
    background-color: var(--color-50);
  }

  .main-container header .header-container nav ul,
  .main-container header .header-container nav .actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px;
    padding: 16px;
  }

  .main-container header .header-container nav ul {
    gap: 3rem;
    font-size: var(--font-size-h2-desktop);
  }
  .main-container header .header-container nav ul li a {
    font-size: var(--font-size-h3-tablet);
    font-weight: 600;
  }

  .main-container header .header-container .menu {
    display: flex;
  }
  .main-container header .header-container .menu #menu-nav-open {
    display: block;
  }
  .main-container header .header-container .menu #menu-nav-close {
    display: none;
  }
  .main-container header .header-container nav .actions {
    width: 80%;
  }

  .main-container header .header-container nav .actions .switch-theme {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .main-container header .header-container nav .actions .switch-theme > span {
    display: block;
    color: var(--color-500);
  }

  .main-container header .header-container nav .actions .downl-cv {
    min-width: 100%;
  }
}

/* end responsive design */
/* end header */

/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */

/* start main section */

.main-hero {
  background-color: var(--color-default);
  width: 100%;
  padding: 96px 80px 96px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-hero .container {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding: 0 32px;
}

/* start content section */

.main-hero .container .column-info {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 767px;
  max-width: 767px;
}

.main-hero .container .column-info .content h1 {
  color: var(--color-900);
  font-size: var(--font-size-h1-desktop);
  margin-bottom: 30px;
}

.main-hero .container .column-info .content p {
  color: var(--color-600);
  font-size: var(--font-size-body3);
  line-height: 1.6;
}

/* end content section */
/* start location and hire section */

.main-hero .container .column-info .location-hire div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--color-600);
  font-size: var(--font-size-body3);
}

.main-hero .container .column-info .location-hire div span {
  font-size: var(--font-size-body1);
}

.main-hero .container .column-info .location-hire .hire span {
  margin: 0 6px 0 5px;
  width: 6px;
  height: 6px;
  background-color: var(--color-emerald-500);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

/* end location and hire section */
/* start links section */

.main-hero .container .column-info .links i {
  padding: 6px;
  font-size: 24px;
  color: var(--color-600);
  cursor: pointer;
}

.main-hero .container .column-info .links i:hover {
  color: var(--color-900);
}

/* end links section */
/* start col-img section */

.main-hero .container .column-img {
  width: 400px;
  display: flex;
  justify-content: flex-end;
  position: 10;
}

.main-hero .container .column-img .pic-container {
  width: 320px;
  position: relative;
}

.main-hero .container .column-img .pic-container img {
  position: relative;
  width: 280px;
  height: 320px;
  border: solid 10px var(--color-default);
  z-index: 10000;
}

.main-hero .container .column-img .pic-container::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 320px;
  top: 40px;
  left: 40px;
  background-color: var(--color-200);
  z-index: 100;
  transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
}

#main-content.blur {
  filter: blur(5px);
  pointer-events: none;
  /* prevent clicks on blurred content */
  transition: filter 0.3s ease;
}

/* end col-img section */
/* start responsive design */
@media (max-width: 1277px) {
  .main-hero {
    max-width: 100%;
    padding: 96px 0;
  }
  .main-hero .container {
    gap: 5px;
    padding: 0;
  }
  .main-hero .container .column-info {
    gap: 48px;
    max-width: 500px;
    min-width: 30px;
  }
  .main-hero .container .column-img {
    max-width: 350px;
  }
}

@media (max-width: 990px) {
  .main-hero .container {
    width: 100%;
    gap: 100px;
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
  .main-hero .container .column-info {
    padding: min(15px, 5%);
    width: 767px;
    max-width: 100%;
    order: 2;
  }
  .main-hero .container .column-info .content h1 {
    font-size: var(--font-size-h1-mobile);
  }

  .main-hero .container .column-info .content p {
    font-size: var(--font-size-body3);
  }

  .main-hero .container .column-img {
    width: 350px;
  }

  .main-hero .container .column-img .pic-container {
    width: 300px;
  }

  .main-hero .container .column-img .pic-container img {
    width: 250px;
    height: 300px;
    left: 15px;
  }

  .main-hero .container .column-img .pic-container::after {
    width: 280px;
    height: 300px;
    top: 20px;
    left: 0;
  }
}

/* end responsive design */
/* end main section */

/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */

/* start about section */

.main-container section {
  width: 100%;
  padding: clamp(64px, 10vw, 96px) clamp(16px, 5vw, 80px);
  justify-items: center;
  align-content: center;
}

.main-container section.about {
  background-color: var(--color-50);
}

.main-container section.about .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* title will for all sections */

.main-container section .container .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.main-container section .container .title .title-section {
  width: fit-content;
  padding: 4px 20px;
  background-color: var(--color-emerald-500);
  color: var(--color-default);
  font-size: var(--font-size-subtitle-tablet);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-container section .container .title p {
  text-align: center;
  color: var(--color-600);
  font-size: clamp(8px, 19px, 19px);
}

.main-container section.about .container {
  width: 1444px;
}

.main-container section.about .container .about-me {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 630px);
  gap: 48px;
}

.main-container section.about .container .about-me .about-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.main-container section.about .container .about-me .about-img img {
  position: relative;
  width: 400px;
  height: 480px;
  z-index: 15;
  border: solid 8px var(--color-50);
}

.main-container section.about .container .about-me .about-img::before {
  content: "";
  position: absolute;
  top: 40px;
  left: -40px;
  width: 400px;
  height: 480px;
  background-color: var(--color-200);
  z-index: 14;
}

.main-container section.about .container .about-me .info-about-me {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main-container section.about .container .about-me .info-about-me h1 {
  color: var(--color-900);
  font-size: var(--font-size-h3-desktop);
  padding-bottom: 15px;
}
.main-container section.about .container .about-me .info-about-me p {
  color: var(--color-600);
  font-size: var(--font-size-body2);
}

.main-container section.about .container .about-me .info-about-me span {
  color: var(--color-900);
}

.main-container section.about .container .about-me .info-about-me ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  color: var(--color-600);
  padding-left: 25px;
}

/* start responsive design */

@media (max-width: 1290px) {
  .main-container section.about .container {
    width: 100%;
  }
  .main-container section.about .container .about-me {
    grid-template-columns: 1fr;
  }
  .main-container section.about .container .about-me .about-img {
    display: flex;
    justify-content: center;
  }
  .main-container section.about .container .about-me .about-img::before {
    width: 450px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .main-container section.about .container {
    width: 100%;
  }
  .main-container section.about .container .about-me {
    grid-template-columns: 1fr;
  }
  .main-container section.about .container .about-me .about-img {
    display: flex;
    justify-content: center;
  }
  .main-container section.about .container .about-me .about-img img {
    width: 280px;
    height: 360px;
  }
  .main-container section.about .container .about-me .about-img::before {
    width: 320px;
    height: 360px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
  .main-container section.about .container .about-me .info-about-me h1 {
    font-size: var(--font-size-h3-tablet);
  }
  .main-container section.about .container .about-me .info-about-me p,
  .main-container section.about .container .about-me .info-about-me ul {
    font-size: var(--font-size-body3);
    line-height: 1.5;
  }
  .main-container section.about .container .about-me .info-about-me ul {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
}

/* end responsive design */

/* end about section */
/* start skills section */

.main-container section.skills {
  background-color: var(--color-default);
}

.main-container section.skills .container {
  width: 1444px;
  max-width: 100%;
  min-width: 300px;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.main-container section.skills .container p {
  text-align: center;
  color: var(--color-600);
  font-size: clamp(8px, 5vw, 15px);
}

.main-container section.skills .container .skill-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
  width: 1200px;
  max-width: 100%;
  min-width: 300px;
}

.main-container section.skills .container .skill-icons div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 1 100px;
}

.main-container section.skills .container .skill-icons div img {
  width: 64px;
  height: 64px;
}

/* end skills section */
/* start experience section */
.main-container section.experience {
  background-color: var(--color-50);
}
.main-container section.experience .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.main-container section.experience .container .wrapper {
  position: relative;
  background-color: var(--color-default);
  width: clamp(300px, 80vw, 896px);
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 48px;
  padding: 32px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: 0 4px 3px 0 #0000002c;
}

.main-container section.experience .container .wrapper img {
  order: 1;
  width: 50px !important;
}
.main-container section.experience .container .wrapper span {
  order: 1;
  color: var(--color-700);
  font-size: var(--font-size-body2);
}
.main-container section.experience .container .wrapper .info {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: start;
  order: 2;
}
.main-container section.experience .container .wrapper .info > h1 {
  color: var(--color-900);
  font-size: var(--font-weight-semi-bold);
}
.main-container section.experience .container .wrapper .info > ul {
  margin-left: 20px;
}

.main-container section.experience .container .wrapper .info > ul li {
  color: var(--color-600);
  font-size: var(--font-size-body2);
}

.logo-placeholder {
  width: fit-content;
  padding: 2px 4px;
  background-color: var( --color-300);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #777;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .main-container section.experience .container .wrapper {
    flex-direction: column;
    /* width: 350px; */
    gap: 16px;
    overflow: hidden;
    padding: 16px;
  }
  .main-container section.experience .container .wrapper img {
    order: 1;
  }
  .main-container section.experience .container .wrapper span {
    position: static;
    top: 10px;
    left: 20px;
    order: 2;
  }
  .main-container section.experience .container .wrapper .info {
    width: 100%;
    order: 3;
  }
  .main-container section.experience .container .wrapper .info > h1 {
    font-size: var(--font-size-body1);
  }

  .main-container section.experience .container .wrapper .info > ul li {
    font-size: var(--font-size-body3);
  }
}
/* end experience section */
/* start work section */
.main-container section.work {
  background-color: var(--color-default);
}

.main-container section.work .container {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 16vw, 48px);
  padding: 32px;
}

.main-container section.work .container .projects {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 16vw, 48px);
  width: clamp(343px, 100vw, 1152px);
}

.main-container section.work .container .projects .project {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: clamp(32px, 16vw, 48px);
  background-color: var(--color-50);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.main-container section.work .container .projects .project:nth-child(2) figure {
  order: 2;
}

.main-container section.work .container .projects .project figure {
  background-color: var(--color-200);
}

.main-container section.work .container .projects .project figure,
.main-container section.work .container .projects .project .card__content {
  padding: clamp(32px, 16vw, 48px);
}

.main-container section.work .container .projects .project img {
  width: clamp(279px, 50vw, 480px);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: var(--shadow-md);
  object-fit: fill;
}

.main-container section.work .container .projects .project .card__content {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;
}

.main-container
section.work
.container
.projects
.project
.card__content
.card__title {
  color: var(--color-900);
  font-size: var(--font-weight-semi-bold);
}

.main-container
section.work
.container
.projects
.project
.card__content
.card__description {
  color: var(--color-600);
  font-size: var(--font-size-body2);
}

.main-container
section.work
.container
.projects
.project
.card__content
.card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.main-container
section.work
.container
.projects
.project
.card__content
.card__skills
.skill {
  background-color: var(--color-400);
  color: var(--color-default);
  font-size: var(--font-size-body3);
  font-weight: 450;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  width: fit-content;
  padding: 2px 10px;
}

.main-container section.work .container .projects .project .card__content a i {
  color: var(--color-300);
}

@media (max-width: 1156px) {
  .main-container section.work .container .projects {
    width: clamp(343px, 80vw, 1152px);
  }

  .main-container section.work .container .projects .project {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
  }

  .main-container section.work .container .projects .project figure {
    display: flex;
    justify-content: center;
    padding: 32px;
  }
  .main-container section.work .container .projects .project .card__content {
    padding: 32px;
  }
  .main-container
  section.work
  .container
  .projects
  .project:nth-child(2)
  figure {
    order: 1;
  }
  .main-container
  section.work
  .container
  .projects
  .project:nth-child(2)
  .card__content {
    order: 2;
  }
}
/* end work section */
/* start Testimonials section */
.main-container section.Testimonial {
  background-color: var(--color-50);
}

.main-container section.Testimonial .container {
  display: grid;
  gap: 32px;
}

.main-container section.Testimonial .container .Testimonials {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
}

.main-container
section.Testimonial
.container
.Testimonials
.card__Testimonials {
  box-shadow: var(--shadow-lg);
  background-color: var(--color-100);
  width: 373px;
  height: 430px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-container
section.Testimonial
.container
.Testimonials
.img__Testimonial
i {
  width: 64px;
  height: 64px;
  background-color: #9ca3af;
  color: #000000;
  font-size: 30px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container
section.Testimonial
.container
.Testimonials
.card__description {
  font-size: var(--font-size-body3);
  color: var(--color-600);
}

.main-container section.Testimonial .container .Testimonials .card__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-container section.Testimonial .container .Testimonials .card__name {
  font-size: var(--font-weight-semi-bold);
  color: var(--color-900);
}

.main-container section.Testimonial .container .Testimonials .card__span {
  font-size: var(--font-size-body3);
  color: var(--color-600);
}

@media (max-width: 1156px) {
  .main-container
  section.Testimonial
  .container
  .Testimonials
  .card__Testimonials {
    width: 300px;
    padding: 32px;
  }
}
/* end Testimonials section */
/* start contact section */

.main-container section.contact {
  background-color: var(--color-default);
  padding: 96px 80px;
}

.main-container .contact .container {
  display: grid;
  gap: 48px;
  justify-content: center;
}

.main-container .contact .container .contact__info,
.main-container .contact .container .last__colmn {
  display: grid;
  justify-content: center;
  gap: 16px;
}

.main-container .contact .container .contact__info div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: var(--color-200);
  padding: 1.5rem 2rem;
  border-radius: 10px;

}

.main-container .contact .container .contact__info > div i,
.main-container .contact .container .contact__info > div span {
  font-size: var(--font-size-subtitle);
}

.main-container .contact .container .contact__info > div p {
  color: var(--color-900);
  font-size: var(--font-size-subtitle);
}

.main-container .contact .container .last__colmn p {
  color: var(--color-600);
  font-size: var(--font-size-body2);
}

.main-container .contact .container .last__colmn .social {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.main-container .contact .container .last__colmn .social i {
  color: var(--color-600);
}
/* end contact section */
/* start footer section */
footer {
  padding: 24px 80px;
  width: 100%;
  text-align: center;
}

footer p {
  color: var(--color-600);
  font-size: var(--font-size-body3);
}
/* end footer section */


.contact__info a {
  text-decoration: none;
  color: inherit;
  width: fit-content;
  margin: auto;
}

.project__media {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}