@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root{
  --primary:#0b5ed7;      
  --secondary:#f2f2f2;    
  --accent:#198754;     
  --dark:#000000;
  --white:#ffffff;
}

body{
  font-family: "Quicksand", sans-serif;
  background:#ffffff;
  color:#333;
}

body::-webkit-scrollbar {
    width: 0.6em;
} 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
} 
body::-webkit-scrollbar-thumb {
  background-color: #39ac73;
  /*outline: 0px solid #799d22; */ 
}

/* ===== Top Header ===== */
.top-header{
/*  background:var(--secondary);*/
  color:var(--dark);
  font-size:14px;
  border-bottom: 1px solid var(--secondary);
}

/* ===== Navbar ===== */
.navbar{
  background:#ffffff;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.navbar-brand{
  font-weight:700;
  color:var(--primary) !important;
}
.nav-link{
  font-weight:500;
  color: black;
  margin-right:8px;
  font-family: "Quicksand", sans-serif;
}
.nav-link:hover{
  color:var(--primary);
}

/* ===== Hero Section ===== */
.head{
  padding:15px 15px;
  background-color: #0066ff;
  margin-top: -80px;
}
.head h1{
  font-weight:700;
  color:var(--white);
}

/* ===== Announcement ===== */
.announcement{
  background:var(--secondary);
  border-left:5px solid var(--primary);
  padding:20px;
  margin-top:-40px;
}

/* ===== Section Title ===== */
.section-title{
  text-align:center;
  margin-bottom:40px;
}
.section-title h2{
  font-weight:700;
  color:var(--primary);
}

/* ===== Cards ===== */
.card{
  border:none;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  transition:.3s;
}
.card:hover{
  transform:translateY(-6px);
}

/* ===== Benefits ===== */
.benefit-box{
  background:#fff;
  border-radius:16px;
  padding:30px;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}
.benefit-box h4{
  color:var(--accent);
  font-weight:600;
}

/* ===== Process ===== */
.process-step{
  text-align:center;
  padding:25px;
  border-radius:18px;
  background:#d9f2e6;
  height:100%;
}
.process-step span{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  width:45px;
  height:45px;
  border-radius:50%;
  line-height:45px;
  font-weight:600;
  margin-bottom:15px;
}

/* ===== Footer ===== */
footer{
  background:var(--dark);
  color:#fff;
  padding:50px 30px;
}
footer ul li a{
  color:#cfe0ff;
  text-decoration:none;
}


@media(max-width:768px){
  .hero{text-align:center;}
}