/* Shared styles extracted from original index.html */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap');
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; font-family: 'Poppins', Arial, sans-serif; background: #f8fbff; color: #222; }
.theme-btn { background: #2360cb; color: #fff; border-radius: 50px; padding: 10px 30px; border: none; transition:.2s;}
.theme-btn:hover { background: #ff8200; color: #fff;}
.outline-btn {
  border: 2px solid #ff8200;
  color: #ff8200;
  border-radius: 50px;
  background: #fff;
  padding: 10px 30px;
  transition: .2s;
}
.outline-btn:hover { background: #ff8200; color: #fff; }
/* Floating admission popup removed */
.hero-bg { background:linear-gradient(110deg,#eaf2fd 70%,#ffdcb7 100%); border-radius: 0 0 40px 40px;}
.glow { text-shadow:0 4px 32px #2360cb33,0 0 8px #ff8200;}
.section-title{ font-weight:600; color:#2360cb;}
.card-section .card { border: none; border-radius:15px; box-shadow:0 8px 32px #2360cb11;}
.footer { background:#2360cb; color:#fff; padding:30px 0 10px 0; margin-top: auto; width: 100%; }
.footer a { color:#ff8200;}
.testimonial-card { border:none; background:#fffcec;}

/* Utility tweaks */
.card .rounded-circle { object-fit:cover; }
.card-section .card h5 { color:#2360cb; }

/* WhatsApp icon-only popup with side gradient wave */
.whatsapp-popup-btn {
  position: fixed;
  left: 30px;
  bottom: 30px;
  width: 48px;
  height: 48px;
  padding: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}
.whatsapp-popup-btn img {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(2,25,9,0.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-popup-btn:hover img {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 34px rgba(2,25,9,0.18);
}
/* Hero carousel image sizing */
.hero-carousel img {
  height: 280px;
  object-fit: cover;
  border: 4px solid #ff820055;
}

@media (max-width: 767px) {
  .hero-carousel img { height: 150px; }
}

/* On small screens, avoid buttons overlapping the hero image */
@media (max-width: 767px) {
  .hero-bg .theme-btn,
  .hero-bg .outline-btn {
    position: static;
    z-index: auto;
    display: inline-block;
    margin-right: 0.4rem;
    margin-top: 0.25rem;
    white-space: nowrap;
  }
  .hero-bg .col-md-5 {
    margin-top: 0.75rem;
  }
}

/* Further reduce button padding/border on small screens so both fit in one line */
@media (max-width: 575px) {
  .hero-bg .theme-btn {
    padding: 8px 14px;
    font-size: 0.95rem;
  }
  .hero-bg .outline-btn {
    padding: 7px 12px;
    font-size: 0.95rem;
    border-width: 1px;
  }
}

/* Ensure hero buttons remain above the carousel on small screens */
.hero-bg { position: relative; overflow: visible; }
.hero-bg .col-md-7 { position: relative; z-index: 5; }
.hero-bg .theme-btn, .hero-bg .outline-btn { position: relative; z-index: 6; }
.hero-carousel { position: relative; z-index: 1; }

/* Make sure carousel doesn't create a stacking context that covers controls */
.hero-carousel .carousel-item { backface-visibility: hidden; }

/* Make study-material / small icon images match 'Doubt Sessions' icon size (~48px) */
#study-material .card img,
.card-section .card img,
.free-material-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px auto;
}

/* Specifically make icons in the 'Why Choose Us' section small (match doubt-session icon size) */
#why-us img { width:48px; height:48px; object-fit:contain; }

/* Study material card tweaks */
.card .img-fluid { max-width: 96px; }
.modal-body iframe { width: 100%; height: 80vh; }

/* Larger thumbnail for study material cards */
.material-thumb {
  /* Portrait book thumbnail: width 3cm, height 4cm on larger screens (approximate physical size)
     Use object-fit: cover so the box is filled; change to contain if you prefer no cropping */
  width: 3cm;
  height: 4cm;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* Responsive fallbacks: keep portrait 3:4 aspect ratio and scale with viewport on smaller screens */
@media (max-width: 991px) {
  .material-thumb {
    width: 22vw;        /* scale with viewport width */
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 575px) {
  .material-thumb {
    width: 30vw;        /* slightly larger on very small screens for readability */
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* Make study material card layout stack cleanly on small screens */
.card .row.align-items-center { align-items: center; }
.card .col-md-4.text-center { padding: 0.75rem; }
.card .col-8 { padding: 0.75rem; }

/* Exams/job alert card styles */
.job-card{
  background: linear-gradient(90deg, #ffffff 0%, #fbfcff 100%);
  border-left: 6px solid #0d6efd; /* bootstrap primary */
  transition: transform .18s ease, box-shadow .18s ease;
}
.job-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(13,110,253,0.08);
}
.job-card .card-body{ padding: 1rem 1rem; }

.job-type{
  display:inline-block;
  background: rgba(13,110,253,0.08);
  color:#0d6efd;
  font-weight:600;
  padding: .18rem .5rem;
  border-radius: .35rem;
  font-size:.78rem;
}

/* Animated primary-style button for job links */
.job-btn{
  background: linear-gradient(90deg,#0d6efd 0%, #0069d9 100%);
  color: #fff;
  border: none;
  padding: .35rem .6rem;
  border-radius: .35rem;
  box-shadow: 0 6px 16px rgba(13,110,253,0.10);
  transition: transform .15s ease, box-shadow .18s ease, opacity .12s ease;
}
.job-btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 26px rgba(13,110,253,0.16);
  text-decoration: none;
}
.job-btn:active{ transform: scale(.985); }

/* Optional gentle pulse effect that can be toggled via class 'pulse' */
@keyframes jobPulse{ 0%{ box-shadow: 0 0 0 rgba(13,110,253,0.10);} 70%{ box-shadow: 0 0 24px rgba(13,110,253,0.06);} 100%{ box-shadow: 0 0 0 rgba(13,110,253,0);} }
.job-btn.pulse{ animation: jobPulse 2.6s infinite; }

@media (max-width: 576px){
  .job-card{ border-left-width: 4px; }
  .job-btn{ padding: .35rem .5rem; }
}

/* Paid materials / test-series styles */
.paid-badge{
  background: linear-gradient(90deg,#ff8200 0%, #ff5e00 100%);
  color:#fff; font-weight:700; padding:.18rem .5rem; border-radius:.35rem; font-size:.78rem;
}
.price-tag{ font-weight:700; color:#ff5e00; }
.buy-btn{ background: #ff6b00; color:#fff; border:none; padding:.4rem .7rem; border-radius:.35rem; box-shadow:0 8px 20px rgba(255,107,0,0.12); transition:transform .12s ease; }
.buy-btn:hover{ transform: translateY(-3px); }
.test-badge{ background:#0dcf8b; color:#064; padding:.18rem .5rem; border-radius:.35rem; font-weight:700; }

/* layout spacing for paid/test sections */
.paid-section .card{ border-radius:12px; }
.test-series .card{ border-radius:12px; }

/* Founder image: make square, zoomed-in crop and centered (use on the founder image element) */
.founder-img {
  width: 140px;
  height: 140px;
  object-fit: contain; /* crop/zoom to fill the box */
  display: block;
  margin: 0 auto 8px auto;
  border-radius: 50%; /* keep circular look */
  border: 4px solid #ffffffaa;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

@media (max-width: 767px) {
  .founder-img { width: 110px; height: 110px; }
}

/* Developer credit styling used in footer (.dev-credit) */
.dev-credit {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #fff; /* default for dark footer */
}
.dev-credit a {
  color: #ffd089;
  text-decoration: none;
  font-weight: 700;
}
.dev-credit a:hover { text-decoration: underline; color: #fff; }