:root {
    --font-main: "tenon",sans-serif;
    --font-body: "Inter",sans-serif;
    --font-h: "helvetica-neue-lt-pro", sans-serif;
    --font-lg: 18px;
    --font-sz: 16px;
    --font-sm: 14px;
    --font-xs: 12px;
    --black: #000000;
    --white: #ffffff;
    --grey: #a6a6a6;
    --green: #0bff00;
    --green1: #0cff00;
    --red-to-black: linear-gradient(90deg,#fe8216,#000000);
    /*--red-to-black-anim: linear-gradient(90deg,#fe8216,#000000,#fe8216);*/
    --red-to-black-anim: linear-gradient(90deg,#000000,#a13c0b,#fe8216,#a13c0b,#000000);
    --grey-to-black: linear-gradient(90deg,#555555,#000000,#000000);
    --black-to-grey: linear-gradient(90deg,#000000,#000000,#000000,#747474,#555555);
    --black-to-grey-v: linear-gradient(180deg,#000000,#000000,#000000,#000000,#555555);
    --navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

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

body {
    font-family: var(--font-body);
    font-size: var(--font-sz);
}

    body.dark, body.homepg {
        background-color: var(--black);
    }

    body.light {
        background-color: var(--white);
    }

a {
    text-decoration: none;
}

    a.ancinh {
        color: inherit !important;
    }

    a.aunder:hover {
        text-decoration: underline;
    }

h2 {
    font-size: 32px;
    font-weight: 600;
    font-family: var(--font-body);
}

h3.h3big {
    font-family: var(--font-body);
    font-size: 45px;
    font-weight: 600;
}

span.h3Text {
    font-size: 30px;
    font-weight: 400;
    font-family: var(--font-h);
    line-height: 1em;
}

h4 {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--font-body);
}

p {
    line-height: 1.5em;
    font-size: var(--font-sz);
    margin-bottom: 15px;
}

    p.subtext, h1.subtext {
        font-family: var(--font-h);
        font-size: var(--font-lg);
        font-weight: 300;
        text-align: center;
        color: var(--white);
    }

    p.sub-text {
        font-size: 22px;
        line-height: 1.2em;
        margin-bottom: 15px;
        color: var(--white);
    }

.sec-dark h2, .sec-dark h3, .sec-dark h4, .sec-dark p {
    color: var(--white);
}

.sec-100 {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.sec-spread {
    background: linear-gradient(180deg,#000000,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff);
}

/* Header */
.navbar {
    background-color: var(--black);
    padding: 0px 1.5rem;
    display: flex;
    align-items: center;
    position: relative;
}

body:not(.homepg) .navbar {
    padding: unset;
    width: 90%;
    margin: 0 auto;
}

/* Sticky header toggle */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Logo */
.navbar-brand {
    z-index: 1;
}

.logo {
    height: 50px;
    margin: 10px 0px;
}

/* Center menus */
.nav-center {
    flex: 1;
    justify-content: center;
    padding: 0px 20px;
    height: 72px;
    margin-top: 8px;
    background-color: #fafafa;
    position: relative;
}

body.light .nav-center {
    background-color: #fff !important;
}

.nav-center-left {
    position: absolute;
    top: -1px;
    left: 80px;
    height: calc(100% + 1px);
    transform: translateX(-100%);
    z-index: 0;
}

.nav-center-right {
    position: absolute;
    top: -1px;
    right: 80px;
    height: calc(100% + 1px);
    transform: translateX(100%);
    z-index: 0;
}

.nav-center-clip {
    position: absolute;
    top: 0;
    left: 0; /* attach to left edge of nav-center */
    height: 100%; /* match header height */
    width: auto; /* preserve aspect ratio from viewBox */
    max-width: 320px; /* control the visual thickness of the clipped shape */
    pointer-events: none; /* don't block interactions */
    z-index: 0; /* behind nav content */
    display: block;
}

.navbar-nav .nav-link {
    color: var(--black);
    font-family: var(--font-body);
    font-size: var(--font-sz);
    font-weight: 400;
    padding: 0.5rem 1rem;
}

body[data-lang="ru"] .navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
}

body.dark .nav-center {
    background-color: var(--black);
}

body.dark .navbar-nav .nav-link:not(.menu-toggle) {
    color: var(--white);
}

.navbar-nav .nav-link:hover {
    color: inherit;
}

/* Submenu positioning (desktop) */
.menu li {
    position: relative;
}

    .menu li ul.dropdown-menu {
        opacity: 0;
        display: block;
        border-radius: 20px;
        border: 0px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        background-color: var(--black);
        color: var(--white);
        visibility: hidden;
        transform-origin: top center;
        transform: perspective(600px) rotateX(-90deg);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease, visibility 0s 0.4s;
        position: absolute !important;
        top: 100%;
        left: 0;
        z-index: 999;
    }

body.dark .menu li ul.dropdown-menu {
    border: solid 1px #737373;
}

.menu li:hover > ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: perspective(600px) rotateX(0deg);
    /* 4. Reset visibility transition delay to 0s on hover for instant appearance */
    transition-delay: 0s;
}

.horizontal_menu {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0px;
}

.sub-dropdown {
    list-style-type: none;
    padding: 0px;
}

.horizontal_menu > li:first-child {
    border-right: 0.6px solid;
}

/* Optional smooth fade animation */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Submenu items */
.menu li ul li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--white);
    text-decoration: none;
}

    .menu li ul li a:not(.fw-bold):hover {
        background: none;
        color: var(--green);
    }


/* Right section */
.nav-right {
    z-index: 4001;
    position: relative;
}

    .nav-right .search-box {
        position: relative;
    }

.search-box input {
    padding: 10px 20px;
    background-color: transparent;
    color: var(--white);
    font-family: var(--font-main);
    font-size: var(--font-sz);
    border: solid 1px var(--white);
    border-radius: 50rem;
    width: 150px;
}

    .search-box input::placeholder {
        color: var(--grey);
    }

    .search-box input:focus {
        background-color: transparent;
        color: var(--white);
        border: solid 1px var(--white);
    }

body.light .search-box input, #tvSearchInput {
    border: solid 1px var(--black) !important;
    color: var(--black);
}

.brd-dark {
    border: solid 1px var(--black) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

.navbar-toggler:focus {
    box-shadow: none;
}

/* FOOTER SECTION */

footer {
    background-image: url(/assets/images/footer-bg-1.webp);
    background-size: cover;
    background-position: top;
}

    footer .footer-social .text {
        color: rgba(255,255,255,0.67);
    }

    footer p {
        color: white;
        font-family: var(--font-main);
        font-size: 14px;
        margin: 0px;
    }

    footer a {
        color: white;
        font-size: 14px;
        text-decoration: underline;
    }

.footer-img {
    padding-top: 100px;
    text-align: center;
}

    .footer-img img {
        max-width: 80%;
    }

.col-7-responsive {
    flex: 0 0 auto;
    width: calc(100% / 7);
    color: var(--white);
    font-family: var(--font-main);
}

footer .col-7-responsive h5 {
    font-size: 14px;
}

footer .col-7-responsive ul {
    list-style-type: none;
    padding-left: 0px;
    margin: 0;
    font-size: 12px;
}

footer .col-7-responsive ul li a {
    text-decoration: none;
}


.blur-bottom, .blur-right {
    position: relative;
}

.blur-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-image: linear-gradient( to top, rgba(255,255,255,0.9) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.3) 100% );
    z-index: 10;
    pointer-events: none;
}

.blur-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background-image: linear-gradient( to left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 30%, rgba(250, 250, 250, 0.7) 60%, rgba(250, 250, 250, 0) 100% );
    z-index: 10;
    pointer-events: none;
}

.home-chart-cont {
    margin: 60px auto 0;
    width: 80%;
}

.home-chart {
    border: solid 1px #b4b4b4;
    border-radius: 20px;
    padding: 10px 10px 50px;
    width: 100%;
}

.home-chart img {
    border: solid 1px #d9d9d9;
}

.tv-widgets-mini {
    width: 195px;
    height: 95px;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.9); /* Start slightly low and small */
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tv-widgets-mini.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tv-1 {
    position: absolute;
    top: 50px;
    left: -100px;
}

.tv-2 {
    position: absolute;
    top: 290px;
    left: -100px;
}

.tv-3 {
    position: absolute;
    top: 110px;
    left: 30%;
}

.tv-4 {
    position: absolute;
    top: 350px;
    left: 55%;
}

.tv-5 {
    position: absolute;
    top: 180px;
    right: -100px;
}

.trading-begins {
    width: 50%;
}

.trader-count {
    font-family: var(--font-main);
    font-size: 250px;
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0.5rem;
    text-align: center;
    background: linear-gradient(90deg, #000000, #000000, #000000, #999999, #aaaaaa, #cccccc, #aaaaaa, #999999, #000000, #000000, #000000);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.trader-count-sub {
    font-family: var(--font-body);
    font-size: var(--font-sm);
    text-align: center;
    color: #545454;
    margin-top: 10px;
}

.green-box {
    width: 90%;
    max-width: 370px;
    height: 240px;
    margin: 50px auto 0px;
    background: linear-gradient(180deg,#000000,#000000,#00ff00);
    position: relative;
}

    .green-box .green-line {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
    }

    .green-box h5 {
        font-family: var(--font-body);
        font-size: var(--font-lg);
        font-weight: 400;
        text-align: center;
        color: var(--white);
        position: absolute;
        bottom: 25px;
        width: 100%;
    }

.reg-lic img {
    width: 54%;
    position: absolute;
    bottom: 0px;
    left: 23%;
}

.support-247 img {
    width: 55%;
    margin: 0 auto;
    padding-top: 50px;
}

.support-247 h4 {
    position: absolute;
    top: 90px;
    /*left:25%;*/
    width: 100%;
    /*padding-left:10px;*/
}

.supp {
    font-size: 22px !important;
}
/*.support-247 img {
	width: 54%;
	position: absolute;
	bottom: 0px;
	left: 23%;
}*/

.support-247, .reg-lic {
    min-height: 400px;
}

.fast-onb {
    min-height: 400px;
    background-image: url('/assets/images/home/fast-onboarding.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center calc(100% + 60px);
}

.account-type .account-type-text .account-svg {
    margin-top: 20px;
}

    .account-type .account-type-text .account-svg a {
        color: rgba(0,0,0,0.24);
        cursor: pointer;
    }

        .account-type .account-type-text .account-svg a.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

.account-type .account-type-text svg {
    fill: currentColor !important;
}

/* Container for the scrollable area */
.account-carousel-viewport {
    /* REQUIRED: Hides boxes that overflow the column width */
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0; /* Ensures the boxes start right at the edge */
}

/* The inner container that holds all the boxes and slides horizontally */
.account-carousel-track {
    display: flex;
    /* Sets the starting position (0) */
    transform: translateX(0);
    /* REQUIRED: Makes the sliding animation smooth */
    transition: transform 0.3s ease-in-out;
}

.account-box {
    flex: 0 0 65%;
    margin-right: 20px; /* Space between boxes */
    background: linear-gradient(135deg,rgba(0,0,0,0.8),rgba(0,0,0,0.8),rgba(0,0,0,0.8),rgba(0,0,0,0.8),rgba(0,0,0,0.8),rgba(115,115,115,0.8));
    color: var(--white);
    padding: 20px 10px 10px 20px;
    border-radius: 20px;
}

    .account-box.active {
        background: unset;
        background-color: var(--black);
    }

    .account-box h3 {
        font-size: 26px;
        font-weight: 600;
        color: rgba(255,255,255,0.57);
    }

    .account-box.active h3 {
        font-size: 26px;
        font-weight: 600;
        color: var(--white);
    }

    .account-box .account-group {
        margin-top: 20px;
        font-family: var(--font-body);
    }

        .account-box .account-group span {
            text-transform: lowercase;
            color: #d9d9d9;
            font-size: var(--font-sz);
            font-weight: 500;
        }

        .account-box .account-group p {
            color: var(--white);
            font-size: 24px;
            font-weight: 600;
        }

    .account-box img {
        width: 90%;
        position: absolute;
        right: 10px;
        bottom: 0;
    }

    .account-box .account-group span, .account-box .account-group p, .account-box img, .account-box .btn-green {
        display: none;
    }

    .account-box.active .account-group span, .account-box.active .account-group p, .account-box.active img, .account-box.active .btn-green {
        display: block;
    }

    .account-box.active .btn-green {
        display: inline;
    }

/* Section styling for smooth snapping */
#horizontal-scroll-section {
    scroll-snap-align: start;
    scroll-margin-top: 0px;
    min-height: 100vh;
    position: relative;
}


.account-box.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    /*box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	border: 2px solid #4CAF50;*/
}

/* Ensure smooth transitions */
#horizontal-scroll-section * {
    -webkit-tap-highlight-color: transparent;
}

.sellang {
    background-color: var(--black);
    color: var(--white);
    font-family: var(--font-h);
    font-size: var(--font-sz);
    border-radius: 50rem;
    border: solid 1px var(--white);
    display: inline-block;
}

.custom-select-wrapper {
    position: relative;
}

.custom-select-trigger {
    cursor: default;
    width: 100%;
    padding: 5px 30px 5px 10px;
}

.custom-options {
    display: none; /* Hidden by default, shown with JS */
    position: absolute;
    background-color: var(--black);
    color: var(--white);
    width: 130%;
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    bottom: 105%;
    right: 5%;
    border-radius: 10px;
}

.custom-option {
    padding: 5px 10px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.custom-select-wrapper.active .custom-options {
    display: block;
}

.custom-option:hover,
.custom-option.selected,
.custom-option:focus {
    color: var(--green);
}

.sec-blur {
    box-shadow: inset 0 -25px 20px -20px rgba(0, 0, 0, 0.15);
}

.open-account {
    padding: 60px 0px;
}

    .open-account h4 {
        color: var(--black);
        font-family: var(--font-main);
        font-size: 48px;
        font-weight: 500;
    }

.become-partner {
    background: linear-gradient(90deg,#000000,#000000,#000000,#ff821c);
    border-radius: 50rem;
    padding: 14px 20px;
    position: relative;
    margin-left: 60px;
    margin-top: 7px;
}

    .become-partner p {
        color: var(--white);
        font-size: 18px;
    }

    .become-partner svg {
        transform: rotate(180deg);
        position: absolute;
        bottom: 5px;
        right: 10px;
    }

    .become-partner .arr {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpolyline%20points%3D%2714%2014%204%204%27%20stroke%3D%27%23d9d9d9%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpolyline%20points%3D%2712%204%204%204%204%2012%27%20stroke%3D%27%23d9d9d9%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 20px 20px;
        width: 40px;
        height: 100%;
        position: absolute;
        right: 10px;
        top: 0px;
        transform: rotate(90deg);
    }

.search-wrapper {
    position: relative;
    width: 90%;
    max-width: 500px;
}

    .search-wrapper input {
        background-color: #d9d9d9;
        font-size: 18px;
        line-height: 1em;
        text-align: center;
        padding: 20px;
        width: 100%;
        border: 0px;
        border-radius: 50rem;
    }

    .search-wrapper .search-wrapper::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background-image: url('/assets/images/magnify-glass.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }
/*.sec-blur::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%,*/ /* Semi-transparent white at the top of the mist area */
/*white 99% 
	);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	z-index: 10;
	pointer-events: none;
}*/
/* GENERAL SECTION */
.bg-wht {
    background-color: var(--white) !important;
    color: var(--black);
}

.bg-dark {
    background-color: var(--black) !important;
    color: var(--white);
}

.img-top-text {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 40%;
}

h3.img-top-text {
    color: var(--black);
    font-family: var(--font-body);
    font-size: 32px;
    text-transform: lowercase;
}

.img-btm-text {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
}

h3.img-btm-text {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 600;
}

.box-eqh {
    flex-grow: 1;
    overflow: hidden;
}

/* --- Flip Card --- */

.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    /* min-height: 420px; */ /* REMOVED: No longer needed */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    /* position: absolute; */ /* REMOVED: This was causing the height collapse */
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden; /* Prevent content from spilling out */
}

.flip-card-front {
    background-color: #1a1a1a;
    color: white;
}

.flip-card-back {
    /*background-color: #ffad00;*/
    /*background:linear-gradient(180deg,#ff6a00 0%,#ffad00 70%,#ff6a00 80%,#620f01 100%);*/
    border: solid 1px #737373;
    background: var(--black) !important;
    transform: rotateY(180deg);
    /*display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;*/
    position: absolute; /* ADDED: Position the back card absolutely */
    top: 0;
    left: 0;
}

    .flip-card-back h3 {
        position: absolute;
        top: 30px;
        left: 30px;
        text-align: left;
    }

    .flip-card-back p {
        position: absolute;
        bottom: 30px;
        right: 30px;
        text-align: right;
        width: 70%;
    }

    .flip-card-back h3, .flip-card-back p {
        color: var(--white);
        line-height: 1.2em;
    }

.box-eqh.flip-card {
    height: auto;
    min-height: 200px; /* Adjust as needed */
}

.box-eqh .flip-card-inner {
    min-height: 200px; /* Adjust as needed */
}

.sec-dark {
    background-color: var(--black);
}

.sec-light {
    background-color: var(--white);
    color: var(--black);
}

.container {
    padding: 60px 0px;
}

.container-xl {
    padding: 100px 0px;
}

.container-sm {
    padding: 40px 0px;
}

.cont-shadow {
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.br-50r {
    border-radius: 50rem;
}

.brd-5 {
    border-radius: 5px;
}

.brd-10 {
    border-radius: 10px;
}

.brd-20 {
    border-radius: 20px;
}

.brd-30 {
    border-radius: 30px;
}

.brd-top-20 {
    border-radius: 20px 20px 0px 0px;
}

.brd-wht {
    border: solid 1px #ffffff;
}

.brd-grey1 {
    border: solid 1px #a6a6a6;
}

.brd-grey2 {
    border: solid 1px #b4b4b4;
}

.brd-grey3 {
    border: solid 1px #545454;
}

.brd-gb {
    background: linear-gradient(180deg,#737373,#000000,#000000);
    padding: 1px;
    border-radius: 20px;
    position: relative;
}

.brd-grad-inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: inherit;
    padding: 20px;
    background-color: var(--black);
}

.pad-20 {
    padding: 20px;
}

.pad-40 {
    padding: 40px;
}

.input-arr {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpolyline%20points%3D%2714%2014%204%204%27%20stroke%3D%27%23a6a6a6%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpolyline%20points%3D%2712%204%204%204%204%2012%27%20stroke%3D%27%23a6a6a6%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}

.sel-cust-arr {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2710%27%20height%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%272%204%205%207%208%204%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

.acc-comp-title {
    font-size: 42px;
    font-weight: 500;
}

.acc-comp-subtitle {
    font-size: 38px;
    font-weight: 500;
}

.acc-comp-subtext {
    font-size: 28px;
    font-weight: 500;
    color: #737373 !important;
}

.acc-comp div {
    padding-bottom: 10px;
    border-bottom: solid 3px white;
    margin-bottom: 10px;
}

    .acc-comp div h5 {
        font-size: 24px;
        font-weight: 400;
        line-height: 1em;
        color: var(--white);
        margin-bottom: 0px;
    }

.acc-comp p {
    color: #d9d9d9;
}

.sec-light .acc-comp h5, .sec-light .acc-comp p {
    color: var(--black);
}

.sec-light .acc-comp div {
    border-bottom: solid 3px black;
}

.faq {
    background-color: #d9d9d9;
    color: rgba(0,0,0,0.64);
    border-radius: 10px;
    padding: 15px 20px 15px 65px;
    font-family: var(--font-h);
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: left;
    border: solid 1px #d9d9d9;
    cursor: pointer;
}

.faq-title {
    background: linear-gradient(90deg, rgb(0, 0, 0) 2.68456%, rgb(0, 0, 0) 18.4564%, rgb(0, 0, 0) 60.0671%, rgb(116, 116, 116) 90.9396%, rgb(88, 88, 88) 97.9866%);
}

.faq::before {
    content: '';
    position: absolute;
    left: 20px;
    /* The pseudo-element fills the container space */
    width: 25px;
    height: 25px;
    /* --- Plus Icon --- */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 100 100'%3E%3C!-- Teal Circle Background --%3E%3Ccircle cx='50' cy='50' r='50' fill='%23737373'/%3E%3C!-- White Rounded Plus Sign (90% reach) --%3E%3Crect x='45' y='15' width='10' height='70' fill='%23d9d9d9' rx='5'/%3E%3Crect x='15' y='45' width='70' height='10' fill='%23d9d9d9' rx='5'/%3E%3C/svg%3E");
    /* Ensure the icon scales to the container size */
    background-repeat: no-repeat;
}

.faq:hover {
    border: solid 1px #231f20;
    color: #231f20;
    padding: 15px 45px 15px 65px;
}

    .faq:hover::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 10px;
        /* The pseudo-element fills the container space */
        width: 30px;
        height: 30px;
        display: block;
        /* --- Plus Icon --- */
        background-image: url('/assets/images/magnify-glass.png');
        background-size: contain;
        /* Ensure the icon scales to the container size */
        background-repeat: no-repeat;
    }

    .faq:hover::after {
        content: '';
        position: absolute;
        right: 5px;
        top: 5px;
        /* The pseudo-element fills the container space */
        width: 20px;
        height: 20px;
        /* --- Plus Icon --- */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 100 100'%3E%3C!-- Teal Circle Background --%3E%3Ccircle cx='50' cy='50' r='50' fill='%23231f20'/%3E%3C!-- White Rounded Plus Sign (90% reach) --%3E%3Crect x='45' y='15' width='10' height='70' fill='%23d9d9d9' rx='5'/%3E%3Crect x='15' y='45' width='70' height='10' fill='%23d9d9d9' rx='5'/%3E%3C/svg%3E");
        /* Ensure the icon scales to the container size */
        background-repeat: no-repeat;
    }

.faq-more {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: var(--black-to-grey-v);
    padding: 60px 0px;
    margin-top: 80px;
    overflow: hidden;
}

    .faq-more h4 {
        font-size: 26px;
        font-weight: 600;
        color: var(--white);
    }

    .faq-more p {
        font-size: 19px;
        font-weight: 400;
        color: rgba(255,255,255,0.66);
    }

    .faq-more .faq-more-l {
        height: 90%;
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

    .faq-more .faq-more-r {
        height: 100%;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

.sec-spread h2 {
    font-size: 36px;
    font-weight: 500;
}

.sec-spread .search-box {
    flex: 1;
    max-width: 150px;
}

    .sec-spread .search-box input {
        padding: 5px 20px;
    }

.prd-box-sec {
    padding: 100px 0px 80px;
    background-color: var(--white);
}

    .prd-box-sec h2 {
        background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(51, 114, 227) 33%, rgb(255, 49, 49) 66%, rgb(255, 255, 255) 100%);
        font-size: 36px;
        margin-bottom: 30px;
    }

.prd-box-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 0px 20px;
}

.prd-box {
    background: linear-gradient(90deg, rgba(85, 85, 85, 0.74), rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.74));
    display: flex;
    gap: 0px;
    border-radius: 50rem;
    width: 960px;
    align-items: center;
    padding: 0px 20px;
}

    .prd-box a {
        font-family: var(--font-h);
        font-size: 20px;
        height: 58px;
        font-weight: 400;
        color: rgba(255,255,255,0.74);
        flex: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rem;
        display: block;
        min-width: 130px;
    }

        .prd-box a.active {
            background: var(--grey-to-black);
        }

        .prd-box a .prd-brd {
            border-radius: 50rem;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            position: relative;
            top: 5px;
            left: 5px;
        }

        .prd-box a.active .prd-brd {
            background: linear-gradient(90deg,#316ad2,#000000,#ff0000);
        }

        .prd-box a.comm-box.active .prd-brd {
            background: linear-gradient(90deg,#edd46b,#ddc368,#000000,#000000,#000000,#000000,#ffffff);
        }

        .prd-box a.ind-box.active .prd-brd {
            background: linear-gradient(90deg,#316ad2,#000000,#9ae7ff);
        }

        .prd-box a .prd-brd div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            position: relative;
            top: 2px;
            left: 2px;
            border-radius: 50rem;
            color: var(--white);
        }

        .prd-box a.active .prd-brd div {
            background-color: var(--black);
        }

.gloss-trade {
    margin-top: 80px;
    padding: 30px;
    width: 100%;
    background-color: var(--black);
    border-radius: 20px;
    text-align: center;
}

    .gloss-trade h3 {
        font-family: var(--font-body);
        font-size: 50px;
        font-weight: 500;
        line-height: 1em;
        color: #d9d9d9;
        text-align: center;
        max-width: 450px;
    }

    .gloss-trade img {
        width: 60%;
    }

.btn-sleek, .btn-sleeker {
    font-family: var(--font-h);
    font-size: var(--font-sz);
    padding: 5px 30px;
    border-radius: 50rem;
    border: none;
}

.btn-sleeker {
    padding: 5px 40px;
}

.btn-green, .btn-green-wide, .btn-bgv {
    background-color: var(--green);
    color: var(--black);
    font-family: var(--font-h);
    font-size: var(--font-sz);
    padding: 10px 15px;
    border-radius: 50rem;
}

.btn-green-sleek {
    background-color: var(--green);
    color: var(--black);
}

.btn-green-wide, .btn-bgv {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.btn-green-sm, .btn-green-sm-w {
    background-color: var(--green);
    color: var(--black);
    font-size: var(--font-sm);
    padding: 5px 30px;
    border-radius: 50rem;
    border: none;
}

.btn-green-sm-w, .btn-black-h {
    font-size: var(--font-lg);
    padding: 5px 40px;
}

.btn-green-vs {
    background-color: var(--green);
    color: var(--black);
    font-family: var(--font-h);
    font-size: 12px;
    padding: 5px 20px;
    border-radius: 50rem;
}

.btn-bgv {
    background: var(--black-to-grey-v);
    color: white;
}

.btn-rb {
    background: var(--red-to-black-anim);
    color: var(--white);
    background-size: 300% 100%;
    animation: btn-anim 10s infinite linear;
}

.btn-box {
    font-family: var(--font-h);
    font-size: var(--font-lg);
    text-align: center;
    width: 220px;
    padding: 20px 0px;
    border-radius: 10px;
    border: solid 1px var(--white);
    background-color: transparent;
    color: var(--white);
}

.btn515 {
    padding: 5px 15px;
}

@keyframes btn-anim {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: -300% 50%;
    }
}

.btn-gb {
    background: var(--grey-to-black);
    color: var(--white);
}

.btn-bg {
    background: var(--black-to-grey);
    color: var(--white);
    border: solid 1px #545454;
}

.btn-black, .btn-black-h {
    background-color: var(--black);
    color: var(--white);
}

    .btn-black.active, .btn-black-h:hover {
        background-color: var(--green);
        color: var(--black);
    }

.btn-white {
    background-color: var(--white);
    color: var(--black);
}

.btn-red {
    background-color: #ff3131;
    color: var(--black);
}

.btn-pad-60 {
    padding: 5px 60px;
}

/* Scroll animations */
.fade-down,
.fade-left,
.fade-right,
.fade-up,
.fade-in {
    opacity: 0;
    transform: translateY(0);
    transition: all 0.9s ease-out;
}

.fade-down {
    transform: translateY(-40px);
}

.fade-left {
    transform: translateX(-40px);
}

.fade-right {
    transform: translateX(40px);
}

.fade-up {
    transform: translateY(40px);
}

.visible {
    opacity: 1;
    transform: translate(0, 0);
}

@keyframes text-colors {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: 0% center;
    }
}

.pt-40 {
    padding-top: 40px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-80 {
    padding-top: 100px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-80 {
    padding-bottom: 100px;
}

.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.mt-10 {
    margin-top: 10px;
}

.ms-10 {
    margin-left: 10px;
}

.w-40 {
    width: 40%;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-125 {
    width: 125% !important;
    position: relative;
    left: -12.5%;
}

.mw-unset {
    max-width: unset !important;
}

.mw-80 {
    max-width: 80% !important;
}

.mw-90 {
    max-width: 90% !important;
}

.mw-95 {
    max-width: 95% !important;
}

.mw-200 {
    width: 90%;
    max-width: 200px !important;
}

.mw-500 {
    max-width: 500px;
}

.fs-sm {
    font-size: var(--font-sm) !important;
}

.fs-sz {
    font-size: var(--font-sz) !important;
}

.fs-lg {
    font-size: var(--font-lg) !important;
}

.fs-36 {
    font-size: 36px;
}

.fs-vs {
    font-size: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lh-1 {
    line-height: 1em;
}

.fw-400 {
    font-weight: 400;
}

.col-inh, .col-inh a {
    color: inherit !important;
}

.curved-box {
    width: 200px;
    height: 100px;
    background-color: #007bff; /* The color of your main content */
    position: relative; /* Essential for positioning the corner piece */
    overflow: hidden; /* Ensures the corner piece doesn't stick out */
    /* Standard inward border-radius for all but the bottom-left */
    border-radius: 20px 20px 20px 0px;
}

.b-t-g {
    background: var(--black-to-grey);
}

.back-text {
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

.sweep-text, .sweep-text-5, .sweep-text-dark {
    position: relative;
    /*background: linear-gradient(90deg,rgb(0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0.3),rgb(0,0,0));*/
    background: linear-gradient(90deg,#000000,#747474,#555555,rgba(255,255,255,0.2));
    background-size: 200% !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent;
    display: inline-block;
    animation: text-colors 3s infinite linear;
}

.col-move-eff, .col-move-eff-5 {
    position: relative;
    background-size: 200% !important;
    display: inline-block;
    color: transparent;
    animation: text-colors 3s infinite linear;
}

.sweep-text-5 {
    background: linear-gradient(90deg,#000000,#747474,#555555,rgba(255,255,255,0.2),#555555,#747474,#000000);
    animation: text-colors 5s infinite linear;
}

.sweep-text-dark {
    /*background: linear-gradient(90deg, rgba(221, 221, 221, 0.5) 25%, rgba(238, 238, 238, 0.75) 50%, #ffffff 100%);*/
    background: linear-gradient(90deg, rgba(221, 221, 221, 0.5), rgba(238, 238, 238, 0.75), #ffffff);
    animation: text-colors 5s infinite linear;
}

.col-move-eff-5 {
    animation: text-colors 5s infinite linear;
}

@keyframes text-bg-move {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.green-text {
    color: #0cff00 !important;
}

.black-text {
    color: var(--black) !important;
}

.lazy {
    transition: opacity 0.5s;
    opacity: 0;
}

    .lazy.loaded {
        opacity: 1;
    }

.what-img {
    max-height: 61px;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.tv-cont .tradingview-widget-container iframe {
    min-height: 350px !important;
    /*max-width: 900px !important;*/
    width: 100%;
    margin: 0 auto;
}

.tv-cont .tradingview-widget-container .lg-widget iframe {
    min-height: 420px !important;
}

.tv-cont .tradingview-widget-container .sm-widget iframe {
    min-height: 200px !important;
}

.pill-box {
    background-color: #d9d9d9;
    border-radius: 50rem;
    padding: 5px;
    display: flex;
    width: 200px;
}

    .pill-box .pill {
        background-color: transparent;
        color: var(--black);
        font-family: var(--font-h);
        font-size: var(--font-sm);
        font-weight: 400;
        text-align: center;
        padding: 5px 10px;
        flex: 1;
    }

        .pill-box .pill a {
            text-decoration: none;
        }

    .pill-box.bg-dark .pill {
        color: var(--white);
    }

    .pill-box .pill.active {
        background-color: var(--green);
        border-radius: 50rem;
        color: var(--black);
    }

.lang-opt {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    z-index: 9999
}

    .lang-opt div {
        display: flex;
        flex-direction: row;
        align-items: center;
        transition: 0.3s ease-in-out;
        gap: 8px;
        background-color: rgb(255, 255, 255);
        border-radius: 20px;
        padding-inline: 10px;
        margin-right: 5px;
    }

        .lang-opt div button {
            background: transparent;
            color: rgb(51, 51, 51);
            border: none;
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

            .lang-opt div button.active {
                background: rgb(168, 223, 2);
                color: white;
            }

.lang-btn {
    border-radius: 100px;
    border-color: rgba(0, 0, 0, 0);
    line-height: 1.32;
    width: 64px;
    height: 64px;
    color: rgb(255, 255, 255);
    background-color: #a8df02;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: relative;
    cursor: pointer
}

.client_brand {
    max-height: 30px;
}

.become-partner-arrow {
    width: 198.834px;
    height: 43.824px;
    overflow: hidden;
}

.search-box {
    position: relative;
}

.search-results-container {
    position: absolute;
    top: 100%;
    /*left: 0;*/
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    z-index: 5000;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    min-width: 300px;
    max-width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Added a subtle shadow */
}

    .search-results-container ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .search-results-container li a {
        display: block;
        padding: 10px 15px; /* Increased padding */
        color: #333;
        text-decoration: none;
        font-size: 14px;
        transition: background-color 0.2s ease; /* Smooth transition */
    }

    .search-results-container li:nth-child(even) a {
        background-color: #f9f9f9;
    }

    .search-results-container li a:hover {
        background-color: #e9e9e9;
    }

/* --- Sticky Action Bar --- */
.sticky-action-bar {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    backdrop-filter: blur(5px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    /* Initial "circle" state */
    width: 54px;
    height: 54px;
    border-radius: 50px; /* Start with a circle */
    border: 5px solid var(--grey);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    /* Define transitions */
    transition: opacity 0.3s ease; /* Only transition opacity by default */
}

.sticky-action-bar-animate {
    transition: opacity 0.3s ease, border-color 0.7s ease 0.5s, /* Fade out border after 0.5s */
    width 1.3s cubic-bezier(0.8, 0, 0.2, 1) 1.2s, height 0.4s cubic-bezier(0.8, 0, 0.2, 1) 2.5s, /* Height animates AFTER width */
    border-radius 1.3s cubic-bezier(0.8, 0, 0.2, 1) 1.2s, bottom 1.3s cubic-bezier(0.8, 0, 0.2, 1) 1.2s;
}

.sticky-action-bar.visible {
    /* Expanded "bar" state */
    width: 80%;
    max-width: 800px;
    height: 54px; /* Set a specific final height */
    border-radius: 50rem;
    border-color: transparent;
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

.sticky-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 30px; /* Adjusted padding for the new height */
    width: 100%;
    height: 100%;
    /* Hide content until bar is fully expanded */
    opacity: 0;
}

.sticky-action-bar-animate .sticky-bar-content {
    transition: opacity 0.4s ease 1.9s; /* Delay opacity transition until the end */
}

.sticky-action-bar.visible .sticky-bar-content {
    opacity: 1;
}

.sticky-bar-right {
    display: flex;
    gap: 15px;
}

.st-tp-svg {
    width: 125px;
    height: 30px;
}

.st-star-svg {
    width: 130px;
    height: 25px;
}

/* Ad Popup Styles */
.ad-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Ensure it's on top */
}

.ad-popup-content {
    position: relative;
    background-color: black;
    color: white;
    border-radius: 8px;
    text-align: left;
    width: 500px;
    max-width: 95%;
}

    .ad-popup-content .ad-popup-top {
        padding: 20px;
    }

.ad-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    color: white;
    border: solid 1px white;
    border-radius: 50%;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ad-popup-close span {
        position: relative;
        top: -1px;
    }

.ad-popup-content h4 {
    background: linear-gradient(90deg,#ffffff,#9b9b9b);
    font-size: 22px;
    font-weight: 300;
    line-height: 1.1em;
}

.ad-popup-content .bg-color {
    background: linear-gradient(90deg,#ffffff,#cd993a);
}

.ad-popup-content h4 span {
    font-weight: 600;
}

.ad-popup-content h3 {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1em;
    margin-bottom: 0px;
}

.ad-popup-content p small {
    font-size: 11px;
}

.ad-popup-content .ad-cta {
    padding: 7px 30px;
    font-size: 18px;
    font-weight: 500;
    color: black;
    border-radius: 7px;
}

.ad-logo {
    height: 40px;
}

.ad-popup-content img.ad-main {
    max-height: 300px;
    position: relative;
    left: -90px;
    z-index: 1;
}

.ad-main-cont {
    z-index: 2;
}

.ad-popup-bottom {
    border-top: solid 0.5px #a6a6a6;
    font-size: 10px;
    padding: 10px 20px;
}

.ad-popup-bot-left {
    background: linear-gradient(90deg,#0bff00,#ffffff);
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    text-align: left;
    font-weight: 600;
}

.ad-popup-bot-right {
    color: #0bff00;
    text-align: right;
    font-family: var(--font-h);
}

.flex-33 {
    flex: 0 0 30%;
    width: 30%;
}

.flex-50 {
    flex: 0 0 45%;
    width: 45%;
}

.home-ac-btn a {
    background-color: var(--black);
    color: var(--white);
}

.home-ac-btn.active a {
    background-color: var(--green);
    color: var(--black);
}

.web-slider-dots {
    text-align: center;
    margin-top: 15px;
}

.web-slider-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--white);
    margin: 0 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.dots-dark .web-slider-dot {
    background-color: var(--black);
}

.web-slider-dot.active {
    background-color: #0bff00;
}

.h2AccType {
    background: linear-gradient(90deg,#000000,#000000,#545454,#545454,#000000,#000000,#545454,#545454);
    font-size: 32px !important;
    font-weight: 500;
}

/* RESPONSIVE ADJUSTMENTS */
@media (min-width: 768px) {
    .px-md-60 {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 992px) {
    .faq-sm {
        width: 85%;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .account-type .home-ac-btn {
        flex: unset;
        width: 180px;
    }
}

@media (min-width:1200px) {
    .become-partner-arrow {
        width: 230px;
    }

    /* Moving whatsapp button on the left side */
    #\_\_EAAPS_PORTAL .FloatingButton__FloatingButtonContainer-sc-51a1f737-0 {
        inset: auto auto 0px 0px !important;
    }

    #\_\_EAAPS_PORTAL [class*="FloatingWindow__Container"] {
        inset: auto auto 76px 20px !important;
    }
}

@media (min-width: 1600px) {
    .navbar-nav {
        gap: 2.5rem !important;
    }

    .nav-link {
        font-size: var(--font-lg) !important;
    }

    .tv-1 {
        top: 70px;
    }

    .tv-2 {
        top: 400px;
    }

    .tv-3 {
        top: 140px;
    }

    .tv-4 {
        left: 60%;
        top: 480px;
    }

    .tv-5 {
        top: 230px;
    }

    .trading-begins {
        width: 70%;
    }

    .img-top-text {
        width: 50%;
    }

    h3.img-btm-text {
        font-size: 40px;
    }

    .trader-count {
        font-size: 320px;
    }

    .account-box img {
        width: 65%;
    }

    .w-xxxl-80 {
        width: 80% !important;
    }

    .mw-xxxl-95 {
        max-width: 95% !important;
    }

    .mt-xxxl-5 {
        margin-top: 3rem !important;
    }

    .pb-xxxl-5 {
        padding-bottom: 3rem !important;
    }

    .pb-xxxl-7 {
        padding-bottom: 5rem !important;
    }

    .px-xxxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .home-ac-btn a {
        font-size: 20px;
    }

    .d-xxxl-block {
        display: block !important;
    }
}

@media (max-width: 1199.98px) {
    #mobileMenu .search-box input {
        color: var(--black);
    }

    #mobileMenu .navbar-nav {
        max-height: 400px;
        overflow-y: auto;
    }

    .navbar-toggler-icon {
        background-image: var(--navbar-toggler-icon);
    }

    .nav-right {
        display: none !important;
    }

    /* Make collapse appear on top of content */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 10px;
        width: 250px;
        background: #fff;
        z-index: 1040;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        padding: 20px 0px;
    }

        /* Optional smooth fade */
        .navbar-collapse.collapsing {
            opacity: 0;
            height: auto;
            transition: opacity 0.15s linear;
        }

        .navbar-collapse.show {
            opacity: 1;
            transition: opacity 0.3s ease-in;
        }

        .navbar-collapse .search-box input {
            border: solid 1px #545454;
        }

    .navbar-nav .nav-link {
        display: block;
        padding: 0.75rem 1.5rem;
        text-decoration: none;
    }

    .menu-toggle {
        font-weight: 600 !important;
    }

    .sub-menu {
        /* Initially hidden */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        background-color: #f1f1f1;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        /* Styling for the submenu links */
        .sub-menu li a {
            display: block;
            padding: 0.5rem 2.5rem; /* Indented padding */
            color: var(--black);
            text-decoration: none;
        }

    /* State when the submenu is open */
    .nav-item.open .sub-menu {
        /* Adjust max-height based on content; 500px is usually safe for mobile menus */
        max-height: 500px;
    }

    /* Style the link that triggers the submenu */
    .nav-item .nav-link {
        position: relative;
    }

        /* --- UPDATED CARET STYLES START (CSS BORDER CHEVRON) --- */
        .nav-item .nav-link::after {
            content: ''; /* Empty content is crucial for border trick */
            position: absolute;
            right: 1.5rem;
            /* Creating the V shape using borders */
            display: inline-block;
            width: 8px; /* Size of the caret */
            height: 8px;
            border-right: 2px solid #333; /* Color and thickness */
            border-bottom: 2px solid #333;
            /* Center vertically */
            top: 50%;
            /* Rotate 45deg to make it point DOWN */
            transform: translateY(-50%) rotate(45deg);
            transition: transform 0.3s ease-in-out;
        }

    /* Rotate the caret 180 degrees (up arrow) when menu is open */
    .nav-item.open .nav-link::after {
        /* Rotate from 45deg (down) to -135deg (up) */
        transform: translateY(-50%) rotate(-135deg);
    }

    .sticky-header {
        position: relative;
    }

    .tv-1 {
        position: absolute;
        top: 50px;
        left: -30px;
    }

    .tv-2 {
        position: absolute;
        top: 290px;
        left: -30px;
    }

    .tv-5 {
        position: absolute;
        top: 180px;
        right: -30px;
    }

    .trader-count {
        font-size: 150px;
        letter-spacing: 0.5rem;
    }

    .br-md-hide br {
        display: none;
    }
}

@media (max-width: 991.98px) {

    h2, h3.img-btm-text, .prd-box-sec h2, .sec-spread h2 {
        font-size: 28px;
    }

    .logo {
        height: 30px;
    }

    .blur-right {
        border-radius: 20px;
        overflow: hidden;
    }

    .col-7-responsive {
        flex: 0 0 auto;
        width: calc(100% / 3); /* 33.33% width for 3 columns */
        margin-bottom: 20px;
    }

    .home-chart {
        padding: 10px;
    }

    .tv-widget-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.5rem;
        max-width: 100%;
        margin-top: 1rem;
    }

    .tv-widgets-mini {
        position: unset;
        left: unset;
        right: unset;
        top: unset;
        flex-shrink: 0;
        margin: 0;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .blur-bottom::after {
        content: none;
    }

    .trader-count {
        font-size: 120px;
        letter-spacing: 0.8rem;
    }

    .ps-llg-4 {
        padding-left: 1.5rem !important;
    }

    .w-llg-100 {
        width: 100% !important;
    }

    .open-account {
        padding: 60px 0px;
    }

        .open-account h4 {
            font-size: 36px;
        }

    .pad-llg-20 {
        padding: 20px;
    }

    .hide-llg {
        display: none !important;
    }

    .faq-more {
        padding: 40px 0px;
    }

    .prd-box a {
        font-size: 18px;
        height: 50px;
    }

        .prd-box a.active {
            min-width: 150px;
        }

    .prd-box-container {
        max-width: 790px;
        width: 90%;
    }

    .prd-box {
        width: 750px;
    }

    .br-sm-hide br {
        display: none;
    }

    .br-m-hide {
        display: none;
    }

    .account-box {
        flex: 0 0 100%;
        margin: 0px;
    }

    .mobile-slider {
        position: relative;
        overflow: hidden;
    }

        .mobile-slider .mobile-slider-track.row {
            display: flex;
            flex-wrap: nowrap; /* This is the key fix */
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* For Firefox */
            margin-bottom: 1rem; /* Space for dots */
        }

        .mobile-slider .mobile-slider-track.slide-move {
            touch-action: pan-x;
        }

    .mobile-slider-track::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, Opera */
    }

    .mobile-slide {
        flex: 0 0 100%;
        scroll-snap-align: center;
        margin-right: 15px;
        margin-top: 0 !important; /* Override mt-4 */
        height: auto; /* Allow slides to grow based on content */
    }

        .mobile-slide > div {
            height: 100%; /* Make the inner div fill the slide height */
        }

        .mobile-slide:last-child {
            margin-right: 0;
        }

    .mobile-slider-dots {
        text-align: center;
        margin-top: 15px;
    }

    .mobile-slider-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--white);
        margin: 0 5px;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    .dots-dark .mobile-slider-dot {
        background-color: var(--black);
    }

    .mobile-slider-dot.active {
        background-color: #0bff00;
    }

    .fs-md-24 {
        font-size: 24px;
    }

    .h2AccType {
        font-size: 40px !important;
    }

        .h2AccType ~ p {
            font-size: 18px;
        }

    .w-md-90 {
        width: 90%;
    }

    .col-45 {
        flex: 0 0 45%;
        width: 45%;
        padding: 0px;
    }

    .col-55 {
        flex: 0 0 55%;
        width: 55%;
        padding: 0px;
    }

    .mar-sm-40 {
        margin-bottom: 40px !important;
    }

    .mar-sm-60 {
        margin-bottom: 60px !important;
    }

    .pad-sm-40 {
        padding-bottom: 40px;
    }

    .pad-sm-60 {
        padding-bottom: 60px;
    }

    .pt-s-0 {
        padding-top: 0px;
    }

    .p-s-0 {
        padding: 0px;
    }

    .w-sm-90 {
        width: 90%;
        margin: 0 auto;
    }

    .mh-sm-u {
        min-height: unset;
    }

    .brd-sm-20 {
        border-radius: 20px;
    }
}

@media (max-width: 767.98px) {
    .col-7-responsive {
        flex: 0 0 auto;
        width: 50%;
    }

    .trader-count {
        font-size: 100px;
        letter-spacing: 0.5rem;
    }

    .gloss-trade h3 {
        font-size: 36px;
    }

    .sticky-bar-left, #stDemoAcc {
        display: none; /* Hide Trustpilot and Demo button on smaller screens */
    }

    .sticky-bar-content {
        justify-content: center; /* Center the buttons */
    }

        .sticky-bar-content .btn-green-sleek {
            min-width: 190px;
            text-align: center;
        }
}

@media (min-width: 576px) and (max-width: 991.98px) and (orientation: portrait) {
    .home-chart-cont {
        margin-top: 0px;
        padding-top: 110px;
        max-width: 545px;
    }

    .home-chart {
        padding: 0px;
        border: 0px;
        border-radius: unset;
        z-index: 1;
        position: relative;
    }

    .tv-widget-container {
        position: absolute;
        top: 10px;
        width: 100%;
    }

    .reg-lic img {
        width: 46%;
        left: 27%;
    }

    .sec-100, #horizontal-scroll-section {
        min-height: unset;
    }
}

@media (max-width: 575.98px) {
    .col-sm-7-responsive {
        width: 100%;
        padding-bottom: 20px;
    }

    .px-sm-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .home-chart-cont {
        width: 100%;
        margin-top: 0px;
        padding-top: 110px;
    }

    .home-chart {
        padding: 0px;
        border: 0px;
        border-radius: unset;
        z-index: 1;
        position: relative;
    }

    .tv-widget-container {
        position: absolute;
        top: 10px;
        width: 100%;
    }

        .tv-widget-container .bottom-link {
            display: none;
        }

    .trader-count {
        font-size: 70px;
        letter-spacing: 0.3rem;
    }

    .btn-grp {
        flex-wrap: wrap;
    }

        .btn-grp a {
            flex: 0 0 55%;
        }

    .brd-gb {
        border-radius: 5px;
    }

    .brd-grad-inner {
        padding: 5px;
    }

        .brd-grad-inner > .row {
            margin: 0px;
        }

    .img-top-text {
        top: 10px;
        left: 10px;
        width: 60%;
    }

    .img-btm-text {
        bottom: 20px;
    }

    .mobile-slide .green-box {
        width: 75%;
        height: 180px;
    }

    .reg-lic img {
        width: 64%;
        left: 18%;
    }

    .fast-onb {
        background-position: center calc(100% + 40px);
    }

    .support-247, .reg-lic, .fast-onb {
        min-height: 300px;
    }

        .support-247 img {
            width: 75%;
        }

        .support-247 h4 {
            font-size: 22px;
        }

    .open-account h4 {
        font-size: 32px;
    }

    .mx-xs-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .acc-comp > .d-flex {
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        row-gap: 20px;
        text-align: center;
        padding-bottom: 20px;
    }

    .search-wrapper input {
        padding: 10px 20px;
    }

    .sticky-action-bar.visible {
        width: 60%;
    }

    .br-xs-hide br {
        display: none;
    }

    .ad-popup-content {
        max-width: 85%;
    }

        .ad-popup-content h4 {
            font-size: 18px;
        }

        .ad-popup-content h3 {
            font-size: 22px;
        }

        .ad-popup-content img.ad-main {
            position: unset;
            margin: 0 auto;
            left: unset;
            height: 200px;
        }

    .ad-logo {
        display: none;
    }

    .account-box .account-group p {
        font-size: 18px;
    }

    .fs-md-24 {
        font-size: 20px;
    }

    .fs-sm-12 {
        font-size: 12px;
    }

    .footer-img {
        padding-top: 20px;
    }

    .sm-hide {
        display: none;
    }
}

@media (max-width: 399.98px) {
    .img-top-text, .img-btm-text {
        font-size: 24px !important;
    }

    .trader-count {
        font-size: 60px;
        letter-spacing: 0.2rem;
    }

    .support-247, .reg-lic, .fast-onb {
        min-height: 270px;
    }

    .btn-grp a {
        flex: 0 0 60%;
    }
}

/* Captures widths 768px up to 1024px */
@media screen and (min-width: 992px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
    .tv-2 {
        top: 220px;
    }

    .tv-4 {
        top: 250px;
        left: 50%;
    }

    .sec-100, #horizontal-scroll-section {
        min-height: unset;
    }
}

/* ALL TABLETS - Landscape / Horizontal Mode */
/* Targets widths up to 1366px, includes 16:10 aspect ratios, */
@media screen and (min-width: 1025px) and (max-width: 1366px) and (max-height: 1024px) /* Fixed: Raised to allow iPad Pro's 1024px landscape height */
and (orientation: landscape) and (pointer: coarse) {

    /* Tier 1: For aspect ratios up to 16:10 (1.6), standard laptops (1.77) are blocked */
    @media (max-aspect-ratio: 16/10) {
        .sec-100, #horizontal-scroll-section {
            min-height: unset;
        }
    }
}

/* ALL MOBILE LANDSCAPE MODE */
@media screen and (min-width: 700px) and (max-width: 1000px) and (max-height: 500px) /* Fixed: Raised to allow iPad Pro's 1024px landscape height */
and (orientation: landscape) and (pointer: coarse) {

    .home-chart-cont {
        margin-top: 0px;
        padding-top: 110px;
        max-width: 545px;
    }

    .home-chart {
        padding: 0px;
        border: 0px;
        border-radius: unset;
        z-index: 1;
        position: relative;
    }

    .tv-widget-container {
        position: absolute;
        top: 10px;
        width: 100%;
    }
}