/* =================================
   GLOBAL RESET
================================= */

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  width: 100%;

  min-width: 0;

  overflow-x: hidden;

  font-family:
    "Manrope",
    sans-serif;

  color: #202020;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fffaf0,
      #d1bd5b
    );
}


/* =================================
   SERVICE PAGE
================================= */

.service-page {
  width: 100%;

  min-height: 100vh;

  overflow-x: hidden;
}


/* =================================
   NAVBAR
================================= */

.service-navbar {
  width: 100%;

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 8px 7%;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border-bottom:
    2px solid #e31b23;

  box-shadow:
    0 5px 20px
    rgba(
      0,
      0,
      0,
      0.08
    );
}


.logo {
  display: flex;  
  align-items: center;
  width: 500px;
  max-width: 48%;
  height: 60px;
}

.service-logo {
  display: inline-block;
  object-fit: contain;
  object-position: left-corner;
  /* alight-items: center;  */
}

/* Back Button */

.back-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  min-height: 42px;

  padding: 10px 18px;

  color: #e31b23;

  background: white;

  border:
    1px solid #e31b23;

  border-radius: 50px;

  font-family:
    "Outfit",
    sans-serif;

  font-size: 0.9rem;

  font-weight: 700;

  white-space: nowrap;

  text-decoration: none;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.back-button:hover {
  color: white;

  background: #e31b23;

  transform:
    translateY(-2px);
}


/* =================================
   MAIN SERVICE SECTION
================================= */

.service-detail {
  width:
    min(
      1150px,
      90%
    );

  min-height:
    calc(
      100vh - 76px
    );

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.9fr);

  align-items: center;

  gap:
    clamp(
      40px,
      6vw,
      70px
    );

  margin: auto;

  padding:
    clamp(
      55px,
      7vw,
      80px
    )
    0;
}


/* =================================
   SERVICE TEXT
================================= */

.service-tag {
  display: inline-block;

  margin-bottom: 18px;

  padding:
    8px 15px;

  color: #e31b23;

  background:
    rgba(
      227,
      27,
      35,
      0.08
    );

  border-radius: 50px;

  font-size:
    clamp(
      0.65rem,
      2vw,
      0.75rem
    );

  font-weight: 800;

  letter-spacing: 2px;
}


.service-detail h1 {
  margin-bottom: 20px;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    clamp(
      1.5rem,
      4vw,
      3.5rem
    );

  line-height: 1;

  letter-spacing:
    clamp(
      -2px,
      -0.2vw,
      -1px
    );

  overflow-wrap: anywhere;
}


.service-intro {
  max-width: 650px;

  margin-bottom: 25px;

  color: #666;

  font-size:
    clamp(
      0.95rem,
      2vw,
      1.05rem
    );

  line-height: 1.8;
}


/* =================================
   INFORMATION BOX
================================= */

.service-info-box {
  width: 100%;

  padding:
    clamp(
      20px,
      4vw,
      25px
    );

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.07
    );

  border-radius: 20px;

  box-shadow:
    0 15px 35px
    rgba(
      0,
      0,
      0,
      0.07
    );
}


.service-info-box h2 {
  margin-bottom: 15px;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    clamp(
      1.3rem,
      4vw,
      1.5rem
    );
}


.service-info-box ul {
  padding-left: 20px;
}


.service-info-box li {
  margin: 11px 0;

  color: #555;

  font-size:
    clamp(
      0.9rem,
      2vw,
      1rem
    );

  line-height: 1.55;
}


.service-info-box li::marker {
  color: #e31b23;
}


/* =================================
   BUTTONS
================================= */

.service-buttons {
  display: flex;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 30px;
}


.contact-service-btn,
.services-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 50px;

  padding:
    13px 23px;

  border-radius: 50px;

  font-family:
    "Outfit",
    sans-serif;

  font-size: 0.95rem;

  font-weight: 800;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}


.contact-service-btn {
  color: white;

  background:
    linear-gradient(
      135deg,
      #e31b23,
      #ff4c4c
    );

  box-shadow:
    0 10px 22px
    rgba(
      227,
      27,
      35,
      0.25
    );
}


.contact-service-btn:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 14px 28px
    rgba(
      227,
      27,
      35,
      0.35
    );
}


.services-button {
  color: #252525;

  background: white;

  border:
    1px solid #ddd;
}


.services-button:hover {
  border-color: #ffd42a;

  transform:
    translateY(-4px);
}


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

.service-visual {
  width: 100%;

  min-height: 470px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    clamp(
      25px,
      4vw,
      45px
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        212,
        42,
        0.22
      ),
      rgba(
        255,
        255,
        255,
        0.9
      ),
      rgba(
        227,
        27,
        35,
        0.08
      )
    );

  border-radius:
    clamp(
      24px,
      4vw,
      35px
    );

  box-shadow:
    0 25px 60px
    rgba(
      0,
      0,
      0,
      0.1
    );
}


.service-visual img {
  display: block;

  width: 100%;

  max-width: 420px;

  height: 350px;

  object-fit: cover;

  border-radius: 25px;

  box-shadow:
    0 18px 40px
    rgba(
      0,
      0,
      0,
      0.16
    );

  transition:
    transform 0.4s ease;
}


.service-visual:hover img {
  transform:
    scale(1.04)
    rotate(-1deg);
}


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

@media (max-width: 850px) {

  .service-navbar {
    padding:
      8px 5%;
  }


  .service-detail {
    width: 90%;

    grid-template-columns:
      1fr;

    gap: 45px;

    padding:
      60px 0;
  }


  .service-visual {
    min-height: 380px;
  }


  .service-visual img {
    max-width: 600px;
  }
}


/* =================================
   MOBILE
================================= */

@media (max-width: 550px) {

  .service-navbar {
    min-height: 68px;
    gap: 10px;
    padding:
      6px 16px;
  }


  .logo {
    width: 205px;
    max-width: calc(100%);
    height: 50px;
  }


  .service-logo {
    font-size: 0.9rem;
  }


  .back-button {
    min-height: 38px;

    padding:
      8px 13px;

    font-size:
      0.78rem;
  }


  .service-detail {
    width:
      calc(
        100% - 32px
      );

    min-height: auto;

    gap: 35px;

    padding:
      45px 0 55px;
  }


  .service-tag {
    margin-bottom: 14px;

    padding:
      7px 12px;

    letter-spacing:
      1.3px;
  }


  .service-detail h1 {
    margin-bottom: 16px;

    font-size:
      clamp(
        2.25rem,
        12vw,
        3.2rem
      );

    line-height: 1.05;
  }


  .service-intro {
    margin-bottom: 20px;

    font-size: 0.92rem;

    line-height: 1.7;
  }


  .service-info-box {
    padding: 19px;

    border-radius: 17px;
  }


  .service-info-box h2 {
    font-size: 1.25rem;
  }


  .service-info-box ul {
    padding-left: 18px;
  }


  .service-info-box li {
    margin: 9px 0;

    font-size: 0.88rem;
  }


  .service-buttons {
    width: 100%;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

    margin-top: 24px;
  }


  .contact-service-btn,
  .services-button {
    width: 100%;

    min-height: 48px;

    padding:
      12px 18px;

    font-size: 0.9rem;
  }


  .service-visual {
    min-height: auto;

    padding: 18px;

    border-radius: 23px;
  }


  .service-visual img {
    width: 100%;

    height:
      clamp(
        220px,
        70vw,
        300px
      );

    border-radius: 18px;
  }


  /* Avoid strong hover movement on touch devices */

  .service-visual:hover img {
    transform: none;
  }
}


/* =================================
   SMALL PHONES
   320px - 380px
================================= */

@media (max-width: 380px) {

  .service-navbar {
    padding:
      6px 12px;
  }


  .logo {
    width: 135px;

    height: 45px;
  }


  .back-button {
    padding:
      7px 10px;

    font-size:
      0.7rem;
  }


  .service-detail {
    width:
      calc(
        100% - 24px
      );
  }


  .service-detail h1 {
    font-size:
      2.15rem;
  }


  .service-info-box {
    padding:
      16px;
  }
}