.elementor-69 .elementor-element.elementor-element-592b025 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-69 .elementor-element.elementor-element-592b025:not(.elementor-motion-effects-element-type-background), .elementor-69 .elementor-element.elementor-element-592b025 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://idomahalloffame.ng/wp-content/uploads/2025/08/ChatGPT-Image-Aug-11-2025-08_27_28-PM.png");background-position:center center;}.elementor-69 .elementor-element.elementor-element-592b025 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(124deg, var( --e-global-color-astglobalcolor6 ) 73%, var( --e-global-color-fdd99e6 ) 100%);opacity:0.68;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-69 .elementor-element.elementor-element-592b025 > .elementor-container{max-width:1140px;}.elementor-69 .elementor-element.elementor-element-592b025{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:60px 0px 60px 0px;}/* Start custom CSS for html, class: .elementor-element-752ced3 *//* Define CSS Variables for colors (if not already defined globally in Elementor or theme) */
:root {
    --idoma-red: #DC2626;
    --idoma-gold: #F59E0B;
    --black: #1F2937;
    --dark-gray: #4B5563;
    --light-gray: #E0E0E0;
    --white: #FFFFFF;
    --red-600: #DC2626;
    --red-800: #991B1B;
    --red-100: #FEE2E2;
}

.events-hero-content {
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.events-hero-content h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    color: var(--white); /* White text on dark background */
    font-size: 40px; /* Equivalent to 2.5em - 3em */
    line-height: 1.2em;
    margin-bottom: 20px;
    animation: slideInFromTop 0.8s ease-out;
}

.events-hero-content p {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Regular */
    color: var(--red-100); /* Lighter red for description */
    font-size: 16px; /* Equivalent to 1em */
    line-height: 1.7em;
    max-width: 700px; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
    animation: slideInFromBottom 0.8s ease-out 0.2s both; /* 'both' keeps the final state */
}

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .events-hero-content h1 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .events-hero-content h1 {
        font-size: 28px;
    }
    .events-hero-content p {
        font-size: 15px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9edf7e1 *//* Define CSS Variables for colors (if not already defined globally in Elementor or theme) */
:root {
    --idoma-red: #DC2626;
    --idoma-gold: #F59E0B;
    --black: #1F2937;
    --dark-gray: #4B5563;
    --light-gray: #E0E0E0;
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --red-100: #FEE2E2;
    --red-200: #FECACA;
    --red-300: #FCA5A5;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --purple-100: #EDE9FE;
    --purple-800: #6D28D9;
    --blue-100: #DBEAFE;
    --blue-800: #1E40AF;
    --green-100: #D1FAE5;
    --green-800: #065F46;
}

/* General Section Styling */
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

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

.mb-16 {
    margin-bottom: 4rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.font-bold {
    font-weight: 700;
}

.text-black {
    color: var(--black);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-xl {
    font-size: 1.25rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Featured Event Card Styling */
.bg-white {
    background-color: var(--white);
}

.rounded-2xl {
    border-radius: 1rem;
}

.overflow-hidden {
    overflow: hidden;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.featured-event-image-placeholder {
    /* If using an actual image, remove this background gradient and flex properties */
    /* background-image: linear-gradient(to bottom right, var(--red-100), var(--red-200)); */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.featured-event-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-8 {
    padding: 2rem;
}

.lg\:p-12 {
    padding: 3rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.rounded-full {
    border-radius: 9999px;
}

.text-sm {
    font-size: 0.875rem;
}

.font-semibold {
    font-weight: 600;
}

.bg-red-100 {
    background-color: var(--red-100);
}

.text-red-800 {
    color: var(--red-800);
}

.text-2xl {
    font-size: 1.5rem;
}

.lg\:text-3xl {
    font-size: 1.875rem;
}

.leading-tight {
    line-height: 1.25;
}

.leading-relaxed {
    line-height: 1.625;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.flex {
    display: flex;
}

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

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.text-red-600 {
    color: var(--red-600);
}

.flex-col {
    flex-direction: column;
}

.sm\:flex-row {
    /* On small screens and up, change to row */
    @media (min-width: 640px) {
        flex-direction: row;
    }
}

.gap-4 {
    gap: 1rem;
}

/* Custom Button Styles (from React components/ui/button.jsx) */
.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 0.375rem; /* 6px */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer;
    border: 1px solid transparent;
}

.custom-button.size-lg {
    height: 3.5rem; /* 56px */
    padding-left: 2rem; /* 32px */
    padding-right: 2rem; /* 32px */
    font-size: 1.125rem; /* 18px */
}

.custom-button.variant-default {
    background-color: var(--red-600);
    color: var(--white);
}

.custom-button.variant-default:hover {
    background-color: var(--red-700);
}

.custom-button.variant-outline {
    border-color: var(--red-600);
    color: var(--red-600);
    background-color: transparent;
}

.custom-button.variant-outline:hover {
    background-color: var(--red-600);
    color: var(--white);
}

/* Other Upcoming Events Grid Styling */
.md\:grid-cols-2 {
    /* On medium screens and up, 2 columns */
    @media (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lg\:grid-cols-3 {
    /* On large screens and up, 3 columns */
    @media (min-width: 1024px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gap-8 {
    gap: 2rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
}

.h-48 {
    height: 12rem;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--gray-100), var(--gray-200));
}

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

.text-gray-400 {
    color: var(--gray-400);
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.p-6 {
    padding: 1.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.text-xs {
    font-size: 0.75rem;
}

.bg-purple-100 {
    background-color: var(--purple-100);
}

.text-purple-800 {
    color: var(--purple-800);
}

.text-lg {
    font-size: 1.125rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

.text-gray-500 {
    color: var(--gray-500);
}

.w-full {
    width: 100%;
}

.bg-blue-100 {
    background-color: var(--blue-100);
}

.text-blue-800 {
    color: var(--blue-800);
}

.bg-green-100 {
    background-color: var(--green-100);
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .text-5xl {
        font-size: 2.5rem;
    }
    .text-6xl {
        font-size: 3rem;
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .lg\:p-12 {
        padding: 2rem;
    }
}

@media (max-width: 640px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-270da51 *//* Define CSS Variables for colors (if not already defined globally in Elementor or theme) */
:root {
    --idoma-red: #DC2626;
    --idoma-gold: #F59E0B;
    --black: #1F2937;
    --dark-gray: #4B5563;
    --light-gray: #E0E0E0;
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --red-100: #FEE2E2;
    --red-200: #FECACA;
    --red-300: #FCA5A5;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --purple-100: #EDE9FE;
    --purple-800: #6D28D9;
    --blue-100: #DBEAFE;
    --blue-800: #1E40AF;
    --green-100: #D1FAE5;
    --green-800: #065F46;
}

/* General Section Styling */
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.bg-black {
    background-color: var(--black);
}

.text-white {
    color: var(--white);
}

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

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.font-bold {
    font-weight: 700;
}

.text-xl {
    font-size: 1.25rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.text-gray-300 {
    color: var(--white-300);
}

.max-w-3xl {
    max-width: 48rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Button Container Styling */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.sm\:flex-row {
    /* On small screens and up, change to row */
    @media (min-width: 640px) {
        flex-direction: row;
    }
}

.gap-4 {
    gap: 1rem;
}

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

/* Custom Button Styles (from React components/ui/button.jsx) */
.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 0.375rem; /* 6px */
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer;
    border: 1px solid transparent;
}

.custom-button.size-lg {
    height: 3.5rem; /* 56px */
    padding-left: 2rem; /* 32px */
    padding-right: 2rem; /* 32px */
    font-size: 1.125rem; /* 18px */
}

.custom-button.variant-default {
    background-color: var(--red-600);
    color: var(--white);
}

.custom-button.variant-default:hover {
    background-color: var(--red-700);
}

.custom-button.variant-outline {
    border-color: var(--red-600);
    color: var(--red-600);
    background-color: transparent;
}

.custom-button.variant-outline:hover {
    background-color: var(--red-600);
    color: var(--red-600);
}

/* Specific override for the outline button in this section */
.custom-button.variant-outline.border-white {
    border-color: var(--white);
}

.custom-button.variant-outline.text-white {
    color: var(--white);
}

.custom-button.variant-outline.hover\:bg-white:hover {
    background-color: var(--red-600);
}

.custom-button.variant-outline.hover\:text-black:hover {
    color: var(--white);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .text-4xl {
        font-size: 2rem;
    }
    .text-xl {
        font-size: 1.125rem;
    }
}/* End custom CSS */