/* 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; padding-bottom: 104px;}
.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: 360px; 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);}
.divider{width: 100%; padding-block: 25px; background-color: var(--c-white); clip-path:ellipse(55% 100% at 50% 100%); margin-top: -50px;}
/* contact-details */
.contact-layout{background-color: var(--c-cream);}
.contact-details{background: var(--c-white); border-bottom: 1.5px solid var(--c-border);}
.contact-details .container .wrapper{display: grid; grid-template-columns: repeat(4, 1fr);}
.contact-details .wrapper >* {padding: 32px 28px; text-align: center; border-right: 1.5px solid var(--c-border); transition: background .2s; cursor: pointer; position: relative; overflow: hidden;}
.contact-details .wrapper >:first-child:hover{background: linear-gradient(135deg, rgba(242, 92, 122, .04), rgba(232, 151, 42, .04));}
.contact-details .wrapper >:nth-child(2):hover{background: linear-gradient(135deg,rgba(59,191,173,.04),rgba(45,125,210,.04));}
.contact-details .wrapper >:nth-child(3):hover{background: linear-gradient(135deg,rgba(232,151,42,.04),rgba(245,185,66,.04));}
.contact-details .wrapper >:last-child:hover{background: linear-gradient(135deg,rgba(168,85,247,.04),rgba(242,92,122,.04))}
.contact-details .wrapper > * > :first-child{width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 14px;}
.contact-details .wrapper > * > :nth-child(2){font-family: var(--ff-primary); font-size: var(--fs-base); font-weight: 700; color: var(--c-charcoal); margin-bottom: 4px; position: relative; z-index: 1;}
.contact-details .wrapper > * > :nth-child(3){font-size: 13px; color: var(--c-gold); font-weight: 600; margin-bottom: 4px; position: relative; z-index: 1;}
.contact-details .wrapper > * > :nth-child(4){font-size: 12px; color: var(--c-text); position: relative; z-index: 1;}
.contact-details .wrapper > :first-child > :first-child{background: linear-gradient(135deg,#fde3ea,#ffc5d3);}
.contact-details .wrapper > :nth-child(2) > :first-child{background: linear-gradient(135deg,#d6f5f1,#a8ece6);}
.contact-details .wrapper > :nth-child(3) > :first-child{background: linear-gradient(135deg,#fef3dc,#fde0a0);}
.contact-details .wrapper > :nth-child(4) > :first-child{background: linear-gradient(135deg,#ede9fe,#c4b5fd);}
/* contact-from-layout */
.contact-layout .container .wrapper{ margin: 0 auto; padding: 52px 24px 80px; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start;}
.form{background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 24px; overflow: hidden; box-shadow: 0 4px 28px rgba(44, 37, 34, .05);}
.form > :first-child{background: var(--c-surface); border-bottom: 1.5px solid var(--c-border); padding: 28px 38px;}
.form-head > :first-child{font-family: var(--ff-primary); font-size: 22px; font-weight: 700; color: var(--c-charcoal); margin-bottom: 6px;}
.form-head > :nth-child(2){font-size: var(--fs-sm); color: var(--c-text);}
.form-head > :nth-child(2) > *{color: var(--c-rose);}
/* tabs start */
.cate li:is(.active){height: 36px; background-color: var(--c-gold);  border: none; border-radius: 999px;}
.cate li:not(.active){height: 36px; background-color: var(--c-cream); border-radius: 999px; border: solid 1px var(--c-border); }
.cate {display: flex;flex-wrap: wrap; padding: 24px 90px 0 31px; gap:10px;}
.cate .active a {color: var(--c-white);border-radius: 999px; padding: 8px 19px; font-size: 13px; font-weight: 600; font-family: var(--ff-secondary);}
.cate li:not(.active) a {border-radius: 999px; padding: 8px 19px; 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 li:not(.active):hover{border-color: var(--c-gold); background: rgba(232, 151, 42, .05); }
.cate li:not(.active) a:hover{ color: var(--c-gold);}
 /* form body */
.form-body{padding: 28px 36px 36px;}
.form-body > * {display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.contact-form > :first-child{grid-area: 1 / 1 / 2 / 2;}
.contact-form > :nth-child(2){grid-area: 2 / 1 / 3 / 2; background-image: url('../images/icons/person.svg'); background-repeat: no-repeat; background-position: 10px center; background-size: 14px;  padding-left: 35px; }
.contact-form > :nth-child(3){grid-area: 1 / 2 / 2 / 3;}
.contact-form > :nth-child(4){grid-area: 2 / 2 / 3 / 3; background-image: url('../images/icons/person.svg'); background-repeat: no-repeat; background-position: 10px center; background-size: 14px;  padding-left: 35px; }
.contact-form > :nth-child(5){grid-area: 3 / 1 / 4 / 3;}
.contact-form > :nth-child(6){grid-area: 4 / 1 / 5 / 3; background-image: url('../images/icons/envelope.svg'); background-repeat: no-repeat; background-size: 14px; background-position: 10px center; padding-left: 35px;}
.contact-form > :nth-child(7){grid-area: 5 / 1 / 6 / 3;}
.contact-form > :nth-child(8){grid-area: 6 / 1 / 7 / 3;}
.contact-form > :nth-child(9){grid-area: 7 / 1 / 8 / 3; font-size: 12px; color: var(--c-text); margin-top: 5px;}
.contact-form > :nth-child(10){grid-area: 8 / 1 / 9 / 3;}
.contact-form > :nth-child(11){grid-area: 9 / 1 / 10 / 3;}
.contact-form > :nth-child(12){grid-area: 10 / 1 / 11 / 3;}
.contact-form > :nth-child(13){grid-area:  11 / 1 / 12 / 3; background-image: url('../images/icons/chevron-down.svg'); background-size: 11px; background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer;}
.contact-form > :nth-child(14){grid-area:  12 / 1 / 13 / 3; display: flex; align-items: center; justify-content: space-between;}
label{position: relative; font-size: var(--fs-sm); font-weight: 600; color: var(--c-charcoal);}
.require::after{position: absolute; content: "*"; font-size: var(--fs-base); color: var(--c-rose);}
.contact-form >:first-child::after{left: 76px;}
.contact-form >:nth-child(5)::after{left: 98px;}
.contact-form >:nth-child(7)::after{left: 56px;}
.contact-form >:nth-child(10)::after{left: 64px;}
.optional::after{position: absolute; content: "Optional"; font-size: 11px; color: var(--c-text); background-color: var(--c-surface); padding: 1px 6px;}
.contact-form > :nth-child(3)::after{left: 80px;}
.contact-form > :nth-child(12)::after{left: 146px;}
input ,textarea,select{font-family: var(--ff-secondary); position: relative; 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;}
input::placeholder ,textarea::placeholder{color: #c4b0a8;}
input:focus,select:focus,textarea:focus{border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(232, 151, 42, .12); background: var(--c-white);}
.textarea{position: relative;}
.textarea > :last-child{position: absolute; bottom: 10px; right: 15px; font-size: 11px; color: var(--c-text);}
.contact-form > :nth-child(14) > :first-child{position: relative; font-size: 12px; color: var(--c-text); padding-left: 22px;}
.contact-form > :nth-child(14) > :first-child::before { position: absolute; content: ""; background-image: url(../images/icons/shield.svg); background-position: center; background-repeat: no-repeat; width: 15px; height: 16px; left: 0; top: 0px; filter: brightness(0) saturate(100%) invert(42%) sepia(11%) saturate(543%) hue-rotate(335deg) brightness(97%) contrast(91%); }
.contact-form > :nth-child(14) > :last-child{ position: relative; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#F25C7A,#e8972a); color: var(--c-white); border: none; border-radius: 999px; padding: 14px 41px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 18px rgba(242, 92, 122, .3); transition: opacity .2s, transform .2s, gap .2s;}
.contact-form > :nth-child(14) > :last-child:hover {opacity: .9; transform: translateY(-2px);}
.contact-form > :nth-child(14) > :last-child::after{position: absolute; content: ""; background-image: url(../images/icons/send.svg); background-position: center; background-repeat: no-repeat; width: 27px; height: 20px; right: 13px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(229deg) brightness(106%) contrast(101%); }
/* sidebar */
.contact-side-bar{display: flex; gap: 22px; flex-direction: column;}
.contact-side-bar > * {background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 18px; overflow: hidden;}
.contact-side-bar > * >: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); display: flex; align-items: center; gap: 8px;}
.contact-side-bar > * >:nth-child(2){padding: 18px 20px;}
.time-wrapper{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.time-item{background: var(--c-surface); border-radius: 12px; padding: 14px; text-align: center}
.time-item > :first-child{font-size: 24px; margin-bottom: 6px;}
.time-item > :nth-child(2){font-family: var(--ff-primary); font-size: 18px; font-weight: 700; color: var(--c-charcoal); margin-bottom: 2px;}
.time-item > :nth-child(3){font-size: 11px; color: var(--c-text); font-weight: 500;}
.responce-time > :last-child{font-size: 12px; color: var(--c-text); padding-bottom: 14px; text-align: center; display: block;}
.faq-list{display: flex; flex-direction: column; gap: 4px;}
.faq-list > *{border: 1.5px solid var(--c-border); border-radius: 12px; overflow: hidden;}
.faq-item > :first-child{ position: relative; width: 100%; padding: 16px 16px; font-size: 13px; text-align: left; font-weight: 600; color: var(--c-charcoal); cursor: pointer; background: var(--c-cream); transition: background .2s; user-select: none;}
.faq-item > :first-child:hover{background: var(--c-surface);}
.faq-item > :first-child::after{position: absolute; content: "+"; font-size: 11px; right: 14px; transition: transform .25s;}
.faq-item > :nth-child(2){max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s; font-size: 13px; color: var(--c-text); line-height: 1.65; background: var(--c-white); padding: 0px 16px;}
.faq-item.active .faq-a {max-height: 200px; padding: 12px 16px 16px;}
.faq-item.active > :first-child::after{transform: rotate(45deg);}
/* social-links */
.social-wrapper{display: flex; flex-direction: column; gap: 10px;}
.social-wrapper > * {display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-cream); border: 1.5px solid var(--c-border); transition: all .2s; }
.social-wrapper > *:hover{border-color: var(--c-gold); transform: translateX(5px);}
.social-item > :first-child{width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;}
.social-wrapper > :first-child >:first-child{background: linear-gradient(135deg,#fde3ea,#ffc5d3);}
.social-details > :first-child{font-size: 13px; font-weight: 600; color: var(--c-charcoal); font-family: var(--ff-secondary);}
.social-details > :nth-child(2){font-size: 12px; color: var(--c-text);}
.social-wrapper > :nth-child(2) > :first-child {background:linear-gradient(135deg,#dbeafe,#bfdbfe) ;}
.social-wrapper > :nth-child(3) > :first-child {background: linear-gradient(135deg,#fff0f3,#fce4ec);}
.social-wrapper > :nth-child(4) > :first-child {background: linear-gradient(135deg,#f1f0ef,#e0dbd8);}
@keyframes floating {
    0%{
        transition: translateY(0) rotate(0deg);
    }
    50%{
        transform: translateY(-18px) rotate(10deg);
    }
}
/* responsive */
@media only screen and (max-width:1200px){
    /*hero sec*/
    .hero .container .wrapper > :nth-child(2) {padding-inline: 292px;}
    .hero .container .wrapper > :nth-child(3) {padding-inline: 228px;}
    /* contact form wrapper */
    .contact-layout .container .wrapper {padding: 52px 0px 80px; gap: 10px; grid-template-columns: 1fr 1fr;}
    .cate {padding: 24px 0px 0 31px;}
    /* form-btn */
    .contact-form > :nth-child(14) > :last-child {padding:14px 36px}
}
@media only screen and (max-width:992px){
.contact-layout .container .wrapper {grid-template-columns: 1fr; gap: 20px;}
}
@media only screen and (max-width:786px){
    .hero .container .wrapper > :nth-child(2){padding-inline: 212px;}
    .hero .container .wrapper > :nth-child(3) {padding-inline: 110px;}
    .contact-details .container .wrapper {grid-template-columns: repeat(2, 1fr);}  
}
@media only screen and (max-width:576px){
.hero .container .wrapper > :nth-child(2) {padding-inline: 20px;}
.hero .container .wrapper > :nth-child(3) {padding-inline: 0; font-size: var(--fs-sm);}
/* form inside */
.contact-form > :first-child {grid-area: 1 / 1 / 2 / 3;}
.contact-form > :nth-child(2) {grid-area: 2 / 1 / 3 / 3}
.contact-form > :nth-child(3) {grid-area: 3 / 1 / 4 / 3;}
.contact-form > :nth-child(4) {grid-area: 4 / 1 / 5 / 3;}
.contact-form > :nth-child(5) {grid-area: 5 / 1 / 5 / 3;}
.contact-form > :nth-child(6) {grid-area: 6 / 1 / 6 / 3;}
.contact-form > :nth-child(7) {grid-area: 7 / 1 / 7 / 3;}
.contact-form > :nth-child(8) {grid-area: 8 / 1 / 9 / 3;}
.contact-form > :nth-child(9) {grid-area: 9 / 1 / 10 / 3;}
.contact-form > :nth-child(10) {grid-area: 10 / 1 / 11 / 3;}
.contact-form > :nth-child(11) {grid-area: 11 / 1 / 12 / 3;}
.contact-form > :nth-child(12) {grid-area: 12 / 1 / 13 / 3;}
.contact-form > :nth-child(13) {grid-area: 13 / 1 / 14 / 3}
.contact-form > :nth-child(14) {grid-area: 14 / 1 / 15 / 3; flex-wrap: wrap; justify-content: center; gap: 20px;}
.form > :first-child {padding: 28px 10px;}
.form-head > :first-child {font-size: 18px;}
}
@media only screen and (max-width:786px){
    .hero{padding-block: 20px;}
    .hero .container .wrapper {padding-bottom: 50px;}
    .contact-details .wrapper >* {padding: 15px;}
    .contact-layout .container .wrapper {padding:20px 0 0 0;}
    .form > :first-child {padding: 20px;}
    .form-body {padding: 20px 20px 20px;}
    .contact-side-bar{padding-bottom: 20px;}
}
@media only screen and (max-width:425px){
.cate {grid-template-columns: repeat(1, 1fr);}
}
@media only screen and (max-width:320px){
.contact-details .container .wrapper {grid-template-columns: repeat(1, 1fr);}    
}