/* ========== BASE STYLES & TYPOGRAPHY ========== */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif; /* Ensuring a base font */
}

.content-wrapper {
    width: 100%;
    margin: 0 auto; /* Center the wrapper */
}

.announcements-container {
    padding: 1.5rem 1rem; /* Add some padding around the container */
    max-width: 1400px; /* Limit max width for large screens */
    margin: 0 auto; /* Center the container */
}

.announcements-header {
    text-align: center;
    margin-bottom: 2rem;
}

.announcements-header .row {
    display: flex; /* Override !important, good practice */
    flex-direction: column; /* Stack items vertically */
    align-items: center;
    margin-bottom: 10px;
}

.amicons {
    font-size: 1.5rem; /* Adjust icon size */
    color: rgb(32, 72, 82);
    margin-bottom: 0.5rem; /* Space below icon */
}

.announcements-title {
    font-family: 'kanzn', sans-serif; /* Assuming 'kanzn' is defined elsewhere */
    font-weight: 800;
    font-size: 2.5rem;
    color: #154a6f;
    position: relative;
    direction: rtl; /* For Arabic text */
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

.MuiBox-root.css-1ruyyp3 {
    /* Define this if it's meant to be a separator or spacing */
    width: 100%; /* Example */
    height: 1px; /* Example */
    background-color: #eee; /* Example */
    margin: 1rem 0; /* Example spacing */
}

.announcements-subtitle {
    font-family: 'kanzn', sans-serif;
    color: rgb(32, 72, 82);
    opacity: 0.7;
    max-width: 600px;
    font-size: 1.5rem; /* Adjusted for better responsiveness */
    direction: rtl;
    text-align: center;
    line-height: 1.4;
    margin: 0 auto; /* Center the subtitle */
}

/* ========== CAROUSEL ========== */
.scroll-container {
    position: relative;
    width: 100%;
    margin: 1.5rem 0;
}

/* scrolling row */
.cards-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* On mobile, we want the card to center, so we need some padding */
    scroll-padding-inline: calc(50% - (var(--card-width) / 2)); /* Dynamically calculated by JS */
    gap: 1rem;
    padding: 0;
    /* hide native scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE10+ */
}

.cards-wrapper::-webkit-scrollbar {
    display: none;
} /* Chrome/Safari */

/* card sizing & snap */
.cards-wrapper .card {
    flex: 0 0 100%; /* mobile: 1 per view, full width */
    max-width: 100%;
    scroll-snap-align: center; /* Crucial for centering the card on mobile */
    scroll-snap-stop: always;
    box-sizing: border-box; /* Ensure padding/border don't affect width */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Adjusted shadow from .shadow-sm */
    overflow: hidden;
    display: flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    min-width: 280px; /* Ensure a minimum width on very small screens */
}

.cards-wrapper .card-img-top {
    height: auto;
    width: 200px;
    object-fit: cover;
    display: block;
}

.cards-wrapper .card-body {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if content varies */
}

/* Typography specific to cards */
.card h5.card-title {
    font-size: 1rem !important; /* Slightly larger title */
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

.card p.card-text {
    font-size: .8rem !important; /* Slightly larger text for readability */
    margin-bottom: 1rem; /* Space before button */
    color: #555;
    flex-grow: 1; /* Allow text to take up space */
}

.card .btn-small {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background-color: #b7863c; /* Example primary color */
    color: #fff;
    text-decoration: none;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    transition: background-color 0.2s ease;
    align-self: flex-start; /* Aligns button to start of its line */
}

.card .btn-small:hover {
    background-color: #a07535;
}


/* arrows */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-size: 1.2rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.scroll-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.05); /* Slight zoom on hover */
}

.scroll-btn.left {
    left: 0; /* Flush on mobile */
}

.scroll-btn.right {
    right: 0; /* Flush on mobile */
}

@media (min-width: 768px) {
    .announcements-title {
        font-size: 3.5rem; /* Larger title on larger screens */
    }

    .announcements-subtitle {
        font-size: 1.8rem;
    }
    
   
}

@media screen and (max-width:768px){
     .content-wrapper {
    max-width: 100% !important;
    }
}

@media (min-width: 1200px) {
    /* desktop: show 3 cards */
    .cards-wrapper {
        scroll-padding-inline: 0; /* No custom padding needed for desktop */
    }

    .cards-wrapper .card {
        flex: 0 0 calc(33.333% - (2 * 1rem / 3)); /* Adjust for gap on desktop (3 cards, 2 gaps) */
        max-width: calc(33.333% - (2 * 1rem / 3));
        scroll-snap-align: start; /* Reset to start for desktop */
    }

    .scroll-btn.left {
        left: 1rem; /* slight inset on desktop */
    }

    .scroll-btn.right {
        right: 1rem; /* slight inset on desktop */
    }
}


/* ========== MODAL (minor adjustments for consistency) ========== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .15s linear;
    z-index: 1040;
}

.modal-backdrop.show {
    opacity: 1;
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    z-index: 1050;
}

.modal.show {
    display: flex;
}

.modal.fade {
    opacity: 0;
    transition: opacity .3s ease-out;
}

.modal.show.fade {
    opacity: 1;
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 800px; /* Your original max-width */
    margin: 1rem;
    pointer-events: none;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 2rem);
}

.modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    pointer-events: auto;
    outline: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333; /* Ensuring title color */
}

.modal-body {
    padding: 1rem;
    text-align: left; /* Changed from center to left for better reading of full content */
    color: #444; /* Text color */
}

.modal-body .img-fluid {
    max-width: 100%;
    height: auto;
    display: block; /* Ensure image behaves as a block */
    margin: 0 auto 1rem auto; /* Center image and add bottom margin */
}

.modal-body p {
    margin-bottom: 1rem; /* Add spacing between paragraphs */
}

/* Close button for modal */
.modal-header .amicons { /* Target the 'x' icon in the modal header */
    font-size: 1.5rem; /* Larger for easier clicking */
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #b7863c !important; /* Your custom color */
    transition: opacity 0.2s ease;
    line-height: 1; /* Align 'x' properly */
}

.modal-header .amicons:hover {
    opacity: 0.75;
}