html {
font-size: 100%
}

body {
margin: 0;
min-height: 100svh;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
font-family: 'Karla', sans-serif;
color: #2a2a2a;
background: #fff
}

.topband {
background: linear-gradient(135deg, #4F843F 0%, #6a9f58 100%);
padding: 8px 0;
position: relative
}

.topband-inner {
max-width: 1170px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px
}

.brandzone {
display: flex;
align-items: center;
gap: 16px
}

.logobox {
width: 62px;
height: 62px;
background: #fff;
border-radius: 12px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 7px 18px 1px #4f843f1a;
border-left: 4px solid #B9C9A6
}

.logobox img {
width: 100%;
height: 100%;
object-fit: contain
}

.contactinfo {
display: flex;
align-items: center;
gap: 24px
}

.phonelink {
color: #F9FCF8;
text-decoration: none;
font-size: 15px;
font-weight: 500;
letter-spacing: .02em;
transition: color .42s cubic-bezier(0.22, 1, 0.36, 1)
}

.phonelink:hover {
color: #B9C9A6
}

.phonelink:focus {
outline: 2px solid #F9FCF8;
outline-offset: 4px;
border-radius: 6px
}

.navrow {
background: #F9FCF8;
border-bottom: 2px solid #B9C9A6;
position: relative
}

.navrow-inner {
max-width: 1170px;
margin: 0 auto;
padding: 0 24px
}

.primarynav {
display: flex;
flex-wrap: wrap;
gap: 8px 40px;
padding: 16px 0;
list-style: none;
margin: 0
}

.primarynav li {
margin: 0
}

.navlink {
color: #2a2a2a;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 16px;
display: inline-block;
border-radius: 6px;
transition: background-color .48s cubic-bezier(0.22, 1, 0.36, 1), color .48s cubic-bezier(0.22, 1, 0.36, 1);
position: relative
}

.navlink:hover {
background-color: #4F843F;
color: #fff
}

.navlink:focus {
outline: 2px solid #4F843F;
outline-offset: 2px
}

.navlink.active {
background-color: #B9C9A6;
color: #2a2a2a
}

@media (max-width: 768px) {
.topband-inner {
flex-direction: column;
align-items: flex-start;
gap: 16px
}

.contactinfo {
width: 100%;
justify-content: flex-start
}

.primarynav {
gap: 8px 16px
}
}

@media (max-width: 390px) {
.logobox {
width: 55px;
height: 55px
}

.phonelink {
font-size: 15px
}

.navlink {
padding: 8px 12px;
font-size: 15px
}
}

.footerzone {
background: linear-gradient(180deg, #F9FCF8 0%, #fff 100%);
position: relative;
padding-top: 80px;
margin-top: 80px
}

.footerzone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 280px;
background: linear-gradient(135deg, transparent 0%, transparent 48%, #B9C9A6 48%, #B9C9A6 52%, transparent 52%), linear-gradient(45deg, transparent 0%, transparent 68%, #4f843f1f 68%, #4f843f1f 72%, transparent 72%);
pointer-events: none;
z-index: 0
}

.footertop {
max-width: 1170px;
margin: 0 auto;
padding: 0 24px 40px;
display: flex;
gap: 80px;
position: relative;
z-index: 1
}

.footerbrand {
flex: 0 0 auto;
max-width: 280px
}

.footerlogobox {
width: 58px;
height: 58px;
background: #fff;
border-radius: 12px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px 1px #4f843f0f;
border-left: 4px solid #4F843F;
margin-bottom: 16px
}

.footerlogobox img {
width: 100%;
height: 100%;
object-fit: contain
}

.footertext {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0 0 24px
}

.footercontact {
display: flex;
flex-direction: column;
gap: 8px
}

.footercontactitem {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
text-decoration: none;
transition: color .52s ease-in-out
}

.footercontactitem:hover {
color: #4F843F
}

.footercontactitem:focus {
outline: 2px solid #4F843F;
outline-offset: 2px;
border-radius: 6px
}

.footernav {
flex: 1;
display: flex;
gap: 80px;
flex-wrap: wrap
}

.footercolumn {
flex: 1;
min-width: 200px
}

.footerheading {
font-size: 15px;
font-weight: 700;
color: #2a2a2a;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .08em
}

.footerlinks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.footerlinks li {
margin: 0
}

.footerlink {
color: #4a4a4a;
text-decoration: none;
font-size: 15px;
line-height: 1.8;
transition: color .56s cubic-bezier(0.22, 1, 0.36, 1);
display: inline-block
}

.footerlink:hover {
color: #4F843F
}

.footerlink:focus {
outline: 2px solid #4F843F;
outline-offset: 2px;
border-radius: 6px
}

.footermid {
border-top: 1px solid #B9C9A6;
padding: 24px 0;
position: relative;
z-index: 1
}

.footermid-inner {
max-width: 1170px;
margin: 0 auto;
padding: 0 24px
}

.trusttext {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
text-align: center;
margin: 0
}

.footerbottom {
padding: 16px 0;
background: #4f843f0a;
position: relative;
z-index: 1
}

.footerbottom-inner {
max-width: 1170px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap
}

.copyright {
font-size: 15px;
color: #6a6a6a;
margin: 0
}

.legallinks {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding: 0
}

.legallinks li {
margin: 0
}

.legallink {
color: #6a6a6a;
text-decoration: none;
font-size: 15px;
transition: color .44s cubic-bezier(0.22, 1, 0.36, 1)
}

.legallink:hover {
color: #4F843F
}

.legallink:focus {
outline: 2px solid #4F843F;
outline-offset: 2px;
border-radius: 6px
}

@media (max-width: 1280px) {
.footertop {
gap: 40px
}

.footernav {
gap: 40px
}
}

@media (max-width: 768px) {
.footertop {
flex-direction: column;
gap: 40px
}

.footerbrand {
max-width: 100%
}

.footernav {
flex-direction: column;
gap: 40px
}

.footercolumn {
min-width: 100%
}

.footerbottom-inner {
flex-direction: column;
align-items: flex-start;
gap: 16px
}

.legallinks {
flex-direction: column;
gap: 8px
}
}

@media (max-width: 390px) {
.footerzone {
padding-top: 40px;
margin-top: 40px
}

.footertop {
padding-bottom: 24px
}
}

.consentbox {
position: fixed;
top: 24px;
right: 24px;
background: #fff;
border-radius: 12px;
padding: 24px;
max-width: 420px;
box-shadow: 0 12px 36px 1px #4f843f1c;
z-index: 1500;
border: 2px solid #B9C9A6;
display: none;
opacity: 0;
transition: opacity .38s cubic-bezier(0.22, 1, 0.36, 1)
}

.consentbox.visible {
opacity: 1
}

.consenttext {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0 0 16px
}

.consentactions {
display: flex;
gap: 16px;
align-items: center
}

.consentbtn {
background: #4F843F;
color: #fff;
border: none;
padding: 8px 24px;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background-color .46s cubic-bezier(0.22, 1, 0.36, 1), transform .46s cubic-bezier(0.22, 1, 0.36, 1);
font-family: 'Karla', sans-serif
}

.consentbtn:hover {
background: #3d6831;
transform: translateY(-2px)
}

.consentbtn:focus {
outline: 2px solid #4F843F;
outline-offset: 2px
}

.consentdecline {
color: #4a4a4a;
text-decoration: underline;
font-size: 15px;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color .44s ease-in-out;
font-family: 'Karla', sans-serif
}

.consentdecline:hover {
color: #4F843F
}

.consentdecline:focus {
outline: 2px solid #4F843F;
outline-offset: 2px;
border-radius: 6px
}

@media (max-width: 768px) {
.consentbox {
right: 16px;
left: 16px;
max-width: none
}
}

@media (max-width: 390px) {
.consentbox {
top: 16px;
right: 8px;
left: 8px;
padding: 16px
}

.consentactions {
flex-direction: column;
align-items: stretch;
gap: 8px
}

.consentbtn {
width: 100%
}
}

.terms-box {
max-width: 1170px;
margin: 0 auto;
padding: 40px 24px 80px;
font-size: 15px;
line-height: 1.8;
color: #1a1a1a
}

@media (min-width: 768px) {
.terms-box {
padding: 80px 40px
}
}

.terms-box strong,
.terms-box b {
font-weight: 600;
color: #000
}

.terms-box a {
color: #4F843F;
text-decoration: none;
border-bottom: 1px solid #4f843f4d;
transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.terms-box a:hover {
color: #3d6831;
border-bottom-color: #4F843F
}

.terms-box table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 15px;
box-shadow: 0 2px 4px 1px #4f843f0f;
border-radius: 6px;
overflow: hidden
}

.terms-box thead {
background: #F9FCF8
}

.terms-box thead tr {
border-bottom: 2px solid #B9C9A6
}

.terms-box th {
padding: 16px;
text-align: left;
font-weight: 600;
color: #4F843F
}

.terms-box tbody tr {
border-bottom: 1px solid #b9c9a64d;
transition: background-color .4s cubic-bezier(0.22, 1, 0.36, 1)
}

.terms-box tbody tr:last-child {
border-bottom: none
}

.terms-box tbody tr:hover {
background: #f9fcf880
}

.terms-box td {
padding: 16px;
color: #333
}

@media (max-width: 767px) {
.terms-box table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}

.terms-box th,
.terms-box td {
padding: 8px;
font-size: 15px
}
}

.terms-box hr {
border: none;
height: 1px;
background: linear-gradient(to right, #b9c9a600, #b9c9a680, #b9c9a600);
margin: 40px 0
}

.terms-box div {
margin: 24px 0
}

.certif {
background: #fff;
color: #1a1a1a;
overflow-x: clip
}

.certif__titlezone {
max-width: 1170px;
margin: 0 auto;
padding: 80px 24px 120px;
text-align: center;
position: relative
}

.certif__quotemark {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 200px;
line-height: 1;
color: #4f843f14;
font-weight: 700;
user-select: none;
pointer-events: none
}

.certif__maintitle {
font-size: 68px;
line-height: 1.2;
margin: 0 0 16px;
letter-spacing: -.02em;
position: relative;
z-index: 1
}

.certif__tagline {
font-size: 27px;
line-height: 1.8;
margin: 0 0 40px;
color: #4a4a4a;
max-width: 720px;
margin-left: auto;
margin-right: auto
}

.certif__actionlinks {
display: flex;
gap: 24px;
justify-content: center;
align-items: center;
flex-wrap: wrap
}

.certif__linkprimary {
display: inline-block;
padding: 16px 40px;
background: linear-gradient(to left, #4F843F, #B9C9A6);
color: #fff;
text-decoration: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
box-shadow: 0 7px 18px 1px #4f843f1a;
transition: transform .52s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .48s ease-in-out
}

.certif__linkprimary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 36px 1px #4f843f1c
}

.certif__linkprimary:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 4px !important
}

.certif__linksecondary {
display: inline-block;
padding: 16px 40px;
background: transparent;
color: #4F843F;
text-decoration: none;
border: 2px solid #4F843F;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
transition: background .44s ease-in-out, color .44s ease-in-out
}

.certif__linksecondary:hover {
background: #4F843F;
color: #fff
}

.certif__linksecondary:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 4px !important
}

.certif__titlewrap {
max-width: 1170px;
margin: 0 auto;
position: relative
}

.certif__titleimage {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
box-shadow: 0 7px 18px 1px #4f843f1a;
position: relative
}

.certif__titleimage::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, #00000038 100%);
border-radius: 20px;
pointer-events: none
}

.certif__credentials {
background: #F9FCF8;
padding: 80px 24px;
position: relative;
overflow: hidden
}

.certif__credwrap {
max-width: 1170px;
margin: 0 auto
}

.certif__credgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start
}

.certif__credleft {
position: relative
}

.certif__credright {
padding-top: 120px
}

.certif__credhead {
font-size: 51px;
line-height: 1.2;
margin: 0 0 24px;
letter-spacing: -.01em;
position: relative;
display: inline-block
}

.certif__credhead::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 50%;
margin-left: 8px;
vertical-align: middle
}

.certif__credtext {
font-size: 15px;
line-height: 1.8;
margin: 0 0 24px;
color: #2a2a2a
}

.certif__credtext:first-letter {
font-size: 51px;
line-height: 1;
float: left;
margin: 8px 8px 0 0;
color: #4F843F;
font-weight: 700
}

.certif__credlist {
list-style: none;
padding: 0;
margin: 40px 0 0
}

.certif__creditem {
padding: 16px 0;
border-bottom: 1px dashed #d0d0d0;
font-size: 15px;
line-height: 1.8;
color: #2a2a2a
}

.certif__creditem:last-child {
border-bottom: none
}

.certif__credpic {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
box-shadow: 0 7px 18px 1px #4f843f1a;
border: 8px solid #fff;
position: relative
}

.certif__credpic::before {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #4F843F, #B9C9A6);
top: -40px;
right: -40px;
transform: rotate(45deg);
border-radius: 12px;
z-index: 1;
box-shadow: 0 7px 18px 1px #4f843f1a
}

.certif__progress {
margin: 40px 0 0;
padding: 24px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 4px 1px #4f843f0f
}

.certif__progresshead {
font-size: 15px;
line-height: 1.2;
margin: 0 0 16px;
font-weight: 600;
color: #1a1a1a
}

.certif__checklist {
list-style: none;
padding: 0;
margin: 0
}

.certif__checkitem {
padding: 8px 0;
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
position: relative;
padding-left: 32px
}

.certif__checkitem::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #4F843F;
border-radius: 6px;
background: #4F843F
}

.certif__checkitem::after {
content: '';
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0
}

.certif__checkitem.pending::before {
background: transparent
}

.certif__checkitem.pending::after {
display: none
}

.certif__progressfoot {
margin: 16px 0 0;
font-size: 15px;
line-height: 1.8;
color: #4F843F;
font-weight: 600
}

.certif__showcase {
padding: 80px 24px;
background: #fff;
position: relative
}

.certif__showcasewrap {
max-width: 1170px;
margin: 0 auto
}

.certif__showcasehead {
font-size: 51px;
line-height: 1.2;
margin: 0 0 40px;
text-align: center;
letter-spacing: -.01em
}

.certif__showcasegrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px
}

.certif__card {
background: #F9FCF8;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 4px 1px #4f843f0f;
transition: transform .56s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .48s ease-in-out
}

.certif__card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 36px 1px #4f843f1c
}

.certif__cardimgwrap {
width: 100%;
height: 280px;
overflow: hidden;
position: relative
}

.certif__cardimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .64s cubic-bezier(0.22, 1, 0.36, 1)
}

.certif__card:hover .certif__cardimg {
transform: scale(1.08)
}

.certif__cardbody {
padding: 24px
}

.certif__cardtitle {
font-size: 27px;
line-height: 1.2;
margin: 0 0 16px;
color: #1a1a1a
}

.certif__cardtext {
font-size: 15px;
line-height: 1.8;
margin: 0;
color: #2a2a2a
}

.certif__cardlabel {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 16px 0 0;
font-size: 15px;
line-height: 1.2;
color: #4F843F;
font-weight: 600
}

.certif__cardlabel::before {
content: '';
display: block;
width: 12px;
height: 12px;
background: #4F843F;
border-radius: 50%
}

.certif__divider {
max-width: 1170px;
margin: 0 auto;
height: 1px;
background: repeating-linear-gradient(to right, #d0d0d0 0, #d0d0d0 8px, transparent 8px, transparent 16px)
}

@keyframes certifRevealMask {
from {
clip-path: circle(0% at center)
}

to {
clip-path: circle(100% at center)
}
}

.certif__titleimage {
animation: certifRevealMask 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

@keyframes certifShake {

0%,
100% {
transform: translateX(0)
}

25% {
transform: translateX(-4px)
}

75% {
transform: translateX(4px)
}
}

.certif__checkitem.pending:active {
animation: certifShake .3s ease-in-out
}

@media (max-width: 1280px) {
.certif__credgrid {
gap: 40px
}

.certif__credright {
padding-top: 80px
}

.certif__showcasegrid {
grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width: 768px) {
.certif__titlezone {
padding: 40px 16px 80px
}

.certif__quotemark {
font-size: 120px;
top: 20px
}

.certif__maintitle {
font-size: 51px
}

.certif__tagline {
font-size: 15px
}

.certif__actionlinks {
flex-direction: column;
gap: 16px
}

.certif__linkprimary,
.certif__linksecondary {
width: 100%;
text-align: center
}

.certif__credentials {
padding: 40px 16px
}

.certif__credgrid {
grid-template-columns: 1fr;
gap: 40px
}

.certif__credright {
padding-top: 0
}

.certif__credhead {
font-size: 37px
}

.certif__credtext:first-letter {
font-size: 37px
}

.certif__showcase {
padding: 40px 16px
}

.certif__showcasehead {
font-size: 37px;
margin: 0 0 24px
}

.certif__showcasegrid {
grid-template-columns: 1fr;
gap: 24px
}

.certif__cardimgwrap {
height: 220px
}

.certif__cardtitle {
font-size: 15px
}
}

@media (max-width: 390px) {
.certif__maintitle {
font-size: 37px
}

.certif__credhead {
font-size: 27px
}

.certif__credtext:first-letter {
font-size: 27px
}

.certif__showcasehead {
font-size: 27px
}

.certif__linkprimary,
.certif__linksecondary {
padding: 16px 24px
}
}

.certif__titleimage:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 4px !important
}

.certif__card:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 4px !important
}

.srvcs {
max-width: 1170px;
margin: 0 auto;
background: #fff
}

.srvcs__title {
position: relative;
padding: 40px 24px 80px;
background: linear-gradient(180deg, #4F843F 0%, #4f843fd1 38%, #4f843f73 71%, #4f843f00 100%)
}

.srvcs__title-shapes {
position: absolute;
top: 24px;
left: 24px;
right: 24px;
bottom: 24px;
pointer-events: none
}

.srvcs__title-circle {
position: absolute;
width: 120px;
height: 120px;
border: 2px solid #f9fcf826;
border-radius: 999px;
top: 16px;
right: 80px
}

.srvcs__title-square {
position: absolute;
width: 80px;
height: 80px;
border: 2px solid #f9fcf81f;
border-radius: 12px;
bottom: 40px;
left: 120px;
transform: rotate(15deg)
}

.srvcs__title-triangle {
position: absolute;
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 78px solid #f9fcf81a;
top: 120px;
left: 40px
}

.srvcs__title-imgwrap {
position: relative;
margin: 0 0 24px;
border-radius: 20px;
overflow: hidden;
max-width: 680px
}

.srvcs__title-imgwrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #4f843fbf 0%, #b9c9a659 100%);
z-index: 1;
pointer-events: none
}

.srvcs__title-img {
width: 100%;
height: 320px;
object-fit: cover;
display: block
}

.srvcs__title-content {
position: relative;
z-index: 2
}

.srvcs__title-h1 {
font-size: 51px;
line-height: 1.2;
color: #fff;
margin: 0 0 16px;
max-width: 820px
}

.srvcs__title-desc {
font-size: 27px;
line-height: 1.8;
color: #fffffff2;
margin: 0;
max-width: 740px
}

@media (min-width: 768px) {
.srvcs__title {
padding: 80px 40px 120px
}

.srvcs__title-imgwrap {
margin: 0 0 40px
}

.srvcs__title-img {
height: 420px
}
}

@media (min-width: 1280px) {
.srvcs__title {
padding: 80px 40px 160px
}

.srvcs__title-img {
height: 480px
}
}

.srvcs__offers {
padding: 80px 24px;
background: #fff;
position: relative
}

.srvcs__offers-divider {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 12px;
overflow: hidden
}

.srvcs__offers-divider svg {
width: 100%;
height: 100%;
display: block
}

.srvcs__offers-bracket {
position: absolute;
top: 40px;
right: 24px;
width: 80px;
height: 160px;
pointer-events: none
}

.srvcs__offers-bracket svg {
width: 100%;
height: 100%;
display: block
}

.srvcs__offers-head {
margin: 0 0 40px;
text-align: center
}

.srvcs__offers-h2 {
font-size: 37px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 8px;
position: relative;
display: inline-block
}

.srvcs__offers-h2::after {
content: '';
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 999px;
display: inline-block;
margin-left: 6px;
vertical-align: middle
}

.srvcs__offers-subtitle {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0
}

.srvcs__offers-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin: 0 0 40px
}

.srvcs__offers-shared {
background: linear-gradient(270deg, #B9C9A6 0%, #f9fcf8d9 100%);
padding: 24px;
border-radius: 20px 20px 0 0;
text-align: center;
box-shadow: 0 2px 4px 1px #4f843f0f
}

.srvcs__offers-shared-title {
font-size: 27px;
line-height: 1.2;
color: #2a2a2a;
margin: 0 0 8px
}

.srvcs__offers-shared-text {
font-size: 15px;
line-height: 1.8;
color: #3a3a3a;
margin: 0
}

.srvcs__offers-card {
background: #fefefe;
border-radius: 12px;
padding: 24px;
box-shadow: 0 7px 18px 1px #4f843f1a;
transition: transform .52s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .48s ease-in-out;
position: relative;
overflow: hidden
}

.srvcs__offers-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #F9FCF8 0%, #b9c9a640 100%);
transition: left .68s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none
}

.srvcs__offers-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px 1px #4f843f1c
}

.srvcs__offers-card:hover::before {
left: 0
}

.srvcs__offers-card-icon {
width: 64px;
height: 64px;
background: #4F843F;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 16px;
box-shadow: 0 7px 18px 1px #4f843f1a;
position: relative;
z-index: 1
}

.srvcs__offers-card-icon svg {
width: 32px;
height: 32px;
fill: #fff
}

.srvcs__offers-card-h3 {
font-size: 27px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px;
position: relative;
z-index: 1
}

.srvcs__offers-card-desc {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0 0 16px;
position: relative;
z-index: 1
}

.srvcs__offers-card-desc:first-letter {
font-size: 37px;
line-height: 1;
color: #4F843F;
float: left;
margin: 4px 8px 0 0
}

.srvcs__offers-card-features {
list-style: none;
padding: 0;
margin: 0 0 24px;
position: relative;
z-index: 1
}

.srvcs__offers-card-feature {
padding: 8px 0;
font-size: 15px;
line-height: 1.8;
color: #3a3a3a;
border-bottom: 1px solid #b9c9a64d
}

.srvcs__offers-card-feature:last-child {
border-bottom: none
}

.srvcs__offers-card-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 24px;
position: relative;
z-index: 1
}

.srvcs__offers-card-badge {
background: #B9C9A6;
color: #2a2a2a;
font-size: 15px;
padding: 4px 16px;
border-radius: 36px;
display: inline-block
}

.srvcs__offers-card-counter {
background: #4F843F;
color: #fff;
font-size: 15px;
padding: 4px 12px;
border-radius: 6px;
display: inline-block;
font-weight: 600
}

.srvcs__offers-card-price {
font-size: 37px;
line-height: 1.2;
color: #4F843F;
margin: 0 0 16px;
font-weight: 600;
position: relative;
z-index: 1
}

.srvcs__offers-card-btn {
background: #4F843F;
color: #fff;
border: none;
padding: 16px 40px;
font-size: 15px;
border-radius: 12px;
cursor: pointer;
transition: background .42s ease-in-out, transform .28s cubic-bezier(0.22, 1, 0.36, 1);
width: 100%;
position: relative;
z-index: 1;
overflow: hidden
}

.srvcs__offers-card-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #fff3;
border-radius: 999px;
transform: translate(-50%, -50%);
transition: width .56s cubic-bezier(0.22, 1, 0.36, 1), height .56s cubic-bezier(0.22, 1, 0.36, 1)
}

.srvcs__offers-card-btn:hover {
background: #3d6832;
transform: scale(1.02)
}

.srvcs__offers-card-btn:hover::after {
width: 300px;
height: 300px
}

.srvcs__offers-table {
width: 100%;
border-collapse: collapse;
margin: 40px 0 0;
background: #fefefe;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 7px 18px 1px #4f843f1a
}

.srvcs__offers-table-head {
background: linear-gradient(270deg, #4F843F 0%, #B9C9A6 100%)
}

.srvcs__offers-table-th {
padding: 16px;
text-align: left;
font-size: 15px;
color: #fff;
font-weight: 600
}

.srvcs__offers-table-td {
padding: 16px;
font-size: 15px;
color: #3a3a3a;
border-bottom: 1px solid #b9c9a633
}

.srvcs__offers-table-row:last-child .srvcs__offers-table-td {
border-bottom: none
}

.srvcs__offers-table-td.low {
background: #b9c9a626
}

.srvcs__offers-table-td.medium {
background: #b9c9a659
}

.srvcs__offers-table-td.high {
background: #4f843f40
}

@media (min-width: 768px) {
.srvcs__offers {
padding: 80px 40px
}

.srvcs__offers-grid {
grid-template-columns: repeat(2, 1fr)
}

.srvcs__offers-shared {
grid-column: 1 / -1
}
}

@media (min-width: 1280px) {
.srvcs__offers-grid {
grid-template-columns: repeat(3, 1fr)
}
}

.srvcs__process {
padding: 80px 24px;
background: #fafafa;
position: relative
}

.srvcs__process::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23ffffff" width="100" height="100"/><path d="M0 0L50 50L0 100M50 0L100 50L50 100" stroke="%23B9C9A6" stroke-width="0.5" fill="none" opacity="0.08"/></svg>');
background-size: 100px 100px;
opacity: .4;
pointer-events: none
}

.srvcs__process-content {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto
}

.srvcs__process-h2 {
font-size: 37px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 40px;
text-align: center;
position: relative;
display: inline-block;
width: 100%
}

.srvcs__process-h2::after {
content: '';
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 999px;
display: inline-block;
margin-left: 6px;
vertical-align: middle
}

.srvcs__process-steps {
display: flex;
flex-direction: column;
gap: 24px
}

.srvcs__process-step {
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 4px 1px #4f843f0f;
transition: box-shadow .45s ease-in-out;
position: relative;
overflow: hidden
}

.srvcs__process-step::before {
content: '';
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: url(./brand_assets/tmp-content-image-5.jpg) center/cover no-repeat;
opacity: .08;
animation: panright 24s linear infinite
}

@keyframes panright {
0% {
right: -100%
}

50% {
right: 0
}

100% {
right: -100%
}
}

.srvcs__process-step:hover {
box-shadow: 0 7px 18px 1px #4f843f1a
}

.srvcs__process-step-num {
width: 48px;
height: 48px;
background: #4F843F;
color: #fff;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
font-weight: 600;
margin: 0 0 16px;
position: relative;
z-index: 1;
box-shadow: 0 7px 18px 1px #4f843f1a
}

.srvcs__process-step-h3 {
font-size: 27px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px;
position: relative;
z-index: 1
}

.srvcs__process-step-text {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0;
position: relative;
z-index: 1
}

.srvcs__process-step-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 16px 0 0;
position: relative;
z-index: 1
}

.srvcs__process-step-tag {
background: #B9C9A6;
color: #2a2a2a;
font-size: 15px;
padding: 4px 16px;
border-radius: 36px;
display: inline-block
}

@media (min-width: 768px) {
.srvcs__process {
padding: 80px 40px
}

.srvcs__process-steps {
gap: 40px
}
}

.srvcs__reveal {
opacity: 0;
transform: scale(0.92);
animation: revealcenter .72s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

@keyframes revealcenter {
to {
opacity: 1;
transform: scale(1)
}
}

.srvcs__reveal.delay1 {
animation-delay: .18s
}

.srvcs__reveal.delay2 {
animation-delay: .36s
}

.srvcs__reveal.delay3 {
animation-delay: .54s
}

.abtus {
background: #fff;
color: #1a1a1a;
max-width: 1170px;
margin: 0 auto;
padding: 0
}

.abtus .opng {
background: linear-gradient(to left, #4F843F, #B9C9A6);
padding: 120px 24px 40px;
position: relative;
overflow: hidden
}

.abtus .opng::before {
content: '';
position: absolute;
top: 80px;
right: -60px;
width: 280px;
height: 280px;
border: 2px solid #f9fcf826;
border-radius: 48px;
transform: rotate(25deg);
pointer-events: none
}

.abtus .opng::after {
content: '';
position: absolute;
top: 100px;
right: -50px;
width: 260px;
height: 260px;
border: 2px solid #f9fcf814;
border-radius: 48px;
transform: rotate(25deg);
pointer-events: none
}

.abtus .opngtxt {
max-width: 720px;
animation: opngfade .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
opacity: 0
}

@keyframes opngfade {
to {
opacity: 1
}
}

.abtus .opngtxt h1 {
font-size: 68px;
line-height: 1.2;
color: #fff;
margin: 0 0 24px;
letter-spacing: -.02em
}

.abtus .opngtxt h1 span {
border-bottom: 4px solid #F9FCF8;
padding-bottom: 4px
}

.abtus .opngtxt p {
font-size: 27px;
line-height: 1.8;
color: #fffffff2;
margin: 0
}

.abtus .story {
padding: 80px 24px;
background: #F9FCF8;
position: relative
}

.abtus .storycont {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center
}

.abtus .storytxt h2 {
font-size: 51px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 24px;
letter-spacing: -.01em;
position: relative;
display: inline-block
}

.abtus .storytxt h2::after {
content: '';
width: 12px;
height: 12px;
background: #4F843F;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
vertical-align: middle
}

.abtus .storytxt p:first-of-type::first-letter {
font-size: 68px;
line-height: 1;
float: left;
margin: 8px 16px 0 0;
color: #4F843F;
font-weight: 600
}

.abtus .storytxt p {
font-size: 15px;
line-height: 1.8;
color: #333;
margin: 0 0 24px
}

.abtus .storytxt p:last-child {
margin-bottom: 0
}

.abtus .storyimg {
position: relative;
animation: storyimgslide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: .3s;
opacity: 0;
transform: translateX(40px)
}

@keyframes storyimgslide {
to {
opacity: 1;
transform: translateX(0)
}
}

.abtus .storyimg img {
width: 100%;
height: 480px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 12px 36px 1px #4f843f1c;
opacity: .85
}

.abtus .vals {
padding: 80px 24px;
background: #fff;
position: relative
}

.abtus .valshdr {
text-align: center;
margin-bottom: 80px
}

.abtus .valshdr h2 {
font-size: 51px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abtus .valshdr h2::after {
content: '';
width: 12px;
height: 12px;
background: #4F843F;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
vertical-align: middle
}

.abtus .valshdr p {
font-size: 15px;
line-height: 1.8;
color: #555;
margin: 0
}

.abtus .valsgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px
}

.abtus .valcard {
padding: 40px 24px;
border-radius: 12px;
position: relative;
animation: valcardfade .7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
opacity: 0;
transform: translateY(24px)
}

.abtus .valcard:nth-child(1) {
background: linear-gradient(135deg, #F9FCF8 0%, #fff 100%);
animation-delay: .1s
}

.abtus .valcard:nth-child(2) {
background: linear-gradient(135deg, #B9C9A6 0%, #fff 100%);
animation-delay: .25s
}

.abtus .valcard:nth-child(3) {
background: linear-gradient(135deg, #4F843F 0%, #B9C9A6 100%);
animation-delay: .4s
}

@keyframes valcardfade {
to {
opacity: 1;
transform: translateY(0)
}
}

.abtus .valcard .num {
width: 56px;
height: 56px;
background: #4F843F;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
font-weight: 600;
margin-bottom: 24px;
box-shadow: 0 7px 18px 1px #4f843f1a
}

.abtus .valcard:nth-child(2) .num {
background: #fff;
color: #4F843F
}

.abtus .valcard:nth-child(3) .num {
background: #fff;
color: #4F843F
}

.abtus .valcard h3 {
font-size: 27px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abtus .valcard:nth-child(3) h3 {
color: #fff
}

.abtus .valcard p {
font-size: 15px;
line-height: 1.8;
color: #333;
margin: 0
}

.abtus .valcard:nth-child(3) p {
color: #fffffff2
}

.abtus .team {
padding: 80px 24px;
background-image: url(./brand_assets/content-image-8.jpg);
background-size: cover;
background-position: center;
position: relative
}

.abtus .team::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to left, #4f843feb, #b9c9a6e0);
mix-blend-mode: multiply;
pointer-events: none
}

.abtus .teamcont {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center
}

.abtus .teamtxt h2 {
font-size: 51px;
line-height: 1.2;
color: #fff;
margin: 0 0 24px;
letter-spacing: -.01em;
position: relative;
display: inline-block
}

.abtus .teamtxt h2::after {
content: '';
width: 12px;
height: 12px;
background: #F9FCF8;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
vertical-align: middle
}

.abtus .teamtxt p:first-of-type::first-letter {
font-size: 68px;
line-height: 1;
float: left;
margin: 8px 16px 0 0;
color: #F9FCF8;
font-weight: 600
}

.abtus .teamtxt p {
font-size: 15px;
line-height: 1.8;
color: #fffffff2;
margin: 0 0 24px
}

.abtus .teamtxt p:last-child {
margin-bottom: 0
}

.abtus .teamprof {
display: grid;
grid-template-columns: 1fr;
gap: 24px
}

.abtus .profcard {
background: #ffffff1f;
padding: 24px;
border-radius: 12px;
backdrop-filter: blur(8px);
border: 2px solid #ffffff2e;
position: relative;
transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1), background .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.abtus .profcard::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid transparent;
border-radius: 12px;
transition: border-color .6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none
}

.abtus .profcard:hover {
background: #fff3;
border-color: #fff6
}

.abtus .profcard:hover::before {
border-color: #F9FCF8 transparent transparent #F9FCF8
}

.abtus .profcard h4 {
font-size: 27px;
line-height: 1.2;
color: #fff;
margin: 0 0 8px;
letter-spacing: -.01em
}

.abtus .profcard .role {
font-size: 15px;
line-height: 1.8;
color: #ffffffbf;
margin: 0
}

.abtus .metrics {
padding: 80px 24px;
background: #fff;
position: relative
}

.abtus .metricshdr {
text-align: center;
margin-bottom: 80px
}

.abtus .metricshdr h2 {
font-size: 51px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abtus .metricshdr h2::after {
content: '';
width: 12px;
height: 12px;
background: #4F843F;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
vertical-align: middle
}

.abtus .metricsgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px
}

.abtus .metricitem {
text-align: center;
padding: 40px 16px;
background: #F9FCF8;
border-radius: 20px;
position: relative;
animation: metricpop .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
opacity: 0;
transform: scale(0.9)
}

.abtus .metricitem:nth-child(1) {
animation-delay: .15s
}

.abtus .metricitem:nth-child(2) {
animation-delay: .3s
}

.abtus .metricitem:nth-child(3) {
animation-delay: .45s
}

.abtus .metricitem:nth-child(4) {
animation-delay: .6s
}

@keyframes metricpop {
to {
opacity: 1;
transform: scale(1)
}
}

.abtus .metricitem .metricnum {
font-size: 68px;
line-height: 1.2;
color: #4F843F;
font-weight: 600;
margin: 0 0 8px;
letter-spacing: -.02em
}

.abtus .metricitem .metriclbl {
font-size: 15px;
line-height: 1.8;
color: #555;
margin: 0
}

.abtus .approach {
padding: 80px 24px;
background: #F9FCF8;
position: relative
}

.abtus .approachcont {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center
}

.abtus .approachimg {
position: relative
}

.abtus .approachimg img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 36px;
box-shadow: 0 12px 36px 1px #4f843f1c;
opacity: .9
}

.abtus .approachtxt h2 {
font-size: 51px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 24px;
letter-spacing: -.01em;
position: relative;
display: inline-block
}

.abtus .approachtxt h2::after {
content: '';
width: 12px;
height: 12px;
background: #4F843F;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
vertical-align: middle
}

.abtus .approachtxt p:first-of-type::first-letter {
font-size: 68px;
line-height: 1;
float: left;
margin: 8px 16px 0 0;
color: #4F843F;
font-weight: 600
}

.abtus .approachtxt p {
font-size: 15px;
line-height: 1.8;
color: #333;
margin: 0 0 24px
}

.abtus .approachtxt p:last-child {
margin-bottom: 0
}

.abtus .approachtxt ul {
list-style: none;
padding: 0;
margin: 24px 0 0
}

.abtus .approachtxt ul li {
font-size: 15px;
line-height: 1.8;
color: #333;
margin: 0 0 16px;
padding-left: 32px;
position: relative
}

.abtus .approachtxt ul li::before {
content: '';
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 50%;
position: absolute;
left: 8px;
top: 12px
}

.abtus .approachtxt ul li:last-child {
margin-bottom: 0
}

@media (max-width: 1280px) {
.abtus .opng {
padding: 100px 24px 40px
}

.abtus .opngtxt h1 {
font-size: 51px
}

.abtus .opngtxt p {
font-size: 27px
}

.abtus .storycont,
.abtus .teamcont,
.abtus .approachcont {
gap: 40px
}

.abtus .valsgrid {
gap: 24px
}

.abtus .metricsgrid {
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
}

@media (max-width: 768px) {
.abtus .opng {
padding: 80px 16px 40px
}

.abtus .opng::before,
.abtus .opng::after {
display: none
}

.abtus .opngtxt h1 {
font-size: 37px
}

.abtus .opngtxt p {
font-size: 15px
}

.abtus .story,
.abtus .vals,
.abtus .team,
.abtus .metrics,
.abtus .approach {
padding: 40px 16px
}

.abtus .storycont,
.abtus .teamcont,
.abtus .approachcont {
grid-template-columns: 1fr;
gap: 40px
}

.abtus .storytxt h2,
.abtus .valshdr h2,
.abtus .teamtxt h2,
.abtus .metricshdr h2,
.abtus .approachtxt h2 {
font-size: 37px
}

.abtus .valsgrid {
grid-template-columns: 1fr;
gap: 24px
}

.abtus .valshdr,
.abtus .metricshdr {
margin-bottom: 40px
}

.abtus .metricsgrid {
grid-template-columns: 1fr
}

.abtus .storyimg img,
.abtus .approachimg img {
height: 360px
}

.abtus .valcard .num {
width: 48px;
height: 48px;
font-size: 27px
}

.abtus .metricitem .metricnum {
font-size: 51px
}
}

@media (max-width: 390px) {
.abtus .opng {
padding: 60px 16px 24px
}

.abtus .opngtxt h1 {
font-size: 27px
}

.abtus .story,
.abtus .vals,
.abtus .team,
.abtus .metrics,
.abtus .approach {
padding: 40px 16px
}

.abtus .storytxt h2,
.abtus .valshdr h2,
.abtus .teamtxt h2,
.abtus .metricshdr h2,
.abtus .approachtxt h2 {
font-size: 27px
}

.abtus .valcard h3,
.abtus .profcard h4 {
font-size: 27px
}

.abtus .storyimg img,
.abtus .approachimg img {
height: 280px;
border-radius: 12px
}

.abtus .metricitem .metricnum {
font-size: 37px
}
}

.yogahome {
background: #FFF;
color: #1D1D1D;
overflow-x: clip
}

.yogahome .herozone {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
padding: 80px 24px 160px;
overflow: hidden;
background: linear-gradient(135deg, #4F843F 0%, #B9C9A6 100%)
}

.yogahome .herozone::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(./brand_assets/content-image-10.jpg);
background-size: cover;
background-position: center;
opacity: .18;
z-index: 1;
pointer-events: none
}

.yogahome .herozone::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 24px, #ffffff08 24px, #ffffff08 48px);
z-index: 2;
pointer-events: none
}

.yogahome .heroinside {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 3
}

.yogahome .herocontent {
max-width: 780px
}

.yogahome .herocontent h1 {
font-size: 68px;
line-height: 1.2;
color: #FFF;
margin: 0 0 24px;
letter-spacing: -.02em
}

.yogahome .herocontent p {
font-size: 27px;
line-height: 1.8;
color: #fffffff2;
margin: 0
}

.yogahome .readyframe {
padding: 80px 24px;
background: #F9FCF8;
position: relative
}

.yogahome .readyframe::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 140px;
background: linear-gradient(180deg, #B9C9A6 0%, #4F843F 100%);
border-radius: 0 6px 6px 0
}

.yogahome .readyinside {
max-width: 1170px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start
}

.yogahome .readyleft h2 {
font-size: 51px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 40px;
letter-spacing: -.01em;
position: relative;
display: inline-block
}

.yogahome .readyleft h2::after {
content: '';
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 50%
}

.yogahome .readyright {
display: flex;
flex-direction: column;
gap: 24px
}

.yogahome .readyitem {
padding: 24px;
background: #FFF;
border-radius: 12px;
box-shadow: 0 2px 4px 1px #4f843f0f;
transition: box-shadow .52s cubic-bezier(0.22, 1, 0.36, 1), transform .48s cubic-bezier(0.22, 1, 0.36, 1)
}

.yogahome .readyitem:hover {
box-shadow: 0 7px 18px 1px #4f843f1a;
transform: translateY(-2px)
}

.yogahome .readyitem h3 {
font-size: 27px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 16px
}

.yogahome .readyitem p {
font-size: 15px;
line-height: 1.8;
color: #4A4A4A;
margin: 0
}

.yogahome .teamframe {
padding: 80px 24px;
background: #FFF;
position: relative
}

.yogahome .teamframe::before {
content: '';
position: absolute;
top: 40px;
right: 40px;
width: 320px;
height: 320px;
background: linear-gradient(225deg, #b9c9a614 0%, #4f843f14 100%);
border-radius: 48px;
transform: rotate(12deg);
pointer-events: none;
z-index: 1
}

.yogahome .teaminside {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 2
}

.yogahome .teamtop {
max-width: 680px;
margin: 0 0 80px
}

.yogahome .teamtop h2 {
font-size: 51px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 24px;
letter-spacing: -.01em
}

.yogahome .teamtop p {
font-size: 15px;
line-height: 1.8;
color: #4A4A4A;
margin: 0
}

.yogahome .teamtop p:first-letter {
font-size: 51px;
line-height: 1;
float: left;
margin: 4px 8px 0 0;
color: #4F843F;
font-weight: 600
}

.yogahome .teamgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px
}

.yogahome .teammember {
position: relative;
overflow: hidden;
border-radius: 20px
}

.yogahome .teammember img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
transition: transform .64s cubic-bezier(0.22, 1, 0.36, 1), filter .56s ease-in-out;
filter: saturate(0.88) brightness(1.02)
}

.yogahome .teammember:hover img {
transform: scale(1.06);
filter: saturate(1) brightness(1)
}

.yogahome .memberinfo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px;
background: linear-gradient(180deg, #1d1d1d00 0%, #1d1d1deb 100%);
transform: translateY(0);
transition: transform .48s cubic-bezier(0.22, 1, 0.36, 1)
}

.yogahome .memberinfo h4 {
font-size: 27px;
line-height: 1.2;
color: #FFF;
margin: 0 0 8px
}

.yogahome .memberinfo p {
font-size: 15px;
line-height: 1.8;
color: #ffffffe0;
margin: 0
}

.yogahome .credframe {
padding: 80px 24px;
background: linear-gradient(270deg, #B9C9A6 0%, #F9FCF8 100%);
position: relative;
overflow: hidden
}

.yogahome .credframe::before {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 280px;
height: 280px;
border: 2px solid #4f843f1f;
border-radius: 50%;
pointer-events: none
}

.yogahome .credframe::after {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 220px;
height: 220px;
border: 2px solid #4f843f1f;
border-radius: 50%;
pointer-events: none
}

.yogahome .credinside {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 2
}

.yogahome .credheader {
text-align: center;
margin: 0 0 80px
}

.yogahome .credheader h2 {
font-size: 51px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 24px;
letter-spacing: -.01em;
position: relative;
display: inline-block
}

.yogahome .credheader h2::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 50%
}

.yogahome .credheader p {
font-size: 15px;
line-height: 1.8;
color: #4A4A4A;
margin: 0;
max-width: 720px;
margin-left: auto;
margin-right: auto
}

.yogahome .credgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px
}

.yogahome .credcard {
background: #FFF;
padding: 40px 24px;
border-radius: 20px;
text-align: center;
box-shadow: 0 2px 4px 1px #4f843f0f;
position: relative;
overflow: hidden;
transition: box-shadow .52s cubic-bezier(0.22, 1, 0.36, 1), transform .48s cubic-bezier(0.22, 1, 0.36, 1)
}

.yogahome .credcard::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(270deg, #B9C9A6 0%, #4F843F 100%);
transition: height .58s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1
}

.yogahome .credcard:hover {
box-shadow: 0 7px 18px 1px #4f843f1a;
transform: translateY(-4px)
}

.yogahome .credcard:hover::before {
height: 6px
}

.yogahome .credcard h5 {
font-size: 27px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 16px;
position: relative;
z-index: 2
}

.yogahome .credcard p {
font-size: 15px;
line-height: 1.8;
color: #4A4A4A;
margin: 0;
position: relative;
z-index: 2
}

.yogahome .situframe {
padding: 80px 24px;
background: #FFF;
position: relative
}

.yogahome .situframe::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #B9C9A6 50%, transparent 100%)
}

.yogahome .situinside {
max-width: 1170px;
margin: 0 auto;
display: grid;
grid-template-columns: 480px 1fr;
gap: 80px;
align-items: start
}

.yogahome .situleft img {
width: 100%;
height: 560px;
object-fit: cover;
border-radius: 36px;
display: block;
box-shadow: 0 12px 36px 1px #4f843f1c
}

.yogahome .situright h2 {
font-size: 51px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 40px;
letter-spacing: -.01em
}

.yogahome .situlist {
display: flex;
flex-direction: column;
gap: 24px
}

.yogahome .situitem {
padding-left: 24px;
border-left: 4px solid #B9C9A6;
transition: border-color .42s ease-in-out, padding-left .38s cubic-bezier(0.22, 1, 0.36, 1)
}

.yogahome .situitem:hover {
border-left-color: #4F843F;
padding-left: 32px
}

.yogahome .situitem h4 {
font-size: 27px;
line-height: 1.2;
color: #1D1D1D;
margin: 0 0 8px
}

.yogahome .situitem p {
font-size: 15px;
line-height: 1.8;
color: #4A4A4A;
margin: 0
}

@media (max-width: 1280px) {
.yogahome .herozone {
min-height: 520px;
padding: 80px 24px 120px
}

.yogahome .herocontent h1 {
font-size: 51px
}

.yogahome .herocontent p {
font-size: 27px
}

.yogahome .readyinside {
gap: 40px
}

.yogahome .readyleft h2,
.yogahome .teamtop h2,
.yogahome .credheader h2,
.yogahome .situright h2 {
font-size: 37px
}

.yogahome .teamgrid {
grid-template-columns: repeat(2, 1fr)
}

.yogahome .credgrid {
grid-template-columns: repeat(2, 1fr)
}

.yogahome .situinside {
grid-template-columns: 1fr;
gap: 40px
}
}

@media (max-width: 768px) {
.yogahome .herozone {
min-height: 440px;
padding: 40px 16px 80px
}

.yogahome .herocontent h1 {
font-size: 37px
}

.yogahome .herocontent p {
font-size: 15px
}

.yogahome .readyframe,
.yogahome .teamframe,
.yogahome .credframe,
.yogahome .situframe {
padding: 40px 16px
}

.yogahome .readyinside {
grid-template-columns: 1fr;
gap: 40px
}

.yogahome .readyleft h2,
.yogahome .teamtop h2,
.yogahome .credheader h2,
.yogahome .situright h2 {
font-size: 27px;
margin-bottom: 24px
}

.yogahome .readyright {
gap: 16px
}

.yogahome .readyitem {
padding: 16px
}

.yogahome .readyitem h3,
.yogahome .memberinfo h4,
.yogahome .credcard h5,
.yogahome .situitem h4 {
font-size: 15px
}

.yogahome .teamtop {
margin-bottom: 40px
}

.yogahome .teamgrid {
grid-template-columns: 1fr;
gap: 24px
}

.yogahome .teammember img {
height: 340px
}

.yogahome .memberinfo {
padding: 16px
}

.yogahome .credheader {
margin-bottom: 40px
}

.yogahome .credgrid {
grid-template-columns: 1fr;
gap: 24px
}

.yogahome .credcard {
padding: 24px 16px
}

.yogahome .situleft img {
height: 380px;
border-radius: 20px
}

.yogahome .situlist {
gap: 16px
}

.yogahome .situitem {
padding-left: 16px
}

.yogahome .situitem:hover {
padding-left: 20px
}
}

@media (max-width: 390px) {
.yogahome .herozone {
min-height: 380px;
padding: 24px 16px 40px
}

.yogahome .herocontent h1 {
font-size: 27px
}

.yogahome .readyframe,
.yogahome .teamframe,
.yogahome .credframe,
.yogahome .situframe {
padding: 24px 16px
}

.yogahome .readyleft h2::after,
.yogahome .credheader h2::after {
width: 6px;
height: 6px;
right: -12px
}

.yogahome .teammember img {
height: 280px
}

.yogahome .situleft img {
height: 320px
}
}

.contactpg {
background: #F9FCF8;
color: #1a1514;
overflow-x: clip
}

.contactpg .herozone {
position: relative;
padding: 80px 24px;
background: linear-gradient(270deg, #B9C9A6 0%, #F9FCF8 100%);
overflow: hidden
}

.contactpg .herozone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 80px;
background: #4F843F
}

.contactpg .herozone::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 80px;
height: 1px;
background: #4F843F
}

.contactpg .herocircle {
position: absolute;
border-radius: 50%;
border: 1px solid #4f843f14;
pointer-events: none
}

.contactpg .herocircle.one {
width: 240px;
height: 240px;
top: -40px;
right: 160px
}

.contactpg .herocircle.two {
width: 180px;
height: 180px;
bottom: 40px;
left: 80px
}

.contactpg .herocircle.three {
width: 320px;
height: 320px;
top: 50%;
right: -80px;
transform: translateY(-50%)
}

.contactpg .heroinner {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 1
}

.contactpg .numaccent {
font-size: 68px;
line-height: 1.2;
color: #4F843F;
font-weight: 700;
margin: 0 0 16px;
opacity: 0;
transform: scale(0.8);
animation: scaleappear .6s cubic-bezier(0.34, 1.56, 0.64, 1) .2s forwards
}

@keyframes scaleappear {
to {
opacity: 1;
transform: scale(1)
}
}

.contactpg .maintitle {
font-size: 51px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700;
position: relative;
display: inline-block;
opacity: 0;
transform: scale(0.8);
animation: scaleappear .6s cubic-bezier(0.34, 1.56, 0.64, 1) .4s forwards
}

.contactpg .maintitle::after {
content: '';
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 50%
}

.contactpg .herodesc {
font-size: 27px;
line-height: 1.8;
max-width: 740px;
margin: 0;
opacity: 0;
transform: scale(0.8);
animation: scaleappear .6s cubic-bezier(0.34, 1.56, 0.64, 1) .6s forwards
}

.contactpg .formzone {
padding: 80px 24px;
background: #fff;
position: relative
}

.contactpg .forminner {
max-width: 1170px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px
}

.contactpg .leftside {
display: flex;
flex-direction: column;
gap: 40px;
opacity: 0;
transform: scale(0.8);
animation: scaleappear .6s cubic-bezier(0.34, 1.56, 0.64, 1) .8s forwards
}

.contactpg .rightside {
opacity: 0;
transform: scale(0.8);
animation: scaleappear .6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards
}

.contactpg .infocard {
background: linear-gradient(270deg, #F9FCF8 0%, #fff 100%);
padding: 40px;
border-radius: 20px;
box-shadow: 0 7px 18px 1px #4f843f1a;
transition: box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1), transform .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactpg .infocard:hover {
box-shadow: 0 12px 36px 1px #4f843f1c;
transform: translateY(-4px)
}

.contactpg .cardtitle {
font-size: 27px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700;
position: relative;
display: inline-block
}

.contactpg .cardtitle::after {
content: '';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #4F843F;
border-radius: 50%
}

.contactpg .infoitem {
margin: 0 0 16px;
font-size: 15px;
line-height: 1.8
}

.contactpg .infoitem:last-child {
margin-bottom: 0
}

.contactpg .infolabel {
font-weight: 700;
color: #4F843F;
display: block;
margin: 0 0 4px
}

.contactpg .infolink {
color: #1a1514;
text-decoration: none;
transition: color .4s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactpg .infolink:hover {
color: #4F843F
}

.contactpg .heatmapcard {
background: #F9FCF8;
padding: 40px;
border-radius: 20px;
box-shadow: 0 2px 4px 1px #4f843f0f
}

.contactpg .heatmaptitle {
font-size: 27px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700;
position: relative;
display: inline-block
}

.contactpg .heatmaptitle::after {
content: '';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #4F843F;
border-radius: 50%
}

.contactpg .heatgrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px
}

.contactpg .heatcell {
aspect-ratio: 1;
border-radius: 6px;
transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactpg .heatcell:hover {
transform: scale(1.15)
}

.contactpg .heatcell.intensity1 {
background: #4f843f26
}

.contactpg .heatcell.intensity2 {
background: #4f843f59
}

.contactpg .heatcell.intensity3 {
background: #4f843f8c
}

.contactpg .heatcell.intensity4 {
background: #4f843fbf
}

.contactpg .heatcell.intensity5 {
background: #4f843ff2
}

.contactpg .heatlabels {
display: flex;
justify-content: space-between;
margin-top: 16px;
font-size: 15px;
line-height: 1.8;
color: #4F843F
}

.contactpg .formwrapper {
background: linear-gradient(270deg, #B9C9A6 0%, #F9FCF8 100%);
padding: 40px;
border-radius: 20px;
box-shadow: 0 7px 18px 1px #4f843f1a
}

.contactpg .formtitle {
font-size: 37px;
line-height: 1.2;
margin: 0 0 40px;
font-weight: 700;
position: relative;
display: inline-block
}

.contactpg .formtitle::after {
content: '';
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 50%
}

.contactpg .contactform {
display: flex;
flex-direction: column;
gap: 24px
}

.contactpg .formrow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px
}

.contactpg .formfield {
display: flex;
flex-direction: column;
gap: 8px
}

.contactpg .formlabel {
font-size: 15px;
line-height: 1.2;
font-weight: 700;
color: #1a1514
}

.contactpg .forminput {
padding: 16px;
border: 2px solid transparent;
border-radius: 12px;
background: #fff;
font-size: 15px;
line-height: 1.8;
color: #1a1514;
transition: border-color .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactpg .forminput::placeholder {
color: #8a8a8a;
font-size: 14px
}

.contactpg .forminput:focus {
outline: none;
border-color: #4F843F;
box-shadow: 0 2px 4px 1px #4f843f0f
}

.contactpg .forminput:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 2px !important
}

.contactpg .radiogroup {
display: flex;
flex-direction: column;
gap: 16px
}

.contactpg .radiolabel {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 16px;
background: #fff;
border-radius: 12px;
border: 2px solid transparent;
transition: border-color .4s cubic-bezier(0.22, 1, 0.36, 1), background .4s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactpg .radiolabel:hover {
border-color: #B9C9A6
}

.contactpg .radioinput {
width: 20px;
height: 20px;
border: 2px solid #4F843F;
border-radius: 50%;
appearance: none;
cursor: pointer;
position: relative;
transition: background .3s cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0
}

.contactpg .radioinput:checked {
background: #4F843F
}

.contactpg .radioinput:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%
}

.contactpg .radioinput:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 2px !important
}

.contactpg .radiolabel:has(.radioinput:checked) {
background: #4f843f14;
border-color: #4F843F
}

.contactpg .radiotext {
font-size: 15px;
line-height: 1.8;
color: #1a1514
}

.contactpg .privacyfield {
display: flex;
align-items: flex-start;
gap: 12px
}

.contactpg .checkboxinput {
width: 20px;
height: 20px;
border: 2px solid #4F843F;
border-radius: 6px;
appearance: none;
cursor: pointer;
position: relative;
transition: background .3s cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
margin-top: 4px
}

.contactpg .checkboxinput:checked {
background: #4F843F
}

.contactpg .checkboxinput:checked::after {
content: '';
position: absolute;
top: 2px;
left: 6px;
width: 4px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}

.contactpg .checkboxinput:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 2px !important
}

.contactpg .privacytext {
font-size: 15px;
line-height: 1.8;
color: #1a1514
}

.contactpg .privacylink {
color: #4F843F;
text-decoration: underline;
transition: color .4s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactpg .privacylink:hover {
color: #3a6330
}

.contactpg .submitbtn {
padding: 16px 40px;
background: #4F843F;
color: #fff;
border: none;
border-radius: 12px;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
cursor: pointer;
transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 2px 4px 1px #4f843f0f;
position: relative;
overflow: hidden
}

.contactpg .submitbtn:hover {
background: #3a6330;
transform: translateY(-2px);
box-shadow: 0 7px 18px 1px #4f843f1a
}

.contactpg .submitbtn:active {
transform: translateY(0)
}

.contactpg .submitbtn:focus-visible {
outline: 3px solid #4F843F !important;
outline-offset: 2px !important
}

.contactpg .separator {
width: 16px;
height: 16px;
background: #4F843F;
transform: rotate(45deg);
margin: 0 auto;
opacity: .3
}

@media (max-width: 1280px) {
.contactpg .forminner {
gap: 40px
}

.contactpg .herocircle.one {
right: 80px
}
}

@media (max-width: 768px) {
.contactpg .herozone {
padding: 40px 16px
}

.contactpg .numaccent {
font-size: 51px
}

.contactpg .maintitle {
font-size: 37px
}

.contactpg .herodesc {
font-size: 15px
}

.contactpg .formzone {
padding: 40px 16px
}

.contactpg .forminner {
grid-template-columns: 1fr;
gap: 40px
}

.contactpg .formrow {
grid-template-columns: 1fr;
gap: 16px
}

.contactpg .infocard,
.contactpg .heatmapcard,
.contactpg .formwrapper {
padding: 24px
}

.contactpg .cardtitle,
.contactpg .heatmaptitle {
font-size: 15px
}

.contactpg .formtitle {
font-size: 27px
}

.contactpg .herocircle.one,
.contactpg .herocircle.two,
.contactpg .herocircle.three {
display: none
}

.contactpg .heatgrid {
grid-template-columns: repeat(5, 1fr)
}
}

@media (max-width: 390px) {
.contactpg .herozone {
padding: 24px 16px
}

.contactpg .formzone {
padding: 24px 16px
}

.contactpg .numaccent {
font-size: 37px
}

.contactpg .maintitle {
font-size: 27px
}

.contactpg .formtitle {
font-size: 15px
}

.contactpg .heatgrid {
grid-template-columns: repeat(4, 1fr)
}
}

.successpage {
max-width: 1170px;
margin: 0 auto;
padding: 80px 16px;
background: #FFF
}

.successpage .confirmwrap {
text-align: center;
padding: 80px 24px;
background: linear-gradient(to left, #4F843F, #B9C9A6);
border-radius: 20px;
box-shadow: 0 12px 36px 1px #4f843f1c;
margin: 0 0 40px
}

.successpage .iconcheck {
width: 84px;
height: 84px;
margin: 0 auto 24px;
background: #F9FCF8;
border-radius: 48px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: checkappear .6s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

@keyframes checkappear {
0% {
transform: scale(0.4);
opacity: 0
}

50% {
transform: scale(1.1)
}

100% {
transform: scale(1);
opacity: 1
}
}

.successpage .iconcheck::before {
content: '';
width: 28px;
height: 48px;
border-right: 5px solid #4F843F;
border-bottom: 5px solid #4F843F;
transform: rotate(45deg) translateY(-6px);
animation: checkdraw .5s cubic-bezier(0.22, 1, 0.36, 1) .3s forwards;
opacity: 0
}

@keyframes checkdraw {
0% {
opacity: 0;
transform: rotate(45deg) translateY(-6px) scale(0.6)
}

100% {
opacity: 1;
transform: rotate(45deg) translateY(-6px) scale(1)
}
}

.successpage .confirmtitle {
font-size: 51px;
line-height: 1.2;
color: #FFF;
margin: 0 0 16px;
font-weight: 600
}

.successpage .confirmmsg {
font-size: 27px;
line-height: 1.8;
color: #F9FCF8;
margin: 0;
max-width: 720px;
margin-left: auto;
margin-right: auto
}

.successpage .detailsbox {
background: #F9FCF8;
padding: 40px 24px;
border-radius: 12px;
margin: 0 0 40px;
border: 2px solid #B9C9A6
}

.successpage .detailstitle {
font-size: 37px;
line-height: 1.2;
color: #1A1A1A;
margin: 0 0 24px;
font-weight: 600
}

.successpage .detailstitle::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #4F843F;
border-radius: 48px;
margin-left: 8px;
vertical-align: middle
}

.successpage .detailstext {
font-size: 15px;
line-height: 1.8;
color: #2D2D2D;
margin: 0 0 16px
}

.successpage .detailstext:last-of-type {
margin: 0
}

.successpage .detailstext::first-letter {
font-size: 51px;
line-height: 1;
float: left;
margin: 4px 8px 0 0;
color: #4F843F;
font-weight: 600
}

.successpage .nextgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin: 0 0 40px
}

.successpage .nextcard {
background: #FFF;
padding: 24px;
border-radius: 12px;
border: 1px solid #B9C9A6;
transition: box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1), transform .4s ease-in-out
}

.successpage .nextcard:hover {
box-shadow: 0 7px 18px 1px #4f843f1a;
transform: translateY(-4px)
}

.successpage .cardtitle {
font-size: 27px;
line-height: 1.2;
color: #1A1A1A;
margin: 0 0 16px;
font-weight: 600
}

.successpage .cardtitle::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: #4F843F;
border-radius: 36px;
margin-left: 8px;
vertical-align: middle
}

.successpage .cardtext {
font-size: 15px;
line-height: 1.8;
color: #2D2D2D;
margin: 0 0 24px
}

.successpage .cardlink {
display: inline-block;
padding: 16px 40px;
background: #4F843F;
color: #FFF;
text-decoration: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
transition: background .6s cubic-bezier(0.22, 1, 0.36, 1), transform .4s ease-in-out;
box-shadow: 0 2px 4px 1px #4f843f0f
}

.successpage .cardlink:hover {
background: #3D6831;
transform: translateY(-2px)
}

.successpage .contactinfo {
text-align: center;
padding: 40px 24px;
background: linear-gradient(to left, #B9C9A6, #F9FCF8);
border-radius: 20px
}

.successpage .contacttitle {
font-size: 37px;
line-height: 1.2;
color: #1A1A1A;
margin: 0 0 24px;
font-weight: 600
}

.successpage .contactlist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 520px;
margin-left: auto;
margin-right: auto
}

.successpage .contactitem {
font-size: 15px;
line-height: 1.8;
color: #2D2D2D
}

.successpage .contactitem a {
color: #4F843F;
text-decoration: none;
transition: color .5s cubic-bezier(0.22, 1, 0.36, 1);
font-weight: 600
}

.successpage .contactitem a:hover {
color: #3D6831
}

@media (max-width: 768px) {
.successpage {
padding: 40px 16px
}

.successpage .confirmwrap {
padding: 40px 16px;
margin: 0 0 24px
}

.successpage .confirmtitle {
font-size: 37px
}

.successpage .confirmmsg {
font-size: 15px
}

.successpage .detailsbox {
padding: 24px 16px;
margin: 0 0 24px
}

.successpage .detailstitle {
font-size: 27px
}

.successpage .nextgrid {
grid-template-columns: 1fr;
gap: 16px;
margin: 0 0 24px
}

.successpage .contactinfo {
padding: 24px 16px
}

.successpage .contacttitle {
font-size: 27px
}
}

@media (max-width: 390px) {
.successpage .confirmtitle {
font-size: 27px
}

.successpage .iconcheck {
width: 68px;
height: 68px
}

.successpage .iconcheck::before {
width: 22px;
height: 38px
}
}