:root {
    /* Colors */
    --primary-blue: #121760;
    --primary-green: #3DAE8C;
    --bg-light: #F7F7F7;
     --bg-surface: #FFFFFF;
    --text-primary: #121760;
    --text-secondary: #6F6C90;
    --text-muted: #999999;
    --border-color: rgba(0, 0, 0, 0.12);
    --divider-color: #DADEE3;
    --active-bg: #EAEBFB;
    --light-blue: #E7E8EF;
    --light-blue-active: #B6B7CE;
    --neutral-600: #6F6C90;
    --neutral-800: #170F49;
    --tab-bg:#EBEBEB;
    --gray-50:#F2F2F2;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 11.2px;
    --radius-lg: 16px;
    --radius-xl: 19.6px;
    --radius-full: 9999px;

    /* Transitions */
    --transition: all 0.3s ease;
}



body.dark-mode {
    /* Dark Mode Colors */
    --primary-blue: #fff;        /* Lighter blue for dark backgrounds */
    --primary-green: #4ECFAB;       /* Brighter green for visibility */
    --bg-light: #0F1117;            /* Very dark background */
    --bg-surface: #1A1D29;          /* Dark surface (cards, modals) */
    --text-primary: #E8E9F3;        /* Light text */
    --text-secondary: #A0A3BD;      /* Muted light text */
    --text-muted: #6B6E87;          /* Even more muted */
    --border-color: rgba(255, 255, 255, 0.1);  /* Light borders */
    --divider-color: #2A2D3A;       /* Dark divider */
    --active-bg: #2D3142;           /* Active state background */
    --light-blue: #252836;          /* Dark blue-gray */
    --light-blue-active: #3D4152;   /* Lighter dark blue-gray */
    --neutral-600: #A0A3BD;         /* Light neutral */
    --neutral-800: #E8E9F3;         /* Very light neutral */

    /* Dark Mode Specific */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --overlay: rgba(0, 0, 0, 0.6);
    --card-bg: #1E2130;
    --input-bg: #252836;
    --hover-bg: #2D3142;
}

/* ===========================
   DARK MODE GLOBAL STYLES
   =========================== */

body.dark-mode {
    background: var(--bg-light);
    color: var(--text-primary);
}

.primary-green{
    color:#3DAE8C;
}

/* Adjust header in dark mode */
/* body.dark-mode .payqlick-header,
body.dark-mode .signin-header,
body.dark-mode .signup-header,
body.dark-mode .main-header {
    background: var(--bg-surface);
    box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.3);
} */

body.dark-mode .info-item svg *{
    stroke:#fff;
}


/* Dark mode navigation */
body.dark-mode .nav-pill {
    color: var(--text-);
}

body.dark-mode .nav-pill:hover {
    background: var(--hover-bg);
    color: var(--primary-green);
}

body.dark-mode .nav-pill.active {
    background: var(--active-bg);
    color: var(--primary-green);
}

/* ===========================
   DARK MODE SECTIONS
   =========================== */

/* Hero Section */
body.dark-mode .hero-section,
body.dark-mode .partners-section,
body.dark-mode .events-section,
body.dark-mode .banner-section,
body.dark-mode .testimonials-section,
body.dark-mode .footer-section .container {
    background: var(--bg-light);
}

/* Cards */
body.dark-mode .event-card,
body.dark-mode .testimonial-card,
body.dark-mode .price-card,
body.dark-mode .pricing-card,
body.dark-mode .form-card,
body.dark-mode .payment-card,
body.dark-mode .event-info-card,
body.dark-mode .action-buttons-card,
body.dark-mode .stages-card,
body.dark-mode .guidelines-card,
body.dark-mode .dates-card,
body.dark-mode .contact-card,
body.dark-mode .attachments-card,
body.dark-mode .user-profile-card,
body.dark-mode .countdown-card,
body.dark-mode .event-stats-card,
body.dark-mode .eligibility-card,
body.dark-mode .ticket-card,
body.dark-mode .table-container,
body.dark-mode .accordion-card,
body.dark-mode .contact-container,
body.dark-mode .faq-section {
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

/* Text Colors */
body.dark-mode .hero-title,
body.dark-mode .section-title,
body.dark-mode .event-title,
body.dark-mode .banner-title,
body.dark-mode .testimonials-title,
body.dark-mode .page-title,
body.dark-mode .form-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary);
}

body.dark-mode .hero-subtitle,
body.dark-mode .banner-subtitle,
body.dark-mode .event-description,
body.dark-mode .footer-description p,
body.dark-mode p {
    color: var(--text-secondary);
}

/* ===========================
   DARK MODE BUTTONS
   =========================== */

body.dark-mode .btn-signup,
body.dark-mode .btn-outline,
body.dark-mode .action-btn,
body.dark-mode .filter-button {
    border-color: var(--primary-blue);
    color: var(--primary-blue) !important;
    background: transparent;
}

body.dark-mode .contact-container .subtitle{
    color:#fff;
}

body.dark-mode .btn-signup:hover,
body.dark-mode .btn-outline:hover,
body.dark-mode .action-btn:hover,
body.dark-mode .filter-button:hover {
    background: var(--primary-blue);
    color: #121760 !important;
}

body.dark-mode .btn-search,
body.dark-mode .btn-register,
body.dark-mode .btn-signin,
body.dark-mode .btn-request,
body.dark-mode .btn-banner,
body.dark-mode .btn-pay,
body.dark-mode .btn-contact,
body.dark-mode .signup-submit-btn {
    background: var(--primary-blue);
    color: var(--primary-green);
}

body.dark-mode .btn-signin:hover{
    color:#0a0f3d !important;
}

body.dark-mode .search-input{
    color:#fff !important;
}
body.dark-mode .btn-search:hover{
    background: #0a0f3d !important;
}

body.dark-mode .btn-register:hover,
body.dark-mode .btn-signin:hover,
body.dark-mode .btn-request:hover,
body.dark-mode .btn-banner:hover,
body.dark-mode .btn-pay:hover,
body.dark-mode .btn-contact:hover,
body.dark-mode .signup-submit-btn:hover {
    background: var(--primary-green);
}

/* ===========================
   DARK MODE FORMS & INPUTS
   =========================== */

body.dark-mode .form-input,
body.dark-mode .search-input,
body.dark-mode .signup-input,
body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .form-group select,
body.dark-mode textarea {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .form-input::placeholder,
body.dark-mode .search-input::placeholder,
body.dark-mode .signup-input::placeholder {
    color: var(--text-muted);
}

body.dark-mode .input-wrapper,
body.dark-mode .search-input-container,
body.dark-mode .signup-input-wrapper,
body.dark-mode .phone-input-wrapper {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.dark-mode .input-wrapper:focus-within,
body.dark-mode .search-input-container:focus-within,
body.dark-mode .signup-input-wrapper:focus-within {
    border-color: var(--primary-blue);
}

/* Form Labels */
body.dark-mode .form-label,
body.dark-mode .signup-label,
body.dark-mode .form-group label {
    color: #fff;
}

/* ===========================
   DARK MODE BADGES & TAGS
   =========================== */

body.dark-mode .badge-new,
body.dark-mode .hero-badge {
    background: var(--primary-green);
    color: var(--bg-surface);
}

body.dark-mode .event-tag {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

body.dark-mode .status-badge.status-approved {
    background: var(--primary-green);
    color: var(--bg-surface);
}

/* ===========================
   DARK MODE PILL TABS
   =========================== */

body.dark-mode .pill-tabs,
body.dark-mode .user-type-tabs,
body.dark-mode .signup-tabs,
body.dark-mode .pricing-tabs {
    background: var(--bg-surface);
}

body.dark-mode .pill-tab,
body.dark-mode .tab-btn,
body.dark-mode .signup-tab-btn,
body.dark-mode .pricing-tab {
    color: var(--text-primary);
}

body.dark-mode .pill-tab.active,
body.dark-mode .tab-btn.active,
body.dark-mode .signup-tab-btn.active,
body.dark-mode .pricing-tab.active {
    background: var(--primary-green);
    color: var(--bg-surface);
}

/* ===========================
   DARK MODE FOOTER
   =========================== */

body.dark-mode .footer-section .container{
    background: var(--bg-surface);
}

body.dark-mode .footer-title {
    color: var(--text-primary);
}

body.dark-mode .footer-links a,
body.dark-mode .copyright-text{
    color: var(--text-secondary) !important;
}
body.dark-mode .social-icons svg *,body.dark-mode .profile-dropdown-menu svg *,body.dark-mode .sidebar-nav svg *{
    stroke: var(--text-secondary) !important;
}
body.dark-mode .profile-page .profile-container .btn-edit-photo{
    background: var(--primary-green) !important;
}
body.dark-mode .footer-links a:hover {
    color: var(--primary-green);
}

body.dark-mode .footer-divider,
body.dark-mode .footer-middle-divider,
body.dark-mode .footer-bottom-divider {
    background: var(--divider-color);
}

/* ===========================
   DARK MODE TABLES
   =========================== */

body.dark-mode .custom-table thead th {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .custom-table tbody tr {
    background: var(--card-bg);
}

body.dark-mode .custom-table tbody tr:nth-child(even) {
    background: var(--bg-surface);
}

body.dark-mode .custom-table tbody td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .inner-table thead th {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .inner-table tbody tr {
    background: var(--card-bg);
}

body.dark-mode .inner-table tbody tr:nth-child(even) {
    background: var(--bg-surface);
}

body.dark-mode .inner-table tbody td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ===========================
   DARK MODE ACCORDION
   =========================== */

body.dark-mode .accordion-item {
    background: var(--card-bg);
    border:1px solid #fff !important;
}
body.dark-mode  .accordion-icon{
    color:#fff;
}
body.dark-mode .accordion-item.active {
    background: var(--bg-surface);
}

body.dark-mode .accordion-title .title,
body.dark-mode .accordion-content .body {
    color: var(--text-primary);
}

/* ===========================
   DARK MODE BREADCRUMBS
   =========================== */

body.dark-mode .breadcrumb-container,
body.dark-mode .breadcrumb-nav {
    background: var(--card-bg);
    border-color: var(--border-color);
}
body.dark-mode .location-icon path:first-child{
    fill:#fff;
}
body.dark-mode .location-icon path:last-child{
    stroke:#fff;
}
body.dark-mode .hero-badge span{
    color:#fff;
}
body.dark-mode .view-all-link svg *{
    stroke: var(--primary-green) ;
}
body.dark-mode .pricing-header{
    background: #1e2130;
}
body.dark-mode .signin-right{
    background: var(--bg-light);
}
body.dark-mode .nav-dropdown-item svg *,body.dark-mode .event-date svg *{
    stroke: #fff; 
}
body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-text {
    color: #fff;
}
body.dark-mode .breadcrumb-item svg{
    stroke: var(--text-secondary);
}
body.dark-mode .breadcrumb-arrow{
    stroke: var(--text-secondary);
}
body.dark-mode .breadcrumb-item:hover {
    background: var(--hover-bg);
}

/* ===========================
   DARK MODE PRICING CARDS
   =========================== */

body.dark-mode .price-card:not(.featured) {
    background: var(--card-bg);
}

body.dark-mode .price-card.featured {
    background: var(--primary-blue);
}

body.dark-mode .price-amount {
    color: var(--primary-green);
}

body.dark-mode .price-label {
    color: var(--text-primary);
}

body.dark-mode .price-features li {
    color: var(--text-secondary);
}

body.dark-mode .price-card.featured .price-amount,
body.dark-mode .price-card.featured .price-label,
body.dark-mode .price-card.featured .price-features li {
    color: var(--bg-surface);
}

/* ===========================
   DARK MODE IMAGES & MEDIA
   =========================== */

/* Slightly reduce image brightness in dark mode */
body.dark-mode img {
    opacity: 0.9;
}

/*body.dark-mode .event-image::before,*/
/*body.dark-mode .image-1::before,*/
/*body.dark-mode .image-2::before,*/
/*body.dark-mode .image-3::before {*/
/*    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));*/
/*}*/

/* ===========================
   DARK MODE OFFCANVAS & MODALS
   =========================== */

body.dark-mode .offcanvas {
    background: var(--bg-surface);
}

body.dark-mode .offcanvas-title {
    color: var(--text-primary);
}

body.dark-mode .offcanvas-subtitle {
    color: var(--text-secondary);
}

body.dark-mode .offcanvas-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* ===========================
   DARK MODE DROPDOWN
   =========================== */

body.dark-mode .nav-dropdown,
body.dark-mode .profile-dropdown {
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .nav-dropdown-item,
body.dark-mode .profile-dropdown-item {
    color: var(--text-primary);
}

body.dark-mode .nav-dropdown-item:hover,
body.dark-mode .profile-dropdown-item:hover {
    background: var(--hover-bg);
    color: var(--primary-green);
}

body.dark-mode .profile-dropdown-name {
    color: var(--text-primary);
}

body.dark-mode .profile-dropdown-email {
    color: var(--text-secondary);
}

/* ===========================
   DARK MODE SPECIAL ELEMENTS
   =========================== */

/* Cookie Popup */
body.dark-mode .cookie-popup {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .cookie-text {
    color: var(--text-primary);
}

/* Countdown */
body.dark-mode .countdown-item {
    background: var(--bg-surface);
}

body.dark-mode .countdown-value {
    color: var(--text-primary);
}

body.dark-mode .countdown-label {
    color: var(--text-secondary);
}

/* Event Stats */
body.dark-mode .stat-icon {
    background: #fff;
    stroke: var(--primary-blue);
}

body.dark-mode .stat-value {
    color: var(--text-primary);
}

/* ===========================
   DARK MODE SIGN IN/UP PAGES
   =========================== */

body.dark-mode .signin-container,
body.dark-mode .signup-container {
    background: var(--bg-surface);
}

body.dark-mode .signin-left,
body.dark-mode .signup-left {
    /* Keep the overlay dark for readability */
}

body.dark-mode .brand-title,
body.dark-mode .brand-tagline,
body.dark-mode .signup-brand-title,
body.dark-mode .signup-brand-tagline {
    color: var(--primary-blue); /* Keep white text on overlay */
}

/* Social Login Buttons */
body.dark-mode .btn-social {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.dark-mode .logo-icon,body.dark-mode .footer-logo img,body.dark-mode .ticket-logo img{
    filter: brightness(0) invert(1);
}

body.dark-mode .btn-social span {
    color: var(--text-primary);
}

body.dark-mode .btn-social:hover {
    border-color: var(--primary-blue);
}

/* Divider */
body.dark-mode .divider-line {
    background: var(--border-color);
}

body.dark-mode .divider-text {
    color: var(--text-secondary);
}

/* ===========================
   DARK MODE PROFILE PAGE
   =========================== */

body.dark-mode .sidebar {
    background: var(--card-bg);
}

body.dark-mode .sidebar-footer {
    border-top-color: var(--border-color);
}

body.dark-mode .user-name {
    color: var(--text-primary);
}

body.dark-mode .user-role {
    color: var(--text-secondary);
}

body.dark-mode .main-content {
    background: var(--card-bg);
}

body.dark-mode .tabs-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .tabs-header .tab-btn{
    background-color: transparent !important;
}
body.dark-mode .tabs-header .tab-btn.active{
    color:  var(--primary-green); !important;
}

/* Gender Chips */
body.dark-mode .chip {
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .chip.active,
body.dark-mode .chip:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

/* Select Wrapper */
body.dark-mode .select-display {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.dark-mode .country-name {
    color: var(--text-primary);
}

/* ===========================
   DARK MODE TOGGLE SWITCH
   =========================== */

body.dark-mode .toggle-track {
    background: var(--primary-green);
}

body.dark-mode .toggle-thumb {
    background: var(--bg-light);
    border-color: var(--primary-green);
}

/* ===========================
   DARK MODE SCROLLBAR (Optional)
   =========================== */

body.dark-mode::-webkit-scrollbar {
    width: 12px;
    background: var(--bg-light);
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 6px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green);
}

/* ===========================
   DARK MODE SMOOTH TRANSITION
   =========================== */

body,
.payqlick-header,
.card,
.btn,
input,
select,
textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===========================
   DARK MODE ACCESSIBILITY
   =========================== */

/* Ensure sufficient contrast for links */
body.dark-mode a {
    color: var(--primary-green) !important;
}


/* Focus states remain visible */
body.dark-mode *:focus-visible {
    outline-color: var(--primary-green);
}

/* ===========================
   DARK MODE PRINT STYLES
   =========================== */

@media print {
    body.dark-mode {
        background: white;
        color: black;
    }

    body.dark-mode .card,
    body.dark-mode .section {
        background: white;
        color: black;
    }
}
/* ===========================
   PayQlick Header Styles
   =========================== */

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}
body {
    font-family: 'Poppins', sans-serif;
}

/* ===========================
   Header Container
   =========================== */
.payqlick-header .container{
    background: var(--bg-surface);
    margin-top: 15px;
    padding: 15px 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-radius: 16px
}

.payqlick-header .navbar {
    padding: 0;
}

.payqlick-header .container-xxl {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ===========================
   Logo Section
   =========================== */
.navbar-brand {
    gap: 3.81px;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.logo-icon {
    width: 36.19px;
    height: 40px;
    object-fit: contain;
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22.7743px;
    line-height: 120%;
    color: var(--primary-blue);
    margin-left: 3.81px;
}

/* ===========================
   Navigation Pills
   =========================== */
.navigation-pills {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-bottom: 0;
}

.nav-pill {
    padding: 8px !important;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #1E1E1E;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-pill:hover {
    background: #F0F1FC;
    color: #040951;
}

.nav-pill.active {
    background: #EAEBFB;
    color: #040951;
}

/* ===========================
   Header Auth Section
   =========================== */
.header-auth {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 15px;
}

/* Language Switcher */
.language-switcher {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--primary-blue);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.language-switcher:hover {
    opacity: 0.7;
}

/* ===========================
   Toggle Switch (Dark/Light Mode)
   =========================== */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 32px;
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-label {
    position: relative;
    display: block;
    width: 48px;
    height: 32px;
    background: var(--primary-green);
    border-radius: 37px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: var(--bg-light);
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-input:checked + .toggle-label .toggle-circle {
    transform: translateX(0);
}

.toggle-input:not(:checked) + .toggle-label {
    background: #ccc;
}

.toggle-input:not(:checked) + .toggle-label .toggle-circle {
    transform: translateX(16px);
    border-color: #ccc;
}

.sun-icon {
    width: 20px;
    height: 20px;
}

/* ===========================
   Sign Up Button
   =========================== */
.btn-signup {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--primary-blue);
    border-radius: 11.2px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--primary-blue);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-signup:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
    border-color: var(--primary-blue);
}

.btn-signup:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(18, 23, 96, 0.25);
}

/* ===========================
   Mobile Responsive
   =========================== */
@media (max-width: 991px) {
    .payqlick-header {
        padding: 16px 0;
    }

    .payqlick-header .container-xxl {
        gap: 16px;
    }

    .navbar-collapse {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #EAEBFB;
    }

    .navigation-pills {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .nav-pill {
        width: 100%;
        justify-content: flex-start;
    }

    .header-auth {
        margin-left: 0;
        justify-content: space-between;
        width: 100%;
        padding-top: 15px;
        border-top: 1px solid #EAEBFB;
    }

    .btn-signup {
        flex: 1;
        max-width: 150px;
    }
}

@media (max-width: 576px) {
    .logo-text {
        font-size: 18px;
    }

    .logo-icon {
        width: 30px;
        height: 35px;
    }

    .header-auth {
        flex-wrap: wrap;
    }

    .btn-signup {
        max-width: 100%;
    }
}

/* ===========================
   Navbar Toggler Custom
   =========================== */
.navbar-toggler {
    border: 1px solid var(--primary-blue);
    padding: 8px 12px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(18, 23, 96, 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(18, 23, 96, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ===========================
   Hero Section Styles
   =========================== */

.hero-section {
    padding: 64px 24px;
    background: var(--bg-light);
}

/* ===========================
   Avatar Group & Badge
   =========================== */
.hero-badge-wrapper {
    position: relative;
    width: fit-content;
}

.avatar-group {
    display: flex;
    align-items: center;
    padding: 0;
    z-index: -1;
    margin-bottom: 0px;
    position: relative;
}

.avatar-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--primary-green);
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
    margin-left: -8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-item:first-child {
    margin-left: 0;
}

.avatar-item.avatar-count {
    background: var(--primary-blue);
}


.text-rotator {
    display: inline-block;
    position: relative;
    height: 1.2em; /* Adjust based on your font size */
    vertical-align: bottom;
    width:auto;
}

.text-item {
    display: block;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    color:var(--primary-green);
    transition: all 0.5s ease-in-out;
}

.text-item.active {
    opacity: 1;
    transform: translateY(0);
}

.text-item.slide-out {
    opacity: 0;
    transform: translateY(-100%);
}

.avatar-initial {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--bg-surface);
    text-align: center;
}

.hero-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: var(--primary-green);
    border: 2px solid var(--primary-blue);
    border-radius: 100px;
    width: fit-content;
    margin-top: -7px;
    z-index: 1;
}

.hero-badge .check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hero-badge span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: var(--bg-surface);
    white-space: nowrap;
}

/* ===========================
   Hero Title & Subtitle
   =========================== */
.hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 49px;
    line-height: 120%;
    color: #1E1E1E;
    margin-top: 32px;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: justify;
    line-height: 135%;
    color: #757575;
    max-width: 667px;
}

/* ===========================
   Search Input Container
   =========================== */
.hero-search-wrapper {
    position: relative;
    max-width: 390px;
    margin-top: 32px;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.75px solid var(--primary-blue);
    border-radius: 19.6px;
    padding: 14px;
    gap: 9px;
    background: var(--bg-surface);
}

.location-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.search-input {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.4);
    flex-grow: 1;
}

.search-input:focus {
    color: rgba(0, 0, 0, 0.88);
}

.search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.btn-search {
    position: absolute;
    right: 0;
    top: 0;
    padding: 14px 28px;
    background: var(--primary-blue);
    border: none;
    border-radius: 19.6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--bg-surface);
    height: 58px;
    transition: all 0.3s ease;
}

.btn-search:hover {
    color:#fff;
    background: #0a0f3d;
}

/* ===========================
   Hero Images Gallery
   =========================== */
.hero-images-gallery {
    position: relative;
    width: 100%;
    height: 420px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
}

.gallery-image {
    border-radius: 27.44px;
    overflow: hidden;
    position: relative;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-1 {
    grid-column: 1;
    grid-row: 1;
    height: 247px;
    border-radius: 27.44px 27.44px 0px 27.44px;
}

.image-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(18, 23, 96, 0.5) 0%, rgba(18, 23, 96, 0.5) 100%);
    z-index: 1;
}

.image-2 {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 382px;
    border-radius: 0px 0px 0px 27.44px;
}

.image-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(161.12deg, rgba(18, 23, 96, 0.7) 33.94%, rgba(61, 174, 140, 0.7) 99.13%);
    z-index: 1;
}

.image-3 {
    grid-column: 1;
    grid-row: 2;
    height: 160px;
    border-radius: 27.44px 0px 27.44px 27.44px;
}

.image-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(18, 23, 96, 0.5), rgba(18, 23, 96, 0.5));
    z-index: 1;
}

/* ===========================
   Partners Section
   =========================== */
.partners-section {
    padding: 40px 24px;
    background: var(--bg-light);
}

.partners-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #1E1E1E;
    margin-bottom: 32px;
}

.partners-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
    border-radius: 12px;
}

.logo-item {
    width: 130px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}



.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .hero-title {
        font-size: 42px;
    }

    .hero-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .hero-section {
        padding: 48px 20px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-images-gallery {
        margin-top: 40px;
        height: 350px;
    }

    .image-1 {
        height: 200px;
    }

    .image-2 {
        height: 320px;
    }

    .image-3 {
        height: 120px;
    }
}

@media (max-width: 767px) {
    .contact-container .info-description {
        margin-bottom:35px;
    }
    body .logo-watermark{
        display:none;
    }
    body .pricing-cards{
        width:100%;
        display: block;
    }
    body .pricing-card{
        width: 100%;
        margin-bottom: 20px;
    }
    body .main-container{
        padding:0 20px;
    }
    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-badge span {
        font-size: 14px;
    }

    .avatar-item {
        width: 35px;
        height: 35px;
    }

    .hero-search-wrapper {
        max-width: 100%;
    }

    .search-input-container {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
    }

    .btn-search {
        position: static;
        width: 100%;
        margin-top: 8px;
        border-radius: 16px;
    }

    .hero-images-gallery {
        height: 300px;
    }

    .partners-logos {
        gap: 20px;
    }

    .logo-item {
  width: 130px;
    height: 100px;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 32px 16px;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-badge {
        padding: 10px;
    }

    .hero-badge span {
        font-size: 12px;
    }

    .avatar-item {
        width: 30px;
        height: 30px;
    }

    .avatar-initial {
        font-size: 12px;
    }

    .search-input {
        font-size: 16px;
    }

    .partners-title {
        font-size: 18px;
    }

    .logo-item {
          width: 130px;
    height: 100px;
    }
}
/* ===========================
   Events Section Styles
   =========================== */

.events-section {
    padding: 40px 24px;
    background: var(--bg-light);
}

/* ===========================
   Section Header
   =========================== */
.events-header {
    margin-bottom: 32px;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 31px;
    line-height: 40px;
    color: var(--primary-blue);
    margin: 0;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    color: var(--primary-blue);
    transform: translateX(5px);
}

.view-all-link svg {
    transition: transform 0.3s ease;
}

.view-all-link:hover svg {
    transform: translate(3px, -3px);
}

/* ===========================
   Pill Tabs
   =========================== */
.pill-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px 8px;
    background: var(--tab-bg);
    border-radius: 63px;
    width: fit-content;
}

.pill-tab {
    padding: 10px 15px;
    border: none;
    width:150px;
    background: transparent;
    border-radius: 632px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16.44px;
    line-height: 120%;
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.pill-tab.active {
    background: var(--primary-green);
    box-shadow: 0px 5px 23px rgba(0, 0, 0, 0.17);
}

.pill-tab:hover:not(.active) {
    background: rgba(61, 174, 140, 0.2);
}

/* ===========================
   Events Carousel
   =========================== */
.events-carousel-wrapper {
    position: relative;
    margin-top: 48px;
}

.events-cards-container {
    overflow: hidden;
    padding: 8px 0;
}

.events-cards-track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s ease;
}

/* ===========================
   Event Card
   =========================== */
.event-card {
    flex: 0 0 282px;
    width: 282px;
    display: block;
    background: var(--bg-surface);
    border-radius: 13.51px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(18, 23, 96, 0.15);
}

.event-card:hover .event-title{
    color: var(--primary-green);
}

/* Event Image */
.event-image {
    position: relative;
        padding: 5px;
    width: 100%;
        border-radius: 13.51px;
    height: 260px;
    overflow: hidden;
    background: #fff;
}

.event-image img {
    width: 100%;
    height: 100%;
    border-radius: 13.51px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.event-image .event-image {
    transition: all 0.5s ease;
}


.event-card:hover .event-image{
    transform: scale(1.1);
    transition: all 0.5s ease;
}


/* .event-card:hover .event-image img {
    transform: scale(1.05);
    transition: all 0.3s ease;
} */

/* Badges */
.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 120%;
    z-index: 2;
}

.badge-new {
    background: var(--primary-green);
    color: var(--bg-surface);
}

.badge-sold {
    background: #DA0004;
    color: #E7E8EF;
    left: auto;
    right: 50px;
}

/* Favorite Button */
.btn-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.btn-favorite:hover {
    background: var(--bg-surface);
    transform: scale(1.1);
}

.btn-favorite.active svg path {
    fill: #DA0004;
}

/* Image Dots */
.image-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.image-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.image-dots .dot.active {
    background: var(--bg-surface);
    width: 24px;
    border-radius: 4px;
}

/* Event Content */
.event-content {
    padding: 16px;
}

.event-info {
    margin-bottom: 8px;
}

.event-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    height:60px;
    color: var(--primary-blue);
    margin: 0 0 8px 0;
}

.event-description {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 120%;
    color: #5E5E5E;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-date {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.event-date svg {
    flex-shrink: 0;
}

.event-date span {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    color: var(--primary-blue);
}

/* Divider */
.event-divider {
  border: none;
    border-top: 1px solid #12176036;
    margin: 0 0 4px 0;
}

/* Event Footer */
.event-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #E7E8EF;
}

.event-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-dot {
    width: 3.38px;
    height: 3.38px;
    background: #5E5E5E;
    border-radius: 50%;
    flex-shrink: 0;
}

.event-organizer {
    flex: 1;
    min-width: 0;
}

.organizer-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 120%;
    color: var(--primary-blue);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organizer-location {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 120%;
    color: #5E5E5E;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================
   Carousel Controls
   =========================== */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-control:hover {
    background: #0a0f3d;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: -50px;
}
body.dark-mode .breadcrumb-container svg{
    stroke:#fff;
}
body.dark-mode  .true-icon{
     stroke:#121760;
}
body.dark-mode a.stat-badge{
    color:#fff !important;
}
body.dark-mode .event-meta svg.info-icon  path{
     stroke:#fff;
}
body.dark-mode .event-divider{
    border-top: 1px solid #f9f9f985;
}
body.dark-mode .event-meta span{
    color:#fff !important;
}
body.dark-mode .events-carousel-wrapper .carousel-control svg path{
    stroke:#3DAE8C;
}

.carousel-next {
    right: -50px;
}

/* Gradient Overlay */
.carousel-gradient {
    position: absolute;
    right: 0;
    top: 0;
    width: 136px;
    height: 100%;
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgba(255, 255, 255, 0.75) 100%);
    pointer-events: none;
    z-index: 5;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .section-title {
        font-size: 28px;
    }

    .carousel-prev {
        left: -15px;
    }

    .carousel-next {
        right: -15px;
    }
}

@media (max-width: 991px) {
    .events-section {
        padding: 48px 20px;
    }

    .section-title {
        font-size: 26px;
    }

    .pill-tabs {
        width: 100%;
        justify-content: center;
    }

    .carousel-control {
        width: 40px;
        height: 40px;
    }

    .carousel-prev {
        left: -10px;
    }

    .carousel-next {
        right: -10px;
    }

    .carousel-gradient {
        width: 80px;
    }
}

@media (max-width: 767px) {

    .events-header .text-end {
        /* text-align: left !important; */
    }

    .pill-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pill-tabs::-webkit-scrollbar {
        display: none;
    }

    .event-card {
        flex: 0 0 260px;
        width: 260px;
    }

    .carousel-prev,
    .carousel-next {
        display: none;
    }

    .carousel-gradient {
        display: none;
    }

    /* Enable touch scrolling */
    .events-cards-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .events-cards-container::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 576px) {
    .events-section {
        padding: 32px 16px;
    }

    .section-title {
        font-size: 24px;
    }

    .pill-tab {
        font-size: 14px;
        padding: 8px 12px;
    }

    .event-card {
        flex: 0 0 240px;
        width: 240px;
    }

    .event-image {
        height: 200px;
    }
}
/* ===========================
   Banner Section Styles (Redesigned)
   =========================== */

.banner-section {
    padding: 40px 24px;
    background: var(--bg-light);
}

/* ===========================
   Banner Header
   =========================== */
.banner-header {
    margin-bottom: 32px;
}

.banner-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 31px;
    line-height: 40px;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.banner-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: justify;
    line-height: 135%;
    color: #757575;
    margin: 0;
    /* max-width: 900px; */
}

/* ===========================
   Banner Container (Horizontal Layout)
   =========================== */
.banner-container {
    display: flex;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    height: 345px;
}

/* ===========================
   Banner Items
   =========================== */
.banner-item {
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main Item (Left - Large) */
.banner-main {
    flex: 0 0 408px;
    background: #E7E8EF;
    isolation: isolate;
}

/* Small Items (Right Side) */
.banner-small {
    flex: 1 1 auto;
    background: var(--bg-surface);
    border-right: 1.18px solid rgba(0, 0, 0, 0.1);
    min-width: 222px;
}

.banner-small:last-child {
    border-right: none;
}

/* Hover Effect for Banner Items */
.banner-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When hovering the main item, it keeps its size */
.banner-main:hover {
    flex: 0 0 408px;
}

/* When hovering ANY small item, it expands to 408px */
.banner-small:hover {
    flex: 0 0 408px;
}

.banner-small:hover .icon-background{
    display: block;
}

/* When ANY item is hovered, main shrinks if not hovered */
.banner-container:hover .banner-main:not(:hover) {
    flex: 0 0 222px;
}

/* When ANY item is hovered, other small items shrink */
.banner-container:hover .banner-small:not(:hover) {
    flex: 0 0 222px;
}

/* ===========================
   Icon Wrapper
   =========================== */
.banner-icon-wrapper {
    width: 58.78px;
    height: 58.78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

/* Main item icon background */
.banner-main .banner-icon-wrapper {
    background: var(--bg-surface);
}

/* Small items icon backgrounds */
.icon-green {
    background: #ECF7F4;
}

.icon-pink {
    background: #F7ECF6;
}

.icon-orange {
    background: #F7F2EC;
}

.icon-teal {
    background: #ECF7F6;
}

/* Icon Background Circle (Only for main item) */
.icon-background {
    position: absolute;
    width: 221.63px;
    height: 221.63px;
    right: -20%;
    bottom: -12%;
    background: rgba(12, 12, 13, 0.05);
    border-radius: 50%;
    z-index: -1;
}

.icon-circle {
    position: absolute;
    width: 58.78px;
    height: 58.78px;
    border-radius: 50%;
    background: var(--bg-surface);
    z-index: 0;
}

/* Icon SVG */
.banner-icon {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.banner-item:hover .banner-icon {
    transform: scale(1.1);
}

/* ===========================
   Banner Content
   =========================== */
.banner-item-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    color: var(--primary-blue);
    margin: 0;
    transition: opacity 0.3s ease;
}

.banner-item-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 19.59px;
    line-height: 120%;
    color: var(--primary-blue);
    margin: 0;
    flex: 1;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner-small .banner-item-text {
    font-size: 18.95px;
}

/* Show text only on main item by default */
.banner-main .banner-item-text {
    opacity: 1;
    max-height: 200px;
    transform: translateX(0);
}

.banner-small:nth-child(1) .icon-background{
    display: block;
}

.banner-small .icon-background{
    display: none;
}

/* ===========================
   Banner Buttons
   =========================== */
.btn-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.35px;
    padding: 9.8px 19.6px;
    background: var(--primary-blue);
    border: none;
    border-radius: 13.71px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15.92px;
    line-height: 20px;
    color: var(--bg-surface);
    cursor: pointer;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.banner-small .btn-banner {
    padding: 9.47px 18.95px;
    font-size: 15.39px;
    line-height: 19px;
    border-radius: 13.26px;
}

/* Show button only on main item by default */
.banner-main .btn-banner {
    opacity: 1;
    max-height: 100px;
    transform: translateX(0);
}

.btn-banner:hover {
    color:#fff;
    background: #0a0f3d;
}

.btn-banner svg {
    transition: transform 0.3s ease;
}

.btn-banner:hover svg {
    transform: translateX(4px);
}

/* ===========================
   Hover State - Show Content & Hide Others
   =========================== */

/* When hovering any banner item */
.banner-item:hover .banner-item-text,
.banner-item:hover .btn-banner {
    opacity: 1;
    max-height: 200px;
    transform: translateX(0);
}

/* Hide text in other items when one is hovered */
.banner-container:hover .banner-item:not(:hover) .banner-item-text,
.banner-container:hover .banner-item:not(:hover) .btn-banner {
    opacity: 0;
    max-height: 0;
    transform: translateX(-20px);
}

/* Keep title visible but dimmed */
.banner-container:hover .banner-item:not(:hover) .banner-item-title {
    opacity: 0.5;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .banner-container {
        flex-wrap: wrap;
        height: auto;
    }

    .banner-main {
        flex: 0 0 100%;
        height: 345px;
    }

    .banner-small {
        flex: 1 1 calc(50% - 1px);
        min-height: 300px;
        border-right: 1.18px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1.18px solid rgba(0, 0, 0, 0.1);
    }

    .banner-small:nth-child(3) {
        border-right: none;
    }

    .banner-small:last-child {
        border-bottom: none;
    }
}

@media (max-width: 991px) {
    .banner-section {
        padding: 48px 20px;
    }

    .banner-title {
        font-size: 28px;
    }

    .banner-subtitle {
        font-size: 16px;
    }

    .banner-header .row {
        flex-direction: column;
    }

    .banner-header .text-end {
        text-align: left !important;
        margin-top: 16px;
    }
}

@media (max-width: 767px) {
    .banner-section {
        padding: 40px 16px;
    }

    .banner-title {
        font-size: 24px;
        line-height: 32px;
    }

    .banner-subtitle {
        font-size: 14px;
    }

    .banner-container {
        flex-direction: column;
        gap: 0;
    }

    .banner-main,
    .banner-small {
        flex: 1 0 auto;
        width: 100%;
        min-height: 280px;
        border-right: none;
        border-bottom: 1.18px solid rgba(0, 0, 0, 0.1);
    }

    .banner-small:last-child {
        border-bottom: none;
    }

    .icon-background {
        width: 150px;
        height: 150px;
        right: -70px;
        top: 100px;
    }
}

@media (max-width: 576px) {
    .banner-section {
        padding: 32px 16px;
    }

    .banner-item {
        padding: 24px 20px;
        gap: 20px;
    }

    .banner-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .banner-icon {
        width: 24px;
        height: 24px;
    }

    .banner-item-title {
        font-size: 18px;
    }

    .banner-item-text {
        font-size: 14px !important;
    }

    .btn-banner {
        padding: 8px 16px;
        font-size: 13px !important;
        line-height: 16px;
    }
}

/* ===========================
   Animation on Scroll
   =========================== */
.banner-item {
    opacity: 0;
    animation: slideInUp 0.6s ease forwards;
}

.banner-main {
    animation-delay: 0.1s;
}

.banner-small:nth-child(2) {
    animation-delay: 0.2s;
}

.banner-small:nth-child(2):hover {
    background-color: #ECF7F4;
}

.banner-small:nth-child(2):hover .banner-icon-wrapper
{
    background-color: #fff;
}

.banner-small:nth-child(3):hover {
    background-color: #F7ECF6;
}

.banner-small:nth-child(3):hover .banner-icon-wrapper
{
    background-color: #fff;
}

.banner-small:nth-child(4):hover {
    background-color: #F7F2EC;
}

.banner-small:nth-child(4):hover .banner-icon-wrapper
{
    background-color: #fff;
}


.banner-small:nth-child(5):hover {
    background-color: #ECF7F6;
}

.banner-small:nth-child(5):hover .banner-icon-wrapper
{
    background-color: #fff;
}


.banner-small:nth-child(3) {
    animation-delay: 0.3s;
}

.banner-small:nth-child(4) {
    animation-delay: 0.4s;
}

.banner-small:nth-child(5) {
    animation-delay: 0.5s;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Hover Glow Effect
   =========================== */
.banner-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 174, 140, 0.05) 0%, rgba(18, 23, 96, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.banner-item:hover::after {
    opacity: 1;
}

/* ===========================
   Smooth Transitions
   =========================== */
.banner-item,
.banner-icon,
.btn-banner {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ===========================
   Testimonials Section Styles
   =========================== */

.testimonials-section {
    padding: 80px 24px;
    background: var(--bg-light);
}

/* ===========================
   Testimonials Header (Left Side)
   =========================== */
.testimonials-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-right: 40px;
}

.testimonials-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 61px;
    color: var(--primary-blue);
    margin: 0;
}

.highlight-text {
    color: var(--primary-green);
}

/* Register Button */
.btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--primary-blue);
    border: none;
    border-radius: 22.4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: var(--bg-surface);
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
}

.btn-register:hover {
    background: #0a0f3d;
    color:#fff;
    transform: translateY(-2px);
}

.btn-register svg {
    transition: transform 0.3s ease;
}

.btn-register:hover svg {
    transform: translateX(4px);
}

/* ===========================
   Testimonial Card
   =========================== */
.testimonial-card-wrapper {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.testimonial-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 36.73px;
    gap: 16px 13.77px;
    background: var(--bg-surface);
    border: 1.15px solid rgba(0, 0, 0, 0.2);
    border-radius: 18.36px;
    min-height: 272px;
    transition: all 0.5s ease;
}

.testimonial-card:not(.active) {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.testimonial-card.active {
    opacity: 1;
    position: relative;
}

/* Slide Animations */
.testimonial-card.slide-out-left {
    animation: slideOutLeft 0.5s ease forwards;
}

.testimonial-card.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

.testimonial-card.slide-out-right {
    animation: slideOutRight 0.5s ease forwards;
}

.testimonial-card.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===========================
   Avatar
   =========================== */
.testimonial-avatar {
    width: 91.81px;
    height: 91.81px;
    border-radius: 50%;
    border: 2.3px solid var(--primary-green);
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
    overflow: hidden;
    flex-shrink: 0;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================
   Testimonial Content
   =========================== */
.testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18.36px;
    min-width: 0;
}

/* Quote */
.testimonial-quote {
    flex: 1;
}

.quote-text {
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #000;
    margin: 0;
}

/* ===========================
   Author Section
   =========================== */
.testimonial-author-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18.36px;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 13.77px;
}

.author-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28.69px;
    line-height: 120%;
    color: var(--primary-blue);
    margin: 0;
}

.author-position {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 22.95px;
    line-height: 120%;
    color: #666666;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash {
    color: var(--primary-green);
}

/* ===========================
   Navigation Buttons
   =========================== */
.testimonial-navigation {
    display: flex;
    gap: 35.58px;
}

.nav-btn {
    width: 50.5px;
    height: 50.5px;
    background: #F5F5F5;
    border: 1.15px solid #B6B7CE;
    border-radius: 36.12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: scale(1.1);
}

.nav-btn:hover svg path {
    stroke: var(--bg-surface);
}

.nav-btn:active {
    transform: scale(0.95);
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .testimonials-title {
        font-size: 42px;
        line-height: 52px;
    }

    .quote-text {
        font-size: 30px;
    }

    .author-name {
        font-size: 24px;
    }

    .author-position {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .testimonials-section {
        padding: 60px 20px;
    }

    .testimonials-header {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
        align-items: center;
    }

    .testimonials-title {
        font-size: 36px;
        line-height: 44px;
    }

    .btn-register {
        font-size: 20px;
        padding: 14px 28px;
    }

    .quote-text {
        font-size: 26px;
    }

    .author-name {
        font-size: 22px;
    }

    .author-position {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .testimonials-section {
        padding: 48px 16px;
    }

    .testimonials-title {
        font-size: 28px;
        line-height: 36px;
    }

    .btn-register {
        font-size: 18px;
        padding: 12px 24px;
    }

    .testimonial-card {
        padding: 24px;
        flex-direction: column;
    }

    .testimonial-avatar {
        width: 80px;
        height: 80px;
        align-self: center;
    }

    .quote-text {
        font-size: 20px;
        text-align: center;
    }

    .author-name {
        font-size: 18px;
    }

    .author-position {
        font-size: 14px;
    }

    .testimonial-author-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .author-info {
        align-items: center;
    }

    .testimonial-navigation {
        gap: 20px;
    }

    .nav-btn {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 576px) {
    .testimonials-title {
        font-size: 24px;
        line-height: 32px;
    }

    .btn-register {
        font-size: 16px;
        padding: 10px 20px;
        width: 100%;
    }

    .quote-text {
        font-size: 18px;
    }

    .testimonial-card {
        padding: 20px;
        min-height: auto;
    }
}

/* ===========================
   Fade In Animation
   =========================== */
.testimonials-section {
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Hover Effects
   =========================== */
.testimonial-card:hover {
    box-shadow: 0 8px 24px rgba(18, 23, 96, 0.12);
    transform: translateY(-4px);
}

/* ===========================
   Footer Section Styles
   =========================== */

.footer-section {
    padding: 0 0 0px;
}

.footer-section .container{
    background: var(--bg-surface);
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
}

/* ===========================
   Dividers
   =========================== */
.footer-divider,
.footer-middle-divider,
.footer-bottom-divider {
    width: 100%;
    height: 1px;
    background: #EFF0F7;
    border: none;
}

.footer-divider {
    margin-bottom: 60px;
}

.footer-middle-divider {
    margin: 50px 0;
    background: #D9DBE9;
}

.footer-bottom-divider {
    margin: 40px 0 20px;
    background: #EFF0F7;
}

/* ===========================
   Footer Top: Logo & Description
   =========================== */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
}

.footer-logo-section {
    display: flex;
    justify-content: center;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.81px;
}

.footer-logo img {
    height: 40px;
    object-fit: contain;
}

.footer-logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22.77px;
    line-height: 120%;
    color: var(--primary-blue);
}

.footer-description {
    text-align: center;
    max-width: 526px;
}

.footer-description p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: var(--text-secondary);
    margin: 0;
}

/* ===========================
   Footer Middle: Links Grid
   =========================== */
.footer-middle {
    padding: 0 20px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 30px;
}

.footer-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    color: var(--neutral-800);
    margin: 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-blue);
}

/* ===========================
   Social Icons
   =========================== */
.social-icons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.social-icons a {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    transform: scale(1.2);
}

.social-icons a:hover svg path,
.social-icons a:hover svg rect,
.social-icons a:hover svg circle {
    stroke: var(--primary-green);
}

/* ===========================
   Contact Button
   =========================== */
.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-blue);
    border: none;
    border-radius: 16.8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--bg-surface);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 202px;
}

.btn-contact:hover {
    background: #0a0f3d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18, 23, 96, 0.3);
    color: var(--bg-surface);
}

.btn-contact svg {
    width: 24px;
    height: 24px;
}

/* ===========================
   Footer Bottom: Copyright
   =========================== */
.footer-bottom {
    text-align: center;
    padding: 0 20px;
}

.copyright-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-secondary);
    margin: 0;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .footer-middle .row {
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .footer-divider {
        margin-bottom: 40px;
    }

    .footer-middle-divider {
        margin: 40px 0;
    }

    .footer-column {
        gap: 24px;
    }

    .footer-title {
        font-size: 18px;
    }

    .footer-links a {
        font-size: 16px;
    }

    .footer-description p {
        font-size: 16px;
        line-height: 26px;
    }

    .copyright-text {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .footer-section {
        padding: 0 0 20px;
    }

    .footer-divider {
        margin-bottom: 30px;
    }

    .footer-middle-divider {
        margin: 30px 0;
    }

    .footer-logo img {
        width: 60px;
        height: 66px;
    }

    .footer-logo-text {
        font-size: 20px;
    }

    .footer-description p {
        font-size: 14px;
        line-height: 22px;
    }

    .footer-column {
        gap: 20px;
        margin-bottom: 24px;
        text-align: center;
    }

    .footer-title {
        font-size: 16px;
    }

    .footer-links {
        gap: 14px;
        align-items: center;
    }

    .footer-links a {
        font-size: 14px;
    }

    .social-icons {
        justify-content: center;
    }

    .btn-contact {
        font-size: 16px;
        padding: 10px 20px;
        max-width: 100%;
    }

    .copyright-text {
        font-size: 14px;
    }

    .footer-bottom-divider {
        margin: 30px 0 16px;
    }
}

@media (max-width: 576px) {
    .footer-middle {
        padding: 0 16px;
    }

    .footer-top,
    .footer-bottom {
        padding: 0 16px;
    }

    .footer-logo-text {
        font-size: 18px;
    }

    .footer-description p {
        font-size: 13px;
        line-height: 20px;
    }

    .footer-title {
        font-size: 15px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .copyright-text {
        font-size: 13px;
    }

    .btn-contact {
        font-size: 14px;
        padding: 10px 18px;
    }
}

/* ===========================
   Hover Effects & Animations
   =========================== */
.footer-links a {
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-blue);
    transition: width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

/* Fade in animation */
.footer-section {
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for columns */
.footer-column {
    opacity: 0;
    animation: fadeInColumn 0.6s ease forwards;
}

.footer-column:nth-child(1) { animation-delay: 0.1s; }
.footer-column:nth-child(2) { animation-delay: 0.2s; }
.footer-column:nth-child(3) { animation-delay: 0.3s; }
.footer-column:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInColumn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   Utility Classes
   =========================== */
.mt-4 {
    margin-top: 24px !important;
}

/* ===========================
   Accessibility
   =========================== */
.footer-links a:focus-visible,
.social-icons a:focus-visible,
.btn-contact:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .footer-section,
    .footer-column,
    .footer-links a,
    .social-icons a,
    .btn-contact {
        animation: none !important;
        transition: none !important;
    }
}


/* ===========================
   Sign In Page Styles
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
    min-height: 100vh;
}

/* ===========================
   Header Styles
   =========================== */
.signin-header {
    background: var(--bg-surface);
    padding: 24px 32px;
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 3.81px;
}

.header-logo img {
    width: 36.19px;
    height: 40px;
}

.logo-text {
    font-weight: 700;
    font-size: 22.77px;
    line-height: 120%;
    color: var(--primary-blue);
}

/* Navigation */
.header-nav {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.nav-pill {
    padding: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #1E1E1E;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-pill.active {
    background: #EAEBFB;
    color: #040951;
}

.nav-pill:hover {
    background: #EAEBFB;
}

/* Header Auth */
.header-auth {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-switcher {
    font-weight: 400;
    font-size: 16px;
    color: var(--primary-blue);
    cursor: pointer;
}

/* Theme Toggle */
.theme-toggle {
    width: 48px;
    height: 32px;
    position: relative;
}

.toggle-track {
    width: 48px;
    height: 32px;
    background: var(--primary-green);
    border-radius: 37px;
    position: relative;
    cursor: pointer;
}

.toggle-thumb {
    position: absolute;
    width: 32px;
    height: 32px;
    background: var(--bg-light);
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    transition: left 0.3s ease;
}

.toggle-track.active .toggle-thumb {
    left: 16px;
}

/* Sign Up Button */
.btn-signup {
    padding: 8px 16px;
    border: 1px solid var(--primary-blue);
    border-radius: 11.2px;
    font-weight: 400;
    font-size: 13px;
    color: var(--primary-blue);
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-signup:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

/* ===========================
   Main Container
   =========================== */
.signin-main {
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.signin-container {
    width: 100%;
    height: 100%;
    max-height: 941px;
    background: var(--bg-surface);
    display: flex;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Left Side (Image & Branding)
   =========================== */
.signin-left {
    flex: 0 0 720px;
    background: linear-gradient(0deg, rgba(18, 23, 96, 0.25), rgba(18, 23, 96, 0.25)),
                url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800') center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px 70px 12px;
    border-top-right-radius: 20px;
}

.left-overlay {
    border-top-right-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(18, 23, 96, 0.85) 0%, rgba(61, 174, 140, 0.3) 100%);
}

.left-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height:100%;
    justify-content: space-between;
        max-width: 95%;
    width: 100%;
}

.brand-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-logo-large {
    width: 146px;
    height: 150px;
}

.brand-logo-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-title {
    font-weight: 600;
    font-size: 56px;
    line-height: 64px;
    color: var(--bg-surface);
    margin: 0;
}

.brand-tagline {
    font-weight: 400;
    font-size: 28px;
    text-align:right;
    line-height: 120%;
    color: var(--bg-surface);
    margin: 0;
}

/* ===========================
   Right Side (Form)
   =========================== */
.signin-right {
    flex: 1;
    padding: 70px 60px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-container {
    max-width: 568px;
    width: 100%;
}

/* Form Header */
.form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.btn-back {
    width: 41.32px;
    height: 41.32px;
    background: #F5F5F5;
    border: 1.15px solid #B6B7CE;
    border-radius: 36.12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: var(--primary-blue);
}

.btn-back:hover svg path {
    stroke: var(--bg-surface);
}

.form-title {
    font-weight: 500;
    font-size: 32px;
    line-height: 48px;
    color: #333333;
    margin: 0;
    flex: 1;
}

@media (min-width: 1200px) {
    .form-title {
        font-size: 32px;
    }
}

/* User Type Tabs */
.user-type-tabs {
    display: flex;
    padding: 5.06px 7.59px;
    background: var(--tab-bg);
    border-radius: 63.23px;
    margin-bottom: 30px;
    gap: 0;
}

.tab-btn {
    flex: 1;
    padding: 10.12px 15.17px;
    background: transparent;
    border: none;
    border-radius: 632.26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: var(--primary-blue);
    color: var(--gray-50);
    box-shadow: 0px 5.06px 22.76px rgba(0, 0, 0, 0.17);
}

/* Social Login Buttons */
.social-login-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 0px;
}

.btn-social {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    background: var(--bg-surface);
    border: 1.75px solid rgba(0, 0, 0, 0.12);
    border-radius: 19.6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-social:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(18, 23, 96, 0.1);
}

.btn-social svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.btn-social span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    color: var(--primary-blue);
}

/* Divider */
.divider-section {
    display: flex;
    align-items: center;
    gap: 23px;
    margin: 24px 0;
}

.divider-line {
    flex: 1;
    height: 2px;
    background: rgba(102, 102, 102, 0.25);
}

.divider-text {
    font-weight: 400;
    font-size: 15px;
    color: #666666;
}

/* ===========================
   Form Inputs
   =========================== */
.signin-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group {
    position: relative;
}

.form-label {
    position: absolute;
    top: -24.5px;
    left: 9px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #666666;
    display: none;
}

.form-label.success-label {
    color: #22B814;
    display: block;
}

.form-label.error-label {
    color: #DA0004;
    display: block;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px;
    height: 56px;
    border: 1.75px solid rgba(0, 0, 0, 0.12);
    border-radius: 19.6px;
    gap: 9px;
    transition: all 0.3s ease;
}

.input-wrapper.success-input {
    border-color: #22B814;
}

.input-wrapper.error-input {
    border-color: #DA0004;
}

.form-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.88);
    background: transparent;
}

.form-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-size: 15px;
}

.input-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.btn-toggle-password {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-toggle-password svg path,
.btn-toggle-password svg circle {
    transition: stroke 0.3s ease;
}

/* Update icon color based on input state */
.input-wrapper.error-input .btn-toggle-password svg path,
.input-wrapper.error-input .btn-toggle-password svg circle {
    stroke: #DA0004;
}

.input-wrapper.success-input .btn-toggle-password svg path,
.input-wrapper.success-input .btn-toggle-password svg circle {
    stroke: #22B814;
}

/* Input Messages */
.input-message {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    margin-top: 3.5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    display: none;
}

.input-message.success-message {
    color: #22B814;
    display: flex;
}

.input-message.error-message {
    color: #DA0004;
    display: flex;
}

.input-message svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

/* Forgot Password */
.forgot-password-section {
    text-align: right;
    margin-top: 0;
    margin-bottom: 0px;
}

.forgot-password-link {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline;
    color: #111111;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: var(--primary-blue);
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.btn-signin {
    max-width: 249px;
    width: 100%;
    height: 56px;
    background: var(--primary-blue);
    border: none;
    border-radius: 19.6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--bg-surface);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-signin:hover {
    background: #0a0f3d;
    color:#fff;
}

.signup-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    margin: 0;
    padding: 2px;
}

.signup-link {
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: 500;
}

.signup-link:hover {
    color: var(--primary-green);
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .signin-container {
        height: auto;
        flex-direction: column;
    }

    .signin-left {
        flex: 0 0 400px;
        padding: 40px 60px;
    }

    .brand-title {
        font-size: 42px;
        line-height: 52px;
    }

    .brand-tagline {
        font-size: 24px;
    }

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

@media (max-width: 991px) {
    .header-nav {
        display: none;
    }

    .signin-left {
        flex: 0 0 300px;
        padding: 30px 40px;
    }

    .brand-title {
        font-size: 36px;
        line-height: 44px;
    }

    .brand-tagline {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .signin-header {
        padding: 16px 20px;
    }

    .header-auth {
        gap: 8px;
    }

    .signin-main {
        height: calc(100vh - 72px);
    }

    .signin-container {
        max-height: none;
    }

    .signin-left {
        display: none;
    }

    .signin-right {
        padding: 32px 20px;
        overflow-y: auto;
    }

    .form-container {
        width: 100%;
    }

    .form-title {
        font-size: 28px;
        line-height: 36px;
    }

    .user-type-tabs {
        gap: 4px;
    }

    .tab-btn {
        font-size: 15px;
        padding: 9px 14px;
    }

    .btn-social {
        height: 52px;
    }

    .btn-social svg {
        width: 24px;
        height: 24px;
    }

    .btn-social span {
        font-size: 18px;
    }

    .input-wrapper {
        height: 52px;
        padding: 12px;
    }

    .form-input {
        font-size: 18px;
    }

    .form-input::placeholder {
        font-size: 18px;
    }

    .btn-signin {
        height: 52px;
        font-size: 18px;
    }

    .form-actions {
        width: 100%;
        max-width: none;
    }

    .divider-section {
        gap: 16px;
        margin: 32px 0;
    }

    .forgot-password-section {
        margin-bottom: 16px;
    }
}

/* ===========================
   Animations
   =========================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-container {
    animation: fadeIn 0.6s ease;
}

/* Focus States */
.form-input:focus {
    outline: none;
}

.input-wrapper:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(18, 23, 96, 0.1);
}

.input-wrapper.success-input:focus-within {
    border-color: #22B814;
    box-shadow: 0 0 0 3px rgba(34, 184, 20, 0.1);
}

.input-wrapper.error-input:focus-within {
    border-color: #DA0004;
    box-shadow: 0 0 0 3px rgba(218, 0, 4, 0.1);
}


/* ===========================
   Sign Up Page Styles
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
    min-height: 100vh;
}

/* ===========================
   Header Styles
   =========================== */
.signup-header {
    background: var(--bg-surface);
    padding: 24px 32px;
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.signup-header-content {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */
.signup-logo {
    display: flex;
    align-items: center;
    gap: 3.81px;
}

.signup-logo img {
    width: 36.19px;
    height: 40px;
}

.signup-logo-text {
    font-weight: 700;
    font-size: 22.77px;
    line-height: 120%;
    color: var(--primary-blue);
}

/* Navigation */
.signup-nav {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.signup-nav-pill {
    padding: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #1E1E1E;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.signup-nav-pill.active {
    background: #EAEBFB;
    color: #040951;
}

.signup-nav-pill:hover {
    background: #EAEBFB;
}

/* Header Auth */
.signup-header-auth {
    display: flex;
    align-items: center;
    gap: 12px;
}

.signup-language {
    font-weight: 400;
    font-size: 16px;
    color: var(--primary-blue);
    cursor: pointer;
}

/* Theme Toggle */
.signup-theme-toggle {
    width: 48px;
    height: 32px;
    position: relative;
}

.signup-toggle-track {
    width: 48px;
    height: 32px;
    background: var(--primary-green);
    border-radius: 37px;
    position: relative;
    cursor: pointer;
}

.signup-toggle-thumb {
    position: absolute;
    width: 32px;
    height: 32px;
    background: var(--bg-light);
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    transition: left 0.3s ease;
}

.signup-toggle-track.active .signup-toggle-thumb {
    left: 16px;
}

/* Header Button */
.signup-header-btn {
    padding: 8px 16px;
    border: 1px solid var(--primary-blue);
    border-radius: 11.2px;
    font-weight: 400;
    font-size: 13px;
    color: var(--primary-blue);
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.signup-header-btn:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

/* ===========================
   Main Container
   =========================== */
.signup-main {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.signup-container {
    width: 100%;
    height: 100%;
    max-height: 1097px;
    background: var(--bg-surface);
    display: flex;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Left Side (Image & Branding)
   =========================== */
.signup-left {
    flex: 0 0 720px;
    background: linear-gradient(0deg, rgba(18, 23, 96, 0.25), rgba(18, 23, 96, 0.25)),
                url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800') center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px 70px 12px;
    border-top-right-radius: 15px;
}

.signup-left-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top-right-radius: 15px;
    background: linear-gradient(135deg, rgba(18, 23, 96, 0.85) 0%, rgba(61, 174, 140, 0.3) 100%);
} 

body.dark-mode .btn-linkedin svg{
    fill:#ffffff;
}

.signup-left-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height:100%;
    justify-content: space-between;
      max-width: 95%;
    width: 100%;
}

.signup-brand-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signup-brand-logo {
    width: 146px;
    height: 150px;
}

.signup-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.signup-brand-title {
    font-weight: 600;
    font-size: 56px;
    line-height: 64px;
    color: var(--bg-surface);
    margin: 0;
}

.signup-brand-tagline {
    font-weight: 400;
    font-size: 31px;
    line-height: 120%;
    color: var(--bg-surface);
    margin: 0;
}

/* ===========================
   Right Side (Form)
   =========================== */
.signup-right {
    flex: 1;
    padding: 30px 76px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-form-container {
    max-width: 574px;
    width: 100%;
}

/* Form Header */
.signup-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.signup-back-btn {
    width: 41.32px;
    height: 41.32px;
    background: #F5F5F5;
    border: 1.15px solid #B6B7CE;
    border-radius: 36.12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.signup-back-btn:hover {
    background: var(--primary-blue);
}

.signup-back-btn:hover svg path {
    stroke: var(--bg-surface);
}

.signup-form-title {
    font-weight: 500;
    font-size: 32px;
    line-height: 48px;
    color: #333333;
    margin: 0;
    flex: 1;
}

/* User Type Tabs */
.signup-tabs {
    display: flex;
    padding: 5.06px 7.59px;
    background: var(--tab-bg);
    border-radius: 63.23px;
    margin-bottom: 48px;
    gap: 0;
}

.signup-tab-btn {
    flex: 1;
    padding: 10.12px 15.17px;
    background: transparent;
    border: none;
    border-radius: 632.26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16.44px;
    line-height: 120%;
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.3s ease;
}

.signup-tab-btn.active {
    background: var(--primary-blue);
    color: #F2F2F2;
    box-shadow: 0px 5.06px 22.76px rgba(0, 0, 0, 0.17);
}

/* ===========================
   Form Styles
   =========================== */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Two Column Row */
.signup-row-2 {
    display: flex;
    gap: 32px;
    width: 100%;
}

.signup-row-2 .signup-field {
    flex: 1;
}

/* Form Field */
.signup-field {
    position: relative;
}

.signup-label {
    position: absolute;
    top: -24.5px;
    left: 9px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15.75px;
    line-height: 21px;
    color: rgba(0, 0, 0, 0.88);
}

/* Input Wrapper */
.signup-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px;
    height: 56px;
    border: 1.75px solid rgba(0, 0, 0, 0.12);
    border-radius: 19.6px;
    gap: 9px;
    transition: all 0.3s ease;
}

.signup-input-wrapper.success {
    border-color: #22B814;
}

.signup-input-wrapper.error {
    border-color: #DA0004;
}

/* Input */
.signup-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.88);
    background: transparent;
}

.signup-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-size: 16px;
}

/* Avatar in Input */
.signup-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.signup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.signup-input-with-avatar {
    padding-left: 0;
}

/* Password Toggle Button */
.signup-password-toggle {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-password-toggle svg path,
.signup-password-toggle svg circle {
    transition: stroke 0.3s ease;
}

.signup-input-wrapper.error .signup-password-toggle svg path,
.signup-input-wrapper.error .signup-password-toggle svg circle {
    stroke: #DA0004;
}

.signup-input-wrapper.success .signup-password-toggle svg path,
.signup-input-wrapper.success .signup-password-toggle svg circle {
    stroke: #22B814;
}

/* ===========================
   Checkbox Group
   =========================== */
.signup-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.signup-checkbox {
    width: 24px;
    height: 24px;
    border: 1.5px solid rgba(0, 0, 0, 0.32);
    border-radius: 8.4px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.signup-checkbox:checked {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.signup-checkbox-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15.75px;
    line-height: 21px;
    color: var(--primary-blue);
    cursor: pointer;
    user-select: none;
}

.signup-link-green {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 500;
}

.signup-link-green:hover {
    text-decoration: underline;
}

/* ===========================
   Form Actions
   =========================== */
.signup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    align-items: flex-start;
}

.signup-submit-btn {
    width: 100%;
    height: 56px;
    background: var(--primary-blue);
    border: none;
    border-radius: 19.6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--bg-surface);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-submit-btn:hover {
    background: #0a0f3d;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(18, 23, 96, 0.3);
}

.signup-signin-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #333333;
    margin: 0;
    padding: 2px;
}

.signup-signin-link {
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: 500;
}

.signup-signin-link:hover {
    color: var(--primary-green);
}

/* ===========================
   Focus States
   =========================== */
.signup-input:focus {
    outline: none;
}

.signup-input-wrapper:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(18, 23, 96, 0.1);
}

.signup-input-wrapper.success:focus-within {
    border-color: #22B814;
    box-shadow: 0 0 0 3px rgba(34, 184, 20, 0.1);
}

.signup-input-wrapper.error:focus-within {
    border-color: #DA0004;
    box-shadow: 0 0 0 3px rgba(218, 0, 4, 0.1);
}

/* ===========================
   Animations
   =========================== */
@keyframes fadeInSignup {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signup-form-container {
    animation: fadeInSignup 0.6s ease;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1199px) {
    .signup-container {
        height: auto;
        flex-direction: column;
    }

    .signup-left {
        flex: 0 0 400px;
        padding: 40px 60px;
    }

    .signup-brand-title {
        font-size: 42px;
        line-height: 52px;
    }

    .signup-brand-tagline {
        font-size: 24px;
    }

    .signup-form-container {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 991px) {
    .signup-nav {
        display: none;
    }

    .signup-left {
        flex: 0 0 300px;
        padding: 30px 40px;
    }

    .signup-brand-title {
        font-size: 36px;
        line-height: 44px;
    }

    .signup-brand-tagline {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .signup-header {
        padding: 16px 20px;
    }

    .signup-header-auth {
        gap: 8px;
    }

    /* .signup-main {
        height: calc(100vh - 72px);
    } */

    .signup-container {
        max-height: none;
    }

    .signup-left {
        display: none;
    }

    .signup-right {
        padding: 32px 20px;
        overflow-y: auto;
    }

    .signup-form-container {
        width: 100%;
    }

    .signup-form-title {
        font-size: 28px;
        line-height: 36px;
    }

    .signup-tabs {
        gap: 4px;
    }

    .signup-tab-btn {
        font-size: 15px;
        padding: 9px 14px;
    }

    .signup-row-2 {
        flex-direction: column;
        gap: 50px;
    }

    .signup-input-wrapper {
        height: 52px;
        padding: 12px;
    }

    .signup-input {
        font-size: 18px;
    }

    .signup-input::placeholder {
        font-size: 18px;
    }

    .signup-submit-btn {
        height: 52px;
        font-size: 18px;
    }

    .signup-actions {
        width: 100%;
        max-width: none;
    }

    .signup-checkbox-label {
        font-size: 14px;
        line-height: 19px;
    }

    .signup-checkbox {
        width: 20px;
        height: 20px;
    }
}

/* ===========================
   Accessibility
   =========================== */
.signup-input:focus-visible,
.signup-checkbox:focus-visible,
.signup-submit-btn:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .signup-form-container,
    .signup-tab-btn,
    .signup-submit-btn {
        animation: none !important;
        transition: none !important;
    }
}


/* ===========================
   Events Page Header Styles
   =========================== */

/* Page Header Container */
.events-page-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* ===========================
   Breadcrumb Section
   =========================== */
.breadcrumb-container {
    display: flex;
    align-items: center;
    padding: 0;
    width: fit-content;
    height: 48px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 16.8px;
    overflow: hidden;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    gap: 8px;
    height: 48px;
    border-radius: 16.8px;
    cursor: pointer;
    transition: background 0.3s ease;
    text-decoration: none;
}

.breadcrumb-item:hover {
    background: rgba(18, 23, 96, 0.05);
}

/* Home Icon Button */
.breadcrumb-home {
    width: 48px;
    padding: 12px;
}

.breadcrumb-icon {
    width: 24px;
    height: 24px;
    color: rgba(0, 0, 0, 0.88);
}

/* Arrow Separator */
.breadcrumb-arrow {
    height: 24px;
    color: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

/* Breadcrumb Text */
.breadcrumb-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.88);
    white-space: nowrap;
}

/* ===========================
   Title & Counter Section
   =========================== */
.page-title-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
    gap: 1px;
    width: 100%;
    height: 42px;
}

.title-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: space-between;
}


.events-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 16px;
}

.counter-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 120%;
    color: var(--primary-green);
}

.counter-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 120%;
    color: rgba(0, 0, 0, 0.4);
}

/* ===========================
   Filters Section
   =========================== */
.filters-container {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: fit-content;
    height: 40px;
}

.filter-button {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    gap: 7px;
    height: 40px;
    background: transparent;
    border: 1.25px solid var(--primary-blue);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.filter-button:hover {
    background: rgba(18, 23, 96, 0.05);
    transform: translateY(-2px);
}

.filter-button:active {
    transform: translateY(0);
}

.filter-button.active {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

.filter-button.active .filter-text {
    color: var(--bg-surface);
}

.filter-button.active .filter-arrow {
    color: var(--bg-surface);
}

.filter-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: var(--primary-blue);
    white-space: nowrap;
}

.filter-arrow {
    width: 20px;
    height: 20px;
    color: rgba(0, 0, 0, 0.88);
    transition: transform 0.3s ease;
}

.filter-button.open .filter-arrow {
    transform: rotate(180deg);
}

/* ===========================
   Responsive Design
   =========================== */

/* Tablet */
@media (max-width: 991px) {
    .page-title {
        font-size: 28px;
        line-height: 36px;
    }

    .filters-container {
        flex-wrap: wrap;
        height: auto;
    }

    .breadcrumb-text {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .events-page-header {
        gap: 16px;
    }

    .breadcrumb-container {
        justify-content: flex-start;
    }

    .page-title {
        font-size: 24px;
        line-height: 32px;
    }

    .filters-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .filters-container::-webkit-scrollbar {
        display: none;
    }

    .filter-button {
        flex-shrink: 0;
    }

    .counter-number,
    .counter-label {
        font-size: 12px;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .page-title {
        font-size: 20px;
        line-height: 28px;
    }

    .filter-button {
        padding: 8px 16px;
        height: 36px;
    }

    .filter-text {
        font-size: 14px;
    }

    .breadcrumb-item {
        padding: 10px;
    }

    .breadcrumb-text {
        font-size: 14px;
    }
}

/* ===========================
   Utility Classes
   =========================== */
.no-scroll {
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===========================
   Event Details Page Styles
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
    color: var(--primary-blue);
    line-height: 1.6;
}

/* Header Styles */
.main-header {
    background: var(--bg-surface);
    box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 24px 0;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-logo img {
    width: 36px;
    height: 40px;
}

.logo-text {
    font-weight: 700;
    font-size: 22.77px;
    color: var(--primary-blue);
}

.header-nav {
    display: flex;
    gap: 8px;
    flex: 1;
}

.nav-pill {
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #1E1E1E;
    font-size: 16px;
    transition: all 0.3s ease;
}

.nav-pill.active {
    background: #EAEBFB;
    color: #040951;
}

.nav-pill:hover {
    background: rgba(234, 235, 251, 0.5);
}

.header-auth {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-switcher {
    font-size: 16px;
    color: var(--primary-blue);
    cursor: pointer;
}

.theme-toggle {
    cursor: pointer;
}

.toggle-track {
    width: 48px;
    height: 32px;
    background: var(--primary-green);
    border-radius: 37px;
    position: relative;
    transition: all 0.3s ease;
}

.toggle-thumb {
    width: 32px;
    height: 32px;
    background: var(--bg-light);
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-signup {
    padding: 8px 16px;
    border: 1px solid var(--primary-blue);
    border-radius: 11.2px;
    background: transparent;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.btn-signup:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

/* Event Details Page */
.event-details-page {
    padding: 24px 0 64px;
}

/* Breadcrumb */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 16.8px;
    width: fit-content;
    margin-bottom: 24px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.88);
    font-size: 18px;
    transition: all 0.3s ease;
}

.breadcrumb-item:hover {
    background: rgba(18, 23, 96, 0.05);
    border-radius: 8px;
}

.breadcrumb-item.active {
    font-weight: 500;
}

.breadcrumb-home {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-icon {
    width: 24px;
    height: 24px;
}

.breadcrumb-arrow {
    height: 24px;
    width: 24px;
}

/* Page Title */
.page-title-section {
    margin-bottom: 15px;
}

.page-title {
    font-weight: 700;
    font-size: 26px;
    line-height: 40px;
    color: var(--primary-blue);
}

/* Main Content Layout */
.event-details-content {
    display: grid;
    grid-template-columns: 792px 384px;
    gap: 24px;
}

/* Cards Base Style */
.event-info-card,
.action-buttons-card,
.stages-card,
.guidelines-card,
.dates-card,
.contact-card,
.attachments-card,
.related-events-card,
.user-profile-card,
.countdown-card,
.event-stats-card,
.eligibility-card,
.price-card {
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Event Info Card */
.event-header {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.event-logo {
    width: 94px;
    height: 94px;
    background: #E7E8EF;
    border-radius: 8px;
    overflow: hidden;
}

.event-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-meta {
    flex: 1;
}

.event-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.event-location-text {
    font-size: 13px;
    line-height: 16px;
    color: var(--primary-blue);
}

.event-quick-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.info-icon {
    width: 20px;
    height: 20px;
    stroke: var(--primary-blue);
}

.info-item span {
    font-size: 16px;
    color: var(--primary-blue);
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.event-tag {
    padding: 6px 12px;
    border: 0.75px solid var(--primary-blue);
    border-radius: 8.4px;
    font-size: 9px;
    color: var(--primary-blue);
}

/* Action Buttons */
.action-buttons-card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.action-btn {
    padding: 10px 20px;
    border: 1.25px solid var(--primary-blue);
    border-radius: 14px;
    background: transparent;
    color: var(--primary-blue);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

/* Section Title */
.section-title {
    font-weight: 700;
    font-size: 31px;
    line-height: 24px;
    color: var(--primary-blue);
    margin-bottom: 24px;
}

/* Stages Card */
.stages-container {
    display: flex;
    gap: 24px;
}

.timeline-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.timeline-date {
    text-align: center;
}

.date-top {
    font-weight: 700;
    font-size: 25px;
    line-height: 30px;
    color: var(--primary-blue);
    background: #DBDCE7;
    padding: 4px;
    border-radius: 8px 8px 0 0;
    width: 80px;
}
body.dark-mode .signup-password-toggle i{
    color:#fff;
}
body.dark-mode .carousel-gradient{
    background: transparent;
}
body.dark-mode .payqlick-header .navbar-toggler{
    background: #fff;
}
body.dark-mode .date-top{
    background: #1a1d29;
}
body.dark-mode .date-bottom{
    background: #0f111b;
}
body.dark-mode .date-icon{
    background: #fff;
}
body.dark-mode .banner-item.banner-main .banner-item-title,body.dark-mode .banner-item.banner-main .banner-item-text{
      color: #1e2130;
}
body.dark-mode .banner-item.banner-main:hover .banner-item-title,body.dark-mode .banner-item.banner-main:hover .banner-item-text{
      color: #1e2130;
}
body.dark-mode .banner-small:hover .banner-item-title,body.dark-mode .banner-small:hover .banner-item-text{
        color: #1e2130;
}
body.dark-mode .banner-item:first-child .banner-icon-wrapper  > .icon-circle
{
    background: #e7e8ef !important;
}

body.dark-mode  .wrapper .btn-primary{
    background:#3DAE8C;
    border-color:#3DAE8C;
}
body.dark-mode .register-btn {
    color: #fff !important;
}

.date-bottom {
    font-size: 13px;
    line-height: 25px;
    color: var(--primary-blue);
    background: #E7E8EF;
    padding: 4px;
    border-radius: 0 0 8px 8px;
    width: 80px;
}

.timeline-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.timeline-dot {
    width: 13px;
    height: 13px;
    border: 1px solid var(--primary-blue);
    border-radius: 50%;
    background: var(--bg-surface);
}

.timeline-dot.active {
    background: var(--primary-blue);
}

.timeline-line {
    width: 1px;
    flex: 1;
    background: var(--primary-blue);
    margin: 4px 0;
}

.stages-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.stage-item {
    padding: 16px 0px;
}

.stage-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.stage-description {
    font-size: 16px;
    line-height: 19px;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.stage-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-row {
    display: flex;
    gap: 8px;
}

.meta-label {
    font-size: 13px;
    color: #B6B7CE;
}

.meta-value {
    font-size: 13px;
    color: var(--primary-blue);
}

/* Guidelines Card */
.guidelines-content p {
    font-size: 16px;
    line-height: 23px;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

/* Dates Card */
.dates-grid {
    display: flex;
    gap: 24px;
}

.date-item {
    display: flex;
    gap: 16px;
    align-items: center;
}

.date-icon {
    width: 47px;
    height: 47px;
    background: #E7E8EF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--primary-blue);
}

.date-label {
    font-size: 13px;
    color: #B6B7CE;
    margin-bottom: 4px;
}

.date-value {
    font-size: 16px;
    color: var(--primary-blue);
}

/* Contact Card */
.contacts-grid {
    display: flex;
    gap: 24px;
}

.contact-item {
    display: flex;
    gap: 16px;
}

.contact-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary-blue);
}

.contact-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-blue);
    margin-bottom: 4px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-details span {
    font-size: 13px;
    color: var(--primary-blue);
}

/* Attachments Card */
.attachment-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.attachment-icon {
    width: 47px;
    height: 47px;
    background: #E7E8EF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--primary-blue);
}

.attachment-info {
    flex: 1;
}

.attachment-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-blue);
}

.download-btn {
    padding: 10px 20px;
    border: 1.25px solid var(--primary-blue);
    border-radius: 14px;
    background: transparent;
    color: var(--primary-blue);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
}

/* Related Events */
.related-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.related-event-card {
    border: 1px solid #DBDCE7;
    border-radius: 13.509px;
    padding: 16px;
}

.related-event-content {
    margin-bottom: 8px;
}

.related-event-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.related-event-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.related-event-date svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary-blue);
}

.related-event-date span {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-blue);
}

.related-event-divider {
    width: 100%;
    height: 1px;
    background: var(--divider-color);
    margin: 8px 0;
}

.related-event-location {
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E7E8EF;
    object-fit: cover;
}

.location-info {
    flex: 1;
}

.location-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: var(--primary-blue);
}

.location-address {
    font-size: 10px;
    line-height: 12px;
    color: #5E5E5E;
}

/* Right Column */
.right-column {
    height: fit-content;
    position: sticky;
    top: 120px;
}

/* User Profile Card */
.user-profile-card {
    text-align: center;
}

.user-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #E7E8EF;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary-blue);
}

.icon-btn:hover {
    background: #E7E8EF;
}

/* Countdown Timer */
.countdown-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.countdown-item {
    text-align: center;
    background: #E7E8EF;
    border-radius: 16px;
    padding: 8px;
}

.countdown-value {
    font-weight: 700;
    font-size: 39px;
    line-height: 47px;
    color: var(--primary-blue);
}

.countdown-label {
    font-size: 13px;
    color: #B6B7CE;
}

/* Event Stats */
.event-stats-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-item {
    display: flex;
    gap: 16px;
    align-items: center;
}

.stat-icon {
    width: 47px;
    height: 47px;
    background: #E7E8EF;
    border-radius: 4px;
    padding: 12px;
    stroke: var(--primary-blue);
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 13px;
    color: #B6B7CE;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 16px;
    color: var(--primary-blue);
}

.stat-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 12px;
    border: 0.75px solid var(--primary-blue);
    border-radius: 8.4px;
    font-size: 9px;
    color: var(--primary-blue);
}

/* Eligibility Card */
.eligibility-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.eligibility-item {
    font-size: 16px;
    color: var(--primary-blue);
}

.eligibility-separator {
    color: var(--primary-blue);
}

/* Pricing Section */
.pricing-section {
    margin-top: 24px;
}

.pricing-tabs {
    display: flex;
    background: var(--tab-bg);
    border-radius: 63.23px;
    padding: 5px 8px;
    margin-bottom: 35px;
    width:400px;
    margin-right: auto;
    margin-left: auto;
}

.pricing-tab {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: transparent;
    border-radius: 632px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-tab.active {
    background: var(--primary-green);
    color: #F2F2F2;
    box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.17);
}

/* Price Card */
.price-card {
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 24px;
    position: relative;
    cursor: pointer;
}

.price-card:hover{
    background: var(--primary-blue);
    color: var(--bg-surface);
    box-shadow: 0px 42px 34px rgba(82, 67, 194, 0.3);
}

.price-card:hover div{
   color:#fff;
}

.price-card:hover .price-features i{
     background: var(--primary-green);
}

.price-card:hover .price-btn{
    background: var(--primary-green) !important;
    color:#fff !important;
}

.price-card.featured {
    background: var(--primary-blue);
    color: var(--bg-surface);
    box-shadow: 0px 42px 34px rgba(82, 67, 194, 0.3);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: #E2F3EE;
    color: var(--primary-green);
    padding: 4px 12px;
    border-radius: 13.5px;
    font-size: 10px;
    font-weight: 400;
}

.price-header {
    margin-bottom: 24px;
}

.price-amount {
    font-weight: 700;
    font-size: 39px;
    line-height: 47px;
    color: var(--primary-green);
    margin-bottom: 8px;
}

.price-card.featured .price-amount {
    color: var(--bg-surface);
}

.price-label {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #101556;
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-card.featured .price-label {
    color: #E7E8EF;
}

.ieee-logo {
    width: 47px;
    height: 47px;
    background: var(--bg-surface);
    border-radius: 50%;
}

.price-features {
    list-style: none;
    margin-bottom: 24px;
    padding-left:0;
}

.price-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #B6B7CE;
}

.price-card.featured .price-features li {
    color: #E7E8EF;
}

.price-features i {
    font-size: 12px;
    background: var(--primary-blue);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}
body.dark-mode .item-help-dropdown svg *,body.dark-mode .item-help-dropdown svg{
    fill:#fff;
}
body.dark-mode .price-features i{ 
      color: #4ecfab;  
}
body.dark-mode .price-card:hover .price-features i{
    color:#fff !important;
}
body.dark-mode #togglePassword svg{
    stroke:#fff;
}
body.dark-mode .contact-container .submit-button,body.dark-mode .btn.btn-signin,body.dark-mode .signup-submit-btn{
      background: #4ecfab;  
      color:#fff;
}
.price-btn {
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 16.8px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.price-card:not(.featured) .price-btn {
    background: rgba(61, 174, 140, 0.08);
    color: var(--primary-green);
}

.price-card.featured .price-btn {
    background: var(--primary-green);
    color: var(--bg-surface);
}

.price-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


@media (max-width: 991px) {
    .header-nav {
        display: none;
    }

    .stages-container {
    }

    .dates-grid,
    .contacts-grid {
        flex-direction: column;
    }

}

@media (max-width: 767px) {
    .info-item span{
        width:300px;
    }
    .breadcrumb-nav {
        overflow-x: auto;
    }

    .page-title {
        font-size: 24px;
    }

    .event-title {
        font-size: 20px;
    }

    .action-buttons-card {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
    }

    .countdown-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-events-grid {
        grid-template-columns: 1fr;
    }


    .pricing-tabs {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .event-header {
        flex-direction: column;
        text-align: center;
    }

    .countdown-value {
        font-size: 28px;
    }
}

@media (min-width: 990px) {
    .price-card{
        width:30%;
    }

}

.pricing-cards-container{
    display: flex;
    gap: 24px;
    justify-content: center;
    width: -webkit-fill-available;
}


/* ===== CONTENT GRID ===== */
.content-grid {
    display: grid;
    grid-template-columns: 830px 400px;
    gap: 24px;
}

/* ===== LEFT COLUMN - FORMS ===== */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.form-card {
    background: var(--bg-surface);
    border-radius: 20px;
    padding: 24px;
}

.section-title {
    font-size: 31px;
    font-weight: 700;
    line-height: 120%;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.form-group-grow {
    flex: 1;
}

.form-group-full {
    width: 100%;
}

.form-group label {
    font-size: 15.75px;
    font-weight: 400;
    line-height: 21px;
    color: var(--primary-blue);
}

.form-group input::placeholder{
    font-size: 16px;
}
.form-group input,
.form-group select {
    width:100%;
    padding: 14px;
    border: 1.75px solid var(--border-color);
    border-radius: var(--radius-xl);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--light-blue-active);
    background: var(--bg-surface);
    outline: none;
    transition: var(--transition);
}

.form-group input:focus {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.75px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 14px;
    gap: 9px;
    transition: var(--transition);
}

.input-wrapper:focus-within {
    border-color: var(--primary-blue);
}

.input-wrapper input {
    border: none;
    padding: 0;
    flex: 1;
}

.input-wrapper i.fa-chevron-down {
    font-size: 16px;
    color: var(--primary-blue);
}

.flag-icon {
    font-size: 20px;
}

.phone-input {
    padding: 0;
}

.phone-prefix {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-right: 1px solid var(--light-blue-active);
}

.phone-input input {
    padding: 14px;
}

.address-input {
    justify-content: space-between;
}

.map-pin-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
}

.map-pin-btn:hover {
    background: var(--primary-blue);
    color: white;
}

/* Gender Chips */
.gender-group {
    width: 225px;
}

.gender-chips {
    display: flex;
    gap: 32px;
}

.chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border: 1.25px solid var(--primary-blue);
    border-radius: 14px;
    background: transparent;
    color: var(--primary-blue);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.chip.active {
    background: var(--primary-blue);
    color: white;
}

.chip:hover {
    background: var(--primary-blue);
    color: white;
}

.chip i {
    font-size: 16px;
}

/* Counter */
.counter-group {
    width: 100%;
}

.counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.33px;
    gap: 15px;
    width: 121.67px;
    height: 40px;
    background: var(--primary-blue);
    border-radius: 832.5px;
}

.counter-btn {
    width: 33.33px;
    height: 33.33px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.counter-btn:hover {
    transform: scale(1.1);
}

.counter-btn i {
    font-size: 12px;
    color: var(--primary-blue);
}

.counter-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 120%;
    color: white;
}

/* Field Note */
.position-relative {
    position: relative;
}

.field-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 120%;
    color: var(--text-muted);
}

.field-note i {
    font-size: 16px;
    color: var(--primary-blue);
}

/* ===== RIGHT COLUMN - PAYMENT SUMMARY ===== */
.right-column {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.payment-card {
    background: var(--bg-surface);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.divider {
    height: 1px;
    background: var(--divider-color);
}

/* Event Details */
.event-details {
    display: flex;
    gap: 16px;
}

.event-logo {
    width: 116px;
    height: 117px;
    background: var(--light-blue);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.event-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-name {
    font-size: 25px;
    font-weight: 700;
    line-height: 120%;
    color: var(--primary-blue);
}

.event-org {
    font-size: 13px;
    font-weight: 700;
    line-height: 120%;
    color: var(--primary-blue);
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 120%;
    color: var(--primary-blue);
}

.event-meta i {
    font-size: 16px;
}

/* Pricing Details */
.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: var(--primary-blue);
}

.pricing-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pricing-value .amount {
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    color: var(--primary-blue);
}

.pricing-value .currency {
    font-size: 13px;
    font-weight: 400;
    line-height: 120%;
    color: var(--primary-blue);
}

.total-row .pricing-label {
    font-weight: 700;
}

.total-row .pricing-value .amount {
    font-weight: 700;
}

.spacing {
    height: 16px;
}

/* Coupon Input */
.coupon-input {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.75px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 5px;
    gap: 9px;
}

.coupon-input input {
    border: none;
    padding: 0;
    flex: 1;
    font-size: 17px;
    color: var(--light-blue-active);
    outline: none;
}

.apply-btn {
    padding: 8px;
    background: var(--primary-green);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
}

.apply-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Pay Button */
.btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 16.8px;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}

.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18, 23, 96, 0.3);
}

.btn-pay i {
    font-size: 16px;
}

/* Disclaimer */
.disclaimer {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 120%;
    color: var(--text-muted);
}

.disclaimer i {
    font-size: 16px;
    color: var(--primary-blue);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1199px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .right-column {
        position: static;
    }
}

@media (max-width: 991px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 0 16px;
    }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        width: 100% !important;
    }
}


/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-card,
.payment-card {
    animation: fadeIn 0.6s ease-out;
}

.form-card:nth-child(2) {
    animation-delay: 0.2s;
}


/* ===== GLOBAL STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.5;
    min-height: 100vh;
}

/* ===== CONTAINER ===== */
/* .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
} */

/* ===== BREADCRUMBS ===== */
.breadcrumbs {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    width: fit-content;
}

.breadcrumb-item {
    padding: 12px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.88);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.breadcrumb-item:hover {
    background: rgba(234, 235, 251, 0.5);
}

.breadcrumb-item.active {
    color: var(--primary-blue);
    font-weight: 500;
}

.breadcrumb-item i {
    font-size: 20px;
}

.breadcrumb-arrow {
    color: rgba(0, 0, 0, 0.4);
    padding: 0 8px;
}



/* ===== FAQ SECTION ===== */
.faq-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px;
    gap: 48px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

/* ===== TEXT CONTENT HEADING ===== */
.text-content-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 624px;
    text-align: center;
}

.heading {
    font-size: 24px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--primary-blue);
}

.subheading {
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    color: var(--text-secondary);
}

.subheading strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* ===== PILL TABS ===== */
.pill-tabs {
    display: flex;
    align-items: center;
    padding: 5.06px 7.59px;
    background: var(--tab-bg);
    border-radius: var(--radius-full);
    gap: 0;
}

.tab-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10.12px 15.17px;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 16.44px;
    font-weight: 700;
    line-height: 120%;
    color: var(--primary-blue);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: var(--transition);
    white-space: nowrap;
    min-width: 190.94px;
    height: 40.23px;
}

.tab-btn:hover {
    background: rgba(61, 174, 140, 0.1);
}

.tab-btn.active {
    background: var(--primary-green);
    color: var(--gray-50);
    box-shadow: 0px 5.06px 22.76px rgba(0, 0, 0, 0.17);
}

/* ===== FAQ CONTENT ===== */
.faq-content {
    display: none;
    width: 100%;
    max-width: 640px;
    animation: fadeIn 0.4s ease-out;
}

.faq-content.active {
    display: block;
}

/* ===== ACCORDION ===== */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ===== ACCORDION ITEM ===== */
.accordion-item {
    display: flex;
    flex-direction: column;
    padding: 0px;
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
}

/* .accordion-item:hover {
    border-color: var(--primary-green);
} */

.accordion-item.active {
    background: var(--bg-surface);
    border-color: #eeeeeee0;
    padding-bottom: 16px;
}

/* ===== ACCORDION TITLE ===== */
.accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding:16px;
    width: 100%;
    color:#1E1E1E;
}

.accordion-title .title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: #1E1E1E;
}

.accordion-icon {
    font-size: 16px;
    color: #1E1E1E;
    transition: var(--transition);
}

/* ===== ACCORDION CONTENT ===== */
.accordion-content {
    display: none;
    margin-top:0px;
    padding:0 16px;
    animation: slideDown 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    display: block;
     max-height: 500px;
}

.accordion-content .body {
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: var(--text-dark);
    margin: 0;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .faq-section {
        padding: 48px 32px;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 24px 16px;
    }

    .faq-section {
        padding: 32px 16px;
    }

    .pill-tabs {
        flex-direction: row;
        width: 100%;
        padding: 8px;
        gap: 8px;
    }

    .tab-btn {
        width: 100%;
    }

    .text-content-heading {
        max-width: 100%;
    }

    .heading {
        font-size: 20px;
    }

    .subheading {
        font-size: 16px;
    }
}

@media (max-width: 480px) {


    .accordion-item {
        padding: 12px;
    }

    .accordion-title .title {
        font-size: 14px;
    }

    .accordion-content .body {
        font-size: 14px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .pill-tabs {
        display: none;
    }

    .accordion-item {
        page-break-inside: avoid;
    }

    .accordion-content {
        display: block !important;
    }
}

.accordion-item:not(:first-of-type){
    border-top:1px solid #D9D9D9;
}
.accordion-item.active:not(:first-of-type){
    border-top:1px solid #eeeeeee0;
}


/* ===== POLICY CONTENT ===== */
.policy-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ===== POLICY SECTION ===== */
.policy-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.bullet-point {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-green);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}


.section-text {
    font-size: 18px;
    text-align: justify;
    font-weight: 400;
    line-height: 150%;
    color: var(--text-secondary);
    margin: 0;
}

/* .section-text br {
    display: block;
    content: "";
    margin-top: 4px;
} */

/* ===== SUBSECTION ===== */
.subsection {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-left: 80px;
    margin-top: var(--spacing-sm);
}

.subsection-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.sub-bullet-point {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-green);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.subsection-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 120%;
    color: var(--text-secondary);
}

.subsection-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.policy-section {
    animation: fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.policy-section:nth-child(1) { animation-delay: 0.1s; }
.policy-section:nth-child(2) { animation-delay: 0.2s; }
.policy-section:nth-child(3) { animation-delay: 0.3s; }
.policy-section:nth-child(4) { animation-delay: 0.4s; }
.policy-section:nth-child(5) { animation-delay: 0.5s; }
.policy-section:nth-child(6) { animation-delay: 0.6s; }
.policy-section:nth-child(7) { animation-delay: 0.7s; }
.policy-section:nth-child(8) { animation-delay: 0.8s; }
.policy-section:nth-child(9) { animation-delay: 0.9s; }
.policy-section:nth-child(10) { animation-delay: 1s; }
.policy-section:nth-child(11) { animation-delay: 1.1s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .container {
        padding: 32px 24px;
    }

    .subsection {
        padding-left: 40px;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 24px 16px;
    }

    .section-title {
        font-size: 20px;
    }

    .section-text {
        font-size: 16px;
    }

    .subsection {
        padding-left: 24px;
    }

    .subsection-title {
        font-size: 18px;
    }

    .subsection-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .breadcrumbs {
        overflow-x: auto;
        width: 100%;
    }

    .section-title {
        font-size: 18px;
    }

    .section-text {
        font-size: 14px;
    }

    .bullet-point,
    .sub-bullet-point {
        width: 16px;
        height: 16px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    body {
        background: white;
    }

    .breadcrumbs {
        display: none;
    }

    .policy-section {
        page-break-inside: avoid;
    }

}

/* ===== SCROLL BEHAVIOR ===== */
html {
    scroll-behavior: smooth;
}

/* ===== SELECTION ===== */
::selection {
    background: var(--primary-green);
    color: white;
}

::-moz-selection {
    background: var(--primary-green);
    color: white;
}


/* ===== GLOBAL STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== PROFILE PAGE STYLES ===== */
.profile-page {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
    color: var(--text-secondary);
    line-height: 1.5;
    min-height: 100vh;
}

/* ===== PROFILE CONTAINER ===== */
.profile-page .profile-container {
    display: flex;
    gap: var(--spacing-md);
    margin: 0 auto;
    padding:var(--spacing-lg) 0;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.profile-page .sidebar {
    width: 282px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0px 14px 42px rgba(8, 15, 52, 0.06);
    padding: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 64px);
    position: sticky;
    top: var(--spacing-lg);
}

.profile-page .sidebar-top {
    flex: 1;
}

.profile-page .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.profile-page .profile-container .nav-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 7px;
    text-decoration: none;
    color: var(--primary-blue);
    font-size: 16px;
    font-weight: 400;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.profile-page .profile-container .nav-item i {
    width: 20px;
    height: 20px;
    font-size: 16px;
}

.profile-page .profile-container .nav-item:hover {
    background: rgba(234, 235, 251, 0.5);
    border-radius: var(--radius-md);
}

.profile-page .profile-container .nav-item.active {
    color: var(--primary-green);
    border-left-color: var(--primary-green);
    background: transparent;
}

.profile-page .profile-container .nav-item.active i {
    color: var(--primary-green);
}

/* ===== SIDEBAR FOOTER ===== */
.profile-page .sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--gray-20);
    margin: 0 var(--spacing-md);
}

.profile-page .user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.profile-page .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 77px;
    object-fit: cover;
}

.profile-page .user-info {
    flex: 1;
}

.profile-page .user-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-80);
    margin-bottom: 2px;
}

.profile-page .user-role {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-60);
}

.profile-page .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--error-color);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 123px;
}

.profile-page .btn-logout:hover {
    background: rgba(215, 0, 0, 0.1);
}

.profile-page .btn-logout i {
    font-size: 18px;
}

/* ===== MAIN CONTENT ===== */
.profile-page .main-content {
    flex: 1;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* ===== TABS HEADER ===== */
.profile-page .tabs-header {
    display: flex;
    gap: 0;
    border-bottom: 4px solid #DBDCE7;
    padding: 0;
    margin-bottom: var(--spacing-lg);
}

.profile-page .profile-container .tab-btn {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    box-shadow: none;
    white-space: nowrap;
}

.profile-page .profile-container .tab-btn:hover {
    font-weight: 500;
}

.profile-page .profile-container .tab-btn.active {
    font-weight: 700;
}

/* ===== TAB CONTENT ===== */
.profile-page .profile-container .tab-content {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.profile-page .profile-container .tab-content.active {
    display: block;
}

/* ===== PROFILE CONTENT ===== */
.profile-page .profile-container .profile-content {
    display: flex;
    gap: 84px;
}

/* ===== PROFILE PICTURE ===== */
.profile-page .profile-container .profile-picture {
    width: 120px;
    height: 117px;
    position: relative;
    flex-shrink: 0;
}

.profile-page .profile-container .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    object-fit: cover;
}

.profile-page .profile-container .btn-edit-photo {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    border: 2px solid var(--bg-surface);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.profile-page .btn-edit-photo:hover {
    transform: scale(1.1);
}

.profile-page .btn-edit-photo i {
    color: white;
    font-size: 14px;
}

/* ===== PROFILE FORM ===== */
.profile-page .profile-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.profile-page .form-row {
    display: flex;
    gap: var(--spacing-lg);
}

.profile-page .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-page .form-group label {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.88);
}

.profile-page .form-group input,
.profile-page .form-group select {
    padding: 10px;
    border: 1.25px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.88);
    background: var(--bg-surface);
    transition: var(--transition);
}

.profile-page .form-group input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.profile-page .form-group input:focus,
.profile-page .form-group select:focus {
    outline: none;
    border-color: var(--primary-green);
}

/* ===== GENDER CHIPS ===== */
.profile-page .gender-chips {
    display: flex;
    gap: var(--spacing-lg);
}

.profile-page .chip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border: 1.25px solid var(--text-gray);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
    cursor: pointer;
    transition: var(--transition);
}

.profile-page .chip-btn i {
    font-size: 18px;
}

.profile-page .chip-btn:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.profile-page .chip-btn.active {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: white;
}

/* ===== DATE SELECT ===== */
.profile-page .date-select {
    display: flex;
    gap: var(--spacing-sm);
}

.profile-page .date-select select {
    flex: 1;
}

.profile-page .select-month {
    max-width: 146px;
}

.profile-page .select-day,
.profile-page .select-year {
    max-width: 84px;
}

/* ===== SELECT WRAPPER ===== */
.profile-page .select-wrapper {
    position: relative;
}

.profile-page .select-wrapper select {
    width: 100%;
    appearance: none;
    cursor: pointer;
}

.profile-page .select-wrapper i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    pointer-events: none;
}

.profile-page .select-display {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px;
    border: 1.25px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    height: 40px;
}

.profile-page .select-display:hover {
    border-color: var(--primary-green);
}

.profile-page .select-display .flag {
    font-size: 20px;
}

.profile-page .select-display .country-name {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue);
}

.profile-page .select-display .country-name.placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.profile-page .select-display i {
    color: var(--primary-blue);
    font-size: 14px;
}

/* ===== SECURITY CONTENT ===== */
.profile-page .security-content {
    padding: 0;
    max-width: 600px;
}

.profile-page .security-content h3 {
    font-size: 25px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-sm);
}

.profile-page .security-content p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.profile-page .security-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 500px;
}

.profile-page .btn-save {
    padding: 12px 24px;
    background: var(--primary-green);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: fit-content;
}

.profile-page .btn-save:hover {
    background: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18, 23, 96, 0.3);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .profile-page .profile-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 991px) {
    .profile-page .profile-container {
        flex-direction: column;
    }

    .profile-page .sidebar {
        width: 100%;
        position: static;
    }

    .profile-page .profile-container .sidebar-nav {
        flex-direction: column;
        overflow-x: auto;
    }

    .profile-page .profile-container .nav-item {
        flex-direction: column;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .profile-page .profile-container .nav-item.active {
        border-left: none;
        border-bottom-color: var(--primary-green);
    }
}

@media (max-width: 767px) {
    .signin-container{
        height:100%;
        max-height: 100%;
    }
    .social-login-section{
        flex-direction: column;
            gap: 28px;
    }
    .profile-page .profile-container .sidebar-nav {
        flex-direction: column;
        gap:2px;
    }
    .events-page-header{
        overflow-x: scroll;
    }
    select option{
        font-size: 14px;
    }
    .price-card{
        margin-bottom: 0;
    }
    .page-title-section{
        height: auto;
        margin-bottom: 15px;
    }
    .profile-dropdown-wrapper:hover .profile-dropdown{
        transform: translateX(-84%) translateY(0) !important;
    }
    .event-details-page .container{
        padding-bottom: 0;
    }
    .pricing-cards-container{
        flex-direction: column;
    }
    .profile-dropdown::before{
        left:80% !important;
    }
    .profile-page .profile-container {
        padding: var(--spacing-sm);
    }
    .profile-page .profile-container .profile-content{
        gap:20px;
    }
    .profile-page .tabs-header{
        flex-direction: column;
    }
    .profile-page .profile-container{
        padding:0;
    }
    .profile-page .form-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .profile-page .tabs-header {
        gap: var(--spacing-md);
    }

    .profile-page .date-select {
        flex-direction: column;
    }

    .profile-page .select-month,
    .profile-page .select-day,
    .profile-page .select-year {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .profile-page .main-content {
        padding: var(--spacing-sm);
    }

    .profile-page .gender-chips {
        flex-direction: column;
    }

    .profile-page .chip-btn {
        width: 100%;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .profile-page .sidebar,
    .profile-page .tabs-header,
    .profile-page .btn-edit-photo,
    .profile-page .btn-logout,
    .profile-page .btn-save {
        display: none;
    }
}

.profile-page .profile-container .tab-btn.active::before {
    position: absolute;
    height: 4px;
    width: 100%;
    content: '';
    bottom: -0.25rem;
    left: 0;
    background: var(--primary-blue);
}



        .contact-container {
            background-color: #fff;
                border-radius: 16px;
        }

        .contact-container .page-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 48px;
            padding:0 27px;
        }

        .back-button {
            width: 41.32px;
            height: 41.32px;
            background: #F5F5F5;
            border: 1.15px solid #B6B7CE;
            border-radius: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .back-button:hover {
            background: #E7E8EF;
        }

        .back-button svg {
            width: 22.95px;
            height: 22.95px;
        }

        .contact-container .page-title {
            font-size: 32px;
            font-weight: 500;
            color: #333333;
            flex: 1;
            text-align: center;
        }

        .contact-container .subtitle {
            font-size: 25px;
            font-weight: 400;
            color: #333333;
            text-align: center;
            margin-bottom: 48px;
        }

        .contact-container .content-wrapper {
            display: flex;
            gap: 0;
            background: var(--bg-surface);
            border-radius: 16px;
            overflow: hidden;
        }

        .contact-container .form-section {
            flex: 1;
            padding: 64px 27px;
        }

        .contact-container .form-group {
            margin-bottom: 48px;
            position: relative;
        }

        .contact-container .form-label {
            position: absolute;
            display: block;
            top: -24.5px;
            right: 9px;
            font-size: 15.75px;
            color: var(--primary-blue);
            font-weight: 400;
        }

        .contact-container .form-input {
            width: 100%;
            padding: 14px;
            font-size: 20px;
            font-family: 'Poppins', sans-serif;
            border: 1.75px solid rgba(0, 0, 0, 0.12);
            border-radius: 19.6px;
            outline: none;
            transition: all 0.3s;
        }

        .contact-container .form-input:focus {
            border-color: var(--primary-blue);
        }

        .contact-container .form-input::placeholder {
            color: rgba(0, 0, 0, 0.4);
        }

        .contact-container .phone-input-wrapper {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            border: 1.75px solid rgba(0, 0, 0, 0.12);
            border-radius: 19.6px;
        }

        .contact-container .phone-prefix {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-left: 16px;
            border-left: 1px solid rgba(0, 0, 0, 0.2);
            margin-left: 16px;
        }

        .contact-container .phone-prefix span {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.4);
        }

        .contact-container .phone-input-wrapper input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 20px;
            font-family: 'Poppins', sans-serif;
        }

        .contact-container .phone-input-wrapper input::placeholder {
            color: rgba(0, 0, 0, 0.4);
        }

        .contact-container .textarea-input {
            min-height: 193px;
            padding: 16px 14px;
            resize: vertical;
            font-family: 'Poppins', sans-serif;
        }

        .contact-container .submit-button {
            width: 100%;
            padding: 14px 28px;
            background: var(--primary-blue);
            color: var(--bg-surface);
            font-size: 20px;
            font-family: 'Poppins', sans-serif;
            border: none;
            border-radius: 19.6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .contact-container .submit-button:hover {
            background: #1a1f80;
            transform: translateY(-2px);
        }

        .contact-container .info-section {
            width: 486px;
            border-radius: 16px;
            background: var(--primary-blue);
            padding: 64px 32px;
            position: relative;
            overflow: hidden;
        }

        .contact-container .info-content {
            position: relative;
            z-index: 2;
        }

        .contact-container .info-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--bg-surface);
            margin-bottom: 16px;
        }

        .contact-container .info-description {
            font-size: 20px;
            font-weight: 400;
            color: var(--bg-surface);
            margin-bottom: 96px;
            line-height: 1.2;
        }

        .contact-container .contact-info-item {
            display: flex;
            align-items: center;
            gap: 32px;
            margin-bottom: 16px;
        }

        .contact-container .contact-icon {
            width: 25px;
            height: 25px;
            color: #E7E8EF;
        }

        .contact-container .contact-text {
            font-size: 20px;
            color: var(--bg-surface);
        }

        .contact-container .logo-watermark {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 250px;
            opacity: 0.1;
            z-index: 1;
        }

        .contact-container .logo-watermark img{
              filter: brightness(0) invert(1);
        }

        @media (max-width: 1024px) {


            .contact-container .content-wrapper {
                flex-direction: column;
            }

            .contact-container .info-section {
                width: 100%;
            }
        }


        .main-container {
            padding: 0 120px;
        }

        .pricing-header {
            background: white;
            padding: 24px;
            border-radius: 16px;
            margin-bottom: 32px;
        }

        .pricing-title {
            font-size: 49px;
            font-weight: 700;
            color: var(--primary-blue);
            text-align: left;
            margin-bottom: 24px;
        }

        .pricing-subtitle {
            font-size: 20px;
            color: #333333;
            text-align: left;
            margin-bottom: 24px;
        }

        .explore-btn {
            padding: 8px 20px;
            border: 2px solid var(--primary-blue);
            border-radius: 22.4px;
            background: transparent;
            color: var(--primary-blue);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            /* margin-right:auto; */
        }

        .explore-btn:hover {
            background: var(--primary-blue);
            color: white;
        }

        /* Pricing Cards */
        .pricing-cards {
            display: flex;
            gap: 30px;
            margin-bottom: 32px;
            justify-content: center;
        }

        .pricing-card {
            background: var(--primary-blue);
            border-radius: 16px;
            padding: 24px;
            width: 385px;
            position: relative;
            overflow: hidden;
        }

        .most-popular-badge {
            background: #E2F3EE;
            color: var(--primary-green);
            padding: 8px 16px;
            border-radius: 9999px;
            font-size: 13px;
            display: inline-block;
            margin-bottom: 20px;
        }

        .price {
            font-size: 39px;
            font-weight: 700;
            color: white;
            margin-bottom: 20px;
        }

        .plan-title {
            font-size: 20px;
            font-weight: 700;
            color: white;
            margin-bottom: 8px;
        }

        .plan-desc {
            font-size: 13px;
            color: #B6B7CE;
            margin-bottom: 20px;
        }

        .feature-list {
            list-style: none;
            margin-bottom: 23px;
            padding-left: 0;
        }

        .feature-item {
            display: flex;
            align-items: start;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 13px;
            color: white;
        }

        .checkmark {
            width: 20px;
            height: 20px;
            background: var(--primary-green);
            border-radius: 6.8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .checkmark::after {
            content: "✓";
            color: white;
            font-size: 14px;
        }

        .register-btn {
            width: 100%;
            padding: 12px 24px;
            background: var(--primary-green);
            border: none;
            border-radius: 16.8px;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .register-btn:hover {
            background: #2d9575;
            transform: translateY(-2px);
        }

        .watermark {
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 315px;
            height: 315px;
            opacity: 0.1;
            pointer-events: none;
        }


        /* Cookie Popup */
        .cookie-popup {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 978px;
            max-width: calc(100% - 40px);
            background: var(--bg-surface);
            border: 1px solid #F1F2F9;
            box-shadow: 0px 4px 32px -4px rgba(111, 108, 143, 0.12),
                        0px 3px 12px -2px rgba(170, 170, 190, 0.06);
            border-radius: 20px;
            padding: 20px;
            animation: slideUp 0.5s ease-out;
        }

        @keyframes slideUp {
            from {
                transform: translate(-50%, 100px);
                opacity: 0;
            }
            to {
                transform: translate(-50%, 0);
                opacity: 1;
            }
        }

        .cookie-content {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        /* Left Container */
        .cookie-left {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            flex: 1;
        }

        /* Cookie Icon */
        .cookie-icon {
            width: 48px;
            height: 48px;
            background: #FFE5BF;
            box-shadow: 0px 0.91px 2.06px rgba(203, 170, 98, 0.24),
                        inset 0px -3px 4.3px rgba(212, 155, 99, 0.32),
                        inset 0px 1.83px 1.7px rgba(255, 255, 255, 0.5);
            border-radius: 16px;
            position: relative;
            flex-shrink: 0;
        }

        .cookie-icon svg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 26px;
            height: 26px;
        }

        /* Cookie Text */
        .cookie-text {
            flex: 1;
            font-size: 16px;
            line-height: 120%;
            color: var(--primary-blue);
        }

        .cookie-text a {
            color: var(--primary-green);
            text-decoration: underline;
            font-weight: 500;
        }

        .cookie-text a:hover {
            color: #2d9575;
        }

        /* Actions */
        .cookie-actions {
            display: flex;
            gap: 32px;
            align-items: center;
        }

        .cookie-btn {
            padding: 10px 16px;
            border: none;
            border-radius: 16.8px;
            font-size: 15px;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 400;
        }

        .accept-btn {
            background: var(--primary-green);
            color: var(--bg-surface);
            min-width: 112px;
        }

        .accept-btn:hover {
            background: #2d9575;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 174, 140, 0.3);
        }

        .reject-btn {
            background: #D70000;
            color: var(--bg-surface);
            min-width: 104px;
        }

        .reject-btn:hover {
            background: #b80000;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(215, 0, 0, 0.3);
        }

        /* Hide popup when closed */
        .cookie-popup.hidden {
            display: none;
        }

        /* Demo Notice */
        .demo-notice {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 16px 24px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            color: var(--primary-blue);
            font-size: 14px;
            z-index: 1000;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .cookie-popup {
                width: 90%;
                bottom: 20px;
            }

            .cookie-content {
                flex-direction: column;
                gap: 16px;
            }

            .cookie-actions {
                width: 100%;
                justify-content: center;
                gap: 16px;
            }

            .cookie-btn {
                flex: 1;
            }
        }

        @media (max-width: 640px) {
            .cookie-left {
                flex-direction: column;
            }

            .cookie-actions {
                flex-direction: column;
                gap: 12px;
            }

            .cookie-btn {
                width: 100%;
            }
        }


.btn-outline {
    padding: 10px 19px;
    background: transparent;
    border: 1px solid var(--primary-blue);
    border-radius: 11.2px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--primary-blue);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-outline:hover {
    background: var(--primary-blue);
    color: var(--bg-surface);
    border-color: var(--primary-blue);
}

.btn-outline:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(18, 23, 96, 0.25);
}

.btn-request{
   padding: 10px 19px;
    background: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    border-radius: 11.2px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--bg-surface);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-request:hover{
    border: 1px solid var(--primary-blue);
    background:#fff;
    color:  var(--primary-blue);
}




        .event-meta-data {
            display: flex;
            gap: 7.55px;
            margin-bottom: 16px;
        }

        .event-meta-data .meta-item {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 3.77px 0;
            gap: 5.66px;
        }

        .event-meta-data .meta-icon-wrapper {
            display: flex;
            align-items: center;
            gap: 7.55px;
        }

        .event-meta-data .meta-item i {
            font-size: 18px;
            color: var(--primary-blue);
        }

        .event-meta-data .meta-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }

        .event-meta-data .meta-label {
            font-size: 10px;
            font-weight: 400;
            color: #B6B7CE;
            line-height: 120%;
        }

       .event-meta-data  .meta-value {
            font-size: 12.26px;
            font-weight: 700;
            color: var(--primary-blue);
            line-height: 120%;
        }



        /* Offcanvas Overlay */
        .offcanvas-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(18, 23, 96, 0.2);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            z-index: 1000;
        }

        .offcanvas-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* Offcanvas */
        .offcanvas {
            position: fixed;
            top: 0;
            right: -555px;
            width: 650px;
            height: 100vh;
            background: white;
            border-radius: 18px 0 0 18px;
            padding: 24px;
            box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
            overflow-y: auto;
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1001;
        }

        .offcanvas.show {
            right: 0;
        }

        .offcanvas-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
            padding:0;
        }

        .offcanvas-title {
            font-size: 20px;
            font-weight: 700;
            color: #0F172A;
        }

        .offcanvas .btn-close {
            width: 16px;
            height: 16px;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            position: relative;
        }

        .offcanvas .btn-close::before,
        .offcanvas .btn-close::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 1.5px;
            background: #0F172A;
        }

        .offcanvas .btn-close::before {
            transform: rotate(45deg);
        }

        .offcanvas .btn-close::after {
            transform: rotate(-45deg);
        }

        .offcanvas .btn-close:hover::before,
        .offcanvas .btn-close:hover::after {
            background: #D70000;
        }

        .offcanvas  .offcanvas-subtitle {
            font-size: 13px;
            color: #0F172A;
            margin-bottom: 5px;
        }

        .offcanvas  .offcanvas-body {
            padding: 24px 0;
        }

        .offcanvas .form-group {
            position: relative;
            margin-bottom: 20px;
        }
        body.dark-mode .btn-request:hover{
            color:#fff;
            border-color:transparent;
        }
        .offcanvas .form-label {
            display: block;
            position: relative;
            margin-bottom: 0;
            top:0;
            left:0;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.88);
            background: transparent;
            padding: 0 4px;
        }

        .offcanvas .form-input {
            width: 100%;
            padding: 10px;
            border: 1.25px solid rgba(0, 0, 0, 0.12);
            border-radius: 14px;
            font-size: 16px;
            font-family: 'Poppins', sans-serif;
            outline: none;
            transition: all 0.3s;
        }

        .offcanvas .form-input:focus {
            border-color: var(--primary-blue);
        }

        .form-input::placeholder {
            color: rgba(0, 0, 0, 0.4);
        }

        .offcanvas .input-with-icon {
            position: relative;
        }

        .offcanvas .input-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-blue);
            cursor: pointer;
            font-size: 20px;
        }

        .offcanvas .btn-submit {
            padding: 10px 28px;
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 18px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.3s;
            margin-left:auto;
        }

        .btn-submit:hover {
            background: #1a1f80;
            transform: translateY(-2px);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .offcanvas {
                width: 90%;
                right: -90%;
            }
        }



          /* Ticket Card */
        .ticket-card {
            background: var(--bg-surface);
            border: 1px solid #E2E8F0;
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
        }

        .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            padding-bottom: 8px;
            border-bottom: 1px solid #E2E8F0;
        }

        .ticket-logo-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ticket-logo {
            width: 32px;
            height: 32px;
            /* background: var(--primary-blue); */
            /* border-radius: 8px; */
        }

        .ticket-logo img{
            width:100%;
        }


        .ticket-brand {
            font-weight: 700;
            font-size: 20px;
            color: var(--primary-blue);
        }

        .ticket-number {
            font-weight: 700;
            font-size: 12px;
            color: #B6B7CE;
        }

        /* QR Code Section */
        .qr-code-section {
            display: flex;
            gap: 24px;
            margin-bottom: 0px;
        }

        .qr-code {
            width: 180px;
            height: 180px;
            /* background: #000; */
            border-radius: 12px;
            flex-shrink: 0;
        }

        .ticket-details {
            flex: 1;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .detail-label {
            font-size: 12px;
            color: #B6B7CE;
            font-weight: 700;
            width:120px;
        }

        .detail-value {
            font-size: 12px;
            color: var(--primary-blue);
            font-weight: 700;
        }

        /* Action Buttons */
        .ticket-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }

        .btn-action {
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 12px;
            /* text-decoration: underline; */
            background: none;
            border: none;
            color: var(--primary-blue);
            cursor: pointer;
            flex: 1;
        }

        .btn-action:hover {
            background: var(--bg-light);
        }

        .btn-action.primary {
            border: 1px solid var(--primary-green);
            color: var(--primary-green);
            text-decoration: none;
        }

        .btn-action.primary:hover {
            background: #C3E6DB;
        }

        /* Pagination */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 24px;
            border-top: 1px solid #E2E8F0;
        }

        .pagination-btn {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            border: none;
            background: rgba(0, 0, 0, 0.08);
            color: rgba(0, 0, 0, 0.88);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pagination-btn:hover {
            background: rgba(0, 0, 0, 0.12);
        }

        .pagination-btn.active {
            background: var(--primary-blue);
            color: var(--bg-surface);
        }

        .pagination-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            .offcanvas {
                width: 100%;
                border-radius: 0;
            }

            .qr-code-section {
                flex-direction: column;
            }

            .qr-code {
                width: 100%;
                height: 200px;
            }
        }

        #ticketsOffcanvas{
            width:1200px;
        }
        #invitationLettersOffcanvas{
            width:1100px;
        }



        /* Table Container */
        .table-container {
            background: var(--bg-surface);
            border-radius: 20px;
            padding: 16px 0;
            margin-bottom: 24px;
        }

        /* Custom Table */
        .custom-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            overflow: hidden;
        }

        .custom-table thead {
            background: var(--bg-surface);
        }

        .custom-table thead th {
            padding: 12px;
            font-weight: 400;
            font-size: 16px;
            color: var(--primary-blue);
            border: 1px solid #EDF1FD;
            text-align: left;
        }

        .custom-table thead th:first-child {
            border-radius: 18px 0 0 0;
            border-left: 1px solid #EDF1FD;
        }

        .custom-table thead th:last-child {
            border-radius: 0 18px 0 0;
            border-right: 1px solid #EDF1FD;
            min-width: 150px;
        }

        .custom-table tbody tr {
            background: var(--bg-surface);
        }

        .custom-table tbody tr:nth-child(even) {
            background: #F9FAFD;
        }

        .custom-table tbody td {
            padding: 12px;
            font-size: 14px;
            color: #0F172A;
            border-bottom: 1px solid #EDF1FD;
            border-left: 1px solid #EDF1FD;
        }

        .custom-table tbody td:last-child {
            border-right: 1px solid #EDF1FD;
        }

        .custom-table tbody tr:last-child td:first-child {
            border-radius: 0 0 0 18px;
        }

        .custom-table tbody tr:last-child td:last-child {
            border-radius: 0 0 18px 0;
        }

        .attendee-name {
            font-weight: 700;
            color: #0F172A;
        }

        .event-link {
            color: #004CC4;
            text-decoration: underline;
            cursor: pointer;
        }

        .event-link:hover {
            color: #003399;
        }

        /* Status Badges */
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 400;
        }

        .status-pending {
            background: #F9AE00;
            color: var(--bg-surface);
        }

        .status-approved {
            background: var(--primary-green);
            color: var(--bg-surface);
        }

        /* Action Button */
        .btn-download {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 16px;
            background: transparent;
            border: 1px solid var(--primary-blue);
            border-radius: 11.2px;
            color: var(--primary-blue);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-download:hover {
            background: var(--primary-blue);
            color: white;
        }

        .btn-download i {
            font-size: 14px;
        }

        .text-disabled {
            color: #DBDCE7;
        }

        /* Back Button */
        .footer-actions .btn-back-canvas  {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 10px 30px;
            background: var(--primary-blue);
            border: none;
            border-radius: 15px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .footer-actions .btn-back-canvas:hover {
            background: #0d1049;
        }

        .footer-actions .btn-back-canvas i {
            font-size: 16px;
        }

        .footer-actions {
            display: flex;
            justify-content: flex-end;
            padding: 15px 15px  0 15px;
            border-top: 1px solid #EDF1FD;
        }

        @media (max-width: 1200px) {
            .offcanvas {
                width: 100%;
                border-radius: 0;
            }

            .custom-table {
                font-size: 14px;
            }

            .custom-table thead th,
            .custom-table tbody td {
                padding: 8px;
                font-size: 14px;
            }
        }

        @media (max-width: 768px) {
            .table-container {
                overflow-x: auto;
            }

            .custom-table {
                min-width: 800px;
            }
        }



                /* Accordion Card */
        .accordion-card {
            background: var(--bg-surface);
            box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.17);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 22px;
        }

        /* Main Header */
        .proceeding-event-header {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            min-height: 70px;
            border-radius: 18px 18px 0 0;
        }

       

        .event-header-content {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 8px;
        }

        .event-cell {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            flex: 1;
        }

        .event-label {
            font-size: 16px;
            color: #B6B7CE;
            font-weight: 400;
        }

        .event-value {
            font-size: 16px;
            color: var(--primary-blue);
            font-weight: 700;
            text-decoration: underline;
        }

        .type-value, .date-value, .location-value {
            font-size: 16px;
            color: var(--primary-blue);
            font-weight: 400;
        }

        /* Toggle Icon */
        .toggle-icon {
            width: 20px;
            height: 20px;
            color: #1E1E1E;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        .toggle-icon.rotated {
            transform: rotate(180deg);
        }

        /* Accordion Content */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .accordion-content.show {
            max-height: 500px;
            display: block;
        }

        /* Inner Table */
        .inner-table-container {
            padding: 0 0px 16px 0px;
        }

        .inner-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 16px;
        }

        /* Inner Table Header */
        .inner-table thead th {
            padding: 8px 12px;
            font-weight: 400;
            font-size: 16px;
            color: var(--primary-blue);
            border: 1px solid #EDF1FD;
            background: var(--bg-surface);
            text-align: left;
            height: 43px;
        }

        .inner-table thead th:first-child {
            border-radius: 16px 0 0 0;
            width: 50%;
        }

        .inner-table thead th:last-child {
            border-radius: 0 16px 0 0;
            width: 50%;
        }

        /* Inner Table Body */
        .inner-table tbody tr {
            background: var(--bg-surface);
        }

        .inner-table tbody tr:nth-child(even) {
            background: #F9FAFD;
        }

        .inner-table tbody td {
            padding: 6px 12px;
            font-size: 15px;
            color: var(--primary-blue);
            font-weight: 700;
            border-bottom: 1px solid #EDF1FD;
            border-left: 1px solid #EDF1FD;
            height: 44px;
        }


        .inner-table tbody tr:last-child td:first-child {
            border-radius: 0 0 0 16px;
        }

        .inner-table tbody tr:last-child td:last-child {
            border-radius: 0 0 16px 0;
        }

        /* Action Buttons */
        .proceeding-action-buttons {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .proceeding-btn-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 8px;
            background: #EAEBFB;
            border: none;
            border-radius: 8px;
            color: var(--primary-blue);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .proceeding-btn-action:hover {
            background: var(--primary-blue);
            color: white;
        }

        .proceeding-btn-action i {
            font-size: 14px;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .event-header-content {
                flex-wrap: wrap;
            }

            .event-cell {
                min-width: 45%;
            }
        }

        @media (max-width: 768px) {
            .event-header-content {
                flex-direction: column;
                align-items: flex-start;
            }

            .event-cell {
                width: 100%;
            }

            .inner-table-container {
                overflow-x: auto;
            }

            .inner-table {
                min-width: 600px;
            }
        }



/* Dropdown Container */
.nav-item-dropdown {
    position: relative;
}

/* Dropdown Menu */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    min-width: 220px;
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(18, 23, 96, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 8px;
}

/* Show dropdown on hover */
.nav-item-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 12px;
}

/* Dropdown Items */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    color: var(--primary-blue);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-dropdown-item:hover {
    background: #EAEBFB;
    color: #040951;
}

.nav-dropdown-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.nav-dropdown-item:hover svg path,
.nav-dropdown-item:hover svg rect,
.nav-dropdown-item:hover svg circle {
    stroke: var(--primary-green);
}

/* Dropdown Arrow */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bg-surface);
    filter: drop-shadow(0 -2px 4px rgba(18, 23, 96, 0.1));
}

/* Active state for Events link when dropdown is shown */
.nav-item-dropdown:hover > .nav-pill {
    background: #EAEBFB;
    color: #040951;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .nav-item-dropdown {
        position: static;
    }

    .nav-dropdown {
        position: static;
        transform: none;
        margin-top: 8px;
        margin-left: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
        background: var(--bg-light);
        padding: 8px 0;
    }

    .nav-item-dropdown:hover .nav-dropdown {
        display: block;
    }

    .nav-dropdown::before {
        display: none;
    }

    .nav-dropdown-item {
        padding: 10px 16px;
    }
}

@media (max-width: 576px) {
    .nav-dropdown {
        min-width: 100%;
    }

    .nav-dropdown-item {
        font-size: 14px;
        padding: 10px 12px;
    }

    .nav-dropdown-item svg {
        width: 18px;
        height: 18px;
    }
}

/* Animation */
@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-item-dropdown:hover .nav-dropdown {
    animation: dropdownSlideIn 0.3s ease;
}

/* Accessibility */
.nav-dropdown-item:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Smooth hover transition */
.nav-dropdown-item {
    position: relative;
    overflow: hidden;
}

.nav-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--primary-green);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.nav-dropdown-item:hover::before {
    transform: scaleY(1);
}


/* Dropdown Container */
.nav-item-dropdown {
    position: relative;
}

/* Dropdown Menu */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    min-width: 220px;
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(18, 23, 96, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 8px;
}

/* Show dropdown on hover */
.nav-item-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 12px;
}

/* Dropdown Items */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    color: var(--primary-blue);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-dropdown-item:hover {
    background: #EAEBFB;
    color: #040951;
}

.nav-dropdown-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.nav-dropdown-item:hover svg path,
.nav-dropdown-item:hover svg rect,
.nav-dropdown-item:hover svg circle {
    stroke: var(--primary-green);
}

/* Dropdown Arrow */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bg-surface);
    filter: drop-shadow(0 -2px 4px rgba(18, 23, 96, 0.1));
}

/* Active state for Events link when dropdown is shown */
.nav-item-dropdown:hover > .nav-pill {
    background: #EAEBFB;
    color: #040951;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .nav-item-dropdown {
        position: static;
    }

    .nav-dropdown {
        position: static;
        transform: none;
        margin-top: 8px;
        margin-left: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
        background: var(--bg-light);
        padding: 8px 0;
    }

    .nav-item-dropdown:hover .nav-dropdown {
        display: block;
    }

    .nav-dropdown::before {
        display: none;
    }

    .nav-dropdown-item {
        padding: 10px 16px;
    }
}

@media (max-width: 576px) {
    .nav-dropdown {
        min-width: 100%;
    }

    .nav-dropdown-item {
        font-size: 14px;
        padding: 10px 12px;
    }

    .nav-dropdown-item svg {
        width: 18px;
        height: 18px;
    }
}

/* Animation */
@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-item-dropdown:hover .nav-dropdown {
    animation: dropdownSlideIn 0.3s ease;
}

/* Accessibility */
.nav-dropdown-item:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Smooth hover transition */
.nav-dropdown-item {
    position: relative;
    overflow: hidden;
}

.nav-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--primary-green);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.nav-dropdown-item:hover::before {
    transform: scaleY(1);
}


/* ===========================
   PROFILE DROPDOWN STYLES
   =========================== */

/* Profile Dropdown Wrapper */
.profile-dropdown-wrapper {
    position: relative;
}

/* Profile Trigger (Avatar + Chevron) */
.profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.profile-trigger:hover {
    background: #F0F1FC;
}

/* Profile Avatar */
.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--primary-green);
    object-fit: cover;
    transition: all 0.3s ease;
}

.profile-trigger:hover .profile-avatar {
    border-color: var(--primary-blue);
    transform: scale(1.05);
}

/* Chevron Icon */
.profile-chevron {
    font-size: 14px;
    color: var(--primary-blue);
    transition: transform 0.3s ease;
}

.profile-dropdown-wrapper:hover .profile-chevron {
    transform: rotate(180deg);
}

/* Profile Dropdown Menu */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 280px;
    background: var(--bg-surface);
    border-radius: 16px;
    box-shadow: 0px 8px 32px rgba(18, 23, 96, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 16px;
}

.profile-dropdown-wrapper:hover .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Arrow */
.profile-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bg-surface);
    filter: drop-shadow(0 -2px 4px rgba(18, 23, 96, 0.1));
}

/* Profile Header in Dropdown */
.profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #E7E8EF;
    margin-bottom: 8px;
}

.profile-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primary-green);
    object-fit: cover;
}

.profile-dropdown-info {
    flex: 1;
}

.profile-dropdown-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-blue);
    margin-bottom: 2px;
}

.profile-dropdown-email {
    font-size: 13px;
    color: #757575;
}

/* Dropdown Menu Items */
.profile-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: var(--primary-blue);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.profile-dropdown-item:hover {
    background: #EAEBFB;
    color: #040951;
}

.profile-dropdown-item i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.profile-dropdown-item:hover i {
    color: var(--primary-green);
}

/* Left Accent Bar on Hover */
.profile-dropdown-item::before {
 content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 8px 0 0 8px;
    width: 3px;
    background: var(--primary-green);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.profile-dropdown-item:hover::before {
    transform: scaleY(1);
}

/* Divider */
.profile-dropdown-divider {
    height: 1px;
    background: #E7E8EF;
    margin: 8px 0;
}

/* Logout Item (Red) */
.profile-dropdown-item.logout {
    color: #D70000;
}

.profile-dropdown-item.logout:hover {
    background: rgba(215, 0, 0, 0.1);
}

.profile-dropdown-item.logout i {
    color: #D70000;
}

.profile-dropdown-item.logout:hover i {
    color: #D70000;
}

.profile-dropdown-item.logout::before {
    background: #D70000;
}

/* Animation */
@keyframes profileDropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-dropdown-wrapper:hover .profile-dropdown {
    animation: profileDropdownSlideIn 0.3s ease;
}

/* Accessibility */
.profile-dropdown-item:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .profile-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
    }

    .profile-dropdown-wrapper:hover .profile-dropdown {
        transform: translateX(-50%) translateY(0);
    }

    .profile-dropdown::before {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 576px) {
    .profile-dropdown {
        min-width: 260px;
    }

    .profile-dropdown-item {
        font-size: 14px;
        padding: 10px;
    }

    .profile-dropdown-name {
        font-size: 15px;
    }

    .profile-dropdown-email {
        font-size: 12px;
    }
}



/* Show when user is logged in (add class via JavaScript) */
.profile-dropdown-wrapper {
    display: block;
}

/* .btn-signup {
    display: none;
} */

/* Print Styles */
@media print {
    .profile-dropdown-wrapper,
    .profile-dropdown {
        display: none;
    }
}

body input:focus-visible {
    outline: none !important;
}

 .guidelines-content p {
            text-align: justify;
        }
@media (max-width: 767px) {
        /* .event-details-content .left-column{
            gap:25px;
        } */
        .right-column .event-stats-card,.left-column .contact-card,.left-column .dates-card,.left-column .guidelines-card ,.left-column .event-info-card,.left-column .action-buttons-card,.left-column .stages-card{
            margin-bottom:25px;
        }

        .event-details-content{
            display: block;
        }
        .filters-container{
            padding-top:12px;
        }
        .filters-container{
            flex-wrap: wrap;
        }
        .filter-button{
            width: 100%;
            height:50px;
        }
        .footer-section .container{
            padding-bottom: 0;
        }
        .footer-column{
            margin-bottom: 0;
        }
        .payqlick-header{
            padding: 0;
        }
        .navbar-toggler{
            padding:0 4px;
        }
        .search-input{
            width: calc(100% - 30px);
        }
        .hero-section{
            padding-top:0;
        }
        .partners-section,.events-section,.event-details-page{
            padding-top:0;
            padding-bottom: 0;
        }
        .testimonials-section{
            padding-top:0;
              padding-bottom: 30px;
        }
        .events-page-header{
            margin-top: 0 !important;
        }
        .faq-section{
            gap:22px;
        }
        .contact-container{
            margin:0 !important;
        }
        .contact-container .subtitle{
            font-size: 20px;
        }
        .contact-container .page-title{
            font-size: 30px;
            margin-bottom: 0;
        }
        .contact-container .subtitle{
            padding:0 27px;
        }
        body .faq-section .pill-tabs{
            padding:0;
            gap:0;
        }
}

.content-grid .left-column .form-card{
    margin-bottom: 25px;
}

body .search-input:focus,body .form-control:focus{
    border-color:transparent !important;
    box-shadow:none !important;
}

body .search-input{
    font-size: 18px;
}

body .search-input::placeholder{
    font-size: 18px;
}


.pricing-section h4{
    font-weight: bold;
    color: var(--primary-blue);
}

.pagination{
    align-items: center;
    justify-content: center;
}

.pagination li span,.pagination li a{
    width: 40px;
    height: 40px;
    border-radius: 5px !important;
    margin:0 5px;
}
body.dark-mode .main-content h3{
    color:#fff !important;
}
body.dark-mode .event-header-content .text-muted{
    color:#fff !important;
}

body.dark-mode .pagination .active>.page-link,body.dark-mode .pagination .page-link.active{
    background: var(--primary-green);
    border-color: var(--primary-green);
    color:#fff;
}

.pagination .active>.page-link,.pagination .page-link.active{
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color:#fff;
}

body .pagination .page-link,body .pagination .page-link{
    color:var(--primary-blue);
}


body.dark-mode .pagination .page-link,body.dark-mode .pagination .page-link{
    background: var(--card-bg);
    border-color: var(--card-bg);
    color:var(--primary-green);
}

.hero-section .col-lg-7,
.hero-section .col-lg-5 {
    opacity: 0;
}

.gallery-image {
    opacity: 0;
    transform: translateY(30px);
}

/* Slide in from left animation */
.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

/* Slide in from right animation */
.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

/* Image fade and slide up */
.image-appear {
    animation: imageAppear 0.6s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes imageAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===========================
   FEATURES SECTION STYLES
   =========================== */

   .features-section {
    padding: 60px 24px 0px 24px;
    background: var(--bg-light);
}

.features-header {
    text-align: center;
    margin-bottom: 64px;
}

.features-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: var(--primary-green);
    margin-bottom: 8px;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}

.feature-card {
    background: transparent;
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.feature-card:hover {
    transform: translateY(-8px);
    background-color: #b2b5e121 !important;
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: var(--bg-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color:transparent;
}

body.dark-mode .feature-icon{
    background: #fff;
}
body.dark-mode .contact-container .content-wrapper{
        background: #1e2130;
}
body.dark-mode .contact-container .info-section{
    background: #121760;
}
body.dark-mode  .contact-container .info-description,body.dark-mode  .contact-container .contact-text,body.dark-mode  .contact-container .info-title{
    color:#fff;
}

.feature-icon i {
    font-size: 18px;
    color: var(--primary-blue);
}

.feature-card:hover .feature-icon {
    /* background: var(--primary-green); */
    /* border-color: var(--primary-green); */
}

.feature-card:hover .feature-icon i {
    /* color: var(--bg-surface); */
}

.feature-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    color: var(--primary-blue);
    margin: 0;
}

.feature-description {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: var(--primary-green);
    margin: 0;
}
/* ===========================
   STEPS SECTION STYLES - ENHANCED
   =========================== */

   .steps-section {
    padding: 0px 24px 24px 24px;
    background: var(--bg-light);
    position: relative;
}

.step-body{
    padding: 30px 25px;
    background: #fff;
    border-radius: 25px;
}

.steps-header {
    text-align: left;
    margin-bottom: 40px;
}

.step-header-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.steps-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 135%;
    color: #757575;
    margin: 0;
}

/* ===========================
   Steps Timeline - Enhanced
   =========================== */

.steps-timeline {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
    position: relative;
    padding: 0 24px;
}


/* Step Item */
.step-item {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step-item:hover {
    transform: translateY(-4px);
}

/* Step Number Badge */
.step-number {
    text-align: left;
    display: inline-flex;
    color: var(--primary-green);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 14px;
    position: relative;
    transition: all 0.3s ease;
}

.step-item:hover .step-number {
    /* transform: scale(1.1); */
    /* box-shadow: 0 6px 16px rgba(61, 174, 140, 0.4); */
}

/* Inactive Step Number */
.step-item.inactive .step-number {
    color: #B6B7CE;
}

/* Step Title */
.step-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 120%;
    color: var(--primary-blue);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.step-item:hover .step-title {
    color: var(--primary-green);
}

.step-item.inactive .step-title {
    color: #CCCCCC;
}

/* Step Description */
.step-description {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 5px;
    color: var(--text-secondary);
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    padding:0 24px;
}

.step-item:not(.inactive) .step-description {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   Step Details Grid - Enhanced
   =========================== */

.step-details-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
}

.step-detail-card {
    background: transparent;
    border-radius: 25px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Card Gradient Overlay */
.step-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-green) 0%, var(--primary-blue) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}


/* Detail Icon */
.step-detail-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.step-detail-card:hover .step-detail-icon {
    background: var(--primary-green);
    transform: rotate(360deg) scale(1.1);
}

.step-detail-icon i {
    font-size: 20px;
    color: var(--primary-green);
    transition: all 0.4s ease;
}

.step-detail-card:hover .step-detail-icon i {
    color: var(--bg-surface);
}

/* Detail Content */
.step-detail-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-detail-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    color: var(--primary-blue);
    margin: 0;
    transition: color 0.3s ease;
}

.step-detail-card:hover .step-detail-title {
    color: var(--primary-green);
}

.step-detail-description {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    color: #4D4D4D;
    margin: 0;
}

/* ===========================
   Animations
   =========================== */

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-item {
    animation: stepFadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.step-item:nth-child(1) { animation-delay: 0.1s; }
.step-item:nth-child(2) { animation-delay: 0.2s; }
.step-item:nth-child(3) { animation-delay: 0.3s; }
.step-item:nth-child(4) { animation-delay: 0.4s; }

.step-detail-card {
    animation: stepFadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.step-detail-card:nth-child(1) { animation-delay: 0.5s; }
.step-detail-card:nth-child(2) { animation-delay: 0.6s; }
.step-detail-card:nth-child(3) { animation-delay: 0.7s; }

/* ===========================
   Dark Mode Support
   =========================== */

body.dark-mode .step-detail-card {
    background: transparent;
    border-color: transparent;
}


body.dark-mode .step-detail-description {
    color: var(--text-secondary);
}

body.dark-mode .steps-timeline::before {
    background: #2A2D3A;
}

/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 1199px) {
    .step-header-title {
        font-size: 38px;
    }

    .step-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .step-detail-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 991px) {
    .steps-section {
        padding: 60px 20px;
    }

    .step-header-title {
        font-size: 32px;
    }

    .steps-subtitle {
        font-size: 16px;
    }

    .step-details-grid {
        grid-template-columns: 1fr;
    }

    .step-detail-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .steps-section {
        padding: 48px 16px;
    }

    .step-header-title {
        font-size: 28px;
    }

    .steps-header {
        margin-bottom: 40px;
    }

    /* Mobile Timeline */
    .steps-timeline {
        flex-direction: column;
        gap: 24px;
        padding: 0;
    }

    .steps-timeline::before,
    .steps-timeline::after {
        display: none;
    }

    .step-item {
        text-align: left;
        padding-left: 0px;
        position: relative;
    }

    .step-number {
        position: relative;
        left: 0;
        top: 0;
    }

    .step-title {
        font-size: 18px;
    }

    .step-description {
        font-size: 14px;
    }

    /* Mobile Cards */
    .step-detail-card {
        padding: 28px 20px;
    }

    .step-detail-icon {
        width: 48px;
        height: 48px;
    }

    .step-detail-icon i {
        font-size: 20px;
    }

    .step-detail-title {
        font-size: 18px;
    }

    .step-detail-description {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .step-header-title {
        font-size: 24px;
    }

    .steps-subtitle {
        font-size: 14px;
    }

    .step-detail-card {
        padding: 24px 16px;
    }
}

/* ===========================
   Print Styles
   =========================== */

@media print {
    .step-detail-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .steps-timeline::before,
    .steps-timeline::after {
        display: none;
    }
}

/* ===========================
   Accessibility
   =========================== */

@media (prefers-reduced-motion: reduce) {
    .step-item,
    .step-detail-card,
    .step-number,
    .step-detail-icon {
        animation: none !important;
        transition: none !important;
    }

    .step-detail-card:hover .step-detail-icon {
        transform: scale(1.1);
    }
}

/* Focus States */
.step-detail-card:focus-within {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 1199px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .features-section,
    .steps-section {
        padding: 20px 20px;
    }
    .fetautre-title{
        font-size:30px;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body .fetautre-title{
        font-size:25px;
    }
    .features-section,
    .steps-section {
        padding: 0px 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .steps-timeline {
        flex-direction: column;
        gap: 24px;
    }

    .steps-timeline::before {
        display: none;
    }

    .step-item {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .features-header,
    .steps-header {
        margin-bottom: 32px;
    }

    .section-title {
        font-size: 28px;
    }

    .feature-card {
        padding: 24px 16px;
    }
}

/* ===========================
   ANIMATIONS
   =========================== */

.feature-card {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.feature-card:nth-child(2){
    background-color: var(--bg-surface);
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s;  background-color: var(--bg-surface);}
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s;  background-color: var(--bg-surface);}
.feature-card:nth-child(5) { animation-delay: 0.5s;  background-color: var(--bg-surface);}
.feature-card:nth-child(6) { animation-delay: 0.6s; }
.feature-card:nth-child(7) { animation-delay: 0.7s;  background-color: var(--bg-surface);}
.feature-card:nth-child(8) { animation-delay: 0.8s; }
.feature-card:nth-child(9) { animation-delay: 0.9s; }
.feature-card:nth-child(10) { animation-delay: 1s;  background-color: var(--bg-surface);}
.feature-card:nth-child(11) { animation-delay: 1.1s; }
.feature-card:nth-child(12) { animation-delay: 1.2s;  background-color: var(--bg-surface);}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fetautre-title{
    font-size: 45px;
}



/* Step Description - Always Visible for Active Step */
.step-description {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;
    color: var(--text-secondary);
    margin-top: 12px;
    display: block;
    opacity: 1;
    margin-bottom: 5px;
    max-height: 200px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-item.active .step-description {
    display: block;
    opacity: 1;
    max-height: 200px;
}

/* Active Step Styling */
.step-item.active .step-number {
    color: var(--primary-green);
    transform: scale(1.05);
}

.step-item.active .step-title {
    color: var(--primary-green);
}

/* Inactive Step Styling */
.step-item:not(.active) .step-number {
    color: #B6B7CE;
}

.step-item:not(.active) .step-title {
    color: #CCCCCC;
}

.step-detail-content-data{
    display: none;
    width:100%;

}

.step-detail-content-data.active {
    display: block;
}

/* Step Details Content Wrapper */
/* .step-detail-content-wrapper {
    display: none;
    grid-column: 1 / -1;
    opacity: 0;
    animation: fadeOut 0.3s ease-out;
} */

.step-detail-content-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    opacity: 1;
    animation: fadeIn 0.5s ease-out;
    background-color: var(--bg-light);
    border-radius: 20px;
}

/* Progress Indicator */
.step-item {
    position: relative;
}



/* Auto-play Progress Bar */
.step-item.active::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-green);
    animation: progressBar 5s linear;
}

@keyframes progressBar {
    from { width: 0%; }
    to { width: 100%; }
}

/* Pause animation on hover */
.steps-timeline:hover .step-item.active::before {
    animation-play-state: paused;
}

/* Fade Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Hover Effect - Prevent Auto-advance */
.step-item:hover {
    cursor: pointer;
}

.step-item:hover .step-title {
    color: var(--primary-green);
}

/* Responsive */
@media (max-width: 1199px) {
    .step-detail-content-wrapper.active {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-detail-content-wrapper.active .step-detail-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .step-detail-content-wrapper.active {
        grid-template-columns: 1fr;
    }

    .step-detail-content-wrapper.active .step-detail-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }

    .steps-timeline {
        flex-direction: column;
        gap: 24px;
    }

    .step-item {
        text-align: left;
        padding-left: 0px;
    }

    .step-number {
        position: relative;
        left: 0;
        top: 0;
    }
}

.banner-item:focus-visible {
    outline: none !important;
}

body.dark-mode .counter-label{
    color: rgb(255 255 255);
}

.no-data-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 60px 20px;
}

.no-data-content {
    text-align: center;
    max-width: 500px;
}

.no-data-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 30px;
    opacity: 0.8;
}

.no-data-title {
    font-size: 28px;
    font-weight: 600;
    color: #121760;
    margin-bottom: 15px;
}

.no-data-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.no-data-content .btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    transition: all 0.3s;
}

.no-data-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .no-data-image {
        max-width: 200px;
    }

    .no-data-title {
        font-size: 22px;
    }

    .no-data-text {
        font-size: 14px;
    }
}