@import "https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;1,400;0,700;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400;0,700;1,700&display=swap";

html,
body {
    margin: 0;
    padding: 0
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: 'Rubik', sans-serif;
    background: linear-gradient(165deg, #fff 0%, #e1ebe859 100%);
    color: #1a2e1f;
    font-size: 18px;
    line-height: 1.6
}

.hd_shell {
    background: linear-gradient(135deg, #3b8d4b08 0%, #8ebe9b14 100%);
    border-bottom: 1px solid #3b8d4b1f;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    position: relative;
    z-index: 100
}

.hd_inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 48px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center
}

.brand_block {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.logo_hold {
    background: linear-gradient(145deg, #2a6a3a 0%, #3B8D4B 100%);
    border: 2px solid #8ebe9b4d;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f 1px 12px 48px 0 #3b8d4b1c;
    border-radius: 20px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1), transform .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.logo_hold:hover {
    box-shadow: 1px 5px 28px 0 #3b8d4b17 1px 12px 48px 0 #3b8d4b1c;
    transform: translateY(-1px)
}

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

.tagline {
    font-size: 16px;
    line-height: 1.4;
    color: #2a6a3a;
    font-weight: 400;
    max-width: 280px;
    letter-spacing: 0
}

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

.nav_link {
    font-size: 18px;
    line-height: 1.4;
    color: #2a6a3a;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 20px;
    background: #fff9;
    border: 1px solid #3b8d4b26;
    transition: background .16s ease-out, border-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out;
    font-weight: 400;
    display: inline-block;
    position: relative;
    overflow: hidden
}

.nav_link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3b8d4b14 0%, #8ebe9b1f 100%);
    transition: left .22s cubic-bezier(0.4, 0, 0.6, 1);
    z-index: -1
}

.nav_link:hover::before {
    left: 0
}

.nav_link:hover {
    background: #ffffffe6;
    border-color: #3b8d4b4d;
    color: #3B8D4B;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f
}

.nav_link:focus {
    outline: 2px solid #3b8d4b80;
    outline-offset: 3px;
    animation: focus_fade .18s ease-out
}

@keyframes focus_fade {
    from {
        outline-color: #3b8d4b00
    }

    to {
        outline-color: #3b8d4b80
    }
}

.nav_link:active {
    transform: scale(0.98)
}

@media (max-width: 992px) {
    .hd_inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px
    }

    .brand_block {
        align-items: center
    }

    .nav_primary {
        justify-content: center
    }

    .tagline {
        text-align: center
    }
}

@media (max-width: 576px) {
    .hd_inner {
        padding: 24px 12px
    }

    .nav_primary {
        flex-direction: column;
        width: 100%;
        gap: 12px
    }

    .nav_link {
    
        text-align: center
    }

    .logo_hold {
        width: 70px;
        height: 70px
    }
}

.ftr_shell {
    background: linear-gradient(165deg, #3b8d4b0a 0%, #e1ebe899 100%);
    border-top: 2px solid #3b8d4b26;
    margin-top: 48px;
    position: relative
}

.ftr_inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 48px 24px
}

.ftr_grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 48px
}

.ftr_col_left {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.ftr_col_center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    border-top: 3px solid #3b8d4b33
}

.ftr_logo_hold {
    background: linear-gradient(145deg, #fff 0%, #e1ebe8cc 100%);
    border: 2px solid #3b8d4b33;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f inset 1px 1px 2px #fff9;
    border-radius: 20px;
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px
}

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

.ftr_brand_text {
    font-size: 16px;
    line-height: 1.4;
    color: #2a6a3a;
    text-align: center;
    max-width: 240px
}

.ftr_col_right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end
}

.ftr_contact_item {
    font-size: 16px;
    line-height: 1.4;
    color: #2a6a3a;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #ffffff80;
    border: 1px solid #3b8d4b1f;
    border-radius: 34px;
    transition: background .14s ease-out, border-color .14s ease-out
}

.ftr_contact_item:hover {
    background: #fffc;
    border-color: #3b8d4b40
}

.ftr_icon {
    width: 18px;
    height: 18px;
    fill: #3B8D4B
}

.ftr_contact_link {
    color: inherit;
    text-decoration: none;
    transition: color .14s ease-out
}

.ftr_contact_link:hover {
    color: #3B8D4B
}

.ftr_contact_link:focus {
    outline: 2px solid #3b8d4b80;
    outline-offset: 2px;
    border-radius: 1px;
    animation: focus_fade .18s ease-out
}

.ftr_nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid #3b8d4b1f;
    border-bottom: 1px solid #3b8d4b1f
}

.ftr_nav_link {
    font-size: 16px;
    line-height: 1.4;
    color: #2a6a3a;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 1px;
    transition: color .14s ease-out;
    position: relative
}

.ftr_nav_link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, #3B8D4B 0%, #8EBE9B 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.ftr_nav_link:hover::after {
    transform: scaleX(1)
}

.ftr_nav_link:hover {
    color: #3B8D4B
}

.ftr_nav_link:focus {
    outline: 2px solid #3b8d4b80;
    outline-offset: 3px;
    animation: focus_fade .18s ease-out
}

.ftr_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    gap: 24px;
    flex-wrap: wrap
}

.ftr_copy {
    font-size: 16px;
    line-height: 1.4;
    color: #5a7a62
}

.ftr_address {
    font-size: 16px;
    line-height: 1.4;
    color: #5a7a62;
    font-style: normal;
    text-align: right;
    max-width: 420px
}

@media (max-width: 992px) {
    .ftr_grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .ftr_col_left,
    .ftr_col_right {
        align-items: center
    }

    .ftr_col_center {
        border-top: none;
        padding-top: 0
    }

    .ftr_contact_item {
    
        justify-content: center
    }

    .ftr_bottom {
        flex-direction: column;
        text-align: center
    }

    .ftr_address {
        text-align: center
    }
}

@media (max-width: 576px) {
    .ftr_inner {
        padding: 24px 12px 12px
    }

    .ftr_nav {
        flex-direction: column;
        gap: 12px;
        align-items: center
    }
}

.cookie_popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #fffffffa 0%, #e1ebe8f5 100%);
    border-top: 2px solid #3b8d4b33;
    box-shadow: 1px 12px 48px 0 #3b8d4b1c;
    padding: 24px 48px;
    z-index: 1200;
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(0.4, 0, 0.6, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.cookie_popup.show_cookie {
    transform: translateY(0)
}

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

.cookie_text {
    flex: 1;
    min-width: 280px
}

.cookie_intro {
    font-size: 18px;
    line-height: 1.4;
    color: #1a2e1f;
    margin-bottom: 6px
}

.cookie_list {
    font-size: 16px;
    line-height: 1.4;
    color: #2a6a3a;
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.cookie_list li {
    position: relative;
    padding-left: 24px
}

.cookie_list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #3B8D4B;
    border-radius: 34px
}

.cookie_policy_link {
    color: #3B8D4B;
    text-decoration: underline;
    text-decoration-color: #3b8d4b4d;
    transition: text-decoration-color .14s ease-out
}

.cookie_policy_link:hover {
    text-decoration-color: #3b8d4bff
}

.cookie_policy_link:focus {
    outline: 2px solid #3b8d4b80;
    outline-offset: 2px;
    border-radius: 1px;
    animation: focus_fade .18s ease-out
}

.cookie_actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.cookie_btn {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    padding: 12px 48px;
    border: 2px solid transparent;
    border-radius: 34px;
    cursor: pointer;
    transition: background .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out, transform .16s ease-out;
    position: relative;
    overflow: hidden;
    min-width: 160px;
    font-weight: 700
}

.cookie_accept {
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    color: #fff;
    border-color: #3b8d4b4d
}

.cookie_accept::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a6a3a 0%, #3B8D4B 100%);
    transition: left .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.cookie_accept:hover::before {
    left: 0
}

.cookie_accept:hover {
    box-shadow: 1px 5px 28px 0 #3b8d4b17
}

.cookie_btn span {
    position: relative;
    z-index: 1
}

.cookie_decline {
    background: #fff9;
    color: #2a6a3a;
    border: none;
    padding: 12px 24px;
    text-decoration: underline;
    text-decoration-color: #2a6a3a4d;
    min-width: auto;
    font-weight: 400
}

.cookie_decline:hover {
    background: #ffffffe6;
    text-decoration-color: #2a6a3aff
}

.cookie_btn:focus {
    outline: 2px solid #3b8d4b80;
    outline-offset: 3px;
    animation: focus_fade .18s ease-out
}

.cookie_btn:active {
    transform: scale(0.98)
}

.settings_icon {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    border: 2px solid #fffc;
    border-radius: 34px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1100;
    transition: transform .16s ease-out, box-shadow .16s ease-out
}

.settings_icon.show_settings {
    display: flex
}

.settings_icon:hover {
    transform: scale(1.08);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.settings_icon:focus {
    outline: 2px solid #3b8d4b80;
    outline-offset: 3px;
    animation: focus_fade .18s ease-out
}

.settings_icon svg {
    width: 28px;
    height: 28px;
    fill: #fff
}

@media (max-width: 992px) {
    .cookie_content {
        flex-direction: column;
        align-items: stretch
    }

    .cookie_actions {
        justify-content: center
    }
}

@media (max-width: 576px) {
    .cookie_popup {
        padding: 24px 12px
    }

    .cookie_actions {
        flex-direction: column;
        width: 100%
    }

    .cookie_btn {
        width: 100%
    }

    .cookie_list {
        flex-direction: column;
        gap: 6px
    }
}

.legal-info {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
    background: #fff
}

.legal-info h1 {
    font-size: 56px;
    line-height: 1.15;
    color: #3B8D4B;
    margin: 0 0 48px
}

.legal-info h2 {
    font-size: 40px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 48px 0 24px
}

.legal-info h3 {
    font-size: 28px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 48px 0 24px
}

.legal-info h4 {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 24px 0 12px
}

.legal-info h5 {
    font-size: 18px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 24px 0 12px
}

.legal-info h6 {
    font-size: 16px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 24px 0 12px
}

.legal-info p {
    font-size: 18px;
    line-height: 1.6;
    color: #2c2c2c;
    margin: 0 0 24px
}

.legal-info strong,
.legal-info b {
    color: #3B8D4B;
    font-weight: 600
}

.legal-info em,
.legal-info i {
    font-style: italic;
    color: #4a4a4a
}

.legal-info a {
    color: #3B8D4B;
    text-decoration: underline;
    transition: color .18s ease-out
}

.legal-info a:hover {
    color: #2d6a3a
}

.legal-info table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    background: #fff;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    border-radius: 20px;
    overflow: hidden
}

.legal-info thead {
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%)
}

.legal-info thead tr {
    background: transparent
}

.legal-info th {
    padding: 24px;
    text-align: left;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
    font-weight: 600
}

.legal-info tbody tr {
    border-bottom: 1px solid #E1EBE8;
    transition: background-color .16s cubic-bezier(0.4, 0, 0.6, 1)
}

.legal-info tbody tr:last-child {
    border-bottom: none
}

.legal-info tbody tr:hover {
    background: #e1ebe84d
}

.legal-info td {
    padding: 24px;
    font-size: 18px;
    line-height: 1.6;
    color: #2c2c2c
}

.legal-info div {
    margin: 24px 0
}

@media (max-width: 992px) {
    .legal-info {
        padding: 48px 12px
    }

    .legal-info h1 {
        font-size: 40px;
        margin: 0 0 24px
    }

    .legal-info h2 {
        font-size: 28px;
        margin: 24px 0 12px
    }

    .legal-info h3 {
        font-size: 22px;
        margin: 24px 0 12px
    }

    .legal-info h4 {
        font-size: 18px
    }

    .legal-info table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 576px) {
    .legal-info h1 {
        font-size: 28px
    }

    .legal-info h2 {
        font-size: 22px
    }

    .legal-info h3 {
        font-size: 18px
    }

    .legal-info p,
    .legal-info td,
    .legal-info th {
        font-size: 16px
    }

    .legal-info th,
    .legal-info td {
        padding: 12px
    }
}

.prm {
    max-width: 1100px;
    margin: 0 auto
}

.prm .ttl_wrp {
    position: relative;
    padding: 48px 24px 96px;
    overflow: visible;
    background: linear-gradient(172deg, #3B8D4B 0%, #8EBE9B 48%, #e1ebe800 100%)
}

.prm .ttl_img_ctr {
    position: relative;
    margin: 0 0 24px;
    border-radius: 20px;
    overflow: hidden;
    height: 420px
}

.prm .ttl_img_ctr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.72);
    transition: filter .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.prm .ttl_img_ctr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(180deg, #3b8d4b7a 0%, transparent 100%);
    z-index: 1;
    pointer-events: none
}

.prm .ttl_img_ctr:hover img {
    filter: brightness(0.88)
}

.prm .ttl_shp_one {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 34px;
    background: #e1ebe83d;
    top: 120px;
    right: 48px;
    transform: rotate(12deg);
    pointer-events: none
}

.prm .ttl_shp_two {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 34px;
    background: #8ebe9b52;
    bottom: 60px;
    left: 24px;
    transform: rotate(-8deg);
    pointer-events: none
}

.prm .ttl_txt {
    position: relative;
    z-index: 2
}

.prm .ttl_h {
    font-size: 56px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 12px
}

.prm .ttl_desc {
    font-size: 18px;
    line-height: 1.6;
    color: #fffffff0;
    max-width: 680px
}

.prm .rl_ppl {
    padding: 48px 24px;
    background: #fff
}

.prm .rl_ppl_h {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 48px;
    background: linear-gradient(124deg, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.prm .rl_ppl_grd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px
}

.prm .rl_crd {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    transition: transform .16s ease-out, box-shadow .16s ease-out;
    animation: crd_flp .42s cubic-bezier(0.4, 0, 0.6, 1) backwards
}

.prm .rl_crd:nth-child(1) {
    animation-delay: .08s
}

.prm .rl_crd:nth-child(2) {
    animation-delay: .16s
}

.prm .rl_crd:nth-child(3) {
    animation-delay: .24s
}

@keyframes crd_flp {
    0% {
        transform: rotateY(90deg);
        opacity: 0
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1
    }
}

.prm .rl_crd:hover {
    transform: translateY(-6px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.prm .rl_nm {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 6px
}

.prm .rl_bfr {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #E1EBE8
}

.prm .rl_aftr {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.prm .rpt_blk {
    padding: 48px 24px;
    background: radial-gradient(ellipse 80% 100% at 24% 50%, #8ebe9b24 0%, #e1ebe80f 100%);
    position: relative
}

.prm .rpt_anch {
    position: absolute;
    top: 48px;
    right: 48px;
    font-size: 180px;
    line-height: 1;
    font-weight: 700;
    color: #3b8d4b0f;
    pointer-events: none;
    user-select: none
}

.prm .rpt_h {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 24px;
    color: #2a2a2a
}

.prm .rpt_cnt {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 820px
}

.prm .rpt_itm {
    display: flex;
    gap: 24px;
    align-items: flex-start
}

.prm .rpt_icn {
    width: 48px;
    height: 48px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.prm .rpt_icn svg {
    width: 24px;
    height: 24px;
    fill: #fff
}

.prm .rpt_txt {
    flex: 1
}

.prm .rpt_txt_h {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 6px
}

.prm .rpt_txt_p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.prm .aud_sct {
    padding: 48px 24px;
    background: #fff
}

.prm .aud_lyt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px
}

.prm .aud_lft {
    background: linear-gradient(156deg, #3b8d4b14 0%, #e1ebe83d 100%);
    padding: 24px;
    border-radius: 20px;
    border: 2px solid #E1EBE8
}

.prm .aud_rgt {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    border: 2px solid #E1EBE8
}

.prm .aud_h {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 12px;
    background: linear-gradient(124deg, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

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

.prm .aud_lst li {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 12px;
    padding: 0 0 0 24px;
    position: relative
}

.prm .aud_lst li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #3B8D4B
}

.prm .aud_rgt .aud_h {
    background: linear-gradient(124deg, #3B8D4B 0%, #8EBE9B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.prm .aud_rgt .aud_lst li::before {
    background: #8EBE9B
}

.prm .appr_zon {
    padding: 48px 24px;
    background: #fff;
    position: relative
}

.prm .appr_dvd_top {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 6px;
    display: flex;
    align-items: center;
    gap: 6px
}

.prm .appr_dvd_top::before,
.prm .appr_dvd_top::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E1EBE8
}

.prm .appr_dvd_top span {
    width: 48px;
    height: 6px;
    background: linear-gradient(90deg, #3B8D4B 0%, #8EBE9B 100%);
    border-radius: 1px
}

.prm .appr_h {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 6px;
    color: #2a2a2a
}

.prm .appr_acc {
    width: 100%;
    height: 2px;
    background: #3B8D4B;
    margin: 0 0 24px
}

.prm .appr_flx {
    display: flex;
    gap: 48px;
    align-items: flex-start
}

.prm .appr_img_wrp {
    flex-shrink: 0;
    width: 420px;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.prm .appr_img_wrp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #3b8d4b3d;
    z-index: 1;
    transition: opacity .2s cubic-bezier(0.4, 0, 0.6, 1);
    pointer-events: none
}

.prm .appr_img_wrp:hover::before {
    opacity: 0
}

.prm .appr_img_wrp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .22s ease-out
}

.prm .appr_img_wrp:hover img {
    transform: scale(1.06)
}

.prm .appr_txt {
    flex: 1
}

.prm .appr_txt p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 12px
}

.prm .appr_txt p:last-child {
    margin: 0
}

.prm .ofr_area {
    padding: 48px 24px;
    background: linear-gradient(8deg, #e1ebe852 0%, #8ebe9b1f 52%, #fff 100%);
    position: relative
}

.prm .ofr_msh {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, #3b8d4b0f 0%, transparent 40%), radial-gradient(circle at 80% 70%, #8ebe9b14 0%, transparent 50%), radial-gradient(circle at 50% 50%, #e1ebe81f 0%, transparent 60%);
    pointer-events: none
}

.prm .ofr_h {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 48px;
    color: #2a2a2a;
    position: relative;
    z-index: 1
}

.prm .ofr_grd {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1
}

.prm .ofr_crd {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    transition: box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1);
    display: flex;
    flex-direction: column
}

.prm .ofr_crd:hover {
    box-shadow: 1px 5px 28px 0 #3b8d4b17
}

.prm .ofr_crd_img {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden
}

.prm .ofr_crd_img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #8ebe9b2e;
    z-index: 1;
    transition: opacity .16s ease-out;
    pointer-events: none
}

.prm .ofr_crd:hover .ofr_crd_img::before {
    opacity: 0
}

.prm .ofr_crd_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.prm .ofr_crd_bdy {
    padding: 24px;
    flex: 1
}

.prm .ofr_crd_h {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 12px
}

.prm .ofr_crd_txt {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.prm .scl_zon {
    padding: 48px 24px;
    background: #fff
}

.prm .scl_cmp {
    background: linear-gradient(148deg, #3b8d4b0f 0%, #e1ebe82e 100%);
    border-radius: 20px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.prm .scl_h {
    font-size: 28px;
    line-height: 1.4;
    margin: 0;
    background: linear-gradient(124deg, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.prm .scl_stt_rw {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.prm .scl_stt_itm {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    position: relative;
    overflow: hidden
}

.prm .scl_stt_itm::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3B8D4B 0%, #8EBE9B 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .48s cubic-bezier(0.4, 0, 0.6, 1)
}

.prm .scl_stt_itm:hover::before {
    transform: scaleX(1)
}

.prm .scl_num {
    font-size: 56px;
    line-height: 1.15;
    color: #3B8D4B;
    margin: 0 0 6px;
    font-weight: 700
}

.prm .scl_lbl {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.prm .scl_dsc {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.prm .scl_vsl {
    width: 100%;
    height: 12px;
    background: #e1ebe87a;
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.prm .scl_vsl_fll {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #3B8D4B 0%, #8EBE9B 100%);
    border-radius: 20px;
    transition: width .8s cubic-bezier(0.4, 0, 0.6, 1)
}

@media (max-width: 992px) {
    .prm .ttl_wrp {
        padding: 24px 24px 48px
    }

    .prm .ttl_img_ctr {
        height: 320px
    }

    .prm .ttl_h {
        font-size: 40px
    }

    .prm .ttl_shp_one {
        width: 100px;
        height: 100px;
        right: 24px
    }

    .prm .ttl_shp_two {
        width: 70px;
        height: 70px
    }

    .prm .rl_ppl_h,
    .prm .rpt_h,
    .prm .appr_h,
    .prm .ofr_h {
        font-size: 28px
    }

    .prm .rl_ppl_grd {
        grid-template-columns: 1fr
    }

    .prm .rpt_anch {
        font-size: 120px;
        top: 24px;
        right: 24px
    }

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

    .prm .appr_flx {
        flex-direction: column;
        gap: 24px
    }

    .prm .appr_img_wrp {
        width: 100%;
        height: 240px
    }

    .prm .ofr_grd {
        grid-template-columns: 1fr
    }

    .prm .scl_stt_rw {
        grid-template-columns: 1fr
    }

    .prm .scl_cmp {
        padding: 24px
    }

    .prm .scl_num {
        font-size: 40px
    }
}

@media (max-width: 576px) {
    .prm .ttl_h {
        font-size: 28px
    }

    .prm .ttl_desc {
        font-size: 16px
    }

    .prm .ttl_img_ctr {
        height: 240px
    }

    .prm .rl_ppl_h,
    .prm .rpt_h,
    .prm .appr_h,
    .prm .ofr_h {
        font-size: 22px
    }

    .prm .rpt_anch {
        font-size: 80px
    }

    .prm .aud_h,
    .prm .scl_h {
        font-size: 22px
    }

    .prm .appr_img_wrp {
        height: 200px
    }

    .prm .scl_num {
        font-size: 28px
    }
}

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

.cch_strc .ttl_zn {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
    background: linear-gradient(to bottom, #e1ebe84d, #fff0)
}

.cch_strc .ttl_zn::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid #3b8d4b26;
    border-radius: 0;
    pointer-events: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    box-shadow: inset 0 0 0 1px #3b8d4b14
}

.cch_strc .ttl_zn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 47px, #3b8d4b08 47px, #3b8d4b08 48px), repeating-linear-gradient(90deg, transparent, transparent 47px, #3b8d4b08 47px, #3b8d4b08 48px);
    pointer-events: none;
    z-index: 1
}

.cch_strc .txt_lft {
    position: relative;
    z-index: 2;
    padding: 24px 0
}

.cch_strc .mn_hdng {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 24px;
    color: #2d2d2d
}

.cch_strc .mn_hdng .clr_pnct {
    color: #3B8D4B;
    display: inline-block;
    transform: scale(1.3);
    margin-left: 6px
}

.cch_strc .img_rght {
    position: relative;
    z-index: 2;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.cch_strc .img_rght img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(0px);
    transition: filter .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.cch_strc .img_rght::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 100% at 20% 50%, #3b8d4b26, transparent 70%);
    pointer-events: none;
    z-index: 1
}

.cch_strc .img_rght::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px 20px #fff6;
    pointer-events: none;
    z-index: 2
}

.cch_strc .img_rght:hover img {
    filter: blur(2px)
}

.cch_strc .vls_sctn {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 24px;
    position: relative
}

.cch_strc .vls_sctn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3b8d4b4d, transparent)
}

.cch_strc .vls_sctn::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8ebe9b66, transparent)
}

.cch_strc .vls_hdr {
    text-align: center;
    margin-bottom: 48px
}

.cch_strc .vls_hdr h2 {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 12px;
    background: linear-gradient(135deg, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600
}

.cch_strc .vls_hdr p {
    font-size: 18px;
    line-height: 1.6;
    color: #4a4a4a;
    max-width: 680px;
    margin: 0 auto
}

.cch_strc .vls_grd {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.cch_strc .vl_crd {
    background: linear-gradient(135deg, #e1ebe866, #fffc);
    padding: 24px;
    border-radius: 20px;
    border: 1px solid #8ebe9b4d;
    position: relative;
    overflow: hidden;
    transition: transform .16s ease-out, box-shadow .16s ease-out;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f
}

.cch_strc .vl_crd::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3B8D4B, #8EBE9B);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.cch_strc .vl_crd:hover {
    transform: translateY(-6px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.cch_strc .vl_crd:hover::before {
    transform: scaleX(1)
}

.cch_strc .vl_icn {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 140% 120% at 30% 40%, #3b8d4b26, #8ebe9b1a);
    border-radius: 34px;
    position: relative
}

.cch_strc .vl_icn svg {
    width: 28px;
    height: 28px;
    fill: #3B8D4B
}

.cch_strc .vl_crd h3 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: #2d2d2d;
    font-weight: 600
}

.cch_strc .vl_crd p {
    font-size: 16px;
    line-height: 1.6;
    color: #5a5a5a;
    margin: 0
}

.cch_strc .tm_sctn {
    background-image: url(./template_images/media-7.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 120px 24px
}

.cch_strc .tm_sctn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3b8d4be0, #8ebe9bd9);
    z-index: 1
}

.cch_strc .tm_sctn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff6, transparent);
    z-index: 2
}

.cch_strc .tm_cntnr {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.cch_strc .tm_hdr {
    text-align: center;
    margin-bottom: 48px
}

.cch_strc .tm_hdr h2 {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: #fff;
    font-weight: 600
}

.cch_strc .tm_hdr p {
    font-size: 18px;
    line-height: 1.6;
    color: #fffffff2;
    max-width: 640px;
    margin: 0 auto
}

.cch_strc .tm_grd {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.cch_strc .tm_mbr {
    background: #ffffff26;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid #ffffff40;
    position: relative;
    overflow: hidden;
    transition: background .2s ease-out, transform .2s ease-out
}

.cch_strc .tm_mbr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, transparent 100%);
    opacity: 0;
    transition: opacity .2s ease-out;
    pointer-events: none;
    z-index: 1
}

.cch_strc .tm_mbr:hover {
    background: #ffffff40;
    transform: translateY(-4px)
}

.cch_strc .tm_mbr:hover::before {
    background: radial-gradient(circle at 50% 50%, #ffffff26, transparent 60%);
    opacity: 1
}

.cch_strc .tm_mbr_cnt {
    position: relative;
    z-index: 2
}

.cch_strc .tm_mbr h3 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 6px;
    color: #fff;
    font-weight: 600
}

.cch_strc .tm_rl {
    font-size: 16px;
    line-height: 1.6;
    color: #ffffffd9;
    font-style: italic;
    margin: 0 0 12px
}

.cch_strc .tm_mbr p {
    font-size: 16px;
    line-height: 1.6;
    color: #ffffffe6;
    margin: 0
}

.cch_strc .stry_sctn {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 24px 96px 120px;
    position: relative
}

.cch_strc .stry_sctn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8ebe9b80, transparent)
}

.cch_strc .stry_sctn::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #3b8d4b4d, transparent)
}

.cch_strc .stry_lyt {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center
}

.cch_strc .stry_txt h2 {
    font-size: 40px;
    line-height: 1.4;
    margin: 0 0 24px;
    background: linear-gradient(135deg, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600
}

.cch_strc .stry_txt p {
    font-size: 18px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 24px
}

.cch_strc .stry_txt p:last-child {
    margin-bottom: 0
}

.cch_strc .stry_img {
    position: relative;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 5px 28px 0 #3b8d4b17
}

.cch_strc .stry_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.cch_strc .stry_img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3b8d4b33, transparent 60%);
    opacity: 1;
    transition: opacity .22s cubic-bezier(0.4, 0, 0.6, 1);
    z-index: 1;
    pointer-events: none
}

.cch_strc .stry_img::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: #ffffff4d;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width .4s cubic-bezier(0.4, 0, 0.6, 1), height .4s cubic-bezier(0.4, 0, 0.6, 1);
    z-index: 2;
    pointer-events: none;
    clip-path: circle(0% at center)
}

.cch_strc .stry_img:hover::before {
    opacity: 0
}

.cch_strc .stry_img:hover::after {
    width: 200%;
    height: 200%;
    clip-path: circle(50% at center)
}

.cch_strc .stry_img:hover img {
    transform: scale(1.05)
}

.cch_strc .yr_mrkr {
    font-size: 16px;
    line-height: 1.6;
    color: #8EBE9B;
    font-weight: 600;
    margin: 0 0 6px;
    font-style: italic
}

@media (max-width: 1200px) {
    .cch_strc .ttl_zn {
        grid-template-columns: 1fr;
        padding: 48px 24px
    }

    .cch_strc .img_rght {
        height: 360px
    }

    .cch_strc .mn_hdng {
        font-size: 40px
    }

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

    .cch_strc .tm_grd {
        grid-template-columns: 1fr
    }

    .cch_strc .stry_lyt {
        grid-template-columns: 1fr
    }

    .cch_strc .stry_sctn {
        padding: 72px 24px
    }
}

@media (max-width: 992px) {
    .cch_strc .vls_sctn {
        padding: 72px 24px
    }

    .cch_strc .vls_hdr h2 {
        font-size: 28px
    }

    .cch_strc .tm_sctn {
        padding: 72px 24px
    }

    .cch_strc .tm_hdr h2 {
        font-size: 28px
    }

    .cch_strc .stry_txt h2 {
        font-size: 28px
    }

    .cch_strc .stry_img {
        height: 340px
    }
}

@media (max-width: 576px) {
    .cch_strc .ttl_zn {
        padding: 24px 12px;
        gap: 24px
    }

    .cch_strc .mn_hdng {
        font-size: 28px;
        margin-bottom: 12px
    }

    .cch_strc .img_rght {
        height: 280px
    }

    .cch_strc .vls_sctn {
        padding: 48px 12px
    }

    .cch_strc .vls_hdr {
        margin-bottom: 24px
    }

    .cch_strc .vls_hdr h2 {
        font-size: 22px
    }

    .cch_strc .vls_hdr p {
        font-size: 16px
    }

    .cch_strc .vls_grd {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .cch_strc .vl_crd {
        padding: 12px
    }

    .cch_strc .tm_sctn {
        padding: 48px 12px
    }

    .cch_strc .tm_hdr {
        margin-bottom: 24px
    }

    .cch_strc .tm_hdr h2 {
        font-size: 22px
    }

    .cch_strc .tm_hdr p {
        font-size: 16px
    }

    .cch_strc .tm_grd {
        gap: 12px
    }

    .cch_strc .tm_mbr {
        padding: 12px
    }

    .cch_strc .stry_sctn {
        padding: 48px 12px
    }

    .cch_strc .stry_lyt {
        gap: 24px
    }

    .cch_strc .stry_txt h2 {
        font-size: 22px;
        margin-bottom: 12px
    }

    .cch_strc .stry_txt p {
        font-size: 16px;
        margin-bottom: 12px
    }

    .cch_strc .stry_img {
        height: 260px
    }
}

.prep_guide {
    background: #fff;
    overflow-x: clip
}

.prep_guide .head_zone {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
    text-align: center
}

.prep_guide .head_zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H22.5V20.5H20ZM18 22.5V20H20.5V22.5H18Z' fill='%233B8D4B' fill-opacity='0.04'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0
}

.prep_guide .head_img {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 24px;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1
}

.prep_guide .head_img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    filter: brightness(0.72) saturate(1.3) sepia(0.15) hue-rotate(5deg);
    transition: filter .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.prep_guide .head_img:hover img {
    filter: brightness(1.15) saturate(1.05)
}

.prep_guide .head_txt {
    position: relative;
    z-index: 1
}

.prep_guide .head_h {
    font-size: 72px;
    line-height: 1.15;
    background: radial-gradient(ellipse 70% 100% at 30% 50%, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 12px
}

.prep_guide .head_sub {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    max-width: 640px;
    margin: 0 auto
}

.prep_guide .steps_outer {
    position: relative;
    background: linear-gradient(135deg, #e1ebe84d 0%, #ffffffe6 100%);
    padding: 48px 24px
}

.prep_guide .steps_outer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0L100.5 0.5L100 1L99.5 0.5Z' fill='%23E1EBE8' fill-opacity='0.08'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: flicker_bg 7s ease-in-out infinite;
    pointer-events: none
}

@keyframes flicker_bg {

    0%,
    100% {
        opacity: 1
    }

    23% {
        opacity: .94
    }

    47% {
        opacity: 1
    }

    61% {
        opacity: .97
    }

    79% {
        opacity: .91
    }

    88% {
        opacity: 1
    }
}

.prep_guide .steps_outer::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 20px solid #e1ebe84d;
    z-index: 2
}

.prep_guide .steps_wrap {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.prep_guide .steps_h {
    font-size: 40px;
    line-height: 1.15;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 48px
}

.prep_guide .steps_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.prep_guide .step_card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    border-right: 3px solid #3B8D4B;
    transition: transform .16s ease-out, box-shadow .16s ease-out;
    position: relative
}

.prep_guide .step_card:hover {
    transform: translateY(-2px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.prep_guide .step_num {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 56px;
    line-height: 1;
    color: #3b8d4b1f;
    font-weight: 700;
    pointer-events: none
}

.prep_guide .step_title {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 12px;
    padding-right: 60px
}

.prep_guide .step_desc {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.prep_guide .tech_zone {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
    background: #fff
}

.prep_guide .tech_zone::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 20px solid #fff;
    z-index: 2
}

.prep_guide .tech_h {
    font-size: 40px;
    line-height: 1.15;
    background: radial-gradient(ellipse 70% 100% at 30% 50%, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 24px;
    text-align: center
}

.prep_guide .tech_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 24px
}

.prep_guide .tech_item {
    background: linear-gradient(135deg, #e1ebe866 0%, #ffff 100%);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    border-right: 2px solid #3b8d4b33;
    transition: background .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.prep_guide .tech_item:hover {
    background: linear-gradient(135deg, #e1ebe899 0%, #ffff 100%)
}

.prep_guide .tech_icon {
    width: 48px;
    height: 48px;
    background: radial-gradient(ellipse 70% 100% at 30% 50%, #8EBE9B 0%, #3B8D4B 100%);
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

.prep_guide .tech_icon svg {
    width: 24px;
    height: 24px;
    fill: #fff
}

.prep_guide .tech_label {
    font-size: 18px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 6px;
    font-weight: 600
}

.prep_guide .tech_detail {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.prep_guide .tech_note {
    background: #3b8d4b0d;
    border-radius: 20px;
    padding: 24px;
    border-left: 4px solid #3B8D4B;
    margin-top: 24px
}

.prep_guide .tech_note_txt {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.prep_guide .mindset_wrap {
    position: relative;
    background: radial-gradient(ellipse 120% 100% at 30% 0%, #e1ebe880 0%, #ffff 100%);
    padding: 48px 24px
}

.prep_guide .mindset_inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.prep_guide .mindset_h {
    font-size: 40px;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 0 0 48px;
    text-align: center
}

.prep_guide .mindset_cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px
}

.prep_guide .mindset_col h3 {
    font-size: 28px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 24px
}

.prep_guide .mindset_blocks {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.prep_guide .mindset_block {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    transition: box-shadow .18s ease-out;
    position: relative;
    overflow: hidden
}

.prep_guide .mindset_block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #3B8D4B 0%, #8EBE9B 100%);
    transition: height .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.prep_guide .mindset_block:hover::before {
    height: 100%
}

.prep_guide .mindset_block:hover {
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.prep_guide .mindset_label {
    font-size: 18px;
    line-height: 1.4;
    color: #3B8D4B;
    margin: 0 0 6px;
    font-weight: 600
}

.prep_guide .mindset_txt {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.prep_guide .hover_chars {
    display: inline-block;
    position: relative
}

.prep_guide .hover_chars span {
    display: inline-block;
    transition: color .14s ease-out;
    transition-delay: calc(var(--char-index) * 0.02s)
}

.prep_guide .mindset_block:hover .hover_chars span {
    color: #3B8D4B
}

.prep_guide .action_cta {
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    color: #fff;
    border: none;
    border-radius: 34px;
    padding: 12px 48px;
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
    transition: transform .16s ease-out, box-shadow .16s ease-out;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    display: inline-block;
    text-decoration: none;
    margin-top: 24px;
    position: relative;
    overflow: hidden
}

.prep_guide .action_cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fff3;
    transition: width .6s ease-out
}

.prep_guide .action_cta:active::before {
    width: 100%
}

.prep_guide .action_cta:hover {
    transform: translateY(-2px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.prep_guide .cta_wrap {
    text-align: center
}

@media (max-width: 992px) {
    .prep_guide .head_h {
        font-size: 56px
    }

    .prep_guide .head_img img {
        height: 320px
    }

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

    .prep_guide .tech_grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 576px) {
    .prep_guide .head_h {
        font-size: 40px
    }

    .prep_guide .head_img img {
        height: 240px
    }

    .prep_guide .steps_h,
    .prep_guide .tech_h,
    .prep_guide .mindset_h {
        font-size: 28px
    }

    .prep_guide .step_num {
        font-size: 40px
    }

    .prep_guide .step_title {
        font-size: 18px
    }

    .prep_guide .mindset_col h3 {
        font-size: 22px
    }
}

.cntct_us {
    background: linear-gradient(180deg, #fff 0%, #E1EBE8 100%);
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: clip
}

.cntct_us .tp_bnr {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    display: flex;
    gap: 48px;
    align-items: flex-start;
    position: relative
}

.cntct_us .tp_bnr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #8EBE9B 50%, transparent 100%)
}

.cntct_us .img_col {
    flex: 0 0 280px;
    position: relative
}

.cntct_us .img_col img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 20px;
    filter: saturate(0.7) brightness(0.95);
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    transition: filter .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.cntct_us .img_col img:hover {
    filter: saturate(1) brightness(1)
}

.cntct_us .txt_col {
    flex: 1;
    padding: 12px 0
}

.cntct_us .txt_col h1 {
    font-size: 56px;
    line-height: 1.15;
    margin: 0 0 24px;
    background: radial-gradient(ellipse 80% 100% at 30% 50%, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    padding-left: 32px
}

.cntct_us .txt_col h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 20px;
    height: 20px;
    background: #3B8D4B;
    border-radius: 1px;
    transform: rotate(45deg)
}

.cntct_us .pnts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.cntct_us .pnts li {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    padding-left: 32px;
    position: relative
}

.cntct_us .pnts li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #3B8D4B;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #3b8d4b26
}

.cntct_us .frm_wrp {
    background: #fff;
    position: relative;
    overflow: hidden
}

.cntct_us .frm_wrp::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse at center, #8ebe9b14 0%, transparent 70%);
    pointer-events: none
}

.cntct_us .frm_ctn {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 48px;
    align-items: start
}

.cntct_us .dvdr {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #8EBE9B 20%, #8EBE9B 80%, transparent 100%);
    position: relative
}

.cntct_us .dvdr::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #3B8D4B;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #3b8d4b1f
}

.cntct_us .lft_sd h2 {
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 24px;
    background: radial-gradient(ellipse 80% 100% at 30% 50%, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.cntct_us .lft_sd p {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0 0 24px
}

.cntct_us .cntct_dtls {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px
}

.cntct_us .dtl_itm {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #e1ebe84d;
    border-radius: 20px;
    transition: background .16s ease-out, transform .16s ease-out
}

.cntct_us .dtl_itm:hover {
    background: #e1ebe899;
    transform: translateY(-2px)
}

.cntct_us .icn_hld {
    flex: 0 0 48px;
    height: 48px;
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px
}

.cntct_us .dtl_txt {
    flex: 1;
    padding-top: 6px
}

.cntct_us .dtl_lbl {
    font-size: 16px;
    line-height: 1.4;
    color: #666;
    margin: 0 0 6px
}

.cntct_us .dtl_vl {
    font-size: 18px;
    line-height: 1.4;
    color: #2a2a2a;
    margin: 0;
    font-weight: 500
}

.cntct_us .dtl_vl a {
    color: #3B8D4B;
    text-decoration: none;
    transition: color .14s ease-out
}

.cntct_us .dtl_vl a:hover {
    color: #2a6335
}

.cntct_us .rght_sd h2 {
    font-size: 40px;
    line-height: 1.15;
    margin: 0 0 24px;
    background: radial-gradient(ellipse 80% 100% at 30% 50%, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.cntct_us .rght_sd form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.cntct_us .fld_grp {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.cntct_us .fld_grp label {
    font-size: 16px;
    line-height: 1.4;
    color: #2a2a2a;
    font-weight: 500
}

.cntct_us .fld_grp input[type="text"],
.cntct_us .fld_grp input[type="tel"] {
    padding: 12px 24px;
    font-size: 18px;
    line-height: 1.4;
    border: 2px solid #E1EBE8;
    border-radius: 34px;
    background: #fff;
    color: #2a2a2a;
    transition: border-color .18s cubic-bezier(0.4, 0, 0.6, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1);
    outline: none
}

.cntct_us .fld_grp input[type="text"]::placeholder,
.cntct_us .fld_grp input[type="tel"]::placeholder {
    color: #999
}

.cntct_us .fld_grp input[type="text"]:focus,
.cntct_us .fld_grp input[type="tel"]:focus {
    border-color: #3B8D4B;
    box-shadow: 0 0 0 4px #3b8d4b14
}

.cntct_us .sz_lbl {
    font-size: 16px;
    line-height: 1.4;
    color: #2a2a2a;
    font-weight: 500;
    margin: 0 0 12px
}

.cntct_us .rd_grp {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.cntct_us .rd_itm {
    position: relative
}

.cntct_us .rd_itm input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.cntct_us .rd_itm label {
    display: block;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.4;
    color: #2a2a2a;
    background: #e1ebe84d;
    border: 2px solid transparent;
    border-radius: 34px;
    cursor: pointer;
    transition: background .16s ease-out, border-color .16s ease-out, color .16s ease-out;
    user-select: none
}

.cntct_us .rd_itm input[type="radio"]:checked+label {
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    border-color: #3B8D4B;
    color: #fff
}

.cntct_us .rd_itm input[type="radio"]:focus+label {
    box-shadow: 0 0 0 4px #3b8d4b1f
}

.cntct_us .rd_itm label:hover {
    background: #e1ebe899
}

.cntct_us .rd_itm input[type="radio"]:checked+label:hover {
    background: linear-gradient(135deg, #2a6335 0%, #73a584 100%)
}

.cntct_us .prvc_chk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #e1ebe826;
    border-radius: 20px
}

.cntct_us .prvc_chk input[type="checkbox"] {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #3B8D4B
}

.cntct_us .prvc_chk label {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    cursor: pointer;
    flex: 1
}

.cntct_us .prvc_chk a {
    color: #3B8D4B;
    text-decoration: underline;
    transition: color .14s ease-out
}

.cntct_us .prvc_chk a:hover {
    color: #2a6335
}

.cntct_us .sbmt_btn {
    padding: 12px 48px;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(135deg, #3B8D4B 0%, #8EBE9B 100%);
    border: none;
    border-radius: 34px;
    cursor: pointer;
    transition: transform .22s cubic-bezier(0.4, 0, 0.6, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.6, 1);
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    position: relative;
    overflow: hidden;
    align-self: flex-start
}

.cntct_us .sbmt_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a6335 0%, #73a584 100%);
    transition: left .4s cubic-bezier(0.4, 0, 0.6, 1)
}

.cntct_us .sbmt_btn:hover::before {
    left: 0
}

.cntct_us .sbmt_btn span {
    position: relative;
    z-index: 1
}

.cntct_us .sbmt_btn:hover {
    transform: translateY(-3px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.cntct_us .sbmt_btn:active {
    transform: translateY(-1px);
    animation: flsh .3s ease-out
}

@keyframes flsh {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.3)
    }
}

.cntct_us .btm_sc {
    background: url(./template_images/OVERLAY-10.jpg) center/cover no-repeat;
    position: relative;
    overflow: hidden
}

.cntct_us .btm_sc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3b8d4bd9;
    pointer-events: none
}

.cntct_us .btm_ctn {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
    position: relative;
    z-index: 1
}

.cntct_us .btm_hdr {
    text-align: center;
    margin-bottom: 48px
}

.cntct_us .btm_hdr h2 {
    font-size: 40px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 12px
}

.cntct_us .btm_hdr p {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffffe6;
    margin: 0
}

.cntct_us .grd_lyt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px
}

.cntct_us .crd_bx {
    background: #ffffff1a;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid #fff3;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
    box-shadow: 1px 2px 4px 0 #0000000f;
    position: relative
}

.cntct_us .crd_bx:hover {
    transform: translateY(-6px);
    box-shadow: 1px 12px 48px 0 #0000001c
}

.cntct_us .crd_bx::after {
    content: '→';
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 22px;
    color: #fff6;
    transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1), color .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.cntct_us .crd_bx:hover::after {
    transform: translateX(6px);
    color: #ffffffe6
}

.cntct_us .crd_nm {
    display: inline-block;
    padding: 6px 12px;
    background: #8ebe9b4d;
    border-radius: 34px;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 12px;
    font-weight: 500
}

.cntct_us .crd_bx h3 {
    font-size: 28px;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 12px
}

.cntct_us .crd_bx p {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffffd9;
    margin: 0
}

.cntct_us .mtrc_vl {
    display: inline-block;
    padding: 6px 12px;
    background: #fff3;
    border-radius: 20px;
    font-size: 22px;
    line-height: 1.4;
    color: #fff;
    font-weight: 600;
    margin-top: 12px
}

@media (max-width: 992px) {
    .cntct_us .tp_bnr {
        flex-direction: column;
        padding: 48px 24px
    }

    .cntct_us .img_col {
        flex: 0 0 auto;
        width: 100%
    }

    .cntct_us .img_col img {
        height: 280px
    }

    .cntct_us .txt_col h1 {
        font-size: 40px
    }

    .cntct_us .frm_ctn {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 48px 24px
    }

    .cntct_us .dvdr {
        display: none
    }

    .cntct_us .lft_sd h2,
    .cntct_us .rght_sd h2,
    .cntct_us .btm_hdr h2 {
        font-size: 28px
    }

    .cntct_us .grd_lyt {
        grid-template-columns: 1fr
    }
}

@media (max-width: 576px) {
    .cntct_us .tp_bnr {
        padding: 24px 12px
    }

    .cntct_us .txt_col h1 {
        font-size: 28px;
        padding-left: 24px
    }

    .cntct_us .txt_col h1::before {
        width: 12px;
        height: 12px;
        top: 8px
    }

    .cntct_us .pnts li {
        font-size: 16px;
        padding-left: 24px
    }

    .cntct_us .frm_ctn {
        padding: 24px 12px
    }

    .cntct_us .lft_sd h2,
    .cntct_us .rght_sd h2,
    .cntct_us .btm_hdr h2 {
        font-size: 22px
    }

    .cntct_us .btm_ctn {
        padding: 48px 12px
    }

    .cntct_us .rd_grp {
        flex-direction: column
    }

    .cntct_us .rd_itm label {
        width: 100%
    }

    .cntct_us .sbmt_btn {
        width: 100%
    }
}

.lrn_prg {
    background: #fff;
    color: #1a1a1a
}

.lrn_prg .ttl_blk {
    position: relative;
    padding-top: 120px;
    padding-bottom: 72px;
    background: radial-gradient(ellipse at 50% 50%, #3b8d4b14, #fff0);
    overflow: visible
}

.lrn_prg .ttl_wrp {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    position: relative
}

.lrn_prg .img_ctr {
    position: relative;
    margin-bottom: 48px;
    border-radius: 20px;
    overflow: hidden
}

.lrn_prg .img_ctr img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.lrn_prg .img_ctr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3b8d4b47;
    z-index: 1;
    pointer-events: none;
    transition: opacity .2s ease-out
}

.lrn_prg .img_ctr:hover::before {
    opacity: 0
}

.lrn_prg .img_ctr:hover img {
    transform: scale(1.04)
}

.lrn_prg .ptn_dcr {
    position: absolute;
    top: 24px;
    right: 48px;
    display: flex;
    gap: 12px;
    z-index: 2
}

.lrn_prg .ptn_itm {
    width: 8px;
    height: 8px;
    background: #3b8d4b80;
    border-radius: 1px;
    animation: ptn_pls 2.4s ease-in-out infinite
}

.lrn_prg .ptn_itm:nth-child(2) {
    animation-delay: .4s
}

.lrn_prg .ptn_itm:nth-child(3) {
    animation-delay: .8s
}

.lrn_prg .ptn_itm:nth-child(4) {
    animation-delay: 1.2s
}

@keyframes ptn_pls {

    0%,
    100% {
        opacity: .3;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.5)
    }
}

.lrn_prg .eyb_lbl {
    font-size: 16px;
    line-height: 1.4;
    color: #3B8D4B;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
    font-weight: 600
}

.lrn_prg .mn_hdng {
    font-size: 56px;
    line-height: 1.15;
    background: linear-gradient(135deg, #8EBE9B, #3B8D4B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin: 0
}

.lrn_prg .strc_blk {
    padding-top: 72px;
    padding-bottom: 72px;
    background: linear-gradient(180deg, #fff, #e1ebe84d)
}

.lrn_prg .strc_ctr {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px
}

.lrn_prg .strc_hdng {
    font-size: 40px;
    line-height: 1.15;
    background: linear-gradient(90deg, #8EBE9B, #3B8D4B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 48px;
    font-weight: 700
}

.lrn_prg .pth_wrp {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 48px
}

.lrn_prg .pth_ln {
    position: absolute;
    top: 60px;
    left: 16%;
    right: 16%;
    height: 2px;
    border-top: 2px dashed #8EBE9B;
    z-index: 0;
    pointer-events: none
}

.lrn_prg .pth_crd {
    position: relative;
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    z-index: 1;
    transition: transform .16s ease-out, box-shadow .16s ease-out;
    animation: sld_in .32s ease-out backwards
}

.lrn_prg .pth_crd:nth-child(1) {
    animation-delay: .1s
}

.lrn_prg .pth_crd:nth-child(2) {
    animation-delay: .2s
}

.lrn_prg .pth_crd:nth-child(3) {
    animation-delay: .3s
}

@keyframes sld_in {
    from {
        opacity: 0;
        transform: translateX(-40px)
    }

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

.lrn_prg .pth_crd:hover {
    transform: translateY(-6px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.lrn_prg .icn_wrp {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3B8D4B, #8EBE9B);
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px
}

.lrn_prg .icn_shp {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #fff;
    stroke-width: 2
}

.lrn_prg .crd_hdng {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin-bottom: 12px;
    font-weight: 600
}

.lrn_prg .crd_txt {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.lrn_prg .dsc_txt {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    max-width: 840px;
    margin: 0 auto
}

.lrn_prg .dsc_txt+.dsc_txt {
    margin-top: 24px
}

.lrn_prg .phs_blk {
    padding-top: 72px;
    padding-bottom: 72px;
    background: radial-gradient(ellipse 80% 60% at 30% 40%, #8ebe9b1f, #fff0)
}

.lrn_prg .phs_ctr {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px
}

.lrn_prg .phs_hdng {
    font-size: 40px;
    line-height: 1.15;
    background: linear-gradient(90deg, #8EBE9B, #3B8D4B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 48px;
    font-weight: 700
}

.lrn_prg .phs_grd {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

.lrn_prg .phs_crd {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    transition: box-shadow .14s cubic-bezier(0.4, 0, 0.6, 1);
    position: relative;
    overflow: hidden;
    animation: sld_in_alt .28s ease-out backwards
}

.lrn_prg .phs_crd:nth-child(odd) {
    animation-name: sld_in
}

.lrn_prg .phs_crd:nth-child(1) {
    animation-delay: .05s
}

.lrn_prg .phs_crd:nth-child(2) {
    animation-delay: .15s
}

.lrn_prg .phs_crd:nth-child(3) {
    animation-delay: .25s
}

.lrn_prg .phs_crd:nth-child(4) {
    animation-delay: .35s
}

@keyframes sld_in_alt {
    from {
        opacity: 0;
        transform: translateX(40px)
    }

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

.lrn_prg .phs_crd:hover {
    box-shadow: 1px 5px 28px 0 #3b8d4b17
}

.lrn_prg .phs_crd::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #3B8D4B, #8EBE9B);
    transition: height .22s ease-out
}

.lrn_prg .phs_crd:hover::before {
    height: 100%
}

.lrn_prg .phs_nbr {
    display: inline-block;
    font-size: 40px;
    line-height: 1.15;
    color: #8EBE9B;
    font-weight: 700;
    margin-bottom: 12px
}

.lrn_prg .phs_ttl {
    font-size: 22px;
    line-height: 1.4;
    color: #3B8D4B;
    margin-bottom: 12px;
    font-weight: 600
}

.lrn_prg .phs_dsc {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.lrn_prg .mtr_blk {
    padding-top: 72px;
    padding-bottom: 72px;
    background: linear-gradient(180deg, #e1ebe866, #fff)
}

.lrn_prg .mtr_ctr {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px
}

.lrn_prg .mtr_hdng {
    font-size: 40px;
    line-height: 1.15;
    background: linear-gradient(90deg, #8EBE9B, #3B8D4B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 48px;
    font-weight: 700;
    text-align: center
}

.lrn_prg .mtr_grd {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    margin-bottom: 48px
}

.lrn_prg .mtr_bx {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border-radius: 34px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease-out
}

.lrn_prg .mtr_bx:hover {
    transform: scale(1.03)
}

.lrn_prg .mtr_bx::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #3B8D4B, #8EBE9B)
}

.lrn_prg .mtr_vl {
    font-size: 72px;
    line-height: 1.15;
    background: linear-gradient(135deg, #3B8D4B, #8EBE9B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 12px;
    display: block
}

.lrn_prg .mtr_lbl {
    font-size: 18px;
    line-height: 1.4;
    color: #3B8D4B !important;
    font-weight: 600
}

.lrn_prg .fnl_txt {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    text-align: center;
    max-width: 740px;
    margin: 0 auto
}

@media (max-width: 992px) {
    .lrn_prg .ttl_blk {
        padding-top: 72px;
        padding-bottom: 48px
    }

    .lrn_prg .mn_hdng {
        font-size: 40px
    }

    .lrn_prg .img_ctr img {
        height: 320px
    }

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

    .lrn_prg .pth_ln {
        display: none
    }

    .lrn_prg .strc_hdng,
    .lrn_prg .phs_hdng,
    .lrn_prg .mtr_hdng {
        font-size: 28px
    }

    .lrn_prg .phs_grd {
        grid-template-columns: 1fr
    }

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

@media (max-width: 576px) {
    .lrn_prg .ttl_blk {
        padding-top: 48px;
        padding-bottom: 24px
    }

    .lrn_prg .mn_hdng {
        font-size: 28px
    }

    .lrn_prg .img_ctr {
        margin-bottom: 24px
    }

    .lrn_prg .img_ctr img {
        height: 240px
    }

    .lrn_prg .ptn_dcr {
        top: 12px;
        right: 12px;
        gap: 6px
    }

    .lrn_prg .ptn_itm {
        width: 6px;
        height: 6px
    }

    .lrn_prg .strc_blk,
    .lrn_prg .phs_blk,
    .lrn_prg .mtr_blk {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .lrn_prg .strc_hdng,
    .lrn_prg .phs_hdng,
    .lrn_prg .mtr_hdng {
        font-size: 22px;
        margin-bottom: 24px
    }

    .lrn_prg .mtr_vl {
        font-size: 56px
    }

    .lrn_prg .mtr_bx {
        padding: 24px 12px
    }
}

.success_pg {
    background: linear-gradient(127deg, #E1EBE8 0%, #fff 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px
}

.success_pg .conf_wrap {
    max-width: 680px;
    background: #fff;
    padding: 48px;
    border-radius: 20px;
    box-shadow: 1px 5px 28px 0 #3b8d4b17;
    text-align: center
}

.success_pg .check_icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    background: radial-gradient(ellipse 70% 60% at 35% 40%, #3B8D4B 0%, #8EBE9B 100%);
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.success_pg .check_icon::after {
    content: '';
    width: 32px;
    height: 18px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(-45deg) translateY(-4px)
}

.success_pg .main_hdg {
    font-size: 40px;
    line-height: 1.15;
    background: linear-gradient(127deg, #8EBE9B 0%, #3B8D4B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 12px
}

.success_pg .conf_txt {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0 0 24px
}

.success_pg .detail_box {
    background: #e1ebe866;
    padding: 24px;
    border-radius: 1px;
    margin: 0 0 24px;
    text-align: left
}

.success_pg .detail_row {
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.4
}

.success_pg .detail_row:last-child {
    margin: 0
}

.success_pg .detail_lbl {
    color: #5a5a5a
}

.success_pg .detail_val {
    color: #2a2a2a;
    font-weight: 500
}

.success_pg .next_info {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 24px
}

.success_pg .btn_grp {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.success_pg .btn_home {
    padding: 14px 48px;
    background: linear-gradient(127deg, #3B8D4B 0%, #8EBE9B 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 1px 2px 4px 0 #3b8d4b0f;
    transition: transform .18s ease-out, box-shadow .18s ease-out
}

.success_pg .btn_home:hover {
    transform: translateY(-2px);
    box-shadow: 1px 12px 48px 0 #3b8d4b1c
}

.success_pg .btn_sec {
    padding: 14px 48px;
    background: #fff;
    color: #3B8D4B;
    border: 2px solid #3B8D4B;
    border-radius: 20px;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .16s cubic-bezier(0.4, 0, 0.6, 1), color .16s cubic-bezier(0.4, 0, 0.6, 1)
}

.success_pg .btn_sec:hover {
    background: #3b8d4b14
}

.success_pg .support_note {
    margin: 48px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #3b8d4b26;
    font-size: 16px;
    line-height: 1.4;
    color: #5a5a5a
}

.success_pg .support_link {
    color: #3B8D4B;
    text-decoration: none;
    border-bottom: 1px solid #3b8d4b4d;
    transition: border-color .14s ease-out
}

.success_pg .support_link:hover {
    border-bottom-color: #3B8D4B
}

@media (max-width: 576px) {
    .success_pg .conf_wrap {
        padding: 24px
    }

    .success_pg .main_hdg {
        font-size: 28px
    }

    .success_pg .check_icon {
        width: 72px;
        height: 72px
    }

    .success_pg .check_icon::after {
        width: 26px;
        height: 14px
    }

    .success_pg .btn_grp {
        flex-direction: column
    }

    .success_pg .btn_home,
    .success_pg .btn_sec {
        width: 100%
    }

    .success_pg .detail_row {
        flex-direction: column;
        gap: 6px
    }
}