@media screen and (max-width: 1038px) {
  .about-us {
    margin-top: 9rem !important;
  }}
@media screen and (max-width: 768px) {
  body {
    max-width: 100vw;
    margin: 0;
    padding: 0;
  }
    
  @media screen and (max-width: 768px) {
    body {
      max-width: 100vw;
      margin: 0;
      padding: 0;
    }
    
    /* Header/Navbar Responsive */
    header {
      height: 60px;
      width: 100%;
      box-sizing: border-box;
    }
    
    header .nav1 {
      margin: 0.5%;
      width: 99%;
      box-sizing: border-box;
    }
    
    .nav-section img {
      width: 40px;
      height: 40px;
      margin: 1rem;
    }
    
    .nav-section2 h2 {
      font-size: 1rem;
    }
    
    .nav-section2 span {
      font-size: 0.8rem;
    }
    
    .menu {
      display: none;
    }
    
    #hamburger {
      display: block;
      color: #431353;
      font-size: 1.5rem;
      position: absolute;
      right: 5%;
      left: auto;
    }
    
    .menu.show-menu {
      display: block;
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      background-color: #c8bdff;
      z-index: 1000;
      box-sizing: border-box;
    }
    
    .menu.show-menu ul {
      flex-direction: column;
      align-items: center;
      padding: 1rem 0;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
    }
    
    .menu.show-menu ul li {
      margin: 0.5rem 0;
      width: 100%;
      text-align: center;
    }
    
    /* Main Section Responsive */
    .item-sec {
      height: 410px;
      min-height: 410px;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      width: 100%;
      box-sizing: border-box;
    }
    
    .item-sec2 {
      margin-top: 5rem;
      text-align: center;
      word-wrap: break-word;
      max-width: 100%;
      box-sizing: border-box;
      margin-inline:0;
    }
    
    .item-sec2 span {
      font-size: 2rem;
    }
    
    .item-sec2 h1 {
      font-size: 2rem;
    }
    
    .button {
      margin: 1rem auto;
      width: 100%;
      max-width: 250px;
      box-sizing: border-box;
    }
    .container-content .container-card .card-text .button-card {
      background-color: var(--pink);
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      line-height: 18.5px;
      color: #fff;
      padding: 4px 12.5px;
      border: none;
      text-align: left; /* Mengubah teks menjadi rata kiri */
      margin-bottom:1rem;
      transition: background-color 0.3s ease, transform 0.2s;
    }
    
    .button-card:hover {
      transform: scale(1.05);
      cursor:pointer;
      color:#2c023a
    }
    .sub-item-sec2 {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      text-align: center;
      word-wrap: break-word;
      box-sizing: border-box;
    }
    
    .sub-item-sec2 img {
      width: 18px !important;
      height: 18px !important;
    }
    
    .sub-item-sec2 p {
      font-size: 9px !important;
      margin: 0;
      text-align: center;
      padding-bottom:10px;
    }
    
    .item-sec3 .corporation {
      display: none;
    }
    
    .item-sec3 {
      width: 100%;
      box-sizing: border-box;
      
    }
    
    .item-sec3 img {
      width: 100%;
      max-width: 300px;
      height: auto;
      margin:0;
    }
    
    .emoji {
      display:block;
      position: absolute;
      width: 60px; /* Sesuaikan ukuran */
      height: auto;
    }
    
    .emoji-left {
      top: 16%;
      left: -20px; 
      width: 80px !important;
      height: 60px !important;
    }
    
    .emoji-right {
      top: 31% !important;
      right: 0;
      width: 86px !important;
      height: 73px !important;
    }
    
    /* About Us Responsive */
    .about-us {
      flex-direction: column;
      padding: 2rem 1rem;
      width: 100%;
      box-sizing: border-box;
      margin-top:0 !important;
    }
    
    .about-us img {
      width: 100%;
      max-width: 300px;
      align-items:center;
      margin-inline:10%;
    }
    
    .about-us-text {
      width: 100%;
      margin-left: 0;
      text-align: center;
      box-sizing: border-box;
      padding: 0 5%;
    }
    
    .about-us #about1{
      display:block;
      font-size: 2.5rem;
      line-height: 1.2;
      color:#8609af;
    }
  
    .about-us-text #about2 {
     display:none;
    }
    
    .about-us-text p {
      width: 100%;
      margin-inline: 0 !important;
      box-sizing: border-box;
    }
    
    /* Our Services Responsive */
    .out-services-title {
      width: 100%;
      box-sizing: border-box;
      padding: 0 5%;
    }
    
    .out-services-title h1 {
      font-size: 2.5rem;
      margin-top: 2rem;
    }
    
    .out-services-title p {
      font-size: 11px;
    }
    
    .container-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding: 0 5%;
      margin: 0;
    }
    
    .container-content .container-card {
      width: 100% !important;
      max-width: 290px;
      height: auto;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      box-sizing: border-box;
      margin: 1rem 0;
    }
    
    .container-content .container-card .card-text {
      margin: 0;
      text-align: center;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }
    
    .container-content .container-card .card-text h1 {
      font-size: 2rem;
    }
    
    .container-content .container-card .card-text p {
      text-align: center;
    }
    
    .container-content .container-card .card-image {
      margin-top: 1rem;
      width: 100%;
      box-sizing: border-box;
    }
    
    .container-content .container-card .card-image img {
      max-width: 200px;
    }
    
    /* Talk to Us Responsive */
    .talk-to-us {
      margin: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 5%;
    }
        footer.footer {
          padding: 0 !important;
        }
    .talk-to-us h1 {
      font-size: 2.5rem;
    }
    
    .chat-icon img {
      width: 200px;
      height: auto;
    }
    
    /* awal footer */
    .footer-content {
      display: none; /* Hide desktop layout on mobile */
  }
  
  .mobile-layout {
      display: flex; /* Show mobile layout on mobile */
  }
  
  .footer-sections {
      flex-direction: column;
  }
  
  .section {
      margin-bottom: 2rem;
  }
  
  
    /* akhir footer */
  }
  /* Header/Navbar Responsive */
  header {
    height: 60px;
    width: 100%;
    box-sizing: border-box;
  }
  
  header .nav1 {
    margin: 0.5%;
    width: 99%;
    box-sizing: border-box;
  }
  
  .nav-section img {
    width: 40px;
    height: 40px;
    margin: 1rem;
  }
  
  .nav-section2 h2 {
    font-size: 1rem;
  }
  
  .nav-section2 span {
    font-size: 0.8rem;
  }
  
  .menu {
    display: none;
  }
  
  #hamburger {
    display: block;
    color: #431353;
    font-size: 1.5rem;
    position: absolute;
    right: 5%;
    left: auto;
  }
  
  .menu.show-menu {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #c8bdff;
    z-index: 1000;
    box-sizing: border-box;
  }
  
  .menu.show-menu ul {
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  
  .menu.show-menu ul li {
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
  }
  
  /* Main Section Responsive */
  .item-sec {
    height: 410px;
    min-height: 410px;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .item-sec2 {
    margin-top: 5rem;
    text-align: center;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 5%;
  }
  
  .item-sec2 span {
    font-size: 2rem;
  }
  
  .item-sec2 h1 {
    font-size: 2rem;
  }
  
  .button {
    margin: 1rem auto;
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
  }
  .container-content .container-card .card-text .button-card {
    background-color: var(--pink);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 18.5px;
    color: #fff;
    padding: 4px 12.5px;
    border: none;
    text-align: left; /* Mengubah teks menjadi rata kiri */
    margin-bottom:1rem;
    transition: background-color 0.3s ease, transform 0.2s;
  }
  
  .button-card:hover {
    transform: scale(1.05);
    cursor:pointer;
    color:#2c023a
  }
  .sub-item-sec2 {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-align: center;
    word-wrap: break-word;
    box-sizing: border-box;
  }
  
  .sub-item-sec2 img {
    width: 18px !important;
    height: 18px !important;
  }
  
  .sub-item-sec2 p {
    font-size: 9px !important;
    margin: 0;
    text-align: center;
  }
  
  .item-sec3 .corporation {
    display: none;
  }
  
  .item-sec3 {
    width: 100%;
    box-sizing: border-box;
    
  }
  
  .item-sec3 img {
    width: 100%;
    max-width: 300px;
    height: auto;
  
  }
  
  .emoji {
    display:block;
    position: absolute;
    width: 60px; /* Sesuaikan ukuran */
    height: auto;
  }
  
  .emoji-left {
    top: 16%;
    left: -20px; 
    width: 80px !important;
    height: 60px !important;
  }
  
  .emoji-right {
    top: 21%;
    right: 0;
    width: 86px !important;
    height: 73px !important;
  }
  
  /* About Us Responsive */
  .about-us {
    flex-direction: column;
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .about-us img {
    width: 100%;
    max-width: 300px;
    align-items:center;
    margin-inline:10%;
  }
  
  .about-us-text {
    width: 100%;
    margin-left: 0;
    text-align: center;
    box-sizing: border-box;
    padding: 0 5%;
  }
  
  .about-us #about1{
    display:block;
    font-size: 2.5rem;
    line-height: 1.2;
    color:#8609af;
  }

  .about-us-text #about2 {
   display:none;
  }
  
  .about-us-text p {
    width: 100%;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }
  
  /* Our Services Responsive */
  .out-services-title {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5%;
  }
  
  .out-services-title h1 {
    font-size: 2.5rem;
    margin-top: 2rem;
  }
  
  .out-services-title p {
    font-size: 11px;
  }
  
  .container-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 5%;
    margin: 0;
  }
  
  .container-content .container-card {
    width: 100% !important;
    max-width: 290px;
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    margin: 1rem 0;
  }
  
  .container-content .container-card .card-text {
    margin: 0;
    text-align: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  
  .container-content .container-card .card-text h1 {
    font-size: 2rem;
  }
  
  .container-content .container-card .card-text p {
    text-align: center;
  }
  
  .container-content .container-card .card-image {
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .container-content .container-card .card-image img {
    max-width: 200px;
  }
  
  /* Talk to Us Responsive */
  .talk-to-us {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 5%;
  }
  
  .talk-to-us h1 {
    font-size: 2.5rem;
  }
  
  .chat-icon img {
    width: 200px;
    height: auto;
  }
  
  /* awal footer */
  .footer-content {
    display: none; /* Hide desktop layout on mobile */
}

.mobile-layout {
    display: flex; /* Show mobile layout on mobile */
}

.footer-sections {
    flex-direction: column;
}

.section {
    margin-bottom: 2rem;
}


  /* akhir footer */
}