/************************ PSMAP styles ************************/


.psmap-button {
    width: auto;
    min-width: 100px;
    background-color: var(--psmap-editpanel-color);
    border-color: var(--psmap-editpanel-color);
}

.psmap-min-height-400{
    min-height: 400px;
}

.psmap-title-with-line {
    display: flex;
    align-items: center;
    font-size: 30px;
    margin: 0 auto 10px auto;
    justify-content: center;
    position: relative;
    z-index: 2;
}

    .psmap-title-with-line::after {
        content: '';
        flex-grow: 1;
        height: 1px;
        background-color: var(--psmap-primary-color);
        margin-left: 20px;
    }

.psmap-header-images-style {
    position: relative;
    margin-top: 0;
    
}

.psmap-main-menu-container {
    height: 70px;
    background-color: var(--psmap-primary-color);
    color: white;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--psmap-main-menu-zindex);
}

.psmap-menu-item-text {
    font-size: 16px;
    text-align: center;
    align-content: center;
}

.psmap-menu-item-text-mobile {
    font-size: 16px;
    align-content: center;
}

 .psmap-menu-item-text-mobile:hover {
            text-decoration: underline;
        }

.psmap-menu-item-mobile {
    background-color: var(--psmap-primary-color);
    color: white;
}

.psmap-sidebar-menu-item-text {
    height: 50px;
    font-size: 18px;
}

.psmap-content {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 10%;
    margin-right: 10%;
}

.psmap-fill-height {
    margin-top: 70px;
}

.psmap-menu-item {
    background-color: var(--psmap-primary-color);
    color: white;
    width: 100%;
    height: 3rem;
}

.psmap-menu-item-active {
    background-color: white;
    color: black;
    height: 3rem;
    font-weight: bold;
    z-index: 1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 -8px 16px rgba(0, 0, 0, 0.1), 8px 0 16px rgba(0, 0, 0, 0.1), -8px 0 16px rgba(0, 0, 0, 0.1);
}

.psmap-menu-item-sidebar {
    height: 50px;
    /*padding-bottom: 5px !important;
    padding-top: 5px !important;*/
}

.psmap-menu-item-active-sidebar {
    height: 50px;
    /*hpadding-bottom: 5px !important;
    padding-top: 5px !important;    */
}

.psmap-sidebar-submenu-item {
    color: white;
    width: 100%;
    height: 50px;
    /*hpadding-bottom: 5px !important;
    padding-top: 5px !important;*/
    font-size: calc(100% - 2px);
    background-color: rgb(141, 172, 145) !important;
}

.psmap-sidebar-submenu-item-active {
    font-weight: bold;
    height: 50px;
    height: auto;
    /*padding-bottom: 5px !important;
    padding-top: 5px !important; */
    color: white;
    background-color: rgb(141, 172, 145) !important;
}

.psmap-page-title {
    font-family: var(--psmap-title-font-family);
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    margin: 0px auto 20px;
    border-bottom: 1px solid rgb(112, 151, 117);
}

.psmap-edit-panel {
    height: 100%;
    margin: 0;
}

.psmap-statistics-title {
    font-size: 1rem;
    color: black !important;
}

.psmap-carousel {
    outline: none !important;
}

.psmap-popup-no-padding {
    padding: 0 !important;
}

.psmap-recent-obituaries-container {
    display: flex;
    gap: 25px;
}

.psmap-recent-obituary {
    background-color: #212529;
}

.square-div {
    width: 50px; /* Width of the square */
    height: 50px; /* Height of the square */
    border: 2px solid #ccc; /* Optional border */
    display: flex; /* Centers the image inside the div */
    justify-content: center;
    align-items: center;
    position: relative; /* Create a relative container for the button */
    display: inline-block; /* Keep images inline */
}

    .square-div img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the div while maintaining aspect ratio */
    }

/* X Button Styling */
.remove-btn {
    position: absolute; /* Position it inside the image wrapper */
    top: -5px; /* Adjust as needed */
    right: -5px; /* Adjust as needed */
    background-color: red; /* Red background with transparency */
    color: white; /* White text */
    border: none; /* Remove default border */
    border-radius: 50%; /* Make it circular */
    width: 25px;
    height: 25px;
    cursor: pointer; /* Pointer cursor */
    font-size: 14px; /* Adjust font size */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease; /* Smooth scaling effect */
}

    .remove-btn:hover {
        transform: scale(1.2); /* Slight zoom on hover */
        background-color: darkred; /* Brighter red on hover */
    }

/********************************************* Footer *********************************************/
.responsive-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: white; /* White text color */
    background-color: var(--psmap-primary-color);
}

/* Wrapper columns */
.footer-left-wrapper {
    flex: 1 1 0;
    justify-content: center;
    display: flex;
    justify-content: flex-end;
    padding-top: 25px;
    padding-right: 50px;
}

.footer-right-wrapper {
    flex: 1 1 0;
    justify-content: center;
    display: flex;
    justify-content: flex-start;
    padding-top: 25px;
    padding-left: 50px;
}

.footer-center-wrapper {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    padding: 25px 0;
    align-items: stretch;
}

/* Left column */
.footer-left {
    text-align: right;
    justify-content: center;
}

/* Center column */
.footer-center {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.footer-center-content {
    text-align: left;
    max-width: 500px;
    padding: 0 50px;
    border-left: 1px solid white; /* Left border */
    border-right: 1px solid white; /* Right border */
    height: 100%;
}

/* Right column */
.footer-right {
    text-align: left;
    justify-content: center;
    height: 100%
}

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

/* Responsive stacking */
@media (max-width: 768px) {
    .responsive-footer {
        flex-direction: column;
        align-items: center;
    }

        .responsive-footer > div {
            max-width: 100%;
            text-align: center;
        }

    .footer-left,
    .footer-right {
        text-align: center;
    }
}



/********************************************* News *********************************************/
.promoted__container {
    display: flex; /* Enables side-by-side layout */
    justify-content: space-between;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 100px; /* Space between image and text */
    background-color: #f4edeb;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 300px; /* Maximum height for the container */
    overflow: hidden; /* Ensures content does not exceed the container height */
}

.promoted__content {
    flex: 1; /* Content takes up available space */
    max-width: 100%; /* Content section limited to 60% width */
    overflow-y: auto; /* Adds scroll if content exceeds available height */
    padding-right: 10px;
}

.promoted__img-container {
    display: flex;
    flex-direction: column; /* Stack image and date vertically */
    align-items: center; /* Center-align image and date */
    text-align: center;
}

.promoted__title {
    line-height: 1.2;
    font-size: 1.75rem;
    font-weight: bolder;
    padding-bottom: 25px;
    font-family: var(--psmap-title-font-family);
}

.promoted__text {
    display: flex;
    align-items: center;
    text-align: justify;
}

.promoted__img-container img {
    max-width: 100%; /* Ensures the image scales responsively */
    max-height: 200px; /* Limits the height of the image */
    border-radius: 8px 8px 0 0; /* Optional: rounded corners */
    display: block; /* Ensures it’s treated as a block element */
}

.promoted__date {
    width: 100%; /* Matches the parent's width (image width in this case) */
    height: 50px;
    align-items: center;
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers content horizontally */
    padding: 0; /* Optional: Padding for visual spacing */
    color: white;
    background-color: var(--psmap-primary-color, #0078d4); /* Background color */
    border-radius: 0 0 8px 8px; /* Optional: Rounded corners only at the bottom */
    box-sizing: border-box; /* Includes padding in the width calculation */
}

.link-parent-container {
    margin-top: 20px;
    text-align: end;
}

.link-container {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    color: #0078d4;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .link-container:hover {
        color: #0056a3;
    }

.fa-arrow-right {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.link-container:hover .fa-arrow-right {
    transform: translateX(5px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .promoted__container {
        flex-direction: column; /* Stacks content and image on smaller screens */
        max-height: none; /* Allow height to adjust on smaller screens */
    }

    .promoted__content,
    .promoted__img-container {
        max-width: 100%; /* Full-width for both content and image */
    }
}


/* Slider Container */
.slider-container {
    width: 100%;
    max-height: 100px; /* Limit the height of the slider */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Make it a parent element */
}

/* Slider Wrapper */
.slider {
    display: flex; /* Flexbox layout for aligning logos */
    gap: 100px; /* Adds a gap of 20px between logos */
    animation: smooth-loop 20s linear infinite; /* Smooth infinite sliding animation */
    align-items: center; /* Ensures items within the slider are centered vertically */
    justify-content: center; /* Centers items horizontally within the slider */
    will-change: transform; /* Optimize animation */
    flex-wrap: nowrap; /* Ensure items don't wrap to the next row */
}

    /* Individual Logos */
    .slider img {
        max-height: 100px; /* Logo height limit */
        width: auto; /* Maintain aspect ratio */
    }

/* Keyframes for Smooth Loop */
@keyframes smooth-loop {
    0% {
        transform: translateX(0); /* Start at the beginning */
    }

    100% {
        transform: translateX(-100%); /* Move left by the width of the original content */
    }
}

/* Duplicate Slider Content for Seamless Scrolling */
.slider-container .slider {
    width: calc(200% + 100px); /* Adjust the width dynamically based on gaps */
    flex-shrink: 0; /* Prevent scaling down */
}


/********************************************* Chronicle *********************************************/
.modern-link {
    text-decoration: none; /* Removes default underline */
    color: #0078D4; /* Base color for the link */
    font-size: 1rem; /* Font size */
    font-weight: 500; /* Bold text */
    border-bottom: 2px solid transparent; /* Adds an underline effect */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

    .modern-link:hover {
        color: #005EA6; /* Changes text color on hover */
        border-bottom: 2px solid #005EA6; /* Adds underline on hover */
        transform: scale(1.05); /* Slight zoom effect */
    }



.parish-contact-card {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .parish-contact-card a {
        color: #0077cc;
        text-decoration: none;
    }

        .parish-contact-card a:hover {
            text-decoration: underline;
        }


 /*        Cart items    */
{
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f4f6f8;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
}

.card {
    background: linear-gradient(145deg, #ffffff, #e0e0e0);
    border-radius: 16px;
    box-shadow: 8px 8px 20px rgba(0,0,0,0.15);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 12px 12px 24px rgba(0,0,0,0.2);
    }

    .card h2 {
        margin-top: 0;
        font-size: 1.4em;
        color: #2c3e50;
    }

    .card p {
        font-size: 1em;
        color: #333;
    }

.details {
    display: none;
    margin-top: 15px;
    font-size: 0.95em;
    color: #444;
}

.card.active .details {
    display: block;
}