/* General Styles */
/* :root{
  --blue: #e07d19
} */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
body {
  line-height: 1.6;
  width: 100vw;
  overflow-x: hidden;
  position: relative;
  border: 1px solid red !important;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.btn a{
  background-color:#006370; padding:0.2rem 2rem;text-decoration: none;
  font-size: 15px;font-weight: bold;color: white;border-radius: 3px;}
.btn a:hover{color:#e07d19; }

.navbar{
  display:flex;
  align-items: center;
  justify-content: center;
  height:80px;width:100%;
  position:sticky; top:0;
  background: #006370;
  box-shadow: 0 10px 20px rgb(0,0,0,0.5);
  backdrop-filter:blur(10px);
  z-index: 999; /* top on other elements */
}
.navbar-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  padding: 0 2rem;
  max-width: 1400px;
}

.logo .navbar-name{
  font-size: 3rem;padding-right: 20px;
  font-weight: bold;color: #fff;
  text-decoration: none;
}
.navbar-container .navbar-menu{
  display: none;
  display: flex;text-align: center;
  gap:1.5rem;list-style: none; 
}
.navbar-container .navbar-menu li a{
  text-decoration: none;font-size: 2rem;font-weight: bold;
padding: 3px 20px; border-radius: 20px; border: 2px solid transparent;
transition: all 0.7s ease;color: #fff;
white-space: nowrap;
}
.navbar-container .navbar-menu li a:hover,
.navbar-container .navbar-menu li a.active{
  color:#000; background:#e07d19;
  border:2px solid #e07d19;
}

.navbar-container .navbar-menu.active{display: flex;}

.navbar-toggle{
  display: none;
  background-color: #21c2d7;padding:10px;
  border:none;cursor: pointer;
}
.bar{
  display: block;
  width: 25px;height: 3px;margin:5px auto;background: #fff;
  transition:all 0.3s ease-in-out;
}
@media(max-width:1030px){
  .navbar{ backdrop-filter: none; }
  .navbar-container .navbar-menu{
      display: none;color: #555;
   flex-direction: column; align-items: flex-start;
   gap:1.7rem !important; position: absolute;
   height: 55vh;width: 250px; top:0; right: 0;
  padding: 5rem 1.5rem; box-shadow: 0 10px 10px rgb(0,0,0,0.5);
  backdrop-filter: blur(10px);
}
.navbar-container .navbar-menu li a{background-color: rgb(42, 81, 81);font-size: 1.7rem;}              
.navbar-toggle{display: block; z-index: 999;}
.navbar-toggle.active .bar:nth-child(2){opacity: 0;}
.navbar-toggle.active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.navbar-toggle.active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width:480px){
  .navbar-container{padding: 0 1rem;}
  .navbar-name{font-size: 1.4rem;}
  .navbar-container .navbar-menu li a{
   font-size: 1.2rem; padding: 3px 15px}
}


/* Carousel Styling */
.row2 {
  max-width: 1400px;
  background-color: #f8f7fc;
  margin: 0 auto;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0 auto;padding: 0.5 0.8rem;
}
.well{background:#f8f7fc ; }
.well h5{color: #e07d19;text-align: center;font-family: sans-serif;font-size: 1.9rem;}
.well h3{
  font-size:1.8rem; font-weight:bold;color:#fff;background-color:#006370;
  text-align: center;margin-top: 0;padding:3px 0;}
.row2 .well .content p {font-size: 1.5rem; color: #545; line-height: 1.8;font-family:sans-serif;}
.row2 .well .app h3 {font-weight: bold;}
.row2 .well .app li a{font-weight: bold;font-size: 15px; color: #1f5e67;text-decoration: none;}
.row2 .well .app li a:hover {  color: #e07d19;}

#myCarousel {
  max-width: 100%;
  margin: 0 auto;
}
.carousel-item img {
  width: 100%;height: 100%;
  height: auto;
  object-fit: cover; /* Ensures images cover the carousel area */
}
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #e07d19; /* Semi-transparent background */
  border-radius: 50%;
  padding: 10px;
}
.carousel-indicators {
color:#e07d19 ;
}
.carousel-indicators li{
  background-color: #e07d19;
}
.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #e07d19;
  border: 3px solid #e07d19;
}
.carousel-indicators .active {
  background-color: #e07d19;
}

/* Media Queries for Smaller Screens */
@media (max-width: 768px) {
  .carousel-item img {
    max-height: 300px; /* Adjust for smaller screens */
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 10%;
  }
}



/* Features Section */

.features-section {
  background-color: #f8f7fc;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qualities {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
  justify-content: center; /* Center items on smaller screens */
  padding: 1.5rem;
  background-color: #f8f7fc;
}
.features-section h1 {
  margin-top: 10px; 
  padding: 0.7rem 1rem; 
  color: #fff;
  font-weight: 800;
  background-color: #006370;
  border-radius: 5px;
  text-align: center;
  width: 100%;           /   
}
.quality {
  background-color: #e6e8f1;
  padding: 2.5rem;
  border-radius: 1rem;
  margin: 1rem 1rem;
  width: calc(20% - 2rem); /* Adjust width for larger screens */
  border: 1px solid #006370;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quality:hover {
  border: 2px solid #e07d19;
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.quality i {
  font-size: 2.5rem; /* Adjusted for smaller screens */
  color: #e07d19;
  margin: 1rem;
}

.quality h3 {
  font-size: 2.2rem;font-weight: bold;
  font-weight: bold;
  color: #006370;
  margin-bottom: 1rem;
}

.quality p {
  font-size: 1.8rem;
  color: #020008;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Services Section */

.services-section {
  max-width: 1400px;
  margin: 0 auto;  padding: 5px 5px;
  text-align: center;
  background-color: #f8f7fcc4;
}
.services {
  padding: 20px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  background-color: #f8f7fc;
}
.services h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  padding: 20px 10px;
}

.service {
  background-color: #e6e8f1;
  border: 1px solid #006370;
  border-radius: 12px;
  padding: 25px;
  width: calc(33.333% - 40px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: 2px solid #e07d19;
}
.service i {
  font-size: 4rem;
  color:#e07d19;  margin: 2rem;
}
.service .img{margin: 10px;}
.service h3 {
  font-size: 2.2rem;font-weight: bold;
  margin-bottom: 15px;
  color: #006370;
}
.service p {
  font-size: 2.1rem;
  color: #020008;
  line-height: 1.8;
  margin-bottom: 20px;
}
.products-section h1, 
.services-section h1
 {
  margin: 0 auto 20px; 
  padding: 0.7rem 1rem;
  color: #fff;font-weight: 800;background-color: #006370;
  border-radius: 5px;   /* width: fit-content;  */
  text-align: center;
  max-width: 98%; 
  box-sizing: border-box;
}
.products-section {
  max-width: 1400px;
  margin: 0 auto;  padding: 5px 5px;
  text-align: center;
  background-color: #f8f7fcc4;
}
/* .our-products .btn more-products{margin-bottom:10px;} */
.select {
  padding: 7px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  width: 100%;
  max-width: 400px;
  background-color: #f9f9f9;
  cursor: pointer;
}
.select:focus {
  outline: none;
  border-color: #e07d19;
}
.products {
  padding: 20px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  background-color: #f8f7fc;
}
.system {
  background-color: #e6e8f1;
  border: 1px solid #006370;
  border-radius: 12px;
  padding: 25px;
  width: calc(33.333% - 40px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.system:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border: 2px solid #e07d19;
}
.system h3 {
  font-size: 2.2rem;font-weight: bold;
  margin-bottom: 20px;
  color: #006370;
}
.system p {
  font-size: 2.1rem;
  color: #020008;
  line-height: 1.8;
  margin-bottom: 20px;
}
.image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 16px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.image-container .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.image-container:hover .hover-image {
  opacity: 1;
}

/* Footer Styling */
.footer {
  background: #006370;
  color: #e5e5e5;
  padding: 20px 0;
  margin-top: 10px;
}
.footer h4 {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: right;
}
.footer p{font-size: 1.7rem; font-family:sans-serif}
.footer .quick-links{padding-right: 20px;}
.quick-links a {
  color: #e5e5e5;
  font-size: 1.8rem;text-decoration: none;
}
.footer .contact-info{padding-right: 20px;}
.quick-links a:hover {
  color: #e07d19;
}
.social-icons a {
  color: #e5e5e5;
  margin: 0 10px;
  font-size: 2rem;
  transition: color 0.3s;
}
.social-icons a:hover {
  color: #e07d19;align-items: center;
}
/* .footer .contact-info{float: left;} */
.footer .contact-info p{text-align:right; align-items: right;}

.footer-bottom {
  border-top: 1.5px solid #fff;
  background: #006370;
  margin: 0;padding-top:1rem;
  text-align: center;
}
.footer-bottom p{font-style:normal; font-size: 1.7rem;}
/* Responsive Design */

@media (max-width: 868px) {
  .footer h4 { font-size: 1.9rem;text-align: center;}
  .footer p { font-size: 1.5rem;  }
  .footer .social-icons,.contact-info,.quick-links{padding-top: 15px;text-align: center;}
  .footer .social-icons a {  font-size: 1.5rem;   }
  .footer .quick-links li a{font-size: 1.3rem;}
  .footer .contact-info p{text-align: center;}
}
@media (max-width: 678px) {
  .service,
  .system {
    flex: 1 1 100%;
    font-size: 1.5rem;
  }
}
/* Responsive Services section 480 max */
@media (max-width: 1000px) {
  .services-section
  .products-section
  {
    padding: 0 2rem;  /* Reduce padding for smaller screens */
  }
  .service, .system
   {
    width: calc(50% - 3.5rem); /* 2 items per row */
    padding: 1.5rem;
  }
  .service i, .system i {
    font-size: 2rem;
  }
  .service h3, .system h3 {
    font-size: 1.6rem;
  }
  .service p, .system p {
    font-size: 1.5rem;
  }
}
/* Media Queries for Responsiveness  Features*/
@media (max-width: 1100px) {
  .features-section {
    padding: 0 2rem; /* Reduce padding for smaller screens */
  }
  .quality {
    width: calc(50% - 2rem); /* 2 items per row */
    padding: 1.5rem;
  }
  .quality i {
    font-size: 2rem;
  }
  .quality h3 {
    font-size: 1.8rem;
  }
  .quality p {
    font-size: 1.8rem;
  }
}

@media (max-width: 678px) {
  .quality {
    width: 100%; /* 1 item per row */
    margin: 0.5rem 0; /* Reduce margin for smaller screens */
  }
  .quality i {
    font-size: 1.8rem;
  }
  .quality h3 {
    font-size: 2.1rem;
  }
  .quality p {
    font-size: 1.7rem;
  }
}


/*    aspect-ratio: 1/1;    */