.hero{min-height: 85vh; background: var(--c-cream); position: relative; overflow: hidden; display: flex; align-items: center;}
.hero .container{max-width: 970px;}
.hero .circle{position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;}
.hero .bg-rose{width: 480px; height: 480px; background: radial-gradient(circle, rgba(242, 92, 122, 0.10), transparent 70%); top: -60px; left: -100px;}
.hero .bg-gold{width: 400px; height: 400px; background: radial-gradient(circle, rgba(232,151,42,0.09), transparent 70%); top: 50%; left: 40%; transform: translate(-50%, -50%);}
.hero .bg-teal{width: 360px; height: 360px; background: radial-gradient(circle, rgba(59, 191, 173, 0.08), transparent 70%); bottom: -60px; right: -60px;}
.hero .shape-wrap{position: absolute;inset: 0;overflow: hidden; pointer-events: none;}
.hero .shape-wrap .inner-shape{animation: floating linear infinite;}
.hero .shape-wrap > :first-child{background-color:var(--c-rose); height: 12px; width: 12px; position: absolute; border-radius:50%; top: 12%; left: 6%;animation-duration: 4s; animation-delay: 0s;}
.hero .shape-wrap > :nth-child(2){background-color: #3BBFAD; height: 8px; width: 8px; border-radius: 50%; position: absolute; top: 30%; left: 15%; animation-duration: 5.5s; animation-delay: 0.8s;}
.hero .shape-wrap .d-shape{font-size: var(--fs-sm); color:var(--c-gold);}
.hero .shape-wrap > :nth-child(3){ position: absolute; top: 18%; left: 48%; animation-duration: 3.8s; animation-delay: 0.3s;}
.hero .shape-wrap > :nth-child(4){background-color: var(--c-gold); border-radius: 50%; height: 10px; width: 10px; top: 60%; left: 8%; animation-duration: 4.8s; animation-delay: 1.2s; position: absolute;}
.hero .shape-wrap > :nth-child(5){background-color: var(--c-rose); width: 14px; height: 5px; top: 75%; left: 30%; position: absolute; animation-duration: 6s; animation-delay: 0.5s;}
.hero .shape-wrap > :nth-child(6){position: absolute; top: 8%; right: 10%; animation-duration: 4s; animation-delay: 1.5s;}
.hero .shape-wrap > :nth-child(7){position: absolute; width: 9px; height: 9px; top: 50%; right: 20%;border-radius: 50%; background-color:#3BBFAD; animation-duration: 5s; animation-delay: 0.2s;}
.hero .shape-wrap > :nth-child(8){position: absolute; width:11px; height: 4px;background-color: var(--c-gold); top: 85%; right: 8%; animation-duration: 3.5s; animation-delay: 1s;} 
.hero .container .wrapper{display: flex; align-items: center; gap: 64px;width: 100%;padding-top: 80px; padding-bottom: 60px;}
.hero .container .wrapper .left > :first-child{background: var(--c-rose); color: var(--c-white); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; padding-block: 7px;}
.hero .container .wrapper .left > :nth-child(2) {position: relative; font-family: var(--ff-primary); font-size: clamp(34px, 4.5vw, 58px); font-weight: 700; color: var(--c-charcoal); line-height: 1.18; padding-block: 22px 20px;}
.hero .container .wrapper .left > :nth-child(2) span{font-style: italic; color: var(--c-gold);}
.hero .container .wrapper .left > :nth-child(3) {position: relative; font-size: 18px; color: var(--c-text); max-width: 480px; line-height: var(--lh-p);}
.hero .container .wrapper .left .hero-btn {padding-block: 34px 28px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;}
.hero .container .wrapper .left .hero-btn > :first-child{z-index: 1; background: var(--c-gradient-gold); color: var(--c-white); border: none; border-radius: 999px; padding: 12px 23px; font-size: var(--fs-base); font-weight: 600; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(232, 151, 42, 0.28);}
.hero .container .wrapper .left .hero-btn > :nth-child(2){position: relative; background: transparent; color: var(--c-charcoal); border: 2px solid var(--c-charcoal); border-radius: 999px; padding: 10px 21px; font-size: var(--fs-base); font-weight: 600; transition: background 0.2s, color 0.2s, transform 0.2s;}
.hero .container .wrapper .left .hero-btn > :nth-child(2):hover { background-color: var(--c-charcoal); color: var(--c-white); transform: translateY(-2px);}
.hero .container .wrapper .left .hero-btn > :first-child:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232, 151, 42, 0.38);}
.hero .container .wrapper .left > :nth-child(5) {font-size: var(--fs-sm); font-weight: 500; color: var(--c-text);}
.hero .container .wrapper .left > :nth-child(5) span{color: var(--c-gold);} 
.hero .container .wrapper .right .cards{position: relative; width: 280px; padding-block:170px;}
.hero .right .cards .inner-card{position: absolute; width: 260px; border-radius: 20px; padding: 24px 22px; box-shadow: 0 8px 32px rgba(44, 37, 34, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default;}
.hero .right .cards .inner-card p{font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.6;}
.hero .right .cards > :first-child {background-color: var(--c-white); color: var(--c-charcoal); transform: rotate(0deg); z-index: 4; left: 0; top: 0; border: 1px solid var(--c-border);}
.hero .right .cards > :first-child:hover {transform: translateY(-5px);}
.hero .right .cards > :nth-child(2):hover {transform: rotate(1deg) translateY(8px)}
.hero .right .cards > :nth-child(3):hover {transform: translateY(24px) rotate(-2deg);}
.hero .right .cards > :nth-child(2) {transform: rotate(2deg) translateY(12PX) ;background:linear-gradient(135deg, #E8972A, #f5b040);  z-index: 3; color: var(--c-white); left: 10px; top: 0;}
.hero .right .cards > :nth-child(3) {transform: translateY(24px) rotate(-4deg); background: linear-gradient(135deg, #f25c7a, #e8558f); color: var(--c-white); left: 20px; top: 0;}
/* hero section end */
.tabs{border-top: 1.5px solid var(--c-border); border-bottom: 1.5px solid var(--c-border); padding: 16px 0;}
.tabs .container .wrapper li:is(.active){background-color: var(--c-gold); border-radius: 999px; padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: var(--ff-secondary); color: var(--c-charcoal); white-space: nowrap; border: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s;}
.tabs .container .wrapper li:is(.active) > *:hover{color: var(--c-white);}
.tabs .container .wrapper li:not(.active){background-color: var(--c-surface); border-radius: 999px; }
.tabs .wrapper li:not(.active):hover{background-color: #fde3ea; transform:translateY(-1px); }
.tabs .container .wrapper :nth-child(1){display: flex; align-items: center; gap: 10px;}
.tabs :nth-child(1):hover{color: var(--c-rose);}
.active button {color: var(--c-white);border-radius: 999px; font-size: 13px; font-weight: 600; font-family: var(--ff-secondary);}
.tabs li:not(.active) button {border-radius: 999px; padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: var(--ff-secondary); color: var(--c-charcoal); white-space: nowrap; border: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s;}
.tabs ul ,ol{padding: 0;}
/* tabs-end */
.birthday{background-color: var(--c-cream); padding-block: 80px;}
.birthday .container .wrapper{position: relative;}
.birthday .container .wrapper .heading{display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 40px;}
.birthday .container .wrapper .heading > :first-child{font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); display: block;}
.birthday .container .wrapper  .heading > .content :nth-child(2) {text-transform: capitalize; font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--c-charcoal); line-height: 1.2;}
.birthday .container .wrapper > .heading :nth-child(2) { font-size: var(--fs-sm); font-weight: 600; color: var(--c-gold); transition: gap 0.2s;}
/* birthday-end */
.col-item{display: flex; flex-direction: column; justify-content: start; height: 100%; background: var(--c-white); border-radius: 18px; box-shadow: 0 2px 12px rgba(44, 37, 34, 0.07); margin-top: auto; overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease; border: 1px solid var(--c-border)}
.col-item:hover{transform: translateY(-6px);box-shadow: 0 16px 40px rgba(44, 37, 34, 0.13);}
.col-banner{ padding-block: 20px; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative;}
.collections .wrapper > :first-child {background: linear-gradient(135deg, #F25C7A 0%, #E8972A 100%);}
.collections .wrapper  > :nth-child(2) {background: linear-gradient(135deg, #3BBFAD 0%, #2d7dd2 100%);}
.collections .wrapper  > :nth-child(3) {background: linear-gradient(135deg, #E8972A 0%, #f5c07a 100%);}
.collections .wrapper  > :nth-child(4) {background: linear-gradient(135deg, #F25C7A 0%, #a855f7 80%);}
.collections .wrapper  > :nth-child(5) {background: linear-gradient(135deg, #3BBFAD 0%, #E8972A 100%);}
.collections .wrapper  > :nth-child(6) {background: linear-gradient(135deg, #E8972A 0%, #F25C7A 100%);}
.collections .wrapper .col-item .col-banner >:first-child {font-size: 52px;}
.collections .wrapper .col-item .col-banner >:last-child {background: rgba(255, 255, 255, 0.25); color: var(--c-white); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px);}
.collections .wrapper{display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;}
.collections .card-body{display:flex; flex-direction: column; justify-content: start; height: 100%; padding: 20px 22px 22px; background-color: var(--c-white);}
.collections .card-body > :first-child{display: inline-block; width: fit-content; background: #fde3ea; color: var(--c-rose); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600;}
.collections .card-body > :nth-child(2){font-family: var(--ff-primary); font-size: 17px; font-weight: 700; color: var(--c-charcoal); line-height: 1.35; padding-block: 10px;}
.collections .card-body > :nth-child(3){font-size: var(--fs-sm); color: var(--c-text); line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden;}
.collections .card-btn{display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-top: auto;}
.collections .card-btn > :first-child{color: #9e8c84;}
.collections .card-btn > :last-child{color: var(--c-gold); font-weight: 600; transition: gap 0.2s;}
.collections .wrapper  > :nth-child(+3n+7) {background: linear-gradient(135deg, #F25C7A 0%, #E8972A 100%);}
.collections .wrapper  > :nth-child(+3n+8) {background: linear-gradient(135deg, #3BBFAD 0%, #2d7dd2 100%);}
.collections .wrapper  > :nth-child(+3n+9) {background:  linear-gradient(135deg, #E8972A 0%, #f5c07a 100%);}

/* collection-end */
.quote {background: var(--c-charcoal); padding: 80px 0; position: relative; overflow: hidden;}
.quote .icon{ position: absolute; font-size: 120px; opacity: 0.04; pointer-events: none; user-select: none;}
.quote > :first-child{top: -20px; left: -20px;}
.quote > :nth-child(2) {bottom: -30px; right: -20px;}
.quote > :nth-child(3) { top: 10px; right: 30px; font-size: 80px;}
.quote .container .wrapper {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.quote .container .wrapper > :first-child {color: var(--c-teal); font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;}
.quote .container .wrapper > :nth-child(2) {font-family: var(--ff-primary); text-align:center; padding-inline: 216px; font-style: italic; font-size: clamp(20px, 2.8vw, 28px); color: var(--c-white); line-height: 1.6; padding-block: 28px 20px;}
.quote .container .wrapper > :nth-child(3){font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.5); font-weight: 500; padding-bottom: 32px;}
.quote .container .wrapper > :nth-child(4){background: transparent; color: var(--c-white); border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 12px 28px; font-size: 15px; font-weight: 600; font-family: var(--ff-secondary); transition: background 0.2s, border-color 0.2s, transform 0.2s;}
.quote .container .wrapper > :nth-child(4):hover{background: rgba(255, 255, 255, 0.1); border-color: var(--c-white); transform: translateY(-2px);}
/* quote-end */
.why{background: var(--c-surface); padding-block: 70px;}
.why .container{display: flex; flex-direction: column; justify-content: center; text-align: center;}
.why .container > :first-child{ font-size: 18px; color: var(--c-gold); letter-spacing: 8px;}
.why .container > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--c-charcoal); line-height: 1.2;padding-block: 10px 48px;}
.why .container .wrapper{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.why .wrapper .icon-box > :first-child{font-size: 48px; line-height: 1;}
.why .wrapper .icon-box > :nth-child(2){font-family: var(--ff-primary); font-size: 20px; font-weight: 700; color: var(--c-charcoal); padding-block: 16px 10px;}
.why .wrapper .icon-box .icon-text{font-size: 15px; color: var(--c-text); line-height: 1.65; max-width: 260px; margin: 0 auto}
/* why-end */
.coming {background: linear-gradient(135deg, #F25C7A 0%, #E8972A 100%); padding-block: 60px;}
.coming .container .wrapper {display: flex; justify-content: space-between; align-items: center; gap: 40px;}
.coming .container .wrapper .left > :first-child{font-size: var(--fs-sm); font-weight: 600; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 1.5px; display: block; padding-bottom: 10px;}
.coming .container .wrapper .left > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--c-white); line-height: 1.2; padding-right: 490px;}
.coming .cta-btn{display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-bottom: 8px;}
.coming .cta-btn > * {background: rgba(255, 255, 255, 0.18); color: var(--c-white); border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); white-space: nowrap;}
.coming .right > :last-child{background: transparent; color: var(--c-white); border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 10px 24px; font-size: var(--fs-sm); font-weight: 600; font-family: var(--ff-secondary); transition: background 0.2s, transform 0.2s; white-space: nowrap; margin-top: 16px;}
.coming .right > :last-child:hover{background: rgba(255, 255, 255, 0.15); transform: translateY(-2px);}
/* coming end */
.newsletter{padding-block: 80px; background-color: var(--c-white);}
.newsletter .container .wrapper{display: grid; justify-content: center; align-items: center; grid-template-columns: repeat(1,1fr); text-align: center;}
.newsletter .wrapper > :first-child{font-family: var(--ff-primary); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--c-charcoal); padding-bottom: 14px;}
.newsletter .wrapper > :nth-child(2){font-size: 15px; color: var(--c-muted); line-height: 1.65; padding-bottom: 32px; padding-inline: 294px;}
.newsletter .wrapper .nl-form{display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px;}
.newsletter .wrapper .nl-form .left form>:first-child{width:100%; max-width: 424px; padding: 14px 20px; border: 2px solid var(--c-border); border-radius: 999px; font-size: 15px; font-family: var(--ff-secondary); background: var(--c-cream); color: var(--c-charcoal); outline: none; transition: border-color 0.2s;}
.newsletter .wrapper .nl-form .left form >:nth-child(2){background: var(--c-gradient-gold); color: var(--c-white); border: none; border-radius: 999px; padding: 16px 26px; font-size: 15px; font-weight: 600; font-family: var(--ff-secondary); box-shadow: 0 4px 16px rgba(232, 151, 42, 0.3); transition: opacity 0.2s, transform 0.2s; white-space: nowrap;}
.newsletter .wrapper .nl-form .left form >:nth-child(2):hover{opacity: 0.9; transform: translateY(-2px);}
.newsletter .wrapper > :last-child{font-size: 13px; color: var(--c-text);}
.newsletter .wrapper > :last-child > :first-child { color: var(--c-gold); font-size: 13px; }/* newsletter-end */
@keyframes floating {
    0%{
        transform: translateY(0) rotate(0deg);
    }
50%{
    transform:translateY(-18px) rotate(8deg);
}
}
@media only screen and (max-width: 1200px) {
    /* coming-css */
    .coming .container .wrapper .left > :nth-child(2) {padding-right: 440px;}
}
@media only screen and (max-width:1024px){
    .quote .container .wrapper > :nth-child(2) {padding-inline: 110px;}
        /* coming-css */
    .coming .container .wrapper .left > :nth-child(2) {padding-right: 322px;}
    /* tabs */
    .tabs .wrapper{overflow-x: auto; scrollbar-width: none;}
}
@media only screen and (max-width: 992px) {
    /* hero css */
    .hero .container {max-width: 896px;}
    .hero .container .wrapper .right .cards{padding-block: 100px;}
    /* collection css */
   .collections .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;}
   .collections .card-body {padding: 10px 10px 10px;}
    .quote .container .wrapper > :nth-child(2) {padding-inline: 68px;}
    .why .container .wrapper{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
        /* coming-css */
    .coming .container .wrapper .left > :nth-child(2) {padding-right: 210px;}
     /* newsletter css */
    .newsletter .wrapper > :nth-child(2) { padding-inline: 60px; }
}
@media only screen and (max-width: 768px) {
    /* hero sec */
    .hero .container .wrapper{padding-top: 15px; padding-bottom: 15px; gap: 15px;}
    /* birthday-css */
    .birthday{padding-block: 15px;}
    .birthday .container .wrapper .heading {padding-bottom: 15px;}
    .birthday .container .wrapper .heading {flex-wrap: wrap;}
    /* quota-css */
    .quote {padding:20px 0}
    .quote .container .wrapper > :nth-child(2) {padding-inline: 0px;}
    /* why */
    .why{padding-block: 15px;}
    .why .container .wrapper {gap: 15px;}
    .why .container > :nth-child(2) {padding-block: 10px 10px;}
    /* coming-css */
    .coming {padding-block: 20px;}
    .coming .container .wrapper .left > :nth-child(2) {padding-right: 150px;}
    .coming .cta-btn {align-items: center;}
    .coming .container .wrapper {gap: 15px;}
    /* newsletter */
    .newsletter {padding-block: 20px;}
    /* hero */
    .hero .container .wrapper{flex-wrap: wrap; justify-content: center;}  
    /* collection */
    .collections .wrapper {display: grid; grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width:576px){
    /* collection */
    .collections .card-body > :nth-child(2) {font-size: 14px;}
    /* newsletter css */
    .newsletter .wrapper > :nth-child(2) { padding-inline: 0px; }
    .newsletter .wrapper .nl-form .left form>:first-child { max-width: none;}
    .nl-form .left > :first-child{display: flex; flex-direction: column; gap: 10px;}
    /* comming */
    .coming .container .wrapper .left > :nth-child(2) { padding-right: 0; }
    .coming .container .wrapper {text-align: center; gap: 15px; flex-wrap: wrap; justify-content: center; }
}
@media only screen and (max-width:474px){
        .collections .wrapper {grid-template-columns:repeat(1, 1fr)}
}