/* ==========================================================
   IPSO Website v1.0
   Indian Pharmaceutical Services Organisation
   ========================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#f5f7fb;

color:#222;

line-height:1.7;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

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

header{

background:#ffffff;

position:sticky;

top:0;

z-index:999;

box-shadow:0 2px 12px rgba(0,0,0,0.08);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo h2{

color:#0a4a8a;

font-size:32px;

font-weight:800;

}

.logo span{

font-size:13px;

color:#777;

}

nav ul{

display:flex;

list-style:none;

gap:25px;

}

nav a{

text-decoration:none;

color:#333;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#0a4a8a;

}

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

.hero{

background:linear-gradient(rgba(6,35,74,.88),rgba(8,92,148,.82)),
url("https://images.unsplash.com/photo-1581093458791-9f3c3900df4b?auto=format&fit=crop&w=1600&q=80");

background-size:cover;

background-position:center;

color:white;

text-align:center;

padding:120px 20px;

}

.hero h1{

font-size:56px;

font-weight:700;

line-height:1.2;

margin-bottom:25px;

}

.hero span{

color:#6fd3ff;

}

.hero p{

max-width:800px;

margin:auto;

font-size:20px;

margin-bottom:40px;

}

.btn{

display:inline-block;

background:white;

color:#0a4a8a;

padding:15px 35px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn:hover{

background:#0a4a8a;

color:white;

}

/* ================= STATS ================= */

.stats{

padding:70px 0;

}

.stats-grid{

display:grid;

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

gap:25px;

}

.card{

background:white;

padding:35px;

border-radius:15px;

text-align:center;

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

}

.card h2{

color:#0a4a8a;

font-size:38px;

margin-bottom:10px;

}

/* ================= SECTIONS ================= */

section{

padding:80px 0;

}

section h2{

text-align:center;

font-size:38px;

margin-bottom:20px;

color:#0a4a8a;

}

section p{

font-size:17px;

}

.section-subtitle{

text-align:center;

max-width:800px;

margin:0 auto 40px;

color:#666;

}

/* ================= VISION ================= */

.two-column{

display:grid;

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

gap:40px;

}

.two-column div{

background:white;

padding:35px;

border-radius:15px;

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

}

/* ================= OBJECTIVES ================= */

.objective-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.objective-grid div{

background:white;

padding:30px;

border-radius:15px;

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

transition:.3s;

}

.objective-grid div:hover{

transform:translateY(-6px);

}

.objective-grid h3{

color:#0a4a8a;

margin-bottom:10px;

}

/* ================= LEADERS ================= */

.leaders{

display:grid;

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

gap:25px;

margin-top:40px;

}

.leader{

background:white;

padding:30px;

border-radius:15px;

text-align:center;

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

}

.leader h3{

color:#0a4a8a;

margin-bottom:10px;

}

/* ================= MEMBERS ================= */

.member-grid{

display:grid;

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

gap:20px;

margin-top:40px;

}

.member-card{

background:white;

padding:22px;

border-left:5px solid #0a4a8a;

border-radius:10px;

box-shadow:0 6px 18px rgba(0,0,0,.07);

font-weight:600;

}

/* ================= MEMBERSHIP ================= */

.membership-grid{

display:grid;

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

gap:30px;

margin-top:40px;

}

.membership-card{

background:white;

padding:35px;

border-radius:15px;

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

}

.membership-card h3{

color:#0a4a8a;

margin-bottom:20px;

}

.membership-card ul{

margin-top:20px;

padding-left:20px;

}

.membership-card li{

margin-bottom:12px;

}

/* ================= COMMITTEES ================= */

.committee-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.committee-card{

background:#0a4a8a;

color:white;

padding:35px;

text-align:center;

border-radius:12px;

font-weight:600;

transition:.3s;

}

.committee-card:hover{

background:#063865;

}

/* ================= EVENTS ================= */

#events{

text-align:center;

background:#eef5fb;

}

.coming{

font-size:18px;

margin-bottom:30px;

}

.btn-secondary{

display:inline-block;

background:#0a4a8a;

color:white;

padding:15px 35px;

border-radius:40px;

text-decoration:none;

}

/* ================= CONTACT ================= */

.contact-box{

background:white;

padding:40px;

border-radius:15px;

max-width:700px;

margin:auto;

text-align:center;

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

}

.contact-box h3{

color:#0a4a8a;

margin-bottom:20px;

}

/* ================= FOOTER ================= */

footer{

background:#082c52;

color:white;

padding:60px 0;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:40px;

}

footer ul{

list-style:none;

}

footer li{

margin-bottom:10px;

}

footer a{

color:white;

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}

footer p{

color:#ddd;

}

/* ================= MOBILE ================= */

@media(max-width:992px){

.stats-grid,

.objective-grid,

.leaders,

.member-grid,

.membership-grid,

.committee-grid,

.footer-grid,

.two-column{

grid-template-columns:1fr;

}

.hero h1{

font-size:40px;

}

header .container{

flex-direction:column;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

margin-top:20px;

}

}