/* Specific styles for the About Us Page (about.html) */

.about-page-content {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}

.page-title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.intro-paragraph {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 auto var(--spacing-xl) auto;
}

.about-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl); /* Space between sections */
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md); /* Slightly larger border-radius */
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-subtle);
}

.about-section:last-of-type {
    margin-bottom: var(--spacing-xl); /* Less margin for the last section before CTA */
}

.about-section.reverse-layout {
    flex-direction: row-reverse; /* Reverse order for alternating layout */
}

.about-content {
    flex: 1; /* Takes up remaining space */
  /*  padding: var(--spacing-md);  Internal padding */
}

.about-content h2 {
    font-size: 2rem;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.about-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    /* margin-bottom: var(--spacing-md); */
}

.about-image-wrapper {
    flex: 0 0 45%; /* Image takes 45% of the width */
    max-width: 500px; /* Max width for images */
    height: 350px; /* Fixed height for image container */
    border-radius: var(--border-radius-md);
    overflow: hidden; /* Ensure image respects border-radius */
    box-shadow: var(--box-shadow-light);
    background-color: var(--color-background-light); /* Placeholder background */
}

.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
    display: block;
}

/* New Supplementary Sections */
.about-supplementary-section {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--box-shadow-subtle);
}

.about-supplementary-section h3 {
    font-size: 2rem; /* Consistent H3 size */
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.about-supplementary-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.hotel-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.hotel-list li {
    background-color: var(--color-background-light); /* Light background for list items */
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--color-text-primary); /* Default text color */
}

.hotel-list li:before {
    content: "\2022"; /* Custom bullet point (filled circle) */
    color: var(--color-text-secondary); /* Color of the bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em; /* Space for the bullet */
    margin-top: 2px; /* Align with text */
    flex-shrink: 0;
}

.hotel-list li p {
    margin: 0; /* Remove default paragraph margin within list item */
    font-size: 1rem;
    color: var(--color-text-secondary); /* Text color for list item content */
}

.hotel-list li p strong {
    color: var(--color-text-primary); /* Emphasize hotel name */
    font-weight: var(--font-weight-semibold);
}

/* Call to Action Section */
.about-cta {
    text-align: center;
    padding: var(--spacing-xl) var(--page-padding-horizontal);
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl); /* Space before footer */
}

.about-cta h2 {
    font-size: 2.25rem;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.about-cta p {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    /* max-width: 700px; */
    margin: 0 auto var(--spacing-lg) auto;
    line-height: 1.7;
}

.cta-button {
    display: inline-block;
    background-color: var(--color-text-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    margin: var(--spacing-sm);
}

.cta-button:hover {
    background-color: var(--color-text-secondary);
    transform: translateY(-2px);
}

.cta-button.secondary-button {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-text-primary);
}

.cta-button.secondary-button:hover {
    background-color: var(--color-text-primary);
    color: var(--color-white);
    border-color: var(--color-text-primary);
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .about-section {
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: var(--spacing-md);
    }

    .about-section.reverse-layout {
        flex-direction: column;
    }

    .about-image-wrapper {
        flex: auto;
        width: 100%;
        max-width: none;
        height: 280px;
    }
}

@media (max-width: 768px) {

    .about-section,
    .about-supplementary-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .about-content h2,
    .about-supplementary-section h3 {
        font-size: 1.5rem;
    }

    .about-content p,
    .about-supplementary-section p,
    .hotel-list li p {
        font-size: 0.9375rem;
    }

    .about-image-wrapper {
        height: 220px;
    }

    .about-cta h2 {
        font-size: 1.8rem;
    }

    .about-cta p {
        font-size: 1rem;
    }

    .cta-button {
        display: block;
        /* width: calc(100% - (var(--spacing-sm) * 2)); */
        margin: var(--spacing-sm) auto;
    }
}