:root {
    --primary: #2453E4;
    --primary-dark: #1a3cbd;
    --secondary: #18E3A1;
    --text-dark: #333333;
    --bg-light: #f8faff;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
}

.bg-alice-blue {
    background-color: #f0f7ff;
}

.bg-custom-navbar {
    background-color: #d3f4e8 !important;
}

/* Header */
.navbar {
    padding: 0;
    border-bottom: 1px solid #eee;
    /* Add subtle border as seen in some views */
}

/* Ensure container matches the main content width for alignment */
.navbar .container {
    max-width: 1320px;
    /* Bootstrap XL container default, ensured for consistency */
}

.navbar-nav .nav-link {
    font-size: 16px;
    color: #333 !important;
    padding: 0.5rem 0.5rem;
    font-weight: 400;
}

/* Active State with Gradient Underline */
.navbar-nav .nav-link.active {
    color: #000 !important;
    position: relative;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -24px;
    /* Adjust based on navbar height to align with bottom edge */
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #18E3A1 0%, #2453E4 100%);
    border-radius: 4px 4px 0 0;
}

/* Globe Icon - Gradient Text */
.globe-icon {
    background: linear-gradient(135deg, #18E3A1, #2453E4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Login Button - White bg, Gradient Border */
.btn-login {
    background: #fff;
    color: #2453E4;
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 4px;
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, #18E3A1, #2453E4);
}

.btn-login:hover {
    color: #1a3cbd;
}

/* Join Now Button - Gradient Bg */
.btn-join {
    background: linear-gradient(90deg, #18E3A1 0%, #2453E4 100%);
    border: none;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.btn-join:hover {
    opacity: 0.9;
    color: white;
}

.separator-gradient {
    height: 6px;
    width: 100px;
    background: linear-gradient(90deg, #18E3A1, #2453E4);
    border-radius: 2px;
}

/* Gradient Buttons and Elements */
.btn-primary-gradient {
    background: linear-gradient(90deg, #18E3A1 0%, #2453E4 100%);
    border: none;
    transition: transform 0.2s;
}

.btn-primary-gradient:hover {
    background: linear-gradient(90deg, #15c990 0%, #1e45c4 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 83, 228, 0.3);
}

.text-primary-light {
    color: #4da6ff;
    /* Lighter blue for dark background text */
    font-weight: bold;
}


/* Hero Section */
.hero-section {
    background: transparent;
    padding: 0;
}

.floating-coin {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px) rotateY(0deg);
    }

    50% {
        transform: translateY(-20px) rotateY(10deg);
    }

    100% {
        transform: translateY(0px) rotateY(0deg);
    }
}

/* Certificate Gallery */
.certificate-item {
    transition: transform 0.3s ease;
    overflow: hidden;
    height: 500px;
    /* Fixed height for uniformity */
    width: 100%;
    border-radius: 5px;
    /* User asked for "like 1px" but typically this means small/sharp. 1px is barely visible, 4-5px is standard "small" rounded. Screenshot looks slightly rounded. I will stick to what looks good but respects "small". User said "1px", I'll set 4px to be safe visually or exactly properties if they insist. Let's try 4px as standard "small", if strictly 1px I can do that. Let's do 4px as it looks like the screenshot. Wait, user said "like 1px". I will use 2px. */
    border-radius: 1px !important;
    border: none !important;
    /* Screenshot shows shadow but not necessarily a border line */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.certificate-item img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.certificate-item:hover {
    transform: translateY(-5px);
}

.hover-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1px;
    /* Match parent */
}

.certificate-item:hover .hover-overlay {
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer;
}

/* Modal Animation */
.modal-overlay {
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Advantages */
.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
footer .bg-primary {
    background-color: #2453E4 !important;
}

footer .bg-black {
    background-color: #000000 !important;
}

footer .list-unstyled li a {
    transition: opacity 0.2s;
}

footer .list-unstyled li a:hover {
    opacity: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .hero-section {
        text-align: center;
    }

    .hero-section .col-lg-5 {
        text-align: center !important;
        margin-top: 2rem;
    }
}

/* VIP Page Styles */
.bg-vip-gradient {
    background: linear-gradient(180deg, #E0F7FA 0%, #F0F7FF 100%);
    /* Light cyan to blueish white */
}

.vip-title-gradient {
    background: linear-gradient(90deg, #18E3A1, #2453E4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vip-badge {
    background: linear-gradient(90deg, #18E3A1, #2453E4);
    color: white;
    border-radius: 4px;
    padding: 10px 20px;
    display: inline-block;
    font-weight: 500;
}

/* VIP Table */
.vip-table-header {
    background: linear-gradient(90deg, #18E3A1 0%, #2453E4 100%);
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 15px;
}

.vip-table-row {
    background: #F8FAFF;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.vip-table-row:hover {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Revenue Cards */
.revenue-card {
    height: 120%;
    padding: 40px 25px;
    border: 2px solid transparent;
    border-radius: 12px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #FFF, #FFF), linear-gradient(90deg, #18E3A1, #2453E4);
}

.revenue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(24, 227, 161, 0.1);
}

/* ... existing styles ... */

/* Mobile Header & Nav Elements */
@media (min-width: 992px) {
    .d-lg-none-custom {
        display: none !important;
    }

    .d-lg-block-custom {
        display: block !important;
    }
}

@media (max-width: 991px) {
    .d-lg-none-custom {
        display: block !important;
    }

    .d-lg-block-custom {
        display: none !important;
    }

    /* Mobile Header */
    .mobile-header {
        height: 60px;
        background: #d3f4e8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1030;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* Mobile Sidebar Menu (Offcanvas) */
    .mobile-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        /* Left Sidebar hidden */
        width: 280px;
        height: 100%;
        background: #fff;
        z-index: 1040;
        transition: left 0.3s ease;
        padding-top: 60px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .mobile-sidebar.active {
        left: 0;
    }

    /* Right Sidebar */
    .mobile-sidebar-right {
        position: fixed;
        top: 0;
        right: -280px;
        /* Right Sidebar hidden */
        width: 280px;
        height: 100%;
        background: #fff;
        z-index: 1040;
        transition: right 0.3s ease;
        padding-top: 60px;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .mobile-sidebar-right.active {
        right: 0;
    }

    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        display: none;
    }

    .mobile-sidebar-overlay.active {
        display: block;
    }

    .mobile-nav-item {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
        text-decoration: none;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
    }

    .mobile-nav-item i,
    .mobile-nav-item img {
        margin-right: 15px;
        width: 24px;
        text-align: center;
        color: #00bcd4;
        /* Example cyan color */
    }

    /* Mobile Content Adjustments */
    .hero-section {
        padding-top: 80px !important;
        /* Account for fixed header */
    }

    /* Bottom Navigation */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 1030;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #999;
        font-size: 12px;
    }

    .bottom-nav-item.active {
        color: #2453E4;
    }

    .bottom-nav-item i {
        font-size: 20px;
        margin-bottom: 4px;
    }

    /* VIP Page Mobile Specifics */
    .vip-title-gradient {
        font-size: 1.8rem;
        /* Smaller title on mobile */
    }

    .floating-coin {
        max-height: 200px !important;
        margin-top: 20px;
    }

    .vip-table-header {
        font-size: 0.8rem;
        padding: 10px;
    }

    .vip-table-row {
        font-size: 0.8rem;
    }
}

/* --- Blog Redesign --- */
.blog-hero {
    padding-top: -2rem;
    padding-bottom: 4rem;
    background: linear-gradient(0deg, #FFFFFF 20%, #d3f4e8);
}

.blog-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, #18E3A1 0%, #2453E4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2rem;
}

.blog-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

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

.blog-card-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.blog-card-body {
    padding: 1.5rem;
}

.blog-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
}

.btn-arrow-blue {
    width: 50px;
    height: 25px;
    border: 1.5px solid #2453E4;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2453E4;
    text-decoration: none;
    transition: 0.3s;
}

.btn-arrow-blue:hover {
    background: #2453E4;
    color: #fff;
}

/* Sidebar Recent Posts */
.recent-post-sidebar {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.recent-blog-card {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.recent-blog-card:hover {
    color: #2453E4;
}

.recent-blog-img {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

.recent-blog-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Detail Page highlight */
.title-bar-highlight {
    width: 40px;
    height: 8px;
    background: linear-gradient(90deg, #18E3A1 0%, #2453E4 100%);
    border-radius: 4px;
    margin-bottom: 2rem;
}

/* Floating Chat Button */
.chat-float {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 60px;
    height: 60px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-decoration: none;
    transition: 0.3s;
}

.chat-float:hover {
    transform: scale(1.1);
    color: #fff;
}

@media (max-width: 991.98px) {
    .blog-hero-title {
        font-size: 2.5rem;
    }

    .chat-float {
        width: 50px;
        height: 50px;
        bottom: 70px;
        font-size: 1.5rem;
    }
}