/*=========================================================
 DIGITAL ENCYCLOPEDIC HEALTH (DEH)

 A Project of Digital Encyclopedic Tech (DET)

 File: health.css
 Version: 1.0

 Motto:
 Learn • Prevent • Treat • Live Well
==========================================================*/


/*=========================================================
 GOOGLE FONT
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');


/*=========================================================
 ROOT VARIABLES
==========================================================*/

:root{

--primary:#0A66C2;
--secondary:#2E8B57;
--gold:#F4B400;

--white:#ffffff;
--light:#f8fafc;
--gray:#6b7280;
--dark:#1f2937;

--shadow:0 10px 30px rgba(0,0,0,.08);

--radius:12px;

--transition:.35s;

--max-width:1300px;

}


/*=========================================================
 RESET
==========================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Open Sans',sans-serif;

background:var(--light);

color:var(--dark);

line-height:1.7;

overflow-x:hidden;

}


/*=========================================================
 COMMON
==========================================================*/

img{

max-width:100%;
display:block;

}


a{

text-decoration:none;

color:inherit;

}


ul{

list-style:none;

}


.container{

width:90%;

max-width:var(--max-width);

margin:auto;

}


/*=========================================================
 HEADER
==========================================================*/

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

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

backdrop-filter:blur(18px);

box-shadow:var(--shadow);

}


/*=========================================================
 NAVBAR
==========================================================*/

.navbar{

width:90%;

max-width:1300px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 0;

}


.logo-area{

display:flex;

align-items:center;

gap:15px;

}


.logo-area img{

width:70px;

height:70px;

object-fit:contain;

}


.logo-text h1{

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

font-size:28px;

font-weight:700;

color:var(--primary);

}


.logo-text p{

font-size:14px;

color:var(--gray);

margin-top:2px;

}


/*=========================================================
 MENU
==========================================================*/

.nav-links{

display:flex;

align-items:center;

gap:30px;

}


.nav-links a{

font-weight:600;

transition:var(--transition);

position:relative;

}


.nav-links a:hover{

color:var(--primary);

}


.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

}


.nav-links a:hover::after{

width:100%;

}


/*=========================================================
 RIGHT SIDE
==========================================================*/

.nav-right{

display:flex;

align-items:center;

gap:15px;

}


/*=========================================================
 BUTTONS
==========================================================*/

#darkMode{

width:46px;

height:46px;

border:none;

cursor:pointer;

border-radius:50%;

background:var(--primary);

color:white;

font-size:20px;

transition:.3s;

}


#darkMode:hover{

transform:rotate(20deg);

}


.menuButton{

display:none;

width:46px;

height:46px;

border:none;

border-radius:8px;

background:var(--secondary);

color:white;

font-size:24px;

cursor:pointer;

}


/*=========================================================
 HERO
==========================================================*/

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:160px 20px 80px;

background:linear-gradient(rgba(10,102,194,.90),
rgba(10,102,194,.90)),
url("../images/hero/health-bg.jpg");

background-size:cover;

background-position:center;

color:white;

}


.hero-content{

max-width:900px;

}


.hero-content h3{

font-size:24px;

font-weight:400;

margin-bottom:10px;

}


.hero-content h1{

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

font-size:62px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}


.hero-content h2{

font-size:30px;

color:#FFD54F;

margin-bottom:20px;

}


.hero-content p{

font-size:20px;

margin-bottom:40px;

opacity:.95;

}


/*=========================================================
 SEARCH
==========================================================*/

.search-box{

display:flex;

background:white;

border-radius:60px;

overflow:hidden;

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

margin:auto;

max-width:700px;

}


.search-box input{

flex:1;

padding:20px;

border:none;

outline:none;

font-size:18px;

}


.search-box button{

border:none;

padding:20px 35px;

background:var(--secondary);

color:white;

font-size:18px;

cursor:pointer;

transition:.3s;

}


.search-box button:hover{

background:#256d46;

}


/*=========================================================
 POPULAR SEARCHES
==========================================================*/

.popular-searches{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}


.popular-searches span{

font-weight:bold;

}


.popular-searches a{

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

padding:8px 18px;

border-radius:30px;

transition:.3s;

}


.popular-searches a:hover{

background:white;

color:var(--primary);

}


/*=========================================================
 SCROLL DOWN
==========================================================*/

.scrollDown{

margin-top:70px;

font-size:40px;

animation:bounce 2s infinite;

}


@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-12px);

}

60%{

transform:translateY(-6px);

}

}
/*==========================================
DISEASE CATEGORIES
==========================================*/

.disease-categories{

padding:80px 8%;

background:#f8fafc;

}

.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title h2{

font-size:38px;

color:#0A66C2;

margin-bottom:10px;

font-family:Poppins,sans-serif;

}

.section-title p{

font-size:18px;

color:#666;

}

.category-buttons{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

margin-top:40px;

}

.category-btn{

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:18px;

background:white;

border-radius:12px;

font-size:18px;

font-weight:600;

color:#333;

text-decoration:none;

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

transition:.3s;

}

.category-btn:hover{

background:#0A66C2;

color:white;

transform:translateY(-8px);

}/*==========================================
FEATURED DISEASES
==========================================*/

.featured-diseases{

padding:80px 8%;

background:#ffffff;

}

.disease-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-top:50px;

}

.disease-card{

background:#fff;

border-radius:15px;

overflow:hidden;

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

transition:.3s;

}

.disease-card:hover{

transform:translateY(-10px);

}

.disease-card img{

width:100%;

height:220px;

object-fit:cover;

}

.disease-card h3{

padding:20px 20px 10px;

font-size:24px;

color:#0A66C2;

}

.disease-card p{

padding:0 20px;

color:#666;

line-height:1.7;

}

.disease-card a{

display:inline-block;

margin:20px;

padding:12px 24px;

background:#0A66C2;

color:white;

border-radius:8px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.disease-card a:hover{

background:#2E8B57;

}