.body{
    overflow-x: hidden;
}
.nav-link:hover {
    color: #284ca1;
}

.diagonal-section {
    position: relative;
    background-color: #ffc107; /* Bootstrap's yellow */
    height: 300px; /* Adjust as needed */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    z-index: 1;
  }

  .white-section {
    position: relative;
    background-color: white;
    z-index: 2;
    padding: 3rem;
  }

  .socialIcon{
    background-color: rgb(255, 255, 255);
    border: solid 2px #284ca1;
    border-radius: 99999px;
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .socialIcon:hover{
    background-color: #e7e7e7;
  }

  .sideImage{
    @media (min-width: 992px) {
        max-width: 90%;
    }

    @media (min-width: 1200px) {
        max-width: 80%;
    }

    @media (min-width: 1400px) {
        max-width: 76%;
    }

    @media (min-width: 1700px) {
        max-width: 53%;
    }
  }

.sideVideo {
    min-height: 200px;

    @media (min-width: 768px) {
        height: 400px;
    }

    @media (min-width: 1200px) {
        min-height:300px;
        max-width: 70%;
    }

    @media (min-width: 1400px) {
        min-height:300px;
        max-width: 100%;
    }
}

.gridVideo{
    min-width: 90%;

    @media (min-width: 992px) {
        min-height:220px;
        min-width: 10%;
    }

    @media (min-width: 1200px) {
        min-height: 220px;
        
    }

    @media (min-width: 1400px) {
        min-height:350px;
        max-width: 100%;
    }
}

.bannerText{
    font-size: 1.5rem;

    @media (min-width: 992px) {
        font-size: calc(1.5rem + 1.5vw); /* Adjust to match display-5 scaling */
    }
}

.posthero {
    margin-top: 1170px;
}

@media (min-width: 992px) {
    .posthero {
        padding-top: 90px;
    }
}

.cardIcon {
    font-size: small;
}

.cardWrapper {
    position: relative;
    }

    .cardWrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.664); /* Adjust opacity as needed */
        z-index: 1;
        pointer-events: none;
    }

.footerWrapper {
    background: 
        linear-gradient(#b1060c, rgba(158, 58, 0, 0.788)),
        url('https://picsfordevsite.blob.core.windows.net/pharmacy-warrior/footer-bg.jpg') center center/cover no-repeat;
    position: relative;
    z-index: 0;
}

.subHeroWrapper {
    position: relative;
    }

    .subHeroWrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.514); /* Adjust opacity as needed */
        z-index: 1;
        pointer-events: none;
    }

.verticalVideo {
    min-height: 700px;
}

@media (min-width: 991.98px) {
    .verticalVideo {
        min-height: 800px;
    }
}

.verticalVideoCard {
    min-height: 700px;
}

@media (max-width: 991.98px) {
    .verticalVideo {
        min-height: 500px;
    }
}

.shorts-embed{
    /* pick your max width; 360–480px reads nicely */
    max-width: 480px; 
    margin: 0 auto;
    aspect-ratio: 9 / 16;    /* 🔑 forces a vertical player box */
    max-height: 800px;
  }
  .shorts-embed iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

.hero {
    position: relative;
    height: clamp(420px, 20vh, 640px);  /* pick a range you like */
    overflow: hidden;                   /* hide overflow from the cover crop */

    @media (min-width: 1600px) {
        height: 60vh;
    }
}

/* 🧷 Make the image fill that fixed-height box */
.hero .card-img {
  position: absolute;  /* break it out of normal flow */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* no distortion, no “stretch” */
  z-index: 0;          /* sits under the ::before overlay (1) */
}

.hero .aboutHero {
    object-fit: cover;
    object-position: top;
}

/* Ensure the text stays on top */
.hero .card-img-overlay {
  position: relative;              /* stays above img & overlay */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* ⬅️ vertical centering */
  align-items: flex-start;         /* ⬅️ left-align (tweak as needed) */
  height: 100%;                    /* ⬅️ make sure flex container fills hero height */
}

.mainHero {
    position: relative;
    height: clamp(420px, 20vh, 640px);  /* pick a range you like */
    overflow: hidden; 
}

/* 🧷 Make the image fill that fixed-height box */
.mainHero .card-img {
  position: absolute;  /* break it out of normal flow */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* no distortion, no “stretch” */
  z-index: 0;          /* sits under the ::before overlay (1) */
}

/* Ensure the text stays on top */
.mainHero .card-img-overlay {
  position: relative;              /* stays above img & overlay */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* ⬅️ vertical centering */
  align-items: flex-start;         /* ⬅️ left-align (tweak as needed) */
  height: 100%;                    /* ⬅️ make sure flex container fills hero height */
}

.lgHeightFix {
    @media (min-width: 992px) {
        min-height: 165px;
    }
}

.lgCardHeaderHeightFix {
    @media (min-width: 992px) {
        min-height: 70px;
    }
}

.xlHeightFix {
    @media (min-width: 1200px) {
        min-height: 90px;
    }
}

.imageFix {
    @media (min-width: 1500px) {
        max-width: 80%;
    }
}

.yt{
    position:relative; background:#000; overflow:hidden;
    aspect-ratio:16/9; cursor:pointer;
    background-position:center; background-size:cover;
  }
  .yt::after{ /* play button */
      content: "";
  position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 26px solid #fff;          /* triangle */
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  opacity: 0; transition: opacity .15s ease;
  }
  .yt.is-loaded{ cursor:auto; }

  @font-face {
    font-family: 'Batman';
    src: url('/public/fonts/batmfa__.ttf') format('truetype'),
         url('/public/fonts/batmfo__.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .fof-main-video {
    @media (min-width: 992px) {
        max-width: 350px;
    }
    @media (min-width: 1400px) {
        max-width: 425px;
    }
  }