* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

:root {
  --semi-light-green-color: #558776;
  --dark-green-color: #00291C;
  --light-grey-color: #958e8e;
  --light-human-skin-color: rgba(243, 234, 218, 0.9);
  --white-text-color: white;
  --black-text-color: black;
}

h1 {
  font-size: clamp(2.8rem, 3vw, 4rem);
}

h2 {
  font-size: clamp(1.4rem, 1.7vw, 2.2rem);
}

p {
  font-size: clamp(1.2rem, 1.1vw, 1.6rem);
  letter-spacing: 0.06em; 
}

body {
  height: 100vh;
  background-color: #f8f8f8;
  overflow: hidden;
  scroll-snap-type: y mandatory;
}

.scroll-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.scroll-item {
  min-height: 100vh;
  min-width: 100vw;
  scroll-snap-align: start;
  will-change: transform, opacity;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25em 1.25em;
    transition: background-color 0.3s ease-in-out;
  }

  .navbar a {
    color: var(--black-text-color);
    text-decoration: none;
    padding: 0.7em 1.1em;
    font-weight: bold;
    border-radius: 0.5em;
    transition: background-color 0.3s ease-in-out;
  }
  
  /* Active navbar item */
  .navbar a.active {
    background-color: rgba(169, 205, 194, 0.4);
    color: var(--black-text-color);
  }

  .navbar.transparent {
    background-color: var(--light-human-skin-color);
  }

  .logo img {
    height: 3em;
  }  

 .menu {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  .menu li a:hover {
    color: var(--light-grey-color);
  }

  .menu-toggle {
    display: none;
    font-size: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    color: black;
  }
  
  .btn-konsultasi {
    padding: 0.7em 1.1em;
    font-size: 1em;
    border: none;
    cursor: pointer;
    border-radius: 0.25em;
    font-weight: bold;
    background-color: rgba(51, 51, 51, 0);
  }

  .btn-konsultasi.transparent {
    background-color: rgba(169, 205, 194, 0.9);
  }
  
  .navbar .btn-konsultasi:hover {
    background-color: var(--dark-green-color);
    color: white;
  }
  
  .page {
    display: flex;
    align-items: center;
    justify-content: end;
    scroll-snap-align: start;
    text-align: center;
    background-color: var(--light-human-skin-color);
    padding: 0 2vw;
  }

/* Container utama */
.carousel-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Wrapper untuk slide */
.carousel-background {
  display: flex;
  width: 300%; /* 3x ukuran layar untuk 3 slide */
  height: 100vh;
  transition: transform 1s ease-in-out;
}

/* Style untuk setiap slide */
.slide {
  width: 100vw; /* Tiap slide mengambil 100% lebar layar */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Agar gambar menyesuaikan ukuran layar */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay untuk efek gelap */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2;
}

.content {
    color: var(--light-human-skin-color);
    max-width: 40%;
    text-align: center;
    padding: 1em 3em; /* Add padding for smaller screens */
    z-index: 3;
  }
  
  .content h1 {
    margin-bottom: 0.8em;
    opacity: 0;
    animation: fadeIn 1.5s ease-out forwards;
  }
  
  .content p {
    opacity: 0;
    animation: fadeIn 1.5s ease-out forwards;
    animation-delay: 1s;
  }

  .second-page {
    background: rgba(226, 222, 212, 0.9);
    display: flex;
    align-items: center;
    /* justify-content: flex-end; */
    justify-content: center;
  }

  .second-page .content {
    max-width: 50%;
  }

  .second-page h1 {
    color: var(--dark-green-color);
  }
    
  .advantages-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    max-width: 80%;
    margin: auto;
  }

  .advantage-box {
    background-color: var(--dark-green-color);
    color: white;
    padding: 0.75em;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    box-shadow: 0px 0.25em 0.5em rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
  }

  .advantage-box:hover {
    transform: scale(1.05);
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  } 

  .tabs-title {
    text-align: center;
    color: black;
    padding-top: 5.15%;
    font-size: clamp(2rem, 1.8vw, 4rem);
    padding-bottom: 0.5em;
}

.justifyContent {
  display: flex;
  justify-content: center;
}

.tabs-description {
  color: black; /* Warna hitam */
  margin-top: 0.5em;
}

.tabs-section {
  position: relative;
  width: 100%;
  color: white;
  background-color: white;
}

.tabs {
  display: flex;
  width: 100%;
}

.tab-button {
  cursor: pointer;
  text-align: center;
  background-color: white;
  color: black;
  padding: 0.6em;
  border-radius: 0.75em 0.75em 0 0;
  transition: .25s ease;
  border: none;
  flex-grow: 1;
  font-size: clamp(1.1rem, 1vw, 2.2rem); ;
  position: relative;
}

.tab-button:focus,
.tab-button:hover,
input[type="radio"]:checked + .tab-button {
  background-color: var(--semi-light-green-color);
  color: white;
}

.tab-button:focus p,
input[type="radio"]:checked + .tab-button p {
  display: block; /* Tampilkan penjelasan saat fokus atau tab aktif */
}

input[type="radio"] {
  display: none;
}

.tab-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  visibility: hidden;
}

.tab-content .tab-pane {
  display: none;
  visibility: visible;
  background-color: var(--semi-light-green-color);
  text-align: start;
  transition: opacity 0.5s ease-in-out;
}

.tab-explanation {
  font-size: 1.2em;
  margin-top: 1.25em;    
}

#tab1:checked ~ .tab-content #content1 {
  display: block;
}

#tab2:checked ~ .tab-content #content2 {
  display: block;
}

#tab3:checked ~ .tab-content #content3 {
  display: block;
}

#tab4:checked ~ .tab-content #content4 {
  display: block;
}

#tab5:checked ~ .tab-content #content5 {
  display: block;
}

.tab-pane.active {
  display: block; /* Show only the active tab pane */
}

.grid-container-service {
  display: grid;
  grid-template-columns: 0.3fr 1fr 0.3fr 1fr; /* 4 columns */
  grid-template-rows: repeat(auto-fit, auto);   /* 5 rows */
  padding: 0.5em 3em;
}

.tab-left-section {
  background-color: transparent;
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
}

.tab-left-section img {
  border-radius: 0.5em; /* Optional: Match the box's rounded corners */
  max-height: 9em;
}

.serviceTermiteAdjust img {
  max-height: 15em;
}

.tab-right-section {
  margin: 1em 1.25em 0px 5px;
  background-color: transparent;
  padding: 0px 0.6em;
  border-radius: 0.5em;
  text-align: start;
}

.tab-right-description, 
.tab-right-title {
  font-size: clamp(0.83rem, 1vw, 1.6rem); 
}

.mobileWidth {
  display: none;
}

.read-more-link {
  display: none;
}

.tab-right-title {
  padding: 0.25em 0.6em;
  color: black;
  background-color: white; /* Set a background color for the box */
  border-radius: 0.5em; /* Optional: Add rounded corners to the box */
  font-weight: bold; /* Optional: Make the title bold */
  display: inline-block;
}

.tab-right-description {
  margin-top: 0.8em;
  text-align: start;
}

.tab-right-description li {
  list-style: none; /* Hilangkan default bullet */
  position: relative;
  padding-left: 1.25em; /* Beri ruang untuk bullet custom */
}

.tab-right-description li::before {
  content: "•"; /* Simbol bullet */
  color: white; /* Warna bullet */
  position: absolute;
  left: 0;
  top: 0;
}

.tab-bottom-section {
  margin-bottom: 1.25em;
}  

.tab-left-section, .tab-right-section {
  margin-top: 1.20em;
}

.page-4 {
  background-color: var(--dark-green-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: var(--white-text-color);
  padding-top: 3%;
}
  
  .public-trust h1 {
    margin-bottom: 0.4em;
    padding: 0em 1em;
  }
  
  .public-trust p {
    width: 60%;
    margin: 0 auto 1.5em auto;
    text-align: center;
  }

  .logo-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(2em, 0.8fr)); 
    grid-template-rows: repeat(3, minmax(2em, 0.8fr));     
    grid-gap: 1em;
    width: 40%;
    margin: 0 auto;
    max-width: 40%;
  }
  
  .logo-item {
    background-color: var(--white-text-color);
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .logo-item img {
    height: 80%;
    width: 80%;
  }   
    
    /* Grid Container */
.grid-container {
  display: grid;
  grid-template-rows: 1fr auto; /* Baris pertama untuk contact-container, baris kedua untuk footer */
  background-color: var(--semi-light-green-color);
  padding-top: 3%;
}

/* Contact Container */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Membagi menjadi 2 kolom untuk left-section dan right-section */
  gap: 1.25em;
  margin: 0 auto; /* Pusatkan contact-container */
  width: 85%;
  align-items: center; /* Pastikan kedua section memiliki tinggi yang sama */
}

.contact-container .left-section,
.contact-container .right-section  {
  background-color: var(--white-text-color);
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  min-height: fit-content;
}

/* Left Section */
.contact-container .left-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--black-text-color);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.contact-container .left-section:hover {
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.contact-container .phone-sticker {
  width: 30%;
  margin-bottom: 0.2em;
}

.left-section h2 {
  padding-bottom: 0.8em;
}

.right-section h2 {
  padding-bottom: 0.4em;
}

.contact-container .form-header {
  background-color: var(--semi-light-green-color);
  padding: 1em;
  border-radius: 0.5em 0.5em 0 0;
  color: var(--white-text-color);
  margin-bottom: 1em;
  text-align: center;
}

.contact-container form {
  display: flex;
  flex-direction: column;
}
.contact-container label {
  margin-bottom: 0.1em;
}

.contact-container input,
.contact-container select {
  padding: 0.4em;
  margin-bottom: 0.7em;
  border: 2px solid #ccc;
  border-radius: 0.25em;
  font-size: clamp(1.15rem, 1.3vw, 2.2rem); 
}

/* .contact-container p {
  font-size: clamp(1.15rem, 2.5vw, 2.2rem); 
} */

.contact-container button {
  padding: 0.7em;
  margin-top: 0.6em;
  background-color: var(--semi-light-green-color);
  color: white;
  border: none;
  border-radius: 0 0 0.5em 0.5em;
  cursor: pointer;
}

.contact-container button:hover {
  background-color: var(--dark-green-color);
}
  
/* Footer */
#custom-footer {
  display: flex;
  justify-content: space-between;
  padding: 0.3em 1.5em; /* Padding diatur ulang */
  background-color: #F3EADA;
  color: black;
}

#custom-footer .footer-logo {
  width: 2.2em; /* Ukuran logo disesuaikan */
}

#custom-footer .logo-and-name {
  display: flex; /* Use Flexbox for logo and company name */
  align-items: center; /* Vertically center the logo and company name */
  gap: 0.6em; /* Add space between the logo and company name */
  padding-bottom: 0.8em;
}

#custom-footer .footer-group {
  display: flex;
  gap: 4.5em; /* Jarak antar bagian disesuaikan */
  align-items: flex-start;
}

#custom-footer .footer-title,
figcaption {
  font-size: clamp(1.1rem, 1vw, 1.6rem);
  font-weight: bold;
}

#custom-footer .footer-description {
  font-size: clamp(0.85rem, 1vw, 1.6rem); 
  color: rgb(88, 88, 88);
}

#custom-footer a,
#custom-footer ul li a {
  text-wrap: nowrap;
  color: rgb(88, 88, 88);
  text-decoration: none;
  transition: color 0.3s;
}

#custom-footer a:hover {
  color: var(--light-grey-color);
}

#custom-footer h3 {
  margin-bottom: 0.25em; /* Margin bawah heading disesuaikan */
  color: black;
}

#custom-footer ul {
  list-style: none;
  padding: 0;
}

#custom-footer ul li {
  margin-bottom: 0.15em; /* Margin bawah list item disesuaikan */
}

#custom-footer ul li a:hover {
  color: var(--light-grey-color);
}


@media (max-width: 600px) {
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: var(--light-human-skin-color);
    padding: 10px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  }

  .menu li {
    padding: 10px 20px;
    text-align: center;
  }

  .menu li a {
    color: black;
  }

  .menu-toggle {
    display: block;
  }

  .menu.open {
    display: flex;
  }

  .menu .btn-konsultasi {
    margin-left: 0; 
    width: 100%; 
    text-align: center; 
    padding: 10px 20px; 
  }

    .page, .second-page {
        justify-content: center;
    }

    .second-page .content {
      max-width: 100%;
    }
    
    .content {
      max-width: 90%; /* Allow content to fill more of the screen on small devices */
      padding: 1em 0.5em;
    }
  
    h1 {
      font-size: clamp(1.5rem, 3vw + 3vh, 3rem); 
    }

    h2 {
      font-size: clamp(1.3rem, 2vw + 2vh, 2.6rem);
    }    
  
    p {
      font-size: clamp(1rem, 1vw + 2vh, 3rem); 
    }

    .contact-container p {
      font-size: clamp(1rem, 1vw + 1.65vh, 2.2rem); 
    }

    .grid-container-service {
      grid-template-columns: 0.3fr 1fr; /* 4 columns */
      padding: 0em 1em;
      align-items: stretch;
    }

    .termiteDisplay {
      padding: 0em 1em;
    }

    .tab-left-section img {
      max-height: 11vh;
    }

    .serviceTermiteAdjust img {
      max-height: 20vh;
    }

    .tabs-title {
      font-size:  clamp(1rem, 1.7vw + 2vh, 2.6rem);
      padding-top: 22%;
    }
    
    .tab-right-title,
    .tab-right-description {
      font-size: clamp(0.7rem, 1vw + 1vh, 2.2rem); ;
    }

    .tab-button {
      font-size: clamp(0.85rem, 1vw + 1vh, 2.2rem); ;
    }

    .read-more-link {
      display: block;
    }

    .more-text {
      display: none;
    }

    /* Semua teks dipendekkan saat ada satu yang dibuka */
    .tab-right-section.shortened .tab-right-description {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 90%; /* Batasi agar efek elipsis terlihat */
    }
    
    .tab-right-section.expanded .more-text {
      display: block;
    }
    
    .tab-right-section.expanded .read-more-link {
      display: none;
    }
    
    .tab-left-section, .tab-right-section {
      margin-top: 0.75em;
      margin-right: 0em;
    }

    .desktopWidth {
      display: none;
    }

    .mobileWidth {
      display: block;
    }

    /* .read-more {
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 0.25em;
      white-space: nowrap;
      padding: 0.3em;
      margin-top: 0.8em;
    } */

    .advantages-container {
        max-width: 90%;
      }

    .advantage-box p {
        font-size: clamp(1rem, 1vw + 1.53vh, 3rem); 
    }

    .public-trust p {
        width: 85%;
      }

    .logo-sections {
        grid-gap: 0.5em;
        width: 85%;
        max-width: 100%;
      }
    
      .contact-container {
        grid-template-columns: 1fr 1fr;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .contact-container .left-section {
        width: 90%; 
        margin: 0 auto;
      }  

      .contact-container .right-section {
        display: none;
      }

      #custom-footer .display-none-550px {
        display: none;
      }

      #custom-footer .footer-title,
      figcaption {
        font-size: clamp(0.9rem, 1vw + 1.4vh, 3rem); 
        padding-right: 1em;
      }

      #custom-footer .footer-description {
        font-size: clamp(0.8rem, 1vw + 1.3vh, 2rem); 
      }
}
  
  @media (min-width: 601px) and (max-width: 1024px) {
    .page, .second-page {
        justify-content: center;
    }

    .second-page .content {
      max-width: 100%;
    }

    .nonDisplay {
      display: none;
    }

    .content {
      max-width: 80%;
    }
  
    h1 {
      font-size: clamp(2.8rem, 1vw, 4.5rem); 
    }

    h2 {
      font-size: clamp(1.4rem, 1vw + 1.9vh, 2.6rem);
    }      
  
    p, .tab-right-title, .tab-right-description {
        font-size: clamp(1.1rem, 1vw + 1.4vh, 2.2rem); 
      } 

      .grid-container-service {
        grid-template-columns: 0.3fr 1fr; /* 4 columns */
        padding: 0.5em 3em;
      }

      .termiteDisplay {
        padding: 0em 3em;
      }

      .tab-left-section img {
        max-height: 7.5em;
      }

      .serviceTermiteAdjust img {
        max-height: 15vh;
      }

      .tabs-title {
        font-size:  clamp(1rem, 1.7vw + 2vh, 2.6rem);
        padding-top: 10%;
      }
      
      .tab-right-title,
      .tab-right-description {
        font-size: clamp(0.65rem, 1vw + 1vh, 2.2rem); ;
      }

      .tab-button {
        font-size: clamp(0.85rem, 1vw + 1.2vh, 2.2rem); ;
      }

      .read-more-link {
        display: block;
      }

      .more-text {
        display: none;
      }

      .tab-left-section, .tab-right-section {
        margin-top: 1em;
      }

      .desktopWidth {
        display: none;
      }

      .mobileWidth {
        display: block;
      }

      .contact-container {
        width: 90%;
      }
    
      .contact-container p,
      .contact-container input,
      .contact-container select {
        font-size: clamp(0.95rem, 1vw + 1vh, 2.2rem); 
      }

      #custom-footer .footer-title,
      figcaption {
        font-size: clamp(0.9rem, 1vw + 0.8vh, 1.6rem);
      }

      #custom-footer .footer-description {
        font-size: clamp(0.8rem, 1vw + 0.8vh, 2rem); 
      }
      
      .logo-sections {
        width: 60%;
        max-width: 100%;
      }

      #custom-footer .footer-group {
        gap: 1.5em; /* Jarak antar bagian disesuaikan */
      }
  }

  @media (min-width: 601px) and (max-width: 710px) {
    .menu li:nth-child(2),
    .menu li:nth-child(5),
    .menu li:nth-child(6) {
      display: none;
    }
  }

  @media (min-width: 711px) and (max-width: 800px) {
    .menu li:nth-child(5),
    .menu li:nth-child(6) {
      display: none;
    }
  }

  @media (min-width: 400px) and (max-width: 600px) and (min-height: 800px) {
    .tab-right-title,
    .tab-right-description {
      font-size: clamp(0.9rem, 1vw + 1vh, 2.2rem); ;
    }

    .tab-button {
      font-size: clamp(1rem, 1vw + 1vh, 2.2rem); ;
    }

  }