@import '/Portals/_default/cft-mini-overrides.css';
/*----------------------------------------------------------------------------*/
:root {
    --primary-color-h: 218;
    --primary-color-s: 100%;
    --primary-color-l: 20%;
    --primary-color-a: 1;
}

/* Base Banner Styles */
.cft-mini .home.banner.banner__hero {
   position: relative; /* This ensures the pseudo-element is positioned relative to the banner */
    height: 100vh; /* This can be adjusted if necessary */
    padding-bottom: 10rem;
    background: url(/Portals/cft-holy-cross-charism/Images/HCCI-Hero-4.png) fixed;
    display: flex; /* Flexbox display */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

.cft-mini .banner.banner__hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-banner-shadowNEW);
    z-index: 0;
}

.cft-mini .home.banner.banner__hero .banner--container {
    padding: 6rem 1.5rem 12rem;
    margin: 0 auto;
    max-width: var(--site-width,2000px);
    position: relative;
    z-index: 10;
}

/* Typography and Banner Content */
.cft-mini .banner.banner__hero .banner--container h1 {
    font-size: clamp(2rem, 2vw + 1rem, 3rem);
}

.cft-mini .banner.banner__hero .banner--container p {
    font-size: clamp(0.9rem, 2vw, 1.5rem);
}

.cft-mini .banner.banner__hero .banner--container .banner--content.bg {
    padding: 1.5rem 2rem;
    max-width: 750px;
    width: 100%; /* This ensures the content scales responsively */
    margin-left: 0; /* This ensures the content is centered */
    text-align: center; /* Center the text within each item */
}

/* Responsive Content Styles */
.banner--content.bg {
    width: 500px;
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
}

/* Adjust image size for responsiveness */
.banner--content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .banner--content.bg {
        width: 100%; /* Full width on small screens */
        margin-left: 0; /* Remove left margin */
        padding: 1rem; /* Adjust padding for small screens */
    }
}

/* Adjust h1 size specifically for smaller screens */
@media (max-width: 768px) {
    .cft-mini .banner.banner__hero .banner--container h1 {
        font-size: 1.8rem; /* Adjust this value as needed */
    }
    
    .cft-mini .home.banner.banner__hero {
        height: auto; /* This allows the banner to grow with its content */
    }
}
/* Adjust h1 size specifically for very small screens */
@media (max-width: 280px) {
    .cft-mini .banner.banner__hero .banner--container h1 {
        font-size: 1.5rem; /* Reduce the font size for very small screens */
    }
    
    .cft-mini .banner.banner__hero .banner--container p {
        font-size: 0.8rem; /* Adjust other text sizes as needed */
    }
}
@media (max-width: 280px) {
    .cft-mini .banner.banner__hero .banner--container .banner--content.bg {
        padding: 0.5rem 1rem; /* Reduce padding for very small screens */
        width: 90%; /* Allow a bit more width flexibility */
    }
}
@media (max-width: 280px) {
    .banner--content img {
        width: 70%; /* You might want to scale down the image for very small screens */
        height: auto;
    }
}