/*-----------------------------------*\
    #SERVICES HEADER
\*-----------------------------------*/

.services-header-section {
  width: 100%;
  min-height: 400px;
  height: auto;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  margin-top: -128px;
  padding-top: 128px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 56px;
}

.service-header-width-container {
  margin-top: 48px;
  width: 1280px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 32px;
}

.services-header-title {
  font-size: 64px;
  line-height: 88px;
  letter-spacing: 1px;
  font-weight: var(--semiBold);
  color: var(--neutral-green-01);
}

.services-container-check-service-button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.single-service-go-to-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 14px;
  font-weight: var(--semiBold);
  color: var(--neutral-green-01);
  padding: 12px 24px;
  border-radius: 100px;
  border: solid 2px var(--neutral-green-01);
  background-color: #fafafa33;
  transition: 0.5s;
}

.service-go-to-btn-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.5s;
}

.single-service-go-to-button:is(:hover, :focus-visible, :focus-within) {
  cursor: pointer;
  scale: 1.05;
}

.single-service-go-to-button:is(:hover, :focus-visible, :focus-within)
  .service-go-to-btn-icon {
  transform: rotate(450deg);
}

/*-----------------------------------*\
    #SERVICES MAIN SECTION
\*-----------------------------------*/

.services-main-section {
  padding: 64px 0 96px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.services-main-width-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  width: 1280px;
}

.service-container-box {
  width: 100%;
  min-height: 212px;
  height: auto;
  border-radius: 24px;
  transition: 0.5s;
}

.service-container-top-container {
  width: 100%;
  height: 212px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px;
  overflow: hidden;
  border: none;
  outline: none;
  text-align: start;
  transition: 0.5s;
  border-radius: 24px;
}

.service-container-top-container.tiktok {
  background-color: var(--brand-green-02);
}

.service-container-top-container.marketing {
  background-color: var(--brand-green-01);
}

.service-container-top-container.meta {
  background-color: var(--dark-green-02);
}

.service-container-top-container.website {
  background-color: var(--neutral-05);
}

.service-arrow {
  width: 64px;
  height: 64px;
  transition: 0.5s ease-in;
  z-index: 1;

  opacity: 1;
  transform: translateY(10px) scale(0.8);
  transition: opacity 1s ease, transform 1s ease;
}

.service-arrow.black {
  filter: var(--filter-black);
}

.service-title {
  font-size: 40px;
  line-height: 48px;
  font-weight: var(--semiBold);
  color: var(--neutral-green-01);
}

.service-title.black {
  color: var(--dark-green-02);
}

.service-title.margin-left {
  margin-left: 100px;
}

.service-illustration {
  position: absolute;
  width: 180px;
  height: 180px;
}

.service-illustration.tiktok {
  right: -56px;
}

.service-illustration.marketing {
  top: 80px;
  right: -24px;
}

.service-illustration.meta {
  left: -40px;
}

.service-illustration.website {
  left: -80px;
}

.service-container-box:is(:hover, :focus-visible, :focus-within) {
  transform: scale(1.05);
  cursor: pointer;
}

.service-container-box:is(:hover, :focus-visible, :focus-within)
  .service-arrow {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.services-button {
  align-self: center;
  justify-self: center;
}

.service-bottom-container {
  width: 100%;
  height: auto;
  padding: 48px;
  background-color: #e9efe6;
  border: solid 1px var(--neutral-03);
  border-radius: 24px;
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 40px;
}

.service-container-box.active .service-container-top-container {
  display: none;
}

.service-container-box.active .service-bottom-container {
  display: flex;
}

.service-container-box.active:is(:hover, :focus-visible, :focus-within) {
  transform: scale(1);
  cursor: pointer;
}

.title-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.service-title-icon {
  width: 64px;
  height: 64px;
}

.service-bottom-main-title {
  font-size: 28px;
  line-height: 28px;
  font-weight: var(--semiBold);
}

.service-description-text {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  font-weight: var(--medium);
  color: var(--dark-green-02);
  max-width: 828px;
}

.favourite-projects-service-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.favourite-projects-service-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: var(--semiBold);
  color: var(--neutral-16);
}

#TIKTOK,
#MARKETING,
#META,
#WEBSITE {
  scroll-margin-top: 128px;
  /* Leaves space when scrolled into view */
}

/* DARK MODE */
:root[data-theme="dark"] .service-title {
  color: var(--dark-green-03);
}

:root[data-theme="dark"] .service-description-text,
:root[data-theme="dark"] .favourite-projects-service-title,
:root[data-theme="dark"] .service-title.black {
  color: var(--neutral-green-01);
}

:root[data-theme="dark"] .service-container-top-container.meta {
  background-color: var(--neutral-green-01);
}

:root[data-theme="dark"] .service-bottom-container {
  background-color: #181f14;
  border-color: #404040;
}

:root[data-theme="dark"] .service-arrow {
  filter: var(--filter-black);
}

:root[data-theme="dark"] .service-arrow.black {
  filter: var(--filter-white);
}

:root[data-theme="dark"] .service-title.black {
  color: var(--neutral-green-01);
}

:root[data-theme="dark"] .service-arrow.black.web {
  filter: var(--filter-black);
}

:root[data-theme="dark"] .service-title.black.web {
  color: var(--dark-green-03);
}

:root[data-theme="dark"] .service-title.tiktok {
  color: var(--neutral-green-01);
}

:root[data-theme="dark"] .service-arrow.tiktok {
  filter: var(--filter-white);
}

@media (max-width: 1280px) {
  .service-header-width-container,
  .services-main-width-container {
    width: 1000px;
  }

  /* Keep overflow tucked inside rounded parent */
  .service-bottom-container {
    overflow: hidden;
    position: relative;
  }

  /* Optional: horizontal scrollbar styling */
  .projects-grid-container.services::-webkit-scrollbar {
    height: 8px;
  }
  .projects-grid-container.services::-webkit-scrollbar-thumb {
    background: var(--neutral-03);
    border-radius: 999px;
  }
  :root[data-theme="dark"]
    .projects-grid-container.services::-webkit-scrollbar-thumb {
    background: #3a4a33;
  }
}

@media (max-width: 1080px) {
  .services-header-section,
  .services-main-section {
    padding-left: 48px;
    padding-right: 48px;
  }
  .service-header-width-container,
  .services-main-width-container {
    width: 100%;
  }
}

@media (max-width: 970px) {
  .services-header-section,
  .services-main-section {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 700px) {
  .services-header-section,
  .services-main-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .services-main-section {
    padding-top: 16px;
  }

  .services-header-title {
    font-family: Montserrat;
    font-weight: 600;
    font-style: var(--semiBold);
    font-size: 28px;
    line-height: 28px;
  }

  .single-service-go-to-button {
    padding: 12px 16px;
  }

  .service-container-box {
    min-height: unset;
  }

  .service-container-top-container {
    padding: 32px 24px;
    height: 120px;
  }

  .service-title {
    font-weight: 600;
    font-style: var(--semiBold);
    font-size: 24px;
    line-height: 28px;
  }

  .service-illustration {
    width: 100px;
    height: 100px;
  }

  .service-illustration.tiktok {
    right: -24px;
  }

  .service-illustration.marketing {
    top: 48px;
    right: -2px;
    height: 120px;
    width: 120px;
  }

  .service-illustration.meta {
    left: -18px;
  }
  .service-illustration.website {
    right: -18px;
    left: unset;
  }

  .service-bottom-container {
    padding: 32px 16px;
  }

  .service-title.margin-left {
    margin-left: 0;
  }

  .service-title.meta {
    margin-left: 60px;
  }
}

@media (max-width: 500px) {
  .services-header-section,
  .services-main-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}