html {
  scroll-behavior: smooth;
}

body {
  color: hsl(240, 1%, 22%);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
}

.background-container {
  padding-top: 5rem;
  padding-bottom: 5rem;
  width: 70%;
}
.grid {
  display: grid;
}

.section-title {
  text-align: center;
  font-size: 3em;
  font-weight: 300;
  padding-bottom: 4rem;
  padding-top: 10rem;
  opacity: 0;
}

@keyframes byFade4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.byFade4 {
  animation: byFade4 1.2s 1s ease both;
}

.section-title span {
  font-weight: 400;
}

/* .section-title::before {
  content: attr(data-heading);
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #e49551;
} */

/* Main - About */
.about-container {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5%;
  padding-bottom: 0rem;
  width: 100%;
}
.about-img {
  justify-self: center; /* horizontal alignment */
  align-self: stretch; /* 👈 stretches to fill row height */
  width: 110%; /* fixed width */
  height: 100%; /* fills available height */
  animation: byUp 1.5s 0.2s ease both;
}

@keyframes byUp {
  0% {
    transform: translateX(25%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
  }
}

.about-heading {
  margin: 0%;
  font-size: 2.3em;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 2rem;
  text-align: left;
  animation: byFade3 1.2s 1s ease both;
}

.about-heading span {
  font-weight: 550;
}

.byFade3 {
  animation: byFade3 1.4s 0.8s ease both;
}

@keyframes byFade3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.about-description {
  font-size: 1.1em;
  font-weight: 300;
  text-align: justify;
  margin-bottom: 2rem;
  line-height: 1.5;
  opacity: 0;
}

.about-info {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-auto-rows: 120px; /* each row will be 400px tall */
  column-gap: 0.5rem;
  overflow: hidden; /* hides below the line */
  justify-content: space-around;
}
.about-box {
  text-align: center;
  background-color: rgb(65, 63, 63);
  /* background: linear-gradient(to bottom, #e49551 50%, rgb(65, 63, 63) 50%); */
  border-radius: 10px;
  color: aliceblue;
  opacity: 0;
}

.about-icon {
  display: block; /* <-- key */
  font-size: 3rem;
  margin-top: 0.2em; /* now works */
  color: #e49551;
}

/*  */

.about-title,
.about-subtitle {
  padding-top: 0.3em;
  font-size: 0.875rem;
  color: #e9e9e7;
  text-align: center;
}
.about-subtitle {
  color: #e09c27;
  font-weight: 400;
}
/* Main - Skills */
.skills-container {
  grid-template-columns: 460px 520px;
  column-gap: 3rem;
  justify-content: center;
  padding: 0%;
  margin-bottom: 4em;
  opacity: 0;
}

.skills-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.skills-header:not(:last-child) {
  margin-bottom: 2.5rem;
}
.skills-icon,
.skills-arrow {
  font-size: 2rem;
  color: #e49551;
}
.skills-icon {
  margin-right: 0.75rem;
}
.skills-arrow {
  margin-left: auto;
}
.skills-active .skills-arrow {
  transform: rotate(-90deg);
  transition: 0.4s;
}
.skills-title {
  font-size: 1.25rem;
  font-weight: 500;
}
.skills-subtitle {
  font-size: 1rem;
  font-weight: 300;
}
.skills-list {
  row-gap: 1.8rem;
}
.skills-titles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.skills-name {
  font-size: 1rem;
  font-weight: 500;
}
.skills-bar,
.skills-percentage {
  height: 5px;
  border-radius: 0.25rem;
}

.skills-number {
  font-weight: 300;
}
.skills-bar {
  background-color: hsl(242, 14%, 10%);
}
.skills-percentage {
  display: block;
  background-color: #e49551;
}
.skills [data-content] {
  display: none;
}
.skills-active[data-content] {
  display: block;
}

/* Main - Services */
/* GRID CONTAINER */
.services-container {
  position: relative;
  display: grid; /* ← required */
  grid-template-columns: repeat(3, 275px);
  grid-auto-rows: 300px;
  justify-content: center; /* center the whole grid */
  gap: 3rem;
  overflow: hidden; /* hides below the line */
}

.services-content {
  position: relative;
  background-image: url(images/bk2.webp);
  /* background: #f19646; */
  border-radius: 0.5rem;
  /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
  background: linear-gradient(to bottom, #e49551 70%, rgb(65, 63, 63) 30%);
  opacity: 0;
}

@keyframes slideUp2 {
  from {
    transform: translateY(100%); /* hidden at the line */
  }
  to {
    transform: translateY(0); /* fully visible */
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    opacity: 1;
  }
}

.slideUp2 {
  animation: slideUp2 1.4s 0.8s ease-out forwards;
}
.services-wrapper {
  display: flex; /* side-by-side layout */
  align-items: center; /* vertical align within the row */
  gap: 0.75rem; /* spacing between icon & title */
  height: 100%; /* take full card height */
  padding: 1rem;
  box-sizing: border-box;
}

.services-icon {
  font-size: 3.5rem; /* adjust size */
  color: #363535;
}

.services-title {
  margin: 0;
  font-size: 1.2em;
  font-weight: 400;
  color: #3f3e3d;
  text-align: left;
}

.services-title span {
  font-size: 1.5em;
  font-weight: 550;
}

/* floating button */
.services-button {
  position: absolute;
  bottom: 1em;
  right: 1em;
  width: 1.75em;
  height: 1.75em;
  border: 0;
  border-radius: 50%;
  background: #e49551;
  color: #383838;
  font-size: 1.2em;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.8s ease;
}

.services-button:hover {
  transform: rotate(180deg);
}

.services-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.active-modal {
  opacity: 1;
  visibility: visible;
}
.services-modal-content {
  width: 500px;
  position: relative;
  background-color: #23211f;
  padding: 4.5rem 2.5rem 2.5rem;
  border-radius: 0.5rem;
  padding-bottom: 4.5rem;
}
.services-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
  color: #e49551;
  cursor: pointer;
}
.services-modal-title,
.services-modal-description {
  text-align: center;
  color: aliceblue;
}
.services-modal-title {
  font-size: 1.5em;
  font-weight: 400;
  margin-bottom: 1rem;
}
.services-modal-description {
  font-size: 1em;
  padding: 0 3.5rem;
  margin-bottom: 2rem;
}
.services-modal-services {
  row-gap: 1em;
}
.services-modal-service {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.services-modal-icon {
  color: #e49551;
  font-size: 1.1rem;
}
.services-modal-info {
  font-size: 1em;
  color: aliceblue;
}

@media (max-width: 767px) {
  .background-container {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-title {
    font-size: 2em;
    margin: 0;
    padding-bottom: 3rem;
    padding-top: 8rem;
    text-align: left;
    padding-left: 5%;
  }
  .about-container {
    grid-template-columns: 1fr;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
    column-gap: 0rem;
  }

  .about-img {
    padding-top: 2em;
    width: 70%; /* scale down on mobile */
    height: auto; /* prevent vertical stretching */
    max-width: 100%; /* never exceed container */
    display: block; /* remove inline-img baseline gap */

    align-self: center; /* override desktop stretch */
    justify-self: center; /* center horizontally in grid cell */

    object-fit: contain; /* keep aspect ratio if a fixed height is ever applied */
    background-color: transparent;
    animation: none;
    clip-path: none;
  }

  .about-heading {
    text-align: left;
    padding: 0;
    padding-top: 1.3em;
  }

  .about-description {
    opacity: 0;
    font-size: 1em;
    line-height: 1.5;
    padding: 0;
    width: auto;
  }

  .about-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;

    column-gap: 0.5rem;
    padding: 0;
    gap: 1rem;
  }
  .about-box {
    text-align: center;
    border-radius: 5px;
  }

  .about-title,
  .about-subtitle {
    display: block; /* <-- key */
    margin-bottom: 0.5em;
    font-size: 0.6rem;
    padding-top: 0;
    color: rgb(239, 238, 237);
  }

  .about-subtitle {
    display: block; /* <-- key */
    margin-bottom: 1em;
  }

  .about-title {
    color: #e49551;
  }
  /* 
  .about-info {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  column-gap: 0.5rem;
  margin-bottom: 3rem;
  justify-content: left;
}
.about-box {
  text-align: center;
  border-radius: 0.25rem;
  padding: 1rem 1.25rem;
  color: aliceblue;
  background-color: hsl(242, 14%, 10%);
  animation: byBottom 1s 2.5s ease both;
} */

  .skills-container {
    grid-template-columns: 1fr;
    row-gap: 1rem;
    padding-left: 5%;
    padding-right: 5%;
  }
  .skills-content {
    padding-top: 2em;
  }
  .skills-list {
    row-gap: 1.2rem;
  }

  .skills-title,
  .skills-subtitle {
    font-size: 1em;
    text-align: center;
  }

  .services-container {
    grid-template-columns: 1fr;
    grid-auto-rows: 80px; /* each row will be 400px tall */
    gap: 1rem;
  }

  .services-icon {
    display: inline;
    font-size: 3rem;
    color: #e49551;
  }

  .services-title {
    display: inline-block;
    padding-left: 0%;
    font-size: 1em;
    font-weight: 400;
    line-height: 1;
  }

  .services-title span {
    font-size: 1.1em;
  }

  .services-content {
    padding-bottom: 0em;
    background: none;
    box-shadow: none;
    /* background: linear-gradient(to right, transparent 75%, rgb(56, 55, 55) 25%); */
  }

  @keyframes slideUp2 {
    from {
      transform: translateY(100%); /* hidden at the line */
    }
    to {
      transform: translateY(0); /* fully visible */
      box-shadow: none;
      opacity: 1;
    }
  }

  .services-button {
    position: absolute; /* anchor it */
    top: 50%; /* center vertically */
    right: 1em; /* hug right edge */
    bottom: auto; /* cancel desktop rule */
    transform: translateY(-50%); /* perfect vertical centering */

    width: 1.75em; /* fixed size = no layout shift */
    height: 1.75em;
    line-height: 1; /* avoid font metric shifts */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #363535;
    color: #e9e9e7;
    border-radius: 5px;
    padding: 0.3em;

    transition: none; /* prevent tap ‘wiggle’ on mobile */
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    touch-action: manipulation;
  }

  .services-button:hover,
  .services-button:active,
  .services-button:focus {
    transform: translateY(-50%);
  }
  .services-modal {
    background-color: #e9e9e723;
    backdrop-filter: blur(8px); /* main blur */
    -webkit-backdrop-filter: blur(8px); /* for Safari */
    z-index: 2000;
  }
  .services-modal-description {
    font-weight: 300;
    padding: 0 5%;
  }

  .services-modal-info {
    font-weight: 300;
  }
  /* * {
    border: 1px solid red;
  } */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}