/* banner section css start */
.moodboard-banner { position: relative; width: 100%; overflow: hidden; background-color: #f4f1ea; } 
.moodboard-image-container { width: 100%; height: auto; display: flex; position: relative; }
.moodboard-image-container::before{content: ""; display: block; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 95%); position: absolute; top: 0; left: 0;}
.moodboard-image-container picture, .moodboard-image-container img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 300px}
.moodboard-content-box { position: absolute; bottom: 0; left: 60%; transform: translateX(-50%); background-color: #eae5dc; padding: 24px 32px; width: 90%; max-width: 520px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.moodboard-content-box h2 { margin: 0; font-family: inherit; font-size: 28px; font-weight: 500; color: #2c2c2c; line-height: 1.3; }

@media (max-width: 768px) {
    .moodboard-content-box {width: 100%; max-width: 95%; left: 50%; padding: 20px 16px; box-sizing: border-box; }
    .moodboard-content-box h2 { font-size: 22px; }
}

/* banner section css end */


/* personal mood board css start */
.personal-mood-board-section{padding: 40px 0; background-color: #d9d3cc;}
.personal-mood-wrapper{max-width: 760px; width: 100%; margin: auto; text-align: center;}
.top-line{width: 115px; height: 3px; background-color: #333; margin: 0 auto 20px;}
.mood-board-title{font-size: 42px; font-weight: 400; line-height: 1.3; color: #333; margin-bottom: 20px;}
.personal-mood-wrapper p{font-size: 14px; font-weight: 500; color: #333; line-height: 1.5; margin-bottom: 20px;}
.mood-board-btn{color: #333; font-weight: 500; font-size: 12px; padding: 10px 20px; border: 1px solid #000; transition: all 0.3s;}
.mood-board-btn:hover{color: #fff; background-color: #ed1c24; border: 1px solid #ed1c24;}

@media screen and (max-width:1199px) {
    .mood-board-title{font-size: 36px;}
}

@media screen and (max-width:767px) {
    .mood-board-title{font-size: 26px;}
}
 
  
/* personal mood board css end */


/* how works css start */
.how-work-section{padding: 40px 0;}
.how-work-text{text-align: center; margin-bottom: 40px;}
.how-work-title{font-size: 31px; font-weight: 400; color: #333; line-height: 1.3;}
.how-work-sub-title{font-size: 20px; font-weight: 700; color: #333; line-height: 1.3; margin: 20px 0;}
.how-work-text p{font-size: 14px; font-weight: 500; color: #333; line-height: 1.5;}
.how-work-wrapper{display: flex; flex-wrap: wrap;}
.how-work-item{width: 25%; padding: 0 9px}
.how-work-img{height: 120px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.how-work-img img{width: 100%; height: 100%; display: block; object-fit: contain;}
.how-work-item-text{text-align: center; padding: 30px 20px;}
.how-work-item-title{font-size: 20px; font-weight: 700; color: #333; line-height: 1.3; margin-bottom: 20px;}
.how-work-item-text p{font-size: 14px; font-weight: 500; color: #333; line-height: 1.5;}
.hard-work-btn{margin-top: 40px; display: flex; align-items: center; justify-content: center;}
.hard-work-btn .mood-board-btn{margin: auto;}

@media screen and (max-width:1199px) {

    .how-work-item-text{padding: 20px 10px;}
    .how-work-item-title{font-size: 18px;}
}

@media screen and (max-width:1024px) {

    .how-work-wrapper{row-gap: 20px;}
    .how-work-item{width: 50%;}
}

@media screen and (max-width:767px) {

    .how-work-title{font-size: 26px;}
    .how-work-sub-title{font-size: 18px; margin: 15px 0;}
}

@media screen and (max-width:550px) {

    .how-work-item{width: 100%;}
}


/* how works css end */


/* inspiration css start */
.inspiration-section .personal-mood-wrapper{max-width: 800px;}

/* inspiration css end */


/* next step css start */
.next-step-section{padding: 40px 0;}
.next-step-text{text-align: center; margin-bottom: 40px;}
.next-step-wrapper{display: flex; flex-wrap: wrap; justify-content: center; row-gap: 20px;}
.next-step-item-box{width: 33.33%; padding: 0 10px; height: auto;}
.next-step-item{padding: 20px; background-color: #ece9e5; height: 100%;}
.next-step-top{font-size: 14px; font-weight: 400; color: #e30613; line-height: 1.3;}
.next-step-title{font-size: 22px; font-weight: 700; color: #333; line-height: 1.3; margin: 5px 0 20px;}
.next-step-img img{width: 100%; height: 100%; display: block; object-fit: cover;}
.next-step-para{font-size: 14px; font-weight: 500; color: #333; line-height: 1.5; margin: 20px 0;}

@media screen and (max-width:1024px) {

    .next-step-item-box{width: 50%;}
}

@media screen and (max-width:600px) {

    .next-step-item-box{width: 100%;}
}


/* next step css end */