/* Basic Reset for the demo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Hero Section Main Wrapper */
.dsh-hero-section {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

/* Background Image styling */
.dsh-hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

/* Dark Gradient Overlay */
.dsh-hero-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent);
}

/* Content Positioning Container */
.dsh-hero-layout-container {
    position: relative;
    z-index: 10;
    max-width: 1580px; /* Equivalent to max-w-7xl */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

@media (min-width: 768px) {
    .dsh-hero-layout-container {
        padding: 0 48px;
	margin-top: 195px;
    }
}

.dsh-hero-text-block {
    max-width: fit-content; /* Equivalent to max-w-2xl */
    color: #ffffff;
}

/* Typography Styling */
.dsh-hero-headline {
    font-size: 2.25rem; /* Mobile Size */
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.1;
}

@media (min-width: 769px) {
    .dsh-hero-headline {
        font-size: 3.25rem; /* Desktop Size (6xl) */
    }
}
@media (max-width: 768px) {
    .dsh-hero-headline{
        font-size: 2.25rem;
    }
}

.dsh-hero-tagline {
    font-size: 1.25rem;
    margin-bottom: 32px;
    font-weight: 300;
    color: #e5e7eb; /* Soft Gray */
}

@media (min-width: 768px) {
    .dsh-hero-tagline {
        font-size: 1.5rem;
    }
}

/* Button Styling */
.dsh-hero-cta-button {
    background-color: #ff3b3b;
    width: fit-content;
    color: white;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.dsh-hero-cta-button:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.dsh-hero-cta-button:active {
    transform: translateY(0);
}

/* Link Styling */
.dsh-hero-cta-link{
    background-color: #ff3b3b;
}

/* Pagination Dot System */
.dsh-hero-pagination-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}

.dsh-hero-indicator-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.dsh-hero-indicator-dot--active {
    opacity: 1;
}


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

/* Accreditation Bar Wrapper */
.dsh-acc-bar {
    background-color: #f3f4f6; /* Equivalent to bg-gray-100 */
    border-top: 1px solid #e5e7eb; /* Equivalent to border-y border-gray-200 */
    border-bottom: 1px solid #e5e7eb;
    padding: 24px 0; /* Equivalent to py-6 */
    width: 100%;
}

/* Centralized Container */
.dsh-acc-container {
    max-width: 1380px; /* Equivalent to max-w-7xl */
    margin: 0 auto;
    padding: 0 16px; /* Mobile padding px-4 */
    text-align: center;
}

/* Tablet & Desktop Padding Adjustment */
@media (min-width: 768px) {
    .dsh-acc-container {
        padding: 0 48px; /* Equivalent to md:px-12 */
    }
}

/* Text Styling */
.dsh-acc-message {
    color: #1f2937; /* Equivalent to text-gray-800 */
    font-size: 1rem; /* Equivalent to text-lg */
    line-height: 1.6;
    margin: 0;
}

/* Bold Highlight Styling */
.dsh-acc-highlight {
    font-weight: 700; /* Equivalent to font-bold */
}