body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* Common Style Variables */
  
    /* Color */
    --Black: #000;
    --color-gray: rgba(0, 0, 0, 0.05);
    --color-skyblue: #80b8c7;
    --color-steelblue: #2a578c;
    --Primary-Text: #f7931e;
    --Secondary-Text: #193c6c;
    --Subtext: #4d4d4d;
    --White: #fff;
  
    /* Gap */
    --gap-10: 10px;
    --gap-16: 16px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-29: 29px;
    --gap-59: 59px;
  
    /* Padding */
    --padding-0: 0;
    --padding-6: 6px;
    --padding-10: 10px;
    --padding-16: 16px;
    --padding-20: 20px;
    --padding-21: 21px;
    --padding-24: 24px;
    --padding-30: 30px;
    --padding-32: 32px;
    --padding-40: 40px;
    --padding-80: 80px;
  
    /* BorderRadius */
    --br-7: 7px;
    --br-8: 8px;
    --br-25: 25px;
  
    /* Font */
    --font-inherit: inherit;
    --font-lexend-exa: Lexend Exa;
    --font-poppins: Poppins;
  
    /* FontSize */
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-30: 30px;
    --fs-31: 31px;
    --fs-inherit: inherit;
  
    /* Borders */
    --border-1: none;
    --border-2: 1px solid var(--color-steelblue);
  
    /* Shadows */
    --shadow-drop: 0px 0px 25px 13px rgba(0, 0, 0, 0.35);
  
    /* Gradients */
    --Linear-Button: linear-gradient(268.12deg, #f6af1d, #e04312);
  
    /* WidthHeights */
    --max-w-1200: 1200px;
    --min-w-250: 250px;
    --min-w-390: 390px;
    --width-580: 580px;
  }
  



.biolegacy-services-page-design {
  background-color: var(--White);
  display: flex;
  flex-direction: column;
}
.biolegacy-services-page-design {
  width: 100%;
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  font-size: 52px;
  color: var(--color-skyblue);
  font-family: var(--font-lexend-exa);
}
.biolegacy-services-page-design h2{
    color:#fff !important;
}
/* .navigation-bar {
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 60px var(--padding-20);
  top: 0;
  z-index: 99;
  position: sticky;
}
.nav-container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 80px;
  max-width: var(--max-w-1200);
}
.biolegacy-logo-top-color-1 {
  width: 200px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.frame-parent {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 13px;
  min-width: var(--min-w-250);
  max-width: 968px;
}
.services-parent {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-0) var(--padding-10);
  background-color: transparent;
  border-radius: var(--br-7);
  background: var(--Linear-Button);
  display: flex;
  align-items: center;
  justify-content: center;
}
.services {
  position: relative;
  font-size: var(--fs-20);
  font-weight: 600;
  font-family: var(--font-poppins);
  color: var(--White);
  text-align: center;
}
.service-overlay-icon {
  height: 24px;
  width: 24px;
  position: relative;
}
.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-0) var(--padding-10);
}
.species {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-0);
  background-color: transparent;
  position: relative;
  font-size: var(--fs-20);
  font-weight: 300;
  font-family: var(--font-poppins);
  color: var(--Secondary-Text);
  text-align: center;
  display: inline-block;
}
.nav-item2 {
  border-radius: var(--br-7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-0) var(--padding-10);
} */
/* .hero-banner,
.hero-container {
  display: flex;
  flex-direction: column;
}
.hero-banner {
  align-self: stretch;
  height: 350px;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10) var(--padding-20);
  box-sizing: border-box;
  background-image: url(./public/Hero-banner@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  text-align: left;
}
.hero-container {
  width: 100%;
  align-items: flex-start;
  max-width: var(--max-w-1200);
} */

.hero-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;
}
.hero-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: 80%;
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;
}
/* .from-hit-to-container {
  align-self: stretch;
  position: relative;
  font-weight: 300;
} */
.from-hit-to {
  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-32);
  text-align: left;
  font-size: var(--fs-14);
  color: var(--Subtext);
  font-family: var(--font-poppins);
}
.container {
  width: 100%;
  gap: var(--gap-16);
  max-width: var(--max-w-1200);
}
.left-side,
.working-biolegacy-is-container {
  align-self: stretch;
  min-width: var(--min-w-250);
}
.left-side {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px var(--padding-10);
  box-sizing: border-box;
}
.working-biolegacy-is-container {
  flex: 1;
  position: relative;
  display: inline-block;
}
.in-vitro-screening-and-custom {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: 19px;
}
.rightside {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-0) var(--padding-10);
  box-sizing: border-box;
  min-width: var(--min-w-250);
}
.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);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-us {
  position: relative;
  font-size: var(--fs-20);
  font-family: var(--font-poppins);
  color: var(--White);
  text-align: center;
}
.biolegacy-services-page-design-hero-banner,
.frame {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.biolegacy-services-page-design-hero-banner {
  align-self: stretch;
  padding: var(--padding-40) var(--padding-20);
  background-image: url(./public/Hero-banner1@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.frame {
  width: 100%;
  max-width: var(--max-w-1200);
}
.biolegacy-services-page-design-introduction-section {
  align-self: stretch;
  background-color: var(--White);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px var(--padding-20) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
  font-size: var(--fs-30);
  color: var(--White);
  font-family: var(--font-poppins);
}
.container-1-parent {
  align-self: stretch;
  height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 118px;
}
.container-1 {
  width: 100%;
  display: flex;
  align-items: center;
  max-width: var(--max-w-1200);
}
.left-side-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.biolegacy-services-page-design-left-side {
  width: 100%;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-25);
  background-color: var(--White);
  border: var(--border-2);
  box-sizing: border-box;
  justify-content: center;
  min-width: var(--min-w-390);
  max-width: 580px;
}
.biolegacy-services-page-design-left-side,
.card-1,
.header,
.header-text {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.card-1 {
  flex: 1;
  flex-direction: column;
}
.header,
.header-text {
  justify-content: center;
}
.header {
  align-self: stretch;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.header-text {
  flex: 1;
  padding: var(--padding-0) var(--padding-10);
}
.toxicology {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  font-weight: 300;
  font-family: inherit;
}
.bottom {
  padding: var(--padding-16);
  gap: var(--gap-10);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--Subtext);
  font-family: var(--font-poppins);
}
.bottom,
.text-content {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.biolegacy-delivers-the {
  align-self: stretch;
  position: relative;
}
.more-on-our-toxicology-service-wrapper {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-6) 9px;
  background-color: transparent;
  border-radius: var(--br-7);
  background: var(--Linear-Button);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-2,
.content-container {
  display: flex;
  justify-content: flex-end;
}
.container-2 {
  width: 100%;
  height: 225px;
  align-items: center;
  max-width: var(--max-w-1200);
  text-align: center;
  font-size: var(--fs-30);
  color: var(--White);
  font-family: var(--font-poppins);
}
.content-container {
  height: 521px;
  flex: 1;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
}
.biolegacy-services-page-design-header,
.left-side2 {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.left-side2 {
  width: var(--width-580);
  margin: 0 !important;
  position: absolute;
  top: -371px;
  left: 620px;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-25);
  background-color: var(--White);
  border: var(--border-2);
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: var(--min-w-390);
  z-index: 0;
}
.biolegacy-services-page-design-header {
  align-self: stretch;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header1@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.biolegacy-services-page-design-bottom {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-16);
  gap: var(--gap-10);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--Subtext);
}
.pkpd-adme-glp-non-glp-many {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-21);
}
.container-1-group {
  align-self: stretch;
  height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 118px;
  max-width: 100%;
}
.left-side-container {
  height: 501px;
  width: var(--width-580);
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.header2,
.left-side3 {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.left-side3 {
  width: var(--width-580);
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-25);
  background-color: var(--White);
  border: var(--border-2);
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: var(--min-w-390);
  max-width: 580px;
}
.header2 {
  align-self: stretch;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header2@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.biolegacy-specializes-in {
  font-family: var(--font-poppins);
}
.complete-range-of-research-rel {
  margin: 0;
  font-size: inherit;
  padding-left: var(--padding-21);
}
.header3 {
  align-self: stretch;
  overflow: hidden;
  justify-content: center;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header3@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.group-div,
.header-text4,
.header3,
.header4 {
  display: flex;
  align-items: flex-start;
}
.group-div {
  height: 477px;
  width: var(--width-580);
  max-width: 100%;
}
.header-text4,
.header4 {
  overflow: hidden;
  justify-content: center;
}
.header4 {
  align-self: stretch;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header4@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.header-text4 {
  padding: var(--padding-0) var(--padding-10);
}
.custom-assay-development {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 300;
  font-family: inherit;
}
.left-side6 {
  width: var(--width-580);
  margin: 0 !important;
  position: absolute;
  top: -347px;
  left: 620px;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-25);
  background-color: var(--White);
  border: var(--border-2);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: var(--min-w-390);
  z-index: 0;
}
.header5,
.hero-banner2 {
  align-self: stretch;
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.header5 {
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header5@3x.png);
}
.hero-banner2 {
  flex-direction: column;
  align-items: center;
  padding: var(--padding-40) var(--padding-20);
  background-image: url(./public/Hero-banner2@3x.png);
}
.container-13,
.introduction-section2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.introduction-section2 {
  align-self: stretch;
  overflow: hidden;
  flex-direction: column;
  padding: 50px var(--padding-20);
  text-align: center;
  font-size: var(--fs-30);
  color: var(--White);
  font-family: var(--font-poppins);
}
.container-13 {
  width: 100%;
  flex-wrap: wrap;
  align-content: center;
  max-width: var(--max-w-1200);
}
.header6,
.left-side7 {
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
}
.left-side7 {
  flex: 1;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-25);
  background-color: var(--White);
  border: var(--border-2);
  box-sizing: border-box;
  display: flex;
  min-width: 350px;
}
.header6 {
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header6@3x.png);
}
.header6,
.header7,
.hero-banner3,
.testimonial-section {
  align-self: stretch;
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.hero-banner3 {
  flex-direction: column;
  align-items: center;
  padding: var(--padding-40) var(--padding-20);
  background-image: url(./public/Hero-banner3@3x.png);
}
.header7,
.testimonial-section {
  justify-content: center;
}
.header7 {
  overflow: hidden;
  align-items: flex-start;
  padding: var(--padding-30) var(--padding-10);
  background-image: url(./public/Header7@3x.png);
}
.testimonial-section {
  flex-direction: column;
  align-items: center;
  padding: var(--padding-80) var(--padding-30);
  background-image: url(./public/Testimonial-Section@3x.png);
}
.biolegacy-services-page-design-container {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 269px 0;
  max-width: var(--max-w-1200);
}
.header8,
.left-side9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.left-side9 {
  flex: 1;
  gap: var(--gap-24);
  min-width: 350px;
  max-width: 600px;
  text-align: center;
  font-size: 36px;
  color: var(--White);
  font-family: var(--font-poppins);
}
.header8 {
  align-self: stretch;
  overflow: hidden;
  padding: var(--padding-10);
  gap: var(--gap-16);
}
.confidently-advance-to-container {
  align-self: stretch;
  position: relative;
  font-weight: 600;
}
.dont-wait- {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-24);
}
.full-testimonial-frame,
.testimonial-frame {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.testimonial-frame {
  border-radius: var(--br-25);
  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;
}
.testimonial-image-icon {
  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: 315px;
}
.dr-firstname-lastname-container {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-12);
}





/* .button,
.button-container,
.frame-textarea {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.button {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-0);
  background-color: transparent;
  overflow: hidden;
  flex-direction: column;
}
.button-container {
  border-radius: 12px;
  background: var(--Linear-Button);
  justify-content: center;
  padding: var(--padding-10);
} */



 

@media screen and (max-width: 1200px) {
  .nav-container {
    gap: 40px;
    max-width: 100%;
  }
  .container,
  .frame,
  .hero-container {
    max-width: 100%;
  }
  .biolegacy-services-page-design-introduction-section {
    padding-top: var(--padding-32);
    box-sizing: border-box;
  }
  .container-1-parent {
    gap: var(--gap-59);
  }
  .container-1,
  .container-2 {
    max-width: 100%;
  }
  .container-1-group {
    gap: var(--gap-59);
  }
  .biolegacy-services-page-design-container,
  .container-13 {
    max-width: 100%;
  }
  .footer-content {
    gap: 54px;
    max-width: 100%;
  }
}
@media screen and (max-width: 1050px) {
  .frame-parent {
    max-width: 100%;
  }
  .from-hit-to-container {
    font-size: 42px;
  }
  .biolegacy-services-page-design-introduction-section {
    padding-top: var(--padding-21);
    box-sizing: border-box;
  }
  .custom-assay-development,
  .toxicology {
    font-size: var(--fs-24);
  }
  .confidently-advance-to-container {
    font-size: 29px;
  }
  .stay-connected-title {
    font-size: var(--fs-31);
  }
  .contact-info-title {
    font-size: 35px;
  }
}
@media screen and (max-width: 750px) {
  .navigation-bar {
    gap: 34px;
  }
  .nav-container {
    gap: var(--gap-20);
  }
  .biolegacy-services-page-design-introduction-section {
    padding-top: var(--padding-20);
    box-sizing: border-box;
  }
  .container-1-parent {
    gap: var(--gap-29);
  }
  .container-1 {
    gap: var(--gap-20);
  }
  .biolegacy-services-page-design-left-side {
    max-width: 100%;
  }
  .container-2 {
    gap: var(--gap-20);
  }
  .container-1-group {
    gap: var(--gap-29);
  }
  .left-side3 {
    max-width: 100%;
  }
  .introduction-section2 {
    gap: var(--gap-59);
  }
  .container-13 {
    gap: var(--gap-20);
  }
  .testimonial-section {
    gap: 38px;
    padding-top: 52px;
    padding-bottom: 52px;
    box-sizing: border-box;
  }
  .left-side9 {
    max-width: 100%;
  }
  .full-testimonial-frame {
    flex-wrap: wrap;
  }
  .footer,
  .right-side {
    box-sizing: border-box;
  }
  .right-side {
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-20);
    max-width: 100%;
    flex: 1;
  }
  .footer {
    padding-top: 65px;
    padding-bottom: 47px;
  }
  .footer-content {
    gap: 27px;
  }
}
@media screen and (max-width: 450px) {
  .navigation-bar {
    gap: 17px;
  }
  .from-hit-to-container {
    font-size: var(--fs-31);
  }
  .introduction-section {
    padding-top: var(--padding-32);
    padding-bottom: var(--padding-21);
    box-sizing: border-box;
  }
  .custom-assay-development,
  .toxicology {
    font-size: var(--fs-18);
  }
  .introduction-section2 {
    gap: var(--gap-29);
    padding-top: var(--padding-32);
    padding-bottom: var(--padding-32);
    box-sizing: border-box;
  }
  .testimonial-section {
    gap: 19px;
  }
  .confidently-advance-to-container {
    font-size: var(--fs-22);
  }
  .dont-wait- {
    font-size: var(--fs-19);
  }
  .right-side {
    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: var(--fs-18);
  }
}