@media (max-width: 576px) {
    #index-html #upbutnup {
      margin-top: -62px;
    }
    #index-html #services {
      padding-top: 63px;
      margin-top: 56px;
    }
    }
   
    @media (min-width: 768px) and (max-width: 1024px) {
      #index-html #upbutnup {
      /* padding-top: 20px;  */
      margin-top: -40px;
    }
    #index-html #services {
      padding-top: 63px;
      margin-top: 44px;
    }
  }
  @media (max-width: 576px) {
    #index-html .next-button {
        padding: 6px 12px;
        font-size: 12px;
        bottom: 1px;
        max-width: 150px;
      }
    }
  
    @media (min-width: 577px) and (max-width: 1024px) {
      #index-html .next-button {
        padding: 8px 16px;
        font-size: 14px;
        bottom: 1px;
        max-width: 180px;
  
      }
    }
  
    @media (min-width: 1025px) {
      #index-html .next-button {
        padding: 12px 24px;
        font-size: 16px;
        bottom: 1px;
      }
    }
  
    @media (min-width: 768px) and (max-width: 1024px) {
      #index-html .next-button {
        padding: 2px 8px;
        /* Minimal padding */
        font-size: 10px;
        /* Small font size */
        bottom: 1px;
        /* Adjust position */
        max-width: 120px;
        height: 46px;
        top: auto;
        /* margin-top: 1px; */
      }
    }
    @media (min-width: 1200px) {
      #index-html .responsive-image {
        max-width: 100%;
        height: auto;
      }
    }
    @media (max-width: 768px) {
      #index-html .swiper-container {
        height: 120px;
      }
    }
    @media (min-width: 1920px) and (max-width: 3840px) {
  
      #index-html .video-box {
        padding-top: 150px;
      }
    }
  
  
  
    @media (max-width: 1280px) and (min-height: 800px) and (max-height: 800px) {
  
      #index-html .image-box {
        padding-top: 75px;
      }
  
      #index-html .video-box {
        padding-top: 150px;
      }
    }
  
  
    /* Medium screens (up to 767px) */
    @media (max-width: 767px) {
      #index-html .close-video-btn {
        width: 40px;
        height: 40px;
        font-size: 24px;
        top: -25px;
        right: -25px;
      }
    }
  
    /* Small screens (up to 575px) */
    @media (max-width: 575px) {
      #index-html .close-video-btn {
        width: 35px;
        height: 35px;
        font-size: 20px;
        top: -20px;
        right: -20px;
      }
    }
  
    /* Extra small screens (up to 400px) */
    @media (max-width: 400px) {
      #index-html .close-video-btn {
        width: 30px;
        height: 30px;
        font-size: 18px;
        top: -15px;
        right: -15px;
      }
    }
    @media (min-width: 768px) and (max-width: 1024px) {}
  
    #index-html .image-box {
      padding-top: 150px;
    }
  
    #index-html .video-box {
      padding-top: 0;
    }
  
  
    /* Responsive: มือถือ */
    @media (max-width: 576px) {}
    #index-html .img-area2 {
    transform: translateY(-1px); /* เลื่อนขึ้น 1 พิกเซล */
  }
  
  @media (max-width: 576px) {
      #detail-html #page-hero {
        padding-top: 165px; /* เพิ่มระยะด้านบน */
      }
    }
    @media (max-width: 578px) {
      #detail-html .service-single .service-sidebar {
        position: sticky; /* เมนูติดจอเมื่อเลื่อน */
        top: 7.5rem; /* ระยะห่างจากขอบบน */
        right: 0; /* ติดขอบขวา */
        width: 100%; /* ทำให้เมนูกว้างเต็มหน้าจอ */
        height: 100vh; /* ความสูงเต็มจอ */
        max-height: none; /* ยกเลิกการจำกัดความสูง */
        z-index: 999; /* ทำให้เมนูอยู่บนสุด */
      }
    }

  @media (max-width: 576px) {
      #solutions-html #page-hero {
        padding-top: 165px; /* เพิ่มระยะด้านบน */
      }
    }
  
  @media (max-width: 576px) {
      #about-html #page-hero {
  padding-top: 165px; /* เพิ่มระยะด้านบน */
  }}
  @media (max-width: 576px) {
    #about-html .next-button {
      padding: 6px 12px;
      font-size: 12px;
      bottom: 1px;
      max-width: 150px;
    }
  }
  
  @media (min-width: 577px) and (max-width: 1024px) {
    #about-html .next-button {
      padding: 8px 16px;
      font-size: 14px;
      bottom: 1px;
      max-width: 180px;
  
    }
  }
  
  @media (min-width: 1025px) {
    #about-html .next-button {
      padding: 12px 24px;
      font-size: 16px;
      bottom: 1px;
    }
  }
  
  
  
  @media (min-width: 768px) and (max-width: 1024px) {
    #about-html .next-button {
      padding: 2px 8px;
      /* Minimal padding */
      font-size: 10px;
      /* Small font size */
      bottom: 1px;
      /* Adjust position */
      max-width: 120px;
      height: 46px;
      top: auto;
      /* margin-top: 1px; */
    }
  }
  
  /* สำหรับแท็บเล็ต (577px ถึง 992px) */
  @media (min-width: 577px) and (max-width: 992px) {
    #about-html .portfolio-group .row {
      display: grid !important;
      /* เปลี่ยนจาก Flex เป็น Grid */
      grid-template-columns: repeat(2, 1fr);
      /* 2 คอลัมน์ */
      gap: 20px;
      /* เพิ่มระยะห่างระหว่างคอลัมน์ */
      justify-content: center;
      /* จัดให้อยู่ตรงกลาง */
    }
  
    #about-html .portfolio-item {
      width: 100%;
      /* ปรับให้รูปเต็มความกว้างของคอลัมน์ */
      flex: none !important;
      /* ยกเลิก Flexbox */
    }
  
    #about-html .portfolio-img {
      width: 100%;
      /* ทำให้รูปภาพเต็มพื้นที่ */
      height: auto;
      /* รักษาสัดส่วน */
    }
  }
  
  /* สำหรับมือถือ (ต่ำกว่า 576px) */
  @media (max-width: 576px) {
    #about-html .portfolio-group .row {
      display: flex;
      flex-direction: column;
      /* รูปแบบแถวแนวตั้ง */
      gap: 15px;
      /* ระยะห่างระหว่างรูป */
      align-items: center;
      /* จัดตรงกลาง */
    }
  
    #about-html .portfolio-item {
      width: 90%;
      /* จำกัดขนาดรูปให้เหมาะสม */
      max-width: 180px;
      /* จำกัดขนาดสูงสุด */
    }
  
    #about-html .portfolio-img {
      width: 100%;
      /* รูปภาพเต็มพื้นที่ของ container */
      height: auto;
      /* รักษาสัดส่วน */
    }
  }
 
  @media (max-width: 576px) {
      #customer-html #page-hero {
  padding-top: 165px; /* เพิ่มระยะด้านบน */
  }}
  /* Responsive Design */
  @media (max-width: 576px) {
    #customer-html .next-button {
      padding: 6px 12px;
      font-size: 12px;
      bottom: 39px;
      max-width: 150px;
    }
  }
  
  @media (min-width: 577px) and (max-width: 1024px) {
    #customer-html .next-button {
      padding: 8px 16px;
      font-size: 14px;
      bottom: 31px;
      max-width: 180px;
      
    }
  }
  
  @media (min-width: 1025px) {
    #customer-html .next-button {
      padding: 12px 24px;
      font-size: 16px;
      bottom: 28px;
      top: auto;
    }
  } 
  @media (min-width: 768px) and (max-width: 1024px) {
    #customer-html .next-button {
      padding: 2px 8px; /* Minimal padding */
      font-size: 10px; /* Small font size */
      bottom: 31px; /* Adjust position */
      max-width: 120px; 
      height: 46px;
      top: auto;
      /* margin-top: 1px; */
    }
  }
  @media (max-width: 576px){
      #contact-html .location-title {
      font-size: 1rem;
      /* ลดขนาดหัวเรื่องให้เล็กลง */
    }
  }
  @media (max-width: 576px) {
    #contact-html #page-hero {
  padding-top: 165px; /* เพิ่มระยะด้านบน */
    }}