/* ==========================
   Hero Section
========================== */

.hero-section{

    position:relative;

    min-height:calc(100vh - 73px);

    background:url("../images/hero.jpg") center center/cover no-repeat;

    display:flex;

    align-items:center;

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}



.hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:auto;

    text-align:center;

}



/* ==========================
   Hero Title
========================== */


.hero-title{

    color:#fff;

    font-size:68px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}


.hero-title span{

    color:#FFC107;

}



.hero-subtitle{

    color:#fff;

    font-size:66px;

    font-weight:800;

    margin-bottom:40px;

}



/* ==========================
   Hero Search Bar
========================== */


.hero-search{

    width:900px;
    max-width:95%;

    height:65px;

    margin:0 auto;

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border-radius:40px;

    padding:5px 10px 5px 20px;

}

.search-box{

    flex:1;

    height:50px;

    display:flex;

    align-items:center;

}


.search-box input{

    flex:1;

    height:50px;

    border:none !important;

    outline:none !important;

    background:transparent;

    font-size:17px;

    padding:0;

}


.search-box i{

    margin-right:12px;

    font-size:22px;

    color:#555;

}


.location-box{
    width:220px;
    height:60px;

    flex-shrink:0;

    border:2px solid #888;
    border-radius:35px;

    display:flex;
    align-items:center;

    gap:10px;
    padding:0 18px;

    position:relative;
    background:#fff;

    cursor:pointer;
}

.location-arrow{
    margin-left:auto;
    font-size:14px;
    color:#666;
    transition:transform .3s ease;
}

.location-box.active .location-arrow{
    transform:rotate(180deg);
}
.location-dropdown{

    display:none;

    position:absolute;

    top:70px;

    left:0;

    width:220px;

    background:#fff;

    border-radius:15px;

    padding:10px 0;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    z-index:9999;

}


.search-btn{
    background: #0D6EFD;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.search-btn:hover{
    background: #0B5ED7;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13,110,253,0.3);
}


/* ==========================
   Hero Stats
========================== */


.hero-stats{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:45px;

}



.hero-stats-card{

    width:220px;

    height:120px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:20px;

    box-shadow:

    0 8px 32px rgba(0,0,0,.25);

    transition:.3s;

}



.hero-stats-card h2{

    color:#FFC107;

    font-size:40px;

    font-weight:800;

    margin:0 0 8px;

}



.hero-stats-card p{

    color:#fff;

    font-size:16px;

    font-weight:600;

    margin:0;

}



.hero-stats-card:hover{

    transform:translateY(-6px);

}



/* ==========================
   Welcome Section
========================== */


.welcome-section{

    padding:120px 0;

    background:#061A40;

    text-align:center;

}



.welcome-title{

    font-family:'Noto Sans Tamil',sans-serif;

    font-size:90px;

    font-weight:800;

    color:#FFD54F;

    text-shadow:

    0 0 12px rgba(255,193,7,.9),

    0 0 30px rgba(255,193,7,.7),

    0 0 60px rgba(255,193,7,.5);

}


.welcome-title span{

    display:block;

}



/* ==========================
   Intro Section
========================== */


.intro-section{

    padding:100px 0;

    background:#fff;

    text-align:center;

}



.intro-title{

    font-size:55px;

    font-weight:800;

    color:#111;

}



.intro-title span{

    color:#2563EB;

}



.intro-text{

    font-size:22px;

    color:#222;

    max-width:750px;

    margin:auto;

    line-height:1.6;

}

.intro-badge{
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 20px;

    background:#fef9c3;
    color: #000;

    font-size: 15px;
    font-weight: 600;

    border: 2px solid #ddd;
    border-radius: 10px;
    border-color: #ddd;

    letter-spacing: 0.5px;
}



/* ==========================
   Categories
========================== */


.categories-section{

    padding:40px 0 80px;

    background:#fff;

}



.categories-wrapper{

    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 15px;
   

}



.category-card{

    flex: 1;
    min-width: 0;
    height: 145px;

    background: #fff;
    border-radius: 35px;
    box-shadow: 0 5px 25px rgba(0,0,0,.08);

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

    text-decoration: none;
    transition: .35s;

}



.category-card:hover{

    transform:translateY(-10px);

}



.category-card h6{

    margin-top:18px;

    color:#111;

    font-weight:700;

}



.category-icon{

    width:65px;

    height:65px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}



/* Icon Colors */


.jobs{

background:#eef2ff;

color:#4f46e5;

}


.tourism{

background:#ecfeff;

color:#06b6d4;

}


.news{

background:#fff1f2;

color:#be123c;

}


.offers{

background:#fff7ed;

color:#f97316;

}


.blood{

background:#fee2e2;

color:#dc2626;

}


.buy{

background:#fef9c3;

color:#ca8a04;

}


.event{

background:#fef3c7;

color:#d97706;

}




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


@media(max-width:992px){


.hero-title{

font-size:50px;

}


.hero-subtitle{

font-size:45px;

}


.hero-search{

flex-direction:column;

padding:15px;

}


.search-box,
.location-box,
.search-btn{

width:100%;

}


.categories-wrapper{

grid-template-columns:repeat(3,1fr);

}


.hero-stats{

flex-wrap:wrap;

}


}



@media(max-width:576px){


.hero-title{

font-size:38px;

}


.hero-subtitle{

font-size:34px;

}


.welcome-title{

font-size:55px;

}


.categories-wrapper{

grid-template-columns:repeat(2,1fr);

}


}