/* ========================= 
   GLOBAL 
========================= */ 
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
body { 
    font-family: Arial, sans-serif; 
    line-height: 1.6; 
    background: #f4f8fa; 
    color: #172b3a; 
} 
 
/* HEADER */
header { 
    background: #ffffff; 
    padding: 15px 6%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 25px; 
    border-bottom: 1px solid #e5edf0; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
} 

.logo-area { 
    display: flex; 
    align-items: center; 
} 

.brand-logo { 
    width: 150px; 
    height: auto; 
    display: block; 
} 

header > p { 
    color: #507080; 
    font-size: 14px; 
    margin-right: auto; 
    margin-left: 10px; 
} 

nav { 
    display: flex; 
    gap: 22px; 
    align-items: center; 
    flex-wrap: wrap; 
} 

nav a { 
    text-decoration: none; 
    color: #17384a; 
    font-weight: 600; 
    font-size: 15px; 
    transition: 0.3s; 
    white-space: nowrap; 
} 

nav a:hover { 
    color: #00a6a6; 
} 

/* HERO */
.hero { 
    min-height: 650px; 
    background-image: 
        linear-gradient( 
            90deg, 
            rgba(3, 25, 48, 0.98) 0%, 
            rgba(3, 31, 55, 0.92) 35%, 
            rgba(3, 31, 55, 0.35) 62%, 
            rgba(3, 31, 55, 0.05) 100% 
        ), 
        url("images/hero.png"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    display: flex; 
    align-items: center; 
    padding: 80px 7%; 
    text-align: left; 
} 

.hero-content { 
    max-width: 560px; 
    color: white; 
} 

.hero-content h1 { 
    font-size: 58px; 
    line-height: 1.1; 
    margin-bottom: 22px; 
    font-weight: 800; 
} 

.hero-content p { 
    font-size: 19px; 
    line-height: 1.7; 
    color: #d8edf2; 
    margin-bottom: 10px; 
} 

/* HERO BUTTON */
.hero-content > a button { 
    margin-top: 20px; 
} 

/* JOIN */
.join-sevamitra { 
    margin-top: 38px; 
    max-width: 500px; 
} 

.join-sevamitra h2 { 
    color: #ffffff; 
    font-size: 28px; 
    margin-bottom: 8px; 
} 

.join-sevamitra p { 
    color: #d8edf2; 
    font-size: 16px; 
    margin-bottom: 5px; 
} 

.join-sevamitra button { 
    margin-top: 12px; 
} 

/* BUTTONS */
button { 
    border: none; 
    padding: 14px 28px; 
    margin-top: 20px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 16px; 
    font-weight: bold; 
    background: #08b5b5; 
    color: white; 
    transition: 0.3s; 
} 

button:hover { 
    background: #078e9a; 
    transform: translateY(-2px); 
} 

/* GENERAL */
section { 
    padding: 75px 7%; 
    text-align: center; 
} 

h2 { 
    font-size: 36px; 
    margin-bottom: 12px; 
    color: #12364a; 
} 

.section-subtitle { 
    color: #667d88; 
    margin-bottom: 35px; 
} 

/* ₹49 OFFER */
.seva-offer { 
    background: #f4f8fa; 
    padding: 55px 7%; 
} 

.offer-content { 
    max-width: 850px; 
    margin: auto; 
    padding: 40px 30px; 
    background: #ffffff; 
    border: 1px solid #dcecef; 
    border-radius: 22px; 
    box-shadow: 0 12px 35px rgba(10, 45, 65, 0.10); 
    position: relative; 
    overflow: hidden; 
} 

.offer-content::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 5px; 
    background: linear-gradient(90deg, #08b5b5, #078e9a); 
} 

.offer-badge { 
    display: inline-block; 
    padding: 7px 15px; 
    border-radius: 20px; 
    background: #e6f8f8; 
    color: #087f8c; 
    font-size: 12px; 
    font-weight: 800; 
    letter-spacing: 1px; 
} 

.offer-content h2 { 
    margin-top: 15px; 
    margin-bottom: 5px; 
    color: #12364a; 
} 

.offer-price {
    font-size: clamp(18px, 3vw, 30px);
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: 800;
    color: #087f8c;
    padding: 8px 0;
}
.offer-title { 
    font-size: 20px; 
    font-weight: 700; 
    color: #153b50; 
    margin-top: 8px; 
} 

.offer-description { 
    max-width: 650px; 
    margin: 10px auto 0; 
    color: #667d88; 
    font-size: 15px; 
} 

.offer-button { 
    display: inline-block; 
    margin-top: 22px; 
    padding: 12px 30px; 
    border-radius: 8px; 
    background: #06344d; 
    color: #ffffff; 
    text-decoration: none; 
    font-weight: 700; 
    transition: 0.3s; 
} 

.offer-button:hover { 
    background: #087f8c; 
    color: #ffffff; 
    transform: translateY(-2px); 
} 

/* SERVICES */
#services { 
    background: #ffffff; 
} 

.services-container { 
    max-width: 1200px; 
    margin: 35px auto 0; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
} 

.service-card { 
    background: #ffffff; 
    border-radius: 18px; 
    overflow: hidden; 
    border: 1px solid #e2ecef; 
    box-shadow: 0 10px 30px rgba(10, 45, 65, 0.08); 
    text-align: left; 
    transition: 0.3s; 
} 

.service-card:hover { 
    transform: translateY(-7px); 
    box-shadow: 0 18px 40px rgba(10, 45, 65, 0.14); 
} 

.service-card img { 
    width: 100%; 
    height: 220px; 
    object-fit: cover; 
    display: block; 
} 

.service-content { 
    padding: 22px; 
} 

.service-content h3 { 
    font-size: 21px; 
    margin-bottom: 8px; 
    color: #153b50; 
} 

.service-content p { 
    color: #667d88; 
    font-size: 15px; 
} 

.call-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #06344d; 
    color: #ffffff; 
    padding: 10px 18px; 
    border-radius: 7px; 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: bold; 
    margin-top: 15px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

.call-btn:hover { 
    background: #087f8c; 
    color: #ffffff; 
    transform: translateY(-2px); 
} 

.service-placeholder { 
    height: 220px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 70px; 
    background: linear-gradient(135deg, #e5f8f8, #dcecf5); 
} 

#support { 
    background: white; 
} 

#support p { 
    color: #607984; 
} 

footer { 
    text-align: center; 
    padding: 30px; 
    background: #06283d; 
    color: #d8edf2; 
} 

/* TABLET */
@media (max-width: 900px) { 
    .services-container { 
        grid-template-columns: repeat(2, 1fr); 
    } 

    .hero-content h1 { 
        font-size: 46px; 
    } 

    nav { 
        gap: 15px; 
    } 
} 

/* MOBILE */
@media (max-width: 768px) { 
    header { 
        flex-direction: column; 
        padding: 18px 5%; 
        gap: 10px; 
    } 

    header > p { 
        margin: 0; 
    } 

    nav { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 12px 15px; 
    } 

    nav a { 
        font-size: 14px; 
    } 

    .brand-logo { 
        width: 140px; 
    } 

    .hero { 
        min-height: 650px; 
        padding: 60px 6%; 
        background-position: 65% center; 
    } 

    .hero-content { 
        max-width: 100%; 
    } 

    .hero-content h1 { 
        font-size: 40px; 
    } 

    .hero-content p { 
        font-size: 17px; 
    } 

    .join-sevamitra { 
        margin-top: 30px; 
    } 

    .join-sevamitra h2 { 
        font-size: 25px; 
    } 

    .join-sevamitra p { 
        font-size: 15px; 
    } 

    .seva-offer { 
        padding: 50px 6%; 
    } 

    .offer-content { 
        padding: 32px 20px; 
    } 

    .offer-content h2 { 
        font-size: 28px; 
    } 

    .offer-price {
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 800;
    color: #087f8c;
    overflow-wrap: anywhere;
}

    .offer-title { 
        font-size: 18px; 
    } 

    .offer-description { 
        font-size: 14px; 
    } 

    .services-container { 
        grid-template-columns: 1fr; 
    } 

    section { 
        padding: 60px 6%; 
    } 

    h2 { 
        font-size: 30px; 
    } 
}