:root {
    --primary-color: #360C16;
    /* Luxury Deep Burgundy - NexusPoint brand primary */
    --secondary-color: #581827;
    /* Rich Crimson Maroon - depth accent */
    --accent-gold: #D4A054;
    /* Warm Bronze Gold - brand accent */
    --accent-gold-hover: #B88235;
    --gold-light: #F7E7CE;
    /* Light Champagne tint for badges */
    --text-dark: #360C16;
    /* Deep Burgundy text */
    --text-light: #6E535A;
    /* Muted Rose Slate */
    --bg-light: #FAF5F6;
    /* Soft Alabaster Light */
    --white: #ffffff;
    --topbar-bg: #20060C;
    --topbar-text: #FCEFF2;
    --bg-body: #ffffff;
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* ========================================
   MEGA MENU - DESKTOP
   ======================================== */

@media (min-width: 992px) {
    .sh-main-header {
        position: relative;
    }

    .sh-floating-pill-nav {
        position: static !important;
    }

    /* Standard Dropdowns (Business Setup, Resources) */
    .sh-floating-pill-nav .nav-item.dropdown:not(.position-static) {
        position: relative !important;
    }

    .sh-floating-pill-nav .dropdown-menu:not(.mega-menu) {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 260px;
        padding: 0.75rem 0;
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 12px 35px rgba(54, 12, 22, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.06);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
        z-index: 1060 !important;
    }

    /* Mega Menu Dropdown */
    .dropdown-menu.mega-menu {
        display: block !important;
        position: absolute !important;
        width: 92vw;
        max-width: 1220px;
        left: 50% !important;
        top: 100% !important;
        transform: translateX(-50%) translateY(10px) !important;
        padding: 28px 36px;
        border: none;
        background: #ffffff;
        box-shadow: 0 20px 60px rgba(32, 6, 12, 0.22);
        border-radius: 1.25rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-top: 4px solid #d4a054;
        z-index: 1060 !important;
    }

    /* Hover States for Dropdowns and Mega Menu */
    .sh-floating-pill-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sh-floating-pill-nav .nav-item.dropdown:hover > .dropdown-menu:not(.mega-menu) {
        transform: translateY(0) !important;
    }

    .sh-floating-pill-nav .nav-item.dropdown:hover > .dropdown-menu.mega-menu {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Add dividers and generous breathing space between columns without scrollbars */
    .mega-menu .row>div {
        position: relative;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .mega-menu .row>div:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 6px;
        bottom: 6px;
        width: 1px;
        background: linear-gradient(180deg,
                transparent 0%,
                rgba(212, 160, 84, 0.25) 15%,
                rgba(212, 160, 84, 0.25) 85%,
                transparent 100%);
    }

    .mega-menu .row>div:first-child {
        padding-left: 0.5rem;
    }

    .mega-menu .row>div:last-child {
        padding-right: 0.5rem;
    }
}

/* Mega Menu Titles */
.mega-menu-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: block;
    position: relative;
    padding-bottom: 12px;
    letter-spacing: 0.5px;
}



.mega-menu-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 50px;

    height: 3px;

    background: linear-gradient(90deg, var(--secondary-color), transparent);

    border-radius: 3px;

}



/* Mega Menu Lists */

.mega-menu-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mega-menu-list li {

    margin-bottom: 0;

    transform: translateX(0);

    transition: transform 0.3s ease;

    border-bottom: 1px solid rgba(0, 74, 173, 0.08);

    padding: 4px 0;

}



.mega-menu-list li:last-child {

    border-bottom: none;

}



.mega-menu-list li:hover {

    transform: translateX(5px);

}



.mega-menu-list a {

    color: var(--text-light);

    font-size: 0.94rem;

    font-weight: 500;

    display: inline-flex;

    align-items: center;

    padding: 4px 4px;

    border-radius: 6px;

    transition: all 0.3s ease;

    position: relative;

}



.mega-menu-list a::before {

    content: '→';

    margin-right: 4px;

    opacity: 0;

    transform: translateX(-10px);

    transition: all 0.3s ease;

    color: var(--secondary-color);

    font-weight: bold;

}



.mega-menu-list a:hover {

    color: var(--primary-color);

    background: rgba(0, 74, 173, 0.05);

    padding-left: 16px;

}



.mega-menu-list a:hover::before {

    opacity: 1;

    transform: translateX(0);

}



/* ========================================

   MEGA MENU - MOBILE/TABLET

   ======================================== */



@media (max-width: 991px) {

    .navbar-collapse {

        position: fixed;

        top: 0;

        left: -100%;

        width: 85%;

        max-width: 400px;

        height: 100vh;

        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.98) 100%);

        -webkit-backdrop-filter: blur(20px);

        backdrop-filter: blur(20px);

        padding: 80px 20px 20px;

        box-shadow: 2px 0 30px rgba(0, 74, 173, 0.2);

        overflow-y: auto;

        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        z-index: 1050;

        margin-top: 0;

        border-radius: 0;

    }



    .navbar-collapse.show,

    .navbar-collapse.collapsing {

        left: 0;

    }



    /* Close button for mobile menu */

    .navbar-collapse::after {

        content: '×';

        position: absolute;

        top: 20px;

        right: 20px;

        font-size: 2.5rem;

        color: var(--primary-color);

        cursor: pointer;

        width: 40px;

        height: 40px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: rgba(0, 74, 173, 0.1);

        transition: all 0.3s ease;

        pointer-events: auto;

        z-index: 10;

    }



    .navbar-collapse::after:hover {

        background: rgba(0, 74, 173, 0.2);

        transform: rotate(90deg);

    }



    .navbar-nav {

        gap: 0;

    }



    .nav-item {

        border-bottom: 1px solid rgba(0, 74, 173, 0.1);

    }



    .nav-item:last-of-type {

        border-bottom: none;

    }



    .nav-link {

        padding: 16px 12px !important;

        margin: 0;

        border-radius: 0;

        font-size: 1rem;

        font-weight: 600;

    }



    .nav-link:hover {

        background: rgba(0, 74, 173, 0.05);

    }



    /* Mobile dropdown styling */

    .dropdown-toggle::after {

        float: right;

        margin-top: 0.4rem;

        transition: transform 0.3s ease;

    }



    .dropdown.show .dropdown-toggle::after {

        transform: rotate(180deg);

    }



    .dropdown-menu {

        position: static !important;

        transform: none !important;

        background: rgba(0, 74, 173, 0.03);

        border: none;

        border-radius: 0;

        padding: 0;

        margin: 0;

        box-shadow: none;

        border-left: 3px solid var(--secondary-color);

        margin-left: 12px;

        display: none;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.3s ease, padding 0.3s ease;

    }



    .dropdown-menu.show {

        display: block;

        max-height: 2000px;

        padding: 8px 0;

        animation: slideDown 0.3s ease;

    }



    @keyframes slideDown {

        from {

            opacity: 0;

        }



        to {

            opacity: 1;

        }

    }



    /* Hide desktop mega menu structure on mobile */

    .dropdown-menu .container {

        padding: 0;

        margin: 0;

        max-width: 100%;

    }



    .dropdown-menu .row {

        margin: 0;

        flex-direction: column;

    }



    .dropdown-menu .row>div {

        padding: 0;

        margin: 0;

        max-width: 100%;

        flex: 0 0 100%;

    }



    /* Mobile menu section titles */

    .mega-menu-title {

        font-size: 0.75rem;

        margin-bottom: 8px;

        margin-top: 16px;

        padding: 8px 12px 6px;

        text-transform: uppercase;

        letter-spacing: 0.5px;

        color: var(--text-light);

        font-weight: 700;

        background: rgba(0, 74, 173, 0.05);

    }



    .mega-menu-title:first-child {

        margin-top: 8px;

    }



    /* Mobile menu links */

    .mega-menu-list {

        padding: 0 8px;

    }



    .mega-menu-list li {

        margin-bottom: 0;

        list-style: none;

    }



    .mega-menu-list a {

        font-size: 0.9rem;

        padding: 10px 12px;

        display: block;

        border-radius: 6px;

        color: var(--text-dark);

        transition: all 0.2s ease;

    }



    .mega-menu-list a:hover,

    .mega-menu-list a:active {

        background: rgba(0, 74, 173, 0.08);

        color: var(--primary-color);

        padding-left: 16px;

    }



    .d-flex.ms-lg-3 {

        margin-top: 20px;

        padding-top: 20px;

        border-top: 2px solid rgba(0, 74, 173, 0.15);

    }



    .btn-primary {

        width: 100%;

        text-align: center;

        justify-content: center;

    }



    /* Custom scrollbar for mobile menu */

    .navbar-collapse::-webkit-scrollbar {

        width: 6px;

    }



    .navbar-collapse::-webkit-scrollbar-track {

        background: rgba(0, 74, 173, 0.05);

        border-radius: 10px;

    }



    .navbar-collapse::-webkit-scrollbar-thumb {

        background: var(--primary-color);

        border-radius: 10px;

    }



    .navbar-collapse::-webkit-scrollbar-thumb:hover {

        background: var(--secondary-color);

    }

}



/* Tablet Specific Adjustments */

@media (min-width: 768px) and (max-width: 991px) {

    .mega-menu .row>div {

        margin-bottom: 20px;

    }

}



/* ========================================

   HERO SECTION

   ======================================== */



.hero-section {

    background: linear-gradient(rgba(0, 74, 173, 0.8), rgba(0, 74, 173, 0.8)), url('../img/hero-bg.jpg');

    background-size: cover;

    background-position: center;

    color: var(--white);

    padding: 100px 0;

    text-align: center;

}



.hero-title {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 20px;

}



.hero-subtitle {

    font-size: 1.25rem;

    margin-bottom: 30px;

    opacity: 0.9;

}



@media (max-width: 768px) {



    /* Topbar mobile adjustments */

    .topbar {

        font-size: 0.75rem;

        padding: 0.4rem 0;

    }



    .topbar .contact-info {

        gap: 0.75rem;

        justify-content: center;

    }



    .topbar .contact-info>div {

        font-size: 0.75rem;

    }



    .topbar .social-links {

        gap: 0.5rem;

        margin-top: 0.5rem;

    }



    .topbar .social-links a {

        width: 24px;

        height: 24px;

        font-size: 0.75rem;

    }



    /* Hero adjustments */

    .hero-title {

        font-size: 2rem;

    }



    .hero-subtitle {

        font-size: 1rem;

    }

}



/* Stats Section */

.stat-item {

    padding: 20px;

}



.stat-item h2 {

    font-weight: 800;

    color: var(--secondary-color);

}



/* Process Steps */

.process-step {

    padding: 20px;

}



.process-number .badge {

    width: 60px;

    height: 60px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



/* Testimonials */

.testimonial-card {

    background: var(--white);

    border-radius: 8px;

    padding: 30px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}



/* FAQ / Accordion */

.accordion-item {

    border: none;

    margin-bottom: 15px;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



.accordion-button {

    font-weight: 600;

    color: var(--text-dark);

    background-color: var(--white);

    padding: 20px;

}



.accordion-button:not(.collapsed) {

    background-color: var(--primary-color);

    color: var(--white);

}



.accordion-button:focus {

    box-shadow: none;

    border-color: transparent;

}



.accordion-body {

    padding: 20px;

    background-color: var(--bg-light);

}



/* Footer */

.footer {

    background-color: #1a1a1a;

    color: #d1d1d1;

    padding: 60px 0 20px;

}



.footer h5 {

    color: var(--white);

    font-weight: 700;

    margin-bottom: 20px;

}



.footer a {

    color: #d1d1d1;

}



.footer a:hover {

    color: var(--secondary-color);

}



.social-icons a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    margin-right: 10px;

    transition: all 0.3s ease;

}



.social-icons a:hover {

    background: var(--primary-color);

    color: var(--white);

}



.copyright {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    margin-top: 40px;

    padding-top: 20px;

    text-align: center;

    font-size: 0.9rem;

}



/* Utilities */

.section-padding {

    padding: 60px 0;

}



.bg-light-custom {

    background-color: #f4f6f9;

}



.card-hover {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border: none;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}



.card-hover:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



/* Responsive Utilities */

@media (max-width: 991px) {

    .section-padding {

        padding: 40px 0;

    }

}



@media (max-width: 576px) {

    .section-padding {

        padding: 40px 0;

    }



    .display-4 {

        font-size: 2.5rem;

    }

}



/* ========================================

   PREMIUM MODALS

   ======================================== */



.modal-content {

    border: none;

    border-radius: 1rem;

    box-shadow: 0 10px 60px rgba(0, 74, 173, 0.2);

}



.modal-header {

    background: linear-gradient(135deg, #360c16 0%, #581827 100%);

    color: white;

    border-radius: 1rem 1rem 0 0;

    padding: 1.5rem;

    border: none;

}



.modal-header .modal-title {

    font-weight: 700;

    font-size: 1.5rem;

    color: white;

}



.modal-header .modal-title i {

    color: var(--secondary-color);

}



.modal-header p {

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.9rem;

}



.modal-header .btn-close {

    filter: brightness(0) invert(1);

    opacity: 0.8;

}



.modal-header .btn-close:hover {

    opacity: 1;

}



.modal-body {

    padding: 2rem;

    max-height: 70vh;

}



.modal-footer {

    padding: 1.25rem 2rem;

    border-top: 1px solid rgba(0, 74, 173, 0.1);

    background: rgba(248, 249, 250, 0.5);

    border-radius: 0 0 1rem 1rem;

}



.form-section {

    padding-bottom: 1.5rem;

    border-bottom: 2px solid rgba(0, 74, 173, 0.08);

}



.form-section:last-of-type {

    border-bottom: none;

}



.section-title {

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 1rem;

    font-size: 1.1rem;

    display: flex;

    align-items: center;

}



.section-title i {

    color: var(--secondary-color);

}



.form-label {

    font-weight: 600;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

}



.form-control,

.form-select {

    border: 1px solid rgba(0, 74, 173, 0.2);

    border-radius: 0.5rem;

    padding: 0.65rem 0.9rem;

    transition: all 0.3s ease;

    font-size: 0.95rem;

}



.form-control:focus,

.form-select:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 0.25rem rgba(0, 74, 173, 0.1);

}



.form-control:hover,

.form-select:hover {

    border-color: var(--primary-color);

}



.invalid-feedback {

    font-size: 0.85rem;

    margin-top: 0.35rem;

}



.form-check-input {

    border-color: rgba(0, 74, 173, 0.3);

    cursor: pointer;

}



.form-check-input:checked {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

}



.form-check-label {

    cursor: pointer;

    font-weight: 500;

}



.alert {

    border-radius: 0.5rem;

    border: none;

}



.alert-info {

    background: linear-gradient(135deg, rgba(0, 74, 173, 0.08) 0%, rgba(0, 74, 173, 0.05) 100%);

    color: var(--primary-color);

}



.alert-success {

    background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(40, 167, 69, 0.05) 100%);

    color: #28a745;

}



/* Modal Buttons */

.modal-footer .btn {

    padding: 0.65rem 1.5rem;

    font-weight: 600;

    border-radius: 0.5rem;

    transition: all 0.3s ease;

}



.modal-footer .btn-secondary {

    background: #6c757d;

    border: none;

}



.modal-footer .btn-secondary:hover {

    background: #5a6268;

    transform: translateY(-2px);

}



.modal-footer .btn-primary {

    background: linear-gradient(135deg, var(--primary-color) 0%, #0066cc 100%);

    border: none;

    box-shadow: 0 4px 15px rgba(0, 74, 173, 0.3);

}



.modal-footer .btn-primary:hover {

    background: linear-gradient(135deg, #003380 0%, #004aad 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 74, 173, 0.4);

}



/* Mode Switch (Candidate / Employer) */

.mode-switch .btn {

    font-weight: 600;

    padding: 0.35rem 0.75rem;

    border-radius: 0.5rem !important;

    display: flex;

    align-items: center;

    gap: 0.25rem;

}



.mode-switch .btn-light.active {

    background: var(--secondary-color);

    color: var(--topbar-bg);

    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.4);

}



.mode-switch .btn-outline-light {

    border-color: rgba(255, 255, 255, 0.4);

    color: #fff;

}



.mode-switch .btn-outline-light:hover {

    background: rgba(255, 255, 255, 0.15);

}



.candidate-form,

.employer-form {

    transition: opacity 0.3s ease;

}



.candidate-form.d-none,

.employer-form.d-none {

    opacity: 0;

}



.candidate-form.active-form,

.employer-form.active-form {

    opacity: 1;

}



.employer-success-note,

.candidate-success-note {

    transition: all 0.3s ease;

}



.mode-icon {

    transition: color 0.3s ease, transform 0.3s ease;

}



/* Responsive Modal */

@media (max-width: 768px) {

    .modal-body {

        padding: 1.5rem;

        max-height: 60vh;

    }



    .modal-footer {

        padding: 1rem 1.5rem;

    }



    .section-title {

        font-size: 1rem;

    }



    .modal-header .modal-title {

        font-size: 1.25rem;

    }

}



/* ========================================

   Revamped Hero Section (Premium)

   ======================================== */



.hero-slider-section {

    padding: 0;

    position: relative;

    background-color: #0a1a33;

    overflow: hidden;

    /* Dynamic Background Transition */

    transition: background-image 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



/* Background Pattern/Overlay - Darker to ensure text readability */

.hero-slider-section::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,

            rgba(10, 26, 51, 0.85) 0%,

            rgba(10, 26, 51, 0.7) 50%,

            rgba(10, 26, 51, 0.4) 100%);

    pointer-events: none;

    z-index: 1;

}



.hero-slider-layout {

    position: relative;

    z-index: 2;

    padding-top: 2rem;

    padding-bottom: 2rem;

}



/* Slider Container - Transparent to show section background */

.hero-slider {

    position: relative;

    border-radius: 24px;

    overflow: visible;

    /* Allow content to flow */

    box-shadow: none;

    /* Removed shadow from slider container */

    height: 500px;

    background: transparent;

}



.hero-slide {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    transition: opacity 0.6s ease, transform 0.6s ease;

    opacity: 0;

    transform: scale(1.02);

    z-index: 1;

    /* Removed background-image from slide to use section background */

}



.hero-slide.active {

    opacity: 1;

    transform: scale(1);

    z-index: 2;

}



/* Remove old overlay */

.hero-overlay.glass {

    display: none;

}



/* Content Styling - Transparent Card */

.hero-content {

    position: relative;

    z-index: 3;

    padding: 2rem;

    max-width: 750px;

    color: #fff;



    /* Glassmorphic Card Style */

    background: rgba(0, 20, 40, 0.6);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

}



.country-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    padding: 0.5rem 1rem;

    border-radius: 100px;

    margin-bottom: 1.5rem;

    font-weight: 600;

    font-size: 0.9rem;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    box-shadow: none;

    /* Removed shadow */

}



.country-badge img {

    width: 24px;

    height: auto;

    border-radius: 2px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.hero-title {

    font-size: clamp(2.5rem, 5vw, 3.5rem);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 1.25rem;

    letter-spacing: -1px;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}



.hero-subtitle {

    font-size: 1.15rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 2rem;

    font-weight: 400;

    max-width: 90%;

}



/* CTA Buttons */

.hero-ctas {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.hero-ctas .btn {

    padding: 0.8rem 1.8rem;

    font-size: 1rem;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.hero-ctas .btn-primary {

    box-shadow: 0 10px 25px rgba(0, 74, 173, 0.4);

}



.hero-ctas .btn-light {

    background: rgba(255, 255, 255, 0.1);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.3);

    backdrop-filter: blur(5px);

}



.hero-ctas .btn-light:hover {

    background: #fff;

    color: var(--primary-color);

    transform: translateY(-2px);

}



/* Slider Controls */

.hero-controls {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;

    gap: 1rem;

}



.hero-prev,

.hero-next {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    backdrop-filter: blur(5px);

}



.hero-prev:hover,

.hero-next:hover {

    background: var(--primary-color);

    border-color: var(--primary-color);

    transform: scale(1.1);

}



.hero-dots {

    display: flex;

    gap: 8px;

    align-items: center;

    background: rgba(0, 0, 0, 0.3);

    padding: 8px 12px;

    border-radius: 20px;

    backdrop-filter: blur(5px);

}



.hero-dots button {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);

    border: none;

    padding: 0;

    transition: all 0.3s ease;

}



.hero-dots button.active {

    background: #fff;

    transform: scale(1.2);

}



/* Contact Form - Floating Glass Card */

.hero-form-wrapper {

    height: 100%;

    display: flex;

    align-items: center;

}



.hero-form.card {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

    border-radius: 24px;

    overflow: hidden;

    width: 100%;

}



.hero-form .card-body {

    padding: 1.5rem;

}



.hero-form h5 {

    color: #fff;

    font-weight: 700;

    font-size: 1.5rem;

    margin-bottom: 1rem;

    text-align: center;

    letter-spacing: -0.5px;

}



.hero-form .form-label {

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.9rem;

    font-weight: 500;

    margin-bottom: 0.2rem;

}



.hero-form .form-control,

.hero-form .form-select {

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    border-radius: 12px;

    padding: 0.5rem 0.8rem;

    font-size: 0.95rem;

    transition: all 0.3s ease;

}



.hero-form .form-control::placeholder {

    color: rgba(255, 255, 255, 0.5);

}



.hero-form .form-control:focus,

.hero-form .form-select:focus {

    background: rgba(255, 255, 255, 0.25);

    border-color: rgba(255, 255, 255, 0.5);

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);

    color: #fff;

}



.hero-form select option {

    background: #fff;

    color: #333;

}



.hero-form .btn-primary {

    width: 100%;

    padding: 0.7rem;

    font-weight: 700;

    margin-top: 0.8rem;

    background: linear-gradient(135deg, var(--secondary-color) 0%, #ffaa00 100%);

    border: none;

    color: #000;

    /* Contrast for yellow button */

    box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);

}



.hero-form .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 15px 30px rgba(255, 204, 0, 0.4);

    background: linear-gradient(135deg, #ffaa00 0%, var(--secondary-color) 100%);

}



.hero-form .form-note {

    text-align: center;

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.8rem;

    margin-top: 0.8rem;

}



.hero-form .form-note a {

    color: rgba(255, 255, 255, 0.9);

    text-decoration: none;

    border-bottom: 1px dotted rgba(255, 255, 255, 0.5);

}



.hero-form .form-note a:hover {

    color: #fff;

    border-bottom-style: solid;

}



/* Responsive Adjustments */

@media (max-width: 991.98px) {

    .hero-slider-layout {

        padding-top: 1.5rem;

        padding-bottom: 1.5rem;

    }



    .hero-slider {

        height: 450px;

        margin-bottom: 2rem;

    }



    .hero-content {

        padding: 2rem;

    }



    .hero-title {

        font-size: 2.5rem;

    }



    .hero-form-wrapper {

        max-width: 500px;

        margin: 0 auto;

    }

}



@media (max-width: 767.98px) {

    .hero-slider {

        height: 400px;

    }



    .hero-content {

        padding: 1.25rem;

        text-align: center;

    }



    .hero-title {

        font-size: 2rem;

    }



    .hero-ctas {

        justify-content: center;

    }



    .hero-controls {

        bottom: 1rem;

        /* Inherits centering from main rule */

    }



    .country-badge {

        margin-bottom: 1rem;

    }

}



/* Feature Cards (Home Section 2) - ENHANCED */

.feature-card {

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    border: 2px solid rgba(0, 74, 173, 0.05);

    position: relative;

    backdrop-filter: blur(10px);

}



.feature-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    border-radius: 16px 16px 0 0;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.feature-card:hover {

    transform: translateY(-8px) scale(1.02);

    background: #fff !important;

    box-shadow: 0 20px 50px rgba(0, 74, 173, 0.15);

    border-color: var(--primary-color);

}



.feature-card:hover::before {

    transform: scaleX(1);

}



.feature-card .icon-box {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #f0f4ff 0%, #f8faff 100%);

    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(0, 74, 173, 0.1);

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    border: 2px solid rgba(0, 74, 173, 0.05);

}



.feature-card:hover .icon-box {

    background: linear-gradient(135deg, var(--primary-color) 0%, #0066cc 100%);

    color: #fff !important;

    transform: rotate(-15deg) scale(1.15);

    box-shadow: 0 15px 35px rgba(0, 74, 173, 0.3);

}



.feature-card:hover .icon-box.text-secondary {

    background: linear-gradient(135deg, var(--secondary-color) 0%, #ffaa00 100%);

    color: #000 !important;

}



/* ========================================

   ENHANCED TYPOGRAPHY & HEADINGS

   ======================================== */



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 800;

    letter-spacing: -0.5px;

    transition: all 0.4s ease;

}



h1 {

    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.1;

}



h2 {

    font-size: clamp(1.75rem, 4vw, 3rem);

    line-height: 1.15;

}



h2 .text-primary {

    background: linear-gradient(135deg, var(--secondary-color), #c9a961);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-shadow: none;

}



h3 {

    font-size: clamp(1.35rem, 3vw, 1.75rem);

    line-height: 1.3;

}



.display-4,

.display-5,

.display-6 {

    font-weight: 900;

    letter-spacing: -1px;

}



.display-5 {

    font-size: clamp(1.5rem, 4vw, 2.5rem);

}



/* Section Tag Enhancement */

.section-tag {

    display: inline-block;

    padding: 8px 20px;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.08));

    color: var(--secondary-color);

    font-weight: 800;

    font-size: 0.8rem;

    border-radius: 50px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    border: 1px solid rgba(212, 175, 55, 0.25);

    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);

    margin-bottom: 1.5rem;

    transition: all 0.3s ease;

}



.section-tag:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 74, 173, 0.15);

}



/* Lead Text Enhancement */

.lead {

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.7;

    color: #555;

    transition: color 0.3s ease;

}



/* Paragraph Enhancements */

p {

    line-height: 1.75;

    transition: all 0.3s ease;

}



.text-muted {

    color: #666 !important;

}



/* Button Group Enhancements */

.btn-group-enhance {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    align-items: center;

}



/* ========================================

   ENHANCED BUTTON STYLES

   ======================================== */



.btn-primary {

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, var(--secondary-color) 0%, #b8940f 100%);

    border: none;

    padding: 0.75rem 2rem;

    font-weight: 700;

    border-radius: 50px;

    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.35);

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    letter-spacing: 0.5px;

}



.btn-primary::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);

    transform: translate(-50%, -50%);

    transition: width 0.6s ease, height 0.6s ease;

    z-index: -1;

}



.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.5);

    background: linear-gradient(135deg, #b8940f 0%, #a0812a 100%);

}



.btn-primary:active {

    transform: translateY(-1px);

}



.btn-outline-primary {

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    font-weight: 700;

    border-radius: 50px;

}



.btn-outline-primary:hover {

    background: linear-gradient(135deg, var(--primary-color) 0%, #0066cc 100%);

    color: white;

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(0, 74, 173, 0.25);

    border-color: transparent;

}



/* ========================================

   IMPROVED ABOUT SECTION

   ======================================== */



.about-section {

    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);

    z-index: 1;

    position: relative;

}



.about-section h2 {

    color: var(--text-dark);

}



.about-section .text-primary {

    background: linear-gradient(135deg, var(--primary-color), #0066cc);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Background Pattern */.footer-modern::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-image: radial-gradient(#1e293b 1px, transparent 1px);    background-size: 30px 30px;    opacity: 0.3;    pointer-events: none;}/* Newsletter Section */.footer-newsletter-wrapper {    position: relative;    z-index: 2;    margin-bottom: 55px;}.footer-newsletter-card {    background: linear-gradient(135deg, rgba(32, 6, 12, 0.97) 0%, rgba(54, 12, 22, 0.98) 50%, rgba(88, 24, 39, 0.96) 100%);    border-radius: 24px;    padding: 38px 42px;    color: #ffffff;    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 160, 84, 0.15);    border: 1.5px solid rgba(212, 160, 84, 0.38) !important;    position: relative;    overflow: hidden;    backdrop-filter: blur(16px);    transition: all 0.35s ease;}.footer-newsletter-card:hover {    border-color: rgba(212, 160, 84, 0.65) !important;    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 160, 84, 0.25);}.footer-newsletter-card::before {    content: '';    position: absolute;    top: -70px;    left: -70px;    width: 220px;    height: 220px;    background: radial-gradient(circle, rgba(212, 160, 84, 0.22) 0%, transparent 70%);    border-radius: 50%;    pointer-events: none;}.footer-newsletter-card::after {    content: '';    position: absolute;    bottom: -70px;    right: -50px;    width: 280px;    height: 280px;    background: radial-gradient(circle, rgba(212, 160, 84, 0.18) 0%, transparent 70%);    border-radius: 50%;    pointer-events: none;}.newsletter-input-group {    transition: all 0.3s ease;    border: 1.5px solid rgba(212, 160, 84, 0.4) !important;    background: rgba(255, 255, 255, 0.08) !important;    backdrop-filter: blur(12px);}.newsletter-input-group:focus-within {    border-color: rgba(212, 160, 84, 0.9) !important;    background: rgba(255, 255, 255, 0.14) !important;    box-shadow: 0 0 22px rgba(212, 160, 84, 0.35) !important;}.newsletter-input-group .form-control {    background: transparent;    border: none;    color: #ffffff !important;    font-size: 0.95rem;}.newsletter-input-group .form-control::placeholder {    color: rgba(255, 255, 255, 0.65) !important;}.newsletter-input-group .form-control:focus {    box-shadow: none !important;    outline: none !important;}.newsletter-input-group .btn-gold {    background: linear-gradient(135deg, #D4A054 0%, #B88235 100%) !important;    color: #20060C !important;    border: none !important;    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;}.newsletter-input-group .btn-gold:hover {    background: linear-gradient(135deg, #F0BA6A 0%, #D4A054 100%) !important;    transform: translateY(-2px) scale(1.02) !important;    box-shadow: 0 8px 20px rgba(212, 160, 84, 0.45) !important;}@media (max-width: 576px) {    .footer-newsletter-card {        padding: 28px 20px;        border-radius: 20px;    }    .newsletter-input-group {        border-radius: 16px !important;        padding: 8px !important;    }}/* Footer Widgets */.footer-widget {    margin-bottom: 40px;    position: relative;    z-index: 2;}.footer-logo {    font-size: 1.8rem;    font-weight: 800;    color: white;    margin-bottom: 20px;    display: inline-block;    text-decoration: none;}.footer-logo span {    color: var(--primary-color);}.footer-desc {    line-height: 1.7;    margin-bottom: 25px;}.footer-heading {    color: white;    font-size: 1.1rem;    font-weight: 700;    margin-bottom: 25px;    position: relative;    padding-bottom: 10px;}.footer-heading::after {    content: '';    position: absolute;    left: 0;    bottom: 0;    width: 40px;    height: 3px;    background: var(--primary-color);    border-radius: 2px;}/* Footer Links */

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: #94a3b8;

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

}



.footer-links a:hover {

    color: white;

    transform: translateX(5px);

}



.footer-links a::before {

    content: '\f105';

    /* FontAwesome chevron-right */

    font-family: 'Font Awesome 5 Free';

    font-weight: 900;

    margin-right: 8px;

    font-size: 0.8rem;

    color: var(--primary-color);

    opacity: 0;

    transition: all 0.3s ease;

    transform: translateX(-10px);

}



.footer-links a:hover::before {

    opacity: 1;

    transform: translateX(0);

}



/* Contact Info */

.footer-contact-list {

    list-style: none;

    padding: 0;

}



.footer-contact-list li {

    display: flex;

    margin-bottom: 20px;

}



.contact-icon {

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

    margin-right: 15px;

    flex-shrink: 0;

    transition: all 0.3s ease;

}



.footer-contact-list li:hover .contact-icon {

    background: var(--primary-color);

    color: white;

}



.contact-text strong {

    display: block;

    color: white;

    margin-bottom: 2px;

}



/* Social Buttons */

.social-group {

    display: flex;

    gap: 10px;

}



.social-btn {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    text-decoration: none;

    transition: all 0.3s ease;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.social-btn:hover {

    background: var(--primary-color);

    border-color: var(--primary-color);

    transform: translateY(-3px);

    color: white;

}



/* ========================================

   MODERN ANIMATIONS & TRANSITIONS

   ======================================== */



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(0.8);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.7;

    }

}



@keyframes float {



    0%,

    100% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-20px);

    }

}



@keyframes glow {



    0%,

    100% {

        box-shadow: 0 0 20px rgba(0, 74, 173, 0.3);

    }



    50% {

        box-shadow: 0 0 40px rgba(0, 74, 173, 0.6);

    }

}



/* Apply animations to AOS elements */

[data-aos="fade-up"] {

    animation: slideUp 0.8s ease-out both;

}



[data-aos="fade-down"] {

    animation: slideDown 0.8s ease-out both;

}



[data-aos="fade-left"] {

    animation: slideLeft 0.8s ease-out both;

}



[data-aos="fade-right"] {

    animation: slideRight 0.8s ease-out both;

}



[data-aos="zoom-in"] {

    animation: zoomIn 0.8s ease-out both;

}



/* Enhanced Button Animations */

.btn {

    position: relative;

    overflow: hidden;

}



.btn::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



.btn:active::before {

    width: 300px;

    height: 300px;

}



/* Smooth Link Transitions */

a {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Enhanced Form Interactions */

.form-control,

.form-select {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.form-control:focus,

.form-select:focus {

    transform: translateY(-2px);

}



/* Smooth Section Transitions */

section {

    transition: all 0.4s ease;

}



/* Counter Animation for Stats */

@keyframes countUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.stat-number {

    animation: countUp 1s ease-out;

}



/* Smooth Scroll Behavior */

html {

    scroll-behavior: smooth;

}



/* ========================================

   ENHANCED FEATURE LIST ITEMS

   ======================================== */



.feature-list-item {

    display: flex;

    align-items: flex-start;

    margin-bottom: 2rem;

    padding: 1.5rem;

    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(0, 74, 173, 0.08);

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    border: 1px solid rgba(0, 74, 173, 0.05);

    position: relative;

    overflow: hidden;

}



.feature-list-item::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 4px;

    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));

    opacity: 0;

    transition: opacity 0.4s ease;

}



.feature-list-item:hover {

    transform: translateX(12px);

    box-shadow: 0 15px 40px rgba(0, 74, 173, 0.15);

    border-color: var(--primary-color);

}



.feature-list-item:hover::before {

    opacity: 1;

}



.feature-icon {

    flex-shrink: 0;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, rgba(0, 74, 173, 0.12), rgba(255, 204, 0, 0.08));

    color: var(--primary-color);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 1.5rem;

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    border: 1px solid rgba(0, 74, 173, 0.1);

    font-size: 1.5rem;

}



.feature-list-item:hover .feature-icon {

    background: linear-gradient(135deg, var(--primary-color) 0%, #0066cc 100%);

    color: white;

    transform: scale(1.15) rotate(-10deg);

    box-shadow: 0 10px 25px rgba(0, 74, 173, 0.25);

}



/* Footer Bottom */

.footer-bottom {

    background: rgba(0, 0, 0, 0.2);

    padding: 25px 0;

    margin-top: 40px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    position: relative;

    z-index: 2;

}



.footer-bottom-links a {

    color: #94a3b8;

    text-decoration: none;

    margin-left: 20px;

    font-size: 0.9rem;

    transition: color 0.3s ease;

}



.footer-bottom-links a:hover {

    color: white;

}



/* Scroll to Top */

.scroll-top-btn {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: var(--primary-color);

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 999;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    border: none;

}



.scroll-top-btn.show {

    opacity: 1;

    visibility: visible;

}



.scroll-top-btn:hover {

    transform: translateY(-5px);

    background: #0056b3;

}



/* ========================================

   SPLIT CTA SECTION WITH FORM - ENHANCED

   ======================================== */



.cta-section-split {

    background: linear-gradient(135deg, #581827 0%, #360c16 50%, #581827 100%);

    position: relative;

    overflow: hidden;

    padding: 100px 0;

}



/* Enhanced Background Decorations with Mesh Gradient */

.cta-section-split::before {

    content: '';

    position: absolute;

    top: -100px;

    left: -100px;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 204, 0, 0.15) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 70%);

    border-radius: 50%;

    animation: float 8s infinite ease-in-out;

    filter: blur(40px);

}



.cta-section-split::after {

    content: '';

    position: absolute;

    bottom: -150px;

    right: -150px;

    width: 700px;

    height: 700px;

    background: radial-gradient(circle, rgba(244, 196, 48, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 70%);

    border-radius: 50%;

    animation: float 10s infinite ease-in-out;

    animation-delay: 2s;

    filter: blur(50px);

}



/* Left Column Content */

.cta-content-wrapper {

    padding-right: 3rem;

}



.cta-content-wrapper h2 {

    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation: fadeInUp 0.8s ease-out;

}



.cta-icon-box {

    width: 45px;

    height: 45px;

    background: linear-gradient(135deg, rgba(255, 204, 0, 0.35), rgba(255, 204, 0, 0.15));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--secondary-color);

    font-size: 1.2rem;

    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);

    position: relative;

}



.cta-icon-box::before {

    content: '';

    position: absolute;

    inset: -3px;

    border-radius: 50%;

    background: linear-gradient(135deg, rgba(255, 204, 0, 0.4), rgba(255, 204, 0, 0.1));

    opacity: 0;

    transition: opacity 0.4s ease;

    z-index: -1;

}



.cta-features .d-flex:hover .cta-icon-box {

    transform: scale(1.25) rotate(15deg);

    background: linear-gradient(135deg, rgba(255, 204, 0, 0.6), rgba(255, 204, 0, 0.3));

    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.5);

}



.cta-features .d-flex:hover .cta-icon-box::before {

    opacity: 1;

}



.cta-features span {

    font-size: 1.1rem;

    font-weight: 500;

    transition: all 0.3s ease;

}



.cta-contact-info {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));

    border: 2px solid rgba(255, 255, 255, 0.2);

    padding: 2.5rem;

    border-radius: 24px;

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    display: inline-block;

    min-width: 320px;

    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3),

        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    position: relative;

    overflow: hidden;

}



.cta-contact-info::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.7s ease;

}



.cta-contact-info:hover {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));

    border-color: rgba(255, 204, 0, 0.4);

    transform: translateY(-8px) scale(1.02);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),

        inset 0 1px 0 rgba(255, 255, 255, 0.4),

        0 0 30px rgba(255, 204, 0, 0.3);

}



.cta-contact-info:hover::before {

    left: 100%;

}



/* Right Column Form Card */

.cta-form-card {

    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);

    padding: 3.5rem;

    border-radius: 32px;

    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.45),

        0 15px 30px rgba(0, 0, 0, 0.25),

        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    position: relative;

    z-index: 10;

    border: 1px solid rgba(0, 74, 173, 0.08);

    animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

    overflow: hidden;

}



.cta-form-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));

    background-size: 200% 100%;

    animation: gradientShift 3s ease infinite;

}



@keyframes gradientShift {



    0%,

    100% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }

}



.form-title {

    color: var(--text-dark);

    font-weight: 900;

    position: relative;

    padding-bottom: 20px;

    font-size: 1.9rem;

    background: linear-gradient(135deg, #581827 0%, #360c16 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.form-title::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 70px;

    height: 5px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    border-radius: 3px;

    box-shadow: 0 5px 15px rgba(0, 74, 173, 0.3);

    animation: titleUnderline 2s ease-in-out infinite;

}



@keyframes titleUnderline {



    0%,

    100% {

        width: 70px;

    }



    50% {

        width: 90px;

    }

}



/* Form Floating Overrides for this section */

.cta-form-card .form-floating>.form-control,

.cta-form-card .form-floating>.form-select {

    background-color: #f8f9fa;

    border: 2px solid rgba(0, 74, 173, 0.12);

    padding: 1rem 1rem;

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    font-weight: 500;

    border-radius: 12px;

    font-size: 1rem;

}



.cta-form-card .form-floating>.form-control:focus,

.cta-form-card .form-floating>.form-select:focus {

    background-color: #ffffff;

    border-color: transparent;

    box-shadow: 0 0 0 3px rgba(43, 122, 122, 0.25),

        0 8px 25px rgba(0, 0, 0, 0.12);

    transform: translateY(-3px);

    background-image: linear-gradient(#ffffff, #ffffff),

        linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    background-origin: border-box;

    background-clip: padding-box, border-box;

    border: 2px solid transparent;

}



.cta-form-card .form-floating>.form-control:hover,

.cta-form-card .form-floating>.form-select:hover {

    border-color: rgba(43, 122, 122, 0.3);

    transform: translateY(-1px);

}



.cta-form-card .form-floating>label {

    color: #666;

    font-weight: 600;

    font-size: 0.95rem;

    transition: all 0.3s ease;

}



.cta-form-card .form-floating>.form-control:focus~label,

.cta-form-card .form-floating>.form-select:focus~label {

    color: var(--primary-color);

    font-weight: 700;

}



.cta-form-card .btn-primary {

    background: linear-gradient(135deg, #360c16 0%, #581827 100%);

    border: none;

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    font-weight: 700;

    font-size: 1.1rem;

    letter-spacing: 0.5px;

    padding: 1rem 2rem;

    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(43, 122, 122, 0.3);

    position: relative;

    overflow: hidden;

}



.cta-form-card .btn-primary::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    background: rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    transition: width 0.6s ease, height 0.6s ease;

}



.cta-form-card .btn-primary:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(43, 122, 122, 0.5);

    background: linear-gradient(135deg, #360c16 0%, #581827 50%, #360c16 100%);

}



.cta-form-card .btn-primary:hover::after {

    width: 400px;

    height: 400px;

}



.cta-form-card .btn-primary:active {

    transform: translateY(-3px);

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Enhanced Alert Styling */

.cta-form-card .alert {

    border-radius: 12px;

    border: none;

    padding: 1rem 1.5rem;

    animation: slideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.cta-form-card .alert-success {

    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);

    color: #155724;

    border-left: 4px solid #28a745;

}



.cta-form-card .alert-danger {

    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);

    color: #721c24;

    border-left: 4px solid #dc3545;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 991px) {

    .cta-section-split {

        padding: 80px 0;

    }



    .cta-content-wrapper {

        padding-right: 0;

        text-align: center;

    }



    .cta-features .d-flex {

        justify-content: center;

    }



    .cta-contact-info {

        width: 100%;

        margin: 2rem 0;

    }



    .cta-form-card {

        padding: 2.5rem;

    }

}



/* ========================================

   COMPREHENSIVE MOBILE RESPONSIVENESS

   ======================================== */



/* Extra Small Devices (< 576px) */

@media (max-width: 575.98px) {



    /* General */

    .container {

        padding-left: 12px;

        padding-right: 12px;

    }



    /* Topbar */

    .topbar {

        padding: 0.3rem 0;

        font-size: 0.65rem;

    }



    .topbar .container {

        padding-left: 8px;

        padding-right: 8px;

    }



    .topbar .contact-info {

        gap: 0.5rem;

        flex-wrap: wrap;

        justify-content: center;

    }



    .topbar .contact-info>div {

        font-size: 0.65rem;

        margin: 0 0.25rem;

    }



    .topbar .contact-info i,

    .topbar .contact-info svg {

        font-size: 0.75rem;

        margin-right: 0.2rem;

    }



    .topbar .social-links {

        gap: 0.4rem;

        margin-top: 0.35rem;

        width: 100%;

        justify-content: center;

    }



    .topbar .social-links a {

        width: 22px;

        height: 22px;

        font-size: 0.65rem;

    }



    /* Navbar */

    .navbar {

        padding: 0.3rem 0;

        box-shadow: 0 1px 15px rgba(212, 175, 55, 0.1);

    }



    .navbar.scrolled {

        padding: 0.25rem 0;

    }



    .navbar-brand {

        font-size: 1.1rem;

        padding: 0 0 0 0;

    }



    .navbar-brand::before {

        left: -6px;

        width: 3px;

        height: 60%;

    }



    .navbar-toggler {

        padding: 6px 10px;

        border-width: 1.5px;

        margin-right: -8px;

    }



    .navbar-toggler-icon {

        background-size: 100% 100%;

    }



    /* Mobile Menu */

    .navbar-collapse {

        width: 90%;

        max-width: 350px;

        padding: 70px 15px 15px;

    }



    .nav-link {

        padding: 12px 10px !important;

        font-size: 0.95rem;

    }



    



    .d-flex.ms-lg-3 {

        margin: 15px 0 0;

        padding: 15px 0 0;

    }



    .d-flex.ms-lg-3 .btn {

        width: 100%;

        padding: 0.6rem 0.8rem;

        font-size: 0.9rem;

    }



    /* Hero Section */

    .hero-slider-section {

        background-position: center 30%;

    }



    .hero-slider-layout {

        padding: 1rem 0;

    }



    .hero-slider {

        height: 320px;

        border-radius: 16px;

        margin-bottom: 1.5rem;

    }



    .hero-content {

        padding: 1rem;

        border-radius: 16px;

        background: rgba(0, 20, 40, 0.75);

    }



    .country-badge {

        padding: 0.4rem 0.8rem;

        font-size: 0.75rem;

        margin-bottom: 0.8rem;

        gap: 0.5rem;

    }



    .country-badge img {

        width: 18px;

    }



    .hero-title {

        font-size: 1.5rem;

        line-height: 1.2;

        margin-bottom: 0.8rem;

        letter-spacing: -0.5px;

    }



    .hero-subtitle {

        font-size: 0.9rem;

        margin-bottom: 1rem;

        max-width: 100%;

        line-height: 1.5;

    }



    .hero-ctas {

        flex-direction: column;

        gap: 0.6rem;

        width: 100%;

    }



    .hero-ctas .btn {

        padding: 0.65rem 1.2rem;

        font-size: 0.9rem;

        width: 100%;

    }



    .hero-controls {

        bottom: 0.8rem;

        gap: 0.5rem;

    }



    .hero-prev,

    .hero-next {

        width: 40px;

        height: 40px;

        font-size: 0.8rem;

    }



    .hero-dots {

        padding: 6px 10px;

        gap: 6px;

    }



    .hero-dots button {

        width: 8px;

        height: 8px;

    }



    /* Hero Form */

    .hero-form-wrapper {

        display: none;

    }



    /* About/Feature Cards */

    .feature-card {

        margin-bottom: 1rem;

    }



    .feature-card .icon-box {

        width: 60px;

        height: 60px;

        font-size: 1.2rem;

    }



    .feature-card h5 {

        font-size: 1rem;

        margin-bottom: 0.5rem;

    }



    .feature-card p {

        font-size: 0.85rem;

    }



    /* Stats Row */

    .stats-row .col-6 {

        margin-bottom: 1rem;

    }



    .stat-item {

        padding: 0;

        flex-direction: column;

        align-items: flex-start !important;

    }



    .stat-icon {

        width: 50px;

        height: 50px;

        min-width: 50px;

        font-size: 1.5rem;

        margin-right: 1rem;

        margin-bottom: 0;

    }



    .stat-item h2,

    .stat-item .h2 {

        font-size: 1.5rem;

    }



    .stat-item .small {

        font-size: 0.75rem;

    }



    /* Service Cards */

    .service-card-enhanced {

        padding: 1.25rem;

        margin-bottom: 1rem;

    }



    .service-header {

        gap: 0.8rem;

        margin-bottom: 0.8rem;

    }



    .service-icon-box {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }



    .service-card-enhanced h3 {

        font-size: 1rem;

        margin-bottom: 0.5rem;

    }



    .service-card-enhanced p {

        font-size: 0.85rem;

    }



    .service-features-list {

        font-size: 0.8rem;

    }



    .service-features-list li {

        margin-bottom: 0.4rem;

        padding: 0.3rem 0;

    }



    .service-btn {

        font-size: 0.85rem;

        padding: 0.5rem 0;

    }



    /* Section Headings */

    .display-5 {

        font-size: 1.75rem;

    }



    .display-4 {

        font-size: 1.5rem;

    }



    h1 {

        font-size: 1.75rem;

    }



    h2 {

        font-size: 1.5rem;

    }



    h3 {

        font-size: 1.25rem;

    }



    h4 {

        font-size: 1.1rem;

    }



    h5 {

        font-size: 1rem;

    }



    /* Section Padding */

    .section-padding {

        padding: 2rem 0;

    }



    /* Buttons */

    .btn {

        padding: 0.6rem 1rem;

        font-size: 0.9rem;

    }



    .btn-lg {

        padding: 0.6rem 1.2rem;

        font-size: 0.95rem;

    }



    .btn-primary {

        min-width: auto;

        width: auto;

    }



    /* Modal Adjustments */

    .modal-body {

        padding: 1.2rem;

        max-height: 70vh;

    }



    .modal-header {

        padding: 1rem;

    }



    .modal-header .modal-title {

        font-size: 1.1rem;

    }



    .modal-footer {

        padding: 0.8rem 1.2rem;

    }



    .form-label {

        font-size: 0.85rem;

    }



    .form-control,

    .form-select {

        padding: 0.5rem 0.7rem;

        font-size: 0.9rem;

    }



    /* Text utilities */

    .lead {

        font-size: 1rem;

    }



    .text-muted {

        font-size: 0.9rem;

    }



    /* Gaps and spacing */

    .gap-4 {

        gap: 0.75rem !important;

    }



    .gap-3 {

        gap: 0.6rem !important;

    }



    .mb-5 {

        margin-bottom: 1.5rem !important;

    }



    .mb-4 {

        margin-bottom: 1.2rem !important;

    }



    .mb-3 {

        margin-bottom: 1rem !important;

    }



    .mt-4 {

        margin-top: 1.2rem !important;

    }



    .ps-lg-4,

    .pe-lg-4 {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

}



/* Small Devices (576px to 767px) */

@media (min-width: 576px) and (max-width: 767.98px) {

    .container {

        padding-left: 15px;

        padding-right: 15px;

    }



    /* Topbar */

    .topbar .contact-info {

        gap: 0.8rem;

        justify-content: center;

    }



    .topbar .contact-info>div {

        font-size: 0.75rem;

    }



    /* Navbar */

    .navbar-brand {

        font-size: 1.25rem;

    }



    .navbar-toggler {

        padding: 7px 11px;

    }



    .navbar-collapse {

        max-width: 380px;

        width: 85%;

        padding: 75px 18px 18px;

    }



    .nav-link {

        padding: 13px 11px !important;

        font-size: 0.98rem;

    }



    /* Hero Section */

    .hero-slider {

        height: 380px;

    }



    .hero-content {

        padding: 1.25rem;

    }



    .hero-title {

        font-size: 1.85rem;

        margin-bottom: 0.9rem;

    }



    .hero-subtitle {

        font-size: 0.95rem;

        margin-bottom: 1.2rem;

    }



    .hero-ctas .btn {

        padding: 0.68rem 1.35rem;

        font-size: 0.92rem;

    }



    .hero-prev,

    .hero-next {

        width: 44px;

        height: 44px;

    }



    /* Forms */

    .form-control,

    .form-select {

        font-size: 0.95rem;

        padding: 0.55rem 0.75rem;

    }



    /* Cards */

    .feature-card {

        padding: 1.5rem;

    }



    .feature-card .icon-box {

        width: 65px;

        height: 65px;

    }



    .service-card-enhanced {

        padding: 1.5rem;

    }



    .service-header {

        gap: 1rem;

    }



    .service-icon-box {

        width: 65px;

        height: 65px;

    }



    .service-card-enhanced h3 {

        font-size: 1.15rem;

    }



    .display-5 {

        font-size: 2rem;

    }



    .section-padding {

        padding: 2.5rem 0;

    }

}



/* Medium Devices (768px to 991px) */

@media (min-width: 768px) and (max-width: 991.98px) {

    .navbar-collapse {

        position: static;

        padding: 0;

        height: auto;

        background: transparent;

        box-shadow: none;

        border: none;

        padding-top: 1rem;

    }



    .navbar-collapse.collapse:not(.show) {

        display: none;

    }



    .navbar-collapse.collapse.show {

        display: block;

    }



    /* Dropdown adjustments */

    .dropdown-menu.mega-menu {

        padding: 30px;

    }



    .mega-menu .row>div {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }



    /* Hero Section */

    .hero-slider {

        height: 420px;

        border-radius: 20px;

    }



    .hero-form-wrapper {

        max-width: 450px;

        margin: 0 auto;

        margin-top: 2rem;

    }



    .hero-form.card {

        border-radius: 20px;

    }



    .hero-form .card-body {

        padding: 1.75rem;

    }



    .hero-title {

        font-size: 2.2rem;

    }



    .hero-subtitle {

        font-size: 1rem;

    }



    /* Feature Cards */

    .feature-card {

        padding: 1.75rem;

    }



    .feature-card .icon-box {

        width: 68px;

        height: 68px;

    }



    /* Service Cards */

    .service-card-enhanced {

        padding: 1.75rem;

    }



    .service-header {

        gap: 1rem;

    }



    .service-icon-box {

        width: 68px;

        height: 68px;

    }



    .service-card-enhanced h3 {

        font-size: 1.2rem;

    }



    .display-5 {

        font-size: 2.2rem;

    }



    .section-padding {

        padding: 3rem 0;

    }



    /* Cards Grid */

    .col-md-6:mt-md-5 {

        margin-top: 0 !important;

    }



    .col-md-6:mt-md-n5 {

        margin-top: 0 !important;

    }

}



/* Large Devices (992px and up) */

@media (min-width: 992px) {

    .navbar-collapse {

        position: relative;

    }



    .hero-form-wrapper {

        height: 100%;

    }



    .hero-slider-layout .col-lg-5 {

        display: flex;

        align-items: center;

    }

}



/* ========================================

   ADDITIONAL MOBILE-SPECIFIC FIXES

   ======================================== */



/* Ensure proper text wrapping on mobile */

@media (max-width: 575.98px) {

    .hero-ctas .btn-light {

        word-break: break-word;

    }



    .navbar-brand span {

        word-break: break-word;

    }



    /* Stack buttons vertically on very small screens */

    .btn-group,

    .d-flex.gap-3 {

        flex-direction: column;

    }



    /* Fix modal responsiveness */

    .modal-dialog {

        max-width: 100%;

        margin: 0.5rem;

    }



    .modal-content {

        border-radius: 12px;

    }



    /* Fix footer on mobile */

    .footer {

        padding: 40px 0 15px;

    }



    .footer h5 {

        font-size: 1rem;

        margin-bottom: 1rem;

    }



    .footer a {

        font-size: 0.9rem;

    }



    .social-icons a {

        width: 36px;

        height: 36px;

        font-size: 0.9rem;

    }



    .copyright {

        margin-top: 20px;

        padding-top: 15px;

        font-size: 0.8rem;

    }



    /* Carousel/Slider fixes */

    .carousel-control-prev,

    .carousel-control-next {

        width: 40px;

    }



    /* Ensure proper spacing for cards */

    .card {

        margin-bottom: 1rem;

    }



    /* Fix overflow on code blocks if any */

    pre {

        font-size: 0.8rem;

        overflow-x: auto;

    }



    /* Ensure proper image scaling */

    img {

        max-width: 100%;

        height: auto;

    }



    /* Table responsiveness */

    table {

        font-size: 0.85rem;

    }



    .table thead th {

        font-size: 0.8rem;

        padding: 0.5rem;

    }



    .table td {

        padding: 0.5rem;

    }



    /* Badge sizing */

    .badge {

        font-size: 0.7rem;

        padding: 0.35em 0.65em;

    }



    /* Tooltip and popover sizing */

    .tooltip-inner {

        font-size: 0.75rem;

    }



    .popover {

        font-size: 0.85rem;

    }



    /* NOTE: old blanket mobile rules for .input-group / .d-flex were removed —

       they stacked input-group icons above inputs and force-wrapped every

       flex row, breaking the hero form and topbar on phones. */



    /* Fix pagination on mobile */

    .pagination {

        flex-wrap: wrap;

        gap: 0.5rem;

    }



    .page-link {

        padding: 0.4rem 0.65rem;

        font-size: 0.85rem;

    }



    /* Alert message sizing */

    .alert {

        padding: 0.75rem;

        margin-bottom: 1rem;

        font-size: 0.9rem;

    }



    .alert-heading {

        font-size: 1rem;

    }



    /* Media query utilities for responsive display */

    .d-sm-none {

        display: none !important;

    }



    .d-sm-block {

        display: block !important;

    }

}



/* Fix for tablets */

@media (min-width: 576px) and (max-width: 767.98px) {

    .container {

        max-width: 540px;

    }



    .display-4 {

        font-size: 2rem;

    }



    .display-5 {

        font-size: 1.75rem;

    }



    h1 {

        font-size: 1.75rem;

    }



    h2 {

        font-size: 1.5rem;

    }



    /* Image responsiveness */

    .img-fluid {

        max-width: 100%;

        height: auto;

    }



    /* Ensure videos are responsive */

    .embed-responsive {

        position: relative;

        width: 100%;

        padding-bottom: 56.25%;

    }



    .embed-responsive iframe {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

    }

}



/* Touch device specific styles */

@media (hover: none) and (pointer: coarse) {



    /* Increase touch target sizes */

    .btn {

        min-height: 44px;

        min-width: 44px;

        padding: 0.65rem 1rem;

    }



    a {

        padding: 0.25rem;

    }



    .nav-link {

        padding: 1rem 0.5rem !important;

        margin: 0.25rem 0;

    }



    /* Remove hover effects on touch devices */

    .btn:hover {

        transform: none;

    }



    .card:hover {

        transform: none;

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    }



    /* Improve readability */

    input,

    textarea,

    select {

        font-size: 16px;

    }

}



/* ========================================

   RESPONSIVE ENHANCEMENTS FOR HOME SECTIONS

   ======================================== */



/* Markets Section Responsive */

@media (max-width: 991.98px) {

    .market-card {

        padding: 0.65rem 0.85rem;

    }



    .market-flag-box {

        width: 40px;

        height: 40px;

        font-size: 1rem;

        margin-right: 0.6rem;

    }



    .market-name {

        font-size: 0.95rem;

    }



    .market-meta {

        font-size: 0.8rem;

    }



    .market-arrow {

        width: 32px;

        height: 32px;

        font-size: 0.8rem;

    }



    .region-badge {

        padding: 6px 16px;

        font-size: 0.75rem;

        margin-bottom: 1rem;

    }

}



@media (max-width: 575.98px) {

    .market-card {

        padding: 0.6rem 0.75rem;

        flex-direction: column;

        text-align: center;

        gap: 0.5rem;

    }



    .market-flag-box {

        margin-right: 0;

        margin-bottom: 0.25rem;

        width: 36px;

        height: 36px;

        font-size: 0.9rem;

    }



    .market-info {

        margin: 0;

    }



    .market-name {

        font-size: 0.9rem;

        margin-bottom: 0.1rem;

    }



    .market-meta {

        font-size: 0.75rem;

        justify-content: center;

    }



    .market-arrow {

        display: none;

    }



    .markets-section .row {

        margin-bottom: 1rem !important;

    }

}



/* Stats Section Responsive */

@media (max-width: 991.98px) {

    .stats-section {

        padding: 1.5rem 0;

    }



    .stat-item {

        padding: 1rem 0.6rem;

        margin-bottom: 1rem;

    }



    .stat-number {

        font-size: 1.5rem;

    }

}



@media (max-width: 575.98px) {

    .stats-section {

        padding: 1.2rem 0;

    }



    .stat-item {

        padding: 0.8rem 0.5rem;

        margin-bottom: 0.8rem;

    }



    .stat-number {

        font-size: 1.3rem;

    }



    .stat-item p {

        font-size: 0.8rem;

        margin: 0 !important;

    }

}



/* Process Section Responsive */

@media (max-width: 991.98px) {

    .process-step {

        padding: 2rem 1.5rem;

    }



    .process-icon-box {

        width: 90px;

        height: 90px;

        font-size: 2rem;

        margin-bottom: 1.5rem;

    }



    .process-step h5 {

        font-size: 1.1rem;

        margin-bottom: 0.75rem;

    }



    .process-step p {

        font-size: 0.9rem;

    }

}



@media (max-width: 767.98px) {

    .process-step {

        padding: 1.5rem 1.2rem;

    }



    .process-icon-box {

        width: 80px;

        height: 80px;

        font-size: 1.8rem;

        margin-bottom: 1.2rem;

    }



    .process-step h5 {

        font-size: 1rem;

        margin-bottom: 0.6rem;

    }



    .process-step p {

        font-size: 0.85rem;

    }

}



@media (max-width: 575.98px) {

    .process-step {

        padding: 1.2rem 1rem;

    }



    .process-step:hover {

        transform: translateY(-8px) scale(1.01);

    }



    .process-icon-box {

        width: 70px;

        height: 70px;

        font-size: 1.5rem;

        margin-bottom: 1rem;

    }



    .process-step h5 {

        font-size: 0.95rem;

        margin-bottom: 0.5rem;

    }



    .process-step p {

        font-size: 0.8rem;

    }



    .process-number-badge {

        width: 40px;

        height: 40px;

        font-size: 1.1rem;

    }

}



.right-sidebar-sticky {

    position: sticky;

    top: 100px;

}



@media (max-width: 991.98px) {

    .right-sidebar-sticky {

        position: static;

        top: auto;

    }

}