/* Simple Styling */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: rgb(22, 112, 184); /* Updated text color */
  padding-top: 106px; /* Adjust based on navbar height */
}


/* Program Cards (No white box or register button) */
.card-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
  flex-wrap: wrap;
}


.card-row img {
  width: 15vw;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

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

  .card-row img {
    width: 80%; /* Optional: scale image for mobile */
    max-width: 300px;
  }
}

/* Apply hover zoom only to this class */
.zoom-on-hover:hover {
  transform: scale(1.05);
  filter: brightness(0.85); /* Darkens the image */
  cursor: pointer;
}

/*styles for the blue text box*/

.overview-box {
  width: 100%; /* Default: full width on mobile */
  margin: 40px auto;
  background-color: rgb(51, 159, 205);
  color: white;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 0px;
  text-align: center;
}

.program-row-container {
  width: 70%;        /* 70% of viewport */
  margin: 0 auto;    /* center horizontally */
}

/* For screens smaller than 768px (mobile) */
@media (max-width: 768px) {
  .program-row-container {
    width: 90%;   /* full width on mobile */
  }
}

.program-box {
  width: 100%; /* Full width on mobile */
  margin: 0 20px; /* Remove extra vertical margin, spacing handled by row g-4 */
  background-color: rgb(51, 159, 205);
  color: white;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  display: flex; /* Make height equal with flex */
  flex-direction: column;
}

  .program-box:hover {

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform: scale(1.03);
  }

.program-box h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
}


.program-box-flat {
  max-width: 40%; /* Full width on mobile */
  margin: 0px 0px 20px 150px; /* top, right, bottom, left */
  background-color: transparent; /* no fill color */
  color: #666; /* gray text */
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 3px solid #666; /* gray border */
  text-align: center;
  display: flex; /* make height equal with flex */
  flex-direction: column;
  transition: opacity 1s ease-out;
}

.program-box-flat h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
}

/* Apply 60% width only on screens wider than 768px */
@media (min-width: 768px) {
  .overview-box {
    width: 60%;
  }
}

.overview-box h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
}

#overview-content {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.6;
  white-space: pre-wrap; /* Preserve line breaks from the .txt file */
}


/* Photo styles for the supportive modules page */
#photoCarousel,
#photoCarousel .carousel-inner,
#photoCarousel .carousel-item {
  height: 450px; /* pick your fixed height */
}

/* Make every slide's image fill that box without distortion */
#photoCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* see full image; letterboxes if needed */
  object-position: center;  /* keep it centered */
}

#photoCarousel {
  width: 70%;           /* 70% of screen width */
  position: relative;   /* keep positioning for arrows */
  margin: 0 auto;       /* center horizontally */
}

/* Optional: smaller height on phones */
@media (max-width: 768px) {
  #photoCarousel {
    height: auto;
    width: 100%;
  }

    #photoCarousel .carousel-inner,
  #photoCarousel .carousel-item {
    height: 350px;            /* fixed height for mobile */
    width: 100%;
  }

    #photoCarousel .carousel-item img {
    max-height: 100%;          /* image fits container height */
    width: 100%;       /* full container width */
    height: auto;      /* maintain aspect ratio */
    display: block;            /* required for margin auto */
    margin: auto;              /* centers horizontally and vertically */
    position: absolute;        /* absolute positioning inside carousel-item */
    top: 0; bottom: 0; left: 0; right: 0;
    object-fit: contain;       /* keep full image visible */

  }
}

  /* Move arrows outside */
  .custom-arrow {
    width: auto;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;

    font-size: 2rem;   /* arrow size */
    color: white;      /* arrow color */
    cursor: pointer;
    z-index: 10;
  }



/* Default: arrows inside (mobile-friendly) and white */


.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) drop-shadow(0 0 5px white); /* white with glow */
}

/* On desktops/tablets, push them outside and use custom color */
@media (min-width: 768px) {
  .custom-arrow {
    color: #2d91c3;      /* custom color */
  }

  .custom-arrow:focus,
.custom-arrow:active
{
  color: #2d91c3;
}

.custom-arrow:hover {
  color: #1f6d94;
}

  .carousel-control-prev {
    left: -90px;
  }
  .carousel-control-next {
    right: -90px;
  }

  /* Revert arrows to your custom color with glow if needed */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: none; /* use custom color via your arrow styles */
  }
}

  .arrow-icon {
    font-size: 5rem;
    font-weight: bold;
  }



  /* Styles for the training boxes*/

.training-box {
    display: flex;
    padding: 30px;
    align-items: center; 
    background-color: rgb(51, 159, 205); /* your color */
    border-radius: 20px;
    width: 100%; /* make it stretch fully */
    margin-bottom: 15px; /* adds space below each box */
  }

  .training-box:hover {

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform: scale(1.02);
  }

  .training-thumb {
    height: 150px;
    width: auto;
    object-fit: cover;
    border-radius: 6px; /* optional */
    flex-shrink: 0;            /* prevents shrinking */
    margin-right: 30px; /* small gap between thumb and text */
  }
  .training-text {
    flex: 1; /* text takes remaining space */
    color: white;
    display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center heading + paragraph */
  margin: 0;
  padding: 0;
    
  }

.training-text h2 {
  font-weight: 700;   /* make it bold */
  font-size: 30px;
  margin-bottom: 0;  /* reduce extra space below */
  color: white;  /* ensure heading stays white */
}

@media (max-width: 768px) {
  .training-box {
    flex-direction: column;   /* stack image above text */
    align-items: center;      /* center horizontally */
  }

  .training-thumb {
    margin-right: 0;          /* remove right margin */
    margin-bottom: 15px;      /* add space below image */
  }

  .training-text {
    justify-content: center;
    align-items: center;      /* center text horizontally */
    text-align: center;
  }
}


/* For mobile customization of photos . This is the first tree image of mentorship*/

img.title-image {
  width: 70%;       /* default: desktop */
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  img.title-image {
    width: 90%;     /* almost full width on mobile */
  }
}


/* this styling is for boxes in mentor diagram flow */

.mentor-box {
  background-color: rgb(51, 159, 205);
  border-radius: 10px;
  padding: 15px; /* reduced from 20px */
  position: relative;
  text-align: center;
  transition: transform 0.3s, background-color 0.3s;
  display: block;
  flex-direction: column;
  font-size: 0.9rem; /* smaller text */
  line-height: 1.2;  /* tighter spacing between lines */
  justify-content: center; /* vertically centers content */
  color: white;
  text-decoration: none;   /* removes underline */

  height: 150px;   /* adjust as needed */
}

 .mentor-box:hover {
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform: scale(1.03);
  }

.mentor-box.clickable:hover {
  background-color:  rgb(113, 30, 30);
  border-color: #0077cc;

}

.mentor-box.clickable:hover .mentor-text {
  visibility: hidden; /* hide the original text but keep box size */
}

.mentor-box.clickable:hover::after {
  content: "Book Free Consultation"; /* manual hover text */
  display: block;
  position: absolute;   /* absolute inside .mentor-box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%); /* perfect centering */

  font-size: 1.2rem; /* smaller text */
  font-family: 'hultog'
}

.red-box {
  background-color: #CC3333;
}

.mentor-row-container .col-md-4 {
  max-width: 300px; /* keeps boxes smaller and consistent */
  max-height: 200px;
}

.reflect-btn {
    position: relative;
    overflow: visible;
    box-shadow: none !important; /* remove Bootstrap shadow */

    /* Custom look */
    background: rgb(250, 255, 240);
    color:  #3493c3;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 32px;
    border: none;
    transition: transform 0.2s ease, background 0.3s ease;

    margin-top: 20px; /* adds space above the button */
    
}

/* Hover effect */
.reflect-btn:hover {
  color: #ffffff  ;
  background: rgb(134, 134, 134);

}

/* Reflection under button */
.reflect-btn::after {
    content: "";
    position: absolute;
    top: 100%; /* place right below button */
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.4) );
    border-radius: inherit;
    transform: scaleY(-1);
    opacity: 0.5;
    pointer-events: none;
}


/* this is for mentorship booking form styling */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: -50; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: #339FCD;
  color: white;
  padding: 20px;
  width: 90%;              /* fluid */
  max-width: 600px;        /* cap width */
  max-height: 80vh;        /* don’t exceed viewport */
  overflow-y: auto;        /* scroll inside if too tall */
  border-radius: 8px;
  text-align: left;
  font-weight: bold;
}

.modal-content input,
.modal-content textarea,
.modal-content select {
  width: 100%;
  margin: 5px 0 15px;
  padding: 8px;
}

.modal-content button[type="submit"] {
  background: white;   /* Bootstrap blue */
  color: #1b73d2;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease-in-out;
  font-weight: bold;
  display: block;
  margin: 20px auto 0;  /* top auto bottom */
}

.modal-content button[type="submit"]:hover {
  background: #3273b8;   /* darker blue on hover */
  color: white;
}

/* Close (X) button styling */
.close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;       /* bigger size */
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: red;
}