:root,
[data-bs-theme=light] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #000000;
  --bs-primary: #215C5C;
  --bs-primary-rgb: 33, 92, 92;
  --bs-primary-hover: #144B4B;
  --bs-primary-hover-rgb: 20, 75, 75;
  --bs-secondary: #CCE8C9;
  --bs-secondary-rgb: 204, 232, 201;
  --bs-heading-color: #006CB5;
  --inverse-color: #494B5B;
  --inverse-color-rgb: 73, 75, 91;
  --bs-link-color: var(--bs-primary);
  --nav-bg: #ffffff;
  --nav-color: #fff;
  --nav-hover-color: #1f6bff;
  --dropdown-bg: #ffffff;
  --dropdown-color: #1f6bff;
  --dropdown-hover-bg: #f7f7f7;
  --nav-inverse: #000000;
  --nav-inverse-alt: #ffffff;
}

body {
  font: 1rem/1.7 "Montserrat", sans-serif;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


::-moz-selection {
  background-color: var(--bs-black);
  color: var(--bs-white);
}

::selection {
  background-color: var(--bs-black);
  color: var(--bs-white);
}

a {
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  color: var(--bs-primary);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bs-heading-color);
}

.container {
  max-width: 1140px;
}

.section {
  padding: 70px 0;
  scroll-margin-top: 60px;
}

@media (max-width: 767.98px) {
  .section {
    padding: 40px 0;
  }

  .mt-20-m {
    margin-top: 20px;
  }

  .navbar-brand img {
    width: auto;
    height: 45px;
  }

  main {
    margin-top: 72px !important;
  }
}

.section.first-section {
  padding-top: 100px;
}

@media (min-width: 992px) {
  .section.first-section {
    padding-top: 130px;
  }
}

.text-heading-color {
  color: var(--bs-heading-color);
}


.page-title {
  padding-top: 100px !important;
  padding-bottom: 50px !important;
  background-color: rgba(var(--inverse-color-rgb), 0.03);
}


.navbar {
  background-color: #E3F0DE !important;
}

main {
  margin-top: 82px;
}

.subtitle {
  font-size: 16px;
  color: #7c7c7c;
  font-weight: 500;
}

.dark {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
  }

  .subtitle {

    color: #fff;

  }
}

.home_our_products {
  background: #039D67;
  background: linear-gradient(0deg, rgba(3, 157, 103, 1) 0%, rgba(0, 108, 181, 1) 100%);
}

@media (min-width: 992px) {
  .reflect {
    -webkit-box-reflect: below -16px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
  }
}


.card-pro {
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  border: none;
  min-height: 350px;
  padding: 30px;
  border-radius: 20px;
  background: #fff;

}

.card-title {
  color: #006CB5 !important;
  font-size: 28px;
  font-weight: 700;
}

.card-img-top {
  position: absolute;
  bottom: 10px;
  right: 0;
}

.card-pro:hover .card-img-top {
  animation: CardfadeOutDown 0.5s ease forwards;
}

.card-pro .card-text,
.card-pro .btn-arrow {
  opacity: 0;
}

.card-pro:hover .card-text {
  animation: CardfadeInUp 0.5s ease forwards;
}

.card-pro:hover .btn-arrow {
  animation: CardfadeInUp 0.5s ease forwards;
}

@media (max-width: 768px) {
  .card-img-top {
    position: relative;
    margin-top: 20px;
  }
  .card-pro .card-text,
.card-pro .btn-arrow {
  opacity: 1;
}
.card-pro:hover .card-img-top,
.card-pro:hover .card-text,
.card-pro:hover .btn-arrow {
  animation: none;
}
.w-m-full{width: 100%;}

}


.btn-arrow {
  padding: 12px 20px;
  background-color: #006CB5;
  border: none;
  color: #fff;
  display: block;
  border-radius: 7px;
  font-weight: 600;.
  cursor: pointer;
  text-decoration: none;
}
.btn-arrow:hover{
  background-color: #039D67;
}

.btn-outline-arrow {
  padding: 12px 20px;
  background-color: transparent;
  border: 1px solid #0CEB9D;

  color: #006CB5;
  display: block;
  border-radius: 7px;
  font-weight: 600;
}

.brand-logo {
  background: #E3F0DE;
  padding: 30px 0;
}


.why-card {
  background: #C3D170;
  padding: 30px;
  border-radius: 16px;
}

.why-card-odd {
  background: #85CA9E;
  padding: 30px;
  border-radius: 16px;
}

.why-card img,
.why-card-odd img {
  margin-bottom: 30px;
  height: 56px;
  width: auto;
}

.why-card .title,
.why-card-odd .title {
  margin-bottom: 16px;
  font-size: 20px;
  color: #000000;
  font-weight: 600;
}

.home_testimonial {
  background: #D2CC76;
  background: linear-gradient(0deg, rgba(210, 204, 118, 1) 0%, rgba(135, 202, 158, 1) 100%);
}

.testimonial-card {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  border: 2px solid #00A85A;
}

.testimonial-card img {
  margin-bottom: 30px;
}

.testimonial-card .text {
  line-height: 180%;
  font-size: 18px;
}

.testimonial-card .name {
  font-size: 16px;
  font-weight: 400;
}

.testimonial-card .name span {
  font-size: 14px;
}

footer .container-fluid.contact-info {
  background: url(../images/footer-bg.webp) repeat-x center
}

footer .container-fluid.footer-links {
  background: #373435;
  color: #fff;
}

footer .container-fluid.footer-links .quick-links {
  padding: 40px 0px;
  border-bottom: 1px solid #696768;
}

footer .container-fluid.footer-links a {
  color: #fff;
  margin-right: 20px;
  text-decoration: none;
}

footer .container-fluid.footer-links a:last-child {
  margin-right: 0;
}

footer .container-fluid.footer-links a:hover {
  text-decoration: underline;
}

footer .copyright {
  padding: 20px 0px;
  font-size: 14px;
}



footer .container-fluid.contact-info .logo {
  background: #006CB5;
  border-radius: 30px 0px 0px 30px;
  border: 1px solid #006CB5;
  padding: 20px;
}

footer .container-fluid.contact-info .address {
  background: #006CB5;
  padding: 20px;
  color: #fff;
}

footer .container-fluid.contact-info .contact-info {
  background: #006CB5;
  padding: 20px;
  border-radius: 0px 30px 30px 0px;
  color: #fff
}

footer .container-fluid.contact-info .contact-info a{
  color: #fff;
  text-decoration: none;
}
footer .container-fluid.contact-info .contact-info a:hover{
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  footer .container-fluid.contact-info .logo {
    border-radius: 16px 16px 0px 0px;
  }

  footer .container-fluid.contact-info .contact-info {
    border-radius: 0px 0px 16px 16px;
  }

  footer .container-fluid.contact-info .address {
    padding-bottom: 0;
  }

  footer .col-md-6:first-child {
    margin-bottom: 12px;
  }
}


@-webkit-keyframes CardfadeOutDown {
  from {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
  }
}

@-webkit-keyframes CardfadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

#back-to-top {
  position: fixed;
  bottom: 0px;
  right: 20px;
  visibility: hidden;
  opacity: 0;
  background-color: #006CB5;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  width: 40px;
  height: 40px;
}

#back-to-top i {
  font-size: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back-to-top.show {
  bottom: 20px;
  opacity: 1;
  visibility: visible;
}

.pro-cantainer-bg {
  background: url(../images/product-cat-graphic-bg-01.svg) no-repeat top right;
}

.pro-cantainer-bg-02 {
  background: #E3F0DE url(../images/product-cat-graphic-bg-02.svg) no-repeat top right;
}

.pro-cantainer-bg-03 {
  background: #D6E8FF url(../images/product-cat-graphic-bg-03.svg) no-repeat top right;
}

.pipes-title {
  font-size: 48px;
  color: #006CB5;
  font-weight: 700;
}

.pro-detail-div {
  border-top: 1px solid #CADFFA;
  padding: 24px 0;
}

.pro-card {
  background: #D6E8FF;
  background: linear-gradient(0deg, rgba(214, 232, 255, 1) 0%, rgba(121, 158, 206, 1) 100%);
  padding: 20px 40px 6px 40px;
  border-radius: 16px;
  text-align: center;
}

.pro-card-riverline {
  background: #CEBA79;
  background: linear-gradient(0deg, #FFF5D6 0%, #CEBA79 100%);
  padding: 20px 40px 6px 40px;
  border-radius: 16px;
  text-align: center;
}

.pro-card-a1 {
  background: #78C054;
  background: linear-gradient(0deg, #E3FFD6 0%, #78C054 100%);
  padding: 20px 40px 6px 40px;
  border-radius: 16px;
  text-align: center;
}

.pro-card-op {
  background: #A3A3A3;
  background: linear-gradient(0deg, #EAEAEA 0%, #A3A3A3 100%);
  padding: 20px 10px 6px 10px;
  border-radius: 16px;
  text-align: center;
}

.pro-card .title,
.pro-card-riverline .title,
.pro-card-a1 .title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-reflect: below -28px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));

}


.pro-card-op .title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;

}

.pro-why-card {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
}

.pro-why-card-odd {
  background: #D6FFE5;
  padding: 30px;
  border-radius: 16px;
}

.pro-why-card img,
.pro-why-card-odd img {
  margin-bottom: 30px;
  height: 56px;
  width: auto;
}

.pro-why-card .title,
.pro-why-card-odd .title {
  margin-bottom: 16px;
  font-size: 20px;
  color: #000000;
  font-weight: 600;
}

.pro-why-card img svg {
  fill: #006CB5
}

.about-page-banner {
  background: url(../images/about-page-bg.webp) repeat-x;
  background-size: 100% 50%;
}

.about-page-banner .title {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 80px;
  text-shadow: 1px 1px 2px #000;
}


.about-main-text {
  padding: 80px;
  font-size: 22px;
  text-align: center;
}


@media (max-width: 768px) {
  .about-page-banner {
  
  background-size: 100% 26%;
}
  .about-page-banner .title {
  font-size: 28px; 
  margin-bottom: 40px;
}
.about-main-text {
  padding: 20px;
  font-size: 16px;
  text-align: center;
}
}


.mission-box {
  background: #EFF3D8;
  padding: 30px;
  border-radius: 16px;
  text-align: left;
}

.vision-box {
  background: #DBF0E3;
  padding: 30px;
  border-radius: 16px;
  text-align: left;
}

.director-statement {
  font-size: 20px;
  line-height: 150%;
  font-weight: 500;
  padding: 0px 80px;
  position: relative;
}

.director-statement::before {
  content: url(../images/qute-icon.webp);
  position: absolute;
  left: 0;
  top: 0;
}

.director-statement::after {
  content: url(../images/qute-icon.webp);
  position: absolute;
  transform: rotate(180deg);
  right: 0;
  bottom: 0;
}

.team {
  aspect-ratio: 100 / 40.625;
  background: url(../images/team-bg.webp);
  padding-top: 80px;
  background-size: cover;
}

.team .title {
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  color: #fff;
  text-align: center;
  margin-bottom: 80px;
  text-shadow: 1px 1px 2px #000;
}

@media (max-width: 768px) {
  .about-page-banner {  
  background-size: 100% 26%;
}
  .about-page-banner .title {
  font-size: 28px; 
  margin-bottom: 40px;
}
.about-main-text {
  padding: 20px;
  font-size: 16px;
  text-align: center;
}
.director-statement {
  font-size: 16px;
  line-height: 130%;  
  padding: 0px 40px;
}
.director-statement::before, .director-statement::after {
  content: url(../images/qute-icon-m.webp);  
}
.team {
  padding-top: 20px;
  aspect-ratio: 100 / 100;
  background-position: top center;
}

.team .title {
  font-size: 28px; 
  line-height: 32px; 
  margin-bottom: 80px;
}
.pipes-title {
  font-size: 30px;
  margin-bottom: 10px;
}
}

.navbar {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  padding: 20px 0px;
  font-weight: 500;
}

.navbar .navbar-brand img {
  max-width: 150px;
}

.navbar .navbar-nav .nav-link {
  color: #000;
}

@media screen and (min-width: 1024px) {
  .navbar {
    letter-spacing: 0.1em;
  }

  .navbar .navbar-nav .nav-link {
    padding: 0.5em 1em;
  }

  .search-and-icons {
    width: 50%;
  }

  .search-and-icons form {
    flex: 1;
  }
}

@media screen and (min-width: 768px) {
  .navbar .navbar-brand img {
    max-width: 250px;
  }

  .navbar .navbar-collapse {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .search-and-icons {
    display: flex;
    align-items: center;
  }

  .web-banner {
    display: none;
  }

  .mobile-banner {
    display: block;
  }
}

.web-banner {
  display: block;
}

.mobile-banner {
  display: none;
}

@media (max-width: 768px) {
  .web-banner {
    display: none;
  }

  .mobile-banner {
    display: block;
  }
}

.sv::-webkit-media-controls {
  background-color: transparent;
}

.google-map {
  padding: 0px !important;
}

.google-map iframe {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
}

.contact-info-card .title{
  color: #006CB5;
  font-size: 22px;
  font-weight: bold;
}

.contact-info-card img{
  margin-bottom: 20px;
}

.contact-form{
  background: #E0EEFF;
  border-radius: 30px;
  padding: 30px;
}

.contact-form .title{
  color: #006CB5;
  font-size: 22px;
  font-weight: bold;
}

.text-banner{
  padding: 80px 0px 60px 0px;
  background-color: #006CB5;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
}