.banner{
    background: url("../images/banner/public/xl.JPG");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;  /* Changed from center 45% to center center */
    min-height: 100vh;
    width: 100%;
}

/* Large desktop/laptop (1281px and above) - Use XL image with center positioning */
@media screen and (min-width: 1281px) {
    .banner {
        background-image: url('../images/banner/public/xl.JPG');
        background-position: center center;  /* Keep both people visible */
        background-size: cover;
        min-height: 100vh;
    }
}

/* Medium screens (1025px to 1280px) - Use LG image centered */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .banner {
        background-image: url('../images/banner/public/lg.JPG');
        background-position: center center;
        background-size: cover;
        min-height: 100vh;
    }
}

/* Tablet/iPad (769px to 1024px) - Use mobile image */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .banner {
        background-image: url('../images/banner/public/sm.png');
        background-position: center center;
        background-size: cover;
        min-height: 100vh;
    }
}

/* Mobile devices (768px and below) */
@media screen and (max-width: 768px) {
    .banner {
        background-image: url('../images/banner/public/sm.png');
        background-position: center center;
        min-height: 100vh;
        background-attachment: scroll;
    }
    body {
        background-color: #f8f9fa !important;
    }
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Animations */
.animate-slideIn { animation: slideIn 1s ease-out forwards; }
.animate-fadeIn { animation: fadeIn 1s ease-out forwards; }
.animate-scaleIn { animation: scaleIn 1s ease-out forwards; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}