/* ===== MAIN ===== */
.Courses_start_showcase{
  max-width:1280px;
  width:100%;
  margin:0 auto; /* 🔥 THIS centers the whole section */
  padding:0 16px; /* optional spacing on sides */
  display:flex;
  flex-wrap:wrap;
}
/* ===== TITLES ===== */
.Courses_start_title{
font-size:clamp(1.8rem,5vw,2.5rem);
font-weight:600;
color:#1a2639;
margin-bottom:.5rem;
width:100%;
margin:0 auto; /* 🔥 THIS centers the whole section */
}

.Courses_start_sub{
font-size:1.1rem;
color:#3e4a5e;
text-align:center;
margin-bottom:3rem;
border-bottom:2px dashed #b3c7e5;
padding-bottom:1.2rem;
max-width:650px;
margin:auto;
}

/* ===== GRID ===== */
.Courses_start_grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2.8rem;
}

/* ===== CARD ===== */
.Courses_start_card{
background:rgba(255,255,255,.75);
backdrop-filter:blur(6px);
border-radius:2rem;
box-shadow:0 20px 30px -10px rgba(0,20,40,.15);
padding:2rem 1.5rem 1.8rem;
display:flex;
flex-direction:column;
transition:.3s;
}

.Courses_start_card:hover{
transform:translateY(-6px);
}

/* ===== Images ===== */
.course-img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  display: block;
}

/* ===== TEXT ===== */
.Courses_start_course_name{
font-size:1.7rem;
font-weight:700;
margin-bottom:.75rem;
}

.Courses_start_promo{
font-size:.95rem;
background:#fde9e0;
padding:.5rem 1rem;
border-radius:40px;
margin:.8rem 0 1.2rem;
display:inline-block;
}


/* ===== RESPONSIVE ===== */
@media(max-width:900px){
.Courses_start_grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:740px){
.Courses_start_grid{grid-template-columns:1fr;}
}





/*Unlock access*/
.premium-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: #f6e4dc;
  padding: 22px 20px;
}

.premium-left,
.premium-right{
  flex: 1;
  min-width: 180px;
}

.premium-center{
  flex: 2;
  min-width: 320px;
  text-align: center;
}

.premium-right{
  display: flex;
  justify-content: flex-end;
}

.premium-cta-btn{
  display: inline-block;
  background: #183153;
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
  font-size: 22px;
}

@media (max-width: 768px){
  .premium-bar{
    flex-direction: column;
    align-items: center;
  }

  .premium-left{
    display: none;
  }

  .premium-center,
  .premium-right{
    flex: unset;
    min-width: unset;
    width: 100%;
    text-align: center;
  }

  .premium-right{
    justify-content: center;
  }
}
/*End of it*/