body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* Common Style Variables */
  
    /* Color */
    --Black: #000;
    --color-darkslateblue: #193c6c;
    --color-gray: rgba(0, 0, 0, 0.05);
    --color-skyblue: #80b8c7;
    --Primary-Text: #f7931e;
    --Subtext: #4d4d4d;
    --White: #fff;
  
    /* Gap */
    --gap-16: 16px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-30: 30px;
    --gap-32: 32px;
    --gap-60: 60px;
  
    /* Padding */
    --padding-0: 0px;
    --padding-6: 6px;
    --padding-10: 10px;
    --padding-16: 16px;
    --padding-19: 19px;
    --padding-20: 20px;
    --padding-24: 24px;
    --padding-30: 30px;
    --padding-32: 32px;
    --padding-40: 40px;
    --padding-80: 80px;
  
    /* BorderRadius */
    --br-7: 7px;
    --br-8: 8px;
  
    /* Font */
    --font-lexend-exa: Lexend Exa,sans-serif;
    --font-poppins: Poppins;
  
    /* FontSize */
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-28: 28px;
  
    /* Borders */
    --border-1: none;
  
    /* Gradients */
    --Linear-Button: linear-gradient(268.12deg, #f6af1d, #e04312);
  
    /* WidthHeights */
    --max-w-1200: 1200px;
    --min-w-250: 250px;
    --min-w-350: 350px;
  }
  
  
  
  
  
  .biolegacy-individual-services
  {
    background-color: var(--White);
    display: flex;
    flex-direction: column;
  }
  .biolegacy-individual-services {
    width: 100%;
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    font-size: 52px;
    color: var(--color-skyblue);
    font-family: var(--font-lexend-exa);
  }
 



  .frame-icon {
    width: 24px;
    position: relative;
    height: 24px;
  }
  .frame,
  .hero-banner {
    display: flex;
    flex-direction: column;
  }
  .hero-banner {
    align-self: stretch;
   
    padding: var(--padding-10) var(--padding-20);
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    overflow: hidden;
  }
  .frame {
    width: 100%;
    align-items: flex-start;
    max-width: var(--max-w-1200);
    position: relative;
    z-index: 2;

  }

  /* Right side video */
.hero-media {
  position: absolute;
  right: 0;
  top: 1px;
  width: 60%;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1366px) {
  .hero-media {
    width: 80%; /* video covers 80% instead of 100% */
    right: 0;
    left: auto;
  }
}
@media screen and (max-width: 1100px) {
  .hero-media {
    width: 100%;
  }
}

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(25, 60, 108, 1) 0%,     /* solid #193c6c at start */
    rgba(25, 60, 108, 0.9) 25%,  /* still blue */
    rgba(25, 60, 108, 0.6) 50%,  /* starts to fade */
    rgba(25, 60, 108, 0.2) 75%,  /* subtle tint */
    rgba(25, 60, 108, 0) 100%    /* fully transparent end */
  );
  pointer-events: none;
}
  .biolegacy-equipped-to-container {
    align-self: stretch;
    position: relative;
    font-weight: 300;
  }
  .biolegacy-equipped {
    margin: 0;
  }
  .container,
  .introduction-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .introduction-section {
    align-self: stretch;
    overflow: hidden;
    padding: 50px var(--padding-20) var(--padding-16);
    gap: var(--gap-60);
  }
  .container {
    width: 100%;
    gap: var(--gap-16);
    max-width: var(--max-w-1200);
    text-align: left;
    font-size: var(--fs-14);
    color: var(--Subtext);
    font-family: var(--font-poppins);
  }
  .bottom-container {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .right-side {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px var(--padding-0);
    box-sizing: border-box;
    min-width: var(--min-w-350);
  }
  .deep-therapeutic-area-container {
    align-self: stretch;
    position: relative;
    display: inline-block;
    min-width: var(--min-w-250);
  }
  .glp-ind-enabling {
    font-family: var(--font-poppins);
  }
  .button,
  .contact-us-wrapper {
    display: flex;
    align-items: center;
  }
  .button {
    align-self: stretch;
    overflow: hidden;
    flex-direction: column;
    min-width: var(--min-w-250);
    background: unset;
  }
  .button:hover{
    background: unset;
  }
  .contact-us-wrapper {
    cursor: pointer;
    border: var(--border-1);
    padding: var(--padding-6) var(--padding-10);
    background-color: transparent;
    border-radius: var(--br-7);
    background: var(--Linear-Button);
    justify-content: center;
  }
  .contact-us {
    position: relative;
    font-size: var(--fs-20);
    font-family: var(--font-poppins);
    color: var(--White);
    text-align: center;
    font-weight: 700;
  }
  .biolegacy-individual-services-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--padding-0) var(--padding-80);
    box-sizing: border-box;
    max-width: var(--max-w-1200);
  }
  .container-child {
    align-self: stretch;
    height: 112px;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
  }
  .container2 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--gap-32);
    min-width: var(--min-w-350);
    max-width: var(--max-w-1200);
  }
  .bottom-container-icon {
    height: 482px;
    width: 320px;
    border-radius: var(--br-8);
    object-fit: cover;
    min-width: 320px;
    max-width: 320px;
  }
  .biolegacy-individual-services-right-side,
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .biolegacy-individual-services-right-side {
    flex: 1;
    gap: var(--gap-24);
    min-width: var(--min-w-350);
    text-align: left;
    font-size: var(--fs-28);
    color: var(--Primary-Text);
    font-family: var(--font-lexend-exa);
  }
  .header {
    align-self: stretch;
    overflow: hidden;
    min-width: var(--min-w-250);
  }
  .biolegacy-individual-services-glp-ind-enabling {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: inherit;
    font-weight: 300;
    font-family: inherit;
    color:#F7931E ;
  }
  .left-container,
  .text-content {
    display: flex;
    align-items: flex-start;
  }
  .text-content {
    align-self: stretch;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 46px;
    font-size: var(--fs-14);
    color: var(--Subtext);
    font-family: var(--font-poppins);
  }
  .left-container {
    flex: 1;
    min-width: 273px;
    max-width: 273px;
  }
  .a-successful-ind {
    align-self: stretch;
    flex: 1;
    position: relative;
  }
  .right-container {
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-width: var(--min-w-350);
    max-width: 529px;
  }
  .rigorous-glp-compliance-container {
    flex: 1;
    position: relative;
  }
  .rigorous-glp-compliance-stric {
    margin: 0;
    font-size: inherit;
    padding-left: var(--padding-19);
  }
  .more-on-glp {
    margin: 0;
    position: relative;
    font-size: var(--fs-20);
    font-weight: 700;
    font-family: var(--font-poppins);
    color: var(--White);
    text-align: center;
  }
  .container4 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--gap-32);
    min-width: var(--min-w-350);
    max-width: var(--max-w-1200);
  }
  .biolegacy-individual-services-left-container {
    width: 313px;
    display: flex;
    align-items: flex-start;
    min-width: 313px;
    max-width: 313px;
  }
  .biolegacy-individual-services-right-container {
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-width: var(--min-w-350);
    max-width: 489px;
  }
  .biolegacy-individual-services-bottom-container {
    height: 482px;
    /* width: 320px; */
    width: 352px; 
    border-radius: var(--br-8);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
    max-width: 320px;
  }
  .biolegacy-individual-services-frame-icon {
    /* height: 503px; */
    /* width: 320px; */
    height: 566px;
    position: absolute;
    margin: 0 !important;
    /* top: 0.5px;
    left: -160px;
    object-fit: cover; */
    z-index: 0;
    flex-shrink: 0;
    transform: scaleX(-1);
  }
  .biolegacy-individual-services-bottom-container-icon {
    height: 482px;
    width: 320px;
    object-fit: cover;
    max-width: 320px;
  }
  .left-container2,
  .right-container2 {
    flex: 1;
    display: flex;
    align-items: flex-start;
  }
  .left-container2 {
    min-width: 310px;
    max-width: 310px;
  }
  .right-container2 {
    min-width: var(--min-w-350);
    max-width: 492px;
  }
  .testimonial-section {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80) var(--padding-30);
    /* background-image: url(./public/Testimonial-Section@3x.png); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }
  .container8,
  .header3,
  .left-side {
    display: flex;
    align-items: flex-start;
  }
  .container8 {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 269px 113px;
    max-width: var(--max-w-1200);
  }
  .header3,
  .left-side {
    flex-direction: column;
  }
  .left-side {
    flex: 1;
    gap: var(--gap-24);
    min-width: var(--min-w-350);
    text-align: center;
    font-size: 36px;
    color: var(--White);
    font-family: var(--font-poppins);
  }
  .header3 {
    align-self: stretch;
    overflow: hidden;
    padding: var(--padding-10);
    gap: 10px;
  }
  .lets-get-you {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: inherit;
    font-weight: 600;
    font-family: inherit;
  }
  .dont-wait-to-container {
    align-self: stretch;
    position: relative;
    font-size: 24px;
  }
  .full-testimonial-frame,
  .testimonial-frame {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
  }
  .testimonial-frame {
    border-radius: 25px;
    background-color: var(--Black);
    overflow: hidden;
    flex-direction: column;
    padding: 25px var(--padding-10);
    text-align: left;
    font-size: var(--fs-14);
  }
  .full-testimonial-frame {
    gap: var(--gap-16);
    min-width: 200px;
  }
  .full-testimonial-frame-child {
    width: 80px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
  }
  .text-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-24);
    min-width: 339px;
  }
  .dr-firstname-lastname-container,
  .working-with-biolegacy {
    align-self: stretch;
    position: relative;
  }
  .dr-firstname-lastname-container {
    font-size: var(--fs-12);
  }

  
  
  @media screen and (max-width: 1200px) {
    .nav-container {
      gap: 40px;
      max-width: 100%;
    }
    .container,
    .frame {
      max-width: 100%;
    }
    .biolegacy-individual-services-container {
      padding-left: var(--padding-40);
      padding-right: var(--padding-40);
      box-sizing: border-box;
      max-width: 100%;
    }
    .container2,
    .container4,
    .container8 {
      max-width: 100%;
    }
    .container8 {
      gap: 56px;
    }
    .footer-content {
      gap: 54px;
      max-width: 100%;
    }
  }
  @media screen and (max-width: 1050px) {
    .navigation-links {
      max-width: 100%;
    }
    .biolegacy-equipped-to-container {
      font-size: 42px;
    }
    .lets-get-you {
      font-size: 29px;
    }
    .right-side4 {
      max-width: 100%;
    }
    .stay-connected-title {
      font-size: 31px;
    }
    .contact-info-title {
      font-size: 35px;
    }
  }
  @media screen and (max-width: 750px) {
    .navigation-bar {
      gap: 34px;
    }
    .nav-container {
      gap: var(--gap-20);
    }
    .introduction-section {
      gap: var(--gap-30);
      padding-top: var(--padding-32);
      padding-bottom: var(--padding-20);
      box-sizing: border-box;
    }
    .right-side {
      gap: var(--gap-20);
    }
    .container2 {
      gap: var(--gap-16);
    }
    .left-container,
    .right-container {
      max-width: 100%;
    }
    .container4 {
      gap: var(--gap-16);
    }
    .biolegacy-individual-services-right-container,
    .left-container2,
    .right-container2 {
      max-width: 100%;
    }
    .testimonial-section {
      gap: 38px;
      padding-top: 52px;
      padding-bottom: 52px;
      box-sizing: border-box;
    }
    .container8 {
      gap: 28px;
    }
    .full-testimonial-frame {
      flex-wrap: wrap;
    }
    .right-side4 {
      padding-top: var(--padding-20);
      padding-bottom: var(--padding-20);
      box-sizing: border-box;
      flex: 1;
    }
    .footer {
      padding-top: 65px;
      padding-bottom: 47px;
      box-sizing: border-box;
    }
    .footer-content {
      gap: 27px;
    }
  }
  @media screen and (max-width: 450px) {
    .navigation-bar {
      gap: 17px;
    }
    .biolegacy-equipped-to-container {
      font-size: 31px;
    }
    .biolegacy-individual-services-glp-ind-enabling {
      font-size: var(--fs-22);
    }
    .text-content {
      gap: 23px;
    }
    .testimonial-section {
      gap: 19px;
    }
    .lets-get-you {
      font-size: var(--fs-22);
    }
    .dont-wait-to-container {
      font-size: var(--fs-19);
    }
    .text-container {
      min-width: 100%;
    }
    .right-side4 {
      max-width: 100%;
    }
    .footer-logo {
      gap: 31px;
    }
    .stay-connected-title {
      font-size: 23px;
    }
    .email-input {
      font-size: var(--fs-19);
    }
    .contact-info-title {
      font-size: 26px;
    }
    .contact-info-content {
      gap: var(--gap-16);
    }
    .social-info-parent {
      flex-wrap: wrap;
    }
    .copyright-text {
      font-size: 18px;
    }
  }