@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
body {
    font-family: "Noto Sans Thai", sans-serif;
    background: #F4F8FB;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
button,
input,
textarea {
  font-family: "Noto Sans Thai", sans-serif;
  margin: 0;
  padding: 0;
}

.home-page-container a:hover,
.home-page-container a:focus,
.home-page-container a:visited {
  color: unset;
}

.container{
    width: 100%;
    max-width: 1268px;
    margin: 0 auto;
  }

  .home-page-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  .hero-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 30px;
    padding-top: 60px;
  }

  .header-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .header-content h1{
    font-size: 30px;
    font-weight: 700;
    color: #222;
    text-align: start;
  }

  .banner-carousel{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
  }

  .hdmall-aboutus-link{
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #fff;
    text-decoration: none;
    color: #222;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 15px 0px;
    padding-right: 5px;
    padding-left: 100px;
    border-radius: 100px;
    transition: all 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  .navigation-links{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  .navigation-link{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    text-decoration: none;
    color: #222;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 25px;
    padding-right: 5px;
    padding-left: 115px;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  .navigation-link:hover{
    transform: translateY(-3px);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }

  .health-link{
    background: linear-gradient(180deg, #DFFFFC 0%, #FFF 100%);
  }

  .dental-link{
    background: linear-gradient(180deg, #CBE7FF 0%, #FFF 100%);
  }

  .beauty-link{
    background: linear-gradient(180deg, #FCE7E5 0%, #FFF 100%);
  }

  .hdcare-link{
    background: linear-gradient(180deg, #D4FBFF 0%, #FFF 100%);
  }

  .hdmall-link{
    background: linear-gradient(180deg, #2382FA 0%, #3FB5FA 100%);
  }

  .navigation-link p{
    font-size: 23px;
    font-weight: 700;
    color: #222;
    text-align: start;
    line-height: 1.3;
  }

  .navigation-link small{
    font-size: 14px;
    font-weight: 500;
    color: #222;
    text-align: start;
  }

  .hdmall-link p,
  .hdmall-link small{
    color: #fff;
  }

  .hdmall-aboutus-link img{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80px;
    width: auto;
  }

  .navigation-link img{
    position: absolute;
    width: 110px;
    height: auto;
    bottom: -25px;
    left: 0px;
  }

  .beauty-link img{
    bottom: -20px ;
  }

  .hdcare-link img{
    bottom: 0px;
    left: 5px;
  }

  .hdmall-link img{
    width: 90px;
    bottom: 0px;
    left: 10px;
  }

  .hdmall-aboutus-link:hover{
    transform: translateY(-3px);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }

  .banner-carousel {
    width: 100%;
    max-width: 1268px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
  }

  .carousel-wrapper {
    flex: 1;
    max-width: 836px;
    width: 100%;
    position: relative;
    height: 365px;
  }

  .glide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

  }

  .glide__track {
    overflow: hidden;
    border-radius: 10px;
    height: 100%;
    cursor: grab;
  }

  .glide__slides {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .glide__slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    user-select: none;
  }

  .glide__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 20px;
  }

  .glide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 10px;
    z-index: 10;
  }

  .glide__arrow {
    pointer-events: all;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 44px;
    height: 44px;
  }

  .glide__arrow:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .glide__arrow:active {
    transform: scale(0.95);
  }

  .glide__arrow svg {
    width: 24px;
    height: 24px;
    color: #222;
  }

  .glide__bullets {
    position: absolute;
    bottom: 15px;
    display: flex;
    width: auto;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 100px;
    z-index: 5;
    opacity: 0.5;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .glide__bullets:hover {
    opacity: 1;
    transform: scale(1);
  }


  .glide__bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    border: none;
    background: #c9c9c9;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
  }

  .glide__bullet:hover {
    background: #929292;
  }

  .glide__bullet--active {
    background: #1E90FF;
    width: 20px;
  }

  .product-card-header-section{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .product-card-header-section-title{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 15px;
  }

  .product-card-header-section-title h2{
    font-size: 25px;
    font-weight: 700;
    color: #222;
  }

  .product-card-header-section-title img{
    width: 50px;
    height: auto;
  }

  .product-card-header-section-link{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 0px;
    text-decoration: none;
    color: #222;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
  }

  .product-card-header-section-link p {
    font-size: 16px;
    font-weight: 500;
    color: #222;
  }

  .product-card-header-section-link:hover{
    gap: 5px;
  }

   /* AI Module Styles */
   .ai-module-wrapper {
    width: 100%;
    max-width: 400px;
    flex-shrink: 0;
  }

  .ai-module {
    width: 100%;
    height: 365px;
    background-image: url("https://static.hdmall.co.th/system/image_attachments/images/000/478/276/original/BG-AI-block.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1.051px solid white;
    border-radius: 12.615px;
    padding: 10px;
    padding-top: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .bg-decoration {
    position: absolute;
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
  }

  .circle-1 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent);
    top: -50px;
    right: -80px;
  }

  .circle-2 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
    bottom: 20px;
    left: -60px;
  }

  .jib-character {
    position: absolute;
    top: -75px;
    right: -100px;
    z-index: 1;
  }

  .jib-character img {
    width: 300px;
    height: auto;
  }

  .ai-module .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
  }

  .ai-module .title {
    font-size: 18.923px;
    font-weight: 600;
    color: #153166;
    line-height: 1.4;
  }

  .mini-apps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8.5px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
  }

  .mini-app-card {
    position: relative;
    background: white;
    border: 1.051px solid white;
    border-radius: 8.41px;
    padding: 8.41px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: inset 0 4.205px 8.41px 0 #eff6ff;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
  }

  .mini-app-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 4.205px 8.41px 0 #eff6ff, 0 4px 12px rgba(51, 139, 255, 0.15);
  }

  .mini-app-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0.6;
  }

  .mini-app-icon svg {
    width: 30px;
    height: 30px;
  }

  .mini-app-name {
    font-size: 13px;
    font-weight: 500;
    color: #153166;
    text-align: start;
    line-height: 1.4;
    text-decoration: none !important;
  }

  .chat-section {
    background: white;
    border: 1.051px solid white;
    border-radius: 8.41px;
    padding: 10px 0px;
    margin-top: 8.5px;
    position: relative;
    z-index: 2;
    box-shadow: inset 0 4.205px 8.41px 0 #eff6ff;
    height: 93px;
  }

  .chat-bubble {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0px 10px;
    margin-bottom: 10px;
  }

  .chat-bubble p {
    font-size: 14px;
    font-weight: 500;
    color: #153166;
    line-height: 1.4;
  }

  .suggestions {
    overflow: hidden;
  }

  .suggestions-track {
    display: flex;
    gap: 8px;
    width: max-content;
    animation: suggestions-marquee 18s linear infinite;
    will-change: transform;
  }

  .suggestions:hover .suggestions-track {
    animation-play-state: paused;
  }

  @keyframes suggestions-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .suggestions-track { animation: none; }
  }

  .suggestion-pill {
    background: linear-gradient(90deg, #e5f1ff 0%, #f0ebff 100%);
    border-radius: 100px 100px 100px 0px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
    transform: scale(1);
  }

  .suggestion-pill svg {
    width: 15px;
    height: 15px;
  }

  .suggestion-pill:hover {
    scale: 1.05;
  }

  .suggestion-text {
    font-size: 12px;
    font-weight: 500;
    color: #033565;
    text-decoration: unset !important;
  }

  .disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }

  .product-card.health-section,
  .product-card.brand-section {
    max-width: 1268px;
    margin: 0 auto;
  }

  .product-card-section-content{
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
  }

  .brand-section .product-card-section-content {
    padding:  0px 20px;
  }

  .product-card-section-content .brand-slides#brand-slides{
    padding: 20px 0px;
  }

  .product-card-section-content .glide {
    width: 100%;
    position: relative;
  }

  .product-card-section-content .glide__track {
    overflow: hidden;
  }

  .product-card-section-content .glide__slides {
    height: auto;
  }

  .product-card-section-content .glide__slide {
    height: auto;
    display: flex;
    justify-content: center;
  }

  .brand-slides {
    display: flex;
    align-items: center;
  }

  .product-card-section-content .glide__arrows {
    transform: translateY(-50%);
    top: 50%;
  }

  .product-card-section-content .glide__arrow {
    position: relative;
    z-index: 20;
  }

  .product-card-section-content .glide__bullets {
    margin-top: 30px;
  }

  .product-card-section-content .glide__slide img {
    border-radius: 10px;
  }

  #health-carousel .glide__slide img {
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  #health-carousel .glide__slide img,
  #beauty-carousel .glide__slide img,
  #dental-carousel .glide__slide img {
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  #health-carousel .glide__slide img:hover,
  #beauty-carousel .glide__slide img:hover,
  #dental-carousel .glide__slide img:hover {
    border: 1px solid #bdbdbd;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  }

  #brand-carousel .glide__slide {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .brand-card-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 10px 10px 4px;
    width: 137px;
    height: 200px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
  }

  .brand-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F4F8FB;
    clip-path: path('M0 14.0648C0 6.29699 6.29702 0 14.0648 0H122.935C130.703 0 137 6.29702 137 14.0648V165C137 170 131 182 122.062 184.5C107.533 188.5 85.2613 200 68.5 200C51.7387 200 29.4667 188.5 14.9377 184.5C5.99971 182 0 170 0 165V14.0648Z');
    z-index: 0;
  }

  .brand-card-item:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  }

  .brand-card-item img {
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

  .brand-card-item p {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    margin: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .container-product-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1268px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .container-product-card .product-card {
    flex: 1 1 calc(50% - 10px);
    min-width: calc(50% - 10px);
    max-width: calc(50% - 10px);
    box-sizing: border-box;
  }

  .hdcare-section{
    background-image: url("https://static.hdmall.co.th/system/image_attachments/images/000/503/584/original/hdcare-bg.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 30px;
    height: 280px;
    gap: 100px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }

  .hdcare-header-section{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    color: #fff;
    flex-shrink: 0;
    gap: 20px;
  }

  .hdcare-header-section a{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #033565;
    background: #fff;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
  }

  .hdcare-header-section a:hover{
    transform: translateY(-3px);
    color: #033565 !important;
  }

  .hdcare-header-section-title h2{
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-align: start;
  }

  .hdcare-content-section{
    background: rgba(17, 36, 67, 0.8);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 30px;
    border-radius: 20px;
  }

  .hdcare-content-section-items{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .hdcare-content-section-item-content{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
  }

  .hdcare-content-section-item-content img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
  }

  .hdcare-content-section-item-content p{
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }

  .hdcare-content-section-link{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
  }

  .hdcare-content-section-link:hover{
    transform: translateY(-3px);
  }

  .grid-banner{
    display: none !important;
  }

  .hide-on-mobile{
    display: flex;
  }

  .hide-on-desktop{
    display: none;
  }

  @media (max-width: 400px) {
    .mini-apps {
      grid-template-columns: repeat(4, 1fr);
    }

    .mini-app-name {
      font-size: 11px;
    }
  }

  @media (max-width: 1280px) {

    .mini-apps{
      grid-template-columns: repeat(8, 1fr);
    }

    .ai-module{
      height: auto;
    }
    
    .hide-on-mobile{
      display: none;
    }

    .hide-on-desktop{
      display: flex;
    }

    .container {
      padding: 0 20px;
    }

    .banner-carousel {
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }

    .carousel-wrapper {
      max-width: 100%;
      width: 100%;
    }

    .ai-module-wrapper {
      width: 100%;
      max-width: max-content;
    }

    .hdcare-content-section-items{
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 10px;
    }

    .hdcare-section{
      height: auto;
    }
  }

  @media (max-width: 1200px) {
    .navigation-links{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }

    .health-link,
    .dental-link,
    .beauty-link {
      grid-column: span 2;
    }

    .hdcare-link,
    .hdmall-link {
      grid-column: span 3;
    }

    .container-product-card {
      flex-direction: column;
    }

    .container-product-card .product-card {
      min-width: 100%;
      max-width: 100%;
    }
  }

  @media (max-width: 900px) {
    .container {
      padding: 0 20px;
    }

    .header-content h1 {
      font-size: 24px;
    }

    .carousel-wrapper {
      height: auto;
    }

    .ai-module-wrapper {
      max-width: 100%;
    }

    .mini-apps {
      grid-template-columns: repeat(4, 1fr);
    }

    .navigation-links {
      grid-template-columns: repeat(6, 1fr);
    }

    .health-link,
    .dental-link,
    .beauty-link {
      grid-column: span 2;
    }

    .hdcare-link,
    .hdmall-link {
      grid-column: span 3;
    }
  }

  @media (max-width: 767px) {

    .hero-section {
      padding-top: 30px;
    }

    .glide__track{
      border-radius: 10px;
    }

    .glide__arrows {
      padding: 0 10px;
    }

    .glide__arrow {
      padding: 8px;
      width: 36px;
      height: 36px;
    }

    .glide__arrow svg {
      width: 20px;
      height: 20px;
    }

    .glide__slide img {
      border-radius: 16px;
    }

    .product-card-section-content .brand-slides#brand-slides{
       padding: 10px 0px;
    }

    .brand-section .product-card-section-content{
      padding: 0px 10px;
    }

    .product-card-section-content {
      padding: 10px;
    }

    .header-content h1 {
      font-size: 24px;
    }

    .navigation-links {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .health-link,
    .dental-link,
    .beauty-link,
    .hdcare-link {
      grid-column: span 1;
    }

    .hdmall-link {
      grid-column: span 2;
    }


    .hdmall-aboutus-link {
      display: none;
      /* padding-left: 60px;
      font-size: 14px;
      padding: 12px 5px 12px 60px; */
    }

    .hdmall-aboutus-link img {
      height: 60px;
    }

    .banner-carousel {
      gap: 20px;
    }

    .glide__bullet {
      width: 18px;
      height: 7px;
    }

    .glide__bullet--active {
      width: 35px;
    }

    .hdcare-section{
      padding: 20px;
    }

    .hdcare-section{
      flex-direction: column;
    }

    .brand-card-item{
      padding: 10px;
      width: min(115px, 28vw);
      height: auto;
      aspect-ratio: 95 / 150;
    }

    .brand-card-item::before{
      clip-path: none;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 150'%3E%3Cpath fill='black' d='M0 8C0 4.48 4.48 0 10 0H85C90.52 0 95 4.48 95 8V125C95 129 91.5 137 85 140C75 143 60 150 47.5 150C35 150 20 143 10 140C3.5 137 0 129 0 125V8Z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 150'%3E%3Cpath fill='black' d='M0 8C0 4.48 4.48 0 10 0H85C90.52 0 95 4.48 95 8V125C95 129 91.5 137 85 140C75 143 60 150 47.5 150C35 150 20 143 10 140C3.5 137 0 129 0 125V8Z'/%3E%3C/svg%3E");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }

    .product-card-header-section-title{
      gap: 10px;
    }

    .product-card-header-section-title img{
      width: 40px;
      height: auto;
    }

    .product-card-header-section-title h2{
      font-size: 18px;
    }

    .product-card-header-section-link{
      font-size: 14px;
    }

    .hdcare-header-section{
     width: 100%;
     gap: 20px;
     justify-content: center;
     align-items: center;
    }

    .hdcare-section{
      gap: 20px;
    }

    .hdcare-header-section-title{
      font-size: 16px;
      text-align: center;
    }

    .hdcare-content-section-item-content img{
      width: 60px;
      height: 60px;
    }

    .hdcare-content-section{
      padding: 20px;
      gap: 30px;
      justify-content: center;
      align-items: center;
    }

    .hdcare-content-section-link{
      font-size: 14px;
    }

  }

  @media (max-width: 480px) {
    .container {
      padding: 0 14px;
    }

    .glide__arrow{
      background-color: rgba(255, 255, 255, 0.5);
    }

    .glide__arrows {
      padding: 0 5px;
    }

    .home-page-container {
      gap: 30px;
    }

    .hero-section {
      padding-top: 30px;
      gap: 20px;
    }

    .header-content {
      flex-direction: column;
      gap: 5px;
      align-items: center;
    }

    .header-content-mobile{
      gap: 20px;
    }

    .header-content h1 {
      font-size: 20px;
      font-weight: 700;
      width: 100%;
    }

    .hdmall-aboutus-link {
      display: none;
      /* width: 100%;
      justify-content: center;
      padding: 12px 20px 12px 80px; */
    }

    .banner-carousel {
      gap: 20px;
    }

    .carousel-wrapper {
      border-radius: 16px;
    }

    .mini-apps {
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .mini-app-card {
      min-height: 70px;
      padding: 6px;
    }

    .mini-app-name {
      font-size: 12px;
      line-height: 1.2;
    }

    .mini-app-icon svg {
      width: 24px;
      height: 24px;
    }

    .ai-module {
      padding: 8px;
      padding-top: 12px;
      height: auto;
    }

    .ai-module .title {
      font-size: 15px;
    }

    .ai-module .header {
      gap: 6px;
      margin-bottom: 12px;
    }

    .product-card-header-section-link p{
      font-size: 14px;
    }

    .ai-module .header svg {
      width: 24px;
      height: 24px;
    }

    .jib-character {
      top: -80px;
      right: -110px;
    }

    .jib-character img {
      width: 300px;
    }

    .chat-bubble {
      padding: 0 8px;
    }

    .chat-bubble p {
      font-size: 12px;
    }

    .chat-section {
      padding: 8px 0;
      margin-top: 6px;
      height: auto;
    }

    .suggestion-text {
      font-size: 12px;
    }

    .suggestion-pill {
      padding: 5px 10px;
    }

    .glide__bullets {
      gap: 3px;
      margin-top: 12px;
      padding: 5px ;
    }

    .glide__bullet {
      width: 6px;
      height: 6px;
    }

    .glide__bullet--active {
      width: 20px;
    }

    #home-carousel .glide__bullets {
      margin-top: 12px;
    }

    .hdmall-link p{
      color: #222;
    }

    .health-link, .dental-link, .beauty-link, .hdcare-link,
    .hdmall-link{
      grid-column: unset;
    }

    .navigation-links{
      grid-template-columns: repeat(5, 1fr);
    }

    .navigation-link {
      gap: 5px;
      padding: 0px;
      background: transparent;
      flex-direction: column;
      color: #222;
      border-radius: 0px;
    }

    .hdmall-link p,
    .hdmall-link small{
      color: #222;
    }

    .navigation-link svg {
      display: none;
    }

    .navigation-link small{
      font-size: 10px;
    }

    .navigation-link p {
      font-size: 12px;
      text-align: center;
    }

    .navigation-link img {
      width: auto;
      height: 70px;
      position: static;
    }

    .hdmall-link img{
      height: 70px;
      width: 60px;
      object-fit: contain;
    }

    .hdcare-content-section{
      padding: 15px;
    }

    .hdcare-header-section-title h2{
      font-size: 20px;
    }

    .hdcare-header-section a{
      font-size: 12px;
      padding: 5px 10px;
      padding-right: 5px;
      padding-left: 15px;
      gap: 2px;
      border-radius: 100px;
      background: #fff;
      color: #222;
      text-decoration: none;
      text-align: center;
    }

    .hdcare-content-section-items{
      flex-direction: row;
      align-items: start;
      justify-content: center;
    }

    .hdcare-content-section-item-content{
      flex-direction: column;
      gap: 5px;
    }

    .hdcare-content-section-item-content p{
      font-size: 12px;
      text-align: center;
    }

    .banner-carousel{
      flex-direction: column-reverse;
    }

    .navigation-link:hover{
      transform: none;
      box-shadow: none;
    }

}

.grid-packages-carousel__title{
  color: #222;
}

.grid-packages-carousel__header{
  margin-top: 30px;
}

.grid-packages-carousel__link{
  color: #222;
}


/* ── Per-element Skeleton Loading ──────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -800px 0 }
  100% { background-position:  800px 0 }
}

/* Wrapper added by JS to each image's parent <a> */
.sk-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Shimmer overlay — sits on top of the image while loading */
.sk-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ebebeb 25%, #d6d6d6 50%, #ebebeb 75%);
  background-size: 1600px 100%;
  animation: sk-shimmer 1.6s infinite linear;
  border-radius: inherit;
  z-index: 2;
  transition: opacity 0.35s ease;
}

/* Image hidden until loaded */
.sk-img-wrap img {
  opacity: 0;
  transition: opacity 0.35s ease;
  display: block;
}

/* Loaded state — shimmer fades out, image fades in */
.sk-img-wrap.sk-loaded::after {
  opacity: 0;
  pointer-events: none;
}
.sk-img-wrap.sk-loaded img {
  opacity: 1;
}