* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font-title-family: "New York", Iowan Old Style, Apple Garamond, Baskerville,
    "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-body-family: Assistant, sans-serif;
  --page-width: 1400px;
  --section-padding: clamp(1.5rem, 8vw, 8rem);
}

body {
  font-family: var(--font-body-family);
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.6;
  color: #585858;
  background-color: #212121;
  width: 100%;
  overflow-x: hidden;
}

.container, section, header, main {
  max-width: 100%;
  overflow-x: clip;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-title-family);
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(100%, var(--page-width));
  margin: 0 auto;
}

.content-wrapper{
  padding: var(--section-padding);
}

.find-best-luxury-bedding-content-wrapper {
  padding: 0 0 0 var(--section-padding);
}

.footer-content-wrapper {
  padding: 0 var(--section-padding) 2rem;
}

h2 {
  font-size: clamp(22px, 2.3vw, 38px);
}

ul {
  list-style-type: disc;
  padding-left: 1.2rem;
}

.container-black{
  background-color: #212121;
}

.container-white {
  background-color: #ffffff;
}

/* PC Style*/
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
}

.logo {
  width: 220px;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

#header {
  position: relative;
  z-index: 2;
}

/* Hero Section */
#hero {
    position: relative;
    z-index: 1;
    margin-top: -7rem;
}

.hero-text {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    text-align: center;
    display: block;
    max-width: 1000px;
    width: 68%;
}

.hero-title {
    font-size: clamp(20px, 3.5vw, 52px);
    margin-bottom: clamp(1rem, 2vw, 2.5rem);
}

.hero-subtitle {
    font-size: clamp(14px, 1.5vw, 20px);
    margin-bottom: clamp(1.5rem, 4vw, 5rem);
}

.btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background-color: #fff;
    color: #101010;
    text-decoration: none;
    padding: clamp(0.5rem, 1.4vw, 1rem) clamp(0.5rem, 2vw, 1.8rem);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: bold;
    transition: none;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #101010;
    width: clamp(1.5rem, 2.4vw, 2rem);
    height: clamp(1.5rem, 2.4vw, 2rem);
    flex-shrink: 0;
}

.hero-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: block;
    text-indent: -9999px;
}

/* MPS Introduction */
#luxury-bedding-intro .container {
  color: #666666;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 8vw, 8rem);
}

.luxury-bedding-intro-title{
  color: #FFFFFF;
  font-size: clamp(16px, 2vw, 18px);
  margin-bottom: clamp(1rem, 2vw, 2.5rem);
}

.luxury-bedding-intro-text p {
  margin-bottom: clamp(0.5rem, 1.2vw, 1.5rem);
}

.luxury-bedding-intro-text p:last-of-type {
  margin-bottom: 0;
}

/* Why Choose a Luxury Bedding Brand */
#why-luxury-bedding .container{
  color: #747474;
}

#why-luxury-bedding h2 {
  color: #212121;
  text-align: center;
  margin-bottom: clamp(1.5em, 4vw, 5rem);
}

#why-luxury-bedding .why-luxury-bedding-top {
  display: flex;
  gap: 4rem;
  align-items: center;
  margin-bottom: clamp(4rem, 2vw, 6rem);
}

.why-luxury-bedding-text,
.why-luxury-bedding-img {
  flex: 1;
  box-sizing: border-box;
}

.why-luxury-bedding-img {
  width: 100%;
  overflow: hidden;
}

.why-luxury-bedding-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.why-luxury-bedding-text p {
  line-height: 2.4;
}

.why-luxury-bedding-bottom {
  background-color: #F4F4F5;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}

.why-luxury-bedding-bottom h3 {
  color: #212121;
  margin-bottom: clamp(1.5rem, 2vw, 2rem);
  font-size: clamp(16px, 2vw, 22px);
}

.why-luxury-bedding-bottom p {
  margin-bottom: clamp(1.5rem, 1.2vw, 1.6rem);
  line-height: 1.8;
}

.why-luxury-bedding-bottom p:last-of-type {
  margin-bottom: 0;
}

/* Luxurious bedding selection */
.luxurious-bedding-selection-heading h2 {
  color: #FFFFFF;
  text-align: center;
  margin-bottom: clamp(1.5rem, 2vw, 2.2rem);
}

.luxurious-bedding-selection-heading p {
  color: #666666;
  text-align: center;
}

.bedding-factors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3vw, 6rem);
  text-align: center;
  margin-top: clamp(2rem, 3.5vw, 6rem);
  margin-bottom: clamp(2rem, 3.5vw, 6rem);
}

.bedding-factor {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bedding-factor img {
  max-width: 80px;
  max-height: 80px;
}

.bedding-factor h3 {
  color: #fff;
  margin-top: clamp(2rem, 3vw, 3.5rem);
}

.bedding-factor p {
  color: #666666;
  margin-top: clamp(1.2rem, 2vw, 2rem);
}

.design-and-aesthetics {
  display: flex;
  align-items: stretch;
  gap: 0;
  background-color: #C5A97E;
  color: #000000;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: clamp(2rem, 3.5vw, 4rem);
}

.design-and-aesthetics-text {
  flex: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 2.5vw, 2.2rem);
}

.design-and-aesthetics-text h3 {
  font-size: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(1.2rem, 1.2vw, 1.4rem);
}

.design-and-aesthetics-text p:first-of-type {
  margin-bottom: clamp(1.2rem, 1.2vw, 1.4rem);
}

.design-and-aesthetics-text p {
  line-height: 2;
}

.design-and-aesthetics-img {
  flex: 3;
  display: flex;
}

.design-and-aesthetics-img img {
  width: 100%;
  height: auto; 
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

@media (min-width: 1200.99px) and (max-width: 1350px) {
  .design-and-aesthetics-text p {
    line-height: 1.5;
  }
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .design-and-aesthetics-text p {
    line-height: 1.2;
  }
}

@media (max-width: 1000px) {
  .design-and-aesthetics {
    flex-direction: column;
  }

  .design-and-aesthetics-text,
  .design-and-aesthetics-img {
    flex: 100%;
  }

  .design-and-aesthetics-img {
    order: -1;
  }

  .design-and-aesthetics-img img {
    width: 100%;
    height: auto;
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
  }
}

/* Find The Best Luxury Bedding */
.find-best-luxury-bedding {
  display: flex;
  align-items: stretch;
  gap: 4rem;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.find-best-luxury-bedding-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.find-best-luxury-bedding-img {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.find-best-luxury-bedding-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.find-best-luxury-bedding-text h3 {
  font-size: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(1.4rem, 1.2vw, 1.6rem);
  color: #ffffff;
}

.find-best-luxury-bedding-text p {
  line-height: 2;
  margin-bottom: clamp(1.5rem, 1.5vw, 2.5rem);
  color: #C7C7C7;
}

.find-best-luxury-bedding-text p span {
  color: #ffffff;
}

@media (min-width: 990.5px) and (max-width: 1200px) {
  .find-best-luxury-bedding-text p {
    line-height: 3;
  }
}

@media (min-width: 768px) and (max-width: 990px) {
  .find-best-luxury-bedding-text p {
    line-height: 2;
  }
}

.style-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 8rem);
}

.style-categories div {
  text-align: center;
}

.style-categories img {
  width: 100%;
  height: auto;
}

.style-categories h3 {
  font-size: clamp(16px, 2vw, 24px);
  margin: clamp(1.4rem, 1.2vw, 1.6rem) auto;
  color: #ffffff;
}

.style-categories p {
  line-height: 1.8;
  color: #C7C7C7;
}

.content-wrapper-style-categories {
  padding-bottom: 0;
}

/* Care & Longevity */
.care-longevity-heading {
  text-align: center;
}

.care-longevity-heading h2 {
  color: #ffffff;
  margin-bottom: clamp(1.5rem, 2vw, 2.2rem);
}

.care-longevity-heading p {
  max-width: 75%;
  margin: 0 auto;
  margin-bottom: clamp(2rem, 3.5vw, 6rem);
}

.care-longevity-content {
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-template-rows: auto auto;
  gap: 2rem clamp(2rem, 3.5vw, 6rem);
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(2rem, 3.5vw, 6rem);
}

.washing-tips-img { grid-column: 1; grid-row: 1; }
.washing-tips-text { grid-column: 2; grid-row: 1; }
.drying-and-storage-img { grid-column: 1; grid-row: 2; }
.drying-and-storage-text { grid-column: 2; grid-row: 2; }
.maintaining-softness-img { grid-column: 1; grid-row: 3; }
.maintaining-softness-text { grid-column: 2; grid-row: 3; }

.care-longevity-content h3 {
   color: #ffffff;
   font-size: clamp(16px, 2vw, 18px);
   margin-bottom: clamp(1rem, 1.2vw, 1.3rem);
}

.care-longevity-content ul li {
   line-height: 1.8;
   color: #ACACAC;
}

.care-longevity-bottom-text {
  text-align: center;
  color: #ACACAC;
}

.care-longevity-bottom-text p:first-of-type {
  margin-bottom: clamp(1.2rem, 1.2vw, 1.5rem);
}
/* Luxury Lifestyle User Trust */
#luxury-lifestyle-user-trust {
  color: #747474;
}

.luxury-lifestyle-user-trust-heading {
  text-align: center;
}

.luxury-lifestyle-user-trust-heading h2 {
  margin-bottom: clamp(1.5rem, 2vw, 2.2rem);
  color: #212121;
}

.luxury-lifestyle-user-trust-heading p {
  max-width: 75%;
  margin: 0 auto;
  margin-bottom: clamp(2rem, 3.5vw, 6rem);
}

.luxury-lifestyle-user-trust-content {
  background-color: #F4F4F5;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  display: flex;
  align-items: center; 
  gap: 2rem;
  margin-bottom: clamp(1.2rem, 2vw, 4rem);
}

.luxury-lifestyle-user-trust-img img {
  width: 80px;
  height: auto;
  display: block;
  object-fit: cover;
}

.luxury-lifestyle-user-trust-text {
  flex: 1;
}

.luxury-lifestyle-user-trust-text h3 {
  color: #212121;
  margin-bottom: clamp(0.8rem, 1.2vw, 1rem);
}

.luxury-lifestyle-user-trust-text p { 
  line-height: 1.8;
}

.luxury-lifestyle-user-trust-content:last-child {
  margin-bottom: 0;
}

.luxury-lifestyle-user-trust-text-right {
  text-align: right;
}
/* Shop Luxury Bedding */
.shop-luxury-bedding-heading {
  text-align: center;
  color: white;
}

.shop-luxury-bedding-heading h2 {
  color: #FFFFFF;
  text-align: center;
  margin-bottom: clamp(1.5rem, 2vw, 2.2rem);
}

.shop-luxury-bedding-heading p {
  margin-bottom: clamp(0.8rem, 1.2vw, 1rem);
}

.shop-luxury-bedding-heading p:last-of-type {
  margin-bottom: clamp(3rem, 4vw, 6rem);
}

.btn-all {
  font-size: clamp(12px, 1.2vw, 14px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 500;
}

.btn-all-icon {
  width: clamp(2rem, 2.4vw, 3.5rem);
  height: clamp(2rem, 2.4vw, 3.5rem);
  border-radius: 5px;
}

.btn-text {
  width: 100%;
}

#footer {
  text-align: center;
  color: #ffffff;
}

/* Mobile Style */
@media (max-width: 768px) {
  .header-container {
    padding-top: 1rem;
  }

  /* Adjust mob hero height */
  #hero .container {
    height: 68vh;
    max-height: 650px;
  }

  .hero-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .hero-text {
    width: 88%;
  }

/* Why Choose a Luxury Bedding Brand */
  #why-luxury-bedding .why-luxury-bedding-top {
    flex-direction: column;
    gap: 1.5rem;
  }

  .why-luxury-bedding-img {
    justify-content: center;
  }

  .design-and-aesthetics-text h3 {
    text-align: center;
  }

/* Luxurious bedding selection */
  .bedding-factors {
    grid-template-columns: 1fr;
  }

/* Find The Best Luxury Bedding */
  .find-best-luxury-bedding {
    flex-direction: column;
    padding: 0 var(--section-padding);
  }

  .find-best-luxury-bedding-text,
  .find-best-luxury-bedding-img {
    flex: 100%;
  }

  .find-best-luxury-bedding-img {
    order: -1;
  }

  .find-best-luxury-bedding-img img {
    width: 100%;
    height: auto;
  }

  .style-categories {
    grid-template-columns: 1fr;
  }

/* Care & Longevity */
  .care-longevity-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .care-longevity-content > * {
    width: 100%;
  }

  .washing-tips-img, 
  .drying-and-storage-img,
  .maintaining-softness-img,
  .washing-tips-text h3, 
  .drying-and-storage-text h3,
  .maintaining-softness-text h3{
    text-align: center;
  }

  .find-best-luxury-bedding-content-wrapper {
    padding: 0;
  }

  .washing-tips-img img, .drying-and-storage-img img {
    width:100%;
  }

/* Luxury Lifestyle User Trust */
  .luxury-lifestyle-user-trust-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    text-align: center;
  }

  .luxury-lifestyle-user-trust-text-right {
    text-align: center;
  }

  .luxury-lifestyle-user-trust-img {
    margin: 0 auto;
    order: -1;
  }

  .luxury-lifestyle-user-trust-img img {
    width: 100%;
    max-width: 80px;
  }

  .luxury-lifestyle-user-trust-text {
    flex: none;
  }

  .luxury-lifestyle-user-trust-heading p, .care-longevity-heading p {
    max-width: 100%;
  }
}