html[dir="rtl"],
[dir="rtl"] body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.logo {
    color: #fff !important;
    font-weight: 700;
    font-size: 21px !important;
    text-transform: capitalize !important;
}

header {
    background-color: #17303b;
}

.uk-navbar-nav>li>a {
    min-height: 80px;
}

@media (max-width: 960px) {
    .uk-navbar-nav>li>a {
        min-height: 70px;
    }
}

@media (max-width: 960px) {
    .uk-navbar-nav {
        gap: 25px;
    }
}

header .uk-navbar {
    max-width: 1090px;
}

.uk-navbar-nav>li>a {
    color: #fff;
    text-transform: inherit;
    font-size: 14px;
    letter-spacing: 0.08em;
}

.uk-navbar-nav>li>a:hover {
    color: #00d084;
}

.uk-navbar-right.uk-visible\@s {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lang-switcher::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    transform: translateY(-25%);
    pointer-events: none;
    opacity: 0.9;
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 36px 8px 16px;
    font-size: 14px;
    letter-spacing: 0.08em;
    cursor: pointer;
    min-width: 150px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-family: "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.lang-select option {
    color: #17303b;
    font-family: "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    font-style: normal;
}

.lang-select:hover {
    background-color: rgba(0, 208, 132, 0.2);
    border-color: rgba(0, 208, 132, 0.65);
}

.lang-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 208, 132, 0.45);
    border-color: rgba(0, 208, 132, 0.9);
}

.lang-switcher--desktop {
    margin-left: 12px;
}

.lang-switcher--mobile {
    display: block;
    width: 90%;
    margin: 10px auto;
}


.lang-switcher--mobile .lang-select {
    width: 100%;
    min-width: 0;
}

.lang-switcher--mobile::after {
    right: 20px;
}

.mob-button {
    color: #eee;
    padding: 10px;
    border-radius: 5px;
}

header .uk-width-large {
    background-color: #17303b;
}

[popover] {
    margin: 0;
    border: 0;
    padding: 20px;
    width: 100%;
    left: 0;
    top: 70px;
    background-color: #1c3a47;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s;
}

[popover]:popover-open {
    opacity: 1;
    transform: translateY(0);
}

@starting-style {
    [popover]:popover-open {
        opacity: 0;
        transform: translateY(-10px);
    }
}

[popover]::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease, display 0.3s;
}

[popover]:popover-open::backdrop {
    opacity: 1;
}

@starting-style {
    [popover]:popover-open::backdrop {
        opacity: 0;
    }
}

#mobile-menu {
    margin: 0;
    padding: 0;
}

.mob-menu {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mob-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.mob-menu li:last-child {
    border-bottom: 0;
}

.mob-menu li a {
    padding: 16px 0;
    transition: color 0.2s ease-in-out;
    text-transform: capitalize;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    display: block;

    &:hover {
        text-decoration: none;
        color: #00d084;
    }
}

.site-footer {
    background-color: #17303b;
    color: #fff;
    padding: 50px 0 0 0;
}

.site-footer a {
    color: #fff;
}

.site-footer a:hover {
    color: #00d084;
}

.site-footer p {
    font-size: 15px;
    color: #fff;
}

.footer-top {
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.footer-bottom {
    background-color: #00d084;
    color: #17303b;
    margin-top: 50px;
    padding: 11px 0;
}

.copyright {
    font-size: 14px;
    color: #17303b;
    text-align: center;
}

.footer-widget .footer-heaing {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 25px;
    padding-bottom: 7px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    color: #00d084;
    font-weight: normal;
}

.footer-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-widget ul li {
    margin-bottom: 20px;
}

.footer-widget ul li svg {
    margin-right: 7px;
}

.footer-widget .ul2 {
    margin-top: 40px;
}

@media (max-width: 960px) {
    .footer-widget .ul2 {
        margin-top: 0;
    }
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    text-transform: none;
    font-size: 17px;
    line-height: 1.5;
    color: #222;
    word-wrap: break-word;
}

#content,
#primary,
main,
header.site-header {
    margin-top: 0;
    padding-top: 0;
}

#_hs_adcheck {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: block;
}

h2,
h1 {
    font-weight: bold;
}

h3 {
    font-weight: bold;
}

h2 {
    font-size: 35px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
}

.site-f_hs_adcheck {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

.site-footer {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.uk-container {
    max-width: 1200px;
}

.hero-section {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 120px 0 50px;
    margin-bottom: 140px;
    background-image: -webkit-gradient(linear, left top, right top, from(#9b51e0), to(#00d084));
    background-image: linear-gradient(90deg, #9b51e0, #00d084);
    color: #ffffff;
}

.hero-section:before {
    content: "";
    background-image: url(/assets/images/background-4.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: inherit;
    transition: inherit;
    pointer-events: none;
    opacity: 0.05;
}

@media (max-width: 960px) {
    .hero-section {
        padding-top: 40px;
        padding-bottom: 40px;
        background-position: center center;
    }
}

.hero-section h1 {
    font-size: 55px;
    font-weight: normal;
    color: #fff;
    margin-right: 5%;
}

@media (max-width: 960px) {
    .hero-section h1 {
        margin-right: 0;
        font-size: 45px;
    }
}

.hero-section h3 {
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
    color: #fff;
}

.hero-section .hero-form {
    max-width: 444px;
}

.hero-section .hero-inner {
    position: relative;
    z-index: 1;
}

.hero-section .hero-meta {
    margin-top: -10px;
}

.shape {
    height: 50px;
    width: calc(100% + 1.3px);
    fill: #f7f8f9;
    position: relative;
    left: 0;
    display: block;
}

.shape80 {
    height: 30px;
}

.shape-bottom {
    display: block;
    margin-top: -1px;
}

.shape-top {
    top: -51px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.shapew {
    fill: #fff !important;
    top: -71px;
}

@media (max-width: 960px) {
    .shapew {
        top: -41px;
    }
}

.uk-input {
    padding: 0 15px;
    background: #fff;
    color: #333;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 12px -3px rgba(0, 0, 0, 0.055);
    box-shadow: 0 0 12px -3px rgba(0, 0, 0, 0.055);
    border: 1px solid #818a91;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.uk-input {
    height: 55px;
}

.uk-grid-small>.uk-grid-margin {
    margin-top: 20px;
}

.btn-submit {
    background-color: #9b51e0;
    color: #fff;
    border-radius: 12px;
    text-transform: uppercase;
    width: 100%;
    height: 65px;
    font-weight: bold;
    text-align: center;
    border: 0;
    outline: inherit;
    font-size: 17px;
    font-weight: 700;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.btn-submit:hover {
    background-color: #00d084;
}

a.cu-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 15px 30px;
    background-color: #00d084;
    color: #e0f4f5;
    text-decoration: none;
    border-radius: 7px;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a.cu-button strong {
    font-weight: normal;
}

a.cu-button:hover {
    background-color: #00f69c;
    color: #fff;
}

.after-hero em {
    color: #222;
    font-size: 13px;
    word-wrap: break-word;
    position: relative;
}

.after-hero em a {
    color: #00d084;
    text-decoration: underline;
}

.after-hero em a:hover {
    color: #9b51e0;
}

.gar-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    row-gap: 20px;
    text-align: center;
    padding: 15px;
    border-radius: 7px;
    border-top: 1px solid #9b51e0;
    border-right: 1px solid #9b51e0;
    border-bottom: 1px solid #00d084;
    border-left: 1px solid #00d084;
    background-color: #ffffff;
    -webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.gar-box h3 {
    font-weight: normal;
    font-size: 29px;
    margin: 0;
}

.gar-box p {
    margin: 0;
    color: #222;
}

.equal-height-grid>div {
    display: flex;
}

.equal-height-grid .gar-box {
    width: 100%;
    height: 100%;
    padding: 35px;
}

.about-card-grid>div {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
}

.about-card-grid>div:last-child {
    margin-bottom: 0;
}

.about-card99-grid>div {
    margin-bottom: 32px;
}

@media (min-width: 640px) {
    .about-card-grid>div {
        margin-bottom: 40px;
    }

    .about-card99-grid>div>div {
        min-height: 350px;
        min-width: 316px;
    }
}

@media (min-width: 960px) {
    .about-card-grid>div {
        margin-bottom: 45px;
    }

    .about-card-grid>div:nth-last-child(-n + 2) {
        margin-bottom: 0;
    }
}

.gar-active {
    background-image: linear-gradient(135deg, #00d084, #9b51e0);
    color: #fff;
    padding-bottom: 35px;
    padding-top: 35px;
}

.gar-active p,
.gar-active h3 {
    color: #fff;
}

.sec3 {
    position: relative;
    overflow: hidden;
    background-color: #f7f8f9;
}

.sec3 .uk-container {
    position: relative;
    z-index: 1;
}

.sec3:before {
    content: "";
    background-image: url(/assets/images/background-5.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: inherit;
    transition: inherit;
    pointer-events: none;
    opacity: 0.08;
}

.sec4 {
    background-image: url(/assets/images/shape-02.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 10%;
}

.sec4-img {
    position: relative;
    margin-top: 32px;
}

.sec4-img .img-1 {
    border-radius: 7px;
    vertical-align: middle;
    -webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.sec4-img .img-shape {
    position: absolute;
    bottom: -50px;
    left: -30px;
}

@media (max-width: 960px) {
    .sec4-img .img-shape {
        width: 80px;
        bottom: -30px;
        left: -10px;
    }
}

@media (max-width: 960px) {
    .sec3-meta {
        margin-top: 40px;
    }
}

.sec5 {
    background-color: #f7f8f9;
}

.sec5 strong {
    font-style: italic;
}

.sec6 {
    background-color: #222222;
    color: #fff;
    position: relative;
    margin-top: 32px;
}

.sec6 .uk-container {
    z-index: 1;
    position: relative;
}

.sec6 h2 {
    color: #00d084;
}

.sec6:before {
    content: "";
    background-image: url(/assets/images/background-2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: inherit;
    transition: inherit;
    pointer-events: none;
    opacity: 0.3;
}

.sec7 {
    background-image: -webkit-gradient(linear, left top, right top, from(#9b51e0), to(#00d084));
    background-image: linear-gradient(90deg, #9b51e0, #00d084);
    color: #ffffff;
    position: relative;
}

.sec7 .uk-container {
    z-index: 1;
    position: relative;
}

.sec7 h2,
.sec7 h3 {
    color: #fff;
}

.sec7 h3 {
    font-size: 29px;
}

.sec7 h3 svg {
    margin-right: 10px;
}

.sec7:before {
    content: "";
    background-image: url(/assets/images/background-4.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: inherit;
    transition: inherit;
    pointer-events: none;
    opacity: 0.05;
}

.sec8 h3 {
    font-size: 29px;
    font-weight: normal;
}

.sec8 .gb-icon {
    line-height: 0;
    color: #00d084;
    margin-right: 10px;
}

.sec8 .gb-icon svg {
    width: 1em;
    height: 1em;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

table {
    border-spacing: 0;
    border-width: 1px 0 0 1px;
}

table,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.wp-block-table td {
    border: 1px solid;
    padding: 0.5em;
}

table,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 1.5em;
    width: 100%;
}

td {
    padding: 8px;
}

td {
    border-width: 0 1px 1px 0;
}

.wp-block-table.is-style-stripes td {
    border-color: #0000;
}

.wp-block-table .has-fixed-layout td {
    word-break: break-word;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}

.rank-math-total-wrapper .rank-math-total {
    border: 0;
    display: block;
    margin: 0;
    width: auto;
    float: start;
    text-align: start;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.rank-math-review-notes {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.rank-math-review-notes h4 {
    font-weight: bold;
}

.rank-math-review-notes ul {
    margin: 0 0 1.5em 3em;
    padding: 0;
}

.disclaimer {
    width: 90%;
    margin: 1.75rem auto;
    max-width: 1200px;
    text-align: justify;
}

.disclaimer::after {
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    display: block;
}

/* Review snippet (visible section above footer) */

.review-snippet {
    width: 90%;
    margin: 16px auto;
    max-width: 1200px;
    background-color: #ffffff;
    border-radius: 7px;
    padding: 22px 24px;
    border-top: 1px solid #9b51e0;
    border-right: 1px solid #9b51e0;
    border-bottom: 1px solid #00d084;
    border-left: 1px solid #00d084;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    color: #222;
}

.review-snippet .review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.review-snippet .review-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #17303b;
}

.review-snippet .review-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.review-snippet .rating-value {
    font-size: 32px;
    font-weight: 700;
    color: #00d084;
    line-height: 1;
}

.review-snippet .rating-meta {
    font-size: 14px;
    color: #666;
}

.review-snippet .review-body {
    margin-top: 8px;
    font-size: 16px;
    color: #222;
}

.review-snippet .review-quote {
    margin: 12px 0 0 0;
    font-style: italic;
    color: #444;
}

/* Simple star rating */

.review-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.review-stars .star {
    font-size: 20px;
    color: #ffc107;
    /* golden stars */
}

.review-stars .star.empty {
    color: rgba(0, 0, 0, 0.2);
}

/* Badge for trusted label */

.review-snippet .review-badge {
    display: inline-block;
    padding: 4px 10px;
    background-color: #00d084;
    color: #17303b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Responsive tweaks */

@media (max-width: 960px) {
    .review-snippet {
        padding: 16px;
        margin-top: 1.25rem;
    }

    .review-snippet .rating-value {
        font-size: 28px;
    }

    .review-snippet .review-title {
        font-size: 22px;
    }
}

/* ===== MOVED FROM index.html ===== */
/* Section: Mobile Menu Toggle Icon Animation */
.uk-navbar-toggle-icon svg>[class*="line-"] {
    transition: 0.2s ease-in-out;
    transition-property: transform, opacity;
    transform-origin: center;
    opacity: 1
}

.uk-navbar-toggle-icon svg>.line-3 {
    opacity: 0
}

.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-3 {
    opacity: 1
}

.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-2 {
    transform: rotate(45deg)
}

.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-3 {
    transform: rotate(-45deg)
}

.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-1,
.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-4 {
    opacity: 0
}

.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-1 {
    transform: translateY(6px) scaleX(0)
}

.uk-navbar-toggle-animate[aria-expanded="true"] svg>.line-4 {
    transform: translateY(-6px) scaleX(0)
}

/* Section: Form Theme Variables (Light) */
:root {
    --cf-bg: rgba(255, 255, 255, 0.8);
    --cf-text: #111;
    --cf-placeholder: rgba(0, 0, 0, 0.5);
    --cf-border: rgba(0, 0, 0, 0.2);
    --cf-input-bg: rgba(255, 255, 255, 0.9);
    --cf-focus: #2563eb;
    --cf-button-bg: #00c853;
    --cf-button-bg-hover: #00b248;
    --cf-button-text: #fff;
    --cf-dropdown-bg: #fff;
    --cf-dropdown-text: #111;
    --cf-dropdown-hover: rgba(37, 99, 235, 0.1);
    --cf-dropdown-active: rgba(37, 99, 235, 0.2);
    --cf-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Section: Form Theme Variables (Dark) */
.cf-dark {
    --cf-bg: rgba(20, 20, 20, 0.85);
    --cf-text: #f5f5f5;
    --cf-placeholder: rgba(255, 255, 255, 0.6);
    --cf-border: rgba(255, 255, 255, 0.2);
    --cf-input-bg: rgba(255, 255, 255, 0.1);
    --cf-dropdown-bg: rgba(30, 30, 30, 0.95);
    --cf-dropdown-text: #f5f5f5;
    --cf-dropdown-hover: rgba(59, 130, 246, 0.2);
    --cf-dropdown-active: rgba(59, 130, 246, 0.4);
    --cf-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: #0d1117;
    --iti-arrow-color: #aaaaaa;
    --iti-hover-color: #30363d;
    color-scheme: dark;
}

/* Section: Form Layout and Inputs */

.cf-container {
    background: var(--cf-bg);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 30px;
    width: 100%;
    color: var(--cf-text);
    font-family: Arial, sans-serif;
    box-shadow: var(--cf-shadow);
}

.cf-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.6rem;
}

.cf-group {
    margin-bottom: 15px;
}

.cf-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: bold;
}

.cf-input {
    width: 100%;
    padding: 16px 14px;
    border-radius: 10px;
    border: 1px solid var(--cf-border);
    background: var(--cf-input-bg);
    color: var(--cf-text);
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}

.cf-input::placeholder {
    color: var(--cf-placeholder);
}

.cf-input:focus {
    border-color: var(--cf-focus);
    box-shadow: 0 0 0 2px var(--cf-focus);
}

.cf-input:user-invalid,
.cf-input-invalid {
    border-color: #e74c3c;
    /* red */
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.6);
}

.cf-input:not(.cf-phone):user-valid,
.cf-input-valid {
    border-color: #2ecc71;
    /* green */
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.6);
}

/* Section: Submit Button and Loading State */
.cf-button {
    align-items: center;
    background: var(--cf-button-bg);
    border-radius: 10px;
    border: none;
    color: var(--cf-button-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    font-weight: bold;
    gap: 0.5rem;
    justify-content: center;
    min-width: 120px;
    padding: 18px;
    position: relative;
    transition: background 0.3s ease;
    width: 100%;
}

.cf-button:hover {
    background: var(--cf-button-bg-hover);
}

.cf-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: cf-spin 0.8s linear infinite;
}

.cf-button.loading .cf-btn-text {
    opacity: 0.6;
}

.cf-button.loading .cf-spinner {
    display: inline-block;
}

/* Spinner animation */

@keyframes cf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Section: Form Validation Messages */
.cf-error {
    font-size: 0.8rem;
    color: #e74c3c;
    margin-top: 4px;
    display: none;
}

.cf-general-error {
    margin: 10px 0;
    font-weight: bold;
    text-align: center;
}

/* Section: International Phone Input */
.iti {
    width: 100% !important;

    .cf-dark & input:not(.cf-phone) {
        color: white;
        background-color: #0d1117;
        border-color: #5b5b5b;

        &::placeholder {
            color: #8d96a0;
        }
    }
}

/* Section: Form Disclaimer and Tooltip Trigger */
.cf-disclaimer {
    font-size: 0.6rem;
    margin-top: 12px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--cf-text) 70%, transparent);
    text-align: center;
}

.cf-readmore {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    position: relative;
}

/* Section: Tooltip Hidden State */

.cf-readmore::after {
    background: color-mix(in srgb, var(--cf-dropdown-bg) 95%, transparent);
    backdrop-filter: blur(16px);
    border-radius: 8px;
    border: 1px solid var(--cf-border);
    bottom: 120%;
    box-shadow: var(--cf-shadow);
    color: color-mix(in srgb, var(--cf-text) 70%, transparent);
    content: "";
    display: block;
    font-size: clamp(0.5rem, 0.65rem, 0.75rem);
    font-weight: normal;
    left: 50%;
    line-height: 1.3;
    max-height: 530px;
    max-width: min(90vw, 300px);
    opacity: 0;
    overflow-y: auto;
    padding: 12px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    visibility: hidden;
    white-space: pre-wrap;
    width: max-content;
    min-width: 300px;
    z-index: 1000;
}

/* Section: Tooltip Visible State */

.cf-readmore:hover::after,
.cf-readmore:focus::after {
    content: "Chain Kapidex Xp functions solely as a marketing website and does not provide, endorse, or facilitate any trading, brokerage, or investment services. We are neither brokers nor financial advisors and do not operate any trading technology or send signals of any kind. Any information provided is strictly for informational purposes and should not be considered financial advice. You must conduct independent market research and consult a professional advisor before making any investment decisions. \A \A By registering on this platform, you may be introduced to an independent third-party service provider that could contact you with general information, educational materials, or market insights related to financial instruments, commodities, and crypto-assets. These services may incur costs, and it is your responsibility to review the Terms and Conditions and any relevant disclosures on the service provider's website. We do not assess the regulatory status or legal compliance of users and bear no responsibility for any regulatory violations or financial losses resulting from interactions with third-party providers. \A \A We may transfer or release your private data for marketing or business purposes to third parties that may compensate us. These third parties may use your data to contact you or for their own business operations. \A \A Investing in the financial markets, including crypto-assets, carries inherent risks, including the possibility of losing your entire investment. You should carefully evaluate these risks before proceeding. By continuing to use this website, you certify that you have read and agreed to our Terms and Conditions, Privacy Policy, and Cookie Policy.";
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Section: Tooltip Mobile Responsive Rules */
@media (max-width: 480px) {
    .cf-readmore::after {
        position: fixed;
        bottom: auto;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 95vw;
        max-height: 70vh;
    }
}

/* Section: Footer Legal Disclaimer Content */
.disclaimer::after {
    content: "HIGH RISK WARNING: Dealing or Trading FX, CFDs and Cryptocurrencies is highly speculative, carries a level of non-negligible risk and may not be suitable for all investors. You may lose some or all of your invested capital, therefore you should not speculate with capital that you cannot afford to lose. Please refer to the risk disclosure below. Chain Kapidex Xp does not gain or lose profits based on your activity and operates as a services company. Chain Kapidex Xp is not a financial services firm and is not eligible of providing financial advice. Therefore, Chain Kapidex Xp shall not be liable for any losses occurred via or in relation to this informational website. \A \A SITE RISK DISCLOSURE: Chain Kapidex Xp does not accept any liability for loss or damage as a result of reliance on the information contained within this website; this includes education material, price quotes and charts, and analysis. Please be aware of and seek professional advice for the risks associated with trading the financial markets; never invest more money than you can risk losing. The risks involved in FX, CFDs and Cryptocurrencies may not be suitable for all investors. Chain Kapidex Xp doesn't retain responsibility for any trading losses you might face as a result of using or inferring from the data hosted on this site.\A\A LEGAL RESTRICTIONS: Without limiting the above mentioned provisions, you understand that laws regarding financial activities vary throughout the world, and it is your responsibility to make sure you properly comply with any law, regulation or guideline in your country of residence regarding the use of the Site. To avoid any doubt, the ability to access our Site does not necessarily mean that our Services and/or your activities through the Site are legal under the laws, regulations or directives relevant to your country of residence. It is against the law to solicit US individuals to buy and sell commodity options, even if they are called \"prediction\" contracts, unless they are listed for trading and traded on a CFTC-registered exchange unless legally exempt. The UK Financial Conduct Authority has issued a policy statement PS20/10, which prohibits the sale, promotion, and distribution of CFD on Crypto assets. It prohibits the dissemination of marketing materials relating to distribution of CFDs and other financial products based on Cryptocurrencies that addressed to UK residents. The provision of trading services involving any MiFID II financial instruments is prohibited in the EU, unless when authorized/licensed by the applicable authorities and/or regulator(s). Please note that we may receive advertising fees for users opted to open an account with our partner advertisers via advertisers' websites. We have placed cookies on your computer to help improve your experience when visiting this website. You can change cookie settings on your computer at any time. Use of this website indicates your acceptance of this website. \A \A Please be advised that the names depicted on our website, including but not limited to Chain Kapidex Xp, are strictly for marketing and illustrative purposes. These names do not represent or imply the existence of specific entities, service providers, or any real-life individuals. Furthermore, the pictures and/or videos presented on our website are purely promotional in nature and feature professional actors. These actors are not actual users, clients, or traders, and their depictions should not be interpreted as endorsements or representations of real-life experiences. All content is intended solely for illustrative purposes and should not be construed as factual or as forming any legally binding relationship.";
}

/* Section: Replaced Inline Styles from index.html */
.explore-further-btn {
    margin: 16px 0;
}

.reviews-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.reviews-heading-title {
    margin: 0;
}

.reviews-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #00d084;
    color: #17303b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    position: relative;
    margin: 0 auto;
}

.reviews-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reviews-score {
    font-size: 28px;
    color: #00d084;
    line-height: 1;
}

.reviews-stars {
    color: #ffc107;
    font-size: 20px;
    line-height: 1;
}

.reviews-meta {
    color: #666;
    font-size: 14px;
}

.reviews-quote {
    margin: 12px 0 0;
    color: #222;
}

/* Contact Page Styles */
body.contact-page,
.contact-section.contact-page {
    --contact-bg: rgba(255, 255, 255, 0.9);
    --contact-text: #111;
    --contact-placeholder: rgba(0, 0, 0, 0.5);
    --contact-border: rgba(0, 0, 0, 0.15);
    --contact-input-bg: #fff;
    --contact-focus: #2563eb;
    --contact-button-bg: #00c853;
    --contact-button-hover: #00b248;
    --contact-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body.contact-page footer .gb-shape.gb-shape-1,
.contact-section.contact-page footer .gb-shape.gb-shape-1 {
    display: none;
}

body.contact-page .contact-section,
.contact-section.contact-page {
    position: relative;
    overflow: hidden;
}

body.contact-page .contact-container,
.contact-section.contact-page .contact-container {
    background: var(--contact-bg);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--contact-shadow);
    max-width: 600px;
    margin: 0 auto;
}

body.contact-page .contact-title,
.contact-section.contact-page .contact-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 600;
    color: var(--contact-text);
}

body.contact-page .contact-subtitle,
.contact-section.contact-page .contact-subtitle {
    text-align: center;
    margin-bottom: 30px;
    color: color-mix(in srgb, var(--contact-text) 70%, transparent);
    font-size: 1rem;
}

body.contact-page .contact-form-group,
.contact-section.contact-page .contact-form-group {
    margin-bottom: 20px;
}

body.contact-page .contact-label,
.contact-section.contact-page .contact-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--contact-text);
    font-size: 0.9rem;
}

body.contact-page .contact-input,
body.contact-page .contact-textarea,
.contact-section.contact-page .contact-input,
.contact-section.contact-page .contact-textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--contact-border);
    background: var(--contact-input-bg);
    color: var(--contact-text);
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: inherit;
}

body.contact-page .contact-input::placeholder,
body.contact-page .contact-textarea::placeholder,
.contact-section.contact-page .contact-input::placeholder,
.contact-section.contact-page .contact-textarea::placeholder {
    color: var(--contact-placeholder);
}

body.contact-page .contact-input:focus,
body.contact-page .contact-textarea:focus,
.contact-section.contact-page .contact-input:focus,
.contact-section.contact-page .contact-textarea:focus {
    border-color: var(--contact-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body.contact-page .contact-textarea,
.contact-section.contact-page .contact-textarea {
    resize: vertical;
    min-height: 150px;
}

body.contact-page .contact-button,
.contact-section.contact-page .contact-button {
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    border: none;
    background: var(--contact-button-bg);
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.contact-page .contact-button:hover,
.contact-section.contact-page .contact-button:hover {
    background: var(--contact-button-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 200, 83, 0.3);
}

body.contact-page .contact-button:active,
.contact-section.contact-page .contact-button:active {
    transform: translateY(0);
}

body.contact-page .contact-button[disabled],
.contact-section.contact-page .contact-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.contact-page .contact-spinner,
.contact-section.contact-page .contact-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

body.contact-page .contact-button.loading .contact-spinner,
.contact-section.contact-page .contact-button.loading .contact-spinner {
    display: inline-block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

body.contact-page .contact-success,
.contact-section.contact-page .contact-success {
    display: none;
    padding: 16px;
    border-radius: 10px;
    background: #e6ffed;
    border: 1px solid #a7f3d0;
    color: #064e3b;
    margin-top: 20px;
    text-align: center;
    animation: slideIn 0.4s ease;
}

body.contact-page .contact-success.show,
.contact-section.contact-page .contact-success.show {
    display: block;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

body.contact-page .contact-icon,
.contact-section.contact-page .contact-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
}

@media (max-width: 768px) {
    body.contact-page .contact-container,
    .contact-section.contact-page .contact-container {
        padding: 30px 20px;
    }

    body.contact-page .contact-title,
    .contact-section.contact-page .contact-title {
        font-size: 1.6rem;
    }
}