/* Fonts */

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

* {
  font-family: "roboto";
  margin: 0;
}

:root {
  --color-article: #222d57;
}

body {
  max-height: 100% !important;
  background-color: #efefef;
  /* background-image: url("/assets/img/others/waves1.svg"),
    linear-gradient(to right, #f7f7f7, #ffffff); */
}

#equal-space {
  margin-top: 5rem !important;
}

#herox {
  margin-top: 1rem;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  /* Ensure no overflow issues */
  margin-left: 2rem;
  margin-right: 2rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  display: flex;
  flex-direction: column;
}


/* banner hero controller */
.container-herox {
  height: 100%;
  max-height: 77vh;
  /* Limit the container's height to 70% of viewport height */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  /* Ensure the content stays within the borders */
}

#herox video.background-clip {
  width: 100%;
  height: auto;
  max-height: calc(100% - 2.5rem);
  border: 5px solid #2e3192;
  /* Ensure video height does not exceed parent container minus marquee height */
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  object-fit: cover;
  z-index: -1;
  /* Ensure video is properly layered */
}

.marqueex {
  width: 100%;
  color: #efefef;
  background-image: url("/assets/img/others/waves2.svg"), linear-gradient(to right, #be0119, #d4001b);
  padding: 0.5rem 0;
  /* Adds some padding for spacing */
  border-bottom-left-radius: 50px;
  /* Maintain border-radius consistency */
  border-bottom-right-radius: 50px;
  /* Maintain border-radius consistency */
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  position: absolute;
  /* Position the marquee absolutely within the container */
  bottom: 0;
  /* Align the marquee to the bottom of the container */
  z-index: 1;
  /* Ensure the marquee is above the video */
}

marqueex {
  margin-top: 2rem;
}

.text-article {
  color: var(--color-article) !important;
  font-family: "Manrope", Tahoma !important;
  font-weight: 300 !important;
}

#land-title h1 {
  font-size: 3.1rem;
  font-weight: 600;
  font-family: var(--font-intro);
  color: var(--color-primary);
}

@media screen and (min-width: 1030px) {
  #land-title h1 {
    font-size: 2.8rem;
  }
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
  #land-title h1 {
    font-size: 1.6rem;
    text-align: center;
    margin-top: -3rem;
  }

  .x-container {
    height: 35vh !important;
  }

  .service-details {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }
}

.x-image-one {
  max-height: 100% !important;
  background-image: url("/assets/img/others/waves3.svg"),
    linear-gradient(to right, #e7f0ff, #2e3192);
  border-radius: 20px;
}

.x-image-one img {
  z-index: 999;
  height: 14rem;
  width: 55rem;
  margin-left: 0rem;
}

.x-image-two {
  max-height: 100% !important;
  background-image: url("/assets/img/others/waves3.svg"),
    linear-gradient(to right, #e7f0ff, #2e3192);
  border-radius: 20px;
}

.x-image-two img {
  z-index: 999;
  width: 90rem !important;
  height: auto;
  margin-left: -2rem;
}

.x-image-three {
  max-height: 100% !important;
  background-image: url("/assets/img/others/waves2.svg"),
    linear-gradient(to right, #e7f0ff, #2e3192);
  margin-left: 5px !important;
  border-radius: 20px;
}

.x-image-three img {
  z-index: 999;
  margin-top: -3rem;
}

.x-image-four {
  max-height: 100% !important;
  background-image: url("/assets/img/others/waves2.svg"),
    linear-gradient(to right, #ffb82e, #f15400);
  margin-top: 15px !important;
  margin-left: 5px !important;
  border-radius: 20px;
}

.x-image-four img {
  z-index: 999;
  width: 90rem !important;
  height: auto;
  margin-top: 5rem;
}

.x-container {
  height: 40vh;
}

.service-details {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.service-details i {
  font-size: 3rem;
  border: 3px solid var(--color-primary);
  border-radius: 50px;
}

.service-details i:hover {
  background-color: var(--color-secondary);
  color: #e7f0ff;
}

#serivice2 {
  display: none;
}






.media-items {
  background-image: linear-gradient(to right, #ff6200, #c30303);
  border-radius: 3rem;
  padding: 2.8rem 3.5rem 3rem 3.5rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  margin-top: -2rem;
}

.media-items h1 {
  font-size: 2.65rem;
  color: #fff;
  margin-top: 0rem;
  margin-bottom: 1.2rem;
}

.media-items p {
  font-size: 17.5px;
  color: #fff;
  line-height: 1.65;
  margin-bottom: 1.6rem;
}

.shipping-items,
.ecom-image {
  max-width: 100%;
  margin: 12px 0 18px 0;
}

.get-started-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  background-color: #ffffff;
  color: #111111;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
}

.serve-controls button {
  padding: 10px 22px;
  background-color: #2e3192;
  color: white;
  border: none;
  border-radius: 50px;
  margin-left: 10px;
}

.serve-controls #both {
  margin-right: 20px;
  margin-bottom: 30px;
}

.media-image {
  z-index: 999;
  margin-bottom: -11rem;
  margin-left: 18rem;
  width: 686px;
}

.image-content video,
.content video {
  width: 100%;
  max-width: 550px;
  border-radius: 30px;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
  .serve-controls #both {
    margin-right: 65px;
    margin-top: 70px;
  }

  .image-content video,
  .content video {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}








/* our app store section */
.app-download-section {
  background-image: linear-gradient(180deg, #FFFFFF 51%, #566af0c9 100%) !important;
  padding: 5rem 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.app-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.app-text {
  flex: 1;
}

.app-text h2 {
  margin-bottom: -1rem;
  color: var(--color-primary);
  font-family: Sarabun !important;
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.app-text p {
  color: var(--color-primary);
  font-family: Sarabun !important;
  font-size: 1.25rem;
  opacity: 0.95;
  max-width: 420px;
  margin-bottom: 2rem;
}

.stores {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

.store-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.store-btn i {
  font-size: 2rem;
}

.rating {
  margin-top: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-primary);
}

.phone-mockup {
  flex: 1;
  text-align: center;
}

.phone-mockup img {
  max-width: auto;
  position: relative;
  margin-top: -2rem;
  width: auto;
  height: 30rem !important;
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.3));
  transform: rotate(0deg);
}

/* Responsive */
@media (max-width: 992px) {
  .app-content {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }

  .app-text h2 {
    font-size: 2.6rem;
  }

  .stores {
    justify-content: center;
  }

  .phone-mockup img {
    max-width: 320px;
    height: 13rem !important;
    transform: rotate(-10deg) !important;
    transform: none;
  }
}





.pro-store .pack-more {
  color: white;
  font-size: 1.5rem;
  border-radius: 3rem;
  text-decoration: none;
}

.pro-store .pack-more:hover {
  color: #eae559;
}


/* Responsive */
@media (max-width: 992px) {
  .pro-store .pack-more {
    font-size: 0.8rem;
    max-width: 20px !important;
  }

  .pro-store center {
    margin-top: 8.5rem !important;
  }
}



div .divider-rope {
  width: 900px;
  justify-content: center;
}

#statistics {
  margin-top: -3rem;
  background-image: url("/assets/img/others/waves2.svg"),
    linear-gradient(to right, #ffffff, #f2f8ff);
}

#statistics .quotation-mark {
  font-family: Work Sans, "Sans";
  color: var(--color-secondary);
  font-size: 12rem;
  z-index: 999;
  margin-bottom: -8rem;
}

#statistics .x-quote h1 {
  font-size: 3rem;
  font-family: var(--font-title);
  color: var(--color-default);
}

#statistics .counts h1 {
  font-size: 5rem;
  font-weight: 500;
  text-align: center;
  font-family: var(--font-title);
  color: var(--color-primary);
}

#statistics p {
  font-size: 1.7rem;
  text-align: center;
  font-family: Work Sans, "Sans";
  color: var(--color-default);
}

#x-countries h1 {
  font-weight: bold;
  margin-bottom: -1rem;
  font-family: Manrope, sans-serif;
  color: var(--color-primary);
  font-size: 3.2rem !important;
  width: 100% !important;
  transform: none !important;
  word-break: break-word !important;
  text-align: center !important;
  text-wrap: balance !important;

}


#x-media .media-image {
  margin-top: -6rem !important;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {

  #herox,
  #herox #marqueex,
  #herox #container-herox,
  #herox #introVideo {
    margin-top: 3.3rem !important;
    margin-left: 0rem;
    margin-right: 0rem;
    border-radius: 0rem;
  }

  #herox .marqueex {
    height: 2rem !important;
    font-size: 0.8rem;
  }

  #statistics .quotation-mark {
    text-align: center;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif,
      "Sans";
    color: var(--color-primary);
    font-size: 9rem !important;
    z-index: 999;
    margin-bottom: -9rem;
  }

  #statistics .x-quote h1 {
    font-size: 1rem;
    text-align: center;
    margin-top: 4rem;
  }

  #statistics .counts h1 {
    font-size: 3rem;
  }

  #statistics p {
    font-size: 1.1rem;
  }

  h4.text-article {
    font-size: 1rem !important;
    padding: 5px;
  }

  #x-media .media-image {
    height: auto;
    width: 350px;
    margin-left: 0.5rem;
    margin-top: -12rem !important;
  }

  #x-media a {
    height: auto;
    width: 85% !important;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
  }

  #x-media .media-items p {
    font-size: 1rem;
  }

  #x-media .right-part {
    margin-bottom: -2rem !important;
  }

  .media-items h1 {
    font-size: 2rem;
    margin-top: 2rem;
  }

  .media-items h4 {
    font-size: 1rem;
    margin-top: 2rem;
  }

  .media-items iframe {
    border-radius: 1rem;
    max-width: 100%;
    max-height: 100%;
  }

  .media-items {
    padding: 0.5rem 0.5rem 0rem 0.5rem;
    border-radius: 0rem;
  }

  .media-items .content {
    margin-top: 0rem;
  }





  #land-title h2 {
    text-align: center;
  }

  #service1 h4,
  #service2 h4 {
    font-size: 1rem;
  }

  #service-details h2 {
    margin-top: -2rem;
  }

  #service-details h1 {
    margin-top: 1em;
  }

  #service-details i {
    font-size: 2rem;
  }

  #service-details .controls {
    margin-top: -4.5rem;
    z-index: 99;
  }

  #service-details .image-grid {
    margin-top: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #service-details .x-image-two img {
    margin-left: 0rem;
  }

  .x-image-one img {
    height: auto;
    width: auto;
  }

  /* ......................................................... */
  #partnerships #ticker-content {
    display: flex;
    align-items: center;
    /* Vertically align logos */
    justify-content: flex-start;
    /* Align logos to the start */
    gap: 10px;
    /* Added gap between logos */
    /* overflow: hidden; Prevents overflow */
    flex-wrap: nowrap;
    /* Ensures logos stay in one line */
  }

  #partnerships #ticker-content .item {
    flex: 0 0 auto;
    /* Prevent shrinking or growing */
    margin: 0;
    /* No margin between items */
    padding: 0;
    /* No padding around items */
  }

  #partnerships #ticker-content img {
    max-height: 50px;
    /* Restrict logo height to a uniform size */
    width: auto;
    /* Maintain logo aspect ratio */
    display: block;
    /* Ensure no extra space around images */
  }

  #partnerships #ticker-content img {
    max-height: 110px !important;
    /* Smaller logo height on mobile */
  }

  #partnerships .partner-row {
    margin-bottom: 0 !important;
  }

  #partnerships .container .row {
    margin-bottom: 0 !important;
  }


  /* ......................................................... */

  #x-countries h1 {
    font-size: 1.6rem;
    margin-top: -3rem;
  }

  #x-countries #equal-space {
    display: none;
  }

  #x-countries img {
    margin-bottom: 2rem;
  }

  #comments .card-content {
    margin-top: -2rem;
    z-index: 999;
  }

  #comments img {
    height: auto;
    width: 5rem;
  }

  #partnerships h1 {
    font-size: 1.6rem !important;
    margin-top: -5rem;
  }

  #partnerships .owl-stage-outer {
    margin-top: -5rem;
  }


}








.liveclock #uk-time {
  font-family: Sarabun !important;
  width: 300px;
  background: transparent;
  margin-left: 5rem !important;
  margin-bottom: -20px;
  border: none;
  font-weight: 700;
  font-size: 3rem;
  color: #ffffff;

}

@media (max-width: 767px) {

  .liveclock #uk-time {
    margin-bottom: -2rem !important;
    font-weight: 700;
    margin-left: 1.5rem !important;
    font-size: 2.5rem !important;
  }

}


#comments {
  background-color: white;
}

#comments h1 {
  font-weight: bold;
  margin-bottom: -1rem;
  font-family: Sarabun !important;
  color: var(--color-primary);
  font-size: 3.2rem !important;
  width: 100% !important;
  transform: none !important;
  word-break: break-word !important;
  text-align: center !important;
  text-wrap: balance !important;

}

@media (max-width: 767px) {

  #comments h1 {
    font-size: 2.2rem !important;
  }
}

#partnerships h1 {
  font-size: 4rem;
  color: var(--color-primary);
  font-family: var(--font-title);
  text-align: center;
  font-weight: 400;
}






















.working-days {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  margin-bottom: -17rem;
  z-index: 999;

}

.working-days::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Shipping container */
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: -2;
}

.contact-card {
  position: relative;
  z-index: 0;
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
  background-image: linear-gradient(to right, #ff6200, #c30303);
  border-radius: 3rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

.contact-left {
  flex: 1;
  padding: 52px 58px;
}

.give-call {
  color: #ffdb70;
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 42px;
  letter-spacing: 0.5px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-bottom: -20px;
}

.contact-card i {
  color: #ffffff;
  font-size: 2.5rem;
}

.icon {
  font-size: 32px;
  width: 48px;
  flex-shrink: 0;
}

.phone,
.email {
  color: #93c5fd;
}

.whatsapp {
  color: #22c55e;
}

.contact-link {
  color: #ffffff;
  font-size: 3rem;
  text-decoration: none;
  font-weight: 500;
}

.contact-link:hover {
  color: #ffdb70;
}

.label {
  display: block;
  color: #7dd3fc;
  font-size: 1rem;
  margin-bottom: 6px;
}

.office-hours-panel {
  width: 420px;
  margin: 2.5rem;
  border-radius: 2rem;
  background: rgba(1, 25, 58, 0);
  display: flex;
  flex-direction: column;
  border: 2px solid #ff6200;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}

.hours-header {
  padding: 19px 30px 0px !important;
  color: #bae6fd;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 24px;
  padding-bottom: 12px;
  /* border-bottom: 1px solid #ffffff47; */
}

.hours-row {
  padding: 5px 34px 5px !important;
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  color: #e2e8f0;
  font-size: 1.1rem;
  border-bottom: 1px solid #ffffff47;
}

.hours-table {
  flex-grow: 1;
}


.hours-row:last-child {
  border-bottom: none;
}

.live-time {
  margin-top: 28px;
  background: var(--color-primary);
  border-radius: 0px 0px 30px 30px;
  padding: 18px 0px;
  text-align: center;
  border: 1px solid #475569;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#uk-time {
  font-size: 2.35rem;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
}

.live-label {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: 1.5px;
}

/* Responsive */
@media (max-width: 992px) {
  .contact-card {
    flex-direction: column;
    padding: 15px;
  }

  .live-time {
    border-radius: 20px;
  }

  .office-hours-panel {
    margin: 0rem;
    padding: 1rem;
    width: 100%;
    border-left: none;
  }
}

@media (max-width: 640px) {
  .contact-left {
    padding: 40px 28px;
  }

  .give-call {
    font-size: 1.75rem;
  }

  .contact-link {
    font-size: 1.3rem;
  }
}
























/* ------------------------------------------
content Container
--------------------------------------------- */

#contentContainer .rounded {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


#contentContainer p a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* ------------------------------------------
Hamper
--------------------------------------------- */

.hamper-header {
  text-align: center;
  padding: 10px 20px 30px;
  background: url('https://www.transparenttextures.com/patterns/giftly.png') repeat;
}

.hamper-header h1 {
  font-family: Sarabun !important;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 4rem;
}

.hamper-header p {
  font-family: Manrope !important;
  font-size: 1.1rem;
  max-width: 700px;
  margin: auto;
  text-align: justify;
}

.hamper .price {
  font-size: 1.5rem;
  color: var(--color-light);
  font-family: Manrope !important;
  text-align: center;
}

.hamper span {
  font-family: Manrope !important;
  text-align: center;
  justify-content: center;
  display: block;
  color: yellow;
}

.hamper .movenext {
  text-decoration: none;
}


.hamper .hamper-card {
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; */
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  background: var(--color-primary);
  border-radius: 30px;
}



.hamper .hamper-card a {
  color: var(--color-light) !important;
  text-align: center !important;
  margin-left: 35%;
}



.hamper .cta-btn {
  font-family: Sarabun !important;
  text-align: center !important;
  margin-top: 3rem !important;
  width: 15rem;
  display: block;
  margin: 0 auto;
  /* horizontally centers the button */
}



.hamper-card {
  border: none;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.hamper-card .card-text {

  font-family: Manrope !important;
  color: var(--color-light);
  text-align: center;
}

.hamper-card:hover {
  transform: translateY(-5px);
  transform: translateY(-5px) scale(1.05);
}

.hamper-card .card-title {
  font-family: Sarabun !important;
  color: var(--color-light);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
}

.cta-btn {
  background-color: #b30000;
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
}

.cta-btn:hover {
  background-color: #a00000;
  color: white;
}


.hamper-image {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: antiquewhite;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 767px) {
  .hamper-header h1 {
    font-size: 1.8rem;
  }
}



/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.store {
  width: 100%;
  background: #fff;
}

.store .card {
  height: 100%;
  /* fill the column */
  max-height: 430px;
  /* set your fixed height */
  min-height: 0px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* push content to top and bottom */
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
    rgb(209, 213, 219) 0px 0px 0px 1px inset;
  transition: all 0.3s ease-in-out;

}


.store .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.store .card-title,
.store .card-text {
  font-family: Sarabun !important;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.store .btn-add {
  margin-top: auto;
  width: 100%;
}

.store .offer-section {
  border-radius: 30px;
  background-color: #f3f3f3;
}


#store h2 {
  font-size: 3rem;
  font-family: Sarabun !important;
  font-weight: 600;
  color: var(--color-primary);
}

#store .offer-title {
  font-size: 3rem;
  font-weight: 600;
  margin-top: 1rem;
  color: var(--color-primary);
}

.store .card:hover {
  transform: scale(1.01);
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}


.store .card img {
  background: antiquewhite;
}



.store a {
  color: #111111;
}





.store .card {
  border: none;
  text-align: center;
}

.store .card img {
  max-width: 100%;
  height: auto;
}

.store .offer-section {
  background-color: #f8f9fa;
  padding: 20px;
}

.store .offer-title {
  color: red;
  font-weight: bold;
}

.store .btn-add {
  background-color: #ffca08;
  border: none;
  padding: 10px 20px;
  font-size: 0.75rem;
  line-height: 1;
}

.store .btn-add:hover {
  background-color: #e6b800;
}



.store .step-container {
  z-index: 2;
  padding: 4rem;
  display: block;
  border-radius: 50px;
  position: relative;
  margin-bottom: -7rem !important;
  margin-top: 5rem !important;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  background: var(--color-secondary);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.store .step-title {
  color: #ffffff !important;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2rem;
}

.store .step-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 0 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.store .step-number {
  font-size: 1.5rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.store .step-icon {
  font-size: 4rem;
  color: #dc3545;
  margin-bottom: 1rem;
}

.store .step-text {
  color: #000000;
  font-size: 0.9rem;
}

.store .step-line {
  height: 2px;
  width: 60px;
  background: #dee2e6;
  position: relative;
  top: -20px;
}

@media (max-width: 768px) {

  #store .product-container {
    margin-top: 7rem !important;
  }


  #store .product-description h2 {
    font-size: 1.7rem;
    margin-top: 1rem !important;
  }


  #store .breadcrumb-item {
    display: none;
  }

  #store #sailing {
    margin-top: 2.5rem !important;
  }

  #store h2 {
    font-size: 2rem;
    margin-top: 9rem !important;
  }


  .store .btn-add {
    background-color: #ffc908;
    border: none;
    padding: 5px 5px;
    margin-left: 15px;
    font-size: 0.75rem;
    line-height: 1;
  }


  .store .step-container {
    flex-direction: column;
    padding: 20px;
  }

  .store .step-card {
    margin: 10px 0;
  }

  .store .step-line {
    display: none;
  }
}



#store .product-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  max-width: 800px;
  margin: 20px auto;
}

#store .product-image {
  max-width: 100%;
  height: auto;
}

#store .color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}

#store .color-option.selected {
  border: 2px solid #000;
}

#store .product-image {
  background: antiquewhite;
  border-radius: 30px;
}



.pro-store {
  padding: 50px;
}

.pro-store .store h1 {
  font-size: 3rem;
  text-align: center;
  color: white;
  margin-bottom: 10px;
}

.pro-store h3 {
  font-family: Sarabun, sans-serif;
  font-size: 2rem;
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 10px;
}


.pro-store .product-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}


.pro-store .pagination button {
  font-size: 5rem;
  z-index: 999;
}


.pro-store .product-card {
  background-color: transparent;
  background-image: linear-gradient(rgb(181, 0, 0) 51%, rgb(200, 0, 6) 100%);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  border-radius: 20px;
  padding: 10px;
  width: 230px;
  text-align: center;
  display: none;
}

/* Responsive for mobile: 1 per row */
@media (max-width: 767px) {
  .pro-store .product-card {
    width: 119px !important;
    height: 104px;
  }

  .pro-store .product-image-wrapper {
    padding: 0px;
    height: 6rem;
  }

  .pro-store .product-card img {
    width: 268%;
    height: 126px;
    object-fit: contain;
    margin-left: -1.2rem;
  }
}

.pro-store .product-image-wrapper {
  background: #dddddd00;
  padding: 15px;
  border-radius: 10px;
}

.pro-store .product-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
}


.pro-store .product-card h4 {
  font-family: Sarabun !important;
  color: wheat;
  text-align: center;
  padding-left: 10px;
  font-size: 1.2rem;
  margin: 10px 0 5px;
}

.pro-store .product-card span {
  font-weight: 400;
  margin-bottom: 0.2rem;
  padding-left: 2px;
  padding-right: 0px;
  width: 100%;
  color: rgb(255, 255, 255);
}

.pro-store .product-container .size {
  font-family: Sarabun !important;
  text-align: center !important;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 0.8rem !important;
  width: 205px !important;
  font-size: 0.8rem;
}

.pro-store .product-container .price {
  font-family: Sarabun !important;
  text-align: center !important;
  color: #ffffff;
  margin-left: -5px;
  font-weight: 700;
  font-size: 1rem;
  /* color: burlywood; */
}

.pro-store .category-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.pro-store .category-btn {
  font-family: Sarabun !important;
  background: rgb(0, 119, 255);
  padding: 10px;
  text-align: center;
  border-radius: 50px;
  width: 120px;
  cursor: pointer;
  color: white;
  font-weight: bold;
}


.pro-store .category-btn:hover {
  background: #eae559;
  color: black;
}


.pro-store .pagination button:hover {
  background: rgba(2, 59, 140, 0);
  color: rgb(255, 225, 0);
}

.pro-store .pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.pro-store .pagination button {
  padding: 0px 20px;
  font-weight: bold;
  color: #ffff;
  background: rgba(233, 233, 233, 0);
  border: none;
  border-radius: 0px;
  cursor: pointer;
}


.pro-store h1 {
  font-weight: bold;
  margin-bottom: 1rem;
  font-family: Sarabun, sans-serif;
  color: var(--color-primary);
  font-size: 3.2rem !important;
}


@media (max-width: 768px) {


  .pro-store {
    margin-top: -1rem;
  }

  .pro-store h1 {
    font-size: 2.5rem !important;
  }


  .pro-store h1 {
    font-size: 2.5rem !important;
  }

  .pro-store .pagination button {
    padding: 0px 20px;
    font-weight: bold;
    margin-top: 13.5rem;
    position: absolute;
    font-size: 3rem;
  }

  .pro-store .product-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    margin-top: 20px;
  }


  .pro-store .product-card img {
    width: 237%;
    height: 65px;
    object-fit: contain;
    margin-left: -1.9rem;
    margin-top: -0.5rem;
  }

  .pro-store .product-card h4 {
    font-size: 0.55rem;
  }

  .pro-store .product-container .price {
    text-align: center !important;
    margin-left: -5px;
    font-size: 0.65rem;
  }

  .pro-store .product-container .size {
    font-size: 0.38rem;
    margin-left: 0.3rem !important;
    width: 92px !important;
  }

}


#intro-herox {
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 51%, #566af0c9 100%) !important;
}





/* MAP */

.map-container {
  position: relative;
  width: 100%;
  max-width: 1600px;
  /* Wide container for 16:3 */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.025);
  background-color: #fff;
}

.map-wrapper {
    aspect-ratio: 16 / 4;
    width: 100%;
    background: #90daee;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}



@media (max-width: 768px) {
  .map-wrapper {
    aspect-ratio: 16 / 5;
    /* Slightly adjusted for mobile */
  }
}