/* remove outer glow/shadow from coursePreview */
.coursePreview,
.HomePage_split-left .coursePreview,
.HomePage_split-right .coursePreview {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: linear-gradient(135deg, #000000, #020304, #07090b); /* keep background if you want */
}




/* 🔹 Course Preview  --> */
.coursePreview {
  width: 100%;
  max-width: 800px;
  margin: 10px;
  padding: 32px;
  border-radius: 20px;

  /* Supreme gradient background */
  background: linear-gradient(135deg, #000000, #020304, #07090b);
  
  color: #e2e8f0; /* soft gray text */
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  line-height: 1.6;

  /* Depth */
  //*box-shadow: 0 10px 40px rgba(204, 202, 202, 0.6);*/
}


.coursePreview .courseTopInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #f8fafc;
}

.coursePreview .courseDuration {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  padding: 8px 14px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.coursePreview .expertInfo {
  background: linear-gradient(135deg, #16a34a, #065f46);
  padding: 8px 14px;
  border-radius: 8px;
  color: #fff;
  text-align: right;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}






.coursePreview h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: #f8fafc;
  border-bottom: 3px solid #0ea5e9; /* custom underline */
  display: inline-block; /* keeps underline width to text */
  padding-bottom: 2px;   /* spacing between text & line */
}

/* Price */
.coursePreview .UpcomingBatches {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff; /* emerald */
}

/* Price */
.coursePreview .price {
  font-size: 2rem;
  font-weight: bold;
  color: #22c55e; /* emerald */
}
.coursePreview .oldPrice {
  color: #94a3b8; /* muted gray */
  text-decoration: line-through;
  margin-left: 8px;
}

.coursePreview .paymentOption {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: #38bdf8; /* light blue accent */
}

.coursePreview .courseMeta {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 1rem;
  font-weight: 600;
  color: #e5e7eb; /* soft gray */
}

.coursePreview .courseMeta span {
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}

.coursePreview .courseMeta span:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.15);
}



/* Offer highlight */
.coursePreview .offerEnds {
  margin-top: 8px;
  color: #facc15; /* gold/yellow */
  font-weight: 600;
}

/* Guarantee Box */
.coursePreview .guarantee {
  margin: 18px auto;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #064e3b, #047857);
  color: #ecfdf5;
   font-size: 1.2rem;
  font-weight: 800;
  max-width: 600px;
}

/* Feature boxes row */
.coursePreview .features {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}
.coursePreview .feature {
  flex: 1;
  min-width: 150px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #f8fafc;
   font-size: 1rem;
  font-weight: 800;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.coursePreview .realTimeProjects {
  margin: 18px auto;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  max-width: 650px;

  background: linear-gradient(135deg, #1e293b, #334155);
  color: #f8fafc;
     font-size: 1.2rem;
  font-weight: 900;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
.coursePreview .realTimeProjects strong {
  color: #facc15; /* highlight "Real Time Project" */
}


.coursePreview .availableBatches {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 18px;
}

.coursePreview .availableBatches .highlight {
  color: #22c55e;         /* bright green */
  font-weight: 700;
  text-shadow: 0 0 8px rgba(34,197,94,0.7);
}


.coursePreview .courseTitle {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.coursePreview .socialOffer {
  margin-top: 20px;
  padding: 14px;
  border-radius: 12px;

  /* Attractive gradient */
  background: linear-gradient(135deg, #2563eb, #9333ea);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;

  /* Glow & hover effect */
  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.5),
              0 0 20px rgba(37, 99, 235, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coursePreview .socialOffer:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.7),
              0 0 25px rgba(37, 99, 235, 0.8);
}

/* Highlight text inside */
.coursePreview .socialOffer .highlight {
  color: #facc15; /* Yellow accent for Facebook & Instagram */
  font-weight: bold;
}


.batchInfo {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.priceSection {
  margin-bottom: 20px;
}

.offerPrice {
  font-size: 1.8rem;
  font-weight: bold;
  color: #22c55e;
  margin-right: 12px;
}

.originalPrice {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.7);
  text-decoration: line-through;
}

.offerEnds {
  margin-top: 8px;
  font-size: 1rem;
  color: #facc15;
}

.guarantee {
  background: rgba(34, 197, 94, 0.2);
  padding: 10px;
  border-radius: 8px;
  margin: 20px 0;
  font-weight: 600;
}

.trainingDetails {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  gap: 10px;
  flex-wrap: wrap;
}

.detailBox {
  flex: 1;
  min-width: 120px;
  padding: 12px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
}

.batchSlots {
  margin-top: 20px;
  font-size: 1.1rem;
}





/* === RESPONSIVE BREAKPOINTS === */

/* === Extra Small Mobiles (≤ 320px) === */
@media (max-width: 320px) {
 .HomePage_split-left .coursePreview,
  .HomePage_split-right .coursePreview
 {
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2 ,
  .HomePage_split-right .coursePreview h2 
  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price ,
    .HomePage_split-right .coursePreview .price 

  
  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features ,
    .HomePage_split-right .coursePreview .features 

  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}

/* === Small Mobiles (≤ 360px) === */
@media (max-width: 360px) {
  .HomePage_split-left .coursePreview ,
    .HomePage_split-right .coursePreview 

  
  {
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2 ,
    .HomePage_split-right .coursePreview h2 

  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price ,
    .HomePage_split-right .coursePreview .price 

  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features, 
    .HomePage_split-right .coursePreview .features 

  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}

/* === Normal Mobiles (≤ 420px) === */
@media (max-width: 420px) {
  .HomePage_split-left .coursePreview ,
    .HomePage_split-right .coursePreview 

  {
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2 ,
    .HomePage_split-right .coursePreview h2 

  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price ,
    .HomePage_split-right .coursePreview .price 

  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features, 
    .HomePage_split-right .coursePreview .features 

  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}

/* === Large Mobiles (≤ 480px) === */
@media (max-width: 480px) {
  .HomePage_split-left .coursePreview ,
    .HomePage_split-right .coursePreview 

  {
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2, 
    .HomePage_split-right .coursePreview h2 

  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price ,
    .HomePage_split-right .coursePreview .price 

  
  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features ,
    .HomePage_split-right .coursePreview .features 

  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}

/* === Phablets / Small Tablets (≤ 600px) === */
@media (max-width: 600px) {
.HomePage_split-left .coursePreview ,
.HomePage_split-right .coursePreview 

{
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2 ,
    .HomePage_split-right .coursePreview h2 

  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price ,
    .HomePage_split-right .coursePreview .price 

  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features, 
    .HomePage_split-right .coursePreview .features 

  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}

/* === Tablets (≤ 768px) === */
@media (max-width: 768px) {
   .HomePage_split-left .coursePreview ,
      .HomePage_split-right .coursePreview 

   {
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2, 
    .HomePage_split-right .coursePreview h2 

  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price, 
    .HomePage_split-right .coursePreview .price 

  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features,
    .HomePage_split-right .coursePreview .features

  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}



/* === Small Laptops (≤ 1024px) === */
@media (max-width: 1024px) {
 .HomePage_split-left .coursePreview ,
  .HomePage_split-right .coursePreview 

 {
    margin: 20px auto;      /* center horizontally */
    width: 98%;             /* shrink to fit screen */
    max-width: 100%;        /* override the 800px */
    padding: 10px;          /* tighter padding */
  }

  .HomePage_split-left .coursePreview h2, 
    .HomePage_split-right .coursePreview h2 

  {
    font-size: 1.4rem;      /* smaller heading */
  }

  .HomePage_split-left .coursePreview .price,
    .HomePage_split-right .coursePreview .price 
 
  
  {
    font-size: 1.6rem;
  }

  .HomePage_split-left .coursePreview .features 
    .HomePage_split-right .coursePreview .features 

  
  {
    flex-direction: column; /* stack features vertically */
    gap: 10px;
  }
}