/* Import required fonts: Inter (for main title) and Saira Condensed (for category/metadata) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Saira+Condensed:wght@700&display=swap');



/* --- GLOBAL STYLES --- */

html, body {

    margin: 0;

    padding: 0;

    width: 100%;

    overflow-x: hidden;

    font-family: 'Inter', sans-serif;

    box-sizing: border-box;

}



*, *::before, *::after {

    box-sizing: inherit;

}



/* --- SLIDER CONTAINER --- */

.live-slider {

    position: relative;

    width: 100vw;

    max-width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    height: 80vh;

}



/* --- SLIDES AND OVERLAY --- */

.live-slide {

    position: absolute;

    top: 0px;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 1s ease-in-out;

    isolation: isolate; 

}



.live-slide.active {

    opacity: 1;

    z-index: 2;

}



.live-slide::before {

    content: '';

    position: absolute;

    top: 0px;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.2); 

    z-index: 1;

}



.live-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: brightness(80%);

}



/* --- TEXT STYLING AND POSITIONING (CENTERED) --- */

.live-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /* center horizontally and vertically */

    width: 95%;       /* increased width for longer headings */

    max-width: 1200px; /* slightly wider max width */

    text-align: left;

    color: #fff;

    z-index: 3;

    padding: 0 10px; /* small padding for edges */

}



/* Category */

.live-category {

    font-family: 'Saira Condensed', sans-serif;

    font-size: 15.9px; 

    font-weight: 700; 

    text-transform: uppercase;

    letter-spacing: 0.2px; 

    line-height: 24px; 

    color: #fff;

    margin-bottom: 0.5rem;

    opacity: 0.7; 

}



/* Main Title */

.live-title {

    font-family: 'Inter', sans-serif;

    font-weight: 900; 

    font-size: clamp(2.5rem, 5vw, 4rem); 

    line-height: 1.1;

    margin-bottom: 1rem;

    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

}



/* Live indicator (red part) */

.live-title .live {

    color: #ff4d4d;

    margin-right: 0.5rem;

}



/* Metadata */

.live-metadata {

    font-family: 'Saira Condensed', sans-serif;

    font-size: 14px; 

    font-weight: 700; 

    line-height: 23.8px; 

    color: rgba(255, 255, 255, 0.8);

    margin-top: 1rem;

    text-transform: uppercase;

    letter-spacing: 0;

}



/* --- RESPONSIVENESS --- */

@media (max-width: 1024px) {

    .live-slider { height: 60vh; }

    .live-text {

        width: 96%;       /* wider for tablet */

        padding: 0 15px;  /* small readable gap */

    }

    .live-title { font-size: clamp(1.8rem, 5vw, 2.5rem); }

}



@media (max-width: 768px) {

    .live-slider { height: 60vh; }

    .live-text {

        width: 96%;

        padding: 0 15px;

    }

    .live-title { font-size: clamp(1.8rem, 5vw, 2.5rem); }

}



@media (max-width: 480px) {

    .live-slider { height: 50vh; }

    .live-text {

        width: 92%;       /* slightly smaller for mobile */

        padding: 0 10px;

    }

    .live-title { font-size: clamp(1.5rem, 6vw, 2rem); }

}

/* --- CTA & Description Styles --- */



.live-desc {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.85);

    margin: 0.8rem 0 1.5rem;

    max-width: 600px;

    line-height: 1.6;

}



.live-btn {

    display: inline-block;

    background-color: #ffffff;

    color: #000;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 14px;

    padding: 12px 26px;

    border-radius: 30px;

    text-decoration: none;

    letter-spacing: 0.5px;

    transition: all 0.3s ease;

}



.live-btn:hover {

    background-color: #ff4d4d;

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4);

}



/* Responsive tweaks */

@media (max-width: 768px) {

    .live-desc {

        font-size: 0.9rem;

        margin: 0.6rem 0 1.2rem;

    }

    .live-btn {

        font-size: 13px;

        padding: 10px 22px;

    }

}