:root {
    --primary: #1888bc;
    --primary-dark: #136f9a;
    --secondary: #e6f4fa;
    --text-dark: #222;
    --text-light: #555;
    --white: #fff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px rgba(24, 136, 188, 0.3);
    --border-radius: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

section {
    padding: 50px 20px
}

section+section {
    margin-top: -20px
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-light);
    overflow-x: hidden
}

h1,
h2,
h3 {
    font-weight: 700;
    line-height: 1.2
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem)
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem)
}

.hero {
    background: linear-gradient(135deg, #f0f7fb 0%, #e0f0f8 100%);
    padding: 34px 20px 118px;
    position: relative;
    overflow: hidden
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(24, 136, 188, 0.1) 0%, transparent 50%);
    pointer-events: none
}

.container {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(420px, 540px);
    justify-content: center;
    align-items: flex-start;
    width: min(100%, 1060px);
    margin: 0 auto;
    column-gap: 60px;
    position: relative;
    z-index: 1
}

.navbar {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 0.6rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

.nav-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px
}

.logo img {
    height: 50px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: var(--transition)
}

.logo img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(24, 136, 188, 0.2))
}

.nav-buttons {
    display: flex;
    gap: 10px;
    align-items: center
}

.login-btn {
    padding: 8px 18px;
    border: 2px solid #1888bc;
    color: #1888bc;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition)
}

.signup-btn {
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition)
}

.signup-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 5px 15px rgba(24, 136, 188, 0.3)
}

.login-btn:hover {
    background: #1888bc;
    color: #fff
}

@media(max-width:480px) {
    .navbar {
        padding: 0.6rem 1rem
    }

    .logo img {
        height: 38px
    }

    .nav-buttons {
        gap: 6px
    }

    .login-btn,
    .signup-btn {
        padding: 6px 12px;
        font-size: 13px
    }
}

.left {
    width: 100%;
    max-width: 520px;
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px
}

.tag {
    background: rgba(24, 136, 188, 0.1);
    border: 1px solid rgba(24, 136, 188, 0.2);
    color: #1888bc;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block
}

.left h1 {
    color: var(--text-dark);
    margin: 14px 0 12px;
    line-height: 1.08;
    letter-spacing: -0.02em
}

.highlight {
    background: #e6f4fa;
    color: #1888bc;
    padding: 5px 10px;
    border-radius: 5px
}

.left p {
    color: #555;
    font-size: 1rem;
    max-width: 540px;
    margin-bottom: 16px
}

.rating {
    margin: 10px 0 0;
    font-weight: bold;
    font-size: 0.96rem
}

.btn-group {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.hero-tools {
    margin-top: 22px;
    max-width: 560px
}

.hero-tools-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(239, 125, 26, 0.12);
    border: 1px solid rgba(239, 125, 26, 0.18);
    color: #ef7d1a;
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em
}

.hero-tools-slider {
    position: relative;
    overflow: hidden;
    padding: 18px 0;
    border: 1px solid rgba(23, 57, 85, 0.2);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 34px rgba(10, 75, 115, 0.1)
}

.hero-tools-slider::before,
.hero-tools-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 54px;
    z-index: 1;
    pointer-events: none
}

.hero-tools-slider::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0))
}

.hero-tools-slider::after {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0))
}

.hero-tools-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 20px;
    animation: heroToolsMarquee 24s linear infinite
}

.hero-tools-slider:hover .hero-tools-track {
    animation-play-state: paused
}

.hero-tool-item {
    min-width: 168px;
    padding: 14px 20px;
    border-radius: 20px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 22px rgba(10, 75, 115, 0.09)
}

.hero-tool-item img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain
}

.hero-tool-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800
}

.hero-tool-item-ubersuggest {
    min-width: 170px;
    padding-inline: 16px
}

.hero-tool-item-ubersuggest img {
    width: auto;
    height: 30px;
    max-width: 150px;
    flex: 0 0 auto
}

.hero-tool-item-canva img {
    width: auto;
    height: 34px;
    max-width: 112px;
    flex: 0 0 auto
}

.hero-tool-item-canva {
    min-width: 150px;
    padding-inline: 18px
}

.hero-tool-item-search-console {
    min-width: 190px;
    padding-inline: 16px
}

.hero-tool-item-search-console img {
    width: auto;
    height: 34px;
    max-width: 150px;
    flex: 0 0 auto
}

.hero-tool-item span {
    color: #12324a;
    font-size: 1.02rem;
    font-weight: 600;
    white-space: nowrap
}

@keyframes heroToolsMarquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-50% - 9px))
    }
}

.primary-btn {
    background: var(--primary);
    color: #fff;
    padding: 11px 22px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    transition: var(--transition)
}

.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 136, 188, 0.3)
}

.secondary-btn {
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 9px 22px;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    transition: var(--transition)
}

.secondary-btn:hover {
    background: rgba(24, 136, 188, 0.05)
}

.img-box {
    width: min(100%, 750px);
    margin-inline: auto
}

.main-img {
    MARGIN-TOP: 10px;
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1))
}

.right {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 540px;
    margin: 0 auto
}

.hero-form-card {
    width: 100%;
    padding: 20px 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(24, 136, 188, 0.14);
    box-shadow: 0 18px 40px rgba(10, 75, 115, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease
}

.hero-form-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(10, 75, 115, 0.18);
    border-color: rgba(24, 136, 188, 0.26)
}

.hero-form-tag {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    padding: 12px 12px;
    border-radius: 999px;
    background: rgba(24, 136, 188, 0.08);
    color: #0a4b73;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase
}

.hero-form-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px 0 12px
}

.hero-form-card h2 {
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.2;
    color: #12324a;
    text-align: center
}

.hero-form-copy {
    margin: 0;
    color: #5f6f82;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center
}

.hero-enquiry-form {
    gap: 10px
}

.hero-enquiry-form label {
    font-size: 0.92rem
}

.hero-enquiry-form input,
.hero-enquiry-form select {
    height: 46px;
    padding: 0 14px;
    font-size: 0.95rem
}

.hero-enquiry-form .enquiry-submit {
    height: 46px;
    margin-top: 6px;
    font-size: 0.95rem
}

@media(max-width:1024px) {
    .hero {
        padding: 32px 20px 118px
    }

    .container {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        width: min(100%, 980px);
        column-gap: 24px
    }

    .left {
        max-width: 100%
    }

    .right {
        max-width: 520px
    }
}

@media(max-width:768px) {
    .hero {
        padding: 30px 16px 88px
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 16px;
        padding-top: 0
    }

    .left {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0
    }

    .left h1 {
        font-size: 27px;
        line-height: 1.22
    }

    .left p {
        max-width: 100%;
        font-size: 14px
    }

    .hero-tools {
        max-width: 100%;
        margin-top: 18px
    }

    .hero-tools-title {
        font-size: 1.08rem;
        padding: 5px 12px
    }

    .hero-tool-item {
        min-width: 148px;
        padding: 12px 16px
    }

    .hero-tool-item span {
        font-size: 0.94rem
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
        justify-content: center
    }

    .right {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: 0;
        overflow: visible;
        max-width: 100%
    }

    .hero-form-card {
        width: 100%;
        padding: 18px 16px
    }

    .hero-enquiry-form input,
    .hero-enquiry-form select,
    .hero-enquiry-form .enquiry-submit {
        height: 44px
    }
}

.review-card {
    margin-top: 15px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

.stats {
    background: transparent;
    padding: 0 20px 60px;
    margin-top: -80px;
    position: relative;
    z-index: 10
}

.stats-container {
    max-width: 1200px;
    margin: auto;
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center
}

.stat-box {
    flex: 1;
    min-width: 150px;
    transition: var(--transition)
}

.stat-box:hover {
    transform: translateY(-5px)
}

.stat-box .icon {
    margin-bottom: 15px;
    width: 64px;
    height: 64px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(24, 136, 188, 0.12), rgba(24, 136, 188, 0.04));
    display: flex;
    align-items: center;
    justify-content: center
}

.stat-box .icon i {
    font-size: 28px;
    color: var(--primary)
}

.stat-box h3 {
    font-size: 32px;
    color: #222
}

.stat-box p {
    color: #777;
    font-weight: 500
}

.divider {
    width: 1px;
    height: 70px;
    background: rgba(0, 0, 0, 0.1)
}

@media(max-width:768px) {
    .stats-container {
        flex-direction: column;
        gap: 20px;
        padding: 30px 20px
    }

    .stats {
        margin-top: -40px
    }

    .divider {
        display: none
    }
}

.courses {
    padding: 20px 20px 60px;
    text-align: left;
    background: var(--white);
    max-width: 1300px;
    margin: 0 auto
}

.courses h2 {
    font-size: 1.4rem;
    color: var(--text-dark);
    display: inline
}

.sub {
    color: var(--text-light);
    font-size: 1rem;
    display: block;
    margin-top: 6px
}

.courses-header {
    margin-bottom: 24px;
    text-align: center
}

.course-slider {
    position: relative;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    padding: 10px 50px 20px
}

.course-cards {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 25px;
    align-items: stretch
}

.course-card {
    width: calc((100% - 75px) / 4);
    min-width: calc((100% - 75px) / 4);
    max-width: calc((100% - 75px) / 4);
    flex-shrink: 0;
    background: #fff;
    padding: 30px 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    text-align: center;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box
}

.course-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(24, 136, 188, 0.2)
}

.course-card .icon {
    width: 70px;
    height: 70px;
    background: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: var(--transition);
    flex-shrink: 0
}

.course-card:hover .icon {
    background: var(--primary)
}

.course-card .icon i {
    font-size: 30px;
    color: var(--primary) !important;
    transition: var(--transition)
}

.course-card .icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    transition: var(--transition)
}

.course-card .brand-icon img {
    width: 36px;
    height: 36px
}

.course-card:hover .icon i {
    color: var(--white) !important
}

.course-card:hover .icon img {
    transform: scale(1.06)
}

.course-card:hover .brand-icon img {
    filter: brightness(0) invert(1)
}

.course-card h3 {
    color: var(--text-dark);
    margin-bottom: 12px;
    font-size: 20px
}

.course-card p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1
}

.course-card a {
    width: 100%;
    display: block;
    text-decoration: none;
    margin-top: auto
}

.course-card .enroll-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition)
}

.course-card .enroll-btn:hover {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(24, 136, 188, 0.3)
}

.course-prev,
.course-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: var(--primary);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    z-index: 10;
    transition: var(--transition)
}

.course-prev {
    left: 0
}

.course-next {
    right: 0
}

.course-prev:hover,
.course-next:hover {
    background: var(--primary);
    color: #fff
}

@media(max-width:1024px) {
    .course-slider {
        padding: 10px 50px 20px
    }

    .course-card {
        width: calc((100% - 25px) / 2);
        min-width: calc((100% - 25px) / 2);
        max-width: calc((100% - 25px) / 2)
    }
}

@media(max-width:768px) {
    .course-slider {
        padding: 10px 40px 20px
    }

    .course-card {
        width: calc(100vw - 100px);
        min-width: calc(100vw - 100px);
        max-width: calc(100vw - 100px);
        padding: 24px 20px
    }

    .course-prev {
        left: 0
    }

    .course-next {
        right: 0
    }
}

@media(max-width:400px) {
    .course-slider {
        padding: 10px 36px 20px
    }

    .course-card {
        width: calc(100vw - 80px);
        min-width: calc(100vw - 80px);
        max-width: calc(100vw - 80px)
    }
}

.usp {
    background: #f8fbff;
    padding: 60px 20px;
    text-align: center
}

.usp h2 {
    font-size: 32px;
    margin-bottom: 10px
}

.subtitle {
    color: #666;
    margin-bottom: 40px
}

.usp-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}

.usp-card {
    width: 230px;
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    text-align: center;
    border: 2px solid #eee;
    transition: 0.3s
}

.usp-card-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(24, 136, 188, 0.12), rgba(24, 136, 188, 0.04))
}

.usp-card-icon i {
    font-size: 28px;
    color: var(--primary)
}

.usp-card p {
    font-size: 14px;
    color: #444
}

.usp-card.blue {
    border-color: #1888bc
}

.usp-card.red {
    border-color: #ff6b6b
}

.usp-card.green {
    border-color: #2ecc71
}

.usp-card.yellow {
    border-color: #f1c40f
}

.usp-card:hover {
    transform: translateY(-5px)
}

.usp-cta {
    margin-top: 50px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 18px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(24, 136, 188, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

.usp-cta-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    flex-wrap: nowrap
}

.usp-cta-step {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    padding: 9px 16px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    white-space: nowrap
}

.usp-cta-step i {
    color: #ffc107;
    font-size: 14px
}

.usp-cta-arrow {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    animation: pulseRight 1.5s infinite
}

.usp-cta-sub {
    font-size: 13px;
    color: var(--secondary);
    opacity: 0.9
}

@keyframes pulseRight {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(5px)
    }

    100% {
        transform: translateX(0)
    }
}

@media(max-width:768px) {
    .usp h2 {
        font-size: 24px
    }

    .usp-cta-main {
        flex-direction: column;
        gap: 8px;
        flex-wrap: wrap
    }

    .usp-cta-arrow {
        animation: pulseDown 1.5s infinite
    }

    @keyframes pulseDown {
        0% {
            transform: rotate(90deg) translateX(0)
        }

        50% {
            transform: rotate(90deg) translateX(5px)
        }

        100% {
            transform: rotate(90deg) translateX(0)
        }
    }
}

.whyus {
    background: linear-gradient(145deg, #071a2f 0%, #0c2744 50%, #0f3d60 100%);
    padding: 72px 20px;
    position: relative;
    overflow: hidden
}

.whyus::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none
}

.whyus-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.whyus-header {
    margin-bottom: 48px
}

.whyus-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(24, 136, 188, 0.15);
    border: 1px solid rgba(24, 136, 188, 0.3);
    color: #7dd3f8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px
}

.whyus-header h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    color: #fff;
    line-height: 1.2;
    margin-bottom: 14px
}

.whyus-accent {
    color: #facc15
}

.whyus-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    max-width: 560px
}

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

.whyus-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition);
    backdrop-filter: blur(6px)
}

.whyus-card:hover {
    background: rgba(24, 136, 188, 0.12);
    border-color: rgba(24, 136, 188, 0.4);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3)
}

.whyus-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(24, 136, 188, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #1888bc;
    flex-shrink: 0
}

.whyus-card h3 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0
}

.whyus-card p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1;
    margin: 0
}

.whyus-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(24, 136, 188, 0.15);
    border: 1px solid rgba(24, 136, 188, 0.25);
    color: #7dd3f8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    width: fit-content
}

@media(max-width:1024px) {
    .whyus-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .whyus-grid {
        grid-template-columns: 1fr
    }

    .whyus {
        padding: 52px 16px
    }
}

.gain {
    padding: 60px 20px;
    text-align: center;
    background: #f8fbff
}

.gain h2 {
    font-size: 32px;
    margin-bottom: 10px;
    color: var(--text-dark)
}

.gain .subtitle {
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

.gain-box {
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap
}

.gain-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 550px
}

.gain-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
    background: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: var(--transition)
}

.gain-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-glow)
}

.gain-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--secondary);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px
}

.gain-text h4 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 5px
}

.gain-text p {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.5
}

.gain-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.gain-right img {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow)
}

.dm-infographic {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

.dm-center {
    text-align: center;
    width: 230px;
    z-index: 3;
    background: radial-gradient(circle, rgba(248, 251, 255, 0.92) 0%, rgba(248, 251, 255, 0.68) 62%, rgba(248, 251, 255, 0) 100%);
    backdrop-filter: blur(4px);
    padding: 25px 20px;
    border-radius: 50%;
    box-shadow: none;
    border: none
}

.dm-center h3 {
    color: var(--primary-dark);
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 800
}

.dm-center p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0
}

.dm-circle-path {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(142, 68, 173, 0.4);
    border-radius: 50%;
    z-index: 1
}

.dm-nodes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.dm-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-160px) rotate(calc(var(--i) * -60deg));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 110px;
    animation: orbitSwing 9s ease-in-out infinite
}

.dm-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--primary), #8e44ad);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
    transition: var(--transition);
    border: 2px solid #fff
}

.dm-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.dm-node:hover .dm-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(24, 136, 188, 0.5)
}

.dm-node span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: center;
    white-space: pre-wrap;
    line-height: 1.2
}

@keyframes orbitSwing {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(calc((var(--i) * 60deg) - 35deg)) translateY(-160px) rotate(calc((var(--i) * -60deg) + 35deg))
    }

    50% {
        transform: translate(-50%, -50%) rotate(calc((var(--i) * 60deg) + 35deg)) translateY(-160px) rotate(calc((var(--i) * -60deg) - 35deg))
    }
}

.gain-btn {
    display: inline-block;
    margin-top: 40px;
    padding: 12px 30px;
    background: var(--primary);
    text-decoration: none;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition)
}

.gain-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px)
}

@media(max-width:992px) {
    .gain-box {
        flex-direction: column
    }

    .gain-right {
        margin-top: 30px;
        max-width: 500px
    }
}

@media(max-width:768px) {
    .gain-right {
        width: 100%;
        overflow: hidden
    }

    .dm-infographic {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        transform: none;
        padding: 0
    }

    .dm-circle-path {
        width: 240px;
        height: 240px
    }

    .dm-node {
        transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-120px) rotate(calc(var(--i) * -60deg));
        width: 80px;
        animation: orbitSwingMobile 9s ease-in-out infinite
    }

    .dm-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px
    }

    .dm-node span {
        font-size: 0.62rem;
        padding: 3px 6px
    }

    .dm-center {
        width: 160px;
        padding: 16px 12px
    }

    .dm-center h3 {
        font-size: 1rem
    }

    .dm-center p {
        font-size: 0.72rem
    }

    @keyframes orbitSwingMobile {

        0%,
        100% {
            transform: translate(-50%, -50%) rotate(calc((var(--i) * 60deg) - 20deg)) translateY(-120px) rotate(calc((var(--i) * -60deg) + 20deg))
        }

        50% {
            transform: translate(-50%, -50%) rotate(calc((var(--i) * 60deg) + 20deg)) translateY(-120px) rotate(calc((var(--i) * -60deg) - 20deg))
        }
    }

    .gain h2 {
        font-size: 28px
    }

    .gain-item {
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .gain-icon {
        margin-bottom: 10px
    }
}

.combo {
    background: radial-gradient(circle at top left, rgba(74, 222, 128, 0.14), transparent 26%), radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 22%), linear-gradient(145deg, #071a2f 0%, #0c2744 48%, #134f73 100%);
    padding: 72px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden
}

.combo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 92%);
    pointer-events: none
}

.combo-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #d9f3ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    position: relative;
    z-index: 1
}

.combo h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.2rem);
    margin-bottom: 10px;
    color: var(--white);
    position: relative;
    z-index: 1
}

.combo-subtitle {
    max-width: 650px;
    margin: 0 auto 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    position: relative;
    z-index: 1
}

.combo-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    position: relative;
    z-index: 1
}

.combo-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 249, 255, 0.96) 100%);
    color: var(--text-dark);
    margin: 6px 0;
    padding: 22px;
    border-radius: 22px;
    text-align: left;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(24, 136, 188, 0.12);
    position: relative;
    overflow: hidden
}

.combo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(24, 136, 188, 0.12), transparent 45%);
    pointer-events: none
}

.combo-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24)
}

.combo-card-featured {
    background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
    border: 1px solid rgba(74, 222, 128, 0.35);
    box-shadow: 0 18px 46px rgba(10, 37, 64, 0.28)
}

.combo-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1
}

.combo-badge,
.combo-mode {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 700
}

.combo-badge {
    background: linear-gradient(135deg, #20c997, #0ea5e9);
    color: #fff;
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.24)
}

.combo-badge-muted {
    background: linear-gradient(135deg, #1888bc, #0a2540)
}

.combo-mode {
    color: #31506a;
    background: rgba(24, 136, 188, 0.08);
    border: 1px solid rgba(24, 136, 188, 0.14)
}

.combo-card h3 {
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1
}

.combo-pricing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1
}

.combo-price-option {
    padding: 14px;
    border: 1px solid rgba(24, 136, 188, 0.14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(10, 75, 115, 0.08)
}

.combo-price-option>div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px
}

.combo-price-mode {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #31506a;
    font-size: 13px;
    font-weight: 700
}

.combo-price-mode i {
    color: var(--primary)
}

.combo-price-option del {
    color: #8a9aa7;
    font-size: 12px;
    font-weight: 600
}

.combo-price-option strong {
    color: #0a4b73;
    font-size: 21px;
    line-height: 1
}

.combo-card ul {
    list-style: none;
    padding: 0;
    flex-grow: 1;
    margin-bottom: 12px;
    position: relative;
    z-index: 1
}

.combo-card li {
    margin: 10px 0;
    font-size: 14px;
    color: #476173;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(24, 136, 188, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(6px)
}

.combo-card li i {
    color: #2ecc71;
    font-size: 18px;
    margin-top: 2px
}

.combo-card a {
    text-decoration: none;
    width: 100%;
    position: relative;
    z-index: 1
}

.combo-registration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 12px;
    color: #73510a;
    background: #fff7dc;
    border: 1px solid #f1d985;
    font-size: 13px;
    position: relative;
    z-index: 1
}

.combo-registration strong {
    color: #573c03
}

.combo-card button {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 16px 30px rgba(24, 136, 188, 0.24)
}

.combo-card button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(24, 136, 188, 0.32)
}

@media(max-width:768px) {
    .combo {
        padding: 60px 16px
    }

    .combo-subtitle {
        font-size: 14px;
        margin-bottom: 14px
    }

    .combo-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .combo-card {
        max-width: 100%;
        margin: 0;
        padding: 20px 18px
    }

    .combo-card-top {
        flex-wrap: wrap
    }

    .combo-card h3 {
        font-size: 22px
    }

    .combo-pricing {
        grid-template-columns: 1fr
    }
}

.certificate {
    padding: 80px 20px 40px;
    background: var(--white)
}

.cert-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    background: #f8fbff;
    padding: 50px;
    border-radius: 30px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03)
}

.cert-left {
    flex: 1;
    max-width: 600px
}

.cert-left h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--text-dark);
    margin-bottom: 20px
}

.cert-left p.subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.6
}

.cert-list {
    list-style: none;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.cert-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 500
}

.cert-list li i {
    color: #f1c40f;
    font-size: 22px;
    background: rgba(241, 196, 15, 0.15);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0
}

.cert-btn {
    display: inline-block;
    padding: 14px 35px;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border-radius: 12px;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(24, 136, 188, 0.2)
}

.cert-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(24, 136, 188, 0.3);
    color: var(--white)
}

.cert-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.cert-right img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition: var(--transition)
}

.cert-right img:hover {
    transform: translateY(-10px)
}

@media(max-width:992px) {
    .cert-container {
        flex-direction: column;
        text-align: left;
        padding: 30px 20px;
        gap: 30px
    }

    .cert-left {
        max-width: 100%;
        width: 100%
    }

    .cert-left h2 {
        font-size: clamp(1.6rem, 5vw, 2rem);
        margin-bottom: 12px
    }

    .cert-left p.subtitle {
        font-size: 0.95rem;
        margin-bottom: 20px
    }

    .cert-list {
        align-items: flex-start;
        text-align: left
    }

    .cert-list li {
        width: 100%;
        font-size: 0.95rem
    }

    .cert-right {
        width: 100%
    }

    .cert-right img {
        max-width: 100%
    }
}

.video-review {
    padding: 40px 20px 80px;
    text-align: center;
    background: var(--white)
}

.video-review h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--text-dark);
    margin-bottom: 0
}

.video-slider {
    position: relative;
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
    padding: 20px 10px
}

.video-track {
    display: flex;
    transition: transform 0.5s ease-in-out
}

.video-card {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px
}

.video-card video {
    width: 100%;
    max-width: 350px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 4px solid var(--white);
    cursor: pointer;
    pointer-events: auto
}

.video-text {
    max-width: 400px;
    text-align: left;
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative
}

.quote-icon {
    font-size: 35px;
    color: rgba(24, 136, 188, 0.15);
    margin-bottom: 10px
}

.video-text p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 1.05rem;
    line-height: 1.7;
    font-style: italic
}

.video-text h4 {
    color: var(--primary);
    font-size: 1.2rem
}

.video-text span {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500
}

.video-prev,
.video-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    color: var(--primary);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    font-size: 18px;
    z-index: 10;
    transition: var(--transition)
}

.video-prev:hover,
.video-next:hover {
    background: var(--primary);
    color: var(--white)
}

.video-prev {
    left: 0
}

.video-next {
    right: 0
}

@media(max-width:850px) {
    .video-card {
        flex-direction: column;
        text-align: center
    }

    .video-text {
        display: none;
        text-align: center;
        padding: 20px
    }
}

.why {
    padding: 80px 20px;
    text-align: center;
    background: var(--white)
}

.why h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--text-dark)
}

.why-sub {
    margin: 15px 0 30px;
    color: var(--text-light);
    font-size: 1.1rem
}

.why-btn-wrap {
    margin-top: 40px
}

.why-btn {
    padding: 14px 35px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(24, 136, 188, 0.2)
}

.why-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(24, 136, 188, 0.3)
}

.why-box {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 40px
}

.why-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    font-size: 1.1rem;
    background: var(--white);
    padding: 20px 25px;
    border-radius: 15px;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    font-weight: 500;
    color: var(--text-dark)
}

.why-item i {
    font-size: 24px;
    color: #2ecc71;
    flex-shrink: 0
}

.why-item:hover {
    transform: translateY(-5px);
    border-color: rgba(24, 136, 188, 0.2);
    box-shadow: var(--shadow-glow)
}

@media(max-width:768px) {
    .video-review {
        padding: 32px 20px 40px
    }

    .why {
        padding: 46px 20px 80px
    }

    .why-box {
        grid-template-columns: 1fr
    }
}

.mentor {
    background: #f8fbff;
    padding: 72px 20px
}

.mentor-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px
}

.mentor-left {
    flex-shrink: 0
}

.mentor-img-wrap {
    position: relative;
    width: 380px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(10, 75, 115, 0.18)
}

.mentor-img-wrap img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    display: block
}

.mentor-name-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(0deg, rgba(7, 26, 47, 0.92) 0%, transparent 100%)
}

.mentor-name-tag h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 2px
}

.mentor-name-tag span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem
}

.mentor-right {
    flex: 1
}

.mentor-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(24, 136, 188, 0.1);
    border: 1px solid rgba(24, 136, 188, 0.2);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px
}

.mentor-right h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    color: #12324a;
    line-height: 1.2;
    margin-bottom: 24px
}

.mentor-accent {
    color: var(--primary)
}

.mentor-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.mentor-stat {
    flex: 1;
    min-width: 90px;
    background: #fff;
    border: 1px solid rgba(24, 136, 188, 0.14);
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(10, 75, 115, 0.07)
}

.mentor-stat strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #12324a;
    line-height: 1;
    margin-bottom: 4px
}

.mentor-stat span {
    font-size: 0.75rem;
    color: #6f7f90;
    font-weight: 500
}

.mentor-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.mentor-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.mentor-point-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(24, 136, 188, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 15px;
    margin-top: 2px
}

.mentor-points p {
    font-size: 0.92rem;
    color: #4a5f72;
    line-height: 1.6;
    margin: 0
}

.mentor-points p b {
    color: #12324a
}

@media(max-width:900px) {
    .mentor-container {
        flex-direction: column;
        gap: 36px
    }

    .mentor-img-wrap {
        width: 100%;
        max-width: 360px;
        margin: 0 auto
    }

    .mentor-img-wrap img {
        height: 460px
    }
}

@media(max-width:480px) {
    .mentor {
        padding: 52px 16px
    }

    .mentor-stat strong {
        font-size: 1.3rem
    }
}

.faq {
    padding: 40px 20px 20px;
    text-align: center;
    background: #f8fbff
}

.faq h2 {
    color: var(--text-light);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 5px
}

.faq h3 {
    color: var(--text-dark);
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 50px
}

.faq-container {
    max-width: 850px;
    margin: auto;
    text-align: left
}

.faq-item {
    background: var(--white);
    margin: 15px 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: var(--transition)
}

.faq-item:hover {
    border-color: rgba(24, 136, 188, 0.3)
}

.faq-question {
    padding: 20px 25px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition)
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    color: var(--text-light);
    transition: all 0.3s ease;
    line-height: 1.6
}

.faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 5px 20px rgba(24, 136, 188, 0.1)
}

.faq-item.active .faq-question {
    color: var(--primary)
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 25px 20px
}

.faq-icon {
    transition: transform 0.3s ease;
    color: var(--primary)
}

.faq-item.active .faq-icon {
    transform: rotate(180deg)
}

.quick-actions {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999
}

.whatsapp-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
    animation: pulseWA 2s infinite
}

.whatsapp-btn i {
    font-size: 34px;
    color: #fff;
    line-height: 1
}

.whatsapp-icon-img {
    display: none;
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0
}

.whatsapp-label {
    display: none
}

.whatsapp-btn:hover {
    transform: scale(1.1) translateY(-3px);
    animation: none;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6)
}

@keyframes pulseWA {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6)
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
    }
}

@keyframes pulseBtnGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45)
    }

    70% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0)
    }
}

.login-btn,
.signup-btn,
.hero .primary-btn,
.hero .secondary-btn,
.primary-btn,
.secondary-btn,
.gain-btn,
.cert-btn,
.why-btn,
.courses .enroll-btn,
.course-card .enroll-btn,
.combo-card button,
.cta-box .footer-btn {
    animation: pulseBtnGlow 2s infinite
}

@keyframes mobileButtonShimmer {
    0% {
        transform: translateX(-135%);
        opacity: 0
    }

    20% {
        opacity: 0.2
    }

    55% {
        transform: translateX(135%);
        opacity: 0.48
    }

    100% {
        transform: translateX(135%);
        opacity: 0
    }
}

@media(max-width:768px) {

    .login-btn:active,
    .signup-btn:active,
    .primary-btn:active,
    .secondary-btn:active,
    .course-card .enroll-btn:active,
    .gain-btn:active,
    .cert-btn:active,
    .cta-box .footer-btn:active,
    .why-btn:active,
    .combo-card button:active {
        transform: scale(0.92) !important;
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(24, 136, 188, 0.2) !important
    }

    .course-card:active,
    .usp-card:active,
    .combo-card:active,
    .stat-box:active,
    .gain-item:active {
        transform: scale(0.97) translateY(0) !important;
        box-shadow: 0 4px 15px rgba(24, 136, 188, 0.15) !important;
        border-color: rgba(24, 136, 188, 0.4) !important;
        transition: all 0.15s ease
    }

    .signup-btn,
    .primary-btn,
    .gain-btn,
    .cert-btn,
    .why-btn,
    .combo-card button {
        position: relative;
        overflow: hidden
    }

    .signup-btn::after,
    .primary-btn::after,
    .gain-btn::after,
    .cert-btn::after,
    .why-btn::after,
    .combo-card button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: mobileButtonShimmer 2.5s infinite ease-in-out;
        pointer-events: none;
        z-index: 1
    }

    .course-card,
    .usp-card,
    .combo-card,
    .stat-box,
    .gain-item {
        animation: mobileCardFloatGlow 3.5s infinite alternate ease-in-out !important
    }

    @keyframes mobileCardFloatGlow {
        0% {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.03);
            transform: translateY(0)
        }

        100% {
            box-shadow: 0 12px 30px rgba(24, 136, 188, 0.18);
            border-color: rgba(24, 136, 188, 0.3);
            transform: translateY(-6px)
        }
    }

    .whatsapp-btn:hover,
    .whatsapp-btn:focus,
    .whatsapp-btn:active {
        animation: pulseWA 2s infinite !important;
        transform: scale(1.05) !important
    }

    .whatsapp-btn {
        width: 60px;
        min-width: 60px;
        height: 60px;
        padding: 0;
        gap: 0;
        border-radius: 50%
    }

    .whatsapp-btn i {
        font-size: 30px;
        display: none
    }

    .whatsapp-icon-img {
        display: block
    }

    .whatsapp-label {
        display: none;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.2px;
        white-space: nowrap
    }

    .login-btn,
    .signup-btn,
    .hero .primary-btn,
    .hero .secondary-btn,
    .primary-btn,
    .secondary-btn,
    .course-card .enroll-btn,
    .gain-btn,
    .cert-btn,
    .why-btn,
    .combo-card button,
    .cta-box .footer-btn {
        border-radius: 14px;
        animation: pulseBtnGlow 2s infinite !important;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box
    }

    .secondary-btn,
    .hero .secondary-btn,
    .course-card .enroll-btn,
    .login-btn {
        background: linear-gradient(135deg, rgba(24, 136, 188, 0.1), rgba(24, 136, 188, 0.02));
        border-color: rgba(24, 136, 188, 0.75);
        box-shadow: 0 10px 24px rgba(24, 136, 188, 0.16)
    }

    .signup-btn,
    .hero .primary-btn,
    .primary-btn,
    .gain-btn,
    .cert-btn,
    .cta-box .footer-btn {
        background: linear-gradient(135deg, #1996d1 0%, #1888bc 52%, #0f6f9f 100%);
        box-shadow: 0 12px 26px rgba(24, 136, 188, 0.28)
    }

    .login-btn,
    .signup-btn,
    .primary-btn,
    .secondary-btn,
    .course-card .enroll-btn,
    .gain-btn,
    .cert-btn,
    .cta-box .footer-btn {
        letter-spacing: 0.2px
    }

    .quick-actions {
        right: 18px;
        bottom: 18px
    }
}

@media (prefers-reduced-motion:reduce) {

    .login-btn,
    .signup-btn,
    .primary-btn,
    .secondary-btn,
    .course-card .enroll-btn,
    .gain-btn,
    .cert-btn,
    .cta-box .footer-btn,
    .badge,
    .stat-box,
    .course-card,
    .usp-card,
    .gain-item,
    .combo-card,
    .faq-item {
        animation: none !important
    }

    .login-btn::after,
    .signup-btn::after,
    .primary-btn::after,
    .secondary-btn::after,
    .course-card .enroll-btn::after,
    .gain-btn::after,
    .cert-btn::after,
    .cta-box .footer-btn::after {
        animation: none !important;
        content: none !important
    }
}

.icon i {
    font-size: 40px;
    color: #1888bc !important
}

.enquiry-section {
    padding: 42px 20px 52px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef6fb 100%)
}

.enquiry-card {
    max-width: 660px;
    margin: 0 auto;
    padding: 24px 24px 28px;
    border-radius: 24px;
    background: linear-gradient(180deg, #18bdd0 0%, #1499bb 44%, #0f5b88 100%);
    box-shadow: 0 24px 44px rgba(15, 73, 116, 0.18);
    border: 1px solid rgba(20, 153, 187, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease
}

.enquiry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 52px rgba(15, 73, 116, 0.24);
    border-color: rgba(255, 255, 255, 0.22)
}

.enquiry-card h2 {
    text-align: center;
    color: #fff7eb;
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 14px;
    font-family: "Georgia", "Times New Roman", serif
}

.enquiry-divider {
    width: 132px;
    height: 10px;
    margin: 0 auto 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(24, 136, 188, 0.9) 28%, rgba(24, 136, 188, 0.9) 72%, rgba(255, 255, 255, 0));
    position: relative
}

.enquiry-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 22%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d8e6f2;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
    animation: enquiryDotMove 2.8s ease-in-out infinite alternate
}

@keyframes enquiryDotMove {
    0% {
        left: 22%
    }

    100% {
        left: 78%
    }
}

.enquiry-form {
    display: grid;
    gap: 14px
}

.enquiry-form label {
    color: #173955;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: color 0.25s ease, transform 0.25s ease
}

.enquiry-form label:hover {
    color: #0a4b73;
    transform: translateX(2px)
}

.enquiry-form input,
.enquiry-form select {
    width: 100%;
    height: 54px;
    border: 1px solid rgba(24, 136, 188, 0.18);
    border-radius: 8px;
    padding: 0 18px;
    font-size: 1rem;
    color: #1f2f45;
    background: #ffffff;
    outline: none;
    box-shadow: 0 8px 18px rgba(7, 41, 74, 0.05);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease
}

.enquiry-form input::placeholder,
.enquiry-form select {
    color: #6f7684
}

.enquiry-form input:focus,
.enquiry-form select:focus {
    border-color: rgba(239, 68, 68, 0.92);
    box-shadow: 0 12px 24px rgba(239, 68, 68, 0.18);
    transform: translateY(-1px)
}

.enquiry-form input:hover,
.enquiry-form select:hover {
    border-color: rgba(24, 136, 188, 0.7);
    box-shadow: 0 12px 24px rgba(8, 76, 122, 0.12);
    transform: translateY(-1px)
}

.enquiry-submit {
    justify-self: stretch;
    margin-top: 10px;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #1888bc, #0a4b73);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 12px 24px rgba(5, 42, 78, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.04em
}

.enquiry-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(5, 42, 78, 0.28)
}

.enquiry-status {
    min-height: 22px;
    margin: 4px 0 14px;
    text-align: center;
    color: #12324a;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 10px
}

.enquiry-status.is-success {
    background: rgba(15, 157, 88, 0.18);
    color: #0f5132
}

.enquiry-status.is-error {
    background: rgba(217, 48, 37, 0.18);
    color: #8a1c13
}

.pre-footer-cta {
    padding: 60px 20px;
    text-align: center
}

.pre-footer-cta h2 {
    color: var(--text-dark);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    margin-bottom: 10px
}

.pre-footer-cta p {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 28px
}

.pre-footer-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(24, 136, 188, 0.4);
    transition: var(--transition);
    animation: pulseBtnGlow 2s infinite
}

.pre-footer-call-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(24, 136, 188, 0.5)
}

.footer {
    background: linear-gradient(135deg, #0a2540 0%, #1a365d 100%);
    color: var(--white);
    padding: 80px 20px 20px;
    position: relative
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.footer-box h4 {
    font-size: 20px;
    margin-bottom: 25px;
    color: var(--white);
    position: relative;
    padding-bottom: 10px
}

.footer-box h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px
}

.footer-box p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px
}

.brand-box img {
    height: 55px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2))
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    text-decoration: none;
    transition: var(--transition);
    font-size: 18px
}

.social-links a:hover {
    background: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(24, 136, 188, 0.4)
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6
}

.contact-item i {
    color: var(--primary);
    font-size: 18px;
    margin-top: 4px
}

.contact-item a {
    color: inherit;
    text-decoration: none;
    word-break: break-word
}

.contact-item a:hover {
    color: var(--white)
}

.cta-box .footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 12px 25px;
    background: var(--primary);
    color: var(--white) !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition)
}

.cta-box .footer-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(24, 136, 188, 0.3)
}

.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6)
}

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

@media(max-width:768px) {
    .enquiry-section {
        padding: 34px 16px 44px
    }

    .enquiry-card {
        max-width: 540px;
        padding: 22px 16px 24px;
        border-radius: 20px
    }

    .enquiry-card h2 {
        font-size: 2rem
    }

    .enquiry-divider {
        margin-bottom: 22px
    }

    .enquiry-form input,
    .enquiry-form select,
    .enquiry-submit {
        height: 50px
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center
    }

    .footer-box h4::after {
        left: 50%;
        transform: translateX(-50%)
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px
    }

    .contact-item i {
        margin-top: 0;
        font-size: 20px
    }

    .social-links {
        justify-content: center
    }
}

:root {
    --primary: #facc15;
    --primary-dark: #eab308;
    --secondary: #fff8d6;
    --text-dark: #111111;
    --text-light: #4a4a4a;
    --white: #ffffff;
    --shadow: 0 12px 30px rgba(17, 17, 17, 0.12);
    --shadow-glow: 0 0 24px rgba(250, 204, 21, 0.35)
}

body {
    color: #363636;
    background: #ffffff
}

.navbar {
    background: rgba(8, 8, 8, 0.96);
    border-bottom: 1px solid rgba(250, 204, 21, 0.42);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24)
}

.logo img {
    height: 48px;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 5px 12px rgba(250, 204, 21, 0.25))
}

.logo img:hover {
    transform: translateY(-1px) scale(1.03);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 7px 16px rgba(250, 204, 21, 0.38))
}

@media(max-width:480px) {
    .logo img {
        height: 38px
    }
}

.login-btn {
    border-color: #facc15;
    color: #facc15
}

.login-btn:hover,
.signup-btn,
.primary-btn,
.gain-btn,
.cert-btn,
.why-btn,
.course-card .enroll-btn,
.combo-card button,
.cta-box .footer-btn,
.enquiry-submit,
.pre-footer-call-btn {
    color: #111111 !important;
    background: linear-gradient(135deg, #fde047 0%, #facc15 55%, #eab308 100%);
    box-shadow: 0 12px 26px rgba(234, 179, 8, 0.28)
}

.signup-btn:hover,
.primary-btn:hover,
.gain-btn:hover,
.cert-btn:hover,
.why-btn:hover,
.course-card .enroll-btn:hover,
.combo-card button:hover,
.cta-box .footer-btn:hover,
.enquiry-submit:hover,
.pre-footer-call-btn:hover {
    color: #111111 !important;
    background: #fde047
}

.secondary-btn {
    color: #111111;
    border-color: #111111;
    background: #ffffff
}

.secondary-btn:hover {
    background: #fff8d6
}

.hero {
    background: radial-gradient(circle at 16% 82%, rgba(250, 204, 21, 0.28), transparent 35%), linear-gradient(135deg, #fffdf3 0%, #fff7c7 100%)
}

.hero::before {
    background: radial-gradient(circle at 82% 18%, rgba(17, 17, 17, 0.08), transparent 42%)
}

.tag,
.hero-form-tag,
.hero-tools-title,
.whyus-kicker {
    color: #111111;
    background: #facc15;
    border-color: #eab308
}

.rating,
.left h1,
.courses h2,
.usp h2,
.gain h3,
.certificate h2,
.video-review h2,
.mentor h2,
.faq h3,
.pre-footer-cta h2 {
    color: #111111
}

.hero-tools-slider,
.hero-tool-item,
.hero-form-card,
.stats-container,
.course-card,
.gain-box,
.cert-container,
.why-item,
.faq-item {
    border-color: rgba(234, 179, 8, 0.32);
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.1)
}

.stat-box .icon,
.course-card .icon,
.gain-icon,
.usp-card-icon,
.whyus-icon {
    color: #111111;
    background: linear-gradient(135deg, #fde047, #facc15)
}

.icon i,
.stat-box .icon i,
.course-card .icon i,
.gain-icon i,
.usp-card-icon i,
.whyus-icon i {
    color: #111111 !important
}

.courses,
.certificate,
.mentor,
.faq,
.pre-footer-cta {
    background: #ffffff
}

.usp,
.gain,
.video-review,
.enquiry-section {
    background: #fffdf3
}

.usp-card,
.gain-item,
.whyus-card {
    background: #ffffff;
    border-color: rgba(234, 179, 8, 0.34)
}

.whyus {
    background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.2), transparent 35%), #111111
}

.whyus h2,
.whyus-card h3 {
    color: #facc15
}

.whyus-sub,
.whyus-card p {
    color: rgba(255, 255, 255, 0.76)
}

.whyus-card {
    background: #1b1b1b
}

.whyus-tag {
    color: #111111;
    background: #facc15
}

.dm-icon {
    color: #111111;
    background: linear-gradient(135deg, #facc15, #111111);
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.24)
}

.dm-circle-path {
    border-color: rgba(234, 179, 8, 0.7)
}

.combo {
    background: radial-gradient(circle at top left, rgba(250, 204, 21, 0.22), transparent 30%), linear-gradient(145deg, #050505 0%, #141414 55%, #252006 100%)
}

.combo-card,
.combo-card-featured {
    background: linear-gradient(180deg, #ffffff 0%, #fff9dc 100%);
    border-color: rgba(250, 204, 21, 0.65)
}

.combo-badge,
.combo-badge-muted {
    color: #111111;
    background: #facc15
}

.combo-card h3,
.combo-price-option strong,
.combo-price-mode i {
    color: #111111
}

.combo-mode,
.combo-price-option,
.combo-card li {
    border-color: rgba(234, 179, 8, 0.28);
    background: #ffffff
}

.combo-card li i {
    color: #d29f00
}

.combo-registration {
    color: #111111;
    background: #fef3a7;
    border-color: #facc15
}

.enquiry-card {
    background: linear-gradient(160deg, #111111 0%, #242006 100%);
    border-color: rgba(250, 204, 21, 0.62);
    box-shadow: 0 24px 44px rgba(17, 17, 17, 0.2)
}

.enquiry-card h2,
.enquiry-form label {
    color: #facc15
}

.enquiry-divider {
    background: linear-gradient(90deg, transparent, #facc15 28%, #facc15 72%, transparent)
}

.enquiry-form input:focus,
.enquiry-form select:focus {
    border-color: #facc15;
    box-shadow: 0 10px 22px rgba(250, 204, 21, 0.22)
}

.faq-item.active {
    border-color: #facc15
}

.faq-item.active .faq-question,
.faq-icon {
    color: #b38600
}

.footer {
    background: #080808;
    border-top: 4px solid #facc15
}

.footer-box h4,
.contact-item i {
    color: #facc15
}

.footer-box h4::after,
.social-links a:hover {
    background: #facc15
}

.social-links a:hover {
    color: #111111
}

@keyframes pulseBtnGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45)
    }

    70% {
        box-shadow: 0 0 0 15px rgba(250, 204, 21, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0)
    }
}

@media(max-width:768px) {

    .login-btn,
    .secondary-btn,
    .course-card .enroll-btn {
        color: #111111;
        background: #fff8d6;
        border-color: #facc15
    }

    .signup-btn,
    .hero .primary-btn,
    .primary-btn,
    .gain-btn,
    .cert-btn,
    .why-btn,
    .combo-card button,
    .cta-box .footer-btn {
        color: #111111 !important;
        background: linear-gradient(135deg, #fde047, #facc15, #eab308)
    }
}

.courses {
    position: relative;
    padding-top: 56px;
    padding-bottom: 76px;
    overflow: hidden
}

.courses::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(250, 204, 21, 0.16);
    filter: blur(10px);
    pointer-events: none
}

.courses-header {
    position: relative;
    z-index: 1;
    margin-bottom: 30px
}

.courses h2 {
    display: block;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    letter-spacing: -0.03em
}

.courses-header::after {
    content: "";
    display: block;
    width: 54px;
    height: 5px;
    margin: 15px auto 0;
    border-radius: 999px;
    background: #facc15;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.28)
}

.course-card {
    counter-increment: course-card;
    position: relative;
    padding: 26px 22px 22px;
    border: 1px solid rgba(17, 17, 17, 0.09);
    border-radius: 24px;
    background: linear-gradient(160deg, #ffffff 0%, #fffdf2 100%);
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08);
    overflow: hidden
}

.course-cards {
    counter-reset: course-card
}

.course-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #111111 0%, #facc15 70%, #fde047 100%)
}

.course-card::after {
    content: "0" counter(course-card);
    position: absolute;
    top: 15px;
    right: 17px;
    color: rgba(17, 17, 17, 0.18);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em
}

.course-card:hover {
    transform: translateY(-9px);
    border-color: rgba(234, 179, 8, 0.6);
    box-shadow: 0 22px 42px rgba(17, 17, 17, 0.14)
}

.course-card .icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 22px;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b 0%, #facc15 100%);
    box-shadow: 0 12px 24px rgba(234, 179, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transform: rotate(-3deg)
}

.course-card .icon::after {
    content: "";
    position: absolute;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 16px
}

.course-card .icon i {
    position: relative;
    z-index: 1;
    color: #111111 !important;
    font-size: 29px
}

.course-card:hover .icon {
    color: #facc15;
    background: #111111;
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.22)
}

.course-card:hover .icon i {
    color: #facc15 !important
}

.course-card:hover .icon::after {
    border-color: rgba(250, 204, 21, 0.34)
}

.course-card h3 {
    min-height: 48px;
    margin-bottom: 9px;
    color: #111111;
    font-size: 18px;
    line-height: 1.3
}

.course-card p {
    color: #5e5e5e;
    line-height: 1.65
}

.course-card .enroll-btn {
    border: 0;
    border-radius: 13px;
    color: #111111 !important;
    background: #facc15
}

.course-prev,
.course-next {
    color: #facc15;
    background: #111111;
    border: 2px solid #facc15
}

.course-prev:hover,
.course-next:hover {
    color: #111111;
    background: #facc15
}

@media(max-width:768px) {
    .courses {
        padding-top: 46px;
        padding-bottom: 62px
    }

    .course-card {
        padding: 24px 18px 20px
    }

    .course-card .icon {
        width: 70px;
        height: 70px
    }
}

.usp-cta {
    max-width: 1040px;
    margin-top: 52px;
    padding: 24px;
    gap: 16px;
    border: 1px solid rgba(250, 204, 21, 0.62);
    border-radius: 26px;
    color: #ffffff;
    background: radial-gradient(circle at top left, rgba(250, 204, 21, 0.2), transparent 34%), linear-gradient(145deg, #080808 0%, #171717 100%);
    box-shadow: 0 20px 44px rgba(17, 17, 17, 0.2);
    overflow: hidden;
    position: relative
}

.usp-cta::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    bottom: -150px;
    border-radius: 50%;
    background: #facc15;
    opacity: 0.14;
    filter: blur(8px);
    pointer-events: none
}

.usp-cta-label {
    margin: 0;
    color: #facc15;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    position: relative;
    z-index: 1
}

.usp-cta-main {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
    position: relative;
    z-index: 1
}

.usp-cta-step {
    min-width: 0;
    padding: 17px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    white-space: normal;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease
}

.usp-cta-step:hover {
    transform: translateY(-4px);
    border-color: rgba(250, 204, 21, 0.64);
    background: rgba(250, 204, 21, 0.08)
}

.usp-step-number {
    position: absolute;
    top: 9px;
    right: 11px;
    color: rgba(250, 204, 21, 0.28);
    font-size: 18px;
    font-weight: 800
}

.usp-step-icon {
    width: 52px;
    height: 52px;
    grid-row: span 2;
    border-radius: 15px;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b, #facc15);
    box-shadow: 0 10px 20px rgba(234, 179, 8, 0.22);
    display: flex;
    align-items: center;
    justify-content: center
}

.usp-step-icon i {
    color: #111111;
    font-size: 20px
}

.usp-step-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left
}

.usp-step-copy strong {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.2
}

.usp-step-copy small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35
}

.usp-cta-arrow {
    width: 34px;
    height: 34px;
    align-self: center;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 50%;
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: journeyArrow 1.6s ease-in-out infinite
}

.usp-cta-arrow i {
    font-size: 13px
}

@keyframes journeyArrow {

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

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

@media(max-width:768px) {
    .usp-cta {
        padding: 22px 16px;
        border-radius: 22px
    }

    .usp-cta-main {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .usp-cta-arrow {
        justify-self: center;
        transform: rotate(90deg);
        animation: journeyArrowDown 1.6s ease-in-out infinite
    }

    @keyframes journeyArrowDown {

        0%,
        100% {
            transform: rotate(90deg) translateX(0)
        }

        50% {
            transform: rotate(90deg) translateX(4px)
        }
    }

    .usp-cta-step {
        width: 100%;
        padding: 15px
    }
}

.gain {
    position: relative;
    padding-top: 76px;
    padding-bottom: 72px;
    overflow: hidden
}

.gain::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: -190px;
    top: 30px;
    border-radius: 50%;
    background: rgba(250, 204, 21, 0.14);
    filter: blur(14px);
    pointer-events: none
}

.gain>h3 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.8rem, 3.4vw, 2.45rem);
    letter-spacing: -0.035em
}

.gain>.subtitle {
    position: relative;
    z-index: 1
}

.gain-box {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    padding: 34px;
    border: 1px solid rgba(234, 179, 8, 0.28);
    border-radius: 30px;
    background: linear-gradient(145deg, #ffffff 0%, #fffdf1 100%);
    box-shadow: 0 24px 54px rgba(17, 17, 17, 0.1)
}

.gain-left {
    gap: 16px
}

.gain-item {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06);
    overflow: hidden
}

.gain-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #facc15
}

.gain-icon {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 16px;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b, #facc15);
    box-shadow: 0 10px 20px rgba(234, 179, 8, 0.2)
}

.gain-icon i {
    color: #111111 !important
}

.gain-item:hover {
    border-color: rgba(234, 179, 8, 0.5);
    box-shadow: 0 18px 34px rgba(17, 17, 17, 0.11)
}

.gain-right {
    min-width: 460px
}

.dm-infographic {
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(250, 204, 21, 0.14) 0 30%, transparent 31%), radial-gradient(circle at center, transparent 0 70%, rgba(250, 204, 21, 0.08) 71% 72%, transparent 73%)
}

.dm-infographic::before,
.dm-infographic::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.dm-infographic::before {
    inset: 31px;
    border: 1px solid rgba(17, 17, 17, 0.06)
}

.dm-infographic::after {
    inset: 91px;
    border: 1px solid rgba(234, 179, 8, 0.2)
}

.dm-circle-path {
    width: 340px;
    height: 340px;
    border: 2px dashed rgba(234, 179, 8, 0.52);
    animation: dmPathRotate 28s linear infinite
}

@keyframes dmPathRotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.dm-center {
    width: 206px;
    min-height: 206px;
    padding: 31px 24px;
    border: 5px solid #facc15;
    border-radius: 50%;
    color: #ffffff;
    background: radial-gradient(circle at 32% 24%, rgba(250, 204, 21, 0.18), transparent 34%), #111111;
    box-shadow: 0 20px 38px rgba(17, 17, 17, 0.24), 0 0 0 10px rgba(250, 204, 21, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.dm-center h3 {
    color: #facc15;
    font-size: 1.35rem;
    line-height: 1.15
}

.dm-center p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    line-height: 1.45
}

.dm-node {
    width: 126px;
    gap: 7px;
    animation: dmNodeOrbit 18s linear infinite;
    animation-delay: calc(var(--i) * -3s)
}

@keyframes dmNodeOrbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateY(-170px) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg) translateY(-170px) rotate(-360deg)
    }
}

.dm-icon {
    position: relative;
    width: 62px;
    height: 62px;
    border: 3px solid #ffffff;
    border-radius: 19px;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b, #facc15);
    box-shadow: 0 13px 24px rgba(17, 17, 17, 0.16), 0 0 0 1px rgba(234, 179, 8, 0.34)
}

.dm-icon::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 13px
}

.dm-icon i {
    position: relative;
    z-index: 1;
    color: #111111;
    font-size: 22px
}

.dm-node:hover .dm-icon {
    color: #facc15;
    background: #111111;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 16px 30px rgba(17, 17, 17, 0.24)
}

.dm-node:hover .dm-icon i {
    color: #facc15
}

.dm-node span {
    min-width: 82px;
    padding: 5px 10px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    color: #111111;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 16px rgba(17, 17, 17, 0.08);
    font-size: 0.68rem;
    font-weight: 700
}

@media(max-width:992px) {
    .gain-right {
        min-width: 0
    }
}

@media(max-width:768px) {
    .gain {
        padding-top: 58px;
        padding-bottom: 58px
    }

    .gain-box {
        padding: 24px 14px;
        border-radius: 24px
    }

    .gain-item {
        flex-direction: row;
        align-items: center;
        text-align: left
    }

    .dm-infographic {
        width: 320px;
        height: 320px
    }

    .dm-infographic::before {
        inset: 22px
    }

    .dm-infographic::after {
        inset: 67px
    }

    .dm-circle-path {
        width: 250px;
        height: 250px
    }

    .dm-center {
        width: 154px;
        min-height: 154px;
        padding: 22px 15px;
        border-width: 4px;
        box-shadow: 0 14px 28px rgba(17, 17, 17, 0.22), 0 0 0 7px rgba(250, 204, 21, 0.12)
    }

    .dm-center h3 {
        font-size: 1rem
    }

    .dm-center p {
        font-size: 0.58rem
    }

    .dm-node {
        width: 90px;
        animation-name: dmNodeOrbitMobile
    }

    @keyframes dmNodeOrbitMobile {
        from {
            transform: translate(-50%, -50%) rotate(0deg) translateY(-125px) rotate(0deg)
        }

        to {
            transform: translate(-50%, -50%) rotate(360deg) translateY(-125px) rotate(-360deg)
        }
    }

    .dm-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        border-width: 2px
    }

    .dm-icon::after {
        inset: 5px;
        border-radius: 9px
    }

    .dm-icon i {
        font-size: 16px
    }

    .dm-node span {
        min-width: 0;
        padding: 3px 7px;
        font-size: 0.54rem
    }
}

.certificate {
    position: relative;
    padding-top: 78px;
    padding-bottom: 78px;
    overflow: hidden;
    background: radial-gradient(circle at 10% 15%, rgba(250, 204, 21, 0.14), transparent 27%), #ffffff
}

.cert-container {
    position: relative;
    gap: 60px;
    padding: 54px;
    border: 1px solid rgba(234, 179, 8, 0.32);
    border-radius: 32px;
    background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 34%), linear-gradient(145deg, #fffef8 0%, #fff9db 100%);
    box-shadow: 0 28px 60px rgba(17, 17, 17, 0.12);
    overflow: hidden
}

.cert-container::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -110px;
    bottom: -110px;
    border: 24px solid rgba(250, 204, 21, 0.14);
    border-radius: 50%;
    pointer-events: none
}

.cert-left,
.cert-right {
    position: relative;
    z-index: 1
}

.cert-kicker {
    width: fit-content;
    margin-bottom: 15px;
    padding: 7px 13px;
    border: 1px solid rgba(234, 179, 8, 0.42);
    border-radius: 999px;
    color: #111111;
    background: #facc15;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(234, 179, 8, 0.2)
}

.cert-left h2 {
    margin-bottom: 14px;
    color: #111111;
    font-size: clamp(2rem, 4vw, 2.7rem);
    letter-spacing: -0.04em
}

.cert-left p.subtitle {
    margin-bottom: 24px;
    color: #555555;
    font-size: 0.98rem;
    line-height: 1.75
}

.cert-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 26px
}

.cert-list li {
    min-height: 74px;
    padding: 12px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 15px;
    color: #222222;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.05);
    font-size: 0.82rem;
    line-height: 1.45;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease
}

.cert-list li:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 179, 8, 0.5);
    box-shadow: 0 13px 24px rgba(17, 17, 17, 0.09)
}

.cert-list li i {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(17, 17, 17, 0.09);
    border-radius: 12px;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b, #facc15);
    font-size: 16px;
    box-shadow: 0 8px 16px rgba(234, 179, 8, 0.18)
}

.cert-action {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.cert-action .cert-btn {
    padding: 13px 24px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    gap: 9px
}

.cert-action>span {
    max-width: 235px;
    color: #626262;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    line-height: 1.45
}

.cert-action>span i {
    color: #c29300
}

.cert-right {
    min-width: 460px
}

.cert-frame {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 14px;
    border: 1px solid rgba(250, 204, 21, 0.72);
    border-radius: 24px;
    background: #111111;
    box-shadow: 0 24px 46px rgba(17, 17, 17, 0.25), 0 0 0 7px rgba(250, 204, 21, 0.11);
    transform: rotate(1.5deg);
    transition: transform 0.35s ease, box-shadow 0.35s ease
}

.cert-frame:hover {
    transform: rotate(0deg) translateY(-7px);
    box-shadow: 0 30px 54px rgba(17, 17, 17, 0.3), 0 0 0 9px rgba(250, 204, 21, 0.14)
}

.cert-right .cert-frame img {
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    box-shadow: none;
    display: block
}

.cert-right .cert-frame img:hover {
    transform: none
}

.cert-seal {
    position: absolute;
    top: -24px;
    right: -20px;
    width: 64px;
    height: 64px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b, #facc15);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.cert-seal i {
    font-size: 25px
}

.cert-frame-caption {
    padding: 13px 5px 2px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 11px
}

.cert-frame-caption>i {
    color: #facc15;
    font-size: 20px
}

.cert-frame-caption span {
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    line-height: 1.4
}

.cert-frame-caption strong {
    color: #facc15;
    font-size: 12px
}

@media(max-width:992px) {
    .cert-container {
        padding: 38px 28px
    }

    .cert-right {
        min-width: 0
    }

    .cert-frame {
        margin: 12px auto 0;
        transform: none
    }
}

@media(max-width:600px) {
    .certificate {
        padding: 58px 16px
    }

    .cert-container {
        padding: 28px 16px;
        border-radius: 24px
    }

    .cert-list {
        grid-template-columns: 1fr
    }

    .cert-list li {
        min-height: 0
    }

    .cert-action {
        align-items: flex-start;
        flex-direction: column
    }

    .cert-action .cert-btn {
        width: 100%;
        justify-content: center
    }

    .cert-seal {
        top: -18px;
        right: -10px;
        width: 54px;
        height: 54px
    }
}

.video-review {
    position: relative;
    padding: 80px 20px 92px;
    overflow: hidden;
    background: radial-gradient(circle at 15% 20%, rgba(250, 204, 21, 0.16), transparent 28%), linear-gradient(145deg, #080808 0%, #181818 100%)
}

.video-review::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -150px;
    bottom: -160px;
    border: 30px solid rgba(250, 204, 21, 0.1);
    border-radius: 50%;
    pointer-events: none
}

.video-review-kicker {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 0 auto 14px;
    padding: 7px 13px;
    border: 1px solid rgba(250, 204, 21, 0.34);
    border-radius: 999px;
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase
}

.video-review>h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    letter-spacing: -0.04em
}

.video-review-subtitle {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0 auto 24px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.92rem;
    line-height: 1.7
}

.video-slider {
    max-width: 1120px;
    padding: 24px 62px 14px;
    position: relative;
    z-index: 1
}

.video-card {
    gap: 34px;
    min-height: 470px;
    padding: 26px;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(250, 204, 21, 0.1), transparent 35%), rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3)
}

.video-card video {
    width: min(100%, 330px);
    max-width: 330px;
    max-height: 410px;
    aspect-ratio: 9 / 12;
    object-fit: cover;
    border: 5px solid #facc15;
    border-radius: 24px;
    background: #111111;
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.38), 0 0 0 8px rgba(250, 204, 21, 0.09);
    transition: transform 0.35s ease, box-shadow 0.35s ease
}

.video-card video:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 52px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(250, 204, 21, 0.12)
}

.video-text {
    max-width: 430px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
    overflow: hidden
}

.video-text::before {
    content: "★★★★★";
    display: block;
    margin-bottom: 15px;
    color: #facc15;
    font-size: 14px;
    letter-spacing: 0.15em
}

.video-text::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -55px;
    width: 130px;
    height: 130px;
    border: 18px solid rgba(250, 204, 21, 0.08);
    border-radius: 50%
}

.quote-icon {
    margin-bottom: 11px;
    color: #facc15;
    font-size: 34px;
    opacity: 0.85
}

.video-text p {
    position: relative;
    z-index: 1;
    min-height: 112px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.75;
    font-style: normal
}

.video-text h4 {
    position: relative;
    z-index: 1;
    margin-bottom: 3px;
    color: #facc15;
    font-size: 1.2rem
}

.video-text span {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase
}

.video-prev,
.video-next {
    width: 48px;
    height: 48px;
    border: 2px solid #facc15;
    color: #facc15;
    background: #111111;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28)
}

.video-prev:hover,
.video-next:hover {
    color: #111111;
    background: #facc15;
    transform: translateY(-50%) scale(1.08)
}

@media(max-width:850px) {
    .video-review {
        padding: 62px 14px 72px
    }

    .video-slider {
        padding: 20px 42px 12px
    }

    .video-card {
        min-height: 0;
        gap: 25px;
        padding: 22px 16px
    }

    .video-card video {
        width: min(100%, 300px);
        max-height: 380px
    }

    .video-text {
        width: 100%;
        max-width: 500px;
        padding: 24px 18px;
        text-align: left
    }

    .video-text p {
        min-height: 0
    }
}

@media(max-width:480px) {
    .video-slider {
        padding-inline: 32px
    }

    .video-card {
        padding: 17px 10px;
        border-radius: 22px
    }

    .video-prev,
    .video-next {
        width: 38px;
        height: 38px
    }
}

.hero {
    min-height: 720px;
    padding: 54px 20px 132px;
    background: radial-gradient(circle at 8% 12%, rgba(250, 204, 21, 0.24), transparent 28%), radial-gradient(circle at 92% 78%, rgba(250, 204, 21, 0.2), transparent 30%), linear-gradient(145deg, #fffef8 0%, #fff8cf 100%)
}

.hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -240px;
    right: -190px;
    border: 42px solid rgba(17, 17, 17, 0.045);
    border-radius: 50%;
    pointer-events: none
}

.hero .container {
    width: min(100%, 1160px);
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
    gap: 54px;
    align-items: center
}

.hero .left {
    max-width: 610px
}

.hero .tag {
    padding: 8px 14px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    color: #111111;
    background: #facc15;
    box-shadow: 0 9px 18px rgba(234, 179, 8, 0.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase
}

.hero .left h1 {
    max-width: 650px;
    margin: 18px 0 16px;
    color: #111111;
    font-size: clamp(2.55rem, 5vw, 4.45rem);
    line-height: 1.02;
    letter-spacing: -0.055em
}

.hero-heading-highlight {
    color: #facc15;
    /* background: linear-gradient(transparent 64%, #facc15 64%); */
    padding-inline: 2px
}

.hero .left>p {
    max-width: 585px;
    margin-bottom: 17px;
    color: #565656;
    font-size: 1rem;
    line-height: 1.75
}

.hero .left>p b {
    color: #111111
}

.hero-proof-row {
    width: fit-content;
    margin: 4px 0 18px;
    padding: 9px 12px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 9px 22px rgba(17, 17, 17, 0.06);
    display: flex;
    align-items: center;
    gap: 12px
}

.hero .rating {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: #555555;
    font-size: 10px;
    line-height: 1.3
}

.hero-stars {
    color: #d8a600;
    font-size: 11px;
    letter-spacing: 0.08em
}

.hero .rating strong,
.hero-proof-item strong {
    color: #111111;
    font-size: 13px
}

.hero-proof-divider {
    width: 1px;
    height: 32px;
    background: rgba(17, 17, 17, 0.12)
}

.hero-proof-item {
    color: #656565;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    line-height: 1.35
}

.hero .btn-group {
    gap: 10px;
    margin-top: 0
}

.hero .primary-btn,
.hero .secondary-btn {
    min-height: 48px;
    padding: 11px 21px;
    border-radius: 13px;
    justify-content: center;
    font-size: 14px;
    font-weight: 700
}

.hero .secondary-btn {
    border-color: rgba(17, 17, 17, 0.2);
    color: #111111;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 9px 20px rgba(17, 17, 17, 0.07)
}

.hero-benefits {
    margin-top: 15px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.hero-benefits span {
    padding: 5px 9px;
    border-radius: 999px;
    color: #555555;
    background: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600
}

.hero-benefits i {
    color: #b88b00
}

.hero .hero-tools {
    max-width: 600px;
    margin-top: 20px
}

.hero .hero-tools-title {
    margin-bottom: 9px;
    padding: 0;
    border: 0;
    color: #111111;
    background: transparent;
    box-shadow: none;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase
}

.hero .hero-tools-title i {
    color: #b88b00
}

.hero .hero-tools-slider {
    padding: 11px 0;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 25px rgba(17, 17, 17, 0.07)
}

.hero .hero-tool-item {
    min-width: 138px;
    padding: 9px 13px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 12px;
    box-shadow: 0 5px 12px rgba(17, 17, 17, 0.05)
}

.hero .hero-tool-item img {
    width: 25px;
    height: 25px;
    flex-basis: 25px
}

.hero .hero-tool-item span {
    color: #333333;
    font-size: 0.76rem
}

.hero .right {
    max-width: 475px
}

.hero-form-card {
    position: relative;
    padding: 25px 24px 24px;
    border: 1px solid rgba(250, 204, 21, 0.7);
    border-radius: 27px;
    background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.13), transparent 28%), #111111;
    box-shadow: 0 28px 56px rgba(17, 17, 17, 0.26), 0 0 0 8px rgba(250, 204, 21, 0.1);
    overflow: hidden
}

.hero-form-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    left: -105px;
    bottom: -105px;
    border: 20px solid rgba(250, 204, 21, 0.08);
    border-radius: 50%;
    pointer-events: none
}

.hero-form-card:hover {
    transform: translateY(-5px);
    border-color: #facc15;
    box-shadow: 0 34px 64px rgba(17, 17, 17, 0.31), 0 0 0 9px rgba(250, 204, 21, 0.13)
}

.hero-form-tag {
    position: relative;
    z-index: 1;
    padding: 7px 12px;
    gap: 7px;
    border: 1px solid rgba(250, 204, 21, 0.36);
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
    font-size: 10px;
    letter-spacing: 0.08em
}

.hero-form-heading {
    position: relative;
    z-index: 1;
    margin: 13px 0 16px
}

.hero-form-card h2 {
    color: #ffffff;
    font-size: clamp(1.22rem, 2vw, 1.6rem);
    letter-spacing: -0.025em
}

.hero-form-copy {
    max-width: 350px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.75rem
}

.hero-enquiry-form {
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr;
    gap: 7px
}

.hero-enquiry-form label {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem
}

.hero-enquiry-form input,
.hero-enquiry-form select {
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    color: #111111;
    background: rgba(255, 255, 255, 0.96);
    font-size: 0.78rem
}

.hero-enquiry-form .enquiry-submit {
    height: 45px;
    margin-top: 5px;
    border-radius: 11px;
    font-size: 0.8rem
}

@media(max-width:1024px) {
    .hero .container {
        grid-template-columns: minmax(0, 1fr) minmax(350px, 0.86fr);
        gap: 28px
    }

    .hero .left h1 {
        font-size: clamp(2.25rem, 5vw, 3.5rem)
    }
}

@media(max-width:768px) {
    .hero {
        min-height: 0;
        padding: 40px 14px 94px
    }

    .hero .container {
        gap: 26px
    }

    .hero .left h1 {
        margin-top: 15px;
        font-size: clamp(2.15rem, 11vw, 3rem);
        line-height: 1.05
    }

    .hero-proof-row {
        width: 100%;
        justify-content: center
    }

    .hero-benefits {
        justify-content: center
    }

    .hero .hero-tools {
        margin-top: 21px
    }

    .hero-form-card {
        padding: 22px 16px;
        border-radius: 23px
    }

    .hero-enquiry-form {
        grid-template-columns: 1fr
    }
}

.enquiry-section {
    position: relative;
    padding: 88px 20px;
    overflow: hidden;
    background: radial-gradient(circle at 12% 20%, rgba(250, 204, 21, 0.18), transparent 29%), linear-gradient(145deg, #080808 0%, #191919 100%)
}

.enquiry-section::before {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    right: -180px;
    top: -185px;
    border: 34px solid rgba(250, 204, 21, 0.09);
    border-radius: 50%;
    pointer-events: none
}

.enquiry-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1120px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
    align-items: center;
    gap: 70px
}

.enquiry-intro {
    color: #ffffff
}

.enquiry-kicker,
.enquiry-card-label {
    width: fit-content;
    padding: 7px 12px;
    border: 1px solid rgba(250, 204, 21, 0.32);
    border-radius: 999px;
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase
}

.enquiry-intro h2 {
    max-width: 520px;
    margin: 18px 0 14px;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.05em
}

.enquiry-intro>p {
    max-width: 490px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.96rem;
    line-height: 1.75
}

.enquiry-trust-list {
    margin: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 11px
}

.enquiry-trust-list span {
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600
}

.enquiry-trust-list i {
    color: #facc15
}

.enquiry-contact-note {
    width: fit-content;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
    display: flex;
    align-items: center;
    gap: 11px
}

.enquiry-contact-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #111111;
    background: #facc15;
    display: flex;
    align-items: center;
    justify-content: center
}

.enquiry-contact-note>span:last-child {
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    flex-direction: column;
    font-size: 10px
}

.enquiry-contact-note strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: 13px
}

.enquiry-section .enquiry-card {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 28px 28px 30px;
    border: 1px solid rgba(250, 204, 21, 0.58);
    border-radius: 27px;
    background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 29%), #ffffff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32), 0 0 0 8px rgba(250, 204, 21, 0.08);
    overflow: hidden
}

.enquiry-section .enquiry-card:hover {
    transform: translateY(-5px);
    border-color: #facc15;
    box-shadow: 0 36px 68px rgba(0, 0, 0, 0.38), 0 0 0 9px rgba(250, 204, 21, 0.11)
}

.enquiry-card-label {
    color: #111111;
    background: #facc15;
    border-color: rgba(17, 17, 17, 0.1)
}

.enquiry-section .enquiry-card h2 {
    margin: 14px 0 4px;
    color: #111111;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    letter-spacing: -0.035em;
    text-align: left
}

.enquiry-card-copy {
    margin: 0;
    color: #6b6b6b;
    font-size: 0.78rem
}

.enquiry-section .enquiry-divider {
    width: 52px;
    height: 4px;
    margin: 14px 0 20px;
    background: #facc15
}

.enquiry-section .enquiry-divider::after {
    display: none
}

.enquiry-section .enquiry-form {
    grid-template-columns: 1fr;
    gap: 8px
}

.enquiry-section .enquiry-form label {
    margin-top: 3px;
    color: #333333;
    font-size: 0.7rem;
    font-weight: 700
}

.enquiry-section .enquiry-form input,
.enquiry-section .enquiry-form select {
    height: 45px;
    padding: 0 13px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 10px;
    color: #111111;
    background: #fffef8;
    box-shadow: none;
    font-size: 0.78rem
}

.enquiry-section .enquiry-form input:focus,
.enquiry-section .enquiry-form select:focus {
    border-color: #eab308;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.16);
    transform: none
}

.enquiry-section .enquiry-submit {
    height: 48px;
    margin-top: 8px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 0.82rem
}

@media(max-width:900px) {
    .enquiry-shell {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .enquiry-intro {
        text-align: center
    }

    .enquiry-kicker,
    .enquiry-contact-note {
        margin-inline: auto
    }

    .enquiry-intro h2,
    .enquiry-intro>p {
        margin-left: auto;
        margin-right: auto
    }

    .enquiry-trust-list {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left
    }
}

@media(max-width:600px) {
    .enquiry-section {
        padding: 62px 14px
    }

    .enquiry-intro h2 {
        font-size: clamp(2rem, 10vw, 2.7rem)
    }

    .enquiry-section .enquiry-card {
        padding: 23px 16px 25px;
        border-radius: 23px
    }
}

.mentor {
    position: relative;
    padding: 88px 20px;
    overflow: hidden;
    background: radial-gradient(circle at 88% 15%, rgba(250, 204, 21, 0.16), transparent 26%), linear-gradient(145deg, #fffef9 0%, #fff9dc 100%)
}

.mentor::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -160px;
    bottom: -170px;
    border: 30px solid rgba(17, 17, 17, 0.04);
    border-radius: 50%;
    pointer-events: none
}

.mentor-container {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    gap: 68px;
    align-items: stretch;
    padding: 36px;
    border: 1px solid rgba(234, 179, 8, 0.28);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 26px 58px rgba(17, 17, 17, 0.1);
    backdrop-filter: blur(8px)
}

.mentor-left {
    display: flex;
    align-items: stretch
}

.mentor-img-wrap {
    width: 370px;
    min-height: 100%;
    border: 8px solid #111111;
    border-radius: 27px;
    box-shadow: 0 26px 50px rgba(17, 17, 17, 0.25), 0 0 0 8px rgba(250, 204, 21, 0.12);
    overflow: visible;
    transform: rotate(-1.5deg);
    transition: transform 0.35s ease, box-shadow 0.35s ease
}

.mentor-img-wrap:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 32px 58px rgba(17, 17, 17, 0.28), 0 0 0 10px rgba(250, 204, 21, 0.15)
}

.mentor-img-wrap img {
    height: 100%;
    min-height: 555px;
    border-radius: 18px;
    object-position: center top
}

.mentor-photo-badge {
    position: absolute;
    top: -13px;
    left: -18px;
    z-index: 2;
    padding: 2px 6px;
    border: 4px solid #ffffff;
    border-radius: 999px;
    color: #111111;
    background: #facc15;
    box-shadow: 0 12px 22px rgba(17, 17, 17, 0.2);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    /* transform: rotate(1.5deg) */
}

.mentor-name-tag {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 20px 17px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(0deg, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.65) 55%, transparent 100%)
}

.mentor-name-tag h4 {
    color: #facc15;
    font-size: 1.18rem
}

.mentor-name-tag span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem
}

.mentor-right {
    padding: 8px 0
}

.mentor-kicker {
    margin-bottom: 13px;
    padding: 7px 12px;
    border-color: rgba(17, 17, 17, 0.12);
    color: #111111;
    background: #facc15;
    box-shadow: 0 8px 17px rgba(234, 179, 8, 0.18)
}

.mentor-right h2 {
    margin-bottom: 10px;
    color: #111111;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.045em
}

.mentor-accent {
    color: #111111;
    background: linear-gradient(transparent 67%, #facc15 67%)
}

.mentor-intro {
    max-width: 650px;
    margin: 0 0 20px;
    color: #666666;
    font-size: 0.86rem;
    line-height: 1.7
}

.mentor-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 20px
}

.mentor-stat {
    min-width: 0;
    padding: 12px 8px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 8px 17px rgba(17, 17, 17, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease
}

.mentor-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 179, 8, 0.55);
    box-shadow: 0 13px 24px rgba(17, 17, 17, 0.1)
}

.mentor-stat strong {
    color: #111111;
    font-size: 1.45rem
}

.mentor-stat span {
    color: #777777;
    font-size: 0.62rem;
    line-height: 1.3
}

.mentor-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.mentor-points li {
    padding: 13px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.04);
    transition: transform 0.3s ease, border-color 0.3s ease
}

.mentor-points li:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 179, 8, 0.48)
}

.mentor-point-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 11px;
    color: #111111;
    background: linear-gradient(145deg, #ffe96b, #facc15);
    box-shadow: 0 8px 16px rgba(234, 179, 8, 0.18)
}

.mentor-points p {
    color: #656565;
    font-size: 0.7rem;
    line-height: 1.55
}

.mentor-points p b {
    color: #111111
}

@media(max-width:1000px) {
    .mentor-container {
        flex-direction: column;
        gap: 38px
    }

    .mentor-img-wrap {
        width: min(100%, 390px);
        min-height: auto;
        margin: 0 auto;
        transform: none
    }

    .mentor-img-wrap img {
        height: 520px;
        min-height: 0
    }
}

@media(max-width:650px) {
    .mentor {
        padding: 62px 14px
    }

    .mentor-container {
        padding: 22px 14px;
        border-radius: 24px
    }

    .mentor-right h2 {
        font-size: clamp(1.9rem, 9vw, 2.45rem)
    }

    .mentor-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .mentor-points {
        grid-template-columns: 1fr
    }

    .mentor-img-wrap img {
        height: 450px
    }

    .mentor-photo-badge {
        left: 10px
    }
}

.faq {
    position: relative;
    padding: 88px 20px 96px;
    overflow: hidden;
    background: radial-gradient(circle at 12% 15%, rgba(250, 204, 21, 0.17), transparent 27%), linear-gradient(145deg, #fffef9 0%, #fff9dd 100%)
}

.faq::before {
    content: "?";
    position: absolute;
    right: 5%;
    top: -80px;
    color: rgba(17, 17, 17, 0.035);
    font-size: 300px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none
}

.faq-kicker {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 0 auto 13px;
    padding: 7px 12px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 999px;
    color: #111111;
    background: #facc15;
    box-shadow: 0 8px 17px rgba(234, 179, 8, 0.18);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase
}

.faq h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 9px;
    color: #111111;
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -0.045em
}

.faq-subtitle {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto 34px;
    color: #666666;
    font-size: 0.88rem;
    line-height: 1.7
}

.faq-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 15px;
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 22px 48px rgba(17, 17, 17, 0.09);
    backdrop-filter: blur(8px)
}

.faq-item {
    margin: 9px 0;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 16px rgba(17, 17, 17, 0.04)
}

.faq-item:hover {
    border-color: rgba(234, 179, 8, 0.48);
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(17, 17, 17, 0.08)
}

.faq-question {
    padding: 17px 18px;
    color: #222222;
    font-size: 0.92rem;
    gap: 14px
}

.faq-question>span {
    display: flex;
    align-items: center;
    gap: 13px
}

.faq-question b {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #111111;
    background: #facc15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    box-shadow: 0 7px 14px rgba(234, 179, 8, 0.17)
}

.faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #facc15;
    background: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0
}

.faq-answer {
    padding: 0 65px;
    color: #666666;
    font-size: 0.82rem;
    line-height: 1.75
}

.faq-item.active {
    border-color: rgba(234, 179, 8, 0.65);
    box-shadow: 0 13px 25px rgba(17, 17, 17, 0.09)
}

.faq-item.active .faq-question {
    color: #111111
}

.faq-item.active .faq-answer {
    max-height: 220px;
    padding: 0 65px 18px
}

.faq-item.active .faq-icon {
    color: #111111;
    background: #facc15
}

.pre-footer-cta {
    position: relative;
    padding: 82px 20px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 15% 25%, rgba(250, 204, 21, 0.18), transparent 30%), linear-gradient(145deg, #080808 0%, #1a1a1a 100%)
}

.pre-footer-cta::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -165px;
    top: -180px;
    border: 32px solid rgba(250, 204, 21, 0.09);
    border-radius: 50%
}

.pre-footer-cta-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 38px;
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px)
}

.pre-footer-kicker {
    width: fit-content;
    margin: 0 auto 14px;
    padding: 7px 12px;
    border: 1px solid rgba(250, 204, 21, 0.34);
    border-radius: 999px;
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase
}

.pre-footer-cta h2 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -0.045em
}

.pre-footer-cta p {
    max-width: 660px;
    margin: 0 auto 25px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.86rem;
    line-height: 1.7
}

.pre-footer-actions {
    display: flex;
    justify-content: center;
    gap: 11px;
    flex-wrap: wrap
}

.pre-footer-call-btn,
.pre-footer-whatsapp-btn {
    min-height: 47px;
    padding: 11px 21px;
    border-radius: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    transition: var(--transition)
}

.pre-footer-whatsapp-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07)
}

.pre-footer-whatsapp-btn:hover {
    transform: translateY(-3px);
    border-color: #25d366;
    color: #ffffff;
    background: rgba(37, 211, 102, 0.16)
}

.footer {
    padding-top: 66px;
    border-top: 1px solid rgba(250, 204, 21, 0.28);
    background: linear-gradient(180deg, #080808 0%, #111111 100%)
}

.footer-container {
    gap: 42px;
    padding-bottom: 42px
}

.footer-box {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025)
}

.brand-box img {
    width: min(100%, 265px);
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 8px 18px rgba(250, 204, 21, 0.16))
}

.footer-box h4 {
    margin-bottom: 19px;
    color: #facc15;
    font-size: 16px
}

.footer-box p,
.contact-item {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px
}

.contact-item {
    gap: 10px;
    margin-bottom: 11px
}

.contact-item i {
    color: #facc15;
    font-size: 14px
}

.social-links a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(250, 204, 21, 0.18);
    color: #facc15;
    background: rgba(250, 204, 21, 0.06);
    font-size: 14px
}

.quick-actions {
    right: 20px;
    bottom: 20px
}

.whatsapp-btn {
    width: 54px;
    height: 54px;
    border: 3px solid #ffffff;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.38)
}

@media(max-width:650px) {
    .faq {
        padding: 62px 14px 70px
    }

    .faq-container {
        padding: 9px;
        border-radius: 20px
    }

    .faq-question {
        padding: 14px 12px;
        font-size: 0.8rem
    }

    .faq-question>span {
        gap: 9px
    }

    .faq-question b {
        width: 30px;
        height: 30px
    }

    .faq-answer,
    .faq-item.active .faq-answer {
        padding-left: 51px;
        padding-right: 14px
    }

    .pre-footer-cta {
        padding: 62px 14px
    }

    .pre-footer-cta-content {
        padding: 28px 16px;
        border-radius: 22px
    }

    .pre-footer-actions {
        flex-direction: column
    }

    .pre-footer-call-btn,
    .pre-footer-whatsapp-btn {
        width: 100%
    }

    .footer-box {
        padding: 18px 14px
    }
}

.courses,
.usp,
.whyus,
.gain,
.combo,
.certificate,
.video-review,
.enquiry-section,
.mentor,
.faq,
.pre-footer-cta,
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px
}

.login-btn,
.signup-btn,
.hero .primary-btn,
.hero .secondary-btn,
.primary-btn,
.secondary-btn,
.course-card .enroll-btn,
.gain-btn,
.cert-btn,
.why-btn,
.combo-card button,
.cta-box .footer-btn,
.pre-footer-call-btn,
.course-card,
.usp-card,
.combo-card,
.stat-box,
.gain-item,
.faq-item {
    animation: none !important
}

.hero-tools-track,
.dm-circle-path,
.dm-node,
.whatsapp-btn {
    will-change: transform
}

@media(max-width:768px) {

    .hero-form-card,
    .whyus-card,
    .video-card,
    .enquiry-card,
    .mentor-container,
    .faq-container,
    .pre-footer-cta-content {
        backdrop-filter: none
    }

    .whatsapp-btn i {
        display: block
    }
}

.cert-right {
    flex: 1.25;
    min-width: 520px
}

.cert-frame {
    max-width: 650px
}

.cert-right .cert-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 979;
    object-fit: contain
}

.video-slider {
    max-width: 1240px
}

.video-card {
    gap: 42px;
    min-height: 650px
}

.video-card video {
    width: min(100%, 390px);
    max-width: 390px;
    max-height: none;
    aspect-ratio: 9 / 16;
    object-fit: contain
}

@media(max-width:992px) {
    .cert-right {
        width: 100%;
        min-width: 0
    }

    .cert-frame {
        width: 100%;
        max-width: 720px
    }
}

@media(max-width:850px) {
    .video-card {
        min-height: 0
    }

    .video-card video {
        width: min(100%, 350px);
        max-width: 350px
    }
}

.certificate {
    padding-top: 48px;
    padding-bottom: 48px
}

.cert-container {
    gap: 36px;
    padding: 34px
}

.cert-left p.subtitle {
    margin-bottom: 16px;
    line-height: 1.55
}

.cert-list {
    gap: 8px;
    margin-bottom: 18px
}

.cert-list li {
    min-height: 58px;
    padding: 9px
}

.cert-list li i {
    width: 34px;
    height: 34px
}

.cert-frame {
    max-width: 620px;
    padding: 10px
}

.cert-right .cert-frame img {
    aspect-ratio: 16 / 10;
    object-fit: cover
}

.cert-frame-caption {
    padding-top: 8px
}

@media(max-width:992px) {
    .certificate {
        padding: 40px 16px
    }

    .cert-container {
        gap: 22px;
        padding: 24px 18px
    }

    .cert-frame {
        max-width: 620px;
        margin-top: 0
    }
}

@media(max-width:600px) {
    .certificate {
        padding: 32px 12px
    }

    .cert-container {
        padding: 22px 14px
    }

    .cert-left h2 {
        margin-bottom: 8px
    }

    .cert-list {
        gap: 7px
    }

    .cert-frame-caption {
        display: none
    }
}