/**

 * Flight Training Programs Block Styles

 *

 * @package UltraLite_BS_ACF

 * @since 1.0.0

 */



.flight-training {

  background: linear-gradient(to bottom,

      var(--bg-color-secondary) 0%,

      var(--bg-color-secondary) 60%,

      transparent 50%,

      transparent 100%);

}



.programs-header {

  display: flex;

  flex-direction: column;

  padding: 0 32px;

}



.programs-pills-wrapper {

  display: flex;

  flex-wrap: nowrap;

  gap: 24px;

  padding-left: 67px;

  overflow-x: auto;

  overflow-y: hidden;



  justify-content: flex-start;

  -webkit-overflow-scrolling: touch;



  /* Hide scrollbar – Firefox */

  scrollbar-width: none;



  /* Prevent accidental vertical scroll */

  touch-action: pan-x;

}



/* Hide scrollbar – Chrome, Edge, Safari */

.programs-pills-wrapper::-webkit-scrollbar {

  display: none;

}



/* Prevent children from shrinking */

.programs-pills-wrapper>* {

  flex: 0 0 auto;

}



.program-pill {

  padding: 16px;

  border-radius: 50px;

  border: 1px solid white;

  box-shadow: var(--custom-shadow);

  background-color: rgba(255, 255, 255, 0.16);

  color: #000000;

  font-size: 18px;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.3s ease;

  white-space: nowrap;

}



.program-pill:hover {
  background-color: rgb(247 161 54);
  border-color: var(--yellow-color);
}



.program-pill.active {

  background-color: var(--yellow-color);

  padding: 16px;

  font-weight: 500;

}



/* Bottom Section - Dark Background */

.programs-bottom-section {

  padding: 56px 32px;

}



.programs-tab-content {

  display: none;

}



.programs-tab-content.active {

  display: block;

}



.programs-grid {

  margin-bottom: 48px;

}



.program-card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.program-card:hover {

  transform: translateY(-4px);

  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); */

}



.program-card-link {

  display: block;

  text-decoration: none;

  color: inherit;

}



.program-card-image {

  position: relative;

  width: 100%;
  min-width: 416px;

  /* height: 478px; */

  overflow: hidden;

  border-radius: 32px;

}



.program-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.program-card-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 32px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  background: linear-gradient(to top,

      rgba(0, 0, 0, 0.8) 0%,

      rgba(0, 0, 0, 0) 100%);

}



.program-card-title {

  font-size: clamp(20px, 1.66vw, 32px) !important;

  font-weight: 700;

  color: #ffffff;

  margin: 0;

  line-height: 1.3;

  flex: 1;

}



.program-card-action {

  width: 64px;

  height: 64px;

  /* background-color: #FFFFFF; */

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--custom-shadow);

  transition: transform 0.3s ease, background-color 0.3s ease;

  flex-shrink: 0;

  border: 1px solid white;

  padding: 19px;

}



.program-card-action img {

  width: 20px;

  height: 20px;

  display: block;

}



.program-card:hover .program-card-action {

  transform: rotate(-45deg);

  background-color: var(--yellow-color);

  border: 0px;

}



.programs-cta-btn {

  background-color: var(--yellow-color);

  color: #ffffff;

  padding: 16px 40px;

  font-size: 18px;

  font-weight: 600;

  border-radius: 50px;

  border: none;

  text-decoration: none;

  display: inline-block;

  transition: background-color 0.3s ease, transform 0.3s ease;

}



.programs-cta-btn:hover {

  background-color: var(--yellow-color);

  transform: translateY(-2px);

  color: #ffffff;

  text-decoration: none;

}



/* Responsive Design */

@media (max-width: 992px) {

  /* .program-card-image {

    height: 300px;

  } */



  .program-card-title {

    font-size: 20px;

  }



  .program-card-overlay {

    padding: 20px;

  }

}



@media (max-width: 768px) {





  .programs-pills-wrapper {

    gap: 8px;
    padding-left: 0;

  }



  .program-pill {

    padding: 12px;

    font-size: 14px;

  }



  .program-pill.active {

    padding: 12px;

  }



  .programs-cta-btn {

    padding: 14px 32px;

    font-size: 16px;

  }

  .programs-header {

    padding: 0;

  }

  .program-card-title {

    font-size: 16px;

  }











}



@media (max-width: 1600px) {

  .program-card-image {
    min-width: 100% !important;
    /* max-height: 426px; */

    /* proportional to 1520px width */

  }
  .programs-pills-wrapper {
    padding-left: 0 !important;
  }

}



@media (min-width: 992px) {

  .programs-cta-wrapper {

    padding-left: 32px;

  }

}



/* MOBILE + TABLET HORIZONTAL SCROLL */

@media (max-width: 1920px) {



  /* Target only program sections */

  .programs-bottom-section .row {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

    gap: 32px;

    padding-bottom: 8px;

    padding-left: 48px;

  }



  .programs-bottom-section .row::-webkit-scrollbar {

    display: none;

  }



  /* Each card */

  .programs-bottom-section .program-card {

    flex: 0 0 auto;

    width: 416px;
    max-width: 416px;
    height: 478px;

  }



  /* Prevent Bootstrap column behavior */

  .programs-bottom-section .col-md-6,

  .programs-bottom-section .col-lg-3 {

    flex: 0 0 auto;

    width: auto;

    padding: 0;

  }

  /* .program-card-image {

    height: 348px;

  } */

  .program-card-overlay {

    padding: 24px;

  }



  .program-card-action {

    width: 56px;

    height: 56px;

  }

  .program-card-action img {

    width: 24px;

    height: 24px;

  }

  .programs-bottom-section {

    padding-top: 32px;

    padding-bottom: 56px;

    padding-left: 0;

    padding-right: 0;

  }

}

@media (max-width: 768px) {
  .programs-bottom-section .program-card {
    width: 416px;
    max-width: 288px;
    height: 348px;
  }

  .programs-bottom-section .row {
    padding-left: 12px;
    gap: 16px;
  }

  .programs-bottom-section {
    padding-bottom: 30px;
  }
}

@media (min-width: 1199px) and (max-width: 1600px) {
  .programs-bottom-section .program-card {
    width: 322px !important;
    height: 439px !important;
  }
}