body{ font-family: 'Source Sans 3', sans-serif; font-size: 16px; color: #002F5F;margin: 0;padding: 0;overflow-x: hidden;}
p,h1,h2,h3,h4,h5,h6,ul,li{ margin:0; }
ul{padding:0;}
li {list-style: none}
a{text-decoration: none;}
a{color:inherit;}
html { scroll-behavior: smooth;}
/**********header********/
header {position:absolute;top:0;z-index:2; width: 100%;}
.navbar-brand img { width: 200px;height: 80px; object-fit: cover;object-position: center;}
.navbar-collapse {display: none; transition: all 0.3s ease;}
.navbar-collapse.show { display: block;}
header .navbar-nav {float: right;}
header .nav-item a {color: #fff !important; padding: 0px 14px !important;font-size: 14px; font-weight: 600;text-transform: uppercase;}
header .nav-item:hover{box-shadow: 0 0 40px rgba(2, 136, 255, 0.4), 0 0 20px rgba(2, 136, 255, 0.2);}

/*******Banner**********************/
.banner {color: #fff;text-align: center;background-size: cover; background-position: center; height: 100vh; position: relative;
 transition: background-image 1s ease-in-out; overflow: hidden;}
.banner::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 47, 95, 0.7);  z-index: 1;}
.banner-content {position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.banner h2,.banner p,.banner .btn-blue,.banner .guarantee-text { position: relative; z-index: 2;}
.banner .families img { width: 120px; height: 24px; object-fit: contain; object-position: center center;cursor: pointer;}
.banner h2 { font-size: 51px; line-height: 65px;  font-weight: 300;letter-spacing: 1.5px;text-align: center; color: #fff; margin-bottom: 20px; clear: both; display: block;}
.banner p {font-weight: 300;font-size: 16px; line-height: 27px; color: #fff;  margin-bottom: 35px; clear: both;display: block;}
.banner .families {gap: 15px; font-size: 14px; line-height: 18px;  margin-bottom: 38px; }
.banner .btn-blue {  color: rgb(0, 47, 95);text-transform: uppercase; padding: 15px 25px; font-weight: 600; border-radius: 10px;
 letter-spacing: 1px; transition: transform 0.3s ease, box-shadow 0.3s ease;    color: #fff;  background-color: transparent;  border: 1px solid #fff;}
.banner .btn-blue:hover {background-color: #fff; color: #002F5F;transition: transform 0.3s ease;}
.banner .guarantee-text { font-size: 14px;  margin: 0; color: #ccc; margin-top: 26px;}

/**********hero*********/
.hero { display: flex; align-items: center; justify-content: space-between; padding: 60px;
 background-color: #f4f7fb; color: #002F5F;  overflow: hidden;  }
.hero h1 { margin-top: 0;  margin-bottom: 20px;  text-transform: capitalize;  font-size: 42px;  font-weight: 700; line-height: 48px;
 animation: fadeInUp 1s ease-in-out forwards;}
.hero p { line-height: 35px; font-size: 24px; margin-top: 0; margin-bottom: 30px; opacity: 0;text-align: justify;
  animation: fadeInUp 1.2s ease-in-out forwards;animation-delay: 0.3s;}
.hero .families img { width: 120px; height: 24px; object-fit: contain; object-position: center center;cursor: pointer;}
.hero .families { display: flex; gap: 15px; font-size: 14px; line-height: 18px; align-items: flex-end; margin-bottom: 15px; animation: fadeInUp 1.4s ease-in-out forwards;
  animation-delay: 0.5s;}
.hero a.btn-orange { background-color: #002F5F; color: #ffffff; text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;
  text-decoration: none; display: inline-block; box-shadow: 0 4px 8px rgba(0, 47, 95, 0.3); transition: transform 0.2s;}
.hero a.btn-orange:hover { transform: scale(1.05);}
.hero .guarantee-text { font-size: 14px;  margin: 0; color: #ccc; animation: fadeInUp 1.8s ease-in-out forwards;animation-delay: 0.9s;}
.hero .hero-image img { width: 56%; border-radius: 24%; transition: transform 0.5s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.4);border: 2px solid #002F5F;}
.hero .hero-image:hover img { transform: translateY(-10px) scale(1.02);}
.hero .d-flex { flex-direction: column; justify-content: center; align-items: start;}
.image-wrapper { position: relative; display: inline-block;}
.image-wrapper img { display: block;}
.overlay-image { position: absolute; bottom: -115px;  right: 32px;}
.overlay-image:hover { transform: scale(1.05);}
/* Animations */
@keyframes fadeInUp {
  from { opacity: 0;  transform: translateY(30px); }
  to {  opacity: 1; transform: translateY(0); }
}

/************Clients******************/
.clients {padding: 40px 0; background: #022F60;}
.logo-row { display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap;}
.logo-row img { max-height: 99px; opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; border: 4px solid #fff; border-radius: 19px;}
.logo-row img:hover {opacity: 1;transform: scale(1.05); cursor: pointer;}
.clients .families img {width: 100%; height: 24px; object-fit: contain; object-position: center center;cursor: pointer; display: flex;
  justify-content: center; margin-top: 20px;}

/************Testimonial*************/
.testimonial {background: #022F60;padding: 21px 0; color: white; font-family: 'Segoe UI', sans-serif;}
.testimonial-box {display: flex; align-items: center;justify-content: center; gap: 40px; max-width: 1000px;margin: 0 auto;border-radius: 10px;}
.testimonial-profile {display: flex; align-items: center; gap: 20px;}
.testimonial-profile img {width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 4px solid #fff;}
.user-details h4 {font-size: 18px; font-weight: bold; margin: 0;}
.user-details p { font-style: italic; font-size: 14px; margin: 4px 0 0;}
.testimonial-text {max-width: 600px; border-left: 2px solid #fff; padding-left: 30px;}
.testimonial-text p {font-size: 22px;line-height: 1.6; margin: 0;text-align: justify;}

/***************Protection******************/
.protection { background-color: #f4f7fb; }
.protection .content h1 { font-weight: 700; font-size: 38px; margin-bottom: 20px; color: #002F5F;padding-top: 51px;}
.protection .content p { font-size: 19px; line-height: 1.6;}
.features { background-color: #f4f7fb; padding: 45px 0;}
.features .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.features .feature-box {background-color: #f9f9f9; padding: 30px 20px; border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;}
.features .feature-box:hover {transition: transform 0.6s ease; background-color: #9daec1;}
.features .feature-box img {width: 38px; height: 38px; margin-bottom: 20px;
  filter: brightness(0) saturate(100%) invert(15%) sepia(36%) saturate(2482%) hue-rotate(191deg) brightness(97%) contrast(102%);
  transition: transform 0.3s ease;}
.features .feature-box h3 {clear: both; font-size: 17px; line-height: 100%;vertical-align: middle; margin: 20px 0 20px 0;
    font-weight: 700; color: #002F5F;  transition: all .50s ease-in-out;}
.feature-box p {font-size: 14px;color: #002F5F ;line-height: 1.6; margin-bottom: 20px;text-align: justify;}

/*********protection1*******************************/
.protection1 { background-color: #f4f7fb;color: #002F5F; padding: 10px 84px;}
.protection1 .content {  max-width: 900px; margin: auto; background-color: #ffffff; padding: 30px; border-radius: 12px;border-left: 6px solid #022f60;}
.protection1 h2 { color: #002F5F; font-size: 28px; border-bottom: 2px solid #dee2e6; padding-bottom: 10px;font-weight: 600; }
.protection1 ul { list-style: none; padding: 0;}
.protection1 li { margin: 20px 0; padding-left: 37px; position: relative;line-height: 1.6;}
.protection1 li::before { content: '✔'; position: absolute; left: 0; color: #022f60; font-weight: bold;}
.protection1 strong {color: #002F5F;}
.protection1 .highlight {  background-color: #e9f7fe; padding: 3px 6px;border-radius: 4px;}

.protection1 a.button { background-color: #002F5F; color: #ffffff; text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;
  text-decoration: none; display: inline-block; box-shadow: 0 4px 8px rgba(0, 47, 95, 0.3); transition: transform 0.2s;}
.protection1 a.button:hover { transform: scale(1.05);}

/***********Benefits-section*********************/
.benefits-section { background-color: #ffffff;  padding: 40px 20px; color: #002F5F;}
.benefits-section h2 {text-align: center; margin-top: 0; margin-bottom: 20px; font-size: 24px; font-weight: 700; line-height: 32px; color: #002F5F;}
.benefits-cards { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 40px;}
.benefits-section .card {background-color: #f4f7fb; padding: 30px 20px; border-radius: 12px; border: none; max-width: 300px; flex: 1 1 280px; opacity: 0; transform: translateY(50px);
 transition: all 0.5s ease-out;}
.benefits-section .card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: #002f5f;}
.benefits-section .card p { font-size: 15px; line-height: 24px;color: #002f5f; text-align: justify;}
.benefits-section .icon { width: 60px; height: 60px; margin-bottom: 15px; object-fit: cover; object-position: center center; aspect-ratio: 1 / 1;
    filter: brightness(0) saturate(100%) invert(15%) sepia(36%) saturate(2482%) hue-rotate(191deg) brightness(97%) contrast(102%);
    transition: transform 0.3s ease;}
.benefits-section a.cta-button { background-color: #002F5F; color: #ffffff; text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;
  text-decoration: none; display: inline-block; box-shadow: 0 4px 8px rgba(0, 47, 95, 0.3); transition: transform 0.2s;}
.benefits-section a.cta-button:hover { transform: scale(1.05);}
/* Scroll animation */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
  animation: bounceIn 0.8s ease forwards;
}
@keyframes bounceIn {
  0% { transform: translateY(50px); }
  60% { transform: translateY(-15px); }
  80% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}
.benefits-section .card { opacity: 0; transition: all 0.8s ease-out;}
.from-left {transform: translateX(-50px);}
.from-right { transform: translateX(50px);}
.from-bottom {  transform: translateY(50px);}
.animate-on-scroll.visible { opacity: 1; transform: translate(0, 0);}

/********Sceinytist-section*******/
.scientist-section {color: #002F5F;background-color: #fff; padding: 43px 15px; text-align: center;}
.scientist-section h2 { color: #002F5F; margin-top: 0; margin-bottom: 20px; font-size: 32px; font-weight: 700; line-height: 33px;}
.subtext {line-height: 24px; font-size: 16px; max-width: 900px; margin: 0 auto 40px;color: #002f5f;}
.video-container { position: relative; max-width: 1104px; margin: 0 auto 40px;}
.video-thumb { width: 100%; border-radius: 10px;}
.play-button { position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); font-size: 60px; background-color: rgba(0, 0, 0, 0.6);
  color: #fff;  border-radius: 50%;  width: 80px;  height: 80px; line-height: 80px; cursor: pointer;}
.scientist-section .card-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px; max-width: 1200px; margin: auto;}
.scientist-section .card { background: #ffffff;
      border-radius: 12px; overflow: hidden;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
.scientist-section .card:hover {transform: translateY(-5px)}
.scientist-section .card img { width: 100%;  height: 220px;object-fit: cover;}
.scientist-section .card .caption { padding: 16px;font-size: 1.1em;font-weight: 600;color: #002F5F;text-align: center;}
.validation-note {font-weight: 600; font-size: 18px; margin: 30px 0 20px;}
.scientist-section a.cta-button { background-color: #002F5F; color: #ffffff; text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;
  text-decoration: none; display: inline-block; box-shadow: 0 4px 8px rgba(0, 47, 95, 0.3); transition: transform 0.2s;}
.scientist-section a.cta-button:hover { transform: scale(1.05);}

/******Protection-section********/
.protection-section { /*background: linear-gradient(#795f38 0, #f7b451 100%);*/ padding: 60px 20px; text-align: center; color: #fff;   
 background: linear-gradient(to right, rgb(2, 47, 96) 60%, rgba(2, 47, 96, 0.3) 100%);}
.protection-section h2 { font-size: 26px; font-weight: 700; margin-bottom: 33px;}
.protection-section .icon-grid { display: flex;  flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 40px; }
.protection-section .icon-box {
  max-width: 330px;width: 333px;}
.protection-section .icon-box img { width: 55px; height: 55px; margin-bottom: 10px;}
.protection-section .icon-box h3 {  font-size: 13px;  font-weight: 700; margin: 10px 0 5px;}
.protection-section .icon-box p { font-size: 11px;  margin: 0; text-transform: uppercase;}
.protection-section a{width: unset;   line-height: 24px;  letter-spacing: 1px; background-color: #fff; color: #002f5f ; text-transform: uppercase;
    padding: 15px 30px;  font-weight: 600; border-radius: 10px; }
.protection-section .icon-box .description {font-size: 14px;color: #e0e0e0;margin-top: 10px;line-height: 1.5; text-align: left;
  max-width: 300px; margin-left: auto;}
.protection-section .description .more-text {display: none;transition: all 0.3s ease;}
.protection-section .description.show-more .more-text {display: block;}
.protection-section .read-more-btn {background: none;border: none;color: #fff;font-size: 13px;
  margin-top: 8px; text-decoration: underline; cursor: pointer; padding: 0;}

/*********feature-section**********/
.feature-section { background-color: #9daec1;  padding: 40px 20px; text-align: center; color: #000; }
.feature-section .feature-grid { display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: 20px; justify-items: center; margin: 0 auto 40px;}
.feature-section .feature-card { background: #f4f7fb; padding: 20px; border: 1px solid rgba(0, 0, 0, .1); box-shadow: rgba(0, 0, 0, .1) 0 0 20px; border-radius: 10px;
  text-align: left; max-width: 360px; display: flex;  flex-direction: column; justify-content: space-between;}
.feature-section .feature-card .icon img{ width: 36px; height: auto; object-fit: cover; object-position: center center; aspect-ratio: 1 / 1;}
.feature-section .feature-card h3 { margin: 10px 0 4px;  font-weight: 600; font-size: 18px; line-height: 26px;color: #002f5f;}
.feature-section .feature-card p { font-size: 14px;  font-weight: 300;   margin-bottom: 10px;color: #002f5f;text-align: justify;}
.feature-section .feature-card img { width: 100%; border-radius: 8px; object-fit: cover;}
.feature-section a{ background-color: #002F5F; color: #ffffff; text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;
  text-decoration: none; display: inline-block; box-shadow: 0 4px 8px rgba(0, 47, 95, 0.3); transition: transform 0.2s;}
.feature-section a.btn-orange:hover { transform: scale(1.05);}

/**********Quote-section*****/
.quote-section {background-color: #fff; text-align: center;color: #002f5f; padding: 48px 20px; }
.quote-section h2 {  font-size: 24px; font-weight: 700; color: #002f5f; line-height: 28px; margin-top: 0;margin-bottom: 20px;}
.quote-content { display: flex; flex-wrap: wrap;  align-items: center; justify-content: center; margin: 45px auto; text-align: left; gap: 40px; position: relative;}
.quote-image img { max-width: 100%; height: auto; border-radius: 12px; max-height: 400px; object-fit: cover; vertical-align: middle;}
.quote-text p { font-size: 17px; line-height: 24px; margin-bottom: 16px;text-align: justify;}
.quote-section a{background-color: #ff9e2c;color: #fff;text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;  width: unset;
	line-height: 24px;margin-top: 10px; margin-bottom: 10px; letter-spacing: 1px;}
.quote-section a.btn-orange { background-color: #002F5F; color: #ffffff; text-transform: uppercase; padding: 15px 20px; font-weight: 600; border-radius: 10px;
  text-decoration: none; display: inline-block; box-shadow: 0 4px 8px rgba(0, 47, 95, 0.3); transition: transform 0.2s;}
.quote-section a.btn-orange:hover { transform: scale(1.05);}

/************Faq-section********/
.faq-section {color: #002f5f; max-width: 1000px; margin: 0 auto; padding: 77px 20px;}
.faq-section h2 {font-size: 32px; font-weight: 700; color: #002f5f;  line-height: 36px; text-align: center; margin-bottom: 30px;}
.faq-section .faq-item { border-bottom: 1px solid #ccc;}
.faq-section .faq-question { color: #002f5f;width: 100%; background: none; border: none;  font-size: 18px; text-align: left; padding: 15px 40px 15px 10px; 
  position: relative; cursor: pointer;font-weight: 600;word-break: break-word;}
.faq-section .faq-question::after { content: '+'; position: absolute; right: 20px; font-size: 24px; transition: transform 0.3s;}
.faq-section .faq-question.active::after {content: '−';}
.faq-section .faq-answer {max-height: 0;overflow: hidden;transition: max-height 0.4s ease; padding: 0 10px;}
.faq-section .faq-answer p {margin: 0; padding: 10px 0 20px; font-size: 16px; color: #002f5f;text-align: justify;}
.faq-section .faq-section .custom-list{ list-style: none;  padding-left: 0;text-align: justify;}
.faq-section ul.custom-list li::before {font-size: 21px; content: "•"; color: #002f5f;display: inline-block;width: 1em; margin-left: -1em;}

/***************Footer**********************/
.footer {opacity: 1 ; background-color: #022F60;  color: #ffff; display: flex; justify-content: space-between; padding: 40px;flex-wrap: wrap; }
.footer .footer-section { flex: 1; min-width: 250px; margin: 20px; }
.footer .footer-section p,
.footer .footer-section a { color: #fff;  text-decoration: none;  margin: 6px 0;  display: block; }
.footer-section a:hover {  text-decoration: underline;  }
.footer .email-signup input[type="email"] {padding: 12px; width: 80%; border: none; border-radius: 5px 0 0 5px; outline: none; }
.footer .email-signup button {padding: 12px; border: none;background-color: #333;color: white;cursor: pointer; border-radius: 0 5px 5px 0;}


/*************************proven-results*******************/
/*****************banner1****************/
@keyframes infiniteScroll {
  from {transform: translateX(0)}
  to {transform: translateX(-50%)}
}

.horizontal-scrolling-items { color: #fff; display: flex; font-size: 14px; width: 2600px; animation-name: infiniteScroll;
  animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear;}
.horizontal-scrolling-items__item { white-space: nowrap;}
.announcement-bar { width: 100%;background-color: #02274B; color: #fff; padding: 17px 0; overflow: hidden; position: relative; font-size: 14px;
  white-space: nowrap;}

/********************Header************/
header .fa-cart-shopping {color: #fff; font-size: 18px;}

/*****************product-grid**************/
.product-grid {padding: 197px 20px; background-color: #f9f9f9;  }
.product-grid h2 {text-align: center; margin-bottom: 55px; font-weight: 700;padding: 40px 0px; }
.product-grid .test-box { position: relative;  overflow: hidden;  border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);transition: transform 0.3s ease;}
.product-grid .test-box:hover { transform: scale(1.03);  }
.product-grid .test-box img {width: 100%; height: 100%; object-fit: cover; display: block;}
.product-grid .overlay { position: absolute; top: 0;left: 0; width: 100%; height: 100%;
      /*background: rgba(0, 0, 0, 0.4);*/
      background: rgba(0, 47, 95, 0.7);color:#fff;display: flex; align-items: center;justify-content: center; font-weight: bold;
      font-size: 1.2rem; text-align: center; padding: 10px; }

/**********************biomatrix-shield-offer*************/
.Products-section {margin: 120px 0 0;padding: 40px 20px;}
.Products-section .product-card {max-width: 901px;margin: 20px auto;}
.Products-section .product-image { display: flex;justify-content: center;align-items: center;}
.Products-section .product-image img {max-width: 91%; height: auto;margin-right: 20px;}
.Products-section .product-info .sku { background: #002f5f;  width: 300px; color: #fff; border: 2px solid #002f5f; transition: 0.5s ease-in;
    font-size: 16px; font-weight: 600; padding: 5px 34px; margin-bottom: 10px;border-radius: 4px;}
.Products-section .product-info h3 { font-family: 'Noto Sans Thai', sans-serif;  color: #002f5f; font-size: 31px; font-weight: 700;
 text-transform: capitalize; margin: 15px 0px;}
.Products-section .product-info p {font-size: 16px;margin: 6px 0;color: #022f60;}
.Products-section .quantity-section { border-top: 1px solid #9daec1; max-width: 300px;color: #002f5f;  padding-top: 11px;}
.Products-section .quantity-section label { color: #002f5f;  font-weight: 600; line-height: 34px; font-size: 17px;}
.Products-section .qty-box {display: flex;border: 1px solid #ccc;border-radius: 3px;overflow: hidden;width: fit-content;margin-bottom: 20px;}
.Products-section .qty-box button { width: 40px; height: 40px;border: none;background: white; font-size: 20px; cursor: pointer; border-right: 1px solid #ccc;}
.Products-section .qty-box button:last-child {border-left: 1px solid #ccc;border-right: none;}
.Products-section .qty-box input { width: 50px; text-align: center; border: none; font-size: 16px;}
.Products-section .btn-blue{background: #002f5f; width: 300px;color: #fff;transition: 0.5s ease-in; font-size: 16px; font-weight: 600;
    padding: 5px 34px;text-align: center;}
.Products-section .add-cart { background-color: #002F5F;margin-bottom: 16px;border: 2px solid #002f5f;}
.Products-section .download {border: 2px solid #0076a8;background-color: #0076a8;}

.testimonial-section1 .families img { width: 120px; height: 24px; object-fit: contain; object-position: center center;cursor: pointer;}
.testimonial-section1 {background: #9daec1;background: linear-gradient(to right, rgb(2, 47, 96) 60%, rgba(2, 47, 96, 0.3) 100%);
  color: #fff;padding: 60px 20px; }
.testimonial-container1 { max-width: 700px; margin: 0 auto;}
.testimonial-section1 h2 { font-size: 28px; font-weight: bold; margin-bottom: 10px;}
.testimonial-section1 .subheadline {font-size: 18px;margin-bottom: 15px;}
.testimonial-section1 .testimonial h3 { font-size: 20px; font-weight: bold; margin-bottom: 15px;}
.testimonial-section1 .testimonial p {font-size: 16px; line-height: 1.6; color: #fff;}
.testimonial-section1 .author { margin-top: 30px; display: flex;align-items: center; justify-content: center; gap: 10px;}
.testimonial-section1 .author-img { width: 50px; height: 50px;border-radius: 50%; object-fit: cover;border: 2px solid white;}

.instruction-section { padding: 50px 123px; background: #fff;}
.instruction-section .instruction-image img {width: 100%;border-radius: 16px;}
.instruction-section .instruction-text h2 { font-size: 33px;font-weight: 700;margin-bottom: 24px;}
.instruction-section .instruction-text ol { counter-reset: step-counter;padding-left: 0;font-size:16px;line-height: 1.7;margin-bottom: 20px;padding: 12px 0px;}
.instruction-section .instruction-text ol li {counter-increment: step-counter; position: relative; padding-left: 20px;}
.instruction-section .instruction-text ol li::before { content: counter(step-counter) "."; position: absolute; left: 0; top: 0;}
.instruction-section .instruction-text hr { border: 0;border-top: 3px solid #9daec1; margin: 20px 0;}
.instruction-section .features { background-color: #f4f7fb; padding: 34px 0;}
.instruction-section .feature {display: flex;align-items: center;gap: 10px;font-size: 15px;margin: 17px;}
.instruction-section .feature img {width: 32px; height: 32px;aspect-ratio: 1 / 1; object-fit: cover; object-position: center center;
  filter: brightness(0) saturate(100%) invert(11%) sepia(90%) saturate(655%) hue-rotate(184deg) brightness(96%) contrast(105%);}

/**********************************contact-us*********************/
.contact-section {padding: 60px 20px;text-align: center; max-width: 860px;margin: 180px auto 0px; color: #000;}
.contact-title {font-size: 43px; font-weight: 600;margin-bottom: 18px;}

.contact-area {padding: 60px 20px;color: #002F5F; margin-bottom: 81px;}
.contact-area .container {max-width: 1100px; margin: 0 auto;}
.contact-area .contact-info h2 { font-size: 35px; margin-bottom: 30px; font-weight: 600;}
.contact-area .contact-info p { font-size: 16px; line-height: 30px;margin-bottom: 30px; color: #022f60;}
.contact-area .contact-info ul { font-size: 16px; line-height: 26px; margin-bottom: 15px; color: #022f60;}
.contact-area .contact-info ul li {margin-bottom: 15px;}
.contact-area .contact-info a { text-decoration: underline; font-weight: bold;}
.contact-area .contact-list { list-style: none; padding: 0;}
.form-group { margin-bottom: 20px; display: flex; flex-direction: column;}
.form-row { display: flex; gap: 20px; margin-bottom: 20px;}
.form-column {flex: 1; display: flex; flex-direction: column;}
.contact-area .form-group label,
.form-column label { margin-bottom: 5px; font-weight: 500;}
input,
textarea {padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 0;}
input:focus,
textarea:focus { outline: none; border-color: #022f60;}
.contact-area .submit-btn { background-color: #022f60; border: none; padding: 12px 20px; color: #fff; font-weight: bold; cursor: pointer;}
.contact-area span { color: red;}

  
/**********responsive*********/
@media screen and (max-width: 600px) {
  header { position: relative; padding: 10px 15px;background-color: rgb(0 47 95);}
  .navbar-brand img { width: 150px; height: auto; }
  .navbar-nav { padding: 10px 0; background-color: rgba(0, 47, 95, 0.85);}
  .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
  .nav-item { margin: 5px 0;}
  .navbar-toggler { border: 1px solid #fff;background: transparent; box-shadow: none !important;}
  .navbar-toggler:focus,.navbar-toggler:active {outline: none !important;box-shadow: none !important;}
  .nav-item a { font-size: 13px;padding: 6px 0 !important; }
  .navbar-collapse {background-color: rgba(0, 47, 95, 0.9); padding: 10px 15px;}
  .navbar-nav .nav-link { color: #fff !important; padding: 10px 0;display: block;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}

  .banner { height: auto;padding: 60px 15px 40px;text-align: center;}
  .banner-content { position: relative;  top: auto; left: auto; transform: none;padding: 0 20px; text-align: center;}
  .banner h2 { font-size: 23px;line-height: 40px;font-weight: 400; margin-bottom: 15px;}
  .banner p { font-size: 14px;line-height: 22px;margin-bottom: 20px;}
  .banner .btn-blue {padding: 10px 13px; font-size: 12px;border-radius: 8px;}
  .banner .guarantee-text { font-size: 12px; margin-top: 15px;}

  .hero { padding: 30px 15px; flex-direction: column;}
  .hero .row {flex-direction: column;}
  .hero .col-sm-6 { width: 100%;}
  .hero .d-flex { align-items: center; text-align: center;}
  .hero p{font-size: 16px; line-height: 30px;text-align: justify;}
  .hero .families { justify-content: center;}
  .hero .hero-image { text-align: center; margin-top: 30px;} 
  .hero .hero-image img { width: 100%; border-radius: 16px;}
  .overlay-image { position: relative; bottom: auto;right: auto; margin-top: 20px; width: 80%; }

  .testimonial-box {flex-direction: column; align-items: center;text-align: center; gap: 20px; padding: 0 15px;}
  .testimonial-profile { flex-direction: column; align-items: center; gap: 10px; }
  .testimonial-profile img { width: 100px;height: 100px;}
  .user-details h4 {font-size: 16px;}
  .testimonial-text {border-left: none; padding-left: 0;max-width: 100%;}
  .testimonial-text p {font-size: 14px;line-height: 1.5; text-align: justify;}

  .protection .content h1 {font-size: 30px;}
  .protection .content p { font-size: 16px;}

  .features {padding: 34px 0;}

  .protection1 { padding: 10px 20px; }
  .protection1 .content { padding: 20px; border-left: 4px solid #022f60;}
  .protection1 h2 { font-size: 21px; padding-bottom: 8px;}
  .protection1 li {font-size: 14px; margin: 15px 0; padding-left: 28px;}
  .protection1 li::before {left: 0;font-size: 16px;}
  .protection1 a.button { display: block; width: 100%;text-align: center;padding: 14px; font-size: 16px;margin-top: 20px;}

  .benefits-section h2 { font-size: 22px;}

  .scientist-section {padding: 30px 10px;}
  .scientist-section h2 { font-size: 24px;line-height: 28px;margin-bottom: 15px;}
  .subtext {font-size: 15px;line-height: 22px; margin-bottom: 30px; padding: 0 10px;text-align: justify;}
  .video-container {margin-bottom: 30px;}
  .play-button {font-size: 30px; width: 50px;height: 50px; line-height: 50px;}
  .scientist-section .card-container {grid-template-columns: 1fr; gap: 20px;}
  .scientist-section .card img { height: 100%;display: block;max-width: 300px;width: 100%;margin: 0 auto; object-fit: cover;}
  .scientist-section .note1{ padding: 26px 0px !important; font-size: 24px !important;}
  .scientist-section .card .caption { font-size: 17px; padding: 14px; }
  .validation-note { font-size: 19px; margin: 20px 0;}
  .scientist-section a.cta-button {font-size: 16px; padding: 14px; width: 100%; display: block; margin-top: 20px;}

  .protection-section { padding: 40px 15px;}
  .protection-section h2 { font-size: 20px;margin-bottom: 25px;}
  .protection-section .icon-grid {flex-direction: column; align-items: center; gap: 25px;}
  .protection-section .icon-box { width: 100%;max-width: 280px; margin: 0 auto;}
  .protection-section .icon-box img { width: 45px;height: 45px;}
  .protection-section .icon-box h3 { font-size: 12px; }
  .protection-section .icon-box p { font-size: 10px; }
  .protection-section a { font-size: 13px;padding: 12px 24px;}

  .feature-section .feature-card p{text-align: justify;}

  .quote-content { flex-direction: column;text-align: center;gap: 20px;}
  .quote-text p { font-size: 15px;line-height: 22px; text-align: justify; margin-top: 21px;}
  .quote-image img {width: 100%;height: auto; max-height: none;object-fit: contain;}
  .quote-section h2 { font-size: 22px; line-height: 26px;}
  .quote-section a.btn-orange { width: 100%;text-align: center;}

  .faq-section { padding: 50px 15px;}
  .faq-section h2 {font-size: 24px !important; line-height: 30px; margin-bottom: 20px !important;}
  .faq-section .faq-question { font-size: 15px; padding: 12px 40px 12px 8px;}
  .faq-section .faq-question::after {right: 12px; font-size: 20px;} 
  .faq-section .faq-answer p {text-align: justify; font-size: 14px; padding: 8px 0 16px;}
  .faq-section .faq-answer .custom-list{font-size: 14px;text-align: justify;}

  /*biomatrix-shield-offer page*/
  .Products-section { margin-top: 0px !important;}
  .Products-section .product-card {padding: 10px !important;}
  .Products-section .quantity-section .row {flex-direction: row; gap: 12px;}
  .Products-section .col-sm-5,
  .Products-section .col-sm-7{width: 100%;max-width: 100%;flex: 0 0 100%;}
  .Products-section .product-image {margin-bottom: 20px;}
  .Products-section .product-info h3 {font-size: 24px; line-height: 32px;}
  .Products-section .btn-blue {width: 100%; padding: 10px 20px;font-size: 16px;display: block; margin-top: 10px;}
  .Products-section .quantity-section {max-width: 100%; padding-top: 16px;}
  .Products-section .add-cart,
  .Products-section .download {width: 100%;}
  .Products-section .col-3,
  .Products-section .col-9 { flex: 0 0 auto;width: auto;}
  .Products-section .qty-box {width: 100%; justify-content: start;}

  .instruction-section {padding: 30px 20px; }
  .instruction-section .instruction-text h2 { font-size: 24px;margin-bottom: 18px;}
  .instruction-section .instruction-text ol { font-size: 14px;padding: 8px 0;}
  .instruction-section .instruction-text ol li { padding-left: 16px;}
  .instruction-section .features {padding: 20px 10px;}
  .instruction-section .feature { gap: 8px; font-size: 14px; margin: 12px 0;}.instruction-section .feature img { width: 28px; height: 28px;}
  .instruction-section .row {display: flex; flex-direction: column;}
  .instruction-section .col-sm-5,
  .instruction-section .col-sm-7,
  .instruction-section .col-sm-6 {width: 100%; padding: 0;}
  .instruction-section .instruction-image { margin-bottom: 20px;}

  .faq-section{margin: 0px auto !important;}

  /*proven-results page*/
  .product-grid{ padding:33px 20px; }
  .product-grid{margin-bottom:31px;}

  .pdf-section h1 { font-size: 25px !important ; margin-top: 30px !important; padding: 0 15px !important; }
  .pdf-container { width: 90% !important;height: 500px !important; margin: 60px auto !important; }

  .contact-section{margin: 0px auto 0px;}
  .contact-area{padding: 0px 20px;}
  .contact-area .contact-info ul{margin-bottom: 50px;}
  .contact-form { gap: 15px; }
  .contact-section h2 {font-size: 29px; }
  .contact-area .contact-info h2{font-size: 27px;}
  .subtitle {  font-size: 16px;}
}

@media (max-width: 1050px) {
  header { position: relative; padding: 10px 15px;background-color: rgb(0 47 95);}
  .navbar-brand img { width: 150px; height: auto; }
  .navbar-nav { padding: 10px 0; background-color: rgba(0, 47, 95, 0.85);}
  .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
  .nav-item { margin: 5px 0;}
  .navbar-toggler { border: 1px solid #fff;background: transparent; box-shadow: none !important;}
  .navbar-toggler:focus,.navbar-toggler:active {outline: none !important;box-shadow: none !important;}
  .nav-item a { font-size: 13px;padding: 6px 0 !important; }
  .navbar-collapse {background-color: rgba(0, 47, 95, 0.9); padding: 10px 15px;}
  .navbar-nav .nav-link { color: #fff !important; padding: 10px 0;display: block;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}

  .Products-section{margin: 197px 0 0;}
  .Products-section .product-card { padding: 0 20px;}
  .Products-section .product-info h3 { font-size: 26px;}
  .Products-section .product-info p { font-size: 15px;}
  .Products-section .btn-blue {width: 100%; padding: 8px 20px;}
  .Products-section .sku {width: 100%; font-size: 15px; padding: 5px 20px;}
  .Products-section .quantity-section { max-width: 100%;}

  .instruction-section {padding: 40px 40px; }
  .instruction-section .instruction-text h2 { font-size: 30px;}
  .instruction-section .feature {font-size: 14px;margin: 14px;}
  .instruction-section .feature img { width: 28px; height: 28px;}
  .instruction-section .features {padding: 20px 10px;}
  .instruction-section .col-sm-6 {  width: 100%; }
}

@media (max-width: 768px) {
  .Products-section { padding: 20px 10px;margin-top: 198px;}
  .Products-section .product-card { max-width: 100%;}
  .Products-section .row {flex-direction: column;}
  .Products-section .col-sm-5,
  .Products-section .col-sm-7 { width: 100%;max-width: 100%; }
  .Products-section .product-image {margin-bottom: 20px;}
  .Products-section .product-info h3 { font-size: 22px;}
  .Products-section .product-info p { font-size: 14px;}
  .Products-section .btn-blue { width: 100%; font-size: 15px;}
  .Products-section .sku {width: 100%; font-size: 14px; padding: 5px 20px; }
  .Products-section .quantity-section label { font-size: 15px; }
  .Products-section .qty-box button {width: 35px; height: 35px; font-size: 18px; }
  .Products-section .qty-box input { width: 45px;font-size: 15px;}

  .instruction-section { padding: 30px 20px;}
  .instruction-section .row {flex-direction: column;}
  .instruction-section .col-sm-5,
  .instruction-section .col-sm-7 {width: 100%; padding: 0;}
  .instruction-section .instruction-image {margin-bottom: 20px; }
  .instruction-section .instruction-text h2 { font-size: 26px; margin-bottom: 16px;}
  .instruction-section .instruction-text ol { font-size: 14px; padding: 8px 0;}
  .instruction-section .instruction-text ol li { padding-left: 16px;}
  .instruction-section .features {padding: 20px 10px;}
  .instruction-section .col-sm-6 {  width: 100%; }
  .instruction-section .feature { gap: 8px; font-size: 14px; margin: 12px 0;}
  .instruction-section .feature img { width: 26px; height: 26px; }
}

@media (max-width: 768px) {	
  .hero {  flex-direction: column; text-align: center; }
  .hero-content, .hero-image {max-width: 100%; }
  .hero-image img {margin-top: 30px; width: 80%; }
}

@media (max-width: 600px) {
  .quote {flex-direction: column; text-align: center; }
  .quote p { max-width: 100%; }
}

@media (max-width: 900px) {
  .section { flex-direction: column;  padding: 30px; text-align: center; }
  .icon-item {flex: 0 0 45%; }
}

@media (max-width: 768px) {
  .quote-content .row {flex-direction: column;text-align: center; }
  .quote-text {text-align: left;}
}
@media (max-width: 768px) {
  .overlay {font-size: 1rem; }
}

@media (max-width: 768px) {
  .form-row {flex-direction: column;}
}