/* ==============================
   CORNER STONE MEDICAL EDUCATION
   PREMIUM BLACK & GOLD THEME
================================ */


:root {

--black:#090b10;
--dark:#11151d;
--card:#171c26;
--gold:#d4af37;
--gold-light:#f2cf63;
--white:#ffffff;
--gray:#a8afbd;
--border:rgba(255,255,255,.08);

}



* {

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

}



html {

scroll-behavior:smooth;

}



body {

font-family:'Montserrat',sans-serif;
background:var(--black);
color:var(--white);
line-height:1.7;
overflow-x:hidden;

}



img {

max-width:100%;
display:block;

}



a {

text-decoration:none;
color:inherit;

}



.container {

width:90%;
max-width:1200px;
margin:auto;

}







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



.header {

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

background:rgba(9,11,16,.75);
backdrop-filter:blur(15px);

border-bottom:1px solid var(--border);

}



.nav-container {

height:85px;

display:flex;
align-items:center;
justify-content:space-between;

}



.logo img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
}



.navigation ul {

display:flex;
align-items:center;
gap:30px;
list-style:none;

}



.navigation a {

color:#ddd;
font-size:14px;
font-weight:500;
transition:.3s;

}



.navigation a:hover {

color:var(--gold);

}






/* Dropdown */


.dropdown {

position:relative;

}


.dropdown-menu {

position:absolute;
top:35px;
left:0;

background:#151923;

width:220px;

display:none!important;
flex-direction:column;

padding:15px;

border-radius:12px;

border:1px solid var(--border);

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

}



.dropdown:hover .dropdown-menu {

display:flex!important;

}


.dropdown-menu li {

padding:8px 0;

}





.btn-primary {


background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);


color:#000;

padding:13px 25px;

border-radius:30px;

font-weight:700;

transition:.4s;

}



.btn-primary:hover {

transform:translateY(-3px);

box-shadow:
0 10px 30px rgba(212,175,55,.35);

}





.btn-outline {


border:1px solid var(--gold);

padding:12px 25px;

border-radius:30px;

color:var(--gold);

transition:.3s;

}



.btn-outline:hover {

background:var(--gold);
color:#000;

}





.mobile-menu {

display:none;

background:none;
border:none;

font-size:28px;

color:white;

}








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



.hero {

height:100vh;

display:flex;

align-items:center;

position:relative;

background:

linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.9)
),

url("../assets/images/hero-campus.jpg");

background-size:cover;
background-position:center;

}



.hero-content {

position:relative;
z-index:2;

text-align:center;

}



.tagline {

color:var(--gold);

letter-spacing:3px;

font-size:14px;

margin-bottom:20px;

}



.hero h1 {

font-size:60px;

line-height:1.2;

font-weight:800;

}



.hero h1 span {

color:var(--gold);

}



.hero p {

max-width:700px;

margin:25px auto;

color:#ddd;

font-size:18px;

}



.hero-buttons {

display:flex;

justify-content:center;

gap:20px;

margin-top:35px;

}







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


.section {

padding:100px 0;

}



.dark-section {

background:#0d1017;

}




.section-title {

text-align:center;

margin-bottom:60px;

}



.section-title h2 {

font-size:38px;

color:var(--gold);

}



.section-title p {

color:var(--gray);

}







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



.stats {

padding:40px 0;

background:#0d1017;

}



.stats-grid {


display:grid;

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

gap:25px;


}



.stat-card {


background:var(--card);

border:1px solid var(--border);

padding:35px;

text-align:center;

border-radius:20px;

transition:.4s;

}



.stat-card:hover {

transform:translateY(-10px);

border-color:var(--gold);

}



.stat-card h2 {

font-size:42px;

color:var(--gold);

}





.stat-card p {

color:var(--gray);

}







/* ================= CARDS ================= */



.cards-grid {


display:grid;

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

gap:25px;


}



.info-card,
.service-card {


background:var(--card);

padding:35px;

border-radius:20px;

border:1px solid var(--border);

transition:.4s;

}



.info-card:hover,
.service-card:hover {

transform:translateY(-10px);

border-color:var(--gold);

}



.icon {

font-size:40px;

margin-bottom:20px;

}



.info-card h3,
.service-card h3 {

margin-bottom:15px;

color:var(--gold);

}



.info-card p,
.service-card p {

color:var(--gray);

}







/* ================= TIMELINE ================= */


.timeline {

max-width:800px;

margin:auto;

}



.timeline-item {

display:flex;

gap:30px;

margin-bottom:40px;

}



.number {

min-width:60px;
height:60px;

border-radius:50%;

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

background:var(--gold);

color:#000;

font-weight:800;

}








/* ================= CONTENT BOX ================= */


.content-box {


background:var(--card);

padding:40px;

border-radius:20px;

border:1px solid var(--border);

}



.check-list {

list-style:none;

}



.check-list li {


margin-bottom:15px;

color:#ddd;

padding-left:30px;

position:relative;

}



.check-list li::before {


content:"✓";

position:absolute;

left:0;

color:var(--gold);

font-weight:bold;

}







/* ================= GALLERY ================= */



.gallery-grid {


display:grid;

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

gap:25px;


}



.gallery-card {


background:var(--card);

border-radius:20px;

overflow:hidden;

}



.gallery-card img {

height:260px;

width:100%;

object-fit:cover;

}



.gallery-card h3 {

padding:20px;

color:var(--gold);

}








/* ================= TABLE ================= */



.table-wrapper {

overflow:auto;

}



table {

width:100%;

border-collapse:collapse;

background:var(--card);

}



th {

background:#000;

color:var(--gold);

}



td,th {

padding:20px;

border-bottom:1px solid var(--border);

}








/* ================= FAQ ================= */


.faq-item {

margin-bottom:15px;

background:var(--card);

border-radius:15px;

overflow:hidden;

}



.faq-item button {


width:100%;

background:none;

border:none;

color:white;

padding:20px;

display:flex;

justify-content:space-between;

font-size:16px;

cursor:pointer;

}



.faq-answer {

display:none;

padding:0 20px 20px;

color:var(--gray);

}








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



.contact-section {

padding:100px 0;

}



.contact-card {


max-width:700px;

margin:auto;

text-align:center;

background:var(--card);

padding:50px;

border-radius:25px;

border:1px solid var(--border);

}



.contact-card h2 {

color:var(--gold);

font-size:35px;

}



.contact-buttons {

margin:30px 0;

display:flex;

justify-content:center;

gap:20px;

}








/* WHATSAPP */


.whatsapp-float {


position:fixed;

right:25px;

bottom:25px;

height:60px;

width:60px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:999;

}








/* FOOTER */


footer {

padding:40px;

text-align:center;

background:#050608;

color:var(--gray);

}



footer img {

width:160px;

margin:auto auto 20px;

}








/* ANIMATION */


.reveal {


opacity:0;

transform:translateY(40px);

transition:1s;

}



.reveal.active {

opacity:1;

transform:none;

}








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


@media(max-width:900px){


.navigation {

display:none;

}



.mobile-menu {

display:block;

}



.hero h1 {

font-size:38px;

}



.stats-grid,
.cards-grid,
.gallery-grid {

grid-template-columns:1fr;

}



.hero-buttons,
.contact-buttons {

flex-direction:column;

}



.dropdown-menu {

position:static;

}



}