body{font-family: var(--ff-secondary); background: var(--c-cream); color: var(--c-charcoal); line-height: 1.6; overflow-x: hidden;}
/* hero */
.hero{background: var(--c-cream); padding: 64px 0 0; position: relative; overflow: hidden;}
.hero > :first-child{width: 460px; height: 460px; background: radial-gradient(circle, rgba(242, 92, 122, .09), transparent 70%); position: absolute; top: -120px; left: -60px;}
.hero > :nth-child(2){width: 380px; height: 380px; background: radial-gradient(circle, rgba(232, 151, 42, .08), transparent 70%); position: absolute; top: 20%; right: -80px;}
.hero > :nth-child(3){width: 260px; height: 260px; background: radial-gradient(circle, rgba(59, 191, 173, .07), transparent 70%); position: absolute; bottom: -60px; left: 40%;}
.hero > :nth-child(4) ,.hero > :nth-child(5) , .hero > :nth-child(6),.hero > :nth-child(7), .hero > :nth-child(8), .hero > :nth-child(9){position: absolute; pointer-events: none; animation: floating ease-in-out infinite;}
.hero > :nth-child(4){width: 11px; height: 11px; background: #F25C7A; position: absolute; border-radius: 50%; top: 16%; left: 5%; opacity: .45; animation-duration: 4.2s; animation-delay: 0s;}
.hero > :nth-child(5){font-size: var(--fs-sm); color: #E8972A; opacity: .5; top: 28%; left: 18%; animation-duration: 5s; animation-delay: .6s;}
.hero > :nth-child(6){width: 8px; height: 8px; background: #3BBFAD; border-radius: 50%; top: 50%; left: 3%; opacity: .4; animation-duration: 3.8s; animation-delay: 1s;}
.hero > :nth-child(7){width: 13px; height: 5px; background: #F25C7A; border-radius: 2px; top: 72%; left: 12%; opacity: .4; animation-duration: 5.5s; animation-delay: .3s;}
.hero > :nth-child(8){font-size: 12px; color: #3BBFAD; opacity: .45; top: 12%; right: 8%; animation-duration: 4.8s; animation-delay: .8s;}
.hero > :nth-child(9){width: 9px; height: 9px; background: #E8972A; border-radius: 50%; top: 45%; right: 5%; opacity: .4; animation-duration: 4s; animation-delay: 1.4s;}
.hero .container .wrapper{position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.hero .container .wrapper > :first-child{display: inline-flex; align-items: center; gap: 8px; background: rgba(242, 92, 122, .1); color: var(--c-rose); border: 1.5px solid rgba(242, 92, 122, .2); border-radius: 999px; padding: 6px 18px; font-size: 12px; font-weight: 600; letter-spacing: .5px; margin-bottom: 22px;}
.hero .container .wrapper > :nth-child(2){font-family: var(--ff-primary); font-size: clamp(36px, 5vw, 58px); font-weight: 700; line-height: 1.15; color: var(--c-charcoal); margin-bottom: 18px; padding-inline: 214px; text-align: center;}
.hero .container .wrapper > :nth-child(2) > *{font-style: italic; color: var(--c-gold);}
.hero .container .wrapper > :nth-child(3){font-size: 18px; color: var(--c-text); line-height: 1.7; padding-inline: 318px; text-align: center; font-family: var(--ff-secondary);}
.hero .container .wrapper > :nth-child(4){position: relative; display: flex; justify-content: center; padding-block: 35px 82px; flex-wrap: wrap; gap: 40px;}
.hero .container .wrapper > :nth-child(4) > * > :first-child{font-family: var(--ff-primary); font-size: 26px; font-weight: 700; color: var(--c-charcoal); line-height: 1;}
.hero .container .wrapper > :nth-child(4) >  * > :first-child > * {color: var(--c-gold);}
.hero .container .wrapper > :nth-child(4) > * > :last-child {font-size: 13px; color: var(--c-muted); padding-top: 3px;}
.hero .container .wrapper > :nth-child(4) > *:not(:first-child){padding-left: 40px; border-left: 1px solid var(--c-border);}
.divider{width: 100%; padding-block: 25px; background-color: var(--c-white); clip-path:ellipse(55% 100% at 50% 100%); margin-top: -30px;}
.steps .container .wrapper{display:grid; grid-template-columns: 1fr 318px; gap: 48px; justify-content: center; padding: 52px 24px 80px;}
.steps .container .wrapper > :first-child{height: fit-content; background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 24px; overflow: hidden; box-shadow: 0 4px 32px rgba(44, 37, 34, .06);}
.steps .container .wrapper > :first-child > :first-child{ background: var(--c-surface); border-bottom: 1.5px solid var(--c-border); padding: 28px 36px 0; position: relative;}
.steps .container .wrapper > :first-child > :first-child > :first-child{display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px;}
.steps .container .wrapper > :first-child > :first-child > :first-child > :first-child {font-family: var(--ff-primary); font-size: 20px; font-weight: 700; color: var(--c-charcoal);}
.steps .container .wrapper > :first-child > :first-child > :first-child > :last-child{font-size: 13px; font-weight: 600; color: var(--c-text); background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 999px; padding: 4px 14px;}
.steps .container .wrapper > :first-child > :first-child > :nth-child(2){display:flex; align-items: center;}
.steps .container .wrapper > :first-child > :first-child > :nth-child(2) > * > :first-child{width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; cursor: pointer; justify-content: center; font-size: 13px; font-weight: 600; border: 2px solid var(--c-border); background: var(--c-white); color: var(--c-text); transition: all .3s; position: relative;}
.steps .container .wrapper > :first-child > :first-child > :nth-child(2) > :first-child > :first-child{background: linear-gradient(135deg, #E8972A, #f5b942); border-color: transparent; box-shadow: 0 4px 14px rgba(232, 151, 42, .35);}
.steps .container .wrapper > :first-child > :first-child > :nth-child(2) > * > :nth-child(2){font-size: 11px; font-weight: 600; color: var(--c-text); white-space: nowrap;}
.steps .container .wrapper > :first-child > :first-child > :nth-child(2) > * {display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; z-index: 1;}
.steps-header > :last-child{ padding-block: 1.5px; background: var(--c-border); margin: 16px -36px 0;}
.step-line { height: 2px; flex: 1; background: var(--c-border); margin-bottom: 22px; transition: background .3s; position: relative; z-index: 0; }
.steps-header > :last-child > * {width: 25%; padding-block: 1.5px; background: linear-gradient(135deg, #E8972A, #f5b942); transition: width .4s ease;}
.step-body{padding: 36px;}
.step-body > :first-child , .step-body > :nth-child(2) > :first-child{font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); margin-bottom: 20px; display: block;}
.step-body > :nth-child(2) > :nth-child(2){background: linear-gradient(135deg, #FFF9F4, #FFF1E6); border: 1.5px solid #EDD5C0; border-radius: 18px; padding: 28px; position: relative; overflow: hidden; min-height: 140px;}
.step-body > :nth-child(2) > :nth-child(2)::before{content: '"'; font-family: var(--ff-primary); font-size: 120px; color: rgba(232, 151, 42, .08); line-height: 1; position: absolute; top: -10px; left: 16px; pointer-events: none;}
.step-body > :nth-child(2) > :nth-child(2) > :first-child{font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.7; color: var(--c-text); position: relative; z-index: 1; min-height: 60px;}
.step-body > :nth-child(2) > :nth-child(2) > :nth-child(2){display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); position: relative; z-index: 1;}
.step-body > :nth-child(2) > :nth-child(2) > :nth-child(2) > :first-child{font-size: 13px; color: var(--c-text); font-weight: 500; }
.step-body > :nth-child(2) > :nth-child(2) > :nth-child(2) > :nth-child(2) {background: #fde3ea; color: var(--c-rose); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600;}
.form > :first-child{font-size: 14px; font-weight: 600; color: var(--c-charcoal);}
.form > :first-child::after,
.form-2 > :first-child::after{position: absolute; content: "*"; color: var(--c-rose);font-size: 16px;}
.text-area{position: relative;}
.text-area> :first-child{font-family: var(--ff-secondary);  resize: vertical; min-height: 140px; line-height: 1.65; width: 100%; padding: 13px 16px; border: 1.5px solid var(--c-border); border-radius: 12px; font-size: 15px; color: var(--c-charcoal); background: var(--c-cream); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; appearance: none;}
.text-area> :first-child:focus{border-color: var(--c-gold); box-shadow: 0 0 0 3px #e8972a1f; background: var(--c-white);;}
.text-area> :first-child::placeholder{color:#c4b0a8;}
.text-area > :nth-child(2){position: absolute; right: 14px; bottom: 12px; font-size: 11px; color: var(--c-text); font-weight: 500; pointer-events: none;}
.text-area >:last-child{font-size: 12px; color: var(--c-text); margin-top: 6px;}
.error{font-size: 12px;margin-left: 22px;  color: #dc2626; margin-top: 5px; display: none; align-items: center; gap: 4px; position:relative;}
.error::before { content: ""; position: absolute; display: inline; width: 100%; left: -20px; top: 1px; height: 16px; background-image: url(../images/icons/0-circle.svg); background-repeat: no-repeat; filter: brightness(0) saturate(100%) invert(30%) sepia(84%) saturate(6732%) hue-rotate(351deg) brightness(91%) contrast(88%); }
.form-2 > :first-child{font-size: 14px; font-weight: 600; color: var(--c-charcoal);}
.felling{display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;}
.felling .felling-card >:first-child{position: absolute; opacity: 0;}
.felling .felling-card >:nth-child(2) {display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border: 1.5px solid var(--c-border); border-radius: 14px; cursor: pointer; text-align: center; background: var(--c-cream); transition: all .2s;}
.felling .felling-card >:nth-child(2):hover{border: solid 1px var(--c-gold); transform: translateY(-2px);}
.felling-card > :nth-child(2) > :first-child{font-size: 28px;}
.felling-card > :nth-child(2) > :nth-child(2) {font-size: 12px; font-weight: 600; color: var(--c-charcoal);}
.form-footer{display: flex; align-items: center; justify-content: end; margin-top: 32px; padding-top: 24px; border-top: 1.5px solid var(--c-border);}
.form-footer > :first-child{display: flex; align-items: center; position: relative;  gap: 8px; background: linear-gradient(135deg, #E8972A, #f5b942); color: var(--c-white); border: none; border-radius: 999px; padding: 13px 40px; font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 4px 16px rgba(232, 151, 42, .28); transition: opacity .2s, transform .2s, gap .2s;}
.form-footer > :first-child::after{position: absolute; content: "";  height: 16px; width: 16px; right: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;}
.form-footer > :first-child:hover{transform: translateX(-2px) translateY(-2px);}
.side-bar{display: flex; flex-direction: column; gap: 22px;}
.side-bar > :not(:nth-child(2)) {background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 18px; overflow: hidden;}
.side-header > :first-child , .guidline > :first-child , .Inspiration > :first-child{padding: 16px 20px; border-bottom: 1px solid var(--c-border); font-family: var(--ff-primary); font-size: var(--fs-base); font-weight: 700; color: var(--c-charcoal);}
.side-body ,.guide-body, .Inspiration-body{ padding: 18px 20px;}
.side-body > * {display:flex; flex-direction: column; gap: 14px;}
.side-body > * > * {display: flex; gap: 12px; align-items: flex-start;}
.side-item > :nth-child(2) > :first-child{font-family: var(--ff-secondary); font-size: 14px; font-weight: 600; color: var(--c-charcoal); margin-bottom: 2px;}
.side-item > :nth-child(2) > :nth-child(2) {font-size: 13px; color: var(--c-text); line-height: 1.55;}
.side-list > * >:first-child {width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;}
.side-item > :first-child{background: linear-gradient(135deg, #fde3ea, #ffc5d3);}
.badge{background: linear-gradient(135deg, var(--c-charcoal), #3d3330); border-radius: 18px; padding: 24px; text-align: center;}
.badge > :first-child{font-size: 36px; padding-bottom: 10px;}
.badge > :nth-child(2) {font-family: var(--ff-primary); font-size: 17px; font-weight: 700; color: var(--c-white); margin-bottom: 6px;}
.badge > :nth-child(3) {font-size: 13px; color: rgba(255, 255, 255, .6); line-height: 1.6; margin-bottom: 16px;}
.achievement{display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;}
.achievement > * > :first-child {font-family: var(--ff-primary); font-size: 22px; font-weight: 700; color: var(--c-gold);}
.achievement > * > :last-child{font-size: 11px; color: rgba(255, 255, 255, .5); margin-top: 2px;} 
.guide-body > * > li:nth-child(-n+5)::before {content: '✦'; color: var(--c-gold); margin-top: 2px; font-size: 10px;}
.guide-body > * > li:nth-child(n+6)::before {content: '✕'; color: #dc2626; margin-top: 2px; font-size: 10px;}
.guide-body > :first-child li {display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--c-charcoal); line-height: 1.55; }
.guide-body > :first-child {display: flex; flex-direction: column; gap: 10px; padding-left: 0;}
.Inspiration-body > :first-child{font-size: 13px; color: var(--c-text); margin-bottom: 14px;}
.Inspiration-body > :nth-child(2){display: flex; flex-direction: column; gap: 12px;}
.Inspiration-body > :nth-child(2) > *{background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: 12px; padding: 14px 14px; cursor: pointer; transition: all .2s; position: relative;}
.Inspiration-body > :nth-child(2) > *:hover{border-color: var(--c-gold); background: rgba(232, 151, 42, .05); transform: translateY(-1px);}
.whishes-cards > :first-child{font-family: var(--ff-primary); font-style: italic; font-size: 13px; color: var(--c-charcoal); line-height: 1.6; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.whishes-cards > :nth-child(2) {font-size: 11px; font-weight: 600; color: var(--c-text);}
.whishes-cards > :nth-child(3){position: absolute; bottom: 10px; right: 10px; background: none; border: 1.5px solid var(--c-border); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: var(--c-text); transition: all .2s;}
.whishes-cards > :nth-child(3):hover{color: var(--c-gold); border-color: var(--c-gold);}
/* tabs start */
.cate li:is(.active){background-color: var(--c-gold);  border: none; border-radius: 999px;}
.cate li:not(.active){background-color: var(--c-surface); border-radius: 999px; }
.cate {grid-template-columns: repeat(3, 1fr); padding-inline: 20px; padding-block: 20px; gap:10px;}
.cate .active a {color: var(--c-white);border-radius: 999px; padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: var(--ff-secondary);}
.cate li:not(.active) a {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;}
 ul ,ol{padding: 0;}
.cate {display: none;}
/* .step-body{display:none ;} */
.felling-card .felling-icon.selected { border-color: var(--c-rose); background: rgba(242, 92, 122, .06); box-shadow: 0 0 0 2px rgba(242, 92, 122, .15); }
.felling-card .felling-icon.selected:hover{border-color: var(--c-rose);}
/* tabs-end */
@keyframes floating {
    0%{
        transition: translateY(0) rotate(0deg);
    }
    50%{
        transform: translateY(-18px) rotate(10deg);
    }
}
/* responsive media queries */
@media only screen and (max-width:1024px){
    .hero .container .wrapper > :nth-child(3){padding-inline:238px}
}
@media only screen and (max-width:992px){
    .hero .container .wrapper > :nth-child(2) {padding-inline: 124px;}
    .hero .container .wrapper > :nth-child(3) { padding-inline: 182px;}
    /* step */
    .step-body {padding: 20px;}
    .steps .container .wrapper {grid-template-columns: 1fr; gap: 15px; padding: 30px 0px 30px;}
    
}
@media only screen and (max-width:768px){
    .hero .container .wrapper > :nth-child(2) {padding-inline: 70px;}
    .hero .container .wrapper > :nth-child(3) { padding-inline: 74px;}
    .hero {padding: 20px 0;}
    .hero .container .wrapper > :nth-child(4){padding-block: 5px;}
    .divider {padding-block: 15px;}
}
@media only screen and (max-width:576px){
.hero .container .wrapper > :nth-child(2) { padding-inline: 0px; font-size: clamp(28px, 5vw, 58px); }
.hero .container .wrapper > :nth-child(3) { padding-inline: 0px; font-size: var(--fs-sm); }
.features-head > :nth-child(3){border-left: 0 !important; padding-left: 20px !important;}
.steps .container .wrapper > :first-child > :first-child {padding:28px 10px 0;}
.step-body {padding: 10px;}
.felling {grid-template-columns: repeat(2,1fr);}
.form-footer{justify-content: center; padding-top: 10px;}
}