:root { font-family: 'Inter', sans-serif; /* Primary Colors */
        --primary-dark: #520B51; --secondary-dark: #2EB77F; --font-dark:#520B51; --text-white:#FFFFFF; --bg-light:#F4F4F4; --common-bg:#520B51; /* New Accent Colors */
        --accent-gold: #E9B430; --accent-cyan: #47B8E8; --accent-pink: #DF1F5A; /* Border Colors */
        --border-color: #520B51; --common-border: 1px solid var(--border-color); /* Gradient Backgrounds */
        --banner-gradient: linear-gradient(225.34deg, #520B51 -0.59%, #DF1F5A 49.71%, #520B51 100%); --secondary-gradient: linear-gradient(94.11deg, #520B51 2.62%, #47B8E8 100.29%); --banner-title-color: #EAF2FF; --banner-sub-title-color: #C9D6F3; --section-title-font-size: 32px; --section-sub-title-font-size: 16px; }
body { font-family: 'Inter', sans-serif; font-optical-sizing: auto; }
main { padding-top: 100px; }
.common-title { font-weight: 700; font-size: var(--section-title-font-size); line-height: 100%; text-align: center; color: var(--font-dark); margin-bottom: 16px; font-family: "Bungee", sans-serif; font-weight: 400; font-style: normal; }
.common-subtitle { font-weight: 400; font-size: var(--section-sub-title-font-size); line-height: 22px; text-align: center; color: #000; margin-bottom: 30px; max-width: 760px; margin-left: auto; margin-right: auto; }
.pad-y-80 { padding: 80px 0; }
.pad-y-60 { padding: 60px 0; }
.pad-top-30 { padding-top: 30px; }
.pad-top-60 { padding-top: 60PX; }
.pad-bottom-60 { padding-bottom: 60PX; }
.light-background-color { background-color: var(--bg-light); }
.white-background-color { background-color: #FFF !important; background: #FFF !important; }
.icon-width-40 { width: 40px; }
.custom-left-center, .custom-left-center h4 , .custom-left-center p { text-align: start !important; }
/* ======================= 
        Index Page Css Start
    ======================= */
    /* Hero Section */
    .hero-brand { background: url(/image/hero-bg.png) no-repeat center; color: #fff; padding: 80px 0 40px; overflow: hidden; font-family: 'Inter', sans-serif; }
.hero-brand__title { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 15px; font-family: "Bungee", sans-serif; font-weight: 400; font-style: normal; }
.hero-brand__subtitle { font-size: var(--section-sub-title-font-size); color: #CFE0FF; margin-bottom: 25px; }
.hero-brand__buttons .btn-open-account { background: var(--accent-gold); border: none; border-radius: 6px; padding: 16px 28px; color: #000; font-weight: 500; font-size: var(--section-sub-title-font-size); cursor: pointer; transition: all 0.3s ease; display: inline-block; }
.hero-brand__content { /* text-align: center; */
        margin-bottom: clamp(40px, 6vw, 80px); }
.hero-brand .hero-brand__content { text-align: center; }
.hero-brand__buttons .btn-open-account:hover { background: transparent; border: 1px solid var(--text-white); color: var(--text-white); transform: translateY(-2px); }
.hero-brand__image img { max-width: 100%; height: auto; }
.hero-brand__features { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 50px; overflow: hidden; white-space: nowrap; padding: 0 20px; }
.hero-brand__features-inner { display: flex; align-items: center; justify-content: space-between; width: -webkit-fill-available; }
.hero-brand__feature-item img { width: 20px; height: 20px; object-fit: contain; }
.hero-brand__feature-item span { font-size: 14px; color: #CFE0FF; }
/* Hero Section End*/
    /* Brand Benefit Section Start*/
    .brand-benefits { background: #fff; color: var(--font-dark); padding: 60px 0; }
.brand-benefits__why { text-align: center; /* margin-bottom: 80px; */ }
.brand-benefits__title { font-size: var(--section-title-font-size); font-weight: 700; margin-bottom: 40px; }
.brand-benefits__title span { color: var(--primary-dark); }
.brand-benefits__flex { display: flex; gap: 30px; justify-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; }
.brand-benefits__item { flex: 1 1 calc(33.333% - 30px); max-width: 420px; text-align: center; border: 1px solid #E2E8F0; border-radius: 16px; padding: 30px; transition: all 0.3s ease; background: #fff; }
.brand-benefits__item img { width: 48px; height: 48px; margin-bottom: 15px; }
.brand-benefits__item h4 { color: #000; font-weight: 600; font-size: 18px; line-height: 100%; letter-spacing: 0%; text-align: center; margin-bottom: 10px; }
.brand-benefits__item p { color: #000; font-weight: 400; font-size: 15px; line-height: 22px; text-align: center; margin: 0; }
.brand-markets { text-align: center; margin-top: clamp(50px, 6vw, 80px); }
.brand-markets__flex { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.brand-markets__item { flex: 1 1 calc(25% - 22.5px); max-width: 300px; text-align: center; border: 1px solid #E2E8F0; border-radius: 16px; padding: 30px; transition: all 0.3s ease; background: #fff; }
.brand-markets__item:hover, .brand-benefits__item:hover { border-color: var(--primary-dark); box-shadow: 0 5px 20px rgba(74, 204, 80, 0.1); transform: translateY(-5px); }
.brand-markets__item img { width: 36px; height: 36px; margin-bottom: 10px; }
.brand-markets__item h4 { color: #000; font-weight: 600; font-style: Semi Bold; font-size: var(--section-sub-title-font-size); line-height: 100%; letter-spacing: 0%; text-align: center; margin-bottom: 5px; }
.brand-markets__item p { color: #000; font-weight: 400; font-size: 13px; line-height: 22px; text-align: center; margin: 0; }
/* Brand Benefit Section End*/
    /* Trust Section Start */
    .trust-broker-section { background: var(--bg-light); color: var(--font-dark); padding: 80px 0; text-align: center; }
.trust-broker-title { margin-bottom: 50px; color: #212121; font-weight: 700; font-size: var(--section-title-font-size); line-height: 1.2; }
.trust-broker-stats { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 50px; }
/* Circle Container */
    .trust-broker-item { text-align: center; }
.circle { width: 220px; height: 220px; border-radius: 50%; background: #520B5120; border: 0px solid rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; transition: transform 0.3s ease; }
.circle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--primary-dark); -webkit-mask: conic-gradient(var(--primary-dark) calc(var(--progress, 100) * 1%), transparent 0%); mask: conic-gradient(var(--primary-dark) calc(var(--progress, 100) * 1%), transparent 0%); transition: all 1.2s ease; }
.circle:hover { transform: scale(1.05); }
.circle h3 { position: relative; color: #212121; font-weight: 700; font-size: 30px; line-height: 50px; margin-bottom: 5px; }
.circle p { position: relative; color: #212121; font-weight: 500; font-size: 14px; line-height: 100%; margin: 0; }
/* .trading-adventure-number-section-parent .circle { background: var(--primary-dark)0D; }
.trading-adventure-number-section-parent .circle::before { border: 3px solid var(--primary-dark); -webkit-mask: conic-gradient(#ffffff calc(var(--progress, 100) * 1%), transparent 0%); }
.trading-adventure-number-section-parent .circle h3 { color: var(--primary-dark); }
.trading-adventure-number-section-parent .circle p { color: var(--secondary-dark); }
*/
    /* Trust Section End */
    /* Brand common left right image content section Start */
    /* .common-brand-section { background: linear-gradient(180deg, rgba(110, 168, 255, 0.05) 0%, rgba(110, 168, 255, 0) 50%, rgba(110, 168, 255, 0.1) 100%); }
*/
    .common-brand-title { color: var(--font-dark); margin-bottom: 15px; font-weight: 700; font-size: var(--section-title-font-size); line-height: 40px; font-family: "Bungee", sans-serif; font-weight: 400; font-style: normal; }
.common-brand-subtitle { /* color: var(--); */
        margin-bottom: 15px; font-weight: 400; font-size: 15px; line-height: 22px; }
.common-brand-list { list-style: disc; padding-left: 20px; /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 26px; }
.common-brand-list li { margin-bottom: 8px; }
.common-brand-image { display: flex; justify-content: center; }
.common-brand-image img { max-width: 100%; height: auto; }
.custom-hero-buttons { justify-content: flex-start !important; }
/* Brand common left right image content section End */
    /* Your Fund Section Start */
    .funds-protection-section { background: var(--common-bg); padding: 80px 0; color: #fff; font-family: 'Inter', sans-serif; }
.start-learner-section .trade-buttons .btn-outline,
    .funds-protection-section .trade-buttons .btn-outline { border: 1px solid var(--accent-gold); background: var(--accent-gold); color: #000; }
.funds-text h2 { margin-bottom: 15px; color: var(--banner-title-color); font-weight: 700; font-size: var(--section-title-font-size); line-height: 100%; }
.funds-text p { margin-bottom: 15px; color: #F2F6FF; font-weight: 400; font-size: var(--section-sub-title-font-size); line-height: 22px; }
.funds-list { list-style: none; padding: 0; margin-bottom: 30px; }
.funds-list li { position: relative; padding-left: 20px; color: #F2F6FF; margin-bottom: 8px; font-weight: 400; font-size: 14px; line-height: 23px; }
.funds-list li::before { content: "•"; position: absolute; left: 0; color: #F2F6FF; font-weight: bold; }
.btn-learn-more { display: inline-block; border: 1px solid #fff; color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; text-decoration: none; transition: all 0.3s ease; }
.btn-learn-more:hover { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--font-dark); }
.funds-image { transition: transform 0.4s ease; }
.funds-image:hover { transform: translateY(-6px); }
/* Your Fund Section Start */
    /* Trusted Payments Section Css Start */
    .trusted-payments-section { background: linear-gradient(180deg, #F9FBFF 0%, #FFFFFF 100%); padding: 60px 0px; text-align: center; }
.payment-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 25px; margin-bottom: 60px; }
.payment-logos img { width: auto; object-fit: contain; background: #fff; border-radius: 8px; transition: all 0.3s ease; }
.payment-logos img:hover { transform: scale(1.05); }
/* Awards section */
    .awards-section { padding-top: 30px; }
.awards { display: flex; justify-content: center; align-items: flex-start; gap: 100px; flex-wrap: wrap; margin-top: 30px; }
.award { text-align: center; max-width: 200px; }
.award img { margin-bottom: 10px; transition: all 0.3s ease; height: 175px; }
.award img:hover { transform: translateY(-5px); }
.award-title { /* color: var(--secondary-dark); */
        margin-bottom: 3px; font-weight: 400; font-size: 15px; line-height: 22px; text-align: center; }
.award-year { color: var(--primary-dark); margin-bottom: 0px; font-weight: 600; font-size: 18px; line-height: 100%; }
/* Trusted Payments Section Css End */
    /* Start Learning Css Start */
    .start-learner-section { background:var(--common-bg); color: #fff; padding: 60px 0; /* margin: 60px auto 60px; */
        position: relative; }
h2.start-learner-title { font-weight: 700; font-style: Bold; font-size: var(--section-title-font-size); line-height: 100%; letter-spacing: 0%; letter-spacing: 0%; }
p.start-learner-subtitle { font-weight: 400; font-size: var(--section-sub-title-font-size); line-height: 22px; letter-spacing: 0%; }
.start-learner-content .trade-buttons { justify-content: start !important; }
.start-learner-image img { max-width: 100%; height: auto; }
/* Start Learning Css End */
    /* ======================= 
        Index Page Css End
    ======================= */
    /* ======================= 
        Account Page Css Start
    ======================= */
    /* Hero Banner Component Start*/
    .hero-banner { background: url(/image/inner-banner.png); min-height: 400px; display: flex; align-items: center; justify-content: center; padding: 80px 0; position: relative; text-align: center; }
.hero-content { max-width: max-content; margin: 0 auto; z-index: 2; }
.hero-title { margin-bottom: 20px; margin-left: auto; margin-right: auto; color: var(--text-white); /* max-width: 600px; */
        font-weight: 700; font-size: 40px; text-align: center; font-family: "Bungee", sans-serif; font-weight: 400; font-style: normal; }
.hero-subtitle { color: var(--banner-sub-title-color); margin-bottom: 20px; margin-left: auto; margin-right: auto; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 100%; text-align: center; }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-buttons a { padding: 17px 38px; border-radius: 10px; font-weight: 500; font-size: var(--section-sub-title-font-size); line-height: 100%; }
.hero-btn-primary { background: var(--accent-gold); border: none; transition: all 0.3s ease; margin: 0; color: #000 !important;border: 1px solid var(--accent-gold) !important; }
.hero-btn-primary:hover { background: transparent; color: var(--accent-gold) !important; transform: translateY(-2px); border: 1px solid var(--accent-gold);}
.hero-btn-secondary { background: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); transition: all 0.3s ease; }
.hero-btn-secondary:hover { background: var(--accent-gold); color: #000; border: 1px solid var(--accent-gold); transform: translateY(-2px); }
.trade-confidence-section .hero-btn-secondary { color: var(--primary-dark); border: 1px solid var(--primary-dark); }
.trade-confidence-section .hero-btn-secondary:hover { background: var(--primary-dark); color: var(--text-white); border: 1px solid var(--primary-dark); transform: translateY(-2px); }
.features-content { text-align: center; margin: 0 auto; }
.features-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.feature-card { background: var(--bg-light); width: 280px; height: 57px; padding: 20px; border-radius: 16px; display: flex; align-items: center; gap: 10px; opacity: 1; transition: all 0.3s ease; }
.feature-card:hover { background: #E5EDFF; transform: translateY(-2px); }
.feature-title { font-weight: 700; font-size: 14px; line-height: 100%; color: var(--primary-dark); margin: 0; flex: 1; }
/* Hero Banner Component End */
    /* Payment Methods Section */
    /* Table Container */
    .table-responsive { overflow-x: auto; border-radius: 0; box-shadow: none; }
.payment-methods-section .common-title { margin-bottom: 30px; }
/* Payment Table Styling */
    .payment-table { width: 100%; border-collapse: collapse; background: white; border: none; max-width: 950px; margin: 0 auto; border-radius: 12px; /* border: 1px solid #E2E8F0 */ }
.payment-table.custom-table-width { max-width: 750px; }
.payment-table thead th { padding: 20px 30px; font-weight: 600; font-size: var(--section-sub-title-font-size); color: var(--font-dark); text-align: left; border: none; border-bottom: 1px solid #E2E8F0; vertical-align: middle; width: 27%; }
/* Table Body */
    .payment-table tbody td { padding: 20px 30px; font-weight: 400; font-size: 15px; /* color: var(--secondary-dark); */
        border: none; border-bottom: 1px solid #E2E8F0; vertical-align: middle; }
/* Remove border from last row */
    .payment-table tbody tr.no-border-bottom td { border-bottom: none; }
/* Hover Effect */
    .payment-table tbody tr:hover { background-color: #f8f9fa; transition: background-color 0.2s ease; }
/* Three Card Grid Layout */
    .three-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 2rem auto 0; }
.three-card-section.how-protect,
    .how-protect { background: var(--bg-light); }
.info-card { border: var(--common-border); border-radius: 16px; padding: 20px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); position: relative; flex: 1 1 calc(20% - 30px); max-width: 400px; min-width: 250px; display: flex; flex-direction: column; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
.custom-bg { background: var(--text-white); }
.info-card.custom-border { border: 1px solid var(--font-dark); }
.info-card.custom-border:hover { border-color: var(--primary-dark); box-shadow: 0 5px 20px rgba(25, 63, 173, 0.1); }
.card-icon { font-size: 25px; margin: 0 auto .5rem; transition: all 0.3s ease; }
.card-icon i { font-size: 24px; transition: color 0.3s ease; }
.card-title { font-family: 'Inter', sans-serif; color: var(--font-dark); font-weight: 600; font-size: 20px; line-height: 25px; margin-bottom: 10px; }
.card-description { font-family: 'Inter', sans-serif; /* color: var(--secondary-dark); */
        margin: 0; font-weight: 400; font-style: Regular; font-size: 14px; line-height: 22px; letter-spacing: 0%; text-align: center; text-decoration: none; }
a.card-description { color: var(--font-dark); font-weight: 500; }
/* Generic Three Card Section End*/
    /* Steps Section */
    /* Steps Container */
    .steps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 30px auto 0; }
/* Individual Step Item */
    .step-item { background: #ffffff; border: var(--common-border); border-radius: 16px; padding: 30px; transition: all 0.3s ease; position: relative; }
/* Step Number - Exact specifications */
    .step-number { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; line-height: 100%; letter-spacing: 0%; text-align: center; background: var(--common-bg); color: var(--text-white); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all 0.3s ease; }
/* Step Content */
    .step-content { flex: 1; }
/* Step Text - Exact specifications */
    .step-text { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; line-height: 22px; letter-spacing: 0%; /* color: var(--secondary-dark); */
        margin: 0; }
/* Steps Section End*/
    /* Trust Badges Section */
    .trust-badges-section { background: var(--secondary-gradient); padding: 24px 0; }
/* Trust Badges Container */
    .trust-badges-container { display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; }
/* Individual Trust Badge - Exact specifications */
    .trust-badge { width: 290px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
/* Trust Badge Text - Exact specifications */
    .trust-badge-text { font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--section-sub-title-font-size); line-height: 100%; letter-spacing: 0%; text-align: center; color: #CFE0FF; margin: 0; }
/* Trust Badges Section End*/
    /* Transparency Section */
    /* Transparency Boxes Container (UL) - Remove default list styling */
    .transparency-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 0; padding: 0; }
.transparency-box { flex: 1 1 400px; max-width: 429px; /* height: 57px; */
        background: var(--bg-light); border-radius: 16px; padding: 20px; display: flex; align-items: center; transition: all 0.3s ease; margin: 0; }
.transparency-box.custom-bg { background: var(--text-white); }
.transparency-box:hover { background: #D6E3FF; transform: translateY(-2px); }
/* Transparency Box Text - Exact specifications */
    .transparency-text { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: 0%; text-align: center; /* color: var(--secondary-dark); */
        margin: 0; }
/* Transparency Section End*/
    /* Pricing Section */
    /* Pricing Cards Container */
    .custom-bg-pricing { background: var(--bg-light); }
.pricing-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 3rem auto 0; }
/* Individual Pricing Card */
    .pricing-card { background: #ffffff; border: 1px solid #E2E8F0; border-radius: 16px; position: relative; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); flex: 1 1 calc(25% - 30px); /* 4 cards per row by default */
        max-width: -webkit-fill-available; min-width: 250px; display: flex; flex-direction: column; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border-color: var(--primary-dark); }
/* Popular Badge */
    .popular-badge { position: absolute; top: 0; right: 0; background: var(--primary-dark); color: var(--text-white); padding: 10px 14px; border-top-right-radius: 16px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; text-align: center; letter-spacing: 0.5px; }
/* Plan Title - Exact specifications */
    .plan-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; line-height: 100%; letter-spacing: 0%; padding: 40px 30px 0; color: var(--font-dark); margin: 0; }
/* Pricing Content */
    .pricing-content { padding: 1.5rem; height: -webkit-fill-available; display: flex; flex-direction: column; justify-content: space-between; }
.feature-list li { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 15px; line-height: 23px; letter-spacing: 0%; color: #666666; margin-bottom: 0.75rem; position: relative; }
/* Highlighted text in features - Exact specifications */
    .highlight { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; line-height: 23px; letter-spacing: 0%; color: var(--font-dark); }
/* Pricing Buttons - Exact specifications */
    .pricing-btn { width: 100%; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: 0%; padding: 14px 20px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-align: center; background: var(--primary-dark); color: var(--text-white); transition: all 0.3s ease; }
.pricing-btn:hover { background: var(--common-bg); color: var(--text-white); transform: translateY(-2px); }
/* Pricing Section End*/
    /* Account Features Wrapper */
    .account-features-wrapper { position: relative; }
/* Individual Account Feature Section */
    /* Popular Section Badge */
    .popular-section-badge { background: var(--primary-dark); padding: 10px 14px; border-radius: 12px; letter-spacing: 0.5px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 100%; text-align: center; width: fit-content; margin: 0 auto 26px; color: var(--text-white); }
/* Feature Badges Container */
    .feature-badges { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 30px 0; }
/* Individual Feature Badge - Exact specifications */
    .feature-badge { /* width: 318px; */
        background: #F5F8FF; border-radius: 16px; padding: 20px; display: flex; align-items: center; transition: all 0.3s ease; flex: 1; justify-content: center; }
.feature-badge-light { background: #fff; }
.feature-badge:hover { background: #E5EDFF; transform: translateY(-2px); }
/* Badge Text - Exact specifications */
    .badge-text { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: 0%; text-align: center; color: #333333; margin: 0; }
/* Feature Link - Exact specifications */
    .feature-link { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; line-height: 22px; letter-spacing: 0%; text-align: center; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 0%; text-decoration-skip-ink: auto; color: var(--primary-dark); display: block; margin: 0 auto; width: fit-content; transition: all 0.3s ease; }
.feature-link:hover { color: #1435A0; text-decoration-thickness: 2px; }
/* Demo Page */
    .forex-demo-section.demo-section-bg { background: url(../image/demo/learn-section-bg.png) center/cover no-repeat }
.brand-benefits__item.demo-account-width { max-width: 100%; }
/* ======================= 
        Account Page Css End
    ======================= */
    /* ======================= 
        Company Page Css Start
    ======================= */
    /* Custom Card  Four Card*/
    .custom-four-card-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin: 3rem auto 0; }
.custom-four-info-card { border: var(--common-border); border-radius: 16px; padding: 20px 5px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); position: relative; flex: 1 1 calc(20% - 30px); max-width: 400px; min-width: 250px; display: flex; flex-direction: column; }
.custom-four-info-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
.custom-four-card-icon { font-size: 15px; margin: 0 auto .5rem; transition: all 0.3s ease; }
.custom-four-feature-title { margin: 0; flex: 1; font-weight: 700; font-size: 12px; line-height: 10px; text-align: center; color: var(--primary-dark); }
/* Contact Section Styles */
    .contact-section { background-color: #1E3C93; /* dark blue background */
        color: #CFE0FF; padding: 10px 0; }
.contact-container { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.contact-item { display: flex; align-items: center; gap: 8px; font-size: 14px; width: 320px; justify-content: center; }
.contact-item a { color: #CFE0FF; text-decoration: none; font-weight: 400; font-size: 14px; line-height: 100%; }
/* Negative Page Css */
    .trust-badge.custom-badge { width: 340px; }
.info-bar { background-color: #1E3C93; color: #CFE0FF; padding: 20px 0; font-weight: 400; font-size: 14px; line-height: 100%; }
.info-container { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.info-container .dot { color: #CFE0FF; }
/* Licence Page Css */
    .custom-width-licence { width: 400px; }
/* sponsorship page css */
    .partner-section { background: url("../image/company/sponsorship-partnership/gatefe-bg.png") center/cover no-repeat; position: relative; padding: 80px 0; color: #fff; }
/* Optional overlay to make text readable */
    .partner-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 20 60 / 8%); z-index: 1; }
.partner-text h2 { margin-bottom: 15px; color: var(--primary-dark); font-weight: 700; font-size: var(--section-title-font-size); line-height: 100%; }
.partner-text p { margin-bottom: 25px; /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 22px; }
.partner-points { list-style: none; padding: 0; margin: 0; }
.partner-points li { margin-bottom: 15px; padding: 12px 15px; display: flex; align-items: center; gap: 10px; border: 1px solid #E2E8F0; background: #FFFFFF; width: 400px; border-radius: 16px; color: var(--primary-dark); font-weight: 500; font-size: 14px; line-height: 22px; }
.partner-points i { color: #00a8ff; font-size: var(--section-sub-title-font-size); }
.partner-logo { display: flex; justify-content: center; }
.partner-logo img { height: 360px; width: 350px; }
/* awards-recognitions page css */
    .partner-logos-card { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.partner-card { transition: all 0.3s ease; border: 1px solid #E2E8F0; flex: 1 1 250px; max-width: 240px; border-radius: 16px; padding: 20px; display: flex; justify-content: center; align-items: center; background: #fff; }
.partner-card:hover { background: #eef1f6; transform: translateY(-3px); }
.partner-card img.logo1 { width: 100px; height: 105px; }
.partner-card img.logo2 { width: 200px; height: 43px; }
.partner-card img.logo3 { width: 86px; height: 80px; }
.partner-card img.logo4 { width: 200px; height: 60px; }
.partner-card img.logo5 { width: 200px; height: 60px; }
/* Timeline Section */
    .timeline-section { background: #FFFFFF; }
.timeline-wrapper { position: relative; padding: 40px 0px; display: flex; justify-content: space-between; align-items: flex-start; }
.timeline-line { position: absolute; top: 87px; left: 50px; right: 50px; height: 1px; background: #93B1F8; z-index: 1; }
.timeline-item { position: relative; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.timeline-year { margin-bottom: 15px; order: 1; color: var(--font-dark); font-family: Inter; font-weight: 600; font-size: 18px; text-align: center; }
.timeline-dot { width: 10px; height: 10px; background: #A7D5FF; border-radius: 50%; position: relative; z-index: 2; box-shadow: 0 0 0 4px #E5EDFF; order: 2; margin-bottom: 20px; }
.timeline-item.active .timeline-dot { background: var(--primary-dark); box-shadow: 0 0 0 4px var(--primary-dark)33, 0 0 20px rgba(25, 63, 173, 0.4); animation: pulse 2s infinite; }
.timeline-item.active .timeline-year { font-weight: 700; }
@keyframes pulse {
 0%, 100% { box-shadow: 0 0 0 4px var(--primary-dark)33, 0 0 20px rgba(25, 63, 173, 0.4); }
50% { box-shadow: 0 0 0 8px var(--primary-dark)1a, 0 0 30px rgba(25, 63, 173, 0.6); }
 }
.timeline-content { order: 3; }
.timeline-content p { margin: 0; padding: 0 10px; /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 15px; line-height: 22px; }
/* ======================= 
    Company Pages Css End
    ======================= */
    /* ======================= 
    Trading Pages Css End
    ======================= */
    /* trading adventrues page css */
    .why-traders-section { position: relative; overflow: hidden; }
/* Wrapper */
    .why-traders-wrapper { position: relative; }
/* Rows */
    .why-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 120px; }
/* Cards */
    .why-card { width: 470px; transition: all 0.3s ease; opacity: 1; border-radius: 16px; border-width: 1px; padding: 30px; border: 1px solid #E2E8F0; }
.why-card.left { text-align: left; }
.why-card.right { text-align: right; }
.why-card:hover { border-color: var(--primary-dark); box-shadow: 0 8px 25px rgba(25, 63, 173, 0.15); transform: translateY(-5px); z-index: 10; }
/* Icon */
    .why-icon { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px; transition: transform 0.3s ease; }
.why-card:hover .why-icon { transform: scale(1.1); }
.why-card-title { color: var(--font-dark); margin-bottom: 10px; font-weight: 600; font-size: var(--section-sub-title-font-size); line-height: 100%; }
.why-card-desc { /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 22px; margin-bottom: 0px; }
/* Center Circle */
    .why-center-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 390px; height: 390px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 50%; box-shadow: 0 10px 40px rgba(25, 63, 173, 0.08); display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; z-index: 1; transition: all 0.3s ease; }
.why-center-circle:hover { transform: translate(-50%, -50%) scale(1.03); box-shadow: 0 15px 50px rgba(25, 63, 173, 0.12); border-color: var(--primary-dark); }
.circle-title { color: var(--font-dark); margin-bottom: 15px; font-weight: 700; font-size: var(--section-title-font-size); line-height: 100%; text-align: center; font-family: "Bungee", sans-serif; font-weight: 400; font-style: normal; }
.circle-desc { /* color: var(--secondary-dark); */
        font-weight: 400; font-size: var(--section-sub-title-font-size); line-height: 22px; text-align: center; }
.custom-card-align,.custom-card-align .card-description { text-align: start; }
.custom-card-align .card-icon { margin: 0 0 .5rem; }
.transparency-dot { position: relative; padding-left: 30px; margin-bottom: 15px; list-style: none; }
.transparency-dot::before { content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; /* background-color: var(--secondary-dark); */
        border-radius: 50%; }
.numbers-section { background-color: var(--bg-light); padding: 80px 0; text-align: center; }
.section-title { font-weight: 700; color: var(--font-dark); margin-bottom: 50px; font-size: 1.8rem; }
.number-item { margin-bottom: 30px; }
.number-value { /* color: var(--primary-dark); */
        margin-bottom: 15px; font-weight: 700; font-size: 42px; line-height: 100%; }
.number-label { margin: 0; /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 100%; }
.support-section { background: var(--common-bg); color: #fff; padding: 80px 0; }
.support-title { margin-bottom: 10px; color: #FFFFFF; font-weight: 700; font-size: var(--section-title-font-size); line-height: 100%; }
.support-subtitle { color: #FFFFFF; margin-bottom: 30px; font-weight: 400; font-size: 14px; line-height: 100%; }
.support-card { background: #FFFFFF0D; border-radius: 10px; padding: 30px; transition: all 0.3s ease; margin: 15px; }
.support-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); }
.support-icon { font-size: 2rem; color: #ffffff; margin-bottom: 10px; }
.support-text { font-size: 0.95rem; color: #e2e6ef; margin: 0; }
.support-btn { display: inline-block; padding: 10px 25px; border: 1px solid #7da4ff; color: #fff; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; }
.support-btn:hover { background-color: #1e4bd1; border-color: #1e4bd1; color: #fff; }
.faq-section { background-color: var(--bg-light); /* max-width: 1100px; */
        margin: auto; }
.faq-title { font-weight: 700; color: var(--font-dark); margin-bottom: 40px; }
.faq-accordion .accordion-item { border: none; border-bottom: 1px solid #CDD6DA40; border-radius: 0; background: transparent; }
.faq-accordion .accordion-button { background-color: transparent; color: var(--font-dark); box-shadow: none; padding: 16px 0; border: none; font-weight: 500; font-size: var(--section-sub-title-font-size); line-height: 22px; width: 100%; text-align: left; cursor: pointer; position: relative; transition: color 0.3s ease; }
.faq-accordion .accordion-button::after { content: ""; position: absolute; right: 0; top: 50%; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230F1B44' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease; }
.faq-accordion .accordion-button.active::after { transform: translateY(-50%) rotate(180deg); }
.faq-accordion .accordion-body { /* color: var(--secondary-dark); */
        padding: 0 0 16px; font-weight: 400; font-size: var(--section-sub-title-font-size); line-height: 180%; letter-spacing: 0px; display: none; }
.faq-accordion .accordion-body.show { display: block; }
.faq-accordion .accordion-body::before { content: "> "; font-weight: 600; color: var(--font-dark); }
.common-image-center { display: flex; justify-content: center; }
.common-image-center img { width: auto; height: 60px; margin-bottom: 40px; }
/* spread & conditions*/
    .payment-table.custom-width-full { max-width: 100%; }
.spread-commission-card .card-icon img { height: 40px; width: 40px; }
.text-dark-title { font-weight: bold; color: var(--primary-dark); }
/* live quote */
    .market-move-width { max-width: 330px !important; }
.custom-coloumn-card { gap: 20px; margin-top: 20px; }
.custom-coloumn-item { max-width: 234px; }
/*Live Quote Section  */
    .live-quotes-section { background: #fff; padding: 60px 0; }
.market-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; margin-top: 40px; }
.tab-button { background: transparent; color: var(--primary-dark); padding: 20px 24px; transition: all 0.3s ease; border: 0px; font-weight: 500; font-size: 14px; line-height: 100%; width: -webkit-fill-available; }
.tab-button.active { border-bottom: 1px solid #E2E8F0; font-weight: 800; }
.table-container { overflow-x: auto; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.quotes-table { width: 100%; border-collapse: collapse; background: white; }
.quotes-table thead th { padding: 20px 24px; font-weight: 600; font-size: 16px; color: #0D1B3D; text-align: left; border-bottom: 1px solid #E2E8F0; background: #F7FAFF; }
.quotes-table tbody td { padding: 20px 24px; font-weight: 400; font-size: 15px; /* color: var(--secondary-dark); */
        border-bottom: 1px solid #E2E8F0; }
.quotes-table tbody tr:last-child td { border-bottom: none; }
.quotes-table tbody tr:hover { background-color: #F9FBFF; transition: background-color 0.2s ease; }
.instrument-name { color: var(--primary-dark); font-weight: 500; }
.change-positive { color: #22C55E; font-weight: 500; }
.change-negative { color: #EF4444; font-weight: 500; }
.trade-btn { color: var(--primary-dark); border: none; padding: 0px; cursor: pointer; transition: all 0.3s ease; font-weight: 400; font-size: 15px; line-height: 100%; }
.trade-btn:hover { border-bottom: 1px solid var(--primary-dark); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ======================= 
    Trading Pages Css End
    ======================= */
    /* ======================= 
    Platform overview Css Start
    ======================= */
    .choose-platform-section { padding: 60px 0 16px; }
.choose-plateform-learn-more-link { font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0%; text-align: center; text-decoration: underline; text-decoration-style: solid; color: var(--primary-dark); padding-top: 10px; }
/* ======================= 
    Platform overview Pages Css End
    ======================= */
    /* ======================= 
    Partnership Pages Css Start
    ======================= */
    .about-africa-content { display: flex; gap: 20px; }
.about-africa-content p { margin-bottom: 5px; /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 26px; }
.program-work-count { padding: 16px 14px; border-radius: 1000px; height: 52px; width: 52px; background: var(--common-bg); font-weight: 700; font-style: Bold; font-size: 20px; line-height: 100%; letter-spacing: 0%; text-align: center; color: var(--primary-dark); margin-bottom: 10px; }
.connected-cards { position: relative; }
.connected-cards .info-card { position: relative; z-index: 2; }
.connected-cards .info-card:not(:last-child)::after { content: ""; position: absolute; top: 63px; right: -30px; width: 29px; height: 2px; background: var(--primary-dark); z-index: 1; }
.testimonial-card { padding: 30px; border: 1px solid #E2E8F0; border-radius: 16px; text-align: center; max-width: 630px; transition: all 0.3s ease; margin-top: 10px; }
.testimonial-card:hover { border-color: var(--primary-dark); transform: translateY(-4px); }
.testimonial-card h3 { color: #0D1B3D; font-weight: 500; font-style: Italic; font-size: 18px; line-height: 26px; letter-spacing: 0%; }
.testimonial-card p { color: #1a2642; font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0%; }
.partner-testimonial-section .row { justify-content: space-between; }
.affilitiate-text { /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0%; text-align: center; }
.fusion-fullwidth { background:var(--banner-gradient), 
                    url(../image/partnership/askbidforex-africa/background.png)no-repeat center center; background-blend-mode: screen; background-position: center bottom; background-size: contain; padding-top: 100px; padding-bottom: 0px; margin-bottom: 30px; position: relative; color: #fff; }
.fusion-title-heading { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 15px; }
.fusion-text { font-size: var(--section-sub-title-font-size); color: #CFE0FF; margin-bottom: 25px; }
.fusion-text p { margin: 0; }
.fusion-section-separator { height: 195px; position: relative; width: 100%; }
.fusion-section-separator-svg { width: 100%; height: 100%; }
/* ======================= 
    Partnership Pages Css End
    ======================= */
    /* ======================= 
    contactus Pages Css Start
    ======================= */
    .custom-banner-width { max-width: 860px; }
/* Connect With Us Section */
    .connect-section { /* background: #fff; */
        padding: 60px 20px; text-align: center; }
.connect-title { font-weight: 700; font-size: 32px; line-height: 100%; color: var(--primary-dark); margin-bottom: 16px; }
.connect-subtitle { font-weight: 400; font-size: 16px; line-height: 22px; /* color: var(--secondary-dark); */
        margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }
.social-links { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.social-link { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: #FFF; border: 1px solid #E2E8F0; border-radius: 8px; text-decoration: none; /* color: var(--secondary-dark); */
        font-weight: 500; font-size: 15px; transition: all 0.3s ease; }
.social-link:hover { background: transparent; border-color: var(--primary-dark); transform: translateY(-2px); color: var(--primary-dark); }
.social-link span { color: var(--primary-dark); }
.social-link img { height: 25px; width: 25px; }
/* Message Form Section */
    .message-section { background: var(--light-bg); padding: 60px 20px; }
.message-container { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-control { width: 100%; padding: 16px 20px; border: 1px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--primary-dark); background: #fff; transition: all 0.3s ease; }
.form-control:focus { outline: none; border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(25, 63, 173, 0.1); }
.form-control::placeholder { color: #A0AEC0; }
textarea.form-control { min-height: 150px; resize: vertical; }
.search-box { position: relative; max-width: 600px; margin: 0 auto; }
.search-input { width: 100%; padding: 16px 50px 16px 20px; border: 1px solid var(--accent-gold); border-radius: 8px; background:transparent; backdrop-filter: blur(10px); color: var(--accent-gold); font-size: 15px; transition: all 0.3s ease; }
.search-input:focus { outline: none; background: rgba(255, 255, 255, 0.15); }
.search-input::placeholder { color: var(--accent-gold); }
.search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color:var(--accent-gold); font-size: 18px; pointer-events: none; }
/* Privacy Page css */
    .section-title { color: #0D1B3D; font-weight: 700; font-style: Bold; font-size: 32px; line-height: 100%; letter-spacing: 0%; }
.text-muted { /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0%; }
/* .who-we-are-section { background-color: #f8f9fa; }
*/
    .personal-data-section ul li { margin-bottom: 0.5rem; line-height: 1.7; list-style-type: disc; margin-left: 18px; }
.personal-data-section ul ul { margin-top: 0.5rem; }
/* 
    .data-sharing-section { background-color: #f8f9fa; }
*/
    .data-collection-section ul,
    .data-sharing-section ul { line-height: 1.7; margin-bottom: 1rem; }
/* ======================= 
    contactus Pages Css End
    ======================= */
    /* ======================= 
    Learning Centre Pages Css End
    ======================= */
    .sub-content-brand { color: #0D1B3D; font-weight: 600; font-style: Semi Bold; font-size: 24px; line-height: 35px; letter-spacing: 0%; }
.brand-learning-contents { margin-top: 24px; }
.brand-learning-content { margin-bottom: 18px; font-family: "Inter", sans-serif; }
.brand-learning-content h4 { margin-bottom: 0px; display: flex; align-items: center; gap: 6px; color: #0D1B3D; font-weight: 600; font-size: var(--section-sub-title-font-size); line-height: 13px; letter-spacing: 0%; }
.brand-learning-content p { /* color: var(--secondary-dark); */
        margin: 0; margin-left: 23px; font-weight: 400; font-size: 14px; line-height: 26px; letter-spacing: 0%; }
.analysis-feature-box { display: flex; flex-direction: column; gap: 15px; margin-bottom: 14px; }
.analysis-feature-item { display: flex; align-items: flex-start; background: #fff; border-radius: 12px; padding: 15px 20px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.analysis-feature-item:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.analysis-text h5 { margin: 0; color: #0D1B3D; font-weight: 600; font-size: var(--section-sub-title-font-size); line-height: 100%; letter-spacing: 0%; text-align: start; }
.analysis-text p { margin: 3px 0 0; /* color: var(--secondary-dark); */
        font-weight: 400; font-size: 14px; line-height: 22px; }
.analysis-insight-image img { border-radius: 16px; }
.analysis-icon img { height: 40px; width: 40px; margin-right: 10px; }
/* ======================= 
    Learning Centre Pages Css End
    ======================= */
    /* ======================= 
    Forex Demo Pages Css Start
    ======================= */
    .forex-demo-section { position: relative; background: url("../image/forex-basic/learn-market.png") center/cover no-repeat; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.forex-demo-overlay { /* background: rgba(0, 0, 0, 0.55); */
        width: 100%; height: 100%; padding: 120px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.forex-demo-title { color: #FFFFFF; margin-bottom: 15px; font-weight: 700; font-size: 32px; line-height: 100%; font-family: "Bungee", sans-serif; font-weight: 400; font-style: normal; }
.forex-demo-subtitle { color: #FFFFFF; margin-bottom: 25px; font-weight: 400; font-size: var(--section-sub-title-font-size); line-height: 22px; }
/* ======================= 
    Forex Demo Pages Css End
    ======================= */
    /* ======================= 
    Trading Strategies Pages Css start
    ======================= */
    .trading-strategic-bg { background: url(../image/trading-strategies.png) center/cover no-repeat; }
/* ======================= 
    Trading Strategies Pages Css End
    ======================= */
.cutom-award-row { display: grid; gap: clamp(30px, 33vw, 120px); grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 230px), 1fr)); margin-top: 50px; }
.award-img { margin-bottom: 10px; text-align: center; }
.custom-award-title { font-size: clamp(16px, 1.6vw, 18px); text-align: center; }
.custom-award-description { font-size: clamp(14px, 1.6vw, 16px); text-align: center; }
.cutom-spacing { padding: 60px 0; }
.commodities-benifit.light-background-color { background: var(--bg-light); }
.brand-benefits.light-background-color { background: var(--bg-light); }
/* .common-brand-section .hero-btn-secondary { border: 1px solid var(--accent-gold); color: var(--accent-gold); } */

/* Footer Whatsapp Icon */
.whatsapp-icon{position: fixed;bottom: 30px;right: 30px;z-index: 9999;}
.whatsapp-icon img{width: 50px;height: 50px;}