*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    display:flex;
    justify-content:center;
    align-items:center;

    height:100vh;

    background:#f4f4f4;
    background-image: url(bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.slider{

    display:flex;
    align-items:center;
    gap:20px;
}

img{

    width:500px;
    height:300px;

    object-fit:cover;

    border-radius:10px;

    box-shadow:0 0 10px gray;
}

button{

    font-size:25px;

    padding:10px 20px;

    cursor:pointer;
}

/* Marquee Container */
.marquee-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    background: #3178c9;
    padding: 15px 0;
    z-index: 1000;
}

/* Scrolling Text */
.marquee {
    display: inline-block;
    white-space: nowrap;
    color: #FFD700;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-transform: uppercase;

    /* Start outside the screen */
    padding-left: 100%;

    /* Animation */
    animation: marquee 12s linear infinite;
}

/* Animation */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* ==========================
   Mobile Responsive
========================== */

@media (max-width: 768px) {

    .slider {
        gap: 10px;
    }

    img {
        width: 280px;
        height: 180px;
    }

    button {
        font-size: 18px;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {

    .slider {
        flex-direction: column;
        gap: 15px;
    }

    img {
        width: 100%;
        max-width: 320px;
        height: auto;
    }

    button {
        width: 120px;
        font-size: 16px;
        padding: 8px 10px;
    }
}