@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Jost", sans-serif;
}

:root {
  --jost: "Jost", sans-serif;
  --Opensans: "Open Sans", sans-serif;
  --red-color: #ee3238;
  --white-color: #fff;
  --black-color: #000;
  --gray-color: #565656;
  --border-color: #fff5;
  --w-image: 500px;
  --calculate: calc(3 / 2);
}

html,
body {
  width: 100%;
  height: 100%;
}

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

#main {
  width: 100%;
  min-height: 100vh;
}

.container-fluid {
  width: 100% !important;
  margin: auto;
}

.containers {
  max-width: 1320px !important;
  padding: 0 25px;
  margin: auto;
}

.d-flex {
  display: flex;
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* Full page loader overlay */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  /* Change background color as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Ensure it sits above other content */
}

/* Loader styles */
.loader {
  width: 50px;
  aspect-ratio: 1.154;
  position: relative;
  background: conic-gradient(from 120deg at 50% 64%, #0000, #ff1919 1deg 120deg, #0000 121deg);
  animation: l27-0 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 50% 66%;
  animation: l27-1 1.5s infinite;
}

.loader:after {
  --s: -1;
}

@keyframes l27-0 {

  0%,
  30% {
    transform: rotate(0);
  }

  70% {
    transform: rotate(120deg);
  }

  70.01%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes l27-1 {
  0% {
    transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
  }

  30%,
  70% {
    transform: rotate(calc(var(--s, 1) * 120deg)) translate(calc(var(--s, 1) * -5px), 10px);
  }

  100% {
    transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
  }
}

nav {
  position: relative;
  top: 0;
  width: 100%;
  height: 100px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 6;
  background: var(--white-color);
}

nav .navbarss {
  height: 100%;
  max-width: 1500px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: auto;
}

.inner-navs {
  --bs-navbarss-padding-y: 0rem;
}

.inner-links {
  padding: 0px;
}

.inner-links .active {
  color: var(--red-color) !important;
}

.inner-links .active+.htmlcss-arrow {
  color: var(--red-color) !important;
}

.inner-links .active::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logoss img {
  width: 105px;
  height: 105px;
}

nav .navbarss .nav-linksss {
  height: 100%;
}

nav .navbarss .links {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.actives {
  color: #3e8da8 !important;
}

nav .navbarss .links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}

nav .navbarss .links li a {
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: var(--black-color);
  font-size: 15px;
  font-weight: 500;
}

.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow {
  transform: rotate(180deg);
}

nav .navbarss .links li .arrow {
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: var(--black-color);
  transition: all 0.3s ease;
}

nav .navbarss .links li .sub-menu {
  position: absolute;
  top: 55px;
  left: 0;
  line-height: 40px;
  background: var(--white-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}

nav .navbarss .links li:hover .htmlCss-sub-menu,
nav .navbarss .links li:hover .js-sub-menu {
  display: block;
}

.navbarss .links li .sub-menu li {
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbarss .links li .sub-menu a {
  color: var(--black-color);
  font-size: 15px;
  font-weight: 500;
}

.navbarss .links li .sub-menu .more-arrow {
  line-height: 40px;
}



.navbarss .links li .sub-menu .more-sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}

.links li .sub-menu .more:hover .more-sub-menu {
  display: block;
}

.navbarss .nav-linksss .sidebar-logo {
  display: none;
}

.navbarss .bx-menu {
  display: none;
}

@media (max-width: 920px) {
  nav .navbarss {
    max-width: 100%;
    padding: 0 25px;
  }

  nav .navbarss .logo a {
    font-size: 27px;
  }

  nav .navbarss .links li {
    padding: 0 10px;
    white-space: nowrap;
  }

  nav .navbarss .links li a {
    font-size: 15px;
  }
}

#section-data {
  padding-bottom: 60px;
}

.about-img {
  display: flex;
  justify-content: center;
}

.about-img img {
  width: 50%;
  height: 460px;
  border-radius: 20px;
}
.specification-img{
  display: flex;
  justify-content: center;
}
.specification-img img{
  width: 275px;
  height: 275px;
  border-radius: 50%;
}
.content {
  padding: 30px 0px 0px 0px;
}

.content p {
  font-size: 20px;
  font-family: var(--Opensans);
  font-weight: 400;
  color: var(--gray-color);
}

.part-1 {
  width: 100%;
  height: auto;
  background-color: #111;
  overflow: hidden;
}

.content-part-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}

.rotate-div {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 2vw;
  width: 200vw;
  height: 200vh;
  background-color: #000;
  scale: 1;
}

.row-div {
  display: flex;
  flex-direction: column;
  gap: 4vh;
  width: calc(200vw / 5);
  height: 100%;
}

.img-div {
  width: 100%;
  height: calc(100% / 4);
  border-radius: 10px;
  overflow: hidden;
}

.img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100vh;
  font-size: 5vw;
  color: #fff;
}

.overlay-div h1 {
  opacity: 1;
  font-weight: 500;
  font-size: 140px;
}

.overlay-div p {
  text-align: center;
  opacity: 1;
  font-weight: 500;
  font-size: 48px;
}

.rounded-div-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin-top: 0;
  display: none;
}

.rounded-div {
  position: absolute;
  left: 50%;
  width: 150%;
  height: 750%;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
  transform: translate(-50%);
  display: none;
}

.section-heading {
  position: relative;
  width: 100%;
  padding: 40px 0px 30px 0px;
  font-size: 60px;
  font-weight: 600;
  text-align: center;
  color: var(--black-color);
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

/* Certificates Section */
.certificates-section {
  padding: 60px 0;
  background-color: #fff;
  overflow: hidden;
}

.certificates-banner {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

.certificates-banner img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.testimonial-section {
  position: relative;
  height: auto;
  background-image: url(../images/products/product-9.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.testimonial-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.testimonial-heading {
  color: var(--white-color);
  z-index: 4 !important;
}

.testimonial-box {
  position: relative;
  width: 50%;
  height: auto;
  background-color: var(--white-color);
  text-align: center;
  border-radius: 10px;
  padding: 30px;
}

.pe-auto a{
  text-decoration: none;
  color: #000;
}


.testimonial-box h4 {
  padding: 30px 10px;
  font-size: 18px;
  color: #3f3f90;
  font-family: var(--Opensans);
}
.google-verified {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 80px;
  height: 80px;
}
.client-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--red-color);
}

.client-location {
  font-size: 16px;
  font-weight: 600;
  color: var(--red-color);
}

.swiper {
  overflow-y: visible;
  padding: 70px 0px;
}

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
}

/* .carousel {
  height: 100vh;
  width: 100%;
  overflow: hidden !important;
  position: relative;
}

.carousel .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}

.carousel .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 30%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}

.carousel .list .item .author {
  font-weight: bold;
  letter-spacing: 10px;
}

.carousel .list .item .title,
.carousel .list .item .topic {
  font-size: 5em;
  font-weight: bold;
  line-height: 1.3em;
}

.carousel .list .item .topic {
  color: var(--white-color);
}

.carousel .list .item .buttons {
  display: flex;
  justify-content: start;
  gap: 20px;
  cursor: pointer;
}

.sliderbtns {
  border: none !important;
}

.sliderbtns a {
  font-size: 16px;
  font-weight: 600;
}

.thumbnail {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: max-content;
  z-index: 100;
  display: flex;
  gap: 20px;
}

.thumbnail .item {
  width: 150px;
  height: 220px;
  flex-shrink: 0;
  object-fit: cover;
  position: relative;
}

.thumbnail .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 20px;
}

.thumbnail .item .content {
  color: #fff;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.thumbnail .item .content .title {
  font-weight: 500;
}

.thumbnail .item .content .description {
  font-weight: 300;
} */

.main-image {
  position: relative;
}

.scroller-animation {
  padding: 100px 0;
}

.prevs {
  height: 33px;
  width: 33px;
  border-radius: 50%;
  background-color: var(--white-color);
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.nexts {
  height: 33px;
  width: 33px;
  border-radius: 50%;
  background-color: var(--white-color);
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.arrows {
  position: absolute;
  top: 75%;
  left: 20%;
  z-index: 100;
  width: 300px;
  max-width: 30%;
  display: flex;
  gap: 10px;
  align-items: center;
}

.arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee4;
  border: none;
  color: #fff;
  font-family: monospace;
  font-weight: bold;
  transition: 0.5s;
  cursor: pointer;
}

.arrows button:hover {
  background-color: #fff;
  color: #000;
}

/* .carousel .list .item:nth-child(1) {
  z-index: 1;
}

.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons {
  transform: translateY(50px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent 0.5s 1s linear 1 forwards;
}

@keyframes showContent {
  to {
    transform: translateY(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

.carousel .list .item:nth-child(1) .content .title {
  animation-delay: 1.2s !important;
}

.carousel .list .item:nth-child(1) .content .topic {
  animation-delay: 1.4s !important;
}

.carousel .list .item:nth-child(1) .content .des {
  animation-delay: 1.6s !important;
}

.carousel .list .item:nth-child(1) .content .buttons {
  animation-delay: 1.8s !important;
}

.carousel.next .list .item:nth-child(1) img {
  width: 150px;
  height: 220px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  border-radius: 30px;
  animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
  to {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.carousel.next .thumbnail .item:nth-last-child(1) {
  overflow: hidden;
  animation: showThumbnail 0.5s linear 1 forwards;
}

.carousel.prev .list .item img {
  z-index: 100;
}

@keyframes showThumbnail {
  from {
    width: 0;
    opacity: 0;
  }
}

.carousel.next .thumbnail {
  animation: effectNext 0.5s linear 1 forwards;
}

@keyframes effectNext {
  from {
    transform: translateX(150px);
  }
}

.carousel .time {
  position: absolute;
  z-index: 1000;
  width: 0%;
  height: 3px;
  background-color: #f1683a;
  left: 0;
  top: 0;
}

.carousel.next .time,
.carousel.prev .time {
  animation: runningTime 3s linear 1 forwards;
}

@keyframes runningTime {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

.carousel.prev .list .item:nth-child(2) {
  z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img {
  animation: outFrame 0.5s linear 1 forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes outFrame {
  to {
    width: 150px;
    height: 220px;
    bottom: 50px;
    left: 50%;
    border-radius: 20px;
  }
}

.carousel.prev .thumbnail .item:nth-child(1) {
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail 0.5s linear 1 forwards;
}



.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons {
  animation: contentOut 1s linear 1 forwards !important;
}

@keyframes contentOut {
  to {
    transform: translateY(-150px);
    filter: blur(20px);
    opacity: 0;
  }
} */

/* index counter section  */

.index-counters {
  height: auto;
}


.gallery-section {
  width: 100%;
  background-color: #fdebeb6b;
  height: auto;
  padding: 0px 0px 20px 0px;
}

.gallerysec {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.imagesection {
  height: 350px;
  width: 350px;
  border-radius: 10px;
  overflow: hidden;
}

.imagesection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
}

.logos:after {
  right: 0;
}

.newsletter {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.newsletter h3 {
  font-size: 20px;
  font-weight: 400;
  color: #000000;
}

.emailsection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.emailinput {
  margin-top: 10px;
  background: none;
  border: none;
  border: 1px solid #e1e1e1;
  padding: 12px 24px !important;
  border-radius: 25px !important;
}

.footerr {
  padding-top: 100px;
}

.footerimage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  width: 180px;
}

.footerpara {
  width: 85%;
  font-family: var(--Opensans);
  color: var(--gray-color);
  font-weight: 600;
  font-size: 16px;
}

.socialmedia ul {
  padding-top: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.socialmedia ul li {
  width: 46px;
  height: 46px;
  border: 1px solid #777777;
  border-radius: 50%;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footerlist ul li {
  list-style: none;
  padding-top: 20px;
  font-family: var(--Opensans);
}

.footerlist ul li a {
  text-decoration: none;
  color: var(--gray-color);
  font-weight: 600;
  font-family: var(--Opensans);
}

.footerlist ul li a:hover {
  color: var(--red-color);
}

.bs-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bs-line ul {
  display: flex;
  list-style: none;
  gap: 10px;
}

.bs-line p,
.bs-line ul li a {
  color: var(--white-color);
  text-decoration: none;
}

.subscribes {
  margin-top: 20px;
  background: none;
  border: none;
  background-color: #e1e1e1;
  padding: 12px 28px;
  border-radius: 50px;
  font-family: var(--Opensans);
}

.footers-sections {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-line {
  margin-top: 50px;
  background-color: #131313;
  padding: 5px 0px;
}

.bottomcontent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}



.bottomlinks {
  list-style: none;
  display: flex;
  gap: 15px;
}

.bottomlinks li a {
  text-decoration: none;
  color: var(--white-color);
  font-family: var(--Opensans);
}

.contact-submit {
  color: #000;
}

.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--red-color);
  background: var(--red-color);
  color: var(--red-color);
  margin-top: 30px;
  overflow: hidden;
  transition: color 0.4s, background-color 0.4s;
}

.cssbuttons-io a,
.cssbuttons-io span {
  text-decoration: none;
  position: relative;
  z-index: 5;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  color: var(--red-color);
}


.cssbuttons-io:hover a,
.cssbuttons-io:hover span {
  color: var(--white-color);
}



.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #fff;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.2s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}


.contact-submit {
  position: relative;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--red-color);
  background: var(--red-color);
  color: #fff !important;
  margin-top: 30px;
  overflow: hidden;
  transition: color 0.4s, background-color 0.4s;
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



.wrapp {
  position: relative;
  width: 100%;
  height: auto;
  /* padding: 0 20px; */
  z-index: 1;
}

.content {
  width: 100%;
  height: auto;
}

.spacer {
  width: 100%;
  height: 100%;
  background-color: #ddd;
}

.work {
  display: flex;
}

.work_left {
  position: relative;
  width: 54%;
  z-index: 2;
}

.work_text {
  margin: auto;
  width: 80%;
}

.work_info {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
}

.title {
  text-align: left;
  font-size: 32px;
  font-family: var(--jost);
  color: var(--pr-color);
}

.work_left-bl p {
  font-size: 16px;
  font-family: var(--Opensans);
  padding: 20px 0 0 0 ;
}

.title .stroke {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px var(--pr-color);
}

.work_link {
  display: block;
  width: 50%;
  margin-top: 50px;
  padding: 8px 0;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pr-color);
  letter-spacing: 4px;
  border: 2px solid;
}

.work_link:hover {
  background: var(--color-1-1);
  color: var(--color-1-2);
  letter-spacing: 6px;
}

.work_right {
  height: auto;
  width: 46%;
}

.work_right-bl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: sticky;
  width: 100%;
  height: 100vh;
  top: 0;
}

.work_photo {
  width: 80%;
  height: 35vw;
  position: relative;
}

.work_photo-item {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 40px;
  overflow: hidden;
}

.work_photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pagesection h1 {
  padding: 40px 0 30px 0;
  font-size: 60px;
  font-weight: 600;
  font-family: var(--jost);
}

#pagesection p {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--jost);
  color: var(--gray-color);
}

.tabgroup {
  display: flex;
  justify-content: center;
  align-items: center;
}


.image-section {
  background-color: #131313;
}

.gallery-card {
  margin-top: 10px;
  border-radius: 10px;
  filter: grayscale(1);
  transition: ease-in all 0.2s;
}

.gallery-card:hover {
  filter: grayscale(0);
  z-index: 500000;
  cursor: pointer;
}

.gallery-card img {
  height: 100%;
  object-fit: cover;
}


/* Modal Styles */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black with opacity */
  align-items: center;
  /* Vertically center */
  justify-content: center;
  /* Horizontally center */
}

/* Modal Image Styles */
.modal-content {
  max-width: 50%;
  /* Responsive width */
  max-height: 80%;
  /* Responsive height */
  border-radius: 15px;
  /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  /* Optional: Add shadow for better appearance */
}

/* Close Button Styles */
.close {
  position: absolute !important;
  top: 254px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  left: 82rem;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
  .close {
    font-size: 30px;
    /* Smaller close button */
    top: 10px;
    right: 20px;
  }

  .modal-content {
    max-width: 95%;
    /* Increase width for smaller screens */
    max-height: 70%;
    /* Increase height for smaller screens */
  }
}

@media (max-width: 480px) {
  .close {
    font-size: 24px;
    /* Even smaller close button */
    top: 5px;
    right: 10px;
  }

  .modal-content {
    max-width: 100%;
    /* Full width */
    max-height: 60%;
    /* Adjust height for very small screens */
  }
}

.contactcard {
  position: relative;
  height: auto;
  border-radius: 20px;
  background-image: url(../images/about/about-counter.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 37px 20px 20px 30px;
  z-index: 1;
  border-radius: 20px;
}

.contactcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Black overlay with 0.7 opacity */
  z-index: 2;
  border-radius: 20px;
}

.contactcard * {
  position: relative;
  z-index: 3;
  /* Ensures content is above the overlay */
}

.outer-contact {
  background-color: var(--white-color);
  padding: 24px;
}

.ss {
  padding-bottom: 60px !important;
}

.cardheading {
  font-size: 32px;
  font-weight: 600;
  font-family: var(--jost);
  color: var(--white-color);
}

.cardpara {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--Opensans);
  color: var(--white-color);
  padding: 0px 0px 8px 0px;
}

.contact-details {
  padding-top: 30px;
}

.contact-details ul li {
  padding-bottom: 50px;
}

.contact-details ul li a {
  text-decoration: none;
  padding-left: 10px;
  font-size: 18px;
  font-weight: 400;
  color: var(--white-color);
}

.socials-card ul {
  padding: 0;
  display: flex;
  gap: 13px;
}

.socials-card ul li {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socials-card ul li:hover {
  background-color: var(--red-color);
  color: #fff;
  cursor: pointer;
}

.socials-card ul li a {
  text-decoration: none;
  color: var(--black-color);
}

.socials-card ul li:hover a {
  color: #fff !important;

}

.contactform {
  padding: 20px 40px;
}

.form-label {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--Opensans);
  color: var(--gray-color);
}

.form-control {
  border: none;
  border-bottom: 1px solid var(--gray-color);
  border-radius: 0px;
}

.map-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: auto;
}

#inputmsg {
  resize: none;
}

.form-control:focus {
  box-shadow: none;
  border: 1px solid var(--red-color);
}

.form-check-label {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--Opensans);
  color: var(--black-color);
  padding-left: 10px;
}

.form-check-input {
  margin-left: 10px;
  background-color: #e0e0e0;
  border-radius: 50% !important;
}

.form-check-input:checked {
  background-color: var(--red-color) !important;
  border-color: var(--red-color);
}

.coutersection {
  position: relative;
  margin-top: 60px;
  height: auto;
  background-image: url(../images/about/about-counter.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.coutersection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Black overlay with 0.7 opacity */
  z-index: 2;
}

.coutersection * {
  position: relative;
  z-index: 3;
  /* Ensures content is above the overlay */
}


.counter-heading-section {
  padding: 60px 0px 40px 0px;
  text-align: center;
  color: var(--white-color);
}

.counter-heading-section h1 {
  font-size: 60px;
  font-weight: 600;
  font-family: var(--jost);
}

.counter-heading-section p {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--Opensans);
}

.counterbox {
  width: 395px;
  border-radius: 10px;
  padding: 60px 40px;
  border: 3px solid var(--white-color);
  display: flex;
  gap: 23px;
}

.bottom-space {
  padding-bottom: 60px;
}

.iconss {
  width: 80px;
  height: 80px;
}

.counter-count {
  font-family: var(--jost);
  font-size: 40px;
  font-weight: 600;
  color: var(--white-color);
}

.counter-details {
  font-family: var(--Opensans);
  font-size: 24px;
  font-weight: 600;
  color: var(--white-color);
  margin: 0;
}

.mapsection {
  margin-top: 60px;
}

.mapsection h3 {
  font-size: 60px;
  font-weight: 600;
  font-family: var(--jost);
  color: var(--black-color);
}

.mapsection p {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--Opensans);
  color: var(--gray-color);
  margin-bottom: 64px;
}

.map-area {
  position: relative;
}

.map-points {
  position: absolute;
  top: 0;
  left: 0;
}

.city {
  fill: var(--red-color);
  cursor: pointer;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes wave {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}


.product-box {
  margin: 20px 0;
  height: 100%;
  /* min-height: 300px;
  max-height: 800px; */
}

.product-box h1 {
  padding-top: 48px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--jost);
}

.product-box p {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-color);
  font-family: var(--Opensans);
  margin: 0;
}

.product-box button {
  position: relative;
  margin-top: 12px !important;
  font-weight: 700;
  font-size: 14px;
}

.card-imgs {
  width: 100%;
  height: 280px;
  border-radius: 5px;
  overflow: hidden;
  object-fit: contain;
}



.que-section {
  width: 100%;
  padding: 24px 30px;
  border-radius: 10px;
  background-color: #f7f7f7;
}

.faqheading {
  font-family: var(--jost);
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 30px;
}

.que-section p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #626571;
  font-family: var(--Opensans);
}

.accordion-button h3 {
  font-size: 16px;
  font-family: var(--Opensans);
  font-weight: 600;
  color: var(--black-color);
}

.accordion-button:focus {
  box-shadow: 1px solid var(--red-color) !important;
}

.accordion-header .accordion-button {
  border: 1px solid #d7d7d7;
  border-radius: 6px;
}

.accordion-header {
  padding-bottom: 8px;
}

.accordion {
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-active-bg: #fff;
  --bs-accordion-active-color: #000;
  --bs-accordion-color: #000;
  --bs-accordion-border-color: none;
}

.accordion-button {
  font-size: 16px;
  font-family: var(--jost);
  font-weight: 600;
}

.accordion-body p {
  font-size: 16px;
  font-family: var(--Opensans);
  font-weight: 400;
  color: var(--gray-color);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.5s;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}


#descriptionssection {
  padding-bottom: 45px;
}

.side-images {
  width: 65px;
  height: 65px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}

.side-images img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.review span {
  font-family: var(--Opensans);
  font-size: 14px;
  font-weight: 400;
  padding-left: 8px;
}

.description-heading {
  font-family: var(--jost);
  font-size: 32px;
  font-weight: 500;
}

.description-para {
  padding-top: 16px;
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-color);
}

.description-btn {
  margin-top: 12px !important;
}

.tab-containers {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-top: 20px;
  white-space: nowrap;
}

.tab-containers a {
  text-decoration: none;
}

.tab-items {
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 5px;
  font-family: var(--jost);
  color: var(--gray-color);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.tab-items.active {
  color: var(--white-color);
  background-color: var(--red-color);
}

.tab-content-list {
  display: none;
}

.tab-content-list.active {
  display: block;
  padding: 20px 0px;
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-color);
  transition: 1s all ease-in;
}

.sms {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/gallery/factory-30.webp') !important;
  background-position: center;
  background-size: cover;
}
.sms-banner{
  padding: 60px 0;
}

.sms h1 {
  font-size: 60px;
  font-weight: 600;
}

.para-sms p {
  font-family: var(--Opensans);
  font-size: 18px;
  font-weight: 400;
  line-height: 22.68px;
}

.sms-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sms-img img {
  width: 443px;
  height: 371px;
  top: 138px;
  left: 877px;
  gap: 0px;
  opacity: 0px;
  float: inline-end;
}

.gbo h1 {
  font-family: var(--jost);
  font-size: 32px;
  font-weight: 500;
  line-height: 40.32px;
  text-align: left;
}

.para-gbo p {
  font-family: var(--Opensans);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.68px;
  text-align: left;
  color: #565656;
}

.Supplier-img img {
  width: 60px;
  height: 48px;
  left: 730px;
  gap: 0px;
  opacity: 0px;
}

.supply-chain-details {
  width: auto;
  top: 781px;
  left: 730px;
  gap: 0px;
  opacity: 0px;
  font-family: var(--jost);
  font-size: 18px;
  font-weight: 400;
  line-height: 22.68px;
  text-align: left;
  color: var(--gray-color);
}

.supply-chain-details p {
  font-family: var(--Opensans);
  font-size: 16px;
}

.supply-list {
  list-style: none;
  padding: 0;
}

.supply-list span {
  font-family: var(--Opensans);
}

.supply-list li {
  padding-bottom: 20px;
  color: var(--gray-color);
  font-family: var(--Opensans);
  font-size: 16px;
}

/* Ensure the navbar has a higher z-index */
.sticky-top {
  z-index: 10;
  /* Make sure it's higher than the sticky content */
}

/* Adjust the sticky content */
.sticky-content {
  position: sticky;
  top: 60px;
  /* Default space from top (adjust this based on your navbar height) */
  z-index: 1;
  transition: top 0.3s ease;
  /* Smooth transition */
}

.services {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fbfbfb;
}

.services-con h1 {
  font-family: jost;
  font-size: 60px;
  font-weight: 500;
  line-height: 75.6px;
}

.services-con p {
  font-family: jost;
  font-size: 18px;
  font-weight: 400;
  line-height: 22.68px;
  text-align: center;
  color: #969eb2;
}

.crd-ser {
  padding-top: 100px;
  opacity: 1;
  transition: opacity 3s;
  padding-bottom: 100px;
}

.crd-ser:hover {
  opacity: 1;
  background-image: url(../images/services/s-1.png);
  background-size: cover;
  padding-bottom: 100px;
  color: #fff;
  border: none;
}

.crd-ser:hover p {
  color: #ffff;
}

.crd-ser-2 {
  padding-top: 100px;
  opacity: 1;
  transition: opacity 3s;
  padding-bottom: 100px;
}

.crd-ser-2:hover {
  opacity: 1;
  background-image: url(../images/services/services-2.jpg);
  background-size: cover;
  padding-bottom: 100px;
  color: #fff;
  border: none;
}

.crd-ser-2:hover p {
  color: #fff;
}

.crd-ser-3 {
  padding-top: 100px;
  opacity: 1;
  transition: opacity 3s;
  padding-bottom: 100px;
}

.crd-ser-3:hover {
  opacity: 1;
  background-image: url(../images/services/services-3.jpg);
  background-size: cover;
  padding-bottom: 100px;
  color: #fff;
  border: none;
}

.crd-ser-3:hover p {
  color: #fff;
}

.crd-ser-4 {
  padding: 100px 0;
  opacity: 1;
  transition: opacity 3s;
}

.crd-ser-4:hover {
  opacity: 1;
  background-image: url(../images/services/services-4.jpg);
  background-size: cover;
  padding-bottom: 100px;
  color: #fff;
  border: none;
}

.crd-ser-4:hover p {
  color: #fff;
}

.number {
  width: 50px;
  height: 40px;
  margin-bottom: 20px;
}

.serv-head {
  padding: 0px 12px;
}

.serv-head p {
  width: 100%;
  font-family: var(--Opensans);
  font-size: 18px;
  font-weight: 400;
  line-height: 22.68px;
  height: 207px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--gray-color);
}

.serv-head h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 40.32px;
  height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.serv-img {
  height: 100%;
  display: flex;
  align-items: center;
}

.serv-img img {
  width: 100%;
  border-radius: 10px;

}

.s-3 {
  background-color: #fbfbfb;
}
   
.service-details {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.68px;
  font-family: var(--Opensans);
  color: #969eb2;
}

.service-details li {
  font-family: var(--Opensans);
  font-size: 16px;
  padding-bottom: 20px;
}

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fbfbfb;
}
.abo-head p {
  font-family: var(--Opensans);
  font-size: 18px;
  font-weight: 500;
  text-align: justify;
  color: #fff;
}

.abo-sec {
  position: relative;
  /* Set the position to relative to position the overlay */
  /* margin-top: 60px; */
  background-image: url(../images/about/About-back.png);
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
}

.abo-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Black overlay with 40% opacity */
  z-index: 1;
  /* Ensures overlay is on top of the background image */
}

.abo-sec .container {
  position: relative;
  /* Ensure content is above the overlay */
  z-index: 2;
  /* Content appears above the overlay */
}
.company-desk-image img{
  width: 450px;
  height: 450px;
  border-radius: 50%;
  -webkit-box-shadow: 2px 10px 16px -4px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 10px 16px -4px rgba(0,0,0,0.2);
  box-shadow: 2px 10px 16px -4px rgba(0,0,0,0.2);
}
.abo-img img {
  border-radius: 10px;
}
.abo-head span {
  font-family: var(--jost);
  font-size: 32px;
  font-weight: 700;
  color: var(--white-color);
}
.abo-head h3 {
  font-family: jost;
  font-size: 32px;
  font-weight: 500;
  line-height: 40.32px;
  color: #fff;
}

.company-head p {
  font-family: var(--Opensans);
  font-size: 18px;
  font-weight: 500;
  color: var(--black-color);
}
.company-head span {
  font-family: var(--jost);
  font-size: 32px;
  font-weight: 700;
  color: var(--red-color);
}
.Discover-btn a {
  text-decoration: none;
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  color: var(--red-color);
  background-color: #000;
}

.Discover-btn {
  position: relative;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--red-color);
  background: var(--red-color);
  color: var(--red-color);
  margin-top: 30px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: color 0.4s, background-color 0.4s;
}

.Discover-btn a:hover {
  background-color: var(--red-color);
  color: #fff;
}

.his-head {
  height: 100%;
  display: flex;
  align-items: center;
}

.his-head h2 {
  font-size: 32px;
  font-weight: 500;
}

.his-p p {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--Opensans);
  line-height: 24.55px;
  color: var(--gray-color);
}

.History {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* .mission-section {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background-image: url(../images/about/mission.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
} */

.mission-section {
  position: relative;
  margin-top: 60px;
  height: auto;
  background-image: url(../images/about/mission-back.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px;
  z-index: 1;
}

.mission-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black overlay with 0.7 opacity */
  z-index: 2;
}

.mission-section * {
  position: relative;
  z-index: 3;
  /* Ensures content is above the overlay */
}

.mission-card {
  position: relative;
  left: 20px;
  background-color: var(--white-color);
  padding: 24px 16px;
  border-radius: 5px;
  height: auto;
}

.vision-card {
  position: relative;
  right: 25px;
  background-color: var(--white-color);
  padding: 24px 16px;
  border-radius: 5px;
  height: auto;
}

.middle-img {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.mission-card h3,
.vision-card h3 {
  font-size: 32px;
  font-weight: 500;
  font-family: var(--jost);
}

.mission-card p,
.vision-card p {
  font-size: 16px;
  font-weight: 400;
  line-height: 21.82px;
  font-family: var(--Opensans);
  color: var(--gray-color);
}

.vision-list {
  list-style: none;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.82px;
  font-family: var(--Opensans);
  color: var(--gray-color);
}

.vision-list li {
  margin-bottom: 20px;
  font-family: var(--Opensans);
  color: var(--gray-color);
}
.ach-head{
  padding: 40px 0 30px 0  !important;
}
.ach-head h2 {
  font-size: 60px;
  font-weight: 600;
  color: #131313;
}

.ach-head p {
  padding-top: 12px;
  font-size: 18px;
  font-weight: 400;
  color: #969eb2;
}

.header-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-btn {
  margin-top: 0px !important;
}

.header-btn a {
  padding: 7px 10px;
}

.header-btn a i {
  padding-right: 10px;
}

/* Container for scrolling with arrows */
.tabgroup {
  position: relative;
  display: flex;
  align-items: center;
}

/* Arrows styling */
.scroll-button {
  background: var(--red-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  /* Ensure arrows are on top */
}

.scroll-button:hover {
  background: #2980b9;
}

/* Positioning of left and right arrows */
.scroll-button.left {
  position: absolute;
  left: 0;
}

.scroll-button.right {
  position: absolute;
  right: 0;
}

/* Container for horizontal scrolling */
.tab-containers {
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 40px;
  --scrollbar-height: 5px;

}

.tab-containers::-webkit-scrollbar {
  height: var(--scrollbar-height);
}

.tab-containers::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Background of the scrollbar track */
}

.tab-containers::-webkit-scrollbar-thumb {
  background-color: var(--red-color);
  border-radius: 10px;
  border: 1px solid #fff;
}

/* Hover effect */
.tab-containers::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* Darker color when hovering over the scrollbar */
}


/* Wrapper to ensure tabs are in a single line */
.tabs-wrapper {
  display: flex;
  align-items: center;
}

/* Active tab styling */
.tab-items.active {
  background-color: var(--red-color);
  color: #fff;
}

/* Hover effect for tabs */
.des p {
  color: red;
}

.slider-des p {
  color: #fff !important;
}

.achievement-title {
  color: var(--red-color);
  font-weight: 600;
}

.card-height {
  height: auto;
  min-height: 210px;
  max-height: 210px;
  overflow-y: auto;
  padding: 1rem;
  position: relative;
}

.card-height p {
  font-family: var(--Opensans);
  font-size: 18px;
  line-height: 24.55px;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-height:hover {
  border: 1px solid red;
  border-radius: 5px;
}

/* home page continue client logo slider  */
.scroll {
  position: relative;
  display: flex;
  width: 80%;
  margin: auto;
  overflow: hidden;

}

.scroll div {
  white-space: nowrap;
  animation: scroll var(--time) linear infinite;
  animation-delay: calc(var(--time)*-1);

}

.scroll div:nth-child(2) {
  animation: scroll2 var(--time) linear infinite;
  animation-delay: calc(var(--time)/-2);
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}

.scroll div span {
  display: inline-flex;
  margin: 10px;
  letter-spacing: 0.2em;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.5s;
}

.scroll div span:hover {
  background: #3fd2f9;
  cursor: pointer;
}

.imgBox div {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  animation: scroll infinite linear var(--time);
}

.imgBox img {
  max-width: 250px;
  scale: 0.8;
  border-radius: 10px;
}

button[disabled] {
  background-color: #ddd;
  cursor: not-allowed;
}

.overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black color with 0.5 opacity */
  pointer-events: none;
  /* Allow clicks to pass through the overlay */
}

/* Modal Styles */
.custom-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black with opacity */

  align-items: center;
  /* Vertically center */
  justify-content: center;
  /* Horizontally center */
}

/* Modal Content Styles */
.custom-modal-content {
  background-color: #fff;
  /* White background */
  border-radius: 10px;
  /* Rounded corners */
  padding: 20px;
  /* Space around content */
  max-width: 50%;
  /* Maximum width */
  max-height: 80%;
  /* Maximum height */
  display: flex;
  /* Flexbox layout */
  flex-direction: column;
  /* Vertical layout */
  gap: 20px;
  /* Space between items */
}

/* Modal Image Styles */
.modal-image {
  width: 100%;
  /* Full width of the modal content */
  border-radius: 10px;
  /* Rounded corners for the image */
}

/* Modal Text Styles */
.modal-text {
  display: flex;
  /* Flexbox layout for text */
  flex-direction: column;
  /* Vertical layout */
}

/* .close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
} */

.close:hover,
.close:focus {
  color: #bbb;
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
  .custom-modal-content {
    max-width: 95%;
    /* Full width on smaller screens */
    flex-direction: column;
    /* Stack image and text vertically */
  }
}

.modal-image-container img {
  height: 100%;
  width: 100%;
  margin-top: 50px;
}

#show-images {
  display: flex;
  justify-content: end;
}


.popup {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 1000px;
}

.sss {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Close Button */
.close-2 {
  color: #131313;
  float: right;
  font-size: 28px;
  font-weight: 300;
  display: flex;
  justify-content: end;
}

.close-2:hover,
.close-2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



/* Video Loader Styles */
.video-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

#loader-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10000;
}
.content-product-specification{
  height: 100%;
  display: flex;
  align-items: center;
}
.content-welcome-para p , .content-product-specification p {
  font-size: 18px;
  font-family: var(--Opensans);
  font-weight: 400;
  color: var(--gray-color);
}
.content-product-specification{
  width: 70%;
}
.content-product-specification-even{
  display: flex;
  justify-content: end;
}
.specification-even{
  display: flex;
  justify-content: end;
}
.product-tab {
  padding: 10px 0px !important;
}



.product-tab {
  padding: 10px 0px !important;
}


.product-tab {
  padding: 10px 0px !important;
  overflow: visible;
}


/* slider css  */


/* Lightbox Modal (background) */
.lightbox {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: hidden;
  /* Hide scrollbars */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/ opacity */
}

/* Lightbox Content */
.lightbox-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 80%;
  max-width: 90vw;
  /* Adjust width to fit viewport */
  max-height: 80vh;
  /* Ensure the image does not exceed viewport height */
}

/* Image in Lightbox */
#lightboxImage {
  width: 100%;
  height: auto;
  max-height: 80vh;
  /* Ensure image scales well */
}

/* Next & Previous buttons */
/* .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.6s ease;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.5); 
}

.prev {
  left: 0;
}

.next {
  right: 0;
}


.close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: white;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
} */

/* home page slider  */
.carousel {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.carousel .list {
  height: 100%;
  position: relative;
}

.carousel .list::before {
  position: absolute;
  width: 500px;
  height: 100%;
  content: '';
  top: 0;
  left: calc(100% - calc(500px * calc(3 / 2)));
  z-index: 10;
  pointer-events: none;
}

.carousel .list .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel .list .item .image {
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% - calc(500px * calc(3 / 2)));
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  font-weight: 500;
}

.carousel .list .item .image img {
  width: 90%;
  margin-bottom: 20px;
}

/* .carousel .list .item .main-content {
  height: 100%;
  display: grid;
  grid-template-columns: calc(100% - calc(500px * calc(3 / 2)));
}

.carousel .list .item .main-content .content {
  padding: 22% 12%;
} */

.content .description {
  font-family: var(--Opensans);
  font-size: 18px;
  font-weight: 500 !important;
  margin-bottom: 20px;
  color: var(--gray-color);
}

/* .carousel .list .item .main-content .content h2 {
  font-size: 60px;
  font-family: var(--jost);
}

.carousel .list .item .main-content .content h4 {
  font-size: 40px;
  font-family: var(--jost);
  font-weight: 400;
} */

.content button a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
}

#slider-buttons {
  position: absolute;
  top: 60%;
  left: 6%;
  display: grid;
  grid-template-columns: repeat(2, 60px);
}

#slider-buttons button {

  border: 1px solid var(--red-color);
  color: var(--red-color) !important;
  cursor: pointer;
  transition: 0.2s;
  border-radius: 5px !important;
}

#slider-buttons button:hover {
  background-color: var(--red-color);
  color: var(--white-color) !important;
}

.carousel .list .item {
  display: none;
}

.carousel .list .item.active,
.carousel .list .item.other_1,
.carousel .list .item.other_2 {
  display: block;
}

.carousel .list .item.active {
  z-index: 2;
}

.carousel .list .item.other_1,
.carousel .list .item.other_2 {
  pointer-events: none;
}

/* .carousel .list .item.active .main-content {
  animation: showContent 1s ease-in-out 1 forwards;
} */

@keyframes showContent {
  from {
    clip-path: circle(0% at 70% 50%);
  }

  to {
    clip-path: circle(100% at 70% 50%);
  }
}

.next .item.other_1 {
  z-index: 1;
}

.next .item .image img,
.next .item .image figcaption {
  animation: effectNext .5s ease-in-out 1 forwards;
}

.next .item.active .image {
  --transform-from: 500px;
}

@keyframes effectNext {
  from {
    transform: translateX(calc(var(--transform-from)));
  }

  to {
    transform: translateX(calc(var(--transform-from) - 500px));
  }
}

.next .item.other_1 .image {
  z-index: 3;
  --transform-from: 0px;
  overflow: hidden;
}

.next .item.other_2 .image {
  z-index: 3;
  --transform-from: calc(500px * 2);
}

.arrows {
  z-index: 10;
}

/* prev */
.prev .list .item .image img,
.prev .list .item .image figcaption {
  animation: effectPrev 0.5s ease-in-out 1 forwards;
}

@keyframes effectPrev {
  from {
    transform: translateX(calc(var(--transform-from)));
  }

  to {
    transform: translateX(calc(var(--transform-from) + 500px));
  }
}

.prev .list .item.active .image {
  --transform-from: calc(500px * -1);
  overflow: hidden;
}

.prev .list .item.other_1 .image {
  --transform-from: 0px;
  z-index: 3;
}

.prev .list .item.other_2 .image {
  z-index: 3;
  --transform-from: 500px;
}

.prev .list .item.other_2 .main-content {
  opacity: 0;
}

@media screen and (max-width: 1023px) {
  :root {
    --calculate: 1;
    --w-image: 400px;
  }

  .carousel .list .item .main-content .content h2 {
    font-size: 3em;
  }
}

@media screen and (max-width: 767px) {
  .carousel .list .item .image {
    width: 100%;
    left: 0;
    justify-content: center;
  }

  .carousel .list .item .image figcaption {
    color: #fff;
    width: 100%;
    text-align: center;
  }

  /* .carousel .list .item .main-content .content {
    display: none;
  } */

  .arrows {
    left: 50%;
    justify-content: center;
  }
}

#country {
  background-color: var(--red-color);

}

#country h5 {
  font-size: 20px;
  font-weight: 600;
  color: var(--white-color)
}

.location {
  width: 24px;
  height: 24px;
  filter: invert(100%);
}

.google-map {
  border-top: 1px solid var(--red-color);
  padding: 5px;
}

.google-map p a {
  color: var(--red-color);
  text-decoration: none;
  font-weight: 600;
}

.fancybox-slide--current .slick-slide img {
  max-width: 100%;
  height: auto;
}

/* Hide default Fancybox controls */
.fancybox-button--zoom,
.fancybox-button--fullScreen,
.fancybox-button--thumbs {
  display: none;
}

/* Adjust Fancybox caption and other styles if needed */
.fancybox-caption {
  font-size: 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
}


.fancybox-image,
.fancybox-spaceball {
  background: transparent;
  border: 0;
  height: 70% !important;
  left: 175px !important;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  position: absolute;
  top: 70px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 70% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Hide Fancybox buttons */
.fancybox-button--zoom,
.fancybox-button--slideShow,
.fancybox-button--thumbs {
  display: none;
}

/* Ensure Slick Slider images fit */
.slick-slide img {
  max-width: 100%;
  height: auto;
}

/* Adjust Fancybox caption */
.fancybox-caption {
  font-size: 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
}

.fancybox-slide--current img {
  width: 100%;
  height: auto;
}

.slick-slider {
  width: 100%;
}

.product-pagination {
  box-shadow: none !important;
}


.product-pagination .active>.page-link,
.page-link.active {
  background-color: var(--red-color) !important;
  border: 1px solid var(--red-color) !important;
  color: var(--white-color);
}

.product-pagination .page-link {
  color: var(--red-color);
}

.active>.page-link,
.page-link.active {
  background-color: var(--red-color) !important;
  border: 1px solid var(--red-color) !important;
  color: var(--white-color) !important;
}

.page-link {
  color: var(--red-color) !important;
}

#paginations {
  box-shadow: none;
}



#product-details {
  min-height: 20vh !important;
}

.globe {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  border-radius: 200px;
  filter: drop-shadow(12px 16px 9px #c9c9c9);
  /* transform: rotate(23.4deg); */
}

.globe:before {
  content: "";
  position: relative;
  z-index: 1;
  border-radius: 50%;
  box-shadow: inset 50px 0 100px 0 #000,
    inset 0 0 400px 0 #000;
}

.beacon {
  position: absolute;
  z-index: 2;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-color);
  color: var(--black-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: 1s;
}

.beacon:before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -17px;
  left: -17px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--red-color);
  box-shadow: 0 0 4px 0 var(--red-color);
  animation: signal 2s infinite ease-out;
}

.beacon:after {
  content: attr(data-location);
  ;
  position: absolute;
  z-index: 4;
  top: 9px;
  left: -44px;
  width: 20px;
  height: 20px;
  text-indent: 25px;
  line-height: 20px;
}


@keyframes signal {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

[data-location=Mauritius] {
  top: 250px;
  right: 270px;
}

[data-location=Africa] {
  top: 220px;
  right: 350px;
}

[data-location=Europe] {
  top: 80px;
  right: 350px;
}

[data-location=India] {
  top: 140px;
  right: 230px;
}

[data-location=Malaysia] {
  top: 210px;
  left: 625px;
}

.surface {
  position: relative;
  width: 800px;
  height: 400px;
  margin-left: -400px;
  line-height: 0;
  background: url("../images/contact/map.jpg") no-repeat center center;
  background-size: cover;
  animation: axis 30s infinite linear;
}

@keyframes axis {
  0% {
    margin-left: -400px;
  }

  50% {
    margin-left: 0px;
  }

  100% {
    margin-left: -400px;
  }
}

.country-name {
  background-color: var(--white-color) !important;
  text-align: center;
  color: var(--red-color);
}

.maplocation {
  font-size: 14px !important;
  margin: 0;
  padding: 0;
  text-align: center;
}

.maplocation a {
  text-decoration: none;
  color: var(--gray-color);
  font-weight: 600;
}

.footerlist ul li a {
  padding-left: 9px;
}

.footer-logos {
  width: 25px;
  height: 25px;
}

.all-counter {
  /* margin: 10px 0 60px 0; */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center !important;
  text-align: center;
  padding-bottom: 60px;
}

.counter-wrap {
  flex: 1;
  min-width: 0;
  padding: 40px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.counter-wrap:hover {
  box-shadow: 0 4px 16px rgba(238, 50, 56, 0.15);
  transform: translateY(-2px);
}

.index-counters {
  background-color: #fdebeb;
  padding: 60px 0;
}

.all-counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.counter-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}

.counter-section h3 {
  font-size: 48px;
  font-weight: 700;
  color: #ee3238;
  margin: 0;
}

.counter-section p {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #000;
  margin: 0;
}

.home-counter-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.counter {
  font-size: 28px;
  font-weight: bold;
  color: #ee3238;
}

.content-scroll {
  max-height: 400px;
  /* Adjust the height as needed */
  overflow-y: auto;
  padding-right: 15px;
  /* Optional: Adjust for a better look with scroll */
}

.home-counter-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(100%) saturate(5000%) hue-rotate(340deg) brightness(95%) contrast(92%);
  width: 60px;
  height: 60px;
}

.dropdown-toggle-split {
  border: none;
}

.product-tab {
  overflow-x: scroll;
}

#third-layer {
  position: absolute !important;
  top: 40px !important;
  right: 0px !important;
  transform: translate3d(0, 0, 0) !important;
  height: 200px;
  overflow-y: scroll;
}

#third-layer a {
  padding: 10px;
  font-size: 18px;
}

#third-layer a:hover {
  background-color: var(--red-color);
  color: var(--white-color);
}

/* carrer section  */

.career-work {
  margin-bottom: 60px;
}

.carrer-section h2 {
  margin-top: 60px;
  font-size: 32px;
}

.career-card {
  text-align: center;
}

.career-card img {
  margin-top: 60px;
}

.career-card h3 {
  margin: 24px 0 16px 0;
}

.career-post-header {
  border: none !important;
}

.Career-position {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}

.career-details {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 20px;
}

.career-details li img {
  padding-right: 5px;
}

.career-details li {
  font-family: var(--Opensans);
  color: #14141470;
  font-size: 16px;
 
}

.side-section {
  height: 300px;
  overflow-y: auto !important;
  /* Show scrollbar only when content exceeds the height */
  scrollbar-width: thin;
  scrollbar-color: var(--red-color) #f1f1f1;
}

.side-section::-webkit-scrollbar {
  width: 3px;
  /* Adjust the width as needed */
}

.side-section::-webkit-scrollbar-track {
  background: var(--red-color);
  /* Background of the scrollbar track */
}

.side-section::-webkit-scrollbar-thumb {
  background-color: var(--red-color);
  /* Scrollbar color */
  border-radius: 10px;
  /* Roundness of the scrollbar thumb */
  border: 2px solid #f1f1f1;
  /* Optional: space around thumb */
}

/* Optional: Hover effect on scrollbar */
.side-section::-webkit-scrollbar-thumb:hover {
  background-color: #007bbf;
  /* Darker shade on hover */
}

/* .pro-details{
  height: 500px;
  width: 500px;
  border-radius: 10px !important;
  overflow: hidden;
  object-fit: cover;
} */
.Career-position h2 {
  color: #ee3238 !important;
}

.career-icons {
  width: 60px;
  height: 60px;
}

.career-icons {
  filter: brightness(0) saturate(100%) invert(24%) sepia(86%) saturate(7481%) hue-rotate(344deg) brightness(97%) contrast(109%);
}
.mySwipers {
  width: 100%; 
  height: auto; 
  object-fit: cover;
}
.banner-slider img {
  width: 100%; 
  height: 100vh;
}
.home-slider-arrow{
  color: #fff;
}
/* .mySwipers .swiper-slide img {
  width: 100%;
  height: 100%;
  
} */

/* .about-details{
  padding: 70px 0 !important;
} */
.rating {
  margin-top: 10px;
}

.rating i {
  color: #e0e0e0;
  font-size: 20px;
}

.rating i.filled {
  color: #ffd700;
}

.mv-para {
  font-size: 18px;
  font-family: var(--Opensans);
  line-height: 24.55px;
}

.count-span {
  font-size: 36px;
  color: #fff;
}
.fancybox-opened {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}


.testi-img , .img-username {
  position: absolute;
  top: -5%;
  left: 45%;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.img-username {
  text-align: center;
  font-weight: bold;
  font-size: 40px;
}


.lightboxpreview {
  transition: all .3s linear;
padding-top:60%;
 cursor:pointer;
 background-size:cover;
}
  
.lightbox-content {
max-height:75vh;
 height:75vh;
 width:100%;
 max-width: 1000px;}

.lightbox-close { 
 cursor:pointer;
   margin-left: auto;
 position:absolute;
 right:-30px;
 top:-30px;
 color:white;
   font-size: 2rem;
   font-weight: 700;
   line-height: 1;}
.modal_inner_image {
   min-height: 400px;
   z-index: 1000;}
.modal-content {
   width: 100%;}


.modalscale {transform:scale(0);
opacity:0;}



.lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled{transition:all .4s ease-in-out;}
.lightbox_img_wrap {padding-top:65%;
 position:relative;
 overflow:hidden;
}

.lightbox-enabled {width:100%;
height:100%;
 position:absolute;
 top:0;
object-fit:cover;
cursor:pointer;}

.lightbox-container {width:100vw;
height:100vh;
position:fixed;
top:0;
left:0;
 display:flex;
 align-items:center;
 justify-content:center;
background-color:rgba(0,0,0,.6);
z-index:9999;
opacity:0;
pointer-events:none;
}

.lightbox-container.active {
 opacity:1;
 pointer-events:all;
}
.lightbox-image-wrapper {
 display:flex;
 transform:scale(0);
 align-items:center;
 justify-content:center;
 max-width:60vw;
 max-height:60vh;
 position:relative;
}
.lightbox-container.active .lightbox-image-wrapper {transform:scale(1);}
.lightbox-btn, #close {
 color:white;
 z-index:9999999;
cursor:pointer; 
 position:absolute;

 font-size:50px;
}

.lightbox-btn:focus {
 outline:none;
}

.left {left:50px;}
.right {right:50px;}
#close {top:50px;
right:50px;}

.lightbox-image {
 width:100%;
 -webkit-box-shadow: 5px 5px 20px 2px rgba(0,0,0,0.19); 
box-shadow: 5px 5px 20px 2px rgba(0,0,0,0.19);
 max-height:95vh;
 object-fit:cover;
}

@keyframes slideleft {
 33% {transform:translateX(-300px);
 opacity:0;
 }
 66% {transform:translateX(300px);
 opacity:0;
 }
}


.slideleft {
  animation-name: slideleft;
animation-duration: .5s; 
animation-timing-function: ease; 
}
@keyframes slideright {
 33% {transform:translateX(300px);
 opacity:0;}
 66% {transform:translateX(-300px);
 opacity:0;}
}


.slideright{
  animation-name: slideright;
animation-duration: .5s; 
animation-timing-function: ease; 
}
 
.lightbox-enabled {
  transition: filter 0.1s ease;
}

.grayscale {
  filter: grayscale(100%) !important;
  border-radius: 10px;
}

.lightbox-enabled:hover {
  filter: grayscale(0%) !important;
}
.bright-image {
  filter: brightness(1.2); 
}
.positions{  
  font-family: var(--Opensans);
  padding: 5px;
  font-size: 16px;
  font-weight: 700;
}
.cv-email{
  text-decoration: none;
  color: var(--red-color);
}

.footer-5-column {
  padding-top: 50px;
}
.footer-5-column p {
  color: #000;
}
.footer-5-column .footer-container {
  max-width: 1320px;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
}
.footer-5-column .footer-container .footer-navbar-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  margin-right: auto;
  margin-left: auto;
}

.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details {
  width: 35%;
  max-width: 100%;
  flex: 0 0 auto;
  padding-right: 2rem;
  line-height: 1.428;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-logo {
  width: 60px;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-logo
  img {
  max-width: 100%;
  height: auto;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-logo
  svg {
  width: 100%;
  height: auto;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-content {
  margin-top: 1rem;
  font-size: 16px;
  line-height: 1.8;
  padding-right: 1rem;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-icons {
  margin-top: 1.5rem;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-icons
  ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-icons
  ul
  li {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin-right: 14px;
}
.footer-5-column
  .footer-container
  .footer-navbar-container
  .footer-company-details
  .footer-icons
  ul
  li
  a {
  width: 30px;
  padding: 6px;
}
.footer-5-column .footer-navbar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 1;
  line-height: 1.428;
  padding: 0 25px;
}

.footer-5-column .footer-navbar > .footer-navbar-col {
  width: 25%;
  flex: 0 0 auto;
}
.footer-5-column .footer-navbar .footer-navbar-col h5 {
  margin-bottom: 1.5rem;
  color: #000;
  overflow-wrap: break-word;
  padding: 0 0.5rem 0 0;
}
.footer-5-column .footer-navbar .footer-navbar-col ul {
  margin: 0;
}
.footer-5-column .footer-navbar .footer-navbar-col ul li {
  list-style: none;
}
.footer-5-column .footer-navbar .footer-navbar-col ul li a {
  font-size: 16px;
  text-decoration: none;
  color: var(--gray-color);
  overflow-wrap: break-word;
}
.footer-5-column .footer-navbar .footer-navbar-col ul li a:hover {
  color: var(--red-color) !important;
}
.footer-navbar-col p{
font-size: 16px;
font-weight: 600;
color: var(--gray-color);
}
.footer-5-column .footer-copyright {
  padding: 2rem 0;
  border-top: 1px solid rgb(219, 215, 215);
}
.footer-5-column .footer-copyright p {
  font-size: 14px;
  margin-bottom: 0;
}
.bottomline {
  color: var(--white-color) !important;
  font-family: var(--Opensans);
}
.socialmedia ul li:hover {
  border: none;
}
.socialmedia ul li:hover a {
  background-color: var(--red-color);
}
.socialmedia ul li:hover a  i{
  color: #fff !important;
}
.socialmedia ul li a {
  text-decoration: none;
  padding: 14px 16px;
  font-size: 16px;
  color: #777;
}

 /* Custome slider home page  */
.slider-container {
  position: relative;
  max-width: 100%;  
  height: 400px;
  overflow: hidden;
  margin: 40px 0;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.slide{
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Arrows */
.prev-arrow,
.next-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border: none;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.prev-arrow:hover,
.next-arrow:hover {
  background-color: rgba(255, 255, 255, 1);
}

.prev-arrow {
  left: 10px;
}

.next-arrow {
  right: 10px;
}

/* Responsive */
/* @media (max-width: 768px) {
  .slider-container {
    height: 100%;
  }

  .slide {
    font-size: 1.5rem;
  }

  .prev-arrow,
  .next-arrow {
    font-size: 1.5rem;
  }
} */
.work_info, .work_photo-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.footertitle h2{
  font-family: var(--jost);
  font-weight: 500;
  font-size: 32px;
}
.clients-logos{
  display: block;
  margin: auto;
  width: 200px;
  height: 200px;
}
.faq-links{
  text-decoration: none !important;
  color: var(--red-color);
  font-weight: 500 !important;
}   
.product-specification
{
  margin-bottom: 30px;
}
/* about page timeline  */

#timeline
{
  width: 100%;
  min-height: 100vh;
  overflow-y: visible !important;
  margin-top: -40px;
}

#timeline ul
{
  min-height: 1200px;
  border-top: 0;
  border-left: 4px solid transparent;
  list-style: none;
  border-left-color: #000; 
  border-image-slice: 1;
  position: relative;
  top: 5%;
  left: 50%;
  perspective: 2000px
}

#timeline ul li:after
{
  content: "\2713";
  font-family: fontawesome;
  display:block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-weight: 100;
  font-size: 90%;
  line-height:35px;
  text-align: center;
  background-color: var(--red-color);
  color: #fff;
  position:absolute;
  -webkit-transition: transform 1s linear;
  transition: transform 1s linear
}
#timeline ul li .cont
{
  width: 640px;
  padding: 10px 10px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-transform: translate(0, 0px);
  transform: translate(0, 0px);
  text-transform: capitalize;
  font-size: 18px;
  position: absolute;
}
#timeline ul li:nth-child(odd) .cont
{
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear
}

#timeline ul li:nth-child(even) .cont
{
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear
}
#timeline ul li:nth-child(odd):hover .cont
{
  text-align: left;
  -webkit-transform: rotateY(-175deg) translate3d(60px,0px,5px);
  transform: rotateY(-175deg) translate3d(60px,0px,5px);
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear;
}

#timeline ul li:nth-child(even):hover .cont
{
  text-align: left;
  -webkit-transform: rotateY(175deg) translate3d(-60px,0px,5px);
  transform: rotateY(175deg) translate3d(-60px,0px,5px);
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear
}

#timeline ul li:nth-child(odd):hover .cont p,
#timeline ul li:nth-child(odd):hover .cont h3
{
  -webkit-transform: rotateY(-175deg);
  transform: rotateY(-175deg);
}

#timeline ul li:nth-child(even):hover .cont p,
#timeline ul li:nth-child(even):hover .cont h3
{
  -webkit-transform: rotateY(175deg);
  transform: rotateY(175deg);
}


#timeline ul li .cont p{display: block}

#timeline ul li:nth-child(n+1):after{left: -18px}

#timeline ul li:first-child:after,
#timeline ul li:first-child .cont
{
  top: 3%
}
#timeline ul li:nth-child(2):after,
#timeline ul li:nth-child(2) .cont
{
  top: 17%
}
#timeline ul li:nth-child(3):after,
#timeline ul li:nth-child(3) .cont
{
  top: 31%
}
#timeline ul li:nth-child(4):after,
#timeline ul li:nth-child(4) .cont
{
  top: 45%
}
#timeline ul li:nth-child(5):after,
#timeline ul li:nth-child(5) .cont
{
  top: 59%
}
#timeline ul li:nth-child(6):after,
#timeline ul li:nth-child(6) .cont
{
  top: 73%
}
#timeline ul li:nth-child(7):after,
#timeline ul li:nth-child(7) .cont
{
  top: 87%
}
#timeline ul li:nth-child(n+1):hover:after
{
  -webkit-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
  -webkit-transition: transform 1s linear;
  transition: transform 1s linear
}
#timeline ul li .cont{
   border-color: var(--red-color) !important
}
#timeline ul li:nth-child(odd) .cont{left: 30px}
#timeline ul li:nth-child(even) .cont{left: -670px}

#timeline ul li:nth-child(odd) .cont:before
{
  border-width: 11px 11px 11px 0 ;
}
#timeline ul li:nth-child(even) .cont:before
{
  border-width: 11px 0 11px 11px
}

#timeline ul li:nth-child(even) .cont:after
{
  border-width: 10px 0 10px 10px
}
#timeline ul li:nth-child(odd) .cont:before
{
  top: 50%;
  left: -11px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}
#timeline ul li:nth-child(even) .cont:before
{
  top: 50%;
  right: -11px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#timeline ul li .cont:before
{
  border-color: transparent transparent transparent;
}

#timeline ul li:nth-child(even) .cont:after
{
  border-color: transparent var(--red-color);
  top: 50%;
  right: -9px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.cont h3{
  color: var(--red-color);
}
.cont p{
  color: #212529;
  font-size: 16px;
  font-family: var(--Opensans);
  font-weight: 500;
}
.cont:hover,
.cont:hover h3,
.cont:hover p {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
}



/* about page slider legacy  */



  
/* home page continue client logo slider - SAGAR  */
.scroll-container {
  position: relative;
  display: flex;
  width: 70%;
  margin: auto;
  overflow: hidden;
}

.imgBox-container {
  display: flex;
  animation: scroll 10s linear infinite;
}

.scroll-item {
  display: flex;
  white-space: nowrap;
}

.scroll-item a {
  margin: 0 10px;
}

.scroll-item img {
  max-width: 250px;
  scale: 0.8;
  border-radius: 10px;
  object-fit: contain;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
.Timeline {
  display: flex;
  align-items: center;
  height: 500px;
}

.event1,
.event2, .event3 {
  position: relative;
}

.event1Bubble {
  position: absolute;
  background-color: rgba(158, 158, 158, 0.1);
  width: 139px;
  height: 60px;
  top: -70px;
  left: -15px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
}

.event2Bubble {
  position: absolute;
  background-color: rgba(158, 158, 158, 0.1);
  width: 139px;
  height: 60px;
  left: -105px;
  top: 33px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)
}

.event1Bubble:after,
.event1Bubble:before,
.event2Bubble:after,
.event2Bubble:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom: 0;
}

.event1Bubble:before {
  bottom: -10px;
  left: 13px;
  border-top-color: rgba(222, 222, 222, 0.66);
  border-width: 12px;
}

.event1Bubble:after {
  bottom: -8px;
  left: 13px;
  border-top-color: #F6F6F6;
  border-width: 12px;
}

.event2Bubble:before {
  bottom: 59px;
  left: 103px;
  border-top-color: rgba(222, 222, 222, 0.66);
  border-width: 12px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.event2Bubble:after {
  bottom: 57px;
  left: 103px;
  border-top-color: #F6F6F6;
  border-width: 12px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.eventTime {
  display: flex;
}

.DayDigit {
  font-size: 27px;
  font-family: "Arial Black", Gadget, sans-serif;
  margin-left: 10px;
  color: #4C4A4A;
}

.Day {
  font-size: 11px;
  margin-left: 5px;
  font-weight: bold;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #4C4A4A;
}

.MonthYear {
  font-weight: 600;
  line-height: 10px;
  color: #9E9E9E;
  font-size: 9px;
}

.eventTitle {
  font-family: "Arial Black", Gadget, sans-serif;
  color: #a71930;
  font-size: 11px;
  text-transform: uppercase;
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 12px;
  margin-top: -2px;
}

.time {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  width: 50px;
  font-size: 8px;
  margin-top: -3px;
  margin-left: -5px;
  color: #9E9E9E;
}

.eventAuthor {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  color: #9E9E9E;
  font-size: 8px;
  width: 100px;
  top: -8px;
  left: 63px;
}

.event2Author {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  color: #9E9E9E;
  font-size: 8px;
  width: 100px;
  top: 96px;
  left: -32px;
}

.time2{
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  width: 50px;
  font-size: 8px;
  margin-top: -31px;
  margin-left: -5px;
  color: #9E9E9E;
}

.now{
     background-color: #004165;
    color: white;
    border-radius: 7px;
    margin: 5px;
    padding: 4px;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid white;
    font-weight: bold;
    box-shadow: 0 0 0 2px #004165
}

.futureGray{
     filter: grayscale(1);
    -webkit-filter: grayscale(1);
  
}

.futureOpacity{
  -webkit-filter: opacity(.3);
  filter: opacity(.3);
}