@media screen and (min-device-width: 320px) and (max-device-width: 767px) {
  :root {
    --dark-color: #000000;
    --soft-gray-color: #00000080;
    --soft-gray-color-01: #828282;
    --soft-gray-color-02: #cccccc;

    --white-color: #ffffff;
    --white-color-01: #f8f9f8;

    --font-Hanken: "Hanken Grotesk", sans-serif;

    --font-size-h2: clamp(2.5rem, 3.5vw, 5rem);
    --font-size-h2-01: clamp(1.875rem, 3.5vw, 3.75rem);
    --font-size-h2-02: clamp(1.5rem, 3.5vw, 2.5rem);
    --font-size-h3: clamp(1.1255rem, 3.5vw, 2.5rem);
    --font-size-h4: clamp(0.875rem, 3.5vw, 1rem);
  }

  .menu-desktop {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 45px;
    left: 0;
    transition: all 0.3s linear;
  }

  .mobile-menu.active {
    visibility: visible;
    opacity: 1;
    position: fixed;
    background: var(--white-color);
  }

  .mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }

  .mobile-menu nav ul li a {
    padding: 12px 0;
    display: block;
  }

  /* dropdown */
  .has-dropdown .dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .has-dropdown.active .dropdown {
    max-height: 400px;
    /* ปรับตามความสูงจริง */
  }

  /* active state */
  .has-dropdown.active>a {
    font-weight: bold;
  }

  .box-menu-mobile {
    height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .box-logo-mobile svg {
    width: calc(100% - 40px);
  }

  .box-logo-mobile svg path fill {
    color: #000000;
  }



  /*----------Logo---------*/
  .box-logo {
    top: 0px;
  }

  .sticky-logo svg {
    width: 100%;
  }

  /*----------Secton 01---------*/
  #section01 {
    padding: 50px 0;
  }

  .parallax-item {
    min-height: 285px;
  }

  /*----------Secton 02---------*/
  #section02 {
    padding: 0 0 50px 0;
  }

  .parallax-section {
    height: 420px;
  }

  .parallax-video {
    height: 100%;
  }

  /*----------Secton 03---------*/
  #section03 {
    padding: 0 0 50px 0;
  }

  .card-collection {
    height: 215px;
  }

  .card-collection-img {
    height: 180px;
  }

  .card-collection .box-img-01 img {
    top: 0;
  }

  .card-collection-img .box-img-01 img,
  .card-collection-img .box-img-02 img {
    top: 0;
  }

  /*----------Secton 05---------*/
  #section05 {
    padding: 50px 0;
    overflow: hidden;
  }

  /*----------Secton 6---------*/

  #section06 {
    padding: 50px 0 30px 0;
  }

  .tabs {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /*----------Secton 7---------*/
  #section07 {
    padding: 50px 0;
  }

  .box-inquiry-title h2 {
    text-align: center;
  }

  .box-inquiry-title h2 br {
    display: none;
  }

  .box-inquiry-form table td {
    width: 100%;
    float: left;
  }

  /*----------Footer---------*/
  footer {
    padding-bottom: 25px;
  }

  .box-menu-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/*Tablet*/
@media screen and (min-device-width: 768px) and (max-device-width: 820px) {

  .menu-desktop {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 45px;
    left: 0;
    transition: all 0.3s linear;
  }

  .mobile-menu.active {
    visibility: visible;
    opacity: 1;
    position: fixed;
    background: var(--white-color);
  }

  .mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }

  .mobile-menu nav ul li a {
    padding: 12px 0;
    display: block;
  }

  /* dropdown */
  .has-dropdown .dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .has-dropdown.active .dropdown {
    max-height: 400px;
    /* ปรับตามความสูงจริง */
  }

  /* active state */
  .has-dropdown.active>a {
    font-weight: bold;
  }

  .box-menu-mobile {
    height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .box-logo-mobile svg {
    width: calc(100% - 40px);
  }

  .box-logo-mobile svg path fill {
    color: #000000;
  }



  /*----------Logo---------*/
  .box-logo {
    top: 50px;
  }
.sticky-logo {
  top: 35px;
}
  .sticky-logo svg {
    width: 50%;
  }

  /*----------Secton 01---------*/
  #section01 {
    padding: 50px 0;
  }

  .parallax-item {
    min-height: 285px;
  }

  /*----------Secton 02---------*/
  #section02 {
    padding: 0 0 50px 0;
  }

  .parallax-section {
    height: 550px;
  }

  .parallax-video {
    height: 100%;
  }

  /*----------Secton 03---------*/
  #section03 {
    padding: 0 0 50px 0;
  }

  .card-collection {
    height: 340px;
  }

  .card-collection-img {
    height: 345px;
  }

  .card-collection .box-img-01 img {
    top: 0;
  }

  .card-collection-img .box-img-01 img,
  .card-collection-img .box-img-02 img {
    top: 0;
  }

  /*----------Secton 05---------*/
  #section05 {
    padding: 50px 0;
    overflow: hidden;
  }

  /*----------Secton 6---------*/

  #section06 {
    padding: 50px 0 30px 0;
  }

  .tabs {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap:15px 5px;
  }

  /*----------Secton 7---------*/
  #section07 {
    padding: 50px 0;
  }

  .box-inquiry-title h2 {
    text-align: left;
  }

  .box-inquiry-title h2 br {
    display: block;
  }

  .box-inquiry-form table td {
    width: 100%;
    float: left;
  }

  /*----------Footer---------*/
  footer {
    padding-bottom: 25px;
  }

  .box-menu-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}