/* Media query for smaller screens */
@media (max-width: 768px) {
    .holy-ones-section {
        padding: 20px 0;
        /* Add some spacing on smaller screens */
    }

    .holy-ones-section-title {
        font-size: 24px;
        /* Adjust the font size for smaller screens */
    }

    .holy-ones-container {
        display: flex;
        flex-wrap: wrap;
    }

    .holy-ones-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .holy-ones-img {
        width: 100px;
        height: auto;
    }

    

    .holy-ones-name {
        font-size: 16px;
    }
}
@media screen and (max-width: 768px) {
    .holy-ones-container .holy-ones-card {
        flex: 0 0 calc(100% - 20px);
        max-width: calc(80% - 20px);
        margin: 0 auto 20px;
    }
}



.holy-ones-section {
    padding: 60px 0;
    background-color: #47709c;
    
}

.holy-ones-section-title {
    font-size: 50px;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    margin-top: 20px;
    /* Add margin-top */
    padding: 10px;
    /* Add padding */
}


.holy-ones-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Allow cards to wrap onto a new line */
    gap: 15px;
    /* Add spacing between cards */
    width: 100%;
    /* Use 100% width to fit all cards in one row */
    max-width: 1400px;
    /* Limit the maximum width */
    margin: 0 auto;
    /* Center the container horizontally */
}




.holy-ones-card:hover {
    transform: translateY(-5px);
}

.holy-ones-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 2px solid black;
    transition: transform 0.3s, border-color 0.3s;
}

.holy-ones-img:hover {
    transform: scale(1.1);
    /* Scale up the image on hover */
    border-color: #007bff;
    /* Change the border color on hover */
}

.holy-ones-name {
    font-size: 20px;
    margin-bottom: 5px;
    color: rgb(6, 165, 107);
    font-weight: bold;
}


/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .holy-ones-card {
        flex: 0 0 100%;
        /* One card per row on smaller screens */
        margin: 0 0 30px;
    }
}

/* Add a subtle hover effect */
.holy-ones-card:hover {
    background-color: #f5f5f5;
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


@media (max-width: 768px) {
    .holy-ones-name {
        font-size: 18px;
    }
}

/* Add styles for each designated person */
.blessed-moreau {
    background-color: #ffe4e1;
    /* Light pink background */
    color: #8b4513;
    /* Saddle brown text color */
}

.rev-dujarie {
    background-color: #add8e6;
    /* Light blue background */
    color: #000080;
    /* Navy text color */
}

.st-andre {
    background-color: #98fb98;
    /* Pale green background */
    color: #006400;
    /* Dark green text color */
}

.sg-flavian {
    background-color: #ffd700;
    /* Gold background */
    color: #8b4513;
    /* Saddle brown text color */
}

/* Style the "Read More" button */
.read-more-btn {
    background-color: #4caf50;
    /* Green background color */
    color: #fff;
    /* White text color */
    padding: 10px 20px;
    /* Add padding to the button */
    border: none;
    /* Remove button border */
    border-radius: 5px;
    /* Add border radius */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    transition: background-color 0.3s;
    /* Smooth transition for background color */
}

.read-more-btn:hover {
    background-color: #45a049;
    /* Darker green on hover */
}

.holy-ones-details {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.holy-ones-name {
    font-size: 20px;
    margin-bottom: 5px;
    color: rgb(6, 165, 107);
    font-weight: bold;
}

.holy-ones-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.read-more-btn {
    margin-top: auto;
    /* Push the button to the bottom */
}
.holy-ones-card:hover {
    transform: translateY(-5px);
}

.holy-ones-details {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.holy-ones-name {
    font-size: 20px;
    margin-bottom: 5px;
    color: rgb(6, 165, 107);
    font-weight: bold;
}

.holy-ones-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.read-more-btn {
    margin-top: auto;
    /* Push the button to the bottom */
    margin-bottom: 10px;
    /* Add margin to the bottom */
}

.holy-ones-card {
    flex: 1;
    max-width: 350px;
    background-color: #fff;
    border-radius: 20px;
    border: 4px solid #4f71ee;
    text-align: center;
    padding: 20px;
    margin: 10px;
    transition: transform 0.2s;
    box-sizing: border-box;
    display: flex;
    /* Add display: flex */
    flex-direction: column;
    /* Stack elements vertically */
}

.holy-ones-card:hover {
    transform: translateY(-5px);
}

.holy-ones-section .sec-title h2 {
    color: white;
}
.holy-ones-section .sec-title h2:before {
  content: '';
  display: block;
  width: 50px; /* Adjust as needed for the underline width */
  height: 3px; /* Adjust as needed for the underline height */
  background-color: goldenrod; /* Change to the desired golden color */
  margin: 10px auto; /* Adjust as needed for spacing */
}