:root{
  --primary:#CCD9EC;
  --dark:#0f172a;
  --gray:#64748b;
  --light:#f8fafc;
    --kanis-feri: #ebe6d7;
    --moyavisfro: #78593C;
    --moshavo: black;
    --tetri: #FCFEFE;
    --nacrisferi: #9D9D9D;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--light);color:var(--dark)}

.container header{
  padding:4rem 1rem;
  /* background:linear-gradient(135deg,#2563eb,#1e40af); */
  color:#fff;
  text-align:center;
}
.container header h1{font-size:2.5rem;margin-bottom:1rem}
.container header p{max-width:700px;margin:auto;opacity:.9}

.container{max-width:1200px;margin:auto;padding:3rem 1rem;position: relative; top: 200px;
}

.container .courses{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.container .coursec{
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:2rem;
  display:flex;
  flex-direction:column;
  transition:.3s ease;
}
.container .coursec:hover{transform:translateY(-6px)}

.container .badge{
  display:inline-block;
  background: var(--kanis-feri);
  color: black;
  padding:.4rem .8rem;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  margin-bottom:1rem;
  width:max-content;
}

.container .coursec h3{margin-bottom:.5rem}
.coursec p{color:black;font-size:.95rem;margin-bottom:1.5rem}

.container .info{margin-bottom:1.5rem;font-size:.9rem;color:#334155}
.container .info span{display:block;margin-bottom:.3rem}

.container .coursec a{
  margin-top:auto;
  border:none;
  background: var(--kanis-feri);
  color:black;
  padding:.9rem;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  transition:.3s ease;
  text-align: center;
  text-decoration: none;
}


.container .coursec a:hover{background:#CCD9EC; transform: scale(1.03);}

.container .cta{
  margin-top:4rem;
  background:#fff;
  border-radius:24px;
  padding:3rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.container h2{margin-bottom:1rem}
.container p{max-width:600px;color:black;margin-bottom:2rem}
.container a{
  text-decoration:none;
  background: var(--kanis-feri);
  color:black;
  padding:1rem 2rem;
  border-radius:16px;
  font-weight:600;
  transition:.3s ease;
}

.container a:hover{background:#CCD9EC; transform: scale(1.03);}

@media(max-width:600px){
  .container header h1{font-size:2rem}
}