/* =========================================
   HOME PAGE STYLES (index.css)
   ========================================= */

/* --- HERO SECTION --- */
.hero { 
    /* Dhyaan dein: Yahan image path background ke liye 'images/bg.jpg' set kiya hai */
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/bg.jpg') center/cover no-repeat; 
    text-align: center; 
    color: var(--white); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 0 20px;
    height: 90vh; 
}

.hero h1 { 
    font-size: 3.5rem; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3); 
    margin-bottom: 15px; 
}

.hero p { 
    font-size: 1.1rem; 
    max-width: 600px; 
    margin-bottom: 30px; 
    opacity: 0.9; 
}

/* --- BUTTONS --- */
.btn { 
    padding: 12px 35px; 
    background: var(--primary); 
    color: var(--white); 
    font-weight: 600; 
    border-radius: 30px; 
    transition: 0.3s; 
    border: 2px solid var(--primary); 
    display: inline-block;
}

.btn:hover { 
    background: transparent; 
    color: var(--white); 
}

.btn-outline {
    background: transparent;
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}

/* --- ABOUT PREVIEW --- */
.about-preview { 
    padding: 80px 10%; 
    text-align: center; 
    background: var(--white); 
}

.about-preview h2 { 
    font-size: 2.5rem; 
    margin-bottom: 20px; 
    color: var(--primary); 
}

.about-preview p { 
    max-width: 800px; 
    margin: 0 auto 30px; 
    color: var(--text-light); 
    line-height: 1.8; 
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .hero { height: 70vh; }
    .hero h1 { font-size: 2.2rem; }
    .about-preview { padding: 50px 5%; }
    .about-preview h2 { font-size: 2rem; }
}