/* === RESET (applies to everything) === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === BASE BODY STYLING === */
body {
  font-family: "Poppins", sans-serif;
  /* background: #1a1f36; */
  color: white;
  min-height: 100vh;    /* full screen height */
  width: 100%;
  overflow-x: hidden;   /* no horizontal scroll */
  line-height: 1.5;


}


/* Parent: allow wrapping and ensure children share height correctly */
.HomePage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;            /* allow columns to wrap to next row on narrow screens */
  justify-content: space-between;
  /*align-items: stretch;       /* make children stretch to same height */
  align-items: flex-start;     /* allow children to grow independently */
  gap: 20px;
  /*height: 100vh;              /* full viewport height (ok) */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  /*overflow: hidden;           /* avoid body scroll from inside container */

  height: auto !important;
  min-height: 100vh;        /* still fill the screen minimum */
  overflow: visible !important;
  background: #1a1f36;

}




/* Smaller panel: give less width but same vertical behavior */
.anyBodyCanLearn_Section {
  flex: 0.5 1 220px;          /* smaller base width, but can shrink */
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 20px;
  /* border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; */
  box-sizing: border-box;
  max-height: calc(100vh - 40px);
  overflow: auto;
}




.HomePage_split-left,
.HomePage_split-right {
  flex: 1;                  
  display: flex;
  flex-direction: column;    /* stack title + video */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 5px;             /* reduced padding */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  /* border-radius: 10px; */
  /*background: #0ea5e9;*/

  /* let columns expand (no internal scrolling) */
  max-height: none !important;
  overflow: visible !important;
}

/* Title inside sections */
.HomePage_split-left h1,
.HomePage_split-right h1 {
  margin: 20px 0 5px;   /* tighter spacing */
  font-size: 32px;
  line-height: 1.2;

  color: #f8fafc;
  border-bottom: 3px solid #0ea5e9; /* custom underline */
  display: inline-block; /* keeps underline width to text */
}






.videoContainer {
  width: 100%;          /* take full width of parent */
  margin-top: 12px;     /* space below the heading */
}

.videoContainer video {
  width: 100%;          /* make video full width */
  height: auto;         /* maintain aspect ratio */
  border-radius: 10px;  /* optional rounded corners */
  display: block;       /* remove inline spacing */
}




/* 🔹 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);

   border: 1px solid rgba(255, 255, 255, 0.1); 
   border-radius: 10px; 
   border-color: #facc15;


}


.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 {
    flex-direction: column;  
    height: auto;
gap: 5px;
     padding: 5px;  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 6px;
  }
/* 
  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 24px;
    margin: 3px 0 5px;
  } */

  /* .HomePage_split-left h1 span,
.HomePage_split-right h1 span {
  background: linear-gradient(90deg, #0072ff, #00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */

.HomePage_split-left h1,
.HomePage_split-right h1 {
  font-size: 32px;                 /* bigger size */
  font-weight: 700;                /* bold */
  margin: 8px 0 12px;              /* balanced spacing */
  color: #222222;                     /* dark text for readability */
  line-height: 1.3;                /* nice spacing between lines */
  letter-spacing: 0.5px;           /* little spacing for clarity */
  font-family: "Poppins", Arial, sans-serif; /* modern font */
}


  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 180px;
    border-radius: 6px;
  }
}

/* === Small Mobiles (≤ 360px) === */
@media (max-width: 360px) {
  .HomePage {
    flex-direction: column;
    height: auto;

gap: 5px;
     padding: 5px;

  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 6px;
  }

  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 15px;
    margin: 3px 0 6px;
  }

  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 200px;
    border-radius: 8px;
  }
}

/* === Normal Mobiles (≤ 420px) === */
@media (max-width: 420px) {
  .HomePage {
    flex-direction: column;
    height: auto;
gap: 5px;
     padding: 5px;

  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 8px;
  }

  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 16px;
    margin: 4px 0 6px;
  }

  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 220px;
    border-radius: 8px;
  }
}

/* === Large Mobiles (≤ 480px) === */
@media (max-width: 480px) {
  .HomePage {
    flex-direction: column;
    height: auto;
gap: 5px;
     padding: 5px;

  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 8px;
  }

  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 17px;
    margin: 4px 0 8px;
  }

  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 240px;
    border-radius: 10px;
  }
}

/* === Phablets / Small Tablets (≤ 600px) === */
@media (max-width: 600px) {
  .HomePage {
    flex-direction: column;
    height: auto;

gap: 5px;
     padding: 5px;

  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 10px;
  }

  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 18px;
    margin: 5px 0 8px;
  }

  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 260px;
    border-radius: 10px;
  }
}

/* === Tablets (≤ 768px) === */
@media (max-width: 768px) {
  .HomePage {
    flex-direction: column;
    height: auto;

     gap: 5px;
     padding: 5px;


  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 10px;
  }

  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 20px;
    margin: 6px 0 10px;
  }

  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 300px;
    border-radius: 10px;
  }
}



/* === Small Laptops (≤ 1024px) === */
@media (max-width: 1024px) {
  .HomePage {
    flex-direction: column;
    height: auto;

gap: 5px;
     padding: 5px;
  }

  .HomePage_split-left,
  .HomePage_split-right {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;   /* ⬅️ extra gap between sections */
    border-radius: 12px;
    
  }

  .HomePage_split-left h1,
  .HomePage_split-right h1 {
    font-size: 22px;
    margin: 6px 0 12px;
  }

  .videoContainer {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  .videoContainer video {
    width: 100%;
    max-height: 380px;
    border-radius: 12px;
  }
}