@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    background: #f5f5f5;
}

.btn-primary {
    background: linear-gradient(90deg, rgb(239, 60, 60), rgb(220, 27, 27));
    border: none;
    color: #fff;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

/* ---------------- TOP BAR ---------------- */
.top-nav {
    background: #0d1b2a;
    display: flex;
    justify-content: flex-end;
    padding: 5px 20px;
    align-items: center;
    font-size: 0.9rem;
}

.top-nav a {
    color: white;
    margin-left: 10px;
    text-decoration: none;
}

.top-nav span {
    margin: 0 5px;
    color: #999;
}

/* ---------------- DESKTOP NAV ---------------- */
nav.nav-main {
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 100;
    position: relative;
}

nav.nav-main img {
    height: 40px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.nav-links a {
    color: #0d1b2a;
    font-weight: 500;
    text-decoration: none;
    padding: 10px;
}

.nav-links .dropdown {
    position: relative;
}

.nav-links .dropdown>a {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-links .dropdown>a i {
    margin-left: 5px;
    font-size: 0.7rem;
}

/* Mega Dropdown */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    margin-left: calc(-60vw);
    padding: 30px 40px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    display: none;
    z-index: 1000;
}

.nav-item.dropdown:hover .mega-dropdown {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.mega-dropdown .row {
    margin: 0;
    width: 100%;
}

.mega-dropdown .row>div {
    padding: 0 25px;
}

.mega-dropdown h6 {
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 14px;
    color: #374151;
}

.mega-dropdown a {
    display: block;
    padding: 5px 0;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.mega-dropdown a:hover {
    color: #d8232a;
}

.promo-box {
    background: #d8232a;
    color: #fff;
    border-radius: 8px;
    padding: 20px;
}

.promo-box h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.promo-box p {
    font-size: 13px;
    margin-bottom: 12px;
}

.signup-btn {
    background: #e63946;
    padding: 8px 16px;
    border-radius: 18px;
    color: white !important;
    text-decoration: none;
    font-weight: 600;
}

/* Mobile toggle */
.mobile-toggle {
    display: none;
    cursor: pointer;
}

@media (max-width:768px) {
    .nav-links {
        display: none !important;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-links .mega-dropdown {
        display: none !important;
    }
}

/* ---------------- MOBILE DRAWER (from your TastyTrade version) ---------------- */
.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1999;
}

.drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #111;
    color: #fff;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.mobile-drawer.open {
    transform: translateX(0);
}

.drawer-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.drawer-close {
    font-size: 28px;
    text-align: right;
    cursor: pointer;
    padding: 15px;
    color: #fff;
}

.drawer-brand img {
    height: 28px;
    margin: 10px 15px;
}

.drawer-search {
    background: #222;
    margin: 0 15px 20px;
    padding: 8px 12px;
    border-radius: 25px;
    display: flex;
    align-items: center;
}

.drawer-search input {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    outline: none;
    font-size: 14px;
}

.drawer-search i {
    color: #aaa;
}

.drawer-sections {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px;
}

.drawer-item {
    border-bottom: 1px solid #222;
    padding: 15px 0;
}

.drawer-item>a,
.drawer-btn {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.drawer-btn .toggle-icon {
    color: #d8232a;
    font-weight: 700;
}

.drawer-submenu {
    display: none;
    padding: 15px 0;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.drawer-submenu.active {
    display: grid;
}

.drawer-submenu h6 {
    font-size: 14px;
    color: #b3ff00;
    margin-bottom: 8px;
}

.drawer-submenu a {
    display: block;
    color: #fff;
    padding: 5px 0;
    text-decoration: none;
    font-size: 14px;
}

.drawer-submenu a:hover {
    color: #d8232a;
}

.drawer-footer {
    display: flex;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    border-top: 1px solid #222;
}

.drawer-footer a {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-weight: 700;
    text-decoration: none;
}

.drawer-footer .sign-in {
    color: #fff;
    border-right: 1px solid #222;
}

.drawer-footer .sign-in:hover {
    text-decoration: underline;
    color: #d8232a;
}

.drawer-footer .open-account {
    background: #d8232a;
    color: #fff;
}



/* //hero section */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    /* subtle overlay for readability */
}

.hero-content h1 {
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.hero-content p {
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 1.5rem;
}

.hero-btn {
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 28px;
    background-color: #d8232a;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    transition: background 0.3s;
}

.hero-btn:hover {
    background-color: #a91e23;
}






/* //its you choice section */

.choice-carousel-section {
    background: #000;
    /* black background */
    padding: 100px 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.choice-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.choice-header p {
    font-size: 1.2rem;
    color: #ddd;
    margin-bottom: 50px;
    font-weight: 500;
}

/* Card Styles */
.choice-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    /* border-radius: 8px; */
    overflow: hidden;
    text-decoration: none;
    color: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 230px;
    /* fixed equal height */
    width: 260px;
    /* fixed equal width */
}

.card-top-border {
    height: 6px;
    background: #e40000;
    /* tastytrade red */
    width: 100%;
}

.choice-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.choice-card h5 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.choice-card p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
    flex-grow: 1;
}

.choice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Swiper styles */
.choice-swiper {
    padding-bottom: 60px;
}

.swiper-slide {
    width: 260px !important;
    /* lock card width */
    display: flex;
    justify-content: center;
}

.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    font-weight: 700;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 28px;
    /* match tastytrade size */
}

.swiper-pagination-bullet {
    background: #888;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #e40000;
}






/* Platform Section */
/* Font & section styling like Tastytrade */
.tab-section {
    background: #fff;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
}

.tab-container {
    max-width: 1200px;
    margin: 0 auto;
}

.tabs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.tab-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.tab-button {
    background: none;
    border: none;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    transition: all 0.3s;
}

.tab-button.active {
    font-weight: 700;
    color: #ff3b30;
    border-bottom: 2px solid #ff3b30;
}

/* Mobile Dropdown */
.mobile-tab {
    display: none;
    position: relative;
    cursor: pointer;
    align-items: center;
    gap: 10px;
}

.mobile-arrow {
    width: 20px;
    transition: transform 0.3s;
}

.mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10;
    flex-direction: column;
}

.mobile-dropdown-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
}

.mobile-dropdown-item:last-child {
    border-bottom: none;
}

.tab-contents {
    position: relative;
}

.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.tab-content.active {
    display: block;
    opacity: 1;
}

.tab-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.tab-text {
    max-width: 500px;
    text-align: left;
}

.tab-text h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
}

.feature-button,
.download-button {
    display: inline-block;
    margin: 10px 10px 0;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.feature-button {
    background: #ff3b30;
    color: #fff;
}

.download-button {
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

.tab-video {
    max-width: 480px;
    width: 100%;
    border-radius: 12px;
}

/* Mobile adjustments */
@media(max-width:1024px) {
    .tab-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .tab-list {
        display: none;
    }

    .mobile-tab {
        display: flex;
    }

    .tab-text {
        max-width: 100%;
    }
}


/* //train your way */

/* Section & layout */
.learn-section {
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
    background: #fafafa;
}

.max-width-container {
    max-width: 1200px;
    margin: 0 auto;
}

.two-col-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* Video Column */
.media-container {
    flex: 1 1 480px;
}

.learn-video {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
}

/* Text Column */
.animated-text {
    flex: 1 1 480px;
}

.text-container {
    max-width: 500px;
}

.text-top h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin-bottom: 15px;
}

.text-top .big-text {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
}

.text-bottom .feature-button {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    background: #ff3b30;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    .two-col-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .text-container {
        max-width: 100%;
    }
}




/* CTA */

.cta-section.dCqLxF {
    background-color: #000;
    background-image: url('./images/cta.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 80px 20px;
    position: relative;
    width: 100%;
}

.cta-section .cta-content {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.cta-section h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* .cta-section .cta-button {
    display: inline-block;
    padding: 14px 36px;
    background-color: #ff3b30;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
} */

.cta-section .cta-button {
    font-size: 0.87rem;
    line-height: 1.5rem;
    align-items: center;
    align-self: flex-start;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    max-height: 44px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, opacity 0.5s, color 0.3s;
    background-color: rgb(199, 255, 61);
    color: rgb(0, 0, 0);
    border: none;
    --hue: 170;
    border-radius: 9999px;
    padding: 12px;
    overflow: hidden;
    font-weight: 600 !important;
}

.cta-section .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 59, 48, 0.3);
}

/* Mobile / Tablet adjustments */
@media (min-width: 768px) {
    .dCqLxF {
        padding: 80px 40px;
    }
}

@media (min-width: 1024px) {
    .dCqLxF {
        background-image: url('./images/cta.jpeg');
        padding: 120px 0;
    }
}


/* General Footer */
.tasty-footer {
    background-color: #000;
    /* black footer */
    color: #ccc;
    font-family: Inter, Arial, sans-serif;
    padding: 40px 20px;
    line-height: 1.6;
    font-size: 14px;
}

/* Logo */
.tasty-footer .footer-logo {
    text-align: center;
    margin-bottom: 30px;
}

.tasty-footer .footer-logo img {
    max-width: 160px;
}

/* Social Icons */
.tasty-footer .footer-social {
    text-align: center;
    margin-bottom: 30px;
}

.tasty-footer .footer-social a {
    display: inline-block;
    margin: 0 10px;
    color: #fff;
    font-size: 18px;
    transition: color 0.3s;
}

.tasty-footer .footer-social a:hover {
    color: #e60000;
    /* tastytrade red */
}

/* Links Layout */
.tasty-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 20px 0;
}

.tasty-footer .footer-col h4 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 15px;
    font-weight: 600;
}

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

.tasty-footer .footer-col ul li {
    margin-bottom: 8px;
}

.tasty-footer .footer-col ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.tasty-footer .footer-col ul li a:hover {
    color: #e60000;
}

/* Special Buttons */
.tasty-footer .btn-signin,
.tasty-footer .btn-open {
    display: inline-block;
    background: transparent;
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.tasty-footer .btn-signin {
    border: 1px solid #666;
    margin-bottom: 10px;
}

.tasty-footer .btn-signin:hover {
    border-color: #e60000;
    color: #e60000;
}

.tasty-footer .btn-open {
    background: #e60000;
}

.tasty-footer .btn-open:hover {
    background: #b30000;
}

/* Disclaimer Text */
.tasty-footer .footer-disclaimer {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 30px;
}

.tasty-footer .footer-disclaimer p {
    margin-bottom: 10px;
}

/* Bottom Section */
.tasty-footer .footer-bottom {
    border-top: 1px solid #222;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    font-size: 12px;
    color: #777;
}

.tasty-footer .footer-bottom a {
    color: #999;
    text-decoration: underline;
}

.tasty-footer .footer-bottom a:hover {
    color: #e60000;
}

/* Responsive Tweaks */
@media (min-width: 768px) {
    .tasty-footer .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}





/* Clear Pricing Table Version */
.tt-pricing-clear {
    background: #ffffff;
    padding: 32px 16px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #0d1b2a;
}

.tt-container {
    max-width: 1000px;
    margin: 0 auto;
}

.tt-pricing-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 6px 0 8px;
    color: #0d1b2a;
    letter-spacing: -0.02em;
}

.tt-pricing-sub {
    text-align: center;
    font-size: 15px;
    color: #374151;
    margin: 0 0 28px;
}

/* Table styling */
.tt-pricing-table-wrap {
    overflow-x: auto;
}

.tt-pricing-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.02);
}

.tt-pricing-table th,
.tt-pricing-table td {
    padding: 16px 12px;
    font-size: 15px;
    text-align: left;
    border-bottom: 1px solid #e6e9ee;
}

.tt-pricing-table th {
    background-color: #000000;
    color: #ffffff;
    font-weight: 600;
}

.tt-pricing-table td {
    color: #0d1b2a;
}

.tt-small {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Footnotes */
.tt-pricing-footnote {
    font-size: 13px;
    color: #6b7280;
    max-width: 900px;
    margin: 18px auto 0;
    text-align: center;
    line-height: 1.45;
}

.tt-pricing-footnote.small {
    margin-top: 8px;
    font-size: 12px;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {

    .tt-pricing-table th,
    .tt-pricing-table td {
        display: block;
        width: 100%;
        padding: 12px 0;
    }

    .tt-pricing-table th {
        text-align: left;
    }

    .tt-pricing-title {
        font-size: 22px;
    }

    .tt-pricing-sub {
        font-size: 14px;
        padding: 0 10px;
    }
}


/* Disclaimer Section */
.tt-pricing-disclaimer {
    background: #f9fafb;
    padding: 32px 16px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #374151;
    font-size: 13px;
    line-height: 1.6;
}

.tt-pricing-disclaimer a {
    color: #1d4ed8;
    /* blue link like tastytrade */
    text-decoration: underline;
}

.tt-pricing-disclaimer p+p {
    margin-top: 12px;
}

.tt-container {
    max-width: 900px;
    margin: 0 auto;
}




/* For Serious Stock Traders Section */
.serious-stock-traders {
    background-color: #cf0a2c;
    /* tastytrade red */
    color: #fff;
    padding: 80px 20px;
}

.serious-stock-traders .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.text-content {
    flex: 1 1 500px;
}

.text-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.text-content h6 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.6;
}

.cta-btn {
    display: inline-block;
    padding: 14px 36px;
    background-color: #00C805;
    /* Tastytrade green */
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 0;
}

.cta-btn span {
    position: relative;
    z-index: 2;
}

/* flash / spotlight effect */
.cta-btn::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 100%;
    top: 0;
    left: -100%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    z-index: 1;
}

.cta-btn:hover::after {
    left: 100%;
}

.cta-btn:hover {
    background-color: #00b305;
    /* slightly darker green */
    transform: scale(1.02);
}


.image-content {
    flex: 1 1 500px;
    text-align: center;
}

.image-content img {
    max-width: 100%;
    height: auto;
}

/* “Your Stocks, Your Style” Section */
.tt-stocks-style {
    background-color: #ffffff;
    padding: 60px 16px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #0d1b2a;
}

.tt-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.tt-stocks-style h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #0d1b2a;
}

.tt-stocks-style p {
    font-size: 18px;
    line-height: 1.6;
    color: #374151;
    margin: 0 auto;
    max-width: 600px;
}





/* Section Styling */
.tt-commissions {
    background-color: #fff;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
}

.tt-commissions .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Text Block */
.tt-commissions .text-block {
    flex: 1 1 480px;
    color: #000;
}

.tt-commissions .text-block h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.tt-commissions .text-block .big-text {
    font-size: 20px;
    margin-bottom: 24px;
    line-height: 1.5;
    color: #333;
}

/* Disclosure Button */
.disclosure-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 2px solid #000;
    border-radius: 6px;
    background: transparent;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.disclosure-btn:hover {
    background: #000;
    color: #fff;
}

.disclosure-btn svg {
    flex-shrink: 0;
}

/* Media Block */
.tt-commissions .media-block {
    flex: 1 1 480px;
    text-align: center;
}

.tt-commissions .media-block video {
    max-width: 100%;
    border-radius: 10px;
    display: block;
}








.learn-section {
    padding: 80px 20px;
    background: #fafafa;
}

.learn-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.learn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.learn-video video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); */
}

.learn-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.learn-text .big-text {
    font-size: 1.25rem;
    margin-bottom: 30px;
    color: #333;
}

.btn-learn {
    display: inline-block;
    padding: 14px 28px;
    background: #e91c24;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-learn:hover {
    background: #c3151b;
}

/* Responsive */
@media (max-width: 992px) {
    .learn-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .learn-text {
        margin-top: 30px;
    }
}





.mobile-app-section {
    padding: 80px 20px;
    background: #fff;
}

.mobile-app-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.app-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.app-text .big-text {
    font-size: 1.25rem;
    margin-bottom: 25px;
    color: #333;
}

.store-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 8px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.3s;
}

.store-btn img {
    height: 22px;
}

.store-btn:hover {
    background: #222;
}

.disclosure-btn {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #5e5f62;
    font-size: 0.9rem;
    cursor: pointer;
}

.app-video video {
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
    /* box-shadow: 0 6px 20px rgba(0,0,0,0.15); */
}

/* Responsive */
@media (max-width: 992px) {
    .app-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .app-video {
        margin-top: 40px;
    }

    .store-buttons {
        justify-content: center;
    }
}








.crypto-section {
    padding: 80px 20px;
    background: #fff;
}

.crypto-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.crypto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.crypto-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    display: block;
}

.crypto-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.crypto-text .big-text {
    font-size: 1.25rem;
    margin-bottom: 25px;
    color: #333;
}

.crypto-text .cta-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #00c805;
    /* tastytrade green */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.3s;
}

.crypto-text .cta-btn:hover {
    background: #00a304;
}

/* Responsive */
@media (max-width: 992px) {
    .crypto-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .crypto-image {
        order: -1;
    }

    .crypto-text .cta-btn {
        margin-top: 20px;
    }
}





/* === HERO SECTION BASE === */
.options-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* === BACKGROUND VIDEO === */
.video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-background .poster-desktop {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-background .poster-mobile {
    display: none;
}

/* === TEXT CONTENT === */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-content h6 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* === CTA BUTTON === */
.cta-btn {
    display: inline-block;
    background-color: #00c805;
    color: #fff;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background-color: #00a304;
    transform: translateY(-2px);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .video-background .poster-desktop {
        display: none;
    }

    .video-background .poster-mobile {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-content h6 {
        font-size: 1rem;
    }
}




.tools-section {
    padding: 100px 20px;
    background: #fff;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 60px;
}

.tools-grid {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.accordion {
    flex: 1;
}

.accordion-item {
    border-bottom: 1px solid #eee;
}

.accordion-header {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-content {
    display: none;
    padding: 0 0 25px;
}

.accordion-item.active .accordion-content {
    display: block;
}

.arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.accordion-item.active .arrow {
    transform: rotate(180deg);
}

.image-wrap img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    margin-top: 20px;
}

.feature-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
}

@media (max-width: 992px) {
    .tools-grid {
        flex-direction: column;
    }

    .feature-image {
        display: none;
    }
}










.clear-costs-section {
    padding: 100px 20px;
    background: #fff;
}

.section-title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #111;
}

.table-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    color: #111;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.pricing-table thead {
    background-color: #f5f5f5;
}

.pricing-table th {
    text-align: center;
    padding: 20px;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid #eaeaea;
}

.pricing-table td {
    text-align: center;
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
}

.pricing-table tr:nth-child(even) {
    background-color: #fafafa;
}

.pricing-table strong {
    font-weight: 600;
}

.pricing-table small {
    display: block;
    font-size: 0.85rem;
    color: #555;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 15px 8px;
        font-size: 0.95rem;
    }
}









.quick-courses-section {
    padding: 120px 20px;
    background: #fff;
}

.quick-courses-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

.video-box {
    flex: 1;
    min-width: 400px;
    border-radius: 16px;
    overflow: hidden;
    /* box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); */
}

.video-element {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.text-box {
    flex: 1;
    min-width: 350px;
}

.text-box h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.text-box .subtext {
    font-size: 1.25rem;
    color: #444;
    margin-bottom: 30px;
}

/* Green Glow Button (matches tastytrade style) */
.btn-glow {
    display: inline-block;
    background-color: #19e697;
    color: #000;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(25, 230, 151, 0.6);
}

.btn-glow:hover {
    box-shadow: 0 0 20px rgba(25, 230, 151, 0.7);
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .content-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .text-box {
        text-align: center;
    }

    .text-box h2 {
        font-size: 2rem;
    }
}






.trade-options-section {
    padding: 120px 20px;
    background: #fafafa;
}

.trade-options-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

.text-box {
    flex: 1;
    min-width: 350px;
}

.text-box h2 {
    font-size: 2.3rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.subtext {
    font-size: 1.25rem;
    color: #444;
    margin-bottom: 30px;
}

.buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.btn-glow {
    display: inline-block;
    background-color: #19e697;
    color: #000;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(25, 230, 151, 0.6);
}

.btn-glow:hover {
    box-shadow: 0 0 20px rgba(25, 230, 151, 0.7);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid #000;
    color: #000;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #000;
    color: #fff;
}

.disclosure {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5e5f62;
    font-size: 0.95rem;
    cursor: pointer;
}

.image-box {
    flex: 1;
    min-width: 400px;
    text-align: right;
}

.image-box img {
    max-width: 100%;
    border-radius: 12px;
}

@media (max-width: 992px) {
    .content-wrapper {
        flex-direction: column-reverse;
        text-align: center;
    }

    .image-box {
        text-align: center;
    }
}










.futures-section h1 {
    letter-spacing: 1px;
}

.futures-section h5 {
    font-weight: 400;
}

.futures-section .btn {
    border-radius: 50px;
    transition: all 0.3s ease;
}

.futures-section .btn:hover {
    background-color: #c22b2d;
}

.object-fit-cover {
    object-fit: cover;
}







/* <!-- Optional Styling --> */

.features-section {
    background-color: #f8f9fa;
}

.features-section h2 {
    letter-spacing: 1px;
}

.accordion-button {
    background-color: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
}

.accordion-button:not(.collapsed) {
    color: #e21e26;
    background-color: #fff5f5;
    box-shadow: none;
}

.accordion-body {
    background-color: #fff;
    border-left: 3px solid #e21e26;
    /* border-radius: 0 0 10px 10px; */
}








.trade-on-your-time-section {
    background-color: #fafafa;
    padding-top: 60px;
    padding-bottom: 60px;
}

.trade-on-your-time-section h2 {
    font-size: 2rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.trade-on-your-time-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
}

.trade-on-your-time-section video {
    max-width: 100%;
    border-radius: 15px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}



.clear-pricing-section {
    background-color: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.clear-pricing-section h2 {
    font-size: 2rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #000;
}

.clear-pricing-section p.big-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #000;
}



.two-col-media-text-section {
    background-color: #fafafa;
    padding: 60px 15px;
}

.two-col-media-text-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: left;
}

.two-col-media-text-section .big-text {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #333;
}

.two-col-media-text-section .explore-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.two-col-media-text-section .explore-btn:hover {
    background-color: #0056b3;
}

.two-col-media-text-section .media-content .video-element {
    max-width: 100%;
    border-radius: 6px;
    display: block;
}







.futures-pricing-section {
    background-color: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.futures-pricing-section table {
    width: 100%;
    border-collapse: collapse;
}

.futures-pricing-section th,
.futures-pricing-section td {
    padding: 15px;
    border: 1px solid #dee2e6;
    color: #000;
    vertical-align: middle;
}

.futures-pricing-section th {
    font-weight: 600;
    font-size: 1rem;
}

.futures-pricing-section td {
    font-size: 0.95rem;
}





.two-col-media-text-section {
    padding: 60px 15px;
}

.two-col-media-text-section.bg-light {
    background-color: #f9f9f9;
}

.two-col-media-text-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: left;
}

.two-col-media-text-section .big-text {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #333;
}

.two-col-media-text-section .explore-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.two-col-media-text-section .explore-btn:hover {
    background-color: #0056b3;
}

.two-col-media-text-section .media-content img {
    max-width: 100%;
    display: block;
}






.crypto-credibility-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.crypto-credibility-section .background-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.crypto-credibility-section .desktop-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crypto-credibility-section .mobile-poster {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crypto-credibility-section .video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crypto-credibility-section .overlay-content {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff;
    max-width: 500px;
}

.crypto-credibility-section h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.crypto-credibility-section h6 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    font-weight: 400;
}

.crypto-credibility-section .explore-btn {
    padding: 12px 30px;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.crypto-credibility-section .explore-btn:hover {
    background-color: #0056b3;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .crypto-credibility-section .desktop-poster {
        display: none;
    }

    .crypto-credibility-section .mobile-poster {
        display: block;
    }

    .crypto-credibility-section .overlay-content {
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90%;
        text-align: center;
    }
}







.stablecoin-funding-section {
    position: relative;
    padding: 80px 20px;
    background-color: #000;
    /* Dark background like Tastytrade */
    color: #fff;
}

.stablecoin-funding-section .max-width-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.stablecoin-funding-section .video-column {
    flex: 1 1 45%;
    min-width: 300px;
    margin-bottom: 30px;
}

.stablecoin-funding-section .video-column .video-element {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.stablecoin-funding-section .text-column {
    flex: 1 1 50%;
    min-width: 280px;
}

.stablecoin-funding-section h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.stablecoin-funding-section .big-text {
    font-size: 1.2rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.stablecoin-funding-section .explore-btn {
    padding: 12px 28px;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.stablecoin-funding-section .explore-btn:hover {
    background-color: #1a73e8;
}

/* Responsive */
@media (max-width: 991px) {
    .stablecoin-funding-section .max-width-container {
        flex-direction: column;
        text-align: center;
    }

    .stablecoin-funding-section .text-column {
        order: 2;
    }

    .stablecoin-funding-section .video-column {
        order: 1;
    }
}



.zero-commission-section {
    position: relative;
    padding: 80px 20px;
    background-color: #000;
    /* dark background for contrast */
    color: #fff;
}

.zero-commission-section .max-width-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.zero-commission-section .text-column {
    flex: 1 1 45%;
    min-width: 280px;
}

.zero-commission-section .text-column h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.zero-commission-section .image-column {
    flex: 1 1 50%;
    min-width: 300px;
    text-align: right;
}

.zero-commission-section .image-column .responsive-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 991px) {
    .zero-commission-section .max-width-container {
        flex-direction: column;
        text-align: center;
    }

    .zero-commission-section .image-column {
        text-align: center;
        margin-top: 30px;
    }
}






.more-coin-section {
    background-color: #f8f9fa;
    color: #000;
}

.more-coin-section .section-heading h2 {
    font-size: 2rem;
    font-weight: bold;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 20px;
    text-align: center;
    font-size: 1rem;
}

.comparison-table thead th {
    background-color: #e9ecef;
    font-weight: bold;
}

.comparison-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.comparison-table tbody tr.highlight {
    background-color: #c7ff3d;
    /* Tastytrade green highlight for their row */
}

/* Mobile tables only visible on small screens */
.mobile-table-wrapper {
    display: none;
}

/* Responsive */
@media (max-width: 991px) {
    .desktop-table-wrapper {
        display: none;
    }

    .mobile-table-wrapper {
        display: block;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
        font-size: 0.9rem;
    }
}



.move-freely-section {
    background-color: #000;
    /* black background like tastytrade */
    color: #fff;
}

.move-freely-section h2 {
    font-size: 2rem;
    font-weight: bold;
}

.move-freely-section p.lead {
    font-size: 1.2rem;
}

.move-freely-section .btn-primary {
    background-color: #ff5500;
    border: none;
}

.move-freely-section .btn-outline-light {
    border-color: #fff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 991px) {
    .move-freely-section h2 {
        font-size: 1.5rem;
    }

    .move-freely-section p.lead {
        font-size: 1rem;
    }
}









.trade-anywhere-section {
    background-color: #000;
    /* black background */
    color: #fff;
}

.trade-anywhere-section h2 {
    font-size: 2rem;
    font-weight: bold;
}

.trade-anywhere-section .btn-dark {
    background-color: #1a1a1a;
    border: 1px solid #fff;
    color: #fff;
}

.trade-anywhere-section .btn-dark:hover {
    background-color: #333;
    color: #fff;
}

@media (max-width: 991px) {
    .trade-anywhere-section h2 {
        font-size: 1.5rem;
    }
}









.crypto-risk-section {
    background-color: #f9f9f9;
    /* light background */
    color: #000;
    /* black text */
}

.crypto-risk-section p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.crypto-risk-section a {
    color: #1a73e8;
    text-decoration: underline;
}

.crypto-risk-section a:hover {
    color: #0b59d3;
    text-decoration: none;
}

.crypto-risk-section strong {
    font-weight: bold;
}










.etf-section {
    background-color: rgb(168, 6, 6);
    /* match Tastytrade dark background */
    color: #fff;
}

.etf-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.etf-section h6 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
}

.etf-section .cta-button .btn-primary {
    background: linear-gradient(90deg, #ff9900, #ff6600);
    border: none;
    color: #fff;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.etf-section .cta-button .btn-primary:hover {
    background: linear-gradient(90deg, #ff6600, #ff3300);
    color: #fff;
}

.etf-section .etf-image img {
    max-width: 100%;
    height: auto;
}









.zero-commissions-section {
    background-color: #fff;
    color: #000;
}

.zero-commissions-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.zero-commissions-section .big-text {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.zero-commissions-section .btn-disclaimer {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.zero-commissions-section .btn-disclaimer:hover {
    background: #e0e0e0;
}

.zero-commissions-section .btn-disclaimer svg {
    margin-right: 0.5rem;
}

.zero-commissions-section video {
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto;
}





.learning-section {
    background-color: #fff;
    color: #000;
}

.learning-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.learning-section .big-text {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.btn-course-overview {
    display: inline-block;
    background-color: #ff6f61;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-course-overview:hover {
    background-color: #e65b50;
}

.learning-video video {
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto;
}



.stocks-section {
    background-color: #fff;
    color: #000;
}

.stocks-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.stocks-section .big-text {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.btn-explore-stocks {
    display: inline-block;
    background-color: #ff6f61;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-explore-stocks:hover {
    background-color: #e65b50;
}

.stocks-image img {
    max-width: 100%;
    border-radius: 0.5rem;
}







.streamline-trades-section {
    position: relative;
    height: 600px;
    overflow: hidden;
}

.background-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-poster {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .background-video {
        display: none;
    }

    .background-poster {
        display: block;
    }
}

.streamline-trades-section h1,
.streamline-trades-section h6 {
    color: #fff;
}

.btn-open-account {
    display: inline-block;
    background-color: #ff6f61;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-open-account:hover {
    background-color: #e65b50;
}





.bite-sized-lessons-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.bite-sized-lessons-section .big-text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.btn-sneak-peek {
    display: inline-block;
    background-color: #ff6f61;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-sneak-peek:hover {
    background-color: #e65b50;
}











.plug-in-trade-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.plug-in-trade-section .big-text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.btn-open-api {
    display: inline-block;
    background-color: #4a90e2;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-open-api:hover {
    background-color: #357ab8;
}









.trader-enhancements-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.trader-enhancements-section .section-subtitle {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2rem;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.enhancement-card {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.enhancement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.enhancement-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.enhancement-card p {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
}






.mobile-trading-section {
    background-color: rgb(156, 25, 25);
    /* dark background like original section */
    color: #fff;
}

.mobile-trading-section h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.download-buttons .btn.dark-btn {
    background-color: #222;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.download-buttons .btn.dark-btn:hover {
    background-color: #444;
}

.image-column {
    max-width: 400px;
    flex: 1 1 400px;
}

.image-column img {
    width: 100%;
    height: auto;
    display: block;
}










.trade-manage-section {
    background-color: #fff;
    /* light background */
    color: #000;
}

.trade-manage-section h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.trade-manage-section .big-text {
    font-size: 1.1rem;
    line-height: 1.6;
}

.image-column {
    max-width: 400px;
    flex: 1 1 400px;
}

.image-column img {
    width: 100%;
    height: auto;
    display: block;
}

.text-column {
    flex: 1 1 400px;
}








.feature-accordion-section {
    background-color: #f9f9f9;
    color: #000;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
}

.accordion-header {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-body p {
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.accordion-body img {
    max-width: 300px;
}







.desktop-platform-section {
    background-color: rgb(165, 27, 27);
    /* Dark background like original */
    color: #fff;
}

.desktop-platform-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.desktop-platform-section h6 {
    font-size: 1rem;
    font-weight: 400;
    color: #ccc;
}

.desktop-platform-section .btn-dark {
    background-color: #1e1e1e;
    border: 1px solid #fff;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.desktop-platform-section .btn-dark:hover {
    background-color: #fff;
    color: #000;
}






.two-col-section {
    background-color: white;
}

.text-column {
    flex: 1;
    max-width: 500px;
}

.text-column h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.text-column p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.text-column .disclaimer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f0f0f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2rem;
}

.media-column {
    flex: 1;
}

.media-column video {
    width: 100%;
    border-radius: 8px;
}






.two-col-section {
    background-color: white;
}

.text-column h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.text-column p {
    font-size: 1rem;
    line-height: 1.6;
}

.text-column .btn {
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    border-radius: 5px;
}

.media-column img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}





.two-col-section {
    background-color: white;
}

.text-column h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.text-column h6 {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
}

.text-column .btn {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border-radius: 5px;
}

.media-column img {
    width: 100%;
    height: auto;
}




.validate-section {
    background-color: #f9f9f9;
}

.validate-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.validate-desc {
    font-size: 1rem;
    color: #555;
}

.validate-btn {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border-radius: 5px;
}

.validate-img {
    width: 100%;
    height: auto;
}






.two-col-education-section {
    padding: 4rem 0;
}

.two-col-container {

    align-items: center;
}


.two-col-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.two-col-text p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.responsive-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Blue button style */
.btn-blue {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #007bff;
    /* blue */
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-blue:hover {
    background-color: #0056b3;
}







.two-col-api-section {
    background-color: rgb(180, 26, 26);
}

.two-col-api-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.two-col-api-section h6 {
    font-size: 1.1rem;
    font-weight: 400;
}

/* Optional: spacing for mobile if needed */
@media (max-width: 767px) {
    .two-col-api-section {
        text-align: center;
    }
}



.two-col-api-strategy-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.two-col-api-strategy-section p.lead {
    font-size: 1.1rem;
}

.two-col-api-strategy-section .btn {
    background-color: #E21E26;
    /* matching your red buttons */
    border: none;
}

@media (max-width: 767px) {
    .two-col-api-strategy-section {
        text-align: center;
    }
}





.two-col-api-partner-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.two-col-api-partner-section p.lead {
    font-size: 1.1rem;
}

.two-col-api-partner-section .btn {
    background-color: #E21E26;
    /* red button to match theme */
    border: none;
}

.two-col-api-partner-section {
    background-color: #000;
    /* dark background */
}



.two-col-platform-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.two-col-platform-section p.lead {
    font-size: 1.1rem;
}

.two-col-platform-section .btn {
    background-color: #E21E26;
    /* red theme button */
    border: none;
}



.two-col-investment-section {
    background-color: rgb(159, 21, 21);
}

.two-col-investment-section h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.two-col-investment-section .btn {
    background-color: #E21E26;
    /* red theme button */
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}





.account-permissions-section h2 {
    font-size: 2rem;
    font-weight: 600;
}






.investment-plans-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
}

.plans-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.plans-table th,
.plans-table td {
    border: 1px solid #ddd;
    padding: 1rem;
    vertical-align: middle;
}

.plans-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.plans-table td img {
    width: 24px;
    height: 24px;
}

.table-responsive {
    overflow-x: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {

    .plans-table th,
    .plans-table td {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .plans-table td img {
        width: 20px;
        height: 20px;
    }
}



.disclaimer-section {
    background-color: #f8f9fa;
    color: #333;
}

.disclaimer-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.disclaimer-section a {
    color: #007bff;
    text-decoration: underline;
}

.disclaimer-section a:hover {
    color: #0056b3;
}

.disclaimer-section strong {
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .disclaimer-section p {
        font-size: 0.9rem;
    }
}



.learn-hero-section {
    background-color: #f8f9fa;
}

.learn-hero-title {
    font-weight: 600;
    font-size: 2rem;
}

.text-danger {
    color: #dc3545;
}

.learn-search .search-form {
    max-width: 500px;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.search-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
}

.search-button svg path {
    fill: #5e5f62;
}

@media (max-width: 767px) {
    .learn-hero-title {
        font-size: 1.5rem;
    }

    .search-input {
        font-size: 0.9rem;
    }
}




.feature-category-section .section-header h2 {
    font-weight: 600;
    font-size: 1.75rem;
}

.article-card .card-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.article-card .card-text {
    font-size: 0.95rem;
    color: #555;
}

.article-card:hover .card {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}







.demo-events-section h1 {
    font-size: 2rem;
    font-weight: 600;
}

.demo-events-section p {
    font-size: 1rem;
    line-height: 1.6;
}

.demo-events-section .btn-primary {
    background-color: #E21E26;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.demo-events-section img {
    max-width: 100%;
    height: auto;
}







.events-list-section .event-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.events-list-section .event-card:hover {
    transform: translateY(-5px);
}

.events-list-section .red-line {
    width: 50px;
    height: 3px;
    background-color: #E21E26;
    margin-bottom: 15px;
}

.events-list-section h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.events-list-section h5 a {
    text-decoration: none;
    color: #000;
}

.events-list-section .event-date {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.events-list-section p {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

.events-list-section .btn-primary {
    background-color: #E21E26;
    border: none;
    padding: 0.6rem 1.3rem;
    font-size: 1rem;
    border-radius: 5px;
}







.events-section {
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.events-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 60px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}

.events-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.events-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

.events-content .btn {
    display: inline-block;
    padding: 12px 28px;
    background-color: #e21e26;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.events-content .btn:hover {
    background-color: #c91920;
}

.disclosure-btn {
    margin-top: 25px;
    background: none;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline: auto;
    cursor: pointer;
}

.disclosure-btn p {
    margin: 0;
    font-size: 0.95rem;
}




/* === SECTION BASE === */
.about-section {
    background-color: #a40909;
    color: #fff;
    font-family: "Inter", sans-serif;
}

/* === LAYOUT === */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

/* === TEXT SIDE === */
.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h1 {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.1;
}

.about-text h6 {
    font-size: 18px;
    color: #d0d0d0;
    font-weight: 400;
    margin-bottom: 45px;
    line-height: 1.6;
    max-width: 500px;
}

/* === BUTTON === */
.about-btn {
    display: inline-block;
    background-color: #e61e24;
    color: #fff;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.about-btn::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.about-btn:hover::after {
    top: 0;
}

.about-btn:hover {
    background-color: #b7171d;
}

/* === IMAGE SIDE === */
.about-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.4); */
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-text h1 {
        font-size: 40px;
    }

    .about-text h6 {
        margin: 0 auto 40px;
    }

    .about-image img {
        max-width: 400px;
    }
}






/* === BASE === */
.who-we-are-section {
    background-color: #fff;
    color: #000;
    padding: 120px 0;
    font-family: "Inter", sans-serif;
}

/* === LAYOUT === */
.who-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

/* === TEXT === */
.who-text {
    flex: 1;
    min-width: 300px;
}

.who-text h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #000;
    line-height: 1.2;
}

.who-text p {
    font-size: 18px;
    color: #333;
    line-height: 1.7;
    max-width: 550px;
}

/* === VIDEO === */
.who-video {
    flex: 1;
    min-width: 300px;
}

.who-video iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .who-container {
        flex-direction: column;
        text-align: center;
    }

    .who-text h2 {
        font-size: 36px;
    }

    .who-text p {
        max-width: 100%;
    }

    .who-video iframe {
        height: 320px;
    }
}










/* Section structure */
.section {
    padding: 80px 0;
    color: #fff !important;
}

.max-w-md {
    max-width: 500px;
    margin: 0 auto;
}

/* Form layout */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #fff !important;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #fff !important;
}

.form-label {
    font-weight: 500;
    color: #fff !important;
}

.form-control,
.form-select {
    background: var(--interaction-field);
    color: #000 !important;
    border: none;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 15px;
    transition: background 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    outline: 1px solid var(--semantic-interaction-focused);
    background: var(--interaction-field-selected);
}

/* Password eye toggle */
.input-with-icon {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--icon-general-tertiary-action);
}

.toggle-password i {
    font-size: 18px;
}

/* Buttons */
.btn-green {
    background: greenyellow;
    color: white;
    font-weight: 600;
    border: none;
    padding: 10px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.btn-green:hover {
    background: var(--button-green-hovered);
}

.link-primary {
    color: greenyellow;
    font-weight: 500;
    text-decoration: none;
}

.link-primary:hover {
    text-decoration: underline;
}



.hero-section {
    position: relative;
}



.hero-content {
    width: 100%;
}

.headers h2.h0 {
    font-size: 2.5rem;
    color: #fff;
    margin: 0;
}

.headers h3.h0-1 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0.5rem 0 1.5rem 0;
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hc-search-input input {
    flex: 1;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.hc-search-button button.btn-primary {
    background-color: #0073e6;
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hc-search-button button.btn-primary:hover {
    background-color: #005bb5;
}

.chevron-icon i {
    margin-left: 10px;
    color: #fff;
}

.hide,
.no-show {
    display: none;
}

@media (min-width: 768px) {
    .hide-tablet {
        display: none;
    }
}



.hero-section {
    position: relative;
}



.hero-content {
    width: 100%;
}

.headers h2.h0 {
    font-size: 2.5rem;
    color: #fff;
    margin: 0;
}

.headers h3.h0-1 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0.5rem 0 1.5rem 0;
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hc-search-input input {
    flex: 1;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.hc-search-button button.btn-primary {
    background-color: #0073e6;
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hc-search-button button.btn-primary:hover {
    background-color: #005bb5;
}

.chevron-icon i {
    margin-left: 10px;
    color: #fff;
}

.hide,
.no-show {
    display: none;
}

@media (min-width: 768px) {
    .hide-tablet {
        display: none;
    }
}



/* -------------------- Popular Articles -------------------- */
.popular-articles-section {
    background-color: #f8f8f8; /* white-background similar */
    padding: 60px 0;
}

.popular-articles-section h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
}

.article-box {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

.article-box:hover {
    transform: translateY(-3px);
}

.article-box h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.article-box .t1 {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.article-box .link {
    font-size: 14px;
    font-weight: 600;
    color: #ff6f00;
    text-decoration: none;
}

.article-box .link:hover {
    text-decoration: underline;
}

.article-line.link.big h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000;
}

.article-line.link.big:hover h4 {
    color: #ff6f00;
}

.view-link {
    display: inline-block;
    margin-top: 10px;
    color: #ff6f00;
    font-weight: 600;
    text-decoration: none;
}

.view-link:hover {
    text-decoration: underline;
}

/* -------------------- Categories -------------------- */
.categories {
    padding: 60px 0;
}

.category {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

.category:hover {
    transform: translateY(-3px);
}

.category-icon {
    width: 50px;
    height: 50px;
    background: #ff6f00; /* placeholder color */
    border-radius: 50%;
    margin-bottom: 15px;
}

.category-header h3.customh3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.category-body .folder-link {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    text-decoration: none;
}

.category-body .folder-link:hover .t2 {
    color: #ff6f00;
    text-decoration: underline;
}

.category-cta a.link {
    display: inline-block;
    margin-top: 15px;
    font-weight: 600;
    color: #ff6f00;
    text-decoration: none;
}

.category-cta a.link:hover {
    text-decoration: underline;
}

/* -------------------- Contact CTA -------------------- */
.contact-cta {
    background-color: #f8f8f8;
    padding: 60px 0;
    text-align: center;
}

.contact-cta h2.h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-cta .t1 {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.contact-icons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background-color: #ff6f00; /* placeholder color */
    border-radius: 50%;
}

.contact-cta .button {
    background-color: #ff6f00;
    color: #fff;
    font-weight: 600;
    padding: 12px 35px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}

.contact-cta .button:hover {
    background-color: #e65c00;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
    .contact-icons {
        flex-wrap: wrap;
        gap: 20px;
    }

    .article-box, .category {
        margin-bottom: 20px;
    }
}