/*
File: public/assets/css/sections/hero.css
Description: Styling for the main static hero section (FIXED for visibility).
*/

/* 🚨 Hero Container (Full Height aur Relative Positioning) 🚨 */
.hero-section {
    min-height: 100vh;
    height: 100vh;
    position: relative; /* Image aur Caption ko position karne ke liye zaroori */
    overflow: hidden;
}

/* 🚨 Image aur Image Container Styling 🚨 */
/* Sirf ye classes zaroori hain */
.hero-image-container,
.hero-section img {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-section img {
    object-fit: cover;
    /* Image Overlay (Dark and Blur) */
    filter: brightness(55%) blur(1px);
    transition: filter 0.5s ease-in-out;
}

/* 🚨 Caption Styling (Ab yeh class direct Hero Section ke andar hai) 🚨 */
.hero-caption {
    position: absolute; /* Static Hero mein Caption ko dikhane ke liye zaroori */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */

    bottom: unset;
    width: 90%;
    max-width: 900px;
    z-index: 10;
}

/* Button style (Outline button ki ab zaroorat nahi) */
.btn-outline-light {
    border: none;
}