/* Desktop Navigation */
@media (min-width: 1199px) {
    .navmenu {padding: 0;}
    .navmenu ul {margin: 0;padding: 0;display: flex;list-style: none;align-items: center;}
    .navmenu li {position: relative;}
    .navmenu li a,
    .navmenu li a:focus {padding: 18px 15px;display: inline-block;white-space: nowrap;transition: color 0.3s ease;position: relative;font-weight: 400;font-style: Regular;font-size: 14px;line-height: 100%;letter-spacing: 0%;color: #FFFFFF;text-decoration: none;}
    .navmenu li a:hover {color: #f0f0f0;font-weight: 400;}
    .navmenu li a:hover::before {width: 100%;left: 0;}
    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {color: var(--nav-hover-color);}

    /* Mega Menu */
    .navmenu .megamenu {position: static;}
    .navmenu .megamenu ul {margin: 0;padding: 10px;background: var(--nav-dropdown-background-color);box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);position: absolute;top: 130%;left: 0;right: 0;visibility: hidden;opacity: 0;display: flex;transition: 0.3s;border-radius: 4px;z-index: 99;}
    .navmenu .megamenu ul li {flex: 1;}
    .navmenu .megamenu ul li a {padding: 10px 20px;font-size: 15px;color: var(--nav-dropdown-color);}
    .navmenu .megamenu ul li a:hover,
    .navmenu .megamenu ul li .active {color: var(--nav-dropdown-hover-color);}
    .navmenu .megamenu:hover>ul {opacity: 1;top: 100%;visibility: visible;}
}

/* Mobile Navigation */
@media (max-width: 1399px) {
    .right-column.submenu {position: static;display: none;width: 100%;background: white;margin-top: 0;border-radius: 10px;}
    .item:hover, .submenu-item:hover {border-left: 0px;padding-left: 8px;background: none;}
    .right-column.submenu.active {display: block;}
    .dropdown-columns {flex-direction: column;}
    .item.has-submenu .arrow img {transform: rotate(0deg);transition: transform 0.3s ease;}
    .item.has-submenu.active .arrow img {transform: rotate(90deg);}
    .dropdown .dropdown-menu {display: none;position: static !important;width: auto !important;padding: 0px 20px;margin: 0;box-shadow: none;background: transparent;border: 0px;}
    .dropdown.active .dropdown-menu {display: block;}

    /* optional: add small arrow indicator on mobile */
    .dropdown>a::after {content: "▶";margin-left: 6px;font-size: 12px;transform: rotate(0deg);transition: transform 0.3s;display: inline-block;}
    .dropdown.active>a::after {transform: rotate(90deg);}
    .mobile-nav-toggle {color: var(--nav-color);font-size: 28px;line-height: 0;cursor: pointer;transition: color 0.3s;}
    .navmenu {padding: 0;z-index: 9997;width: auto;}
    .navmenu ul {display: none;list-style: none;position: absolute;inset: 60px 20px 20px 20px;padding: 10px 0;margin: 0;border-radius: 6px;background-color: #1E2244;overflow-y: auto;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);transition: 0.3s;z-index: 9998;}
    .navmenu .login-buttons {justify-content: center;margin: auto;}
    .navmenu a,
    .navmenu a:focus {color: var(--nav-dropdown-color);padding: 10px 20px;font-family: var(--nav-font);font-size: 17px;font-weight: 500;display: flex;justify-content: space-between;white-space: nowrap;transition: 0.3s;text-decoration: none;}
    .navmenu a i,
    .navmenu a:focus i {font-size: 12px;margin-left: 5px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: 0.3s;background-color: rgba(138, 43, 226, 0.1);}
    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {color: var(--nav-dropdown-hover-color);}
    .navmenu .active i,
    .navmenu .active:focus i {background-color: var(--accent-color);color: var(--contrast-color);transform: rotate(180deg);}
    .item .text span {font-weight: 400;font-size: 12px;line-height: 18px;letter-spacing: 0%;color: #979797;}
    .item .text strong {color: white;}
    .item img {filter: brightness(0) invert(1);}
    .mobile-nav-active {overflow: hidden;}
    .mobile-nav-active .mobile-nav-toggle {color: #fff;position: absolute;font-size: 32px;top: 15px;right: 15px;z-index: 9999;}
    .mobile-nav-active .navmenu {position: fixed;inset: 0;background: rgba(33, 37, 41, 0.8);transition: 0.3s;}
    .mobile-nav-active .navmenu>ul,
    .mobile-nav-active .navmenu>.login-buttons {display: block;}
    .left-column, .right-column.submenu{min-width: auto;}
    .dropdown:hover .dropdown-menu {display: none;}
    .d-xl-none {display: initial !important;}

}

@media (min-width: 1400px) {
    .d-xl-none {display: none !important;}
}

@media (max-width: 1400px) {
    .transparency-boxes {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));}
    .navmenu > ul > li > a::after {display: none;width: 0 !important;} 
}

@media (max-width: 1200px) {
    .features-grid {gap: 1.5rem;}
    .feature-card {width: 320px;}
    .partner-testimonial-section .row{justify-content: center;}
}

@media (max-width: 1024px) {
    .footer-top {flex-wrap: wrap;}
    .footer-about {max-width: 100%;flex: 1 1 100%;}
    .footer-links {flex-wrap: wrap;}
    .hero-brand__features {overflow: hidden;position: relative;}
    .hero-brand__features-inner {display: inline-flex;gap: 40px;animation: hero-marquee 25s linear infinite;}

    /* Pause on hover (optional) */
    .hero-brand__features:hover .hero-brand__features-inner {animation-play-state: paused;}

    @keyframes hero-marquee {
        from {
        transform: translateX(0);
        }
        to {
        transform: translateX(-50%);
        }
    }

    .hero-brand__title {font-size: 32px;}
    .brand-benefits__item {flex: 1 1 calc(60% - 30px);}
    .brand-benefits__flex {justify-content: center;}
    .brand-markets__item {flex: 1 1 calc(50% - 15px);max-width: 100%; }
    .feature-badges{justify-content: center;}
    .connected-cards .info-card::after {display: none;}
    .brand-benefits__item.demo-account-width{flex: 1 1 calc(50% - 30px);}
}

@media (max-width: 992px) {
    .trust-badges-container {gap: 1.5rem;}
    .trust-badge {width: 260px;height: 55px;padding: 18px;}
    .trust-badge-text {font-size: 15px;}
    .transparency-content {padding: 1.5rem;margin-top: 2rem;}
    .transparency-text {font-size: 13px;}
    .account-feature-section {padding: 60px 0;}
    .feature-badges {gap: 1rem;margin: 2rem 0;}
    .feature-badge {height: 55px;padding: 18px;}
    .badge-text {font-size: 13px;}
    .feature-link {font-size: 14px;line-height: 20px;}
    .hero-brand__content{text-align: center;}
    .hero-brand__container {flex-direction: column;text-align: center;}
    .hero-brand__image {text-align: center;}
    .hero-brand__features {justify-content: flex-start;}
    .custom-margin-metatrade{margin-top: 30px;}
    button.btn.btn-primary.hero-btn-primary{font-size: 15px;}
    .start-learner-section,.partner-text{text-align: center;}
    .start-learner-content .trade-buttons{justify-content: center !important;}
    .custom-margin-content{margin-bottom: 30px;}
    .partner-points li{width: 100%;justify-content: center;}
    .timeline-wrapper {flex-direction: column;gap: 40px;padding: 20px;}
    .timeline-line {top: 0;left: 104px;right: auto;bottom: 0;width: 1px;height: auto;}
    .timeline-item {flex-direction: row;gap: 20px;}
    .timeline-year {margin: 0;min-width: 60px;order: 1;text-align: left;}
    .timeline-dot {margin: 2px 0 0 0;order: 2;flex-shrink: 0;}
    .timeline-content {order: 3;flex: 1;}
    .timeline-content p {padding: 0;text-align: left;}
    .why-row {flex-direction: column;gap: 25px;margin-bottom: 50px;}
    .why-card {width: 100%;max-width: 480px;text-align: center !important;}
    .why-center-circle {position: static;transform: none;margin: 40px auto;width: 350px;height: 350px;}
    .why-center-circle:hover{transform:translate(0%, 0%) scale(1.03);}
    .custom-responsvie-centre{text-align: center;}
    .custom-responsvie-centre .hero-buttons{justify-content: center !important;}
    .brand-learning-content p{text-align: start;}
    .custom-md-center{justify-content: center !important;}
    .custom-left-center, .custom-left-center h4 , .custom-left-center p{text-align: center !important;}
    .custom-row-rewerse{flex-direction: column-reverse;}
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-banner {padding: 60px 0;min-height: 350px;}
    .hero-title {font-size: 2rem;margin-bottom: 1rem;}
    .hero-subtitle {font-size: 1rem;margin-bottom: 2rem;}
    .hero-buttons {flex-direction: column;align-items: center;}
    .hero-btn-primary,
    .hero-btn-secondary {width: 100%;max-width: 280px;}
    /* feature swction */
    .pad-y-80 {padding: 60px 0;}
    .common-title {font-size: 28px;margin-bottom: 1rem;}
    .common-subtitle {font-size: 15px;line-height: 20px;margin-bottom: 2rem;}
    .features-grid {flex-direction: column;align-items: center;gap: 1rem;}
    .feature-card {width: 100%;max-width: 350px;}
    .payment-methods-section {padding: 40px 0;}
    .pad-y-60 {padding: 40px 0;}
    .payment-table thead th,
    .payment-table tbody td {padding: 16px 12px;font-size: 13px;}
    .payment-table thead th:first-child,
    .payment-table tbody td:first-child {min-width: 200px;}
    .trust-badges-section {padding: 20px 0;}
    .trust-badges-container {flex-direction: column;gap: 1rem;}
    .trust-badge {width: 100%;max-width: 290px;height: 55px;padding: 16px;}
    .trust-badge-text {font-size: 14px;}
    .pad-y-80 {padding: 60px 0;}
    .transparency-content {padding: 1rem;margin-top: 1.5rem;}
    .transparency-text {font-size: 13px;line-height: 1.2;}
    .footer-top {flex-direction: column;}
    .footer-links {flex-direction: column;}
    .footer-column {text-align: left;}
    .footer-about {text-align: left;}
    .footer-social {flex-wrap: wrap;}
    .account-feature-section {padding: 50px 0;}
    .feature-badges {flex-direction: column;align-items: center;gap: 1rem;margin: 1.5rem 0;}
    .feature-badge {width: 100%;height: auto;min-height: 55px;padding: 16px;justify-content: center;}
    .badge-text {font-size: 13px;line-height: 1.2;}
    .brand-markets__flex {justify-content: center; }
    .trust-broker-stats {justify-content: space-evenly;}
    .trust-broker-divider {display: none;}
    .trust-broker-title{margin-bottom: 30px;font-size: 26px;}
    .partner-card {flex: 1 1 100%;}
    .spread-commission .row{gap: 20px;}
    .quotes-table thead th,
    .quotes-table tbody td {padding: 12px 16px;font-size: 13px;}
    .trade-btn {padding: 8px 16px;font-size: 12px;}
    .tab-button {padding: 10px 18px;font-size: 13px;}
    .search-title {font-size: 28px;}
    .search-subtitle {font-size: 13px;}
    .search-input {padding: 14px 45px 14px 18px;font-size: 14px;}
    .connect-title {font-size: 28px;}
    .social-links {gap: 15px;}
    .social-link {padding: 10px 20px;font-size: 14px;}
    .brand-learning-contents {padding-left: 14px;}
    .brand-learning-content {margin-bottom: 16px;}
    .brand-learning-content h4 {font-size: 15px;}
    .brand-learning-content p {font-size: 13.5px;}
}

@media (max-width: 600px) {
    .brand-benefits__item,.brand-markets__item {flex: 1 1 100%;max-width: 100%;}
    .info-card{max-width: 100%;}
    .info-container {flex-direction: column;gap: 5px;}
    .why-card {width: 100%;max-width: 350px;padding: 25px 15px;}
    .why-center-circle {width: 300px;height: 300px;padding: 25px;}
    .circle-title {font-size: 20px;line-height: 28px;}
    .circle-desc {font-size: 13px;line-height: 20px;}
    .number-value {font-size: 1.6rem;}
}

@media (max-width: 480px) {
    .hero-banner {padding: 40px 0;}
    .hero-title {font-size: 1.75rem;}
    .hero-subtitle {font-size: 0.95rem;}
    /* feature section */
    .pad-y-80 {padding: 40px 0;}
    .common-title {font-size: 24px;}
    .common-subtitle {font-size: 14px;line-height: 18px;}
    .feature-card {width: 100%;padding: 16px;height: auto;min-height: 57px;}
    .payment-methods-section {padding: 30px 0;}
    .pad-y-60 {padding: 30px 0;}
    .payment-table thead th,
    .payment-table tbody td {padding: 12px 8px;font-size: 12px;}

    /* Stack table on very small screens */
    .table-responsive {font-size: 12px;}
    .trust-badges-section {padding: 16px 0;}
    .trust-badge {width: 100%;max-width: 280px;height: 50px;padding: 14px;}
    .trust-badge-text {font-size: 13px;}
    .pad-y-80 {padding: 40px 0;}
    .transparency-content {padding: 0.75rem;}
    .transparency-text {font-size: 12px;}
    .pricing-cards {padding: 0 10px;}
    .account-feature-section {padding: 40px 0;}
    .feature-badge {width: 100%;padding: 14px;}
    .badge-text {font-size: 12px;}
    .feature-link {font-size: 13px;line-height: 18px;}
    .heading-top ul{justify-content: center;}
    .trade-title{font-size: 22px;}
    .trade-subtitle {margin-bottom: 20px;font-size: 13px;line-height: 18px;}
    .trade-buttons{margin-bottom: 20px;}
    .trade-features{gap: 30px;}
    .hero-brand__title {font-size: 26px;}
    .hero-brand__subtitle {font-size: 14px;}
    .hero-brand__buttons .btn-open-account {font-size: 14px;padding: 14px 24px;}
    h2.start-learner-title{font-size: 27px;}
    p.start-learner-subtitle{font-size: 13px;}
    .funds-text h2{font-size: 27px;line-height: 30px;}
    .funds-text p{font-size: 13px;line-height: 20px;}
    .funds-list{margin-bottom: 20px;}
    .funds-list li{font-size: 13px;line-height: 20px;margin-bottom: 4px;}
    .heading-top a img{height: 18px;}
    .heading-top a{font-size: 13px;}
    .partner-card {flex: 1 1 45%;}
}