/* Default style for larger screens */
.intro-paragraph {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 5px 15px;  /* Reduced padding on larger screens */
    max-width: 900px;
    margin: 0 auto;
    background-color: #e6f2ff;   /* Very light blue for a fresh look */
    border: 1px solid #007bff;   /* Header blue for a cohesive border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Smaller font and tighter spacing for mobile screens */
@media (max-width: 768px) {
    .intro-paragraph {
        font-size: 15px;
        line-height: 1.4;
        padding: 10px;
    }
}

/* Even smaller for very narrow screens, like iPhones */
@media (max-width: 480px) {
    .intro-paragraph {
        font-size: 14px;
        line-height: 1.3;
        padding: 8px;
    }
}

.resource-portal-title {
    background: #e6f2ff; /* Light blue background color */
    padding: 10px; /* Adds padding around the text */
    border: 1px solid #007bff; /* Blue border for emphasis */
    border-radius: 8px; /* Rounds the corners */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Adds a soft shadow */
    text-align: center;
    margin-bottom: 20px; /* Adds spacing below the heading */
}

.resource-portal-title .gradient-text {
    background: linear-gradient(to right, #007bff, #FF6F61); /* Gradient from blue to red */
    -webkit-background-clip: text;
    color: transparent; /* Text is transparent to show the gradient */
    font-weight: bold;
    font-size: 32px; /* Larger font size for emphasis */
    white-space: pre-line;
}