/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.1.3.1759404952
Updated: 2025-10-02 11:35:52

*/
:root {
  /* 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;
  --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-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-50: 50px;
  --padding-40: 40px;
  --padding-80: 80px;

  /* BorderRadius */
  --br-7: 7px;
  --br-8: 8px;
  --br-25: 25px;
  --br-24:24px

  /* 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-28: 28px;
  --fs-30: 30px;
  --fs-31: 31px;
  --fs-36: 36px;
  --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;
  --min-w-350:350px;
}


.navigation-bar {
    background-color: var(--White);
    display: flex;
    flex-direction: column;
  }
.navigation-bar {
    align-self: stretch;
    align-items: center;
    justify-content: center;
    padding: 60px var(--padding-20);
    top: 0;
    z-index: 99;
    position: sticky;
    text-align: center;
    font-size: var(--fs-20);
    color: var(--color-darkslateblue);
    font-family: var(--font-poppins);
  }
  .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;
  }
  .link-items,
  .navigation-links {
    display: flex;
    align-items: center;
  }
  .navigation-links {
    flex: 1;
    flex-wrap: wrap;
    align-content: center;
    gap: 13px;
    min-width: var(--min-w-250);
    max-width: 968px;
  }
  .link-items {
    justify-content: center;
    padding: var(--padding-0) var(--padding-10);
    position: relative;
  }
  .navigation-links a{
    color: #193C6C;
  }
  
  
  /* Then, style the hover on the whole h3 element */
  
.navigation-links .link-items h3.services:hover {
  background: linear-gradient(268.12deg, #f6af1d, #e04312);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 10px;

}
.navigation-links .link-items h3.services:hover a {
  color: #fff !important;
}

  .arrow.first-level{
    font-size: 20px;
    position: relative;
    top: -2px;
    
  }

  .services {
    margin: 0;
    position: relative;
    font-size: inherit;
    font-weight: 300;
    font-family: inherit;
    padding: 2px 8px;
  }
  /* .capabilities-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;
  } */
  .capabilities {
    position: relative;
    font-size: var(--fs-20);
    font-weight: 600;
    font-family: var(--font-poppins);
    color: var(--White);
    text-align: center;
  }

/* Second-level submenu */
.sub-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  min-width: 360px;
  z-index: 999;
}


.sub-menu .sub-link-items {
  margin: 0;
  text-align: left;
}

/* Third-level submenu */
.sub-sub-menu {
  display: none ;
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  min-width: 200px;
}

/* Show submenus on hover */
.sub-link-items:hover > .sub-sub-menu,
.link-items:hover > .sub-menu {
  display: block;
}

/* Arrow indicator for items with children */
.sub-link-items .arrow,
.sub-sub-link-items .arrow {
  font-size: 12px;
  margin-left: 5px;
}


/* ============================= */
/* 📱 Mobile Header Styles */
/* ============================= */

.mobile-header-container {
  display: flex;
  justify-content: space-between; /* logo left, hamburger right */
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  position: relative;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Mobile logo */
.mobile-logo img {
  max-height: 50px;
  width: auto;
}

/* Hamburger icon */
.mobile-menu-toggle {
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Hide mobile header by default (desktop) */
.mobile-header {
  display: none;
}

/* ============================= */
/* 📏 Responsive Rules */
/* ============================= */
@media (max-width: 992px) {
  .mobile-header {
    display: block;
  }

  .desktop-menu {
    display: none;
  }

  .navigation-bar {
    align-self: unset;
    align-items: unset;
    justify-content: unset;
    padding: unset;
    position: relative;
  }
}

/* ============================= */
/* 📋 Mobile Menu Container */
/* ============================= */
.mobile-menu-container {
  display: none; /* hidden by default */
  background: #fff;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 998;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-height: 80vh;          /* ✅ limit height */
  overflow-y: auto;          /* ✅ enable scroll */
  scrollbar-width: thin;     /* ✅ thinner scrollbar (Firefox) */
}

/* Optional: customize scrollbar (Chrome/Safari) */
.mobile-menu-container::-webkit-scrollbar {
  width: 6px;
}
.mobile-menu-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 10px;
}

/* ============================= */
/* 🔗 Mobile Menu Links */
/* ============================= */
.mobile-menu,
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-link-item > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;          /* ✅ light typography */
  font-size: 16px;           /* ✅ smaller font size */
  text-decoration: none;
  color: #193C6C;            /* ✅ link color */
  border-bottom: 1px solid #eee;
  transition: color 0.3s ease;
}

.mobile-link-item > a:hover {
  color: #000;               /* Slightly darker on hover */
}

/* ============================= */
/* ⬇️ Submenu Arrow Styles */
/* ============================= */
.mobile-arrow {
  font-size: 25px;           /* ✅ larger arrow */
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.mobile-link-item.open .mobile-arrow {
  transform: rotate(180deg); /* ✅ rotate on open */
}

/* ============================= */
/* 📂 Submenu Styling */
/* ============================= */
.mobile-sub-menu,
.mobile-sub-sub-menu {
  display: none;
  padding-left: 20px;
}

.mobile-link-item.open > .mobile-sub-menu,
.mobile-link-item.open > .mobile-sub-sub-menu {
  display: block;
}

/* Submenu link typography (same as main links but slightly smaller) */
.mobile-sub-menu a {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #193C6C;
  text-decoration: none;
  padding: 12px 20px;
  display: block;
  border-bottom: 1px solid #f1f1f1;
  transition: color 0.3s ease;
}

.mobile-sub-menu a:hover {
  color: #000;
}
/* ============================= */
/* 📱 Mobile Header Styles */
/* ============================= */

.mobile-header-container {
  display: flex;
  justify-content: space-between; /* logo left, hamburger right */
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  position: relative;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Mobile logo */
.mobile-logo img {
  max-height: 50px;
  width: auto;
}

/* Hamburger icon */
.mobile-menu-toggle {
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Hide mobile header by default (desktop) */
.mobile-header {
  display: none;
}

/* ============================= */
/* 📏 Responsive Rules */
/* ============================= */
@media (max-width: 992px) {
  .mobile-header {
    display: block;
  }

  .desktop-menu {
    display: none;
  }

  .navigation-bar {
    align-self: unset;
    align-items: unset;
    justify-content: unset;
    padding: unset;
    position: relative;
  }
}

/* ============================= */
/* 📋 Mobile Menu Container */
/* ============================= */
.mobile-menu-container {
  display: none; /* hidden by default */
  background: #fff;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 998;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-height: 80vh;          /* ✅ limit height */
  overflow-y: auto;          /* ✅ enable scroll */
  scrollbar-width: thin;     /* ✅ thinner scrollbar (Firefox) */
}

/* Optional: customize scrollbar (Chrome/Safari) */
.mobile-menu-container::-webkit-scrollbar {
  width: 6px;
}
.mobile-menu-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 10px;
}

/* ============================= */
/* 🔗 Mobile Menu Links */
/* ============================= */
.mobile-menu,
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-link-item > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;          /* ✅ light typography */
  font-size: 16px;           /* ✅ smaller font size */
  text-decoration: none;
  color: #193C6C;            /* ✅ link color */
  border-bottom: 1px solid #eee;
  transition: color 0.3s ease;
}

.mobile-link-item > a:hover {
  color: #000;               /* Slightly darker on hover */
}

/* ============================= */
/* ⬇️ Submenu Arrow Styles */
/* ============================= */
.mobile-arrow {
  font-size: 25px;           /* ✅ larger arrow */
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.mobile-link-item.open .mobile-arrow {
  transform: rotate(180deg); /* ✅ rotate on open */
}

/* ============================= */
/* 📂 Submenu Styling */
/* ============================= */
.mobile-sub-menu,
.mobile-sub-sub-menu {
  display: none;
  padding-left: 20px;
}

.mobile-link-item.open > .mobile-sub-menu,
.mobile-link-item.open > .mobile-sub-sub-menu {
  display: block;
}

/* Submenu link typography (same as main links but slightly smaller) */
.mobile-sub-menu a {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #193C6C;
  text-decoration: none;
  padding: 12px 20px;
  display: block;
  border-bottom: 1px solid #f1f1f1;
  transition: color 0.3s ease;
}

.mobile-sub-menu a:hover {
  color: #000;
}










.right-side4 {
  flex: 0.8933;
  border-radius: 24px;
  background-color: var(--White);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-24);
  box-sizing: border-box;
  gap: var(--gap-24);
  min-width: var(--min-w-350);
  max-width: 450px;
}
.wpcf7{
  width: 100%;
}
.wpcf7 p{
  margin: 0 0 20px !important;
}
.wpcf7 textarea {
  margin-top: 14px;

}
.wpcf7-form{
  margin-top: 25px;
}
.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 14px;
  font-weight: normal;
  display: block;
  font-family: 'Poppins';
  text-align: left;
}
.wpcf7 form .wpcf7-response-output {
  margin:5px; 

  font-size: 20px;
  border: none;
  font-family: var(--font-poppins);
  text-align: left;
  /* border: 2px solid #00a0d2; */
}
.wpcf7 .wpcf7-spinner {
display: block !important;
margin: 10px auto 0 auto; /* Space above spinner, centered horizontally */
position: static !important; /* Reset position if previously changed */
float: none !important; /* Remove float if applied */
}
.contact-fields {
  width: 100%;
  border: none !important;
  outline: 0 !important;
  /* padding: var(--padding-16) var(--padding-24) !important; */
  padding: 12px 20px !important;
  box-sizing: border-box !important;
  font-family: var(--font-poppins) !important;
  font-size: var(--fs-12) !important;
  color: var(--Black) !important;
  min-width: 241px !important;
  align-self: stretch;
  border-radius: var(--br-8) !important;
  background-color: var(--color-gray) !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  /* margin: 10px 0px !important; */
}
/* .biolegacy-individual-services-contact-fields {
  border: 1px solid var(--Primary-Text);
  padding: 14px var(--padding-24);
} */
.contact-fields4,
.email {
  border: var(--border-1);
  outline: 0;
  font-family: var(--font-poppins);
  font-size: var(--fs-12);
  color: var(--Black);
}
.email {
  width: 100%;
  background-color: transparent;
  position: relative;
  text-align: left;
  display: inline-block;
  min-width: 20px;
  padding: 0;
}
.contact-fields4 {
  background-color: var(--color-gray);
  height: auto;
  width: auto;
  border-radius: var(--br-8);
  overflow: hidden;
  padding: var(--padding-16) var(--padding-24) var(--padding-80);
  box-sizing: border-box;
}
.contact-btn{
  border-radius: 12px; 
  background: var(--Linear-Button);
  justify-content: center;
  padding: 14px 20px !important;
  width: 100%;
  position: relative;
  font-size: 16px !important;
  text-align: center;
  font-weight: 700 !important;
  font-family: var(--font-poppins) !important;
  text-transform: none !important;
}
.button4,
.contact-fields4,
.send-a-message-wrapper {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.button4 {
  cursor: pointer;
  border: var(--border-1);
  padding: 0;
  background-color: transparent;
  overflow: hidden;
  flex-direction: column;
}
.send-a-message-wrapper {
  border-radius: 12px;
  background: var(--Linear-Button);
  justify-content: center;
  padding: var(--padding-10);
}

.send-a-message {
  color: var(--White);
  font-family: var(--font-poppins);
}
.footer
   {
    color: var(--White);
    font-family: var(--font-poppins);
  }
.send-a-message {
  position: relative;
  font-size: 16px;
  text-align: center;
}






.footer {
  align-self: stretch;
  background-color: var(--color-darkslateblue);
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--padding-30) 73px;
  text-align: left;
  font-size: 38.6px;
}
.footer,
.footer-content,
.footer-links {
  display: flex;
  align-items: center;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6{
  color: #fff;
}
.footer-content {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 109px;
  max-width: var(--max-w-1200);
}
.footer-links {
  align-self: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  gap: 334px 0;
}
.footer-logo {
  width: 310px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 62px;
  min-width: 290px;
  max-width: 310px;
}
.group-icon {
  width: 303.5px;
  height: 91.5px;
  position: relative;
  object-fit: contain;
}
.stay-connected {
  gap: var(--gap-20);
}
.stay-connected,
.stay-connected-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stay-connected-subtitle,
.stay-connected-title {
  align-self: stretch;
  position: relative;
  font-weight: 300;
}
.stay-connected-title {
  margin: 0;
  font-size: inherit;
  font-family: inherit;
}
.stay-connected-subtitle {
  font-size: 15.8px;
}
.email-signup {
  align-self: stretch;
  border-radius: 10px;
  background-color: var(--White);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-0) var(--padding-10);
  gap: 0;
}
.email-input {
  width: calc(100% - 33.6px)!important;
  border: none !important;
  outline: 0;
  font-weight: 300;
  font-family: var(--font-poppins);
  font-size: 24.1px;
  background-color: transparent;
  flex: 1;
  position: relative;
  color: var(--color-darkslateblue);
  text-align: left;
  display: inline-block;
  min-width: 150px;
  padding: 0 !important;
}
.vector-icon {
  width: 13.6px;
  position: relative;
  height: 15.8px;
}
.contact-info {
  width: 328px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 290px;
  max-width: 328px;
  font-size: 44px;
}
.contact-info-title {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 300;
  font-family: inherit;
}
.contact-details,
.contact-info-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-info-content {
  gap: var(--gap-32);
  font-size: var(--fs-15);
}
.contact-details {
  gap: 3px;
}
.phone-info {
  /* white-space: pre-wrap; */
}
.address-info,
.phone-info {
  align-self: stretch;
  position: relative;
  font-weight: 300;
}
.mail {
  margin: 0;
  white-space: pre-wrap;
}
.social-info-parent {
  align-self: stretch;
  display: flex;
  align-items: center;
  /* gap: 56px; */
}
.social-info {
  position: relative;
  font-weight: 300;
}
.group {
  height: 34.6px;
  width: 74.8px;
  display: flex;
  align-items: flex-start;
  gap: 5.6px;
}
.biolegacy-individual-services-icon-links,
.icon-links {
  height: 34.6px;
  width: 34.6px;
  border-radius: 200px;
  z-index: 2;
}
.biolegacy-individual-services-icon-links {
  z-index: 1;
}
.copyright-text {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-22);
  text-align: center;
}






.phone-info,
.address-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* Fixed width for the left labels */
.phone-info > div:first-child,
.address-label, .social-info {
  width: 90px; /* adjust this width if needed */
  flex-shrink: 0;
  text-align: left;
}

/* Right-side column (values) */
.phone-info > div:last-child,
.address-details, .social-info-parent > div:last-child  {
  flex: 1;
}

/* Ensure multiple address lines align neatly */
.address-details p {
  margin: 0;
  line-height: 1.6;
  padding-left: 0;
}

/* Responsive view - stack labels and values on mobile */
@media (max-width: 600px) {
  .footer, .footer-content, .footer-links {
    display: block;

  }

}