* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 100 - Thin */
/* 100 - Thin */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* 200 - ExtraLight */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* 300 - Light */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* 400 - Regular */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* 500 - Medium */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* 600 - SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* 700 - Bold */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* 800 - ExtraBold */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

/* 900 - Black */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}




body,
html {
  height: 100vh;
  font-family: "Poppins";
  overflow: hidden;
}

.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  transform: translateX(0%);
}

.slider-item {
  min-width: 100%;
  height: 100vh;
  /* Add a background gradient with the image and reduce opacity */
  background: url("./images/bg_black.webp") no-repeat;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;

  overflow: hidden;
}

.homeIntent,
.groupOfCopmaniesIntent,
.pneumaticIntent,
.productIntent,
.globalPartners {
  cursor: pointer;
}

.container {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), #eddcfce0);
  border-radius: 20px;
  padding: 30px;
  width: 100%;
  max-width: 1300px;
  height: 95vh;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
}

.container .parent {
  width: 100%;
  height: 100%;
  display: flex;
}

.parent> :first-child {
  position: relative;
  width: 100%;
  padding: 1rem;
}

.parent> :nth-child(2) {
  position: relative;
  width: 100%;
  padding: 1rem;
}

.paren .left h1 {
  text-align: left;
}

.slide-btn {
  position: absolute;
  bottom: 10%;
  font-size: 20px;
  font-weight: 600;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Positioning for previous and next buttons */
.prev-btn {
  left: 5%;
}

.next-btn {
  right: 5%;
}

.slide-btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

nav {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  padding-left: 5%;
  height: 60px;
  padding-right: 5%;
  flex-direction: row;
  gap: 15px;
  z-index: 99999;
}

.frontLogo {
  width: 22%;
  position: absolute;
  top: 30%;
  left: 8%;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.frontLogo img {
  width: 45%;
  height: auto;
}

.frontLogo1 {
  width: 22%;
  position: absolute;
  top: 27%;
  right: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.frontLogo1 img {
  width: 45%;
  height: auto;
}


.logo img {
  width: 120px;
  height: auto;
  /* border: 2px solid #feda77; */
  padding: 5px;
}

.social-links {
  display: flex;
  gap: 15px;
  justify-content: center;
  /* padding-top: 20px; */
  font-size: larger;
  margin-left: 5%;
  margin-top: 0 !important;
}

.sign-up-btn {
  background: linear-gradient(45deg, #feda77, #e1306c, #9b4dca, #f58529);
  color: white;
  padding: 10px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.3s ease;
  margin-top: 20px;
  /* Space between social links and button */
}

.nav-links {
  display: flex;
  gap: 40px;
  flex-grow: 1;
  justify-content: center;
}

.nav-links a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  transition: color 0.3s ease;
  font-weight: 600;
}

@media screen and (min-width:1800px) and (min-height:910px) {
  .venting-heading {

    font-size: 40px !important;

  }

  nav {
    margin-top: 2% !important;
  }

  .nav-links a {

    font-size: 18px;

  }
}

@media screen and (max-width: 1040px) {
  .nav-links a {
    font-size: 11.5px;
    transition: color 0.3s ease;
    font-weight: 600;
  }
}

.center-background {
  background-color: #345bb2;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  margin-top: auto;
}

.center-text {
  color: white;
  font-size: 1rem;
  font-weight: bold;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: auto;
}

.left-content {
  width: 50%;
}

.right-content {
  width: 50%;
  padding-right: 2%;
  display: flex;
  column-gap: 10px;
}

.right-side-image-container img {
  opacity: 0;
  transform: translateX(-100px);
  /* Default hidden state */
}

.right-side-image-container img.animate-slide-right {
  animation: slideRight 1s ease-in-out forwards;
}

/* Keyframe animation */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

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

h1 {
  font-size: 36px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
}

.leftheading1 {
  font-size: 36px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  padding-right: 10px;
  text-transform: uppercase;

}

.leftheading2 {
  font-size: 36px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  padding-right: 10px;
  text-transform: uppercase;
  visibility: hidden;

}

@keyframes showText {
  to {
    visibility: visible;
  }
}

@keyframes typing {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.leftheading2.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out;
}

.subtitle {
  color: #e11d48;
  margin-bottom: 15px;
}

p {
  color: #000000;
  margin-bottom: 10px;
  line-height: 1.6;

}

.content .left-content p {
  padding-left: 10%;
}

.join-btn {
  background: white;
  color: #333;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-left: 10%;
}

/* .social-links a {
  color: #666;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s ease;
} */

.card {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #e11d48, #8b5cf6);
  width: 75%;
}

.slide-btn {
  position: absolute;
  bottom: 10%;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #000;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-family: "Poppins";
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 20px;
  font-weight: 600;
}

.slide-btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.parentslide .left3 {
  width: 100%;
}

.parentslide .right3 {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parentslide .right3 video {
  width: 58%;
  height: auto;
  border-radius: 7px;
}

.swiper-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  margin: auto;
}


.swiper-container1 {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.swiper-wrapper {
  display: flex;
  flex-direction: column;
}

.swiper-slide {
  min-height: 97%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  font-size: 50px;
  padding: 20px;
  color: #333;
  position: relative;
  font-family: "Poppins";
  font-size: 17px;
}


.swiper-slide .first {
  font-weight: bold;
  font-size: 60px;
  animation: slideInFade 2s ease-out 1s;
  margin-top: 5%;
  text-align: center;
}

@media screen and (min-width:1800px) and (min-height:910px) {
  .swiper-slide .first {
    font-weight: bold;
    font-size: 80px;
    animation: slideInFade 2s ease-out 1s;
    margin-top: 8%;
    text-align: center;
  }
}

.text-and-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 20px;
  margin-left: 0;
  text-align: center;
  padding-left: 6%;
}

.founded-text {
  padding-left: 0% !important;
}

.founder-image {
  width: 80%;
  height: auto;
  border-radius: 50%;
  border: 4px solid white;
}

/* .swiper-slide:nth-child(3) {
  font-size: 18px;
  line-height: 40px;
  text-align: justify;
  padding: 50px;
} */

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

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

@keyframes slideInFade {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

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

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.5);
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  margin: 0 5px;
  transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #00aaff;
}

.para2 {
  font-size: 13px;
  line-height: 30px;
  margin-top: 0rem;
  padding: 0 80px !important;

  margin-top: -10% !important;
  width: 100% !important;
}

@media screen and (max-width:1535px) and (min-width:1520px) and (min-height:680px) and (max-height:735px) {
  .parentslide .left3 {
    width: 100%;
    height: 100%;
  }

  .swiper-container {
    width: 100%;
    height: 80%;
    overflow: hidden;
    position: relative;
    margin: auto;
  }

  .para2 {
    margin-top: -5% !important;
  }

  .right-sections div>:first-child {
    font-size: 16px !important;
    font-weight: 600;
  }

  .right-sections div>:nth-child(2) {
    font-size: 14px !important;

  }
}

.para3 {
  padding: 0 80px !important;
}

.para2 .lefts {
  width: 60% !important;
  display: flex;
  flex-direction: column;
  align-items: justify;

}

.para2 .rights1 {
  width: 40% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.para2,
.rights1 video {
  width: 65%;
  height: auto;
  border-radius: 10px;

}

/* ---------------------------------------  Page 4   ------------------------------------------- */

.page-4-outer-container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

@media screen and (min-width: 1700px) {
  .page-4-outer-container {
    margin-top: 8%;
  }
}

@media screen and (max-width: 1350px) {
  .page-4-outer-container {
    scale: 0.8;
  }
}

/* .group_of_companies {
    margin-top: 35px;
} */

@media screen and (max-width: 1350px) {
  .group_of_companies {
    margin-top: 0;
  }
}

@media screen and (min-width: 1800px) {
  .group_of_companies {
    margin: 10px 0 !important;
  }
}

.centered-image {
  display: block;
  /* margin: auto; */
  max-width: 800px;
  height: auto;
  width: 100%;
  position: relative;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.centered-image1 {
  display: block;
  /* margin: auto; */
  max-width: 800px;
  height: auto;
  width: 100%;
  position: relative;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.map-container {
  position: relative;
  width: 90%;
  height: 400px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.airlocklogogif {
  position: absolute;
  bottom: 0;
  top: 55%;
  left: 10%;
  width: 20%;
  height: auto;
}

.mapgif {
  position: absolute;
  bottom: 0;
  top: 93%;
  left: 8%;
  width: 8%;
  height: auto;
}

.mapgif1 {
  position: absolute;
  bottom: 0;
  top: 90%;
  left: 62%;
  width: 8%;
  height: auto;
}

/* ---------------------------- Roles  ----------------------------- */

.header1 {
  text-align: center;
  margin-bottom: 0px;
  position: relative;
}

.header1 .title1 {
  color: #00008b;
  font-size: 30px;
  font-weight: 600;
  margin: auto;
  text-align: center;
  padding: 0;
  text-transform: uppercase;
}

.header1 .title2 {
  color: #303030;
  font-size: 24px;
  font-weight: 550;
  margin: auto;
  text-align: left;
  padding: 0;
  font-style: italic;
}

.header1 .title3 {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  margin: auto;
  text-align: left;
  padding: 0;
}

.header1 .title3 b {
  color: #000;
  font-weight: 500;
}

.text-container {
  max-width: 60%;
  /* Limit width for the text part */
}

.title2,
.title3 {
  text-align: left;
  /* Ensure the text is aligned to the left */
}

.title3-image {
  width: 100%;
  /* Adjust image size as needed */
  height: auto;
  border-radius: 5px;
  /* Optional: gives the image rounded corners */
}

/* .logos1{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 600px;
}

.logo1 {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
} */

/* ************************************************************** Page 5 flow chart ************************************************************** */

.organisation_head_title {
  padding: 0 !important;
  text-align: center;
  color: #00008b;
  font-size: 30px;
  animation-name: heading;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@media screen and (min-width: 1800px) {
  .organisation_head_title {
    margin: 1rem 0rem !important;
  }
}

.pg-orgchart {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.org-chart {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.org-chart ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.org-chart ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 4px solid #fff;
  width: 0;
  animation: expandLine 0.5s ease-out forward infinite;
}

.org-chart li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 10px;
  transition: all 0.5s;
  width: 100%;

}

@media screen and (min-width:1800px) and (min-height:905px) {

  .org-chart .sub-containers {
    height: 192px !important;
    width: 188px !important;
  }

  .page-4-outer-container {
    margin-top: 2% !important;
  }
}



@media screen and (max-width: 1380px) {
  .org-chart li {
    padding: 20px 2px !important;
    margin-right: 0.3em !important;
  }

  .pg-orgchart {
    margin-top: 2%;
  }
}

.org-chart li::before,
.org-chart li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 4px solid #fff;
  width: 50%;
  height: 15px;
  animation: expandLine 2s ease-out infinite;
}

.org-chart li::after {
  right: auto;
  left: 50%;
  border-left: 4px solid #fff;
}

.org-chart li:only-child::after,
.org-chart li:only-child::before {
  display: none;
}

.org-chart li:only-child {
  padding-top: 0;
}

.org-chart li:first-child::before,
.org-chart li:last-child::after {
  border: 0 none;
}

.org-chart li:last-child::before {
  border-right: 4px solid #fff;
  border-radius: 0 5px 0 0;
}

.org-chart li:first-child::after {
  border-radius: 5px 0 0 0;
}

.org-chart .user-outer-container {
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  display: inline-block;
  transition: all 0.5s;
  background: #ffffffa1;
  width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.org-chart .sub-containers {
  height: 200px;
  width: 180px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/*   
.company_associated {
    flex-grow: 1;
} */

@media screen and (min-width: 1700px) {
  .org-chart .sub-containers {
    height: 250px;
    width: 150px;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1490px) {
  .org-chart .sub-containers {
    height: 250px;
    width: 130px;
  }
}

@media screen and (max-width: 1400px) {
  .org-chart {
    scale: 0.8;
    margin-bottom: 10%;
  }

  .org-chart .sub-containers {
    height: 286px;

    width: 163px;
  }
}

.org-chart .user {
  padding: 15px 15px;
}

.org-chart .user:hover,
.org-chart .user:hover+ul li .user {
  background: lighten(#22659c, 45%);
  color: #002a50;
  transition: all 0.15s;
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 3px lighten(#22659c, 30%),
    0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.org-chart .user:hover img {
  box-shadow: 0 0 0 5px lighten(#22659c, 20%);
}

.org-chart .user:hover+ul li::after,
.org-chart .user:hover+ul li::before,
.org-chart .user:hover+ul::before,
.org-chart .user:hover+ul ul::before {
  border-color: #94a0b4;
}

.org-chart .user>div,
.org-chart .user>a {
  font-size: 12px;
}

.org-chart .user img {
  margin: 0 auto;
  max-width: 60px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* box-shadow: 0 0 0 5px #636363; */
}

.org-chart .user .name {
  font-size: 12px !important;
  /* margin: 15px 0 0; */
  font-weight: 600;
  color: #000;
  height: 34%;
  -webkit-box-orient: vertical;
}

.org-chart .user .role {
  font-weight: 600;
  margin-bottom: 0px;
  margin-top: 10px;
  font-size: 14px;
  color: #00008b;
  line-height: 2;
}

.org-chart .user .manager {
  font-size: 12px;
  color: #b21e04;
}

.company_associated {
  width: 100%;
  background: #dc0b07a4;
  margin: 0 !important;
  padding: 5px !important;
  color: white;
  font-size: 10px !important;
  position: absolute;
  height: 30%;
  text-align: center;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width:1800px) and (min-height:1050px) {}

@media screen and (min-width: 1700px) {
  .company_associated {
    min-height: 60px;
  }
}

.img-responsive {
  height: 30px !important;
  width: 30px !important;
}

@media screen and (max-width: 1600px) {
  .org-chart .user .name {
    font-size: 16px;
  }

  .org-chart .user .role {
    font-size: 13px;
  }

  .company_associated {
    font-size: 14px;
  }
}

@media screen and (max-width: 1300px) {
  .org-chart .user .name {
    font-size: 13px;
  }

  .org-chart .user {
    padding: 13px 12px;
  }

  .company_associated {
    font-size: 11px;
  }
}

@media screen and (min-width: 1300px) {
  .company_associated {
    font-size: 13px;
  }
}

@media screen and (max-width: 1260px) {}

/* Keyframes for the border animation */
@keyframes expandLine {
  0% {
    width: 0;
    border-color: transparent;
  }

  100% {
    width: 50%;
    border-color: #fff;
  }
}

/* ----------------------------------- Page 10 ------------------------------------- */

.role-container1 {
  text-align: center;
  position: relative;
  margin-top: 30px;
}

.role1 {
  display: inline-block;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  color: #303030;
  font-weight: 500;
  font-size: 30px;
  margin-top: -16px;
}

.role1::after {
  content: "";
  position: absolute;
  top: 76%;
  left: 50%;
  width: 2px;
  height: 12px;
  background: #888;
}

.departments1::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: #888;
}

.department1::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 2px;
  height: 30px;
  background: #888;
}

.departments1 {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  position: relative;
}

.department1 {
  width: 45%;
  position: relative;
  text-align: center;
}

.department-title1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303030;
  font-weight: 500;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 20px;
}

.salesicon1,
.salesicon2 {
  width: 8%;
  height: auto;
  margin-right: 8px;
}

.company-logos {
  display: flex;
  gap: 20px;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.activities1 {
  /* list-style: none; */
  padding: 10px;
  border-radius: 4px;
  padding-left: 38%;
}

.list-icon {
  width: 10%;
  height: auto;
  padding-right: 15px;
  margin-right: 2%;
  align-items: flex-start;
  display: flex;
  justify-content: center;
  animation: moveArrow 1s infinite alternate ease-in-out;
}

.departments1 img{
  width: 37px;
  height: auto;
}

@media screen and (min-width:1800px) and (min-height:1050px) {

/* 
  .saleslist1 .list-icon {
    width: 7% !important;
  } */

  /* .list-icon2 {
    width: 5.5% !important;

  } */

  /* .saleslist1 .list-icon1 {
    width: 8.5% !important;

  } */
}

@media screen and (min-width:1800px) and (min-height:1050px) {


  .about-image .mapwithlogo1 {

    margin-top: 14% !important;
  }
}

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

  100% {
    transform: translateX(10px);
    /* Adjust the distance as needed */
  }
}
/* 
.activities1 li {
  padding: 3px;
  border-radius: 4px;
  text-align: justify;
  align-items: flex-start;
  justify-content: start;
  display: flex;
  font-size: 12px;
  margin: 0;
} */

.roleicon {
  width: 5%;
  height: auto;
}

.companylogo1 {
  width: 15%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.companylogo2,
.companylogo3 {
  width: 15%;
  height: auto;
  display: block;
  margin: 0;
}

/* -----------------------  Product extent  ------------------------------ */
.productextent {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 900px;
  margin: auto;
}

/* ---------------------------- Rotary Valve  ----------------------------- */

.header2 {
  text-align: left;
  margin-bottom: 0px;
  position: relative;
  /* margin: auto; */
  padding-right: 6%;
  padding-left: 6%;
}

.header2 h1 {
  display: flex;
  color: rgb(0, 0, 139);
  font-size: 40px;
  font-weight: 600;
  margin: auto;
  text-align: center;
  padding: 10px;
  justify-content: center;
  text-transform: uppercase;
}

.header2 .title1 {
  color: #00008b;
  font-size: 40px;
  font-weight: 600;
  margin: auto;
  text-align: center;
  padding: 0;
}

.header2 .title2 {
  color: #303030;
  font-size: 22px;
  font-weight: 550;
  margin: auto;
  text-align: justify;
  padding: 0;
  font-style: normal;
}

.header2 p b {
  color: #00008b;
  font-size: 16px;
  font-weight: 550;
  margin: auto;
  text-align: left;
  padding: 0;
  font-style: italic;
}

.header2 .title3 {
  color: #333;
  font-size: 15px;
  font-weight: 400;
  margin: auto;
  text-align: left;
  padding: 5px;
}

.header2 .title3 b {
  color: #000;
  font-weight: 600;
  font-style: normal;
}

.header2 .title3 ul li {
  color: #000;
  font-weight: 500;
}

ul.title3 {
  list-style: none;
  padding-left: 20px;
}

ul.title3 li {
  position: relative;
  padding-left: 30px;
  /* Space for the icon */
}

.basic-construction h2 {
  margin-left: 10%;
}

ul.title3 li {
  position: relative;
  list-style-type: none;
}

ul.title3 li::before {
  content: "";
  background: url("./images/arrow-right_15100183.png") no-repeat center center;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -1%;
  top: 49%;
  transform: translateY(-50%);
  animation: shakeX 1s infinite linear;
}

@keyframes shakeX {
  0% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-10px); }
  100% { transform: translateY(-50%) translateX(0); }
}


.role-container1 {
  text-align: center;
  position: relative;
  margin-top: 30px;
}

.role1 {
  display: inline-block;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  color: #303030;
  font-weight: 500;
  font-size: 30px;
  margin-top: -16px;
}

.role1::after {
  content: "";
  position: absolute;
  top: 76%;
  left: 50%;
  width: 2px;
  height: 12px;
  background: #888;
}

.departments1::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: #888;
}

.department1::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 2px;
  height: 30px;
  background: #888;
}

/* Initial state: hide all elements */
.role1::after,
.departments1::before,
.department1::before {
  opacity: 0;
  pointer-events: none;
  /* Make them unclickable until animation starts */
}

@keyframes slideInFromRight1 {
  0% {
    opacity: 0;
    transform: translateX(1000px);
  }

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

@keyframes slideInFromLeft1 {
  0% {
    opacity: 0;
    transform: translateX(-1000px);
  }

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

.animate-from-right {
  animation: slideInFromRight1 0.8s ease forwards;
  opacity: 1;
}

.animate-from-left {
  animation: slideInFromLeft1 0.8s ease forwards;
  opacity: 1;
}

/* Optional: Start hidden */
.anima33,
.row {
  opacity: 0;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

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

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }

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

.pressureConveyContainer {
  opacity: 0;
}


.slide-in-left {
  animation: slideInFromLeft 1s ease-out forwards;
}

.slide-in-right {
  animation: slideInFromRight 1s ease-out forwards;
}

/* Animation for the role line */
@keyframes roleLine {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 12px;
  }
}

/* Animation for the department line */
@keyframes departmentLine {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 50%;
  }
}

/* Animation for the departments' line */
@keyframes departmentsLine {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 30px;
  }
}

/* Apply animations sequentially, but infinitely looping */

/* Role line animation */
.role1::after,
.departments1::before,
.department1::before {
  opacity: 0;
  pointer-events: none;
}

/* Animation classes to trigger animations on the lines */
.animate-role::after {
  animation: roleLine 1s ease-in-out forwards;
}

.animate-department::before {
  animation: departmentLine 1s ease-in-out forwards;
}

.animate-departments::before {
  animation: departmentsLine 1s ease-in-out forwards;
}

.departments1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
  position: relative;
  margin-top: 2%;
}

.department1 {
  width: 45%;
  position: relative;
  text-align: center;
}

.department-title1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-weight: 600;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 20px;
}

.salesicon1,
.salesicon2 {
  width: 8%;
  height: auto;
  margin-right: 8px;
}

.company-logos {
  display: flex;
  gap: 20px;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.activities1 {
  /* list-style: none; */
  padding: 10px;
  border-radius: 4px;
  padding-left:22%;
  padding-top: 0;
}

.saleslist1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  /* top: 23%; */
  position: absolute;
  left: 5%;
  gap: 30px;
}

.saleslist1 .activities1 {
  padding-left: 0%;
  width: 50%;
}

.departments1 .list-icon {
  width: 19px;
  height: auto;
  padding-right: 10px;
  align-items: flex-start;
  display: flex;
  justify-content: center;
  margin-top: 2.8%;
  animation: moveArrow 1s infinite alternate ease-in-out;
}

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

  100% {
    transform: translateX(10px);
    /* Adjust the distance as needed */
  }
}

/* .saleslist1 .list-icon1 {
  width: 8%;
  height: auto;
  padding-right: 10px;
  align-items: flex-start;
  display: flex;
  justify-content: center;
  margin-top: 3%;
  margin-right: 10px;
  animation: moveArrow 1s infinite alternate ease-in-out;
} */

@keyframes moveArrow {
  0% {

    transform: translateX(0);
  }

  100% {
    transform: translateX(10px);
    /* Adjust the distance as needed */
  }
}

.list-icon {
  width: 6%;
  height: auto;
  padding-right: 10px;
  align-items: flex-start;
  display: flex;
  justify-content: center;
  /* margin-top: 2%; */
  animation: moveArrow 1s infinite alternate ease-in-out;
}

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

  100% {
    transform: translateX(10px);
    /* Adjust the distance as needed */
  }
}

.list-icon2 {
  width: 6%;
  height: auto;
  padding-right: 10px;
  align-items: flex-start;
  display: flex;
  justify-content: center;
  margin-top: 2%;
  animation: moveArrow 1s infinite alternate ease-in-out;
  margin-right: 10px;
}

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

  100% {
    transform: translateX(10px);
    /* Adjust the distance as needed */
  }
}

.activities1 li {
  padding: 3px;
  border-radius: 4px;
  text-align: justify;
  align-items: flex-start;
  justify-content: start;
  display: flex;
  font-size: 12px;
  margin: 0;
}

.sub-list{
  padding-left: 3%;
}

.sub-list li{
  display: list-item;
}


.roleicon {
  width: 7%;
  height: auto;
}

.companylogo1 {
  width: 15%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.companylogo2,
.companylogo3 {
  width: 15%;
  height: auto;
  display: block;
  margin: 0;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 6%;
  padding-right: 6%;
  margin-top: auto;
  margin-bottom: auto;
}

/* Image styling */
.image-center {
  width: 20%;
  /* Adjust the image width as per your design */
}

.title3-image {
  width: 100%;
  /* Make the image fill its container */
  height: auto;
  display: block;
  border-radius: 5px;
}

/* Left and Right sections */
.left-right-section {
  display: flex;
  width: 75%;
  /* Adjust width as needed */
}

.left-part,
.right-part {
  width: 45%;
  /* Adjust width of each section */
  text-align: left;
  /* Align text to the left */
}

/* Ensure headings and lists align well */
.left-part h2,
.right-part h2 {
  color: #303030;
  font-size: 22px;
  font-weight: 550;
  margin: 0;
  text-align: left;
  padding: 0;
  font-style: normal;
}

.left-part ul li,
.right-part ul li {
  list-style-type: none;
  padding-left: 20px;
  font-size: 15px;
  color: #303030;
}

/* ----------------------------- Page 22  -----------------------------  */
.image-container {
  display: flex;
  flex-direction: column;
  /* This ensures that the whole container can stack content vertically */
  align-items: center;
  gap: 20px;
  /* Space between rows (can adjust as per need) */
}

.image-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 5%;
}

.image-box {
  text-align: center;
  width: 100%;
}

.image-box img {
  width: 80%;
  /* Or you can set any other specific width */
  height: auto;
  /* Set a fixed height to maintain uniformity */
  object-fit: cover;
  /* Ensure the image is cropped and fits in the box properly */
}

.image-container p {
  color: #000;
}

/* ----------------------------- Page 23  -----------------------------  */
.gallery-container {
  display: flex;
  justify-content: center;
}

.gallery-row {
  display: flex;
  justify-content: center;
  gap: 0px;
  /* Space between images */
}

.gallery-item {
  text-align: center;
}

.gallery-item img {
  width: 80%;
  /* Set equal width */
  height: auto;
}

.item11 img {
  width: 65%;
  height: auto;
}

.item2 img {
  width: 130%;
  height: auto;
  margin-top: 19%;
  margin-bottom: 10%;
}

.gallery-container p {
  color: #000;
}

/* ----------------------------  Page 24  ---------------------------------- */
.basic-construction {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  margin: auto;
  margin-left: 4%;
}

.basic-construction> :first-child {
  width: 20%;
}

.basic-construction>:nth-child(2),
.basic-construction>:nth-child(4) {
  width: 30%;
}

.basic-construction>:nth-child(3) {
  width: 20%;
}



.left-section h2,
.center-section h2,
.right-section p {
  margin-bottom: 7px;
  color: #00008b;
  font-weight: 550;
}

.left-section ul,
.center-section ul,
.right-section ul {
  list-style: none;
  padding: 0;
  text-align: left;

}

.left-section li,
.center-section li,
.right-section li {
  font-size: 16px;
  margin: 5px 0;
}

.left-section img {
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-top: 10px;
}

.right-section img {
  width: 60%;
  height: auto;
  margin-top: -16px;
}

.center-section ul,
.right-section ul {
  /* padding-top: 10px !important; */
}


/* ----------------------------  Page 25  ---------------------------------- */
.general-illustration {
  display: flex;
  width: 100%;
  height: 80%;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.left-side {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-side video {
  width: 95%;
  height: auto;
  object-fit: contain;
  max-width: 1100px;
}

.right-side {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-side video {
  width: 95%;
  height: auto;
  object-fit: contain;
  max-width: 1100px;
}

/* .general-illustration div{
  width: 33% !important;
  height: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.general-illustration div > img{
 width: 100% !important;
 height: auto !important;
} */


/* ----------------------------  Page 26  ---------------------------------- */
/* Ensure full height for the images */
.full-img {
  width: 55%;
  height: auto;
  object-fit: contain;
  /* Ensures the images fill the container without distortion */
}

.full-img1 {
  width: 75%;
  height: auto;
  object-fit: contain;
  /* Ensures the images fill the container without distortion */
}

.split-section {
  display: flex;
  justify-content: space-around;
  margin-top: -2%;
  width: 100%;
  height: 80%;
}


.part-one,
.part-two,.part-three {
  width: 33%;
  /* Makes both parts equal in size */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Ensures text is below the image */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.part-one video {
  width: 100%;
  height: auto;

}

.part-three video {
  width: 100%;
  height: auto;

}

.part-two video {
  width: 100%;
  height: auto;

}

/* Styling for text under each image */
.part-one .text,
.part-two .text,
.part-three .text {
  text-align: center;
  font-size: 24px;
  color: #000;
  margin-top: 10px;
  margin-left: 0;
  font-weight: 400;
}


/* For smaller screens (e.g., mobile devices) */
@media (max-width: 768px) {
  .split-section {
    flex-direction: column;
    align-items: center;
  }

  .part-one,
  .part-two {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* ------------------------     Slide 26       ----------------------------- */

.header2 .rotaryvalveleakage {
  width: 100%;
  max-width: 1500px;
  height: auto;
  margin: auto;
  display: flex;
  margin-top: -10%;
}

/* ----------------------------- media query  -----------------------------  */

@media screen and (min-width: 1601px) and (max-width: 1950px) {
  nav {
    max-width: 1700px;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: -1%;
  }

  .container {
    width: 100%;
    max-width: 1700px;
    height: 85vh;
    display: flex;
  }

  .social-links {
    display: flex;
    gap: 25px;
    justify-content: center;
    padding-top: 0;
    margin-right: 1%;
  }

  .sign-up-btn {
    margin-top: 0px;
  }

  .slide-btn {
    bottom: 10%;
  }

  .centered-image1 {
    max-width: 950px;
    /* top: 40%;
        left: 30%; */
  }

  .centered-image {
    max-width: 1000px;
    /* top: 41%;
        left: 30%; */
  }

  .map-image {
    width: 100%;
    height: auto;
  }

  .mapgif {
    top: 109%;
    left: 8%;
    width: 7%;
    height: auto;
  }

  .mapgif1 {
    top: 100%;
    left: 63%;
    width: 7%;
    height: auto;
  }

  .productextent {
    max-width: 1300px;
  }

  .header2 .title2 {
    font-size: 26px;
  }

  .header2 .title3 {
    font-size: 18px;
  }

  .left-part h2,
  .right-part h2 {
    font-size: 26px;
  }

  .left-part ul li,
  .right-part ul li {
    font-size: 18px;
  }

  ul.title3 li {
    margin: 5px;
  }

  .title3-image {
    width: 100%;
    margin-top: -3%;
  }

  .role1 {
    font-size: 36px;
  }

  .department-title1 {
    font-size: 30px;
  }

  .companylogo1 {
    width: 25%;
    height: auto;
  }

  .companylogo2,
  .companylogo3 {
    width: 25%;
    height: auto;
  }

  .header1 .title1 {
    margin-top: 0%;
  }

  .activities1 li {
    font-size: 20px;
    text-align: left;
    line-height: 1.8;
  }

  .list-icon {
    width: 6%;
  }

  .list-icon {
    width: 6%;
    margin-top: 1%;
  }

  .founder-image {
    width: 10%;
    height: auto;
  }

  h1 {
    font-size: 40px;
    padding-left: 10%;
    margin: 20px;
    margin: auto;
  }

  p {
    font-size: 19px;
  }

  .full-img {
    width: 50%;
  }

  .full-img1 {
    width: 70%;
  }

  .rotaryvalveleakage {
    width: 40%;
  }

  .card {
    font-size: 24px;
  }

  .swiper-container {
    height: 500px;
    margin: auto;
    display: flex;
  }

  .swiper-container1 {
    height: 480px;
    margin: auto;
    display: flex;
  }

  .title11 {
    margin: 0.25em 0 !important;
  }

  .flex-container {
    margin-top: 4% !important;
    gap: 50px !important;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1800px) {
  .flex-container {
    justify-content: space-evenly;
  }

  .video-container {
    max-width: 700px !important;
  }

  .flex-container img {
    width: 70% !important;
    object-fit: contain;
  }

  .p_and_a_about_image img {
    max-width: 150px !important;
  }
}

@media screen and (min-width: 1381px) and (max-width: 1600px) {
  nav {
    max-width: 1700px;
    padding-left: 5%;
    padding-right: 0%;
    margin-top: 1%;
  }

  .note2 {
    margin-top: unset !important;
  }

  .container {
    width: 100%;
    max-width: 1700px;
    height: 85vh;
    display: flex;
  }

  /* 
  .social-links {
    display: flex;
    gap: 25px;
    justify-content: center;
    padding-top: 0;
    margin-right: 2%;
  } */

  .sign-up-btn {
    margin-top: 0px;
  }

  .slide-btn {
    bottom: 10%;
  }

  .centered-image1 {
    max-width: 700px;
    /* top: 32%;
        left: 23%; */
  }

  .page44content {
    margin-top: unset;
  }

  .centered-image {
    max-width: 800px;
    /* top: 40%;
        left: 28%; */
  }

  .map-image {
    width: 90%;
    height: auto;
  }

  .mapgif {
    top: 92%;
    left: 12%;
    width: 7%;
    height: auto;
  }

  .airlocklogogif {
    top: 49%;
    left: 18%;
    width: 20%;
    height: auto;
  }

  .swiper-pagination-vertical.swiper-pagination-bullets,
  .swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 40% !important;
    transform: translate3d(0px, -50%, 0);
  }

  .mapgif1 {
    top: 90%;
    left: 61%;
    width: 7%;
    height: auto;
  }

  .role1 {
    font-size: 24px;
    margin-top: 2%;
  }

  .roleicon {
    width: 3%;
    height: auto;
  }

  .department-title1 {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .companylogo1 {
    width: 20%;
    height: auto;
  }

  .companylogo2,
  .companylogo3 {
    width: 15%;
    height: auto;
  }

  .productextent {
    width: 80%;
    margin-top: 0;
  }

  .header2 .title1 {
    font-size: 26px;
  }

  .header2 .title2 {
    font-size: 16px;
  }

  .header2 .title3 b {
    font-size: 14px;
  }

  .header2 .title3 {
    font-size: 14px;
  }

  .left-part h2,
  .right-part h2 {
    font-size: 16px;
  }

  .left-part ul li,
  .right-part ul li {
    font-size: 14px;
    margin: 5px;
  }

  ul.title3 li {
    margin: 5px;
  }

  .title3-image {
    width: 100%;
    margin-top: -3%;
  }

  .mainpartsimg {
    width: 40%;
  }

  .header2 p b {
    font-size: 16px;
  }

  .header1 .title1 {
    margin-top: 0%;
    font-size: 30px;
  }

  .activities1 li {
    font-size: 18px;
    text-align: left;
    line-height: 2;
  }

  .about-points li img {
    margin-top: 0.7%;
  }

  .list-icon {
    width: 7%;
    margin-top: 0%;
  }

 
  

  .list-icon2 {
    width: 7%;
    margin-top: 2%;
  }

  .role-container1 {
    margin-top: -2%;
  }

  .founder-image {
    width: 10%;
    height: auto;
  }

  h1 {
    font-size: 2.5rem;
    padding-left: 10%;
  }

  p {
    font-size: 16px;
  }

  .note {
    margin-top: -8%;
  }

  .note3 {
    margin-top: 0% !important;
  }

  .page35 {
    margin-top: 0%;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 5px !important;
  }

  .image-row {
    gap: 50%;
  }

  .image-box img {
    width: 95px;
    height: 95px;
  }

  .left-section img {
    width: 70%;
  }

  .title11 {
    font-size: 30px !important;
  }

  .about-image .mapwithlogo1 {
    width: 20% !important;
    height: auto;
  }


  .right-section img {
    width: 26%;
    margin-top: -6px;
  }


  .left-section h2,
  .center-section h2,
  .right-section p {
    font-size: 16px;
    margin-bottom: 0;
    padding-bottom: 0;
    /* margin-top: 5%; */
  }

  .left-side img {
    width: 85%;
    margin-left: 11%;
  }

  .right-side h2 {
    font-size: 16px;
  }

  .right-side p {
    font-size: 14px;
  }

  .full-img {
    width: 40%;
    margin-top: -2%;
  }

  .full-img1 {
    width: 55%;
  }

  .text {
    font-size: 22px;
  }

  .left-section li,
  .center-section li,
  .right-section li {
    font-size: 14px;
  }

  .card {
    font-size: 20px;
  }

  .swiper-container {
    /* height: 500px; */
    /* margin: auto; */
    display: flex;
  }

  .swiper-container1 {
    height: 400px;
    margin: unset;
    display: flex;
  }

  .venting-swiper4new {
    height: 400px;
    margin: unset;
    display: flex;
  }

  .venting-swiper11 {
    height: 400px;
    margin: unset;
    display: flex;
  }

  #ventingSwiper {
    height: 400px;
    margin: unset;
    display: flex;
  }

  #ventingSwiper4 {
    height: 400px;
    margin: unset;
    display: flex;
  }

  .venting-swiper44 {
    height: 400px;
    margin: unset;
    display: flex;
    margin-bottom: 0 !important;
  }

  .venting-swiper51 {
    height: 400px;
    margin: unset;
    display: flex;
  }

  #ventingSwiper2 {
    height: 400px;
    margin: unset;
    display: flex;
  }

  .main-swiper-7-container {
    height: 400px !important;
    margin: unset;
    display: flex;
    margin-bottom: 0 !important;
  }

  .rotaryvalveleakage {
    width: 33%;
  }

  .header2 .rotaryvalveleakage {
    max-width: 1050px !important;
    margin-top: -8% !important;
  }

  .heading-container .ml2,
  .heading-container .ml3,
  .heading-container .ml4,
  .heading-container .ml5,
  .heading-container .ml6,
  .heading-container .ml7 {
    font-weight: 700;
    font-size: 30px;
    text-align: left;
    margin: 10px;
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0;
    white-space: nowrap;
    /* Ensures text stays in one line */
    overflow: hidden;
  }

  /* Apply animation with delays for each heading */
  /* .txtanim1 {
    animation: typing1 6s steps(40, end) infinite, blink 0.75s step-end infinite;
  } */

  .txtanim2 {
    animation: typing1 6s steps(40, end) infinite 7s,
      blink 0.75s step-end infinite 12s;
  }

  @keyframes typing1 {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }

  @keyframes blink {
    50% {
      border-color: transparent;
    }
  }

  .left-section1 h2 {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: 10px !important;
  }

  .about-points li {
    font-size: 13px;
    margin-bottom: 5px !important;
  }

  .address-container h3 {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .centered-image img {
    max-width: 550px !important;
    height: auto;
  }

  /* .about-image img {
        width: 20% !important;
        height: auto;
    } */

  .about-image .mapwithlogo3 {
    max-width: 50% !important;
  }

  .content-container {
    margin-top: 1% !important;
  }

  .address-container p {
    font-size: 13px !important;
  }

  .about-image {
    text-align: center;
    align-items: start;
    display: flex;
    margin-top: 2% !important;
  }

  /* .about-image .panda {
    margin-left: 30% !important;
  } */

  .address-container {
    margin-top: 10px !important;
  }

  .centered-image3 img {
    max-width: 400px !important;
    height: auto;
    margin-top: -14% !important;
    margin-left: -17% !important;
  }

  .centered-image4 img {
    max-width: 420px !important;
    height: auto;
    margin-top: -5% !important;
    margin-left: 1% !important;
  }

  .centered-image5 img {
    max-width: 650px !important;
    height: auto;
    margin-top: -13% !important;
    margin-left: -29% !important;
  }

  .about-image .mapwithlogo {
    max-width: 100px !important;
  }

  .image-row1 img {
    width: 100%;
    max-width: 250px !important;
    height: auto;
  }

  .image-container1 p {
    font-size: 14px !important;
  }

  .image-row2 img {
    max-width: 150px !important;
    height: auto;
  }

  .image-container2 p {
    font-size: 13px !important;
  }

  .image-row2 .Keofitt2 {
    max-width: 80px !important;
    margin-top: 0% !important;
  }

  .image-row2 .delval2 {
    max-width: 90px !important;
    margin-top: -2% !important;
  }

  .clientheading {
    margin-top: 0% !important;
    font-size: 30px !important;
  }

  .image-row3 img {
    max-width: 150px !important;
    height: auto;
  }

  .image-container3 p {
    font-size: 13px !important;
  }

  .image-row3 .Keofitt3 {
    max-width: 40px !important;
    margin-top: 0% !important;
  }

  .image-row3 .delval3 {
    max-width: 50px !important;
    margin-top: -2% !important;
  }

  .container .image-row3 {
    gap: 20px !important;
  }

  .container .image-row2 {
    gap: 5px !important;
  }

  .carousel .list .item img {
    width: 50% !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .product-card img {
    width: 100% !important;
  }

  /* .header2 video {
        max-width: 920px !important;
    } */

  .title3-image {
    width: 100%;
    margin-top: -3%;
    margin-left: 28%;
  }

  .left-side video {
    max-width: 820px !important;
  }

  .part-one video {
    max-width: 800px !important;
  }

  .part-two video {
    max-width: 770px !important;
  }

  .centered-image img {
    width: 100%;
    max-width: 1300px !important;
    height: auto;
    margin-top: -5% !important;
    margin-left: -3% !important;
  }

  .centered-image6 img {
    width: 100%;
    max-width: 600px !important;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    margin-top: -15%;
    margin-left: -23% !important;
  }

  .leftheading1 {
    font-size: 28px;
  }

  .leftheading2 {
    font-size: 28px;
  }

  .carousel .list {
    max-width: 70% !important;
    top: 10%;
    left: 55% !important;
  }

  .carousel .list .item .introduce .title {
    font-size: 1.8em !important;
  }

  .carousel .list .item .introduce .topic {
    font-size: 1.5em !important;
  }

  .carousel .list .item .introduce .des {
    font-size: 0.8rem !important;
  }

  .carousel1 .list1 {
    max-width: 70% !important;
    top: 10%;
    left: 55% !important;
  }

  .carousel1 .list1 .item1 .introduce1 .title1 {
    font-size: 1.8em !important;
  }

  .carousel1 .list1 .item1 .introduce1 .topic1 {
    font-size: 1.5em !important;
  }

  .carousel1 .list1 .item1 .introduce1 .des1 {
    font-size: 0.8rem !important;
  }

  .carousel2 .list2 .item2 img {
    width: 50% !important;
    position: absolute;
    right: 0;
    top: 20% !important;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel2 .list2 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel2 .list2 .item2 .introduce2 .title2 {
    font-size: 1.8em !important;
  }

  .carousel2 .list2 .item2 .introduce2 .topic2 {
    font-size: 1.5em !important;
  }

  .carousel2 .list2 .item2 .introduce2 .des2 {
    font-size: 0.8rem !important;
  }

  .carousel3 .list3 .item3 img {
    width: 40% !important;
    position: absolute;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel3 .list3 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel3 .list3 .item3 .introduce3 .title3 {
    font-size: 1.8em !important;
  }

  .carousel3 .list3 .item3 .introduce3 .topic3 {
    font-size: 1.5em !important;
  }

  .carousel3 .list3 .item3 .introduce3 .des3 {
    font-size: 0.8rem !important;
  }


  .carousel4 .list4 .item4 img {
    width: 40% !important;
    position: absolute;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel4 .list4 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel4 .list4 .item4 .introduce4 .title4 {
    font-size: 1.8em !important;
  }

  .carousel4 .list4 .item4 .introduce4 .topic4 {
    font-size: 1.5em !important;
  }

  .carousel4 .list4 .item4 .introduce4 .des4 {
    font-size: 0.8rem !important;
  }

  .header2 h1 {
    font-size: 30px !important;
    margin-top: -10px;
  }

  .video-container {
    max-width: 700px !important;
  }

  .video-container1 {
    max-width: 484px !important;
  }

  .flex-container {
    margin-top: 1% !important;
    justify-content: center;
    gap: 7.5% !important;
  }

  .flex-container img {
    width: 70% !important;
    height: auto;
    margin: auto;

    object-fit: contain !important;
  }

  .p_and_a_about_image img {
    max-width: 150px !important;
    margin: 0 !important;
  }

  .typicaldilutephase {
    margin-top: 1% !important;
    font-size: 12px !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1300px) {
  .org-chart .sub-containers {
    height: 200px;
    width: 125px;
  }

}

@media screen and (min-width: 900px) and (max-width: 1380px) {
  nav {
    max-width: 1700px;
    padding-left: 5%;
    padding-right: 0%;
    margin-top: -1%;
  }


  .note2 {
    margin-top: unset !important;
  }

  .venting-images {
    margin-bottom: 2% !important;
  }

  .para2 {
    margin-top: -2rem;
  }

  .container {
    width: 100%;
    max-width: 1700px;
    height: 85vh;
    display: flex;
  }

  .social-links {
    display: flex;
    gap: 25px;
    justify-content: center;
    padding-top: 0;
    margin-right: 2%;
    margin-top: 2% !important;
  }

  .sign-up-btn {
    margin-top: 0px;
  }

  .slide-btn {
    bottom: 10%;
  }

  .group_of_companies {
    margin-top: 0 !important;
  }

  .centered-image1 {
    max-width: 590px !important;
    /* top: 35%;
        left: 20%;  */
  }

  .centered-image {
    max-width: 600px !important;
    /* top: 35%;
        left: 20%; */
  }

  .map-image {
    width: 80%;
    height: auto;
  }

  .mapgif {
    top: 82%;
    left: 16%;
    width: 7%;
    height: auto;
  }

  .airlocklogogif {
    top: 49%;
    left: 18%;
    width: 20%;
    height: auto;
  }

  .mapgif1 {
    top: 81%;
    left: 59%;
    width: 7%;
    height: auto;
  }

  .role1 {
    font-size: 18px;
  }

  .roleicon {
    width: 3%;
    height: auto;
  }

  .department-title1 {
    font-size: 22px;
    margin-bottom: 5%;
  }

  .companylogo1 {
    width: 13%;
    height: auto;
  }

  .companylogo2,
  .companylogo3 {
    width: 13%;
    height: auto;
  }

  .page35 {
    margin-top: 0;
  }

  .swiper-pagination-vertical.swiper-pagination-bullets,
  .swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 45% !important;
    transform: translate3d(0px, -50%, 0);
  }

  .page44content {
    margin-top: unset !important;
  }

  .productextent {
    width: 50%;
    margin-top: 0;
  }

  .header2 .title1 {
    font-size: 22px;
  }

  .header2 .title2 {
    font-size: 12px;
  }

  .header2 .title3 b {
    font-size: 10px;
  }

  .header2 .title3 {
    font-size: 10px;
  }

  .collageImage {
    width: 95% !important;
    height: auto;
  }

  .left-part h2,
  .right-part h2 {
    font-size: 12px;
  }

  .left-part ul li,
  .right-part ul li {
    font-size: 10px;
    margin: 5px;
  }

  ul.title3 li {
    margin: 10px;
  }

  .title3-image {
    width: 100%;
    margin-top: -3%;
  }

  .mainpartsimg {
    width: 45%;
  }

  .header2 p b {
    font-size: 10px;
  }

  .header1 .title1 {
    margin-top: -2%;
    font-size: 20px;
  }

  .activities1 li {
    font-size: 12px;
    text-align: left;
    line-height: 1.8;
  }

  .list-icon {
    width: 8%;
  }

  /* .saleslist1 .list-icon {
    width: 8.5%;
  } */

  .list-icon2 {
    width: 6.56%;
    height: auto;
    padding-right: 10px;
    align-items: flex-start;
    display: flex;
    justify-content: center;
    margin-top: 2% !important;
  }

  .role-container1 {
    margin-top: 2px;
  }

  .founder-image {
    width: 10%;
    height: auto;
  }

  h1 {
    font-size: 2rem;
    padding-left: 10%;
  }

  .header2 h1 {
    font-size: 20px !important;
  }

  p {
    font-size: 12px;
  }


  .responsive-table th,
  .responsive-table td {
    padding: 3px !important;
    text-align: left;
    border: 1px solid #ddd;
    font-size: 12px !important;
    align-items: center;
    justify-content: center;
  }

  .typicaldilutephase1 p {
    font-size: 14px !important;
  }

  .classification-box p {
    font-size: 12.8px !important;
  }

  .pneumatic-left p {
    font-size: 13px !important;
  }

  .image-row {
    gap: 0;
  }

  .image-box {
    text-align: center;
    width: 30%;
  }

  .image-box img {
    width: 65%;
    height: auto;
    margin-top: -10%;
  }

  .gallery-row {
    display: flex;
    justify-content: center;
    gap: 0px;
    width: 80%;
  }

  .left-section img {
    width: 70%;
    margin: 10 0 0 10%;
    margin-top: 18%;
  }

  .right-section img {
    width: 30%;
  }

  .left-section h2,
  .center-section h2,
  .right-section p {
    font-size: 14px;
  }

  .left-side img {
    width: 60%;
    margin-left: 20%;
  }

  .right-side h2 {
    font-size: 14px;
  }

  .right-side p {
    font-size: 12px;
  }

  .full-img {
    width: 30%;
    margin-top: -2%;
  }

  .full-img1 {
    width: 40%;
  }

  .part-one .text,
  .part-one1 .text,
  .part-two .text {
    font-size: 16px;
  }

  .left-section li,
  .center-section li,
  .right-section li {
    font-size: 12.6px;
    margin: 6.5px;
  }

  .swiper-slide:first-child {
    font-size: 60px;
  }

  /* .swiper-slide:nth-child(3) {
    font-size: 13px;
    line-height: 25px;
  } */

  .para2 {
    font-size: 12px;
    line-height: 22px;
  }

  .card {
    font-size: 20px;
  }

  .swiper-container {
    height: 500px;
    margin: auto;
    display: flex;
  }

  .swiper-container1 {
    height: 500px;
    margin: auto;
    display: flex;
  }

  .header2 .rotaryvalveleakage {
    max-width: 780px !important;
    margin-top: -4% !important;
  }

  .heading-container .ml3,
  .heading-container .ml4,
  .heading-container .ml5,
  .heading-container .ml6,
  .heading-container .ml7 {
    font-weight: 700;
    font-size: 24px;
    text-align: left;
    margin: 20px;
    margin-bottom: 0;
    margin-left: 0;
  }

  .left-section1 h2 {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: -5px !important;
  }

  .about-points li {
    font-size: 12px;
    margin-bottom: 5px !important;
  }

  .address-container h3 {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .page10-right-section {
    margin-top: 2% !important;
  }

  .left-img {
    bottom: 3% !important;
  }

  .centered-image img {
    max-width: 1000px !important;
    height: auto;
    margin-top: -1% !important;
  }

  .page-10-centered-img img {
    margin-top: -12% !important;
    margin-left: 0% !important;
  }

  .about-image img {
    /* width: 15% !important; */
    height: auto;
    margin-top: 10% !important;
  }

  .about-image .panda {
    margin-left: 30% !important;
  }

  .about-image .mapwithlogo3 {
    width: 100% !important;
    max-width: 200px !important;
    height: auto;
    align-items: start;
    justify-content: left;
    display: flex;
    margin-top: 13% !important;
    margin-bottom: 10px;
  }

  .content-container {
    margin-top: 1% !important;
  }

  .address-container p {
    font-size: 10px !important;
  }

  .about-image {
    text-align: center;
    margin-top: -50px !important;
    align-items: start;
    display: flex;
    padding: 0px;
  }

  .address-container {
    margin-top: -4px !important;
  }

  .centered-image6 img {
    width: 100%;
    max-width: 450px !important;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    margin-top: -15%;
    margin-left: 0% !important;
  }

  .centered-image3 img {
    max-width: 300px !important;
    height: auto;
    margin-top: -14% !important;
    margin-left: -17% !important;
  }

  .centered-image4 img {
    max-width: 450px !important;
    height: auto;
    margin-top: -5% !important;
    margin-left: -5% !important;
  }

  .centered-image5 img {
    max-width: 550px !important;
    height: auto;
    margin-top: -13% !important;
    margin-left: -26% !important;
  }

  .about-image .mapwithlogo {
    max-width: 70px !important;
  }

  .about-image .mapwithlogo1 {
    /* max-width: 90px !important; */
    padding: 5px;
  }

  .p_and_a_about_image img {
    max-width: 100px !important;
  }
/* 
  .saleslist1 .list-icon1 {
    width: 10% !important;
    height: auto;
  } */

  .image-row1 img {
    width: 100%;
    max-width: 250px !important;
    height: auto;
  }

  .image-container1 p {
    font-size: 14px !important;
  }

  .image-row2 img {
    max-width: 80px !important;
    height: auto;
  }

  .image-container2 p {
    font-size: 12px !important;
  }

  .image-row2 .Keofitt2 {
    max-width: 40px !important;
    margin-top: 0% !important;
  }

  .note {
    margin-top: -6% !important;
  }

  .note1 {
    margin-top: -7%;
  }

  .image-row2 .delval2 {
    max-width: 50px !important;
    margin-top: -2% !important;
  }

  .clientheading {
    margin-top: 0% !important;
    font-size: 24px !important;
    text-align: center !important;
  }

  .container .image-row1 {
    margin-top: 0% !important;
  }

  .image-row3 img {
    max-width: 80px !important;
    height: auto;
  }

  .image-container3 p {
    font-size: 12px !important;
  }

  .image-row3 .Keofitt3 {
    max-width: 40px !important;
    margin-top: 0% !important;
  }

  .image-row3 .delval3 {
    max-width: 50px !important;
    margin-top: -2% !important;
  }

  .container .image-row3 {
    gap: 40px !important;
  }

  .container .image-row2 {
    gap: 5px !important;
    margin-top: 0 !important;
  }

  .carousel .list .item img {
    width: 45% !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .product-card img {
    width: 80% !important;
  }

  /* .header2 video {
        max-width: 650px !important;
    } */

  .title3-image {
    width: 100%;
    margin-top: -3%;
    margin-left: 28%;
  }

  .left-side video {
    max-width: 600px !important;
  }

  .part-one video {
    max-width: 550px !important;
  }

  .part-two video {
    max-width: 500px !important;
  }

  .leftheading1 {
    font-size: 22px;
  }

  .leftheading2 {
    font-size: 22px;
  }

  .carousel .list {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel .list .item .introduce .title {
    font-size: 1.8em !important;
  }

  .carousel .list .item .introduce .topic {
    font-size: 1.5em !important;
  }

  .carousel .list .item .introduce .des {
    font-size: 0.8rem !important;
  }

  .carousel1 .list1 .item1 img {
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .item3 img {
    width: 40% !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel1 .list1 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel1 .list1 .item1 .introduce1 .title1 {
    font-size: 1.8em !important;
  }

  .carousel1 .list1 .item1 .introduce1 .topic1 {
    font-size: 1.5em !important;
  }

  .carousel1 .list1 .item1 .introduce1 .des1 {
    font-size: 0.8rem !important;
  }

  .carousel2 .list2 .item2 img {
    width: 50% !important;
    position: absolute;
    right: 0;
    top: 20% !important;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel2 .list2 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel2 .list2 .item2 .introduce2 .title2 {
    font-size: 1.8em !important;
  }

  .carousel2 .list2 .item2 .introduce2 .topic2 {
    font-size: 1.5em !important;
  }

  .carousel2 .list2 .item2 .introduce2 .des2 {
    font-size: 0.8rem !important;
  }


  .carousel3 .list3 .item3 img {
    width: 40% !important;
    position: absolute;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel3 .list3 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel3 .list3 .item3 .introduce3 .title3 {
    font-size: 1.8em !important;
  }

  .carousel3 .list3 .item3 .introduce3 .topic3 {
    font-size: 1.5em !important;
  }

  .carousel3 .list3 .item3 .introduce3 .des3 {
    font-size: 0.8rem !important;
  }

  .carousel4 .list4 .item4 img {
    width: 40% !important;
    position: absolute;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%);
    transition: right 1.5s;
  }

  .carousel4 .list4 {
    max-width: 70% !important;
    top: 10%;
  }

  .carousel4 .list4 .item4 .introduce4 .title4 {
    font-size: 1.8em !important;
  }

  .carousel4 .list4 .item4 .introduce4 .topic4 {
    font-size: 1.5em !important;
  }

  .carousel4 .list4 .item4 .introduce4 .des4 {
    font-size: 0.8rem !important;
  }

  .split-section {
    display: flex;
    justify-content: space-between;
    margin-top: 0% !important;
  }

  /* .video-container {
        max-width: 630px !important;
    } */

  .video-container1 {
    max-width: 450px !important;
  }

  .title11 {
    font-size: 20px !important;
  }

  .header21 {
    padding-left: 10% !important;
    padding-right: 0% !important;
  }

  .header21 .title21 {
    font-size: 16px !important;
  }

  .title31 {
    font-size: 12px !important;
    line-height: 2 !important;
  }

  .left-content1 li {
    margin-bottom: 10px;
    font-size: 13px !important;
    text-align: justify;
  }



  ul.title31 li {
    width: 100%;
  }

  .ventingrotary {
    margin-top: 2% !important;
    width: unset !important;
  }

  h2.title21 {
    margin-top: 2% !important;
  }

  .flex-container {
    margin-top: 1% !important;
    justify-content: space-around;
    gap: 10% !important;
  }

  .flex-container img {
    width: 30% !important;
    height: auto;
    object-fit: contain !important;
  }

  .typicaldilutephase {
    font-size: 12px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    margin-top: 1% !important;
  }

  .video-container {
    max-width: 550px !important;
  }

  .flex-container img {
    width: 80% !important;
    height: auto;
    object-fit: contain !important;
  }

}

@media screen and (min-width: 769px) and (max-width: 999px) {


  .map-image {
    width: 120%;
    height: auto;
  }

  .mapgif {
    top: 96%;
    left: -1%;
    width: 10%;
    height: auto;
  }

  .mapgif1 {
    top: 100%;
    left: 62%;
    width: 10%;
    height: auto;
  }

  .role1 {
    font-size: 36px;
  }

  .department-title1 {
    font-size: 30px;
  }

  .companylogo1 {
    width: 25%;
    height: auto;
  }

  .companylogo2,
  .companylogo3 {
    width: 25%;
    height: auto;
  }

  .header1 .title1 {
    margin-top: 4%;
  }

  .activities1 li {
    font-size: 17px;
  }

  .list-icon {
    width: 7%;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
    height: auto;
  }

  nav {
    flex-direction: column;
    align-items: center;
  }

  .logo img {
    width: 100px;
  }

  .slider-container {
    height: auto;
  }

  .slider-item {
    min-width: 100%;
    height: auto;
  }

  .card {
    width: 100%;
  }

  .sign-up-btn {
    font-size: 1rem;
  }

  h1 {
    font-size: 2rem;
  }

  p {
    padding-left: 5%;
  }

  .map-container {
    height: 250px;
  }

  .mapgif {
    bottom: 0;
    top: 80%;
    left: 5%;
    width: 12%;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
    padding-left: 0;
  }

  p {
    font-size: 0.9rem;
    padding-left: 0;
  }

  .container {
    padding: 10px;
    height: auto;
    margin-bottom: 20px;
  }

  .social-links {
    gap: 10px;
  }

  .left-content,
  .right-content {
    flex: 1 1 100%;
  }

  .map-container {
    height: 200px;
  }

  .mapgif {
    width: 15%;
  }
}



/* ---------------------------------- Page 5  --------------------------------------- */

/* Main content container */
.content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  gap: 150px;
  margin-left: 10%;
}

.content-container1 {
  width: 100% !important;
}

.page10-content-container {
  margin-top: 35px;
  align-items: flex-start;
}

/* Left Section */
.left-section1 {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.left-section2 {
  width: 100%;
}

.left-section1 h2,
.left-section2 h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.about-points {
  list-style-type: none;
  padding: 0;
}

.about-points li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  opacity: 0;
}

.about-points li img {
  margin-right: 10px;
  width: 3%;
  height: auto;
  animation: moveArrow 1s infinite alternate ease-in-out;
  margin-top: 1%;
}

.top-head {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

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

  100% {
    transform: translateX(10px);
    /* Adjust the distance as needed */
  }
}

.about-image {
  text-align: center;
  margin-top: -60px;
  gap: 20px;
  opacity: 0;
}

.about-image img {
  width: 20%;
  height: auto;
  align-items: start;
  display: flex;
  padding: 0;
  margin: 0;
}

.p_and_a_about_image img {
  width: 100% !important;
  max-width: 250px;
  margin: 2em 0;
}

@media screen and (min-width: 1800px) {
  /* .p_and_a_about_image img {
    margin: 5em 0;
  } */
}

.address-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  opacity: 0;
}

.address-container .office,
.address-container .factory,
.office2,
.office5 {
  width: 100%;
}

.office5 {
  margin-top: 10%;
}

.address-container .office1,
.address-container .factory1 {
  width: 60%;
}

.address-container h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0px;
}

.address-container p {
  font-size: 14px;
}

/* Right Section */
.right-section {
  width: 48%;

}


/* Fade in and roll from right */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(300px) rotateX(20deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotateX(0deg);
  }
}

/* Fade in one by one for left items */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }

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



.fade-in-right {
  animation: fadeInRight 1.5s ease forwards;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}




/* .right-section :nth-child(2){
  text-align: center;
} */

.page6-right-section,
.page10-right-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: unset !important;
}

.page10-right-section {
  margin-top: 5% !important;
}

.page-6-centered-img,
.page-10-centered-img {
  transform: unset !important;
  left: unset !important;
  top: unset !important;
}

.centered-image img {
  width: 70%;
  max-width: 1800px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;
  /* position: absolute;
    /* margin-top: -27%; */
  /* margin-left: -32%; */
}

.centered-image3 img {
  width: 100%;
  max-width: 600px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;

  margin-top: -30% !important;
  margin-left: -20%;
}

.centered-image33 img {
  width: 64%;
  max-width: 600px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: -3%;
  margin-left: 10%;
}

.centered-image4 img {
  width: 100%;
  max-width: 650px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: absolute;
  margin-top: -3%;
  margin-left: -2%;
}

.centered-image5 img {
  width: 100%;
  max-width: 800px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: absolute;
  margin-top: -13%;
  margin-left: -28%;
}

.centered-image6 img {
  width: 100%;
  max-width: 700px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: absolute;
  margin-top: -16% !important;
  margin-left: -10% !important;
}

.centered-image66 img {
  position: absolute;
  width: 50%;
  height: auto;
  right: 10%;
  bottom: 12%;
}

.centered-image7 {
  position: absolute;
  width: 20%;
  height: auto;
  right: 19%;
  bottom: 9%;
}

.centered-image9 img {
  width: 70%;
  max-width: 700px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: auto;

  margin-top: -20%;
  margin-left: -1%;
}

.about-image .mapwithlogo {
  width: 100%;
  max-width: 150px;
  height: auto;
  align-items: start;
  justify-content: left;
  display: flex;
  margin-top: 5%;
}

.about-image .mapwithlogo1 {
  width: 25%;
  /* max-width: 200px; */
  height: auto;
  align-items: start;
  justify-content: left;
  display: flex;
  margin-top: 5%;
}

.about-image .mapwithlogo3 {
  width: 30%;
  /* max-width: 300px; */
  height: auto;
  align-items: start;
  justify-content: left;
  display: flex;
  margin-top: 5%;
  margin-bottom: 10px;
  /* opacity: 0; */
}

.about-image .panda {
  margin-left: 0% !important;
}

@media screen and (min-width:1800px) and (min-height:910px) {
  .page68 li {
    border-radius: 8px;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 5px;
  }

  .basic-construction .right-section img {
    width: 26%;
    height: auto;
    margin-top: -16px;
  }

  .basic-construction .right-section ul {
    padding-top: 0%;
  }

  .right-section ul {
    padding-top: 9%;
  }

  .right-section li {
    font-size: 16px !important;
    margin: 5px 0 !important;
  }

  .right-section img {
    width: 60%;
    height: auto;
    margin-top: -16px;
  }

  .left-section img {
    width: 65%;
    max-width: 450px;
    height: auto;
    margin-top: 10px;
  }

  .page7 .centered-image3 img {
    width: 65%;
    max-width: 600px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: -30% !important;
    margin-left: -5%;
  }

  .page11 .centered-image4 img {
    width: 100%;
    max-width: 600px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    margin-top: -6%;
    margin-left: -2%;
  }

  .page8 .about-image {
    text-align: center;
    margin-top: -19px;
    gap: 20px;
  }

  .org-chart .sub-containers {
    height: 210px;
    width: 187px;
  }

}

/* Animations */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

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

.ml3,
.ml4,
.ml5,
.ml6,
.ml7 {
  font-weight: 700;
  font-size: 2em;
  text-align: left;
  margin: 20px;
  margin-bottom: 0;
  color: #00008b;
  margin-left: 0;
  text-transform: uppercase;
}

.pandalogo {
  width: 35% !important;
  margin: 2em 0;
  margin-bottom: 15%;
}

/* 
.p_and_a_about_image {
    margin-top: 15% !important;
} */

/* --------------------------- Page 11  ------------------------- */

.clientheading {
  text-align: center;
  margin: 0px;
  padding: 30px;
  color: #00008b;
  padding-top: 0;
  text-transform: uppercase;
}

.container .image-row1 {
  /* display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; */
  /* gap: 5%; */
  /* margin-top: 4%; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: center;
  align-items: center;
  justify-items: center;
}

.image-container1 {
  text-align: center;
  margin-top: 1.5em;
}

.image-row1 img {
  width: 100%;
  max-width: 150px;
  /* Control max image size */
  height: auto;
}

.image-container1 p {
  margin-top: -20%;
  font-weight: 600;
  color: #000;
  font-size: 24px;
  margin-left: 0;
  padding-left: 0;
}

.image-row1 .Keofitt {
  max-width: 200px;
  /* margin-top: 27%; */
}

.image-small {
  max-width: 80px !important;
}

.second-cards-container {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.image-container-rap-engineering-consulatant {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 1.5em;
}

.image-container-rap-engineering-consulatant p {
  padding-left: 0 !important;
  font-weight: 600;
  font-size: 25px;
}

.image-container-rap-engineering-consulatant img {
  max-width: 180px;
  width: 100%;
}

.top-space {
  margin-top: -6%;
}

.third-cards-container {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.image-container-valveco {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 5em;
}

.image-container-valveco p {
  padding-left: 0 !important;
  font-weight: 600;
  font-size: 25px;
}

.image-container-valveco img {
  max-width: 200px;
  width: 100%;
}

/* ------------------------------ Page 12 -------------------------- */

.image-row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

/* .image-row2 .image-container2:last-child {
    grid-column: span 4;
} */

.image-container2 {
  text-align: center;
}

.image-row2 img {
  width: 100%;
  max-width: 150px;
  height: auto;
}

.image-container2 p {
  margin-top: 10px;
  font-weight: 600;
  color: #000;
  font-size: 20px;
  margin-left: 0;
  padding-left: 0;
}

.image-row2 .Keofitt2 {
  max-width: 80px;
  margin-top: 10%;
}

.image-row2 .delval2 {
  max-width: 100px;
  margin-top: -2%;
}

/* ------------------------  page 13 ------------------ */

.container .image-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: auto;
  margin-bottom: auto;
  align-items: center;
  justify-content: center;
}

.image-container3 {
  text-align: center;
}

.image-row3 img {
  width: 100%;
  max-width: 150px;
  /* Control max image size */
  height: auto;
}

.image-container3 p {
  margin-top: 10px;
  font-weight: 600;
  color: #000;
  font-size: 20px;
  margin-left: 0;
  padding-left: 0;
}

/* ------------------------------------  Page 17     ----------------------------------------- */

.flex-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 5%;
}

.pressureConveyContainer {
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  margin: auto;
  display: flex;
}

.pressureConveyContainer .typicaldilutephase {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: auto;
}

.pressureConveyContainer .typicaldilutephase1 {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;
  justify-content: center;
  align-items: center;
  line-height: 80px;
}


.typicaldilutephase1 p {
  line-height: 2.1;
  font-size: 16px;
  text-align: justify;
}

/* .pressureConveyContainer .typicaldilutephase {
    flex: 1;
} */

.pressureConveyContainer .video-container {
  flex: 4;
}

/* 
.pressureConveyContainer img {
    flex: 1;
} */

.pressureMainContainer {
  padding: 0 1% !important;
  display: flex;
  flex-direction: column;
}

.pressureMainContainer p {
  padding-left: 0 !important;
}

.flex-container img {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  /* margin: 20px auto; */
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container video {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.magnifier {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #000;
  border-radius: 50%;
  overflow: hidden;
  display: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.magnifier video {
  position: absolute;
  /* width: 200%;
    height: 200%; */
  /* left: -20%; */
}

.typicaldilutephase {
  font-size: 18px;
  font-family: "Poppins";
  color: #000000;
  margin-top: 2%;
  text-align: justify;
}

@media screen and (min-width: 1900px) {
  .typicaldilutephase {
    padding-left: 5% !important;
  }
}

/* ------------------------------------  Page 18     ----------------------------------------- */

.video-container1, .video-container2 {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 5px auto;
  overflow: hidden;
  border-radius: 10px;
}

.video-container1 video{
  width: 100%;
  border-radius: 10px;
  display: block;
}

.video-container2 > img {
  width: 100%;
  border-radius: 10px;
  display: block;
}


.magnifier1,.magnifier2 {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #000;
  border-radius: 50%;
  overflow: hidden;
  display: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.magnifier1 video{
  position: absolute;
  width: 200%;
  height: 200%;
}

.magnifier2 img {
  position: absolute;
  width: 200%;
  height: 200%;
  pointer-events: none;
}


/* ----------------------------------------   Page 15    -------------------------------------------- */

:root {
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-filter: blur(15px);
  --item1-zIndex: 11;
  --item1-opacity: 0;

  --item2-transform: translateX(0);
  --item2-filter: blur(0px);
  --item2-zIndex: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%, 10%) scale(0.8);
  --item3-filter: blur(5px);
  --item3-zIndex: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%, 20%) scale(0.5);
  --item4-filter: blur(10px);
  --item4-zIndex: 8;
  --item4-opacity: 1;

  --item5-transform: translate(120%, 30%) scale(0.3);
  --item5-filter: blur(15px);
  --item5-zIndex: 7;
  --item5-opacity: 0;
}

.carousel {
  position: relative;
  height: 800px;
  overflow: hidden;
  margin-top: -50px;
}

.carousel .list {
  position: absolute;
  width: 1140px;
  max-width: 90%;
  height: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel .list .item {
  position: absolute;
  left: 0%;
  width: 70%;
  height: 100%;
  font-size: 15px;
  transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.carousel .list .item:nth-child(n + 6) {
  opacity: 0;
}

.carousel .list .item:nth-child(2) {
  z-index: 10;
  transform: translateX(0);
}

.carousel .list .item img {
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: right 1.5s;
}

.carousel .list .item .introduce {
  opacity: 0;
  pointer-events: none;
  margin-left: -20%;
}

.carousel .list .item:nth-child(2) .introduce {
  opacity: 1;
  pointer-events: auto;
  width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s;
}

.carousel .list .item .introduce .title {
  font-size: 2.5em;
  font-weight: 700;
  line-height: 3rem;
}

.carousel .list .item .introduce .topic {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 3rem;
}

.carousel .list .item .introduce .des {
  font-size: small;
  line-height: 1rem;
  color: #5559;
  text-align: justify;
}

.carousel .list .item .introduce .seeMore {
  font-family: Poppins;
  margin-top: 1.2em;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #555;
  background-color: transparent;
  font-weight: bold;
  letter-spacing: 3px;
  transition: background 0.5s;
}

.carousel .list .item .introduce .seeMore:hover {
  background: #eee;
}

.carousel .list .item:nth-child(1) {
  transform: var(--item1-transform);
  filter: var(--item1-filter);
  z-index: var(--item1-zIndex);
  opacity: var(--item1-opacity);
  pointer-events: none;
}

.carousel .list .item:nth-child(3) {
  transform: var(--item3-transform);
  filter: var(--item3-filter);
  z-index: var(--item3-zIndex);
}

.carousel .list .item:nth-child(4) {
  transform: var(--item4-transform);
  filter: var(--item4-filter);
  z-index: var(--item4-zIndex);
}

.carousel .list .item:nth-child(5) {
  transform: var(--item5-transform);
  filter: var(--item5-filter);
  opacity: var(--item5-opacity);
  pointer-events: none;
}

/* animation text in item2 */
.carousel .list .item:nth-child(2) .introduce .title,
.carousel .list .item:nth-child(2) .introduce .topic,
.carousel .list .item:nth-child(2) .introduce .des,
.carousel .list .item:nth-child(2) .introduce .seeMore {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  from {
    transform: translateY(-30px);
    filter: blur(10px);
  }

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

.carousel .list .item:nth-child(2) .introduce .topic {
  animation-delay: 1.2s;
}

.carousel .list .item:nth-child(2) .introduce .des {
  animation-delay: 1.4s;
}

.carousel .list .item:nth-child(2) .introduce .seeMore {
  animation-delay: 1.6s;
}

/* next click */
.carousel.next .item:nth-child(1) {
  animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
  from {
    transform: var(--item2-transform);
    filter: var(--item2-filter);
    opacity: var(--item2-opacity);
  }
}

.carousel.next .item:nth-child(2) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
  from {
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    opacity: var(--item3-opacity);
  }
}

.carousel.next .item:nth-child(3) {
  animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
  from {
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    opacity: var(--item4-opacity);
  }
}

.carousel.next .item:nth-child(4) {
  animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
  from {
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
  }
}

/* previous */
.carousel.prev .list .item:nth-child(5) {
  animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.carousel.prev .list .item:nth-child(4) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

.carousel.prev .list .item:nth-child(3) {
  animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}

.carousel.prev .list .item:nth-child(2) {
  animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
  from {
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    opacity: var(--item1-opacity);
  }
}

/* detail  */
.carousel .list .item .detail {
  opacity: 0;
  pointer-events: none;
}

/* showDetail */
.carousel.showDetail .list .item:nth-child(3),
.carousel.showDetail .list .item:nth-child(4) {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.carousel.showDetail .list .item:nth-child(2) {
  width: 100%;
}

.carousel.showDetail .list .item:nth-child(2) .introduce {
  opacity: 0;
  pointer-events: none;
}

.carousel.showDetail .list .item:nth-child(2) img {
  right: 50%;
}

.carousel.showDetail .list .item:nth-child(2) .detail {
  opacity: 1;
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: auto;
}

.carousel.showDetail .list .item:nth-child(2) .detail .title {
  font-size: 4em;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications {
  display: flex;
  gap: 10px;
  width: 100%;
  border-top: 1px solid #5553;
  margin-top: 20px;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications div {
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1) {
  font-weight: bold;
}

.carousel.carousel.showDetail .list .item:nth-child(2) .checkout button {
  font-family: Poppins;
  background-color: transparent;
  border: 1px solid #5555;
  margin-left: 5px;
  padding: 5px 10px;
  letter-spacing: 2px;
  font-weight: 500;
}

.carousel.carousel.showDetail .list .item:nth-child(2) .checkout button:nth-child(2) {
  background-color: #693eff;
  color: #eee;
}

.carousel.showDetail .list .item:nth-child(2) .detail .title,
.carousel.showDetail .list .item:nth-child(2) .detail .des,
.carousel.showDetail .list .item:nth-child(2) .detail .specifications,
.carousel.showDetail .list .item:nth-child(2) .detail .checkout {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

.carousel.showDetail .list .item:nth-child(2) .detail .des {
  animation-delay: 1.2s;
}

.carousel.showDetail .list .item:nth-child(2) .detail .specifications {
  animation-delay: 1.4s;
}

.carousel.showDetail .list .item:nth-child(2) .detail .checkout {
  animation-delay: 1.6s;
}

.arrows {
  position: absolute;
  bottom: 10px;
  width: 1140px;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
}

#prev,
#next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: monospace;
  border: 1px solid #5555;
  font-size: large;
  bottom: 20%;
  left: 10%;
}

#next {
  left: unset;
  right: 10%;
}

#back {
  position: absolute;
  z-index: 100;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-bottom: 1px solid #555;
  font-family: Poppins;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: transparent;
  padding: 10px;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

.carousel.showDetail #back {
  opacity: 1;
}

.carousel.showDetail #prev,
.carousel.showDetail #next {
  opacity: 0;
  pointer-events: none;
}

.carousel::before {
  width: 500px;
  height: 300px;
  content: "";
  background-image: linear-gradient(70deg, #dc422a, blue);
  position: absolute;
  z-index: -1;
  border-radius: 20% 30% 80% 10%;
  filter: blur(150px);
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  transition: 1s;
}

.carousel.showDetail::before {
  transform: translate(-100%, -50%) rotate(90deg);
  filter: blur(130px);
}

/* ----------------------------------------   Page 21    -------------------------------------------- */

:root {
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-filter: blur(15px);
  --item1-zIndex: 11;
  --item1-opacity: 0;

  --item2-transform: translateX(0);
  --item2-filter: blur(0px);
  --item2-zIndex: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%, 10%) scale(0.8);
  --item3-filter: blur(5px);
  --item3-zIndex: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%, 20%) scale(0.5);
  --item4-filter: blur(10px);
  --item4-zIndex: 8;
  --item4-opacity: 1;

  --item5-transform: translate(120%, 30%) scale(0.3);
  --item5-filter: blur(15px);
  --item5-zIndex: 7;
  --item5-opacity: 0;
}

.carousel1 {
  position: relative;
  height: 800px;
  overflow: hidden;
  margin-top: -50px;
}

.carousel1 .list1 {
  position: absolute;
  width: 1140px;
  max-width: 90%;
  height: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel1 .list1 .item1 {
  position: absolute;
  left: 0%;
  width: 70%;
  height: 100%;
  font-size: 15px;
  transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.carousel1 .list1 .item1:nth-child(n + 6) {
  opacity: 0;
}

.carousel1 .list1 .item1:nth-child(2) {
  z-index: 10;
  transform: translateX(0);
}

.carousel1 .list1 .item1 img {
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* transition: right 1.5s; */
}

.item3 img,
.item4 img {
  width: 40% !important;
  position: absolute;
  right: 0;
  top: 50% !important;
  transform: translateY(-50%);
  transition: right 1.5s;
}

.carousel1 .list1 .item1 .introduce1 {
  opacity: 0;
  pointer-events: none;
  margin-left: -20%;
}

.carousel1 .list1 .item1:nth-child(2) .introduce1 {
  opacity: 1;
  pointer-events: auto;
  width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s;
}

.carousel1 .list1 .item1 .introduce1 .title1 {
  font-size: 27px;
  font-weight: 700;
  line-height: 3rem;
}

.carousel1 .list1 .item1 .introduce1 .topic1 {
  font-size: 25px;
  font-weight: 500;
  line-height: 3rem;
}

.carousel1 .list1 .item1 .introduce1 .des1 {
  font-size: small;
  line-height: 1rem;
  color: #5559;
  text-align: justify;
}

.carousel1 .list1 .item1 .introduce1 .seeMore1 {
  font-family: Poppins;
  margin-top: 1.2em;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #555;
  background-color: transparent;
  font-weight: bold;
  letter-spacing: 3px;
  transition: background 0.5s;
}

.carousel1 .list1 .item1 .introduce1 .seeMore1:hover {
  background: #eee;
}

.carousel1 .list1 .item1:nth-child(1) {
  transform: var(--item1-transform);
  filter: var(--item1-filter);
  z-index: var(--item1-zIndex);
  opacity: var(--item1-opacity);
  pointer-events: none;
}

.carousel1 .list1 .item1:nth-child(3) {
  transform: var(--item3-transform);
  filter: var(--item3-filter);
  z-index: var(--item3-zIndex);
}

.carousel1 .list1 .item1:nth-child(4) {
  transform: var(--item4-transform);
  filter: var(--item4-filter);
  z-index: var(--item4-zIndex);
}

.carousel1 .list1 .item1:nth-child(5) {
  transform: var(--item5-transform);
  filter: var(--item5-filter);
  opacity: var(--item5-opacity);
  pointer-events: none;
}

/* animation text in item2 */
.carousel1 .list1 .item1:nth-child(2) .introduce1 .title1,
.carousel1 .list1 .item1:nth-child(2) .introduce1 .topic1,
.carousel1 .list1 .item1:nth-child(2) .introduce1 .des1,
.carousel1 .list1 .item1:nth-child(2) .introduce1 .seeMore1 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  from {
    transform: translateY(-30px);
    filter: blur(10px);
  }

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

.carousel1 .list1 .item1:nth-child(2) .introduce1 .topic1 {
  animation-delay: 1.2s;
}

.carousel1 .list1 .item1:nth-child(2) .introduce1 .des1 {
  animation-delay: 1.4s;
}

.carousel1 .list1 .item1:nth-child(2) .introduce1 .seeMore1 {
  animation-delay: 1.6s;
}

/* next click */
.carousel1.next1 .item1:nth-child(1) {
  animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
  from {
    transform: var(--item2-transform);
    filter: var(--item2-filter);
    opacity: var(--item2-opacity);
  }
}

.carousel1.next1 .item1:nth-child(2) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
  from {
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    opacity: var(--item3-opacity);
  }
}

.carousel1.next1 .item1:nth-child(3) {
  animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
  from {
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    opacity: var(--item4-opacity);
  }
}

.carousel1.next1 .item1:nth-child(4) {
  animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
  from {
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
  }
}

/* previous */
.carousel1.prev1 .list1 .item1:nth-child(5) {
  animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.carousel1.prev1 .list1 .item1:nth-child(4) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

.carousel1.prev1 .list1 .item1:nth-child(3) {
  animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}

.carousel1.prev1 .list1 .item1:nth-child(2) {
  animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
  from {
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    opacity: var(--item1-opacity);
  }
}

/* detail  */
.carousel1 .list1 .item1 .detail1 {
  opacity: 0;
  pointer-events: none;
}

/* showDetail */
.carousel1.showDetail1 .list1 .item1:nth-child(3),
.carousel1.showDetail1 .list1 .item1:nth-child(4) {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) {
  width: 100%;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .introduce1 {
  opacity: 0;
  pointer-events: none;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) img {
  right: 50%;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 {
  opacity: 1;
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: auto;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .title1 {
  font-size: 4em;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .specifications1 {
  display: flex;
  gap: 10px;
  width: 100%;
  border-top: 1px solid #5553;
  margin-top: 20px;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .specifications1 div {
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .specifications1 div p:nth-child(1) {
  font-weight: bold;
}

.carousel1.carousel1.showDetail1 .list1 .item1:nth-child(2) .checkout1 button {
  font-family: Poppins;
  background-color: transparent;
  border: 1px solid #5555;
  margin-left: 5px;
  padding: 5px 10px;
  letter-spacing: 2px;
  font-weight: 500;
}

.carousel1.carousel1.showDetail1 .list1 .item1:nth-child(2) .checkout1 button:nth-child(2) {
  background-color: #693eff;
  color: #eee;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .title1,
.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .des1,
.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .specifications1,
.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .checkout1 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .des1 {
  animation-delay: 1.2s;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .specifications1 {
  animation-delay: 1.4s;
}

.carousel1.showDetail1 .list1 .item1:nth-child(2) .detail1 .checkout1 {
  animation-delay: 1.6s;
}

.arrows1 {
  position: absolute;
  bottom: 10px;
  width: 1140px;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
}

#prev1,
#next1 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: monospace;
  border: 1px solid #5555;
  font-size: large;
  bottom: 20%;
  left: 10%;
}

#next1 {
  left: unset;
  right: 10%;
}

#back1 {
  position: absolute;
  z-index: 100;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-bottom: 1px solid #555;
  font-family: Poppins;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: transparent;
  padding: 10px;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

#prev2,
#next2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: monospace;
  border: 1px solid #5555;
  font-size: large;
  bottom: 20%;
  left: 10%;
}

#next2 {
  left: unset;
  right: 10%;
}

#back2 {
  position: absolute;
  z-index: 100;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-bottom: 1px solid #555;
  font-family: Poppins;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: transparent;
  padding: 10px;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

.carousel1.showDetail1 #back1 {
  opacity: 1;
}

.carousel1.showDetail1 #prev1,
.carousel1.showDetail1 #next1 {
  opacity: 0;
  pointer-events: none;
}

.carousel1::before {
  width: 500px;
  height: 300px;
  content: "";
  background-image: linear-gradient(70deg, #dc422a, blue);
  position: absolute;
  z-index: -1;
  border-radius: 20% 30% 80% 10%;
  filter: blur(150px);
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  transition: 1s;
}

.carousel1.showDetail1::before {
  transform: translate(-100%, -50%) rotate(90deg);
  filter: blur(130px);
}

/* ----------------------------------------   Page 22   -------------------------------------------- */

:root {
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-filter: blur(15px);
  --item1-zIndex: 11;
  --item1-opacity: 0;

  --item2-transform: translateX(0);
  --item2-filter: blur(0px);
  --item2-zIndex: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%, 10%) scale(0.8);
  --item3-filter: blur(5px);
  --item3-zIndex: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%, 20%) scale(0.5);
  --item4-filter: blur(10px);
  --item4-zIndex: 8;
  --item4-opacity: 1;

  --item5-transform: translate(120%, 30%) scale(0.3);
  --item5-filter: blur(15px);
  --item5-zIndex: 7;
  --item5-opacity: 0;
}

.carousel2 {
  position: relative;
  height: 800px;
  overflow: hidden;
  margin-top: -50px;
}

.carousel2 .list2 {
  position: absolute;
  width: 1140px;
  max-width: 90%;
  height: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel2 .list2 .item2 {
  position: absolute;
  left: 0%;
  width: 70%;
  height: 100%;
  font-size: 15px;
  transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.carousel2 .list2 .item2:nth-child(n + 6) {
  opacity: 0;
}

.carousel2 .list2 .item2:nth-child(2) {
  z-index: 10;
  transform: translateX(0);
}

.carousel2 .list2 .item2 img {
  width: 60%;
  position: absolute;
  right: 0;
  top: 30%;
  transform: translateY(-50%);
  transition: right 1.5s;
}

.carousel2 .list2 .item2 .introduce2 {
  opacity: 0;
  pointer-events: none;
  margin-left: -20%;
}

.carousel2 .list2 .item2:nth-child(2) .introduce2 {
  opacity: 1;
  pointer-events: auto;
  width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s;
}

.carousel2 .list2 .item2 .introduce2 .title2 {
  font-size: 27px;
  font-weight: 700;
  line-height: 3rem;
}

.carousel2 .list2 .item2 .introduce2 .topic2 {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 3rem;
}

.carousel2 .list2 .item2 .introduce2 .des2 {
  font-size: small;
  line-height: 1rem;
  color: #5559;
  text-align: justify;
}

.carousel2 .list2 .item2 .introduce2 .seeMore2 {
  font-family: Poppins;
  margin-top: 1.2em;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #555;
  background-color: transparent;
  font-weight: bold;
  letter-spacing: 3px;
  transition: background 0.5s;
}

.carousel2 .list2 .item2 .introduce2 .seeMore2:hover {
  background: #eee;
}

.carousel2 .list2 .item2:nth-child(1) {
  transform: var(--item1-transform);
  filter: var(--item1-filter);
  z-index: var(--item1-zIndex);
  opacity: var(--item1-opacity);
  pointer-events: none;
}

.carousel2 .list2 .item2:nth-child(3) {
  transform: var(--item3-transform);
  filter: var(--item3-filter);
  z-index: var(--item3-zIndex);
}

.carousel2 .list2 .item2:nth-child(4) {
  transform: var(--item4-transform);
  filter: var(--item4-filter);
  z-index: var(--item4-zIndex);
}

.carousel2 .list2 .item2:nth-child(5) {
  transform: var(--item5-transform);
  filter: var(--item5-filter);
  opacity: var(--item5-opacity);
  pointer-events: none;
}

/* animation text in item2 */
.carousel2 .list2 .item2:nth-child(2) .introduce2 .title2,
.carousel2 .list2 .item2:nth-child(2) .introduce2 .topic2,
.carousel2 .list2 .item2:nth-child(2) .introduce2 .des2,
.carousel2 .list2 .item2:nth-child(2) .introduce2 .seeMore2 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  from {
    transform: translateY(-30px);
    filter: blur(10px);
  }

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

.carousel2 .list2 .item2:nth-child(2) .introduce2 .topic {
  animation-delay: 1.2s;
}

.carousel2 .list2 .item2:nth-child(2) .introduce2 .des2 {
  animation-delay: 1.4s;
}

.carousel2 .list2 .item2:nth-child(2) .introduce2 .seeMore2 {
  animation-delay: 1.6s;
}

/* next click */
.carousel2.next2 .item2:nth-child(1) {
  animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
  from {
    transform: var(--item2-transform);
    filter: var(--item2-filter);
    opacity: var(--item2-opacity);
  }
}

.carousel2.next2 .item2:nth-child(2) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
  from {
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    opacity: var(--item3-opacity);
  }
}

.carousel2.next2 .item2:nth-child(3) {
  animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
  from {
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    opacity: var(--item4-opacity);
  }
}

.carousel2.next2 .item2:nth-child(4) {
  animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
  from {
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
  }
}

/* previous */
.carousel2.prev2 .list2 .item2:nth-child(5) {
  animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.carousel2.prev2 .list2 .item2:nth-child(4) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

.carousel2.prev2 .list2 .item2:nth-child(3) {
  animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}

.carousel2.prev2 .list2 .item2:nth-child(2) {
  animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
  from {
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    opacity: var(--item1-opacity);
  }
}

/* detail  */
.carousel2 .list2 .item2 .detail2 {
  opacity: 0;
  pointer-events: none;
}

/* showDetail */
.carousel2.showDetail2 .list2 .item2:nth-child(3),
.carousel2.showDetail2 .list2 .item2:nth-child(4) {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) {
  width: 100%;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .introduce2 {
  opacity: 0;
  pointer-events: none;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) img {
  right: 50%;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 {
  opacity: 1;
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: auto;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .title2 {
  font-size: 4em;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .specifications2 {
  display: flex;
  gap: 10px;
  width: 100%;
  border-top: 1px solid #5553;
  margin-top: 20px;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .specifications2 div {
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .specifications2 div p:nth-child(1) {
  font-weight: bold;
}

.carousel2.carousel2.showDetail2 .list2 .item2:nth-child(2) .checkout2 button {
  font-family: Poppins;
  background-color: transparent;
  border: 1px solid #5555;
  margin-left: 5px;
  padding: 5px 10px;
  letter-spacing: 2px;
  font-weight: 500;
}

.carousel2.carousel2.showDetail2 .list2 .item2:nth-child(2) .checkout2 button:nth-child(2) {
  background-color: #693eff;
  color: #eee;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .title2,
.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .des2,
.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .specifications2,
.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .checkout2 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .des2 {
  animation-delay: 1.2s;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .specifications2 {
  animation-delay: 1.4s;
}

.carousel2.showDetail2 .list2 .item2:nth-child(2) .detail2 .checkout2 {
  animation-delay: 1.6s;
}

.arrows2 {
  position: absolute;
  bottom: 10px;
  width: 1140px;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
}

#prev2,
#next2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: monospace;
  border: 1px solid #5555;
  font-size: large;
  bottom: 20%;
  left: 10%;
}

#next2 {
  left: unset;
  right: 10%;
}

#back2 {
  position: absolute;
  z-index: 100;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-bottom: 1px solid #555;
  font-family: Poppins;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: transparent;
  padding: 10px;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

.carousel2.showDetail2 #back2 {
  opacity: 1;
}

.carousel2.showDetail2 #prev2,
.carousel2.showDetail2 #next2 {
  opacity: 0;
  pointer-events: none;
}

.carousel2::before {
  width: 500px;
  height: 300px;
  content: "";
  background-image: linear-gradient(70deg, #dc422a, blue);
  position: absolute;
  z-index: -1;
  border-radius: 20% 30% 80% 10%;
  filter: blur(150px);
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  transition: 1s;
}

.carousel2.showDetail2::before {
  transform: translate(-100%, -50%) rotate(90deg);
  filter: blur(130px);
}





:root {
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-filter: blur(15px);
  --item1-zIndex: 11;
  --item1-opacity: 0;

  --item2-transform: translateX(0);
  --item2-filter: blur(0px);
  --item2-zIndex: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%, 10%) scale(0.8);
  --item3-filter: blur(5px);
  --item3-zIndex: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%, 20%) scale(0.5);
  --item4-filter: blur(10px);
  --item4-zIndex: 8;
  --item4-opacity: 1;

  --item5-transform: translate(120%, 30%) scale(0.3);
  --item5-filter: blur(15px);
  --item5-zIndex: 7;
  --item5-opacity: 0;
}

.carousel3 {
  position: relative;
  height: 800px;
  overflow: hidden;
  margin-top: -50px;
}

.carousel3 .list3 {
  position: absolute;
  width: 1140px;
  max-width: 90%;
  height: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel3 .list3 .item3 {
  position: absolute;
  left: 0%;
  width: 70%;
  height: 100%;
  font-size: 15px;
  transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.carousel3 .list3 .item3:nth-child(n + 6) {
  opacity: 0;
}

.carousel3 .list3 .item3:nth-child(2) {
  z-index: 10;
  transform: translateX(0);
}

.carousel3 .list3 .item3 img {
  width: 40%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: right 1.5s;
}

.carousel3 .list3 .item3 .introduce3 {
  opacity: 0;
  pointer-events: none;
  margin-left: -20%;
}

.carousel3 .list3 .item3:nth-child(2) .introduce3 {
  opacity: 1;
  pointer-events: auto;
  width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s;
}

.carousel3 .list3 .item3 .introduce3 .title3 {
  font-size: 27px;
  font-weight: 700;
  line-height: 3rem;
}

.carousel3 .list3 .item3 .introduce3 .topic3 {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 3rem;
}

.carousel3 .list3 .item3 .introduce3 .des3 {
  font-size: small;
  line-height: 1rem;
  color: #5559;
  text-align: justify;
}

.carousel3 .list3 .item3 .introduce3 .seeMore3 {
  font-family: Poppins;
  margin-top: 1.2em;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #555;
  background-color: transparent;
  font-weight: bold;
  letter-spacing: 3px;
  transition: background 0.5s;
}

.carousel3 .list3 .item3 .introduce3 .seeMore3:hover {
  background: #eee;
}

.carousel3 .list3 .item3:nth-child(1) {
  transform: var(--item1-transform);
  filter: var(--item1-filter);
  z-index: var(--item1-zIndex);
  opacity: var(--item1-opacity);
  pointer-events: none;
}

.carousel3 .list3 .item3:nth-child(3) {
  transform: var(--item3-transform);
  filter: var(--item3-filter);
  z-index: var(--item3-zIndex);
}

.carousel3 .list3 .item3:nth-child(4) {
  transform: var(--item4-transform);
  filter: var(--item4-filter);
  z-index: var(--item4-zIndex);
}

.carousel3 .list3 .item3:nth-child(5) {
  transform: var(--item5-transform);
  filter: var(--item5-filter);
  opacity: var(--item5-opacity);
  pointer-events: none;
}

/* animation text in item2 */
.carousel3 .list3 .item3:nth-child(2) .introduce3 .title3,
.carousel3 .list3 .item3:nth-child(2) .introduce3 .topic3,
.carousel3 .list3 .item3:nth-child(2) .introduce3 .des3,
.carousel3 .list3 .item3:nth-child(2) .introduce3 .seeMore3 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  from {
    transform: translateY(-30px);
    filter: blur(10px);
  }

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

.carousel3 .list3 .item3:nth-child(2) .introduce3 .topic3 {
  animation-delay: 1.2s;
}

.carousel3 .list3 .item3:nth-child(2) .introduce3 .des3 {
  animation-delay: 1.4s;
}

.carousel3 .list3 .item3:nth-child(2) .introduce3 .seeMore3 {
  animation-delay: 1.6s;
}

/* next click */
.carousel3.next3 .item3:nth-child(1) {
  animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
  from {
    transform: var(--item2-transform);
    filter: var(--item2-filter);
    opacity: var(--item2-opacity);
  }
}

.carousel3.next3 .item3:nth-child(2) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
  from {
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    opacity: var(--item3-opacity);
  }
}

.carousel3.next3 .item3:nth-child(3) {
  animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
  from {
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    opacity: var(--item4-opacity);
  }
}

.carousel3.next3 .item3:nth-child(4) {
  animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
  from {
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
  }
}

/* previous */
.carousel3.prev3 .list3 .item3:nth-child(5) {
  animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.carousel3.prev3 .list3 .item3:nth-child(4) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

.carousel3.prev3 .list3 .item3:nth-child(3) {
  animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}

.carousel3.prev3 .list3 .item3:nth-child(2) {
  animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
  from {
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    opacity: var(--item1-opacity);
  }
}

/* detail  */
.carousel3 .list3 .item3 .detail3 {
  opacity: 0;
  pointer-events: none;
}

/* showDetail */
.carousel3.showDetail3 .list3 .item3:nth-child(3),
.carousel3.showDetail3 .list3 .item3:nth-child(4) {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) {
  width: 100%;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .introduce3 {
  opacity: 0;
  pointer-events: none;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) img {
  right: 50%;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 {
  opacity: 1;
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: auto;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .title3 {
  font-size: 4em;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .specifications3 {
  display: flex;
  gap: 10px;
  width: 100%;
  border-top: 1px solid #5553;
  margin-top: 20px;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .specifications3 div {
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .specifications3 div p:nth-child(1) {
  font-weight: bold;
}

.carousel3.carousel3.showDetail3 .list3 .item3:nth-child(2) .checkout3 button {
  font-family: Poppins;
  background-color: transparent;
  border: 1px solid #5555;
  margin-left: 5px;
  padding: 5px 10px;
  letter-spacing: 2px;
  font-weight: 500;
}

.carousel3.carousel3.showDetail3 .list3 .item3:nth-child(2) .checkout3 button:nth-child(2) {
  background-color: #693eff;
  color: #eee;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .title3,
.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .des3,
.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .specifications3,
.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .checkout3 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .des3 {
  animation-delay: 1.2s;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .specifications3 {
  animation-delay: 1.4s;
}

.carousel3.showDetail3 .list3 .item3:nth-child(2) .detail3 .checkout3 {
  animation-delay: 1.6s;
}

.arrows3 {
  position: absolute;
  bottom: 10px;
  width: 1140px;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
}

#prev3,
#next3 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: monospace;
  border: 1px solid #5555;
  font-size: large;
  bottom: 20%;
  left: 10%;
}

#next3 {
  left: unset;
  right: 10%;
}

#back3 {
  position: absolute;
  z-index: 100;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-bottom: 1px solid #555;
  font-family: Poppins;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: transparent;
  padding: 10px;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

.carousel3.showDetail3 #back3 {
  opacity: 1;
}

.carousel3.showDetail3 #prev3,
.carousel3.showDetail3 #next3 {
  opacity: 0;
  pointer-events: none;
}

.carousel3::before {
  width: 500px;
  height: 300px;
  content: "";
  background-image: linear-gradient(70deg, #dc422a, blue);
  position: absolute;
  z-index: -1;
  border-radius: 20% 30% 80% 10%;
  filter: blur(150px);
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  transition: 1s;
}

.carousel3.showDetail3::before {
  transform: translate(-100%, -50%) rotate(90deg);
  filter: blur(130px);
}


/* -----------------------------    Page number    ------------------------- */

.page-number {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  color: #fefefed4;
  border: none;
}

#pageInput {
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  /* Darker semi-transparent background */
  backdrop-filter: blur(10px);
  /* Glass blur effect */
  border-radius: 8px;
  /* Optional rounded corners */
  padding: 5px 10px;
  /* Add some padding for better appearance */
  border: none;
  color: white;
  /* Make the text color stand out against the darker background */
}

/****************************************************************************** page 17 new swiper carousel *******************************************************/

.relative-class {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.product-swiper-title {
  padding: 0 !important;
}

.glide-card {
  position: relative;
  /* background-color: #fff; */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 0 15px;
  text-align: center;
  transition: transform 0.3s ease;
  cursor: grab;
  height: 450px !important;
  width: 350px !important;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease-in-out;
}

.pageNo {
  position: absolute;
  top: 2%;
  right: 2%;
  border-radius: 50%;
  border: 1.5px solid black;
  /* padding: 4px 12px; */
  width: 25px;
  height: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glide__slide {
  scale: 0.85;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}

.glide__slide--active {
  scale: 1;
  opacity: 1;
}

@media screen and (max-width: 1600px) {
  .glide-card {
    scale: 0.85;
  }
}

@media screen and (max-width: 1400px) {
  .glide__slide {
    scale: 0.8;
  }

  .glide__slide--active {
    scale: 0.85;
  }

  .product-swiper-title {
    padding-bottom: 0 !important;
  }
}

.glide-card:focus {
  cursor: grabbing;
}

.glide-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 10px;
}

.glide-card-title {
  font-size: 20px !important;
  margin-top: 15px;
  font-weight: bold;
}

.glide-card-content {
  font-size: 14px !important;
  color: #555;
  margin-top: 10px;
}

/* -----------------------------  Page 16 (new)  ------------------ */

.circle-carousel {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.circle-carousel-controls {
  z-index: 4;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  border: none;
  background-color: none;
}

.circle-carousel-controls.previous {
  left: 0;
  background: black;
  background: radial-gradient(circle,
      rgba(0, 0, 0, 0.137) 19%,
      rgba(0, 0, 0, 0) 100%);
}

.circle-carousel-controls.next {
  right: 0;
  background: black;
  background: radial-gradient(circle,
      rgba(0, 0, 0, 0.137) 19%,
      rgba(0, 0, 0, 0) 100%);
}

.circle-carousel-card {
  position: absolute;
  height: clamp(360px, 110vw, 430px);
  width: clamp(250px, 85vw, 330px);
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: 1;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

.circle-carousel-card.transition {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.circle-carousel-card.active {
  -webkit-transform: scale(1, 1) translateX(0);
  transform: scale(1, 1) translateX(0);
  z-index: 3;
}

.circle-carousel-card.left {
  -webkit-transform: translateX(calc(-100% - 25px)) scale(0.75, 0.75);
  transform: translateX(calc(-100% - 25px)) scale(0.75, 0.75);
  z-index: 2;
}

.circle-carousel-card.right {
  -webkit-transform: translateX(calc(100% + 25px)) scale(0.75, 0.75);
  transform: translateX(calc(100% + 25px)) scale(0.75, 0.75);
  z-index: 2;
}

.circle-carousel-card.to-back-left:not(.transition) {
  -webkit-animation: toBackFromLeft 0.5s forwards;
  animation: toBackFromLeft 0.5s forwards;
}

.circle-carousel-card.to-back-right:not(.transition) {
  -webkit-animation: toBackFromRight 0.5s forwards;
  animation: toBackFromRight 0.5s forwards;
}

.circle-carousel-card.to-front-left:not(.transition) {
  -webkit-animation: toFrontFromLeft 0.5s forwards;
  animation: toFrontFromLeft 0.5s forwards;
}

.circle-carousel-card.to-front-right:not(.transition) {
  -webkit-animation: toFrontFromRight 0.5s forwards;
  animation: toFrontFromRight 0.5s forwards;
}

@-webkit-keyframes toFrontFromLeft {
  from {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(-50% - 25px));
    transform: translateX(calc(-50% - 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 3;
  }
}

@keyframes toFrontFromLeft {
  from {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(-50% - 25px));
    transform: translateX(calc(-50% - 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 3;
  }
}

@-webkit-keyframes toFrontFromRight {
  from {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(50% + 25px));
    transform: translateX(calc(50% + 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 3;
  }
}

@keyframes toFrontFromRight {
  from {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(50% + 25px));
    transform: translateX(calc(50% + 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 3;
  }
}

@-webkit-keyframes toBackFromLeft {
  from {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(-50% - 25px));
    transform: translateX(calc(-50% - 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 3;
  }
}

@keyframes toBackFromLeft {
  from {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(-50% - 25px));
    transform: translateX(calc(-50% - 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 3;
  }
}

@-webkit-keyframes toBackFromRight {
  from {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(50% + 25px));
    transform: translateX(calc(50% + 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 3;
  }
}

@keyframes toBackFromRight {
  from {
    -webkit-transform: translateX(0) scale(1, 1);
    transform: translateX(0) scale(1, 1);
    z-index: 1;
  }

  50% {
    -webkit-transform: translateX(calc(50% + 25px));
    transform: translateX(calc(50% + 25px));
    z-index: 2;
  }

  to {
    -webkit-transform: translateX(0) scale(0.5, 0.5);
    transform: translateX(0) scale(0.5, 0.5);
    z-index: 3;
  }
}

/* ------------------------- Page 0  --------------------------------- */

.content1 {
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
}

.content1 p {
  color: #00008b;
  font-size: 75px;
  font-family: "Poppins";
  font-weight: 600;
  animation: titleAnimation ease 5s infinite;
  text-transform: uppercase;
  padding: 0 !important;
}

@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%);
  }

  10% {
    transform: translateY(0);
    opacity: 1;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%);
  }

  85% {
    transform: translateY(0);
    opacity: 1;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%);
  }

  100% {
    transform: translateY(50px);
    opacity: 0;
    clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
}


/* ---------------------------- page 27  ----------------------------- */

.page-flex-container {
  display: flex;
  align-items: center;
}

.header21 {
  text-align: left;
  margin-bottom: 0px;
  position: relative;
  /* margin: auto; */
  padding-right: 6%;
  padding-left: 9%;
  flex: 2;
}

.header21 h1 {
  display: flex;
  color: rgb(0, 0, 139);
  font-size: 40px;
  font-weight: 600;
  margin: auto;
  text-align: center;
  padding: 10px;
  justify-content: center;
}

.title11 {
  color: #00008b;
  font-size: 40px;
  font-weight: 600;
  /* margin: auto; */
  text-align: center !important;
  width: 100%;
  padding: 0;
  text-transform: uppercase;
}

.header21 .title21 {
  color: #303030;
  font-size: 22px;
  font-weight: 550;
  margin: auto;
  text-align: justify;
  padding: 0;
  font-style: normal;
}

.header21 p b {
  color: #00008b;
  font-size: 16px;
  font-weight: 550;
  margin: auto;
  text-align: left;
  padding: 0;
  font-style: normal;
}

.header21 .title31 {
  color: #333;
  font-size: 13px;
  font-weight: 400;
  margin: auto;
  text-align: left;
  padding: 5px;
  line-height: 2;
}

.header21 .title31 b {
  color: #000;
  font-weight: 600;
  font-style: normal;
}

.header21 .title31 ul li {
  color: #000;
  font-weight: 500;
}

.row1 {
  /* display: flex;
    justify-content: flex-end;
    align-items: center; */
  flex: 1;
  /* padding-left: 6%;
    padding-right: 6%; */
  /* margin-top: auto;
    margin-bottom: auto; */
}

.ventingrotary {
  width: 90%;
  text-align: left;
  /* margin-top: 3%; */
}

.title-21-types {
  /* margin-top: 5% !important; */
}

.image-center1 {
  /* width: 25%; */
  display: flex;
  justify-content: center;
  /* position: absolute; */
  /* bottom: auto; */
  /* top: 35%; */
}

.image-center1 img {
  max-width: 90%;
  height: auto;
  object-fit: contain;
}

ul.title31 {
  list-style: none;
  padding-left: 20px;
}

ul.title31 li {
  position: relative;
  padding-left: 30px;
}

ul.title31 li::before {
  content: "";
  background: url("./images/arrow-right_15100183.png") no-repeat center center;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -1%;
  top: 49%;
  transform: translateY(-50%);
  gap: 10px;
  list-style-type: none;
  transform: translateY(-50%);
  animation: shakeX 4s infinite linear;
}

@keyframes shakeX {
  0% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-10px); }
  100% { transform: translateY(-50%) translateX(0); }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-list li {
  opacity: 0;
}


/* ---------------------------     Page 28    ------------------------ */

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: center;
}

.image-item {
  text-align: center;
  /* Center the content */
}

.image-item img {
  width: 100%;
  height: auto;
  max-width: 300px;
  /* Adjust max width as necessary */
}

.image-item p {
  margin-top: 10px;
  font-size: 14px;
}

/* ---------------------------     Page 37   ------------------------ */

.image-grid1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 3 columns */
  grid-template-rows: repeat(4, auto);
  /* 4 rows */
  gap: 20px;
  /* Space between grid items */
  margin-top: 20px;
  /* Add some space above */
}

.image-item1 {
  text-align: center;
  /* Center the content */
}

.image-item1 img {
  width: 100%;
  height: auto;
  max-width: 300px;
  /* Adjust max width as necessary */
}

.image-item1 p {
  margin-top: 10px;
  font-size: 14px;
}

/* ----------- Product page ------------ */

.clear {
  clear: both;
}

img {
  max-width: 100%;
  border: 0px;
}

ul,
ol {
  /* list-style: none; */
}

a {
  text-decoration: none;
  color: inherit;
  outline: none;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

a:focus,
a:active,
a:visited,
a:hover {
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #e73700;
}

h2 {
  margin-bottom: 13px;
  /* padding-bottom: 16px; */
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  position: relative;
  text-transform: capitalize;
}

h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 36px;
}

button {
  outline: none !important;
}

/******* Common Element CSS End *********/

/* -------- title style ------- */
.line-title {
  position: relative;
  width: 400px;
}

.line-title::before,
.line-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
}

.line-title::before {
  width: 100%;
  background: #f2f2f2;
}

.line-title::after {
  width: 32px;
  background: #e73700;
}

/******* Middle section CSS Start ******/
/* -------- Landing page ------- */
.game-section {
  padding: 60px 50px;
}

.game-section .owl-stage {
  margin: 15px 0;
  display: flex;
  display: -webkit-flex;
}

.game-section .item {
  margin: 0 15px 60px;
  width: 320px;
  height: 400px;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  background: no-repeat center center / cover;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.game-section .item.active {
  width: 500px;
  /* box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); */
  /* -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); */
}

.game-section .item:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); */
}

.game-section .item-desc {
  padding: 0 24px 12px;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(calc(100% - 54px));
  -webkit-transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.game-section .item.active .item-desc {
  transform: none;
  -webkit-transform: none;
}

.game-section .item-desc p {
  opacity: 0;
  -webkit-transform: translateY(32px);
  transform: translateY(32px);
  transition: all 0.4s ease-in-out 0.2s;
  -webkit-transition: all 0.4s ease-in-out 0.2s;
}

.game-section .item.active .item-desc p {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.game-section .owl-theme.custom-carousel .owl-dots {
  margin-top: -20px;
  position: relative;
  z-index: 5;
}

/******** Middle section CSS End *******/

/***** responsive css Start ******/

@media (min-width: 992px) and (max-width: 1199px) {
  h2 {
    margin-bottom: 32px;
  }

  h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 50px 30px;
  }

  .game-section .item {
    margin: 0 12px 60px;
    width: 260px;
    height: 360px;
  }

  .game-section .item.active {
    width: 400px;
  }

  .game-section .item-desc {
    transform: translateY(calc(100% - 46px));
    -webkit-transform: translateY(calc(100% - 46px));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  h2 {
    margin-bottom: 32px;
  }

  h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }

  .line-title {
    width: 330px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 50px 30px 40px;
  }

  .game-section .item {
    margin: 0 12px 60px;
    width: 240px;
    height: 330px;
  }

  .game-section .item.active {
    width: 360px;
  }

  .game-section .item-desc {
    transform: translateY(calc(100% - 42px));
    -webkit-transform: translateY(calc(100% - 42px));
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  h2 {
    margin-bottom: 20px;
  }

  h3 {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 24px;
  }

  .line-title {
    width: 250px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 30px 15px 20px;
  }

  .game-section .item {
    margin: 0 10px 40px;
    width: 200px;
    height: 280px;
  }

  .game-section .item.active {
    width: 270px;
    box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
  }

  .game-section .item-desc {
    padding: 0 14px 5px;
    transform: translateY(calc(100% - 42px));
    -webkit-transform: translateY(calc(100% - 42px));
  }
}

/* @media screen and (min-width: 1600px) and (max-width: 1900px){
    .p_and_a_about_image img {
        max-width: 100px !important;
    }
} */

.important-content {
  font-weight: 600;
}

/*  popup content for product list */

.logo-img-product {
  cursor: pointer;
}

.popup {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.popup-header {
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: none;
}

.popupHeader {
  font-size: 1.5rem;
  margin-bottom: 10px;
  padding-left: 0 !important;
  color: #00008b;
  font-weight: 600;
}

.popup ul {
  list-style-type: disc !important;
}

.popup-products {
  list-style-type: none;
  padding-left: 0;
  max-height: 500px;
  overflow-y: auto;
}

.popup-products li {
  margin: 5px 0;
}

/* Close button styles */
.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  border: none;
  padding: 5px 8px;
  cursor: pointer;
}

/* Overlay to darken the background when popup is shown */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

/* ---------------------------------  Logos    -------------------------------------------- */

.company-section {
  text-align: center;
  padding: 0px 0px;
  width: 100%;
  height: 90%;
}

.company-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 0px;
  color: #00008b;
  text-transform: uppercase;
  padding-top: 10px;
}

.company-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 5%;
  height: 80%;
  row-gap: 10px;
  width: 100% !;
}

.company-gallery1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 5%;
  height: 80%;
  row-gap: 10px;
  width: 100%;
}

.company-gallery2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 5%;
  height: 80%;
  row-gap: 10px;
  width: 100%;
}

.company-gallery3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 5%;
  height: 80%;
  row-gap: 10px;
  width: 100%;
}

.company-gallery4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 5%;
  height: 80%;
  row-gap: 10px;
  width: 100%;
}

.company-item {
  display: flex;
  flex-direction: column;
  width: 22%;
  height: 24% !important;
  position: relative;
  align-items: center;
  opacity: 0;
}

.company-item div {
  height: 60% !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */

}

.company-item p {
  position: absolute !important;
  bottom: 0 !important;
  text-align: center;
  margin: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  font-size: medium;
  font-weight: 600;
}

.company-item img {
  width: 40%;
  transition: transform 0.3s ease-in-out;
  /* Smooth animation */
}

.company-item img:hover {
  transform: scale(1.3);
}



@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }

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


.animate-left {
  animation: slideInLeft 0.8s ease-out forwards;
}

.animate-right {
  animation: slideInRight 0.8s ease-out forwards;
}

.animate-left,
.animate-right {
  backface-visibility: hidden;
  will-change: transform, opacity;
}


@keyframes heading {
  0% {
    top: -50px;
  }

  100% {
    top: 200px;
  }
}

.bounce {
  animation-name: bounce-heading;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  text-align: center;
  text-transform: uppercase;
}

@keyframes bounce-heading {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

.right_left {
  width: 84%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: end;
  margin-top: -1.8rem;
  line-height: 0;
}

.right_right {
  width: 16%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 14px;
}

.right_left img {
  width: 24%;
  height: auto;
  margin: 5px;
}


.right_left> :first-child {
  width: 24%;
  height: 24%;
}

.right_left> :nth-child(2) {
  width: 34%;
  height: 29%;
}

.right_left> :nth-child(3) {
  width: 22%;
  height: 29%;
}

.right_left> :nth-child(4) {
  width: 26%;
  height: 29%;
}

.right_left> :nth-child(5) {
  width: 42%;
  height: 30%;
}

.right_left> :nth-child(6) {
  width: 23%;
  height: 27%;
}

.right_left> :nth-child(7) {
  width: 25%;
  height: 25%;
}

.right_left> :nth-child(8) {
  width: 33%;
  height: 26%;
}

.right_left> :nth-child(9) {
  width: 26%;
  height: 24%;
}

.right_right img {
  width: 87%;
  height: 27%;
}

.right_left img,
.right_right img {
  transform: scale(0.5);
  /* Start smaller */
  opacity: 0;
  /* Initially hidden */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Apply scale and fade-in effect after delay */
.right_left img.animate:nth-child(1) {
  transition-delay: 0.35s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(2) {
  transition-delay: 0.70s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(3) {
  transition-delay: 1.05s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(4) {
  transition-delay: 3.15s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(5) {
  transition-delay: 3.50s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(6) {
  transition-delay: 3.85s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(7) {
  transition-delay: 2.80s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(8) {
  transition-delay: 2.45s;
  transform: scale(1);
  opacity: 1;
}

.right_left img.animate:nth-child(9) {
  transition-delay: 2.10s;
  transform: scale(1);
  opacity: 1;
}

.right_right img.animate:nth-child(1) {
  transition-delay: 1.40s;
  transform: scale(1);
  opacity: 1;
}

.right_right img.animate:nth-child(2) {
  transition-delay: 1.75s;
  transform: scale(1);
  opacity: 1;
}

@media screen and (max-height: 750px) and (min-height: 650px) {
  .parentslide .left3 {
    width: 100%;
    height: 100%;
  }

  .swiper-container {
    width: 100%;
    height: 80%;
    overflow: hidden;
    position: relative;
    margin: auto;
  }

  .para2 {
    margin-top: -5% !important;
  }

  .right-sections div>:first-child {
    font-size: 16px !important;
    font-weight: 600;
  }

  .right-sections div>:nth-child(2) {
    font-size: 14px !important;

  }

  .org-chart .user-outer-container {
    border-radius: 10px;
    width: 160px;
  }

  .org-chart .user .name {
    font-size: 12px !important;

    color: #000;
    height: 22%;
  }

  .org-chart .user .role {
    font-weight: 600;
    margin-bottom: 0px !important;
    margin-top: 10px;
    font-size: 11px;
    color: #00008b;
    line-height: 2;
  }

  .org-chart .user {
    padding: 10px 0 0 0 !important;
  }

  .org-chart .sub-containers {
    height: 160px;
    width: 180px;
  }

  .para2 {
    font-size: 16p !important;
    line-height: 23px;
    margin-top: -2rem;
    padding: 0 40px;
  }

  .activities1 li {

    font-size: 16px;

  }
/* 
  .saleslist1 .list-icon {
    width: 7%;
  }

  .saleslist1 .list-icon1 {
    width: 7.4%;

  } */


  .list-icon2 {
    width: 5% !important;
    margin-top: 2%;
  }


  .left-section1 h2,
  .left-section2 h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px !important;
  }


  .heading-container .ml2,
  .heading-container .ml3,
  .heading-container .ml4,
  .heading-container .ml5,
  .heading-container .ml6,
  .heading-container .ml7 {
    font-weight: 700;
    font-size: 30px;
    text-align: left;
    margin: -12px;

  }

  .about-image img {
    width: 20%;
    height: auto;
    align-items: start;
    display: flex;
    padding: 0;
    margin-top: -20px;
  }

  .address-container .office1,
  .address-container .factory1 {
    margin-top: -42px;
  }

  .address-container .office,
  .office5 {
    margin-top: 5px;
  }

  .centered-image7 {
    position: absolute;
    width: 20%;
    height: auto;
    right: 19%;
    bottom: 2%;
  }

  .about-image {
    text-align: center;
    align-items: start;
    display: flex;
    margin-top: 5% !important;
  }

  .centered-image6 img {
    width: 30%;
    max-width: 700px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    margin-top: -13% !important;
    margin-left: -4% !important;
  }

  .centered-image9 img {
    width: 60%;
    max-width: 700px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: -12% !important;
    margin-left: 1% !important;
  }

}

@media screen and (max-height: 750px) and (min-height: 650px) and (max-width:1490px) {
  .org-chart .user-outer-container {
    border-radius: 10px;
    width: 140px;
  }

  .org-chart .user .name {
    font-size: 10px !important;

    color: #000;
    height: 22%;
  }

  .org-chart .user .role {
    font-weight: 600;
    margin-bottom: 0px !important;
    margin-top: 10px;
    font-size: 11px;
    color: #00008b;
    line-height: 2;
  }

  .org-chart .user {
    padding: 10px 0 0 0 !important;
  }

  .org-chart .sub-containers {
    height: 140px;
    width: 150px;
  }

  .company_associated {
    width: 100%;
    background: #dc0b07a4;
    margin: 0 !important;
    padding: 5px !important;
    color: white;
    font-size: 9px !important;
    position: absolute;
    height: 30%;
    text-align: center;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* .saleslist1 .list-icon1 {
    width: 6.5%;

  }

  .saleslist1 .list-icon {
    width: 8%;
  } */


  .list-icon2 {
    width: 6.4% !important;
    margin-top: 2%;
  }

  .left-section1 h2,
  .left-section2 h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0px !important;
  }


  .heading-container .ml2,
  .heading-container .ml3,
  .heading-container .ml4,
  .heading-container .ml5,
  .heading-container .ml6,
  .heading-container .ml7 {
    font-weight: 700;
    font-size: 25px;
    text-align: left;
    margin: 0px;
    margin-top: 10px;
  }

  .about-image img {
    width: 23% !important;
    height: auto;
    align-items: start;
    display: flex;
    padding: 0;
    margin-top: 27px !important;
  }

  .centered-image7 {
    position: absolute;
    width: 20%;
    height: auto;
    right: 19%;
    bottom: 2%;
  }

  .about-points li {
    font-size: 11px;
    margin-bottom: 5px !important;
  }

  .about-points li img {
    margin-right: 10px;
    width: 3%;
    height: auto;
    animation: moveArrow 1s infinite alternate ease-in-out;
    margin-top: 1%;
  }

  .left-section1 h2,
  .left-section2 h2 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 1rem;
  }

  .about-image {
    text-align: center;
    align-items: start;
    display: flex;
    margin-top: -7% !important;
  }

  h2 {
    margin-bottom: 10px !important;
    padding-bottom: 16px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    position: relative;
    text-transform: capitalize;
  }

  .about-image .mapwithlogo1 {
    width: 30%;
    /* max-width: 200px; */
    height: auto;
    align-items: start;
    justify-content: left;
    display: flex;
    margin-top: 13% !important;
  }

  .address-container .office5 {
    margin-top: 30px;
  }

  .about-image .mapwithlogo3 {
    width: 100%;
    max-width: 300px;
    height: auto;
    align-items: start;
    justify-content: left;
    display: flex;
    margin-top: 15% !important;
    margin-bottom: 10px;
  }

  .right .about-image img {
    margin-top: 0px !important;
  }

  .address-container .office1,
  .address-container .factory1 {
    margin-top: -5px;
  }
}

@media screen and (max-height: 750px) and (min-height: 650px) and (max-width:1500px) and (min-width:1400px) {

  .address-container .office1,
  .address-container .factory1 {
    margin-top: -40px;
  }
}


@media screen and (max-height: 750px) and (min-height: 650px) and (max-width:1200px) {
  .org-chart .user-outer-container {
    border-radius: 10px;
    width: 140px;
  }

  .org-chart .user .name {
    font-size: 10px !important;

    color: #000;
    height: 22%;
  }

  .org-chart .user .role {
    font-weight: 600;
    margin-bottom: 0px !important;
    margin-top: 10px;
    font-size: 11px;
    color: #00008b;
    line-height: 2;
  }

  .org-chart .user {
    padding: 10px 0 0 0 !important;
  }

  .org-chart .sub-containers {
    height: 140px;
    width: 150px;
  }

  .company_associated {
    width: 100%;
    background: #dc0b07a4;
    margin: 0 !important;
    padding: 1px !important;
    color: white;
    font-size: 9px !important;
    position: absolute;
    height: 30%;
    text-align: center;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .org-chart .sub-containers {
    height: 150px;
    width: 127px;
  }

  .centered-image9 img {
    width: 68%;
    max-width: 700px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: -1% !important;
    margin-left: -45% !important;
  }

  .about-points li img {
    margin-right: 10px;
    width: 3%;
    height: auto;
    animation: moveArrow 1s infinite alternate ease-in-out;
    margin-top: 1%;
  }

  .right .about-image img {
    margin-top: -1px !important;
  }

  .department-title1 {
    font-size: 22px;
    margin-bottom: 7%;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

@keyframes dropInTop {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }

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

.typicaldilutephase {
  animation: slideInLeft 1s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

.video-container {
  animation: dropInTop 1s ease forwards;
  animation-delay: 1.6s;
  opacity: 0;
}

@media screen and (max-height: 650px) and (min-height: 550px) and (max-width:1220px) {

  .left-section li,
  .center-section li,
  .right-section li {
    font-size: 10.6px !important;
    margin: 6.5px;
  }
}

@media screen and (max-height: 650px) and (min-height: 550px) {
  .page5-content {

    font-size: 15.4px;

  }

  .page-4-outer-container {
    scale: 0.8;
    margin-top: -24px;
  }

  .org-chart li {
    padding: 20px 2px !important;
    margin-right: 0.9em !important;
  }

  .right .about-image img {
    margin-top: 25px !important;
  }

  .left .about-image img {
    margin-top: 22px !important;
  }

  .address-container .office1,
  .address-container .factory1 {
    margin-top: 22px !important;
  }


  .parent> :first-child {
    position: relative;
    width: 100%;
    padding: 0rem;
  }

  .parent> :nth-child(2) {
    position: relative;
    width: 100%;
    padding: 0rem;
  }

  .left-section2 h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .about-image img {
    /* width: 15% !important; */
    height: auto;
    margin-top: 11% !important;
  }

  .centered-image66 img {
    position: absolute;
    width: 50%;
    height: auto;
    right: 9%;
    bottom: 4%;
  }

  .centered-image7 {
    position: absolute;
    width: 17%;
    height: auto;
    right: 19%;
    bottom: -1%;
  }

  .saleslist1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    top: 21%;
    position: absolute;
    left: 20%;
    gap: 30px;

  }

  .departments1 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 7px;
    position: relative;
    /* margin-top: 2%; */
  }

  .activities1 {
    list-style: none;
    padding: 10px;
    border-radius: 4px;
    padding-left: 26%;
    padding-top: 0;
  }

  .saleslist1 .list-icon {
    width: 9%;
    height: auto;
    padding-right: 10px;
    align-items: flex-start;
    display: flex;
    justify-content: center;
    margin-top: 3.5%;
    animation: moveArrow 1s infinite alternate ease-in-out;
  }

  .list-icon2 {
    width: 5.56%;
    height: auto;
    padding-right: 10px;
    align-items: flex-start;
    display: flex;
    justify-content: center;
    margin-top: 2% !important;
  }

  .org-chart .sub-containers {
    height: 188px;
    width: 160px;
  }

  .org-chart .user-outer-container {

    width: 160px;

  }
}

@media screen and (max-height: 650px) and (min-height: 550px) and (max-width:1260px) {

  .org-chart .user {
    padding: 13px 3px;
  }

  .org-chart .user-outer-container {
    width: 118px;
    height: 173px;
  }

  .company_associated {
    width: 100%;
    background: #dc0b07a4;
    margin: 0 !important;
    padding: 5px !important;
    color: white;
    font-size: 8.5px !important;
    position: absolute;
    height: 30%;

  }
}

/* ---------------------- 7.4.25 first ----------------------- */
.grandpa {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pneumatic-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
  padding-top: 2rem;
}

.pneumatic-left {
  flex: 1 1 50%;
  min-width: 300px;
}

.pneumatic-left h2,
.pneumatic-left h3 {
  color: #222;
  margin-bottom: 0.5rem;
}

.pneumatic-left p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: justify;
  padding-left: 10px;
}

.pneumatic-left ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.pneumatic-left ul li {
  margin-bottom: 0.5rem;
}

.pneumatic-right {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
}

.pneumatic-right img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.pneumatic-left.animate-left {
  animation: fadeInLeftSmooth 1s ease-out forwards;
}

.pneumatic-right img.animate-up {
  animation: fadeInUpSmooth 1.2s ease-out forwards;
  transform-origin: center;
}

.pneumatic-left ul li {
  opacity: 1;
  transform: translateX(-20px);
}

.pneumatic-left ul li.animated {
  animation: fadeInLeftSmooth 0.8s ease-out forwards;
}

@keyframes fadeInLeftSmooth {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }

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

@keyframes fadeInUpSmooth {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }

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

@media screen and (max-width:1250px) and (max-height:630px) and (min-height:550px) {
  .pneumatic-left p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify;
    padding-left: 10px;
  }

  .pneumatic-left li {
    font-size: 14px;

  }
}

/* ----------------------- second -------------------- */

.classification-section {
  text-align: center;
}


/* .classification-heading {
  /* font-size: 1rem; */
/* margin-bottom: 10px; */
/* display: inline-block; */
/* padding-bottom: 0.5rem; */
/* padding: 10px; */
/* }  */

@media screen and (max-width:1560px) and (max-height:700px) and (min-height:550px) {
  .classification-box h3 {
    margin: 0;
    padding: 0 !important;
  }

  .classification-box {
    flex: 1 1 400px;
    max-width: 100%;
    padding: 0 0 0 1.5rem !important;
  }

  .classification-box h2 {
    margin-bottom: 10px;
    padding-bottom: 0px;
    font-size: 20px;
    line-height: 28px;

  }
}

@media screen and (max-width:1400px) and (max-height:700px) and (min-height:550px) {
  .classification-box h3 {
    margin: 0;
    padding: 0 !important;
  }

  .classification-box {
    flex: 1 1 400px;
    max-width: 100%;
    padding: 0 0 0 1rem !important;
  }

  .classification-heading {
    margin-bottom: 0px !important;
    padding-bottom: 0px;
    font-size: 17px;
    line-height: 26px;

  }

  .classification-box img {
    width: 30% !important;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }

  .classification-box ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-bottom: 0rem !important;
  }

  .classification-box li {
    margin-bottom: 0.5rem;
    font-size: 10px !important;
  }
}


@media screen and (max-width:1400px) and (max-height:650px) and (min-height:550px) {
  .classification-box h3 {
    margin: 0;
    padding: 0 !important;
  }

  .classification-box {
    flex: 1 1 400px;
    max-width: 100%;
    padding: 0 0 0 1rem !important;
  }

  .classification-heading {
    margin-bottom: 0px !important;
    padding-bottom: 0px;
    font-size: 14px;
    line-height: 26px;

  }

  .classification-box img {
    width: 25% !important;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-top: 0px !important;
  }

  .classification-box ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-bottom: 0rem !important;
  }

  .classification-box li {
    margin-bottom: 0.5rem;
    font-size: 13px !important;
  }
}



.classification-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  margin-top: 0%;
}

.classification-heading {
  font-size: 1.5rem;
}

.classification-box {
  flex: 1 1 400px;
  max-width: 100%;
  padding: 1.5rem;
}

.classification-box h3 {
  /* padding: 10px; */
  font-size: 1rem;
}

.classification-box ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.classification-box li {
  margin-bottom: 0.5rem;
  font-size: 16px;
}

.classification-box img {
  width: 40%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin: 5px 0 10px 0;
}

.classification-box p {
  padding-left: 0;
  font-size: 13px;
}

@keyframes fadeInSlight {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  25% {
    opacity: 0.3;
    transform: translateY(45px);
  }

  50% {
    opacity: 0.6;
    transform: translateY(30px);
  }

  75% {
    opacity: 0.8;
    transform: translateY(15px);
  }

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

.classification-section {
  opacity: 0;
}

.classification-section.fade-in {
  animation: fadeInSlight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

}


@media screen and (min-width:1800px) and (min-height:910px) {

  .classification-grid {
    margin-top: 3%;
  }

  .heading-section h2 {
    margin-top: 3%;
  }

  .classification-box h3 {
    padding: 0px !important;
    font-size: 1.5rem;
  }

  .classification-box p {
    padding-left: 0;
    font-size: 17px;
  }

  .classification-box li {
    margin-bottom: 0.5rem;
    font-size: 17px;
  }

  .part-one video {
    width: 100%;
    height: auto;
  }

  .part-two video {
    width: 100%;
    height: auto;
  }

  .page-flex-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .header21 .title31 {
    font-size: 19px;

  }

  .header21 .title21 {
    font-size: 29px;
  }

  .venting-heading {

    font-size: 34px;

  }

  .parent1 {
    height: unset !important;
    margin-top: 2%;
  }

  .titlep {

    font-size: 21px;
    font-weight: 600;
  }

  .parent3 .sub1 {

    height: unset !important;
    margin-bottom: 2%;
    row-gap: 10px;
    display: flex;
    flex-direction: column;
  }

  .fff {
    margin-top: 37px !important;
  }

  .address-container p {
    font-size: 17px !important;
  }

  .about-points li {
    font-size: 17px !important;
  }

  /* .about-image .panda {
    margin-top: -19px !important;
  } */

  .about-image img {
    margin-top: 69px !important;

  }

  .typicaldilutephase p {
    font-size: 18px !important;
  }

}

@media screen and (min-width: 1381px) and (max-width: 1600px) {
  .classification-box p {
    font-size: 12px;
  }

  .classification-box li {
    font-size: 12px;
  }


}



@media (max-width: 768px) {
  .classification-heading {
    font-size: 1.25rem;
    width: 95%;
  }

  .classification-box {
    max-width: 90%;
    padding: 1rem;
  }

  .classification-box h3 {
    font-size: 1rem;
  }

  .classification-box li {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .classification-grid {
    flex-direction: column;
    gap: 1rem;
  }

  .classification-box {
    padding: 0.5rem;
  }

  .classification-box h3 {
    font-size: 1rem;
  }

  .classification-box p {
    font-size: 0.9rem;
  }
}


/* 3 */

.comparison-section {
  padding: 1rem;
  text-align: center;
}

.comparison-heading {
  font-size: 1.2rem;
  /* margin-bottom: 1rem; */
  color: #000000;
  /* border-bottom: 3px solid #007bff; */
  display: inline-block;
  padding-bottom: 0.5rem;
}

.responsive-table {
  overflow-x: auto;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  width: 80%;
  border-collapse: collapse;
  /* background-color: #fefefe; */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

thead {
  /* background-color: #007bff; */
  color: #000000;
 
}

.responsive-table th,
.responsive-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #000000;
  font-size: 14px;
  
}

.responsive-table th{
 text-align: center;
}

td strong {
  color: #030303e7;
}


@media screen and (max-width: 768px) {
  table {
    font-size: 0.85rem;
  }

  th,
  td {
    padding: 0.75rem;
  }
}

@media screen and (max-height:670px) and (min-height:574px) and (max-width:1470px) {
  .comparison-heading {
    font-size: 1rem;
    margin-bottom: 0.1rem;
    color: #222;
    border-bottom: unset;
    display: inline-block;
    padding-bottom: 0.1rem;
  }

  .comparison-section {
    padding: 0.5rem;
    text-align: center;
  }

}

@media screen and (max-height:670px) and (min-height:574px) and (max-width:1330px) {
  .comparison-heading {
    font-size: 14px;
    margin-bottom: 0.1rem;
    color: #222;
    border-bottom: unset;
    display: inline-block;
    padding-bottom: 0.1rem;
  }

  .comparison-section {
    padding: 0.2rem;
    text-align: center;
  }


}

@media screen and (max-height:670px) and (min-height:574px) and (max-width:1200px) {
  .comparison-heading {
    font-size: 14px;
    margin-bottom: 0.1rem;
    color: #222;
    border-bottom: unset;
    display: inline-block;
    padding-bottom: 0.1rem;
  }

  .comparison-section {
    padding: 0.1rem;
    text-align: center;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 4px !important;
    text-align: left;
    /* border: 1px solid #ddd; */
    font-size: 12px !important;
  }

}


.parent1 {
  width: 100%;
  height: 100%;
  display: flex;
  column-gap: 10px;

}

.parent1 div {
  width: 100%;
  height: 100;

}

.parent1 .left1 {
  padding: 1%;
}

.parent1 .right1 {
  padding: 1%;
}

.left1 .list-icon3 {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 8px;
}

.left1 li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}


.right1 div {
  height: 50%;
  width: 100%;
}

.titlep {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
}

.left1 p {
  margin-bottom: 2%;
}

.right1 p {
  margin-bottom: 2%;
}

.parent1 .math {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5% 0 2% 0;
}

.parent1 .math p {
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  font-size: 14px;
  font-weight: 600;
}

@media screen and (max-height:660px) and (min-height:550px) and (max-width:1350px) {

  .parent1 .left1 {
    padding: 0.5%;
  }

  .parent1 .right {
    padding: 0.5%;
  }

  .left1 .list-icon3 {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: 8px;
  }

  .left1 li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
  }




  .right1> :first-child {
    height: 35%;
    margin-bottom: 5%;
  }

  .right1> :nth-child(2) {
    height: 65%;
    font-size: 14px;
  }

  .titlep {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
  }

  .left1 p {
    margin-bottom: 1%;
  }

  .right1 p {
    margin-bottom: 1%;
  }

  .parent1 .math {
    width: 100%;
    height: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0%;
  }

  .parent1 .math p {
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    font-size: 12px;
    font-weight: 600;
  }
}

@media screen and (max-height:660px) and (min-height:550px) and (max-width:1200px) {

  .parent1 .left1 {
    padding: 0.2%;
  }

  .parent1 .right1 {
    padding: 0.2%;
  }

  .left1 .list-icon3 {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    margin-right: 8px;
  }

  .left1 li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
  }




  .right1> :first-child {
    height: 35%;
    margin-bottom: 7%;
  }

  .right1> :nth-child(2) {
    height: 65%;
    font-size: 12px;
  }

  .titlep {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .left1 p {
    margin-bottom: 1%;
  }

  .right1 p {
    margin-bottom: 1%;
  }

  .parent1 .math {
    width: 100%;
    height: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2%;
  }

  .parent1 .math p {
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    font-size: 12px;
    font-weight: 600;
  }
}

.parent2 {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.example {
  width: 100%;
  padding-left: 10%;
}

.parent2 div {
  width: 50%;
}

.parent2 .sub1 p {
  font-size: 18px;
  padding: 0;
}

.parent2 .sub2 p {
  padding: 0;
}

.parent2 .math {
  width: 80%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin: 5% 0 2% 0; */
}

.parent2 .math2 {
  width: auto;
  margin-top: 2%;

}

.parent2 .math2 p {
  font-size: 18px;
}

.parent2 .math p {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}

.parent2 .sub2 .math> :nth-child(2) {
  margin-left: 55px;
}

.parent2 .math2 span {
  margin-right: 10px;
}


@media screen and (max-height:690px) and (min-height:550px) and (max-width:1400px) {


  .example {
    width: 100%;
    padding-left: 10%;
    display: flex;
    align-items: end;
  }

  .parent2 div {
    width: 70%;
  }

  .parent2 .sub1 p {
    font-size: 18px;
    padding: 0;
  }

  .parent2 .sub2 p {
    padding: 0;
  }

  .parent2 .math {
    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 5% 0 2% 0; */
  }

  .parent2 .math p,
  .math2 p {
    font-size: 16px;
    font-weight: 600;
  }

  .parent2 .math2 {
    width: auto;
  }

  .parent2 .sub2 .math> :nth-child(2) {
    margin-left: 55px;
  }

  .parent2 .math2 span {
    margin-right: 10px;
  }

  .parent2 .sub2,
  .parent2 .sub1 {
    display: flex;
    flex-direction: column;
    padding-left: 10%;
  }
}

@media screen and (max-height:690px) and (min-height:550px) and (max-width:1200px) {


  .example {
    width: 100%;
    padding-left: 10%;
    display: flex;
    align-items: end;
  }

  .parent2 div {
    width: 70%;
  }

  .parent2 .sub1 p {
    font-size: 14px;
    padding: 0;
  }

  .parent2 .sub2 p {
    padding: 0;
  }

  .parent2 .math {
    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 5% 0 2% 0; */
  }

  .parent2 .math p,
  .math2 p {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
  }

  .parent2 .math2 {
    width: auto;
    margin-top: 2%;
  }

  .parent2 .sub2 .math> :nth-child(2) {
    margin-left: 55px;
  }

  .parent2 .math2 span {
    margin-right: 10px;
  }

  .parent2 .sub2,
  .parent2 .sub1 {
    display: flex;
    flex-direction: column;
    padding-left: 10%;
  }
}

.parent3 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.parent3 .left52 {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around !important;
  align-items: center;
  height: 100%;
}

.parent3 .right52 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent3 .right52 img {
  width: 80%;
  height: auto;
}

.parent3 .sub1 {
  width: 100%;
  height: auto;
}

.parent3 .sub2 {
  height: 40%;
  width: 100%;
}

.parent3 .sub1 div,
.parent3 .sub2 li {
  font-size: 16px;
  line-height: 1.7;
}

.parent3 .flex-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  list-style: none;
  justify-content: space-around;
  font-weight: 600;
}

.parent3 .tit {
  margin-bottom: 4px;
}

@media screen and (max-height:690px) and (min-height:550px) and (max-width:1200px) {

  .parent3 .sub1 {
    width: 80%;
    height: 60%;
  }

  .parent3 .sub2 {
    height: 40%;
    width: 80%;
  }

  .parent3 .sub1 div,
  .parent3 .sub2 li {
    font-size: 14px;
    line-height: 1.9;
  }

  .parent3 .flex-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    list-style: none;
    justify-content: space-around;
    font-weight: 600;
  }
}



.parent4 {
  width: 100%;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
}

.parent4 .btns button {
  min-width: 45%;
  padding: 10px 20px;
  border-radius: 12px;
  background: #000;
  color: white;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  display: inline-block;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.parent4 .btns button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 100%);
  animation: shimmer 2.5s infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.parent4 .btns button span {
  position: relative;
  z-index: 2;
}




.parent4 .cont1 {

  height: 100%;
  width: 70%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.parent4 .cont1 img {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.parent4 .btns {
  min-width: 30%;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

@media screen and (max-width: 1800px) {
  .parent4 .cont1 img {
    width: 60%;
  }
}

@media screen and (min-width:1800px) and (min-height:910px) {
  .parent4 .cont1 img {
    width: 60% !important;
  }

  .heading-section h2 {
    margin: 0;
    padding: 0;
  }

  .parent2 {

    justify-content: unset;
  }

  .example {

    padding-left: 7%;
    margin-top: 3%;
  }

  .parent3 .right52 img {
    width: 100%;
    height: auto;
  }

  .parent3 .left52 {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around !important;
    align-items: center;
    height: 100%;
    margin-left: 6%;
  }

  .venting-imagess>:first-child {
    width: 60%;
  }

  .venting-imagess> :nth-child(2) {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .venting-imagess img {
    object-fit: contain;
    border-radius: 12px;
    width: 70%;
    height: auto;
  }

  .points {

    align-items: unset !important;
  }

  element.style {}

  .points-list3 li {
    padding: 5px;
    border-radius: 8px;
    font-size: 18px !important;

  }

}

/* ***************************************************************************** page 44 **************************************************************** */

.page44 {
  text-align: center;
  padding: 20px;
}


.page44heading h1 {
  margin-bottom: 20px;
  text-align: center;
}


.page44content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.page44leftcon {
  flex: 1;
  margin: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  /* width: 50% !important; */

}


.page44rightcon {
  flex: 1;
  margin: 10px;
  display: flex;
  justify-content: center;
  padding-right: 5%;
  /* width: 50% !important; */
}

.page44rightcon img {
  width: 65% !important;
}

/* .swiper-wrapper> :nth-child(4) .page44rightcon img,
.swiper-wrapper> :nth-child(12) .page44rightcon img {
  width: 70% !important;
} */

.page35 {
  margin-left: 5%;
}

.responsive-heading {
  text-align: center;
  align-items: center;
}

.responsive-paragraph {
  text-align: center;
  align-items: center;
}

.img-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.img-container div {
  width: 50%;
}

.img-container img {
  width: 70%;
  height: auto;
}



.sizes-list {
  list-style-type: none;
  padding-left: 0;
  font-size: 13px;
  margin: 0;
  align-self: center;
}

.sizes-list li {
  position: relative;
  padding-left: 1px;
  margin-bottom: 10px;
  list-style: disc;
  width: fit-content;
}

/* .sizes-list li::before {
  content: "";
  position: absolute;
 left: 40%;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 50%;
} */
@media (max-width: 768px) {

  .page44content {
    flex-direction: column;
    align-items: center;
  }


  .page44leftcon,
  .page44rightcon {
    /* flex: 1 1 100%; */
    margin: 10px 0;
    width: 50%;
  }


  .responsive-heading,
  .responsive-paragraph {
    text-align: center;
  }
}

@media (max-width: 1125px) {
  .sizes-list {
    font-size: 14px;
  }


  .sizes-list li {
    padding-left: 20px;
  }
}

.page55-container {
  width: 100%;
  height: 71%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.page55-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  gap: 5%;
}

/* Left side styling (Swiper container) */
.page55-left {
  width: 50%;
  /* Allow the left side to take 48% of the container */
  height: 100%;
}

.page55-swiper {
  width: 100%;
  /* height: 300px; */
  height: 100%;
}

.page55-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 20px;
  border-radius: 10px;
}

.page55-swiper .swiper-slide p,
.page55-swiper .swiper-slide li {
  font-size: 16px !important;
  margin-bottom: 10px;
  padding-left: unset !important;
  width: 90%;
}


/* Right side styling (Static Image) */
.page55-right {
  width: 50%;
  /* Allow the right side to take 48% of the container */
  display: flex;
  justify-content: center;
}

.page55-right img {
  width: 75%;
  height: auto;
  border-radius: 10px;
}

@media screen and (max-width: 1600px) {
  .page55-right img {
    width: 65%;
  }
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page55-content {
    flex-direction: column;
    /* Stack the columns vertically */
    gap: 10px;
  }

  .page55-left,
  .page55-right {
    width: 100%;
    /* Allow both columns to take up 100% of the width */
  }

  .page55-swiper {
    height: 250px;
  }
}

@media (max-width: 600px) {
  .page55-swiper .swiper-slide {
    font-size: 16px;
    /* Adjust font size for smaller screens */
  }
}

.page55-swiper .swiper-pagination {
  right: 0 !important;
}

@media screen and (max-width: 1700px) {

  .page55-swiper .swiper-slide p,
  .page55-swiper .swiper-slide li {
    font-size: .85vw !important;
  }
}

@media screen and (max-width: 1400px) {

  .page55-swiper .swiper-slide p,
  .page55-swiper .swiper-slide li {
    font-size: .8vw !important;
  }
}

@media screen and (max-width: 1300px) {

  .page55-swiper .swiper-slide p,
  .page55-swiper .swiper-slide li {
    font-size: .75vw !important;
  }
}

.page55-swiper .page55-heading {
  font-size: 18px !important;
  /* Larger font size */
  font-weight: bold;
  /* Make it bold */
  text-align: left;
  color: #1f7ccb;
  /* Dark color for contrast */
  margin-bottom: 15px;
  /* Add some space below the heading */
}

.page55-side-heading {
  margin-bottom: 5px !important;
}

.page55-swiper .swiper-slide ul {
  list-style-type: disc;
  /* Add bullet points */
  margin-left: 20%;
  padding-left: 0;
  /* Remove default padding */
  width: 100%;
}

.page55-swiper .swiper-slide li {
  margin-bottom: 5px;
  /* Add spacing between list items */
}

.page56-flex1 {
  flex: 1;
}

.page56-flex2 {
  flex: 2;
}

.page35-flex1 {
  flex: 1;
}

.page35-flex2 {
  flex: 2;
}

.last-left h2 {
  margin-bottom: 2%;
}

.last-left p {
  margin-bottom: 8% !important;
}

/* .swiper-container7 - Overall Container Styling */
.main-swiper-7-container {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.swiper-container7 {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  margin-top: -2%;
}

.swiper-container7 .swiper-wrapper {
  flex-direction: row;
}

/* .swiper-slide - Each Slide Styling */
.swiper-container7 .swiper-slide {
  display: flex;
  justify-content: space-around;
  /* Adjusted for horizontal layout */
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  transition: all 0.3s ease;
}

/* .swiper-content - Layout for Content and Image Section */
.swiper-container7 .swiper-slide .swiper-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

/* .swiper-content .image - Styling for the Image Section */
.swiper-container7 .swiper-slide .swiper-content .image {
  flex: 1;
  padding-right: 20px;
  display: flex;
  justify-content: center;
}

.swiper-container7 .swiper-slide .swiper-content .image img {
  max-width: 97%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* .swiper-content .content - Styling for the Text Section */
.swiper-container7 .swiper-slide .swiper-content .content {
  flex: 1;
  max-width: 50%;
  gap: 4px;
  flex-direction: column;

}

.swiper-container7 .swiper-slide .swiper-content .content h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.swiper-container7 .swiper-slide .swiper-content .content p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.swiper-container7 .swiper-slide .swiper-content .content ul {
  list-style-type: disc;
  margin-left: 20px;
  font-size: 14px;
}
@media screen and ( max-width:1600px ) {
  .swiper-container7 .swiper-slide .swiper-content .image img {
  max-width: 78%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 10%;
}

}
/* Responsive Styles for Screens ≤ 1024px */
@media (max-width: 1024px) {

  .swiper-container7 .swiper-slide {
    flex-direction: column;
    text-align: center;
  }


  .swiper-container7 .swiper-slide .swiper-content {
    flex-direction: column;
    align-items: center;
  }


  .swiper-container7 .swiper-slide .swiper-content .content {
    max-width: 100%;
    padding-top: 10px;
  }


  .swiper-container7 .swiper-slide .swiper-content .image {
    padding-right: 0;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 1350px) {

  .swiper-container7 p,
  .swiper-container7 li {
    font-size: 12px !important;
  }

  .page55-right img {
    width: 50%;
  }

  .venting-imagess>:first-child div p {
    text-align: justify;
    margin-bottom: 2px !important;
  }



  .pneumatic-left58 div li {
    list-style: circle;
    margin-left: 2.5%;
    font-size: 13px !important;
  }

}

/* Optional Styling for Pagination */
.swiper-container7 .swiper-pagination {}

.swiper-container7 .swiper-pagination-bullet {
  background-color: #000;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.swiper-container7 .swiper-pagination-bullet-active {
  background-color: #007bff;
  opacity: 1;
}

/* Optional Styling for Navigation Arrows */
.swiper-container7 .swiper-button-next,
.swiper-container7 .swiper-button-prev {
  color: #007bff;
  font-size: 18px;
}


/* .swiper-container7 .swiper-pagination-bullet {
  border-radius: 0;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  line-height: 30px;
  font-size: 12px;
  opacity: 1;
  background: #007bff6a;
  display: inline-block;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
 
.swiper-container7 .swiper-pagination-bullet-active {
  background: #007bff;
  width: 20px !important;
  border-radius: 10px;
}

 */

.glitter-list {
  list-style: none;
  padding-left: 0;
}

.glitter-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  font-weight: 600;

}

.glitter-list li::before {
  content: "✦";
  /* Unicode star */
  position: absolute;
  left: 0;
  top: 0;

  font-size: 16px;
  animation: sparkle 1.5s infinite;
  filter: drop-shadow(0 0 3px #fff);
}

@keyframes sparkle {

  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
    color: #402ee0;
  }

  50% {
    opacity: 1;
    transform: scale(1.4) rotate(15deg);
    color: #0040f1;
  }
}

@media screen and (min-width:1800px) and (min-height:905px) {


  .video-container {

    max-width: 750px;
  }

  .video-container1 {

    width: 44%;

  }

  .grandpanew> :first-child li {
    list-style: decimal !important;
    font-size: 19px !important;
    line-height: 40px !important;
  }

  .header2 .rotaryvalveleakage {
    width: 89%;
    max-width: 1500px;
    height: auto;
    margin: auto;
    display: flex;
    margin-top: -10%;
  }

  .example h2 {
    width: 100%;
    padding-left: 9%;
  }

  .left-side-texts p {
    font-size: 19px !important;
    font-weight: 0;
  }

  .left-side-texts h2 {
    font-size: 24px !important;
    font-weight: 0;
  }
}


@media screen and (max-width:1270px) and (max-height:555px) {
  .page-4-outer-container {
    scale: 0.8;
    margin-top: -39px;
  }

  .org-chart li {

    margin-right: 0em !important;

  }

  .page8 .about-image img {
    width: 21% !important;
    margin-top: 15% !important;
  }

  .page .address-container {
    margin-top: -26px !important;
  }

  .page9 .centered-image33 img {
    margin-top: -11%;

  }

  .page10 .address-container .office1 {
    margin-top: -14px !important;
  }

  .heading-container .ml3,
  .heading-container .ml4,
  .heading-container .ml5,
  .heading-container .ml6,
  .heading-container .ml7 {

    margin: 0px;

  }

  .departments1 {

    margin-top: -1%;
  }


  .pneumatic-left li {
    font-size: 14px;
  }

  .pneumatic-right img {
    width: 92%;
  }

  .classification-box h3 {
    padding: 10px;
    font-size: 14px;
  }

  .classification-box p {
    padding-left: 0;
    font-size: 12px;
  }

  .classification-box li {
    padding-left: 0;
    font-size: 12px !important;
  }

  .comparison-heading {
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.1rem !important;
    margin-top: 0 !important;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 6px !important;
    text-align: left;
    border: 1px solid #ddd;
    font-size: 12px !important;
  }

  .swiper-slide:first-child {
    font-size: 17px;
  }

  .comparison-section {
    padding: 0rem;
    text-align: center;
  }

  .comparison-section {
    padding: 1rem;
    text-align: center;
  }

  .video-container1 {
    max-width: 361px !important;
  }

  .venting-images1 img {

    width: 100% !important;

  }

  .venting-images1 span {

    bottom: 2% !important;
  }

  .points-list {

    margin: 0 auto !important;

  }

  .parent4 .cont1 img {
    width: 57%;
  }

  .page55-right img {
    width: 60%;

  }

  .last-left h2 {
    margin-bottom: 1%;
  }

  .last-left p {
    margin-bottom: 3% !important;
  }

  .points {

    align-items: start !important;
  }
}

.office-flex-container,
.address-container-flex-container {
  width: 100% !important;
}

.address-flex-container {
  display: flex;
}

.address-flex-container p {
  padding-left: 2% !important;
  font-size: 13px !important;
  border-left: 1.5px solid black;
  display: flex;
  align-items: baseline;
}

.address-flex-container p:first-child {
  border-left: 0;
}

@media screen and (max-width: 1400px) {
  .address-flex-container p {
    font-size: 10px !important;
  }
}

.flex-column-container p {
  font-weight: 550;
  font-size: medium;
}

.silder-pno {
  position: relative;
}

#slide-pno1,
#slide-pno2,
#slide-pno3,
#slide-pno4,
#slide-pno5,
#slide-pno6,
#slide-pno7,
#slide-pno8,
#slide-pno10new,
#slide-pno11,
#slide-pno44,
#slide-pno51,
#slide-pno56 {
  position: absolute;
  bottom: 2.5%;
  left: 48%;
  width: 4%;
  height: 3%;
  text-align: center;
  padding: 2px 3px;
  border-radius: 5px;
}



/* -------------------------page 11---------------------------- */

.content-container11 {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-sections {
  width: 60%;
  height: 100%;
  padding-left: 10%;
  position: relative;
}

.right-sections {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  row-gap: 10px;
  margin-top: -3%;
}

.right-sections div {
  opacity: 0;
}

.right-sections div>:first-child {
  font-size: 18px;
  font-weight: 600;
}

.right-sections div>:nth-child(2) {
  font-size: 16px;

}

.left-img {
  width: 45%;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 10%;
}

.left-img img {
  width: 75%;
  height: auto;
}

@media screen and (max-height:700px) and (max-width:1550px) {
  .right-sections div>:first-child {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }

  .right-sections div>:nth-child(2) {
    font-size: 14px;
    margin-bottom: 1%;
  }

  .right-sections {
    justify-content: space-around;
  }
}

@media screen and (max-height:650px) and (max-width:1400px) {
  .right-sections div>:first-child {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
  }

  .right-sections div>:nth-child(2) {
    font-size: 13px;
    margin-bottom: 1%;
  }

  .right-sections {

    justify-content: space-around;
    margin-top: -3%;
  }

  .left-section1 h2 {
    margin-top: -4%;
    margin-bottom: 2% !important;
  }

  .office5 {
    margin-top: 4%;
  }

  .address-container .office1,
  .address-container .factory1 {
    margin-top: -30px !important;
  }

}

@media screen and (max-height:590px) and (max-width:1350px) {
  .right-sections div>:first-child {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
  }

  .right-sections div>:nth-child(2) {
    font-size: 11px;
    margin-bottom: 1%;
  }
}


.model3d {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.model3d .model {
  width: 100%;
  height: 80%;
}

.model model-viewer {
  width: 100%;
  height: 100%;
}

.model3d .action-btns {
  display: flex;
  width: 100%;
  justify-content: center;
  column-gap: 5%;
}

.model3d .action-btns button {
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid black;
  background-color: #6b6b6b75;
  color: black;
  min-width: 7%;
  font-weight: bold;
  font-size: 0.9vw;
  cursor: pointer;
}

.model3d .action-btns .active-explode {
  background-color: #00aaff;
  color: white;
  border: 1.5px solid white;
}

.model3d .label-content {
  text-align: center;
  width: 25%;
  transition: all 0.5s ease;
  background-color: rgba(255, 255, 255, 0.979);
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.233);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.37);
  text-align: justify;
  padding: 1%;
  position: absolute;
  right: 1%;
  top: -12%;
  font-size: 1vw;
}

.label-content.show {
  opacity: 1;
  transform: translateX(0);
}

.ar-button slot {
  display: none !important;
}



/* .swiperpage44 {
  margin-top: -5%;
} */

.swiperpage44 .swiper-pagination-bullet {

  width: 15px !important;
  height: 15px !important;

}


/* ------------------------------------new pages-------------------- */

.grandpa1 {
  width: 100%;
  height: 80%;
}

.grandpa1 .pneumatic-section58 {
  width: 100%;
  height: 100%;
  display: flex;
}



.pneumatic-section58 div {
  width: 50%;
  height: 100;
}

.pneumatic-section58> :first-child {
  display: flex;
  margin-top: 3%;
  margin-left: 2%;
  align-items: center;
  flex-direction: column;

}

.pneumatic-section58> :nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pneumatic-section58 .pneumatic-left58 div {
  width: 100%;
}


.pneumatic-left58 div li {
  list-style: circle;
  margin-left: 2.5%;
  font-size: 15px;
}

.pneumatic-left58 div p {
  font-size: 15px;
}

.pneumatic-right58 img {
  width: 60%;
  height: auto;
  margin-top: -5%;
}

.grandpa3 {
  width: 100%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width:1550px) and (max-height:732px) {
  .pneumatic-left ul li {
    margin-bottom: 0.3rem;
    font-size: 13px;
  }

}

@media screen and (max-width:1450px) and (max-height:650px) {
  .grandpa4 li {
    font-size: 15px;
  }

  .comparison-section {
    margin-top: -4%;
  }

}

/* -----------------------43---------------------------- */
.parent-cont {
  max-width: 100%;
  height: 76%;
  /* max-height: 350px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rotary-valve-table {
  width: 80%;
  height: 100%;
  overflow-x: auto;
  padding: 1rem;
  display: flex;
  justify-content: center;

}

.rotary-valve-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  background-color: #ffffff2a;
  border: 2px solid rgb(0, 7, 8);
}

.rotary-valve-table th,
.rotary-valve-table td {
  border: 1px solid #000000;
  padding: 8px 10px;
  vertical-align: top;
  color: #000;
}


.rotary-valve-table::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
}

.rotary-valve-table::-webkit-scrollbar-thumb {
  background: #00aaff ; 
  border-radius: 10px;
  /* box-shadow: 0 0 10px #00aaff;------------ */
  animation: glowScroll 2s infinite linear;
}

@keyframes glowScroll {
  0% {
    box-shadow: 0 0 5px #00aaff;
  }
  50% {
    box-shadow: 0 0 15px #00aaff;
  }
  100% {
    box-shadow: 0 0 5px #00aaff;
  }
}

.rotary-valve-table thead {
  background-color: #5eb8db;
  font-weight: bold;
  text-align: center;
  color: #000;

}

.rotary-valve-table th[rowspan="2"] {
  vertical-align: middle;
}

@media screen and (max-width:1535px) and (min-width:1520px) and (min-height:680px) and (max-height:735px) {
  .rotary-valve-table {
    height: 95%;

  }

}

@media screen and (max-width:1430px) and (max-height:720px) and (min-height:710px) {
  .typicaldilutephase p {
    font-size: 12.5px;
  }

  .rotary-valve-table {
    height: 96%;

  }

  .parentslide .left3 {
    width: 100%;
    height: 100%;
  }

  .swiper-container {
    width: 100%;
    height: 80%;
    overflow: hidden;
    position: relative;
    margin: auto;
  }

  .para2 {
    margin-top: -5% !important;
  }

  .right-sections div>:first-child {
    font-size: 16px !important;
    font-weight: 600;
  }

  .right-sections div>:nth-child(2) {
    font-size: 14px !important;

  }
}

@media screen and (max-width:1270px) and (max-height:560px) {
  .swiper-slide:first-child {
    font-size: 60px;
  }

  .about-points li {
    font-size: 13px;
    margin-bottom: 1px !important;
  }

  .about-points li {
    font-size: 13px;
    margin-bottom: 1px !important;
  }

  .left-section2 h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
  }

  .page10 .address-container .office1 {
    margin-top: -37px !important;
  }

  .address-container p {
    font-size: 13px !important;
  }

  .classification-grid {
    margin-top: 0%;
  }

  .comparison-section {
    margin-top: -4%;
  }

  .rotary-valve-table {
    height: 97%;
  }

  .sizes-list {
    font-size: 12px;
  }

  .swiperpage44 .swiper-pagination-bullet {

    width: 12px !important;
    height: 12px !important;
    margin-top: -1%;
  }

  .capacities-container {

    margin-top: -2.2%;
  }

  .left-content1 li {
    margin-bottom: 3px !important;
    font-size: 14px !important;
    text-align: justify;
  }

  .venting-images img {
    max-height: 249px !important;
  }

  .swiper-container7 p,
  .swiper-container7 li {
    font-size: 12px !important;
  }

  .venting-imagess img {
    width: 37%;
  }

  .pneumatic-section58> :first-child {
    margin-top: 0%;
  }

  .pneumatic-section {
    margin-top: -2%;
  }

  .grandpa4 li {
    font-size: 14px;
  }

  .pneumatic-left li {
    font-size: 13px;
  }
}

@media screen and (min-width: 1381px) and (max-width: 1530px) {
  .note {
    margin-top: -7%;
  }

  .note2 {
    margin-top: -5%;
  }

  .venting-images {
    margin-bottom: 8% !important;
  }

}

@media screen and (min-width: 900px) and (max-width: 1380px) {

  /* .page44rightcon img {
    width: 50% !important;
  } */

  .pneumatic-right58 img {
    width: 45%;
    height: auto;
    margin-top: -5%;
  }

  .responsive-heading {
    font-size: 18px !important;
    margin-bottom: 0 !important;
  }

  .sizes-list li {
    margin-bottom: 0;
  }


}

/* =============================new carasole=================== */
:root {
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-filter: blur(15px);
  --item1-zIndex: 11;
  --item1-opacity: 0;

  --item2-transform: translateX(0);
  --item2-filter: blur(0px);
  --item2-zIndex: 10;
  --item2-opacity: 1;

  --item3-transform: translate(50%, 10%) scale(0.8);
  --item3-filter: blur(5px);
  --item3-zIndex: 9;
  --item3-opacity: 1;

  --item4-transform: translate(90%, 20%) scale(0.5);
  --item4-filter: blur(10px);
  --item4-zIndex: 8;
  --item4-opacity: 1;

  --item5-transform: translate(120%, 30%) scale(0.3);
  --item5-filter: blur(15px);
  --item5-zIndex: 7;
  --item5-opacity: 0;
}

.carousel4 {
  position: relative;
  height: 800px;
  overflow: hidden;
  margin-top: -50px;
}

.carousel4 .list4 {
  position: absolute;
  width: 1140px;
  max-width: 90%;
  height: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.carousel4 .list4 .item4 {
  position: absolute;
  left: 0%;
  width: 70%;
  height: 100%;
  font-size: 15px;
  transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.carousel4 .list4 .item4:nth-child(n + 6) {
  opacity: 0;
}

.carousel4 .list4 .item4:nth-child(2) {
  z-index: 10;
  transform: translateX(0);
}

.carousel4 .list4 .item4 img {
  width: 60%;
  position: absolute;
  right: 0;
  top: 30%;
  transform: translateY(-50%);
  transition: right 1.5s;
}

.carousel4 .list4 .item4 .introduce4 {
  opacity: 0;
  pointer-events: none;
  margin-left: -20%;
}

.carousel4 .list4 .item4:nth-child(2) .introduce4 {
  opacity: 1;
  pointer-events: auto;
  width: 400px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s;
}

.carousel4 .list4 .item4 .introduce4 .title4 {
  font-size: 27px;
  font-weight: 700;
  line-height: 3rem;
}

.carousel4 .list4 .item4 .introduce4 .topic4 {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 3rem;
}

.carousel4 .list4 .item4 .introduce4 .des4 {
  font-size: small;
  line-height: 1rem;
  color: #5559;
  text-align: justify;
}

.carousel4 .list4 .item4 .introduce4 .seeMore4 {
  font-family: Poppins;
  margin-top: 1.2em;
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid #555;
  background-color: transparent;
  font-weight: bold;
  letter-spacing: 3px;
  transition: background 0.5s;
}

.carousel4 .list4 .item4 .introduce4 .seeMore4:hover {
  background: #eee;
}

.carousel4 .list4 .item4:nth-child(1) {
  transform: var(--item1-transform);
  filter: var(--item1-filter);
  z-index: var(--item1-zIndex);
  opacity: var(--item1-opacity);
  pointer-events: none;
}

.carousel4 .list4 .item4:nth-child(3) {
  transform: var(--item3-transform);
  filter: var(--item3-filter);
  z-index: var(--item3-zIndex);
}

.carousel4 .list4 .item4:nth-child(4) {
  transform: var(--item4-transform);
  filter: var(--item4-filter);
  z-index: var(--item4-zIndex);
}

.carousel4 .list4 .item4:nth-child(5) {
  transform: var(--item5-transform);
  filter: var(--item5-filter);
  opacity: var(--item5-opacity);
  pointer-events: none;
}

/* animation text in item4 */
.carousel4 .list4 .item4:nth-child(2) .introduce4 .title4,
.carousel4 .list4 .item4:nth-child(2) .introduce4 .topic4,
.carousel4 .list4 .item4:nth-child(2) .introduce4 .des4,
.carousel4 .list4 .item4:nth-child(2) .introduce4 .seeMore4 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  from {
    transform: translateY(-30px);
    filter: blur(10px);
  }

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

.carousel4 .list4 .item4:nth-child(2) .introduce4 .topic {
  animation-delay: 1.2s;
}

.carousel4 .list4 .item4:nth-child(2) .introduce4 .des4 {
  animation-delay: 1.4s;
}

.carousel4 .list4 .item4:nth-child(2) .introduce4 .seeMore4 {
  animation-delay: 1.6s;
}

/* next click */
.carousel4.next4 .item4:nth-child(1) {
  animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
  from {
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    opacity: var(--item4-opacity);
  }
}

.carousel4.next4 .item4:nth-child(2) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
  from {
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    opacity: var(--item3-opacity);
  }
}

.carousel4.next4 .item4:nth-child(3) {
  animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
  from {
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    opacity: var(--item4-opacity);
  }
}

.carousel4.next4 .item4:nth-child(4) {
  animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
  from {
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
  }
}

/* previous */
.carousel4.prev4 .list4 .item4:nth-child(5) {
  animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.carousel4.prev4 .list4 .item4:nth-child(4) {
  animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}

.carousel4.prev4 .list4 .item4:nth-child(3) {
  animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}

.carousel4.prev4 .list4 .item4:nth-child(2) {
  animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
  from {
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    opacity: var(--item1-opacity);
  }
}

/* detail  */
.carousel4 .list4 .item4 .detail4 {
  opacity: 0;
  pointer-events: none;
}

/* showDetail */
.carousel4.showDetail4 .list4 .item4:nth-child(3),
.carousel4.showDetail4 .list4 .item4:nth-child(4) {
  left: 100%;
  opacity: 0;
  pointer-events: none;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) {
  width: 100%;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .introduce4 {
  opacity: 0;
  pointer-events: none;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) img {
  right: 50%;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 {
  opacity: 1;
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: auto;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .title4 {
  font-size: 4em;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .specifications4 {
  display: flex;
  gap: 10px;
  width: 100%;
  border-top: 1px solid #5553;
  margin-top: 20px;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .specifications4 div {
  width: 90px;
  text-align: center;
  flex-shrink: 0;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .specifications4 div p:nth-child(1) {
  font-weight: bold;
}

.carousel4.carousel4.showDetail4 .list4 .item4:nth-child(2) .checkout4 button {
  font-family: Poppins;
  background-color: transparent;
  border: 1px solid #5555;
  margin-left: 5px;
  padding: 5px 10px;
  letter-spacing: 2px;
  font-weight: 500;
}

.carousel4.carousel4.showDetail4 .list4 .item4:nth-child(2) .checkout4 button:nth-child(2) {
  background-color: #693eff;
  color: #eee;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .title4,
.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .des4,
.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .specifications4,
.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .checkout4 {
  opacity: 0;
  animation: showContent 0.5s 1s ease-in-out 1 forwards;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .des4 {
  animation-delay: 1.2s;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .specifications4 {
  animation-delay: 1.4s;
}

.carousel4.showDetail4 .list4 .item4:nth-child(2) .detail4 .checkout4 {
  animation-delay: 1.6s;
}

.arrows2 {
  position: absolute;
  bottom: 10px;
  width: 1140px;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  left: 50%;
  transform: translateX(-50%);
}

#prev4,
#next4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: monospace;
  border: 1px solid #5555;
  font-size: large;
  bottom: 20%;
  left: 10%;
}

#next4 {
  left: unset;
  right: 10%;
}

#back2 {
  position: absolute;
  z-index: 100;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-bottom: 1px solid #555;
  font-family: Poppins;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: transparent;
  padding: 10px;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

.carousel4.showDetail4 #back2 {
  opacity: 1;
}

.carousel4.showDetail4 #prev4,
.carousel4.showDetail4 #next4 {
  opacity: 0;
  pointer-events: none;
}

.carousel4::before {
  width: 500px;
  height: 300px;
  content: "";
  background-image: linear-gradient(70deg, #dc422a, blue);
  position: absolute;
  z-index: -1;
  border-radius: 20% 30% 80% 10%;
  filter: blur(150px);
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  transition: 1s;
}

.carousel4.showDetail4::before {
  transform: translate(-100%, -50%) rotate(90deg);
  filter: blur(130px);
}

.grandpanew {
  width: 100%;
  height: 85%;
  display: flex;
}



.grandpanew> :first-child {
  margin-left: 5%;
  width: 55%;
  padding-top: 2%;
}

.grandpanew> :first-child li {
  list-style: decimal !important;
  font-size: 15px;
  line-height: 30px;
}

.grandpanew> :nth-child(2) {
  display: flex;
  width: 45%;
  justify-content: center;
  align-items: start;
}


.grandpanew> :nth-child(2) img {
  width: 80%;
  height: auto;
}


/* ===================animation  37------------------------ */
@keyframes fadeInUp1 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

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

.section-animate {
  animation: fadeInUp1 0.6s ease forwards;
  opacity: 0;
}

.section-delay-1 {
  animation-delay: 0.2s;
}

.section-delay-2 {
  animation-delay: 0.4s;
}

.section-delay-3 {
  animation-delay: 0.6s;
}

.section-delay-4 {
  animation-delay: 0.8s;
}


/* -----------------------animatin 38------------------- */

/* Initial States */
/* .anivedio {
  transform: translateX(-50px);
  opacity: 0;
  transition: all 0.8s ease;
}

.anivedio .video {
  transform: scale(0);
  transition: transform 0.8s ease;
} */

.text-container {
  transform: translateX(50px);
  opacity: 0;
  transition: all 0.8s ease;
}

.paragraph {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.animate-left {
  transform: translateX(0);
  opacity: 1;
}

.animate-left .video {
  transform: scale(1.2);
  opacity: 2;
}

.animate-right {
  transform: translateX(0);
  opacity: 1;
}


/* ----------------animaton 39------------------------------- */
.part-one,
.part-one1,
.part-two {
  opacity: 0;
  transform: scale(0.8);
}

.animate-part-one {
  animation: slideInRight3 0.8s ease forwards;
}

.animate-part-two {
  animation: slideInLeft3 0.8s ease forwards;
  animation-delay: 0.3s;
}

@keyframes slideInRight3 {
  from {
    transform: translateX(900px) scale(0.6);
    opacity: 0;
  }

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

@keyframes slideInLeft3 {
  from {
    transform: translateX(-700px) scale(0.6);
    opacity: 0;
  }

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

/* -----------------------page 40 animation---------------- */


.animate-leakage {
  animation: scaleFadeIn1 1s ease-out forwards;
}

@keyframes scaleFadeIn1 {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(100px);
  }

  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-100px);
  }

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


/* --------------------45 animation---------------------- */
/* Initial hidden state */
.capacities-table {
  opacity: 0;
  transform: rotate(0deg);
}

.capacities-container {
  opacity: 0;
  transform: translateX(100%);
}

.capacities-image {
  opacity: 0;
  transform: translateY(100px);
}

/* Animation class for entrance */
.animate-capacities {
  animation: tableRotate 1s ease-out forwards, shakeEffect 0.5s ease-in-out 1.5s, slideUp 0.8s ease-out forwards;
}

/* Keyframes for table rotation */
@keyframes tableRotate {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }

  to {
    opacity: 1;
    transform: rotate(270deg);
  }
}

/* Shake effect for the table */
@keyframes shakeEffect {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-10px);
  }

  50% {
    transform: translateX(10px);
  }

  75% {
    transform: translateX(-5px);
  }

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

/* Slide in the image from the bottom */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

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

/* Slide in capacities-container from the right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

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


/*--------------------------------animation 46----------------- */
.left-content1 ul li {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-listili {
  animation: slideInLeft 0.8s ease forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

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

.pointsanimate li {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}


/* -----------------------------animation 50-------------------- */
.parent2 p {
  opacity: 0;
  transform: translateY(20px);
}


/* ---------------------------animation page 52--------------------- */
/* Base hidden states */
.sub1>div,
.sub2 li,
.right52 {
  opacity: 0;
  transform: translateY(30px);
  /* default from bottom */
}

/* Animate from bottom */
.animate-sub1 {
  animation: fadeUp 0.6s ease forwards;
}

/* Animate from right */
.animate-sub2,
.animate-right52 {
  transform: translateX(30px);
  animation: fadeRight 0.6s ease forwards;
}

/* Keyframes */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

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


/* --------------animation page 57------------------------ */
.points-list3 li {
  opacity: 0;
}

.video-container55 {
  opacity: 1;
}


/* --------------------animation 66----------------------- */


.newrow img,
.newrow1 img {
  opacity: 0;
  transform: scale(0.8) translateY(20px);
}

.animate-img {
  animation: wonderIn 0.8s ease-out forwards;
}


@keyframes wonderIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }

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


.page68 li {
  opacity: 0;
}

.leftquest div {
  /* width: 100%; */
  display: flex;
  /* align-items: center; */
  margin-bottom: 20px;
  
}

.leftquest {
  overflow-y: auto;
  max-height: 350px;
  
}

.leftquest div label {
  width: 25%;
  font-weight: bold;
}



.leftquest div input[type="text"] {
  width: 70%;
  border: none;
  border-bottom: 1px solid #000000;
  background-color: transparent;
  padding: 5px;
  outline: none;
  font-weight: 400;
  font-size: medium;
}

.leftquest div span {
  margin-right: 2%;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 70%;
  align-items: center;
  margin-bottom: 0 !important;
}

.leftquest .radio-group label {
  display: flex;
  align-items: center;
  white-space: normal;
  cursor: pointer;
  font-size: medium;
  width: fit-content !important;
  font-weight: 500;

}

.leftquest .radio-group label input {
  margin-left: 20px;
  margin-right: 5px;
}


.faq-scroll-view {
  max-height: 450px;
  width: 80%;
  display: grid;
  overflow-y: auto;
  padding: 20px;
  border-radius: 10px;
  font-family: 'Segoe UI', sans-serif;
  /* background: #f9f9f9; */
  /* margin-top:5px; */
  /* box-sha5ow: 0 2px 10px rgba(0,0,0,0.1); */
}

.faq-scroll-view::-webkit-scrollbar {
  width: 9px;
  height:100px;
}

.faq-scroll-view::-webkit-scrollbar-track {
  background: #ffffff;
  /* background: red; */
  border-radius: 10px;
}

.faq-scroll-view::-webkit-scrollbar-thumb {
  background: #00aaff;
  border-radius: 10px;
  /* box-shadow: 0 0 15px #000000; */
  animation: glowScroll 2s infinite linear;
}

.faq-item {
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 16px;
  color: #0f0f0f;
  text-align: justify;
}

.tab-space {
  display: inline-block;
  width: 1.5em;
}


.page56-flex1 li::marker {
  font-size: 16px;
  font-weight: bolder;
  color: rgb(29, 29, 29);
}

.DTRotaryolve .swiper-slide .page44leftcon {
  max-height: 370px;
  overflow-y: auto;
  padding-right: 3%;
  scroll-behavior: smooth;
}

.DTRotaryolve .swiper-slide .page44leftcon::-webkit-scrollbar {
  width: 9px;
  
}

.DTRotaryolve .swiper-slide .page44leftcon::-webkit-scrollbar-track {
  background: #0700003d;
  border-radius: 10px;
}

 .DTRotaryolve .swiper-slide .page44leftcon::-webkit-scrollbar-thumb {
  background: #00aaff;
  border-radius: 10px;
  /* box-shadow: 0 0 10px #4c72db;===== */
  animation: glowScroll 2s infinite linear;
}

@keyframes glowScroll {
  0% {
    box-shadow: 0 0 5px #4c72db;
  }
  50% {
    box-shadow: 0 0 15px #4c72db;
  }
  100% {
    box-shadow: 0 0 5px #4c72db;
  }
}



.transparent-table {
  border-collapse: collapse;
  background-color: transparent;
  text-align: center;
  width: 95%;
  border-radius: 3px;
  margin-top: 20px;
}

.transparent-table th,
.transparent-table td {
  border: 1px solid rgb(0, 0, 0);
  background-color: transparent !important;
  padding: 8px;
}




.valve-guide {
  width: 80%;
  max-height: 90vh;
  overflow-y: auto;
  margin: 10px auto;
  padding: 25px 30px;
  border-radius: 15px;
  line-height: 1.6;
  color: #080000;
  font-family: 'Segoe UI', sans-serif;
}

.valve-guide::-webkit-scrollbar {
  width: 9px;
  height:100px;
}

.valve-guide::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
}

.valve-guide::-webkit-scrollbar-thumb {
  background: #00aaff;
  border-radius: 10px;
  /* box-shadow: 0 0 15px #000000; */
  animation: glowScroll 2s infinite linear;
}


.valve-guide h2 {
  color: #1B7AC8;
  margin-top: 20px;
  font-size: 22px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

.valve-guide ul {
  margin-left: 20px;
  padding-left: 10px;
}

.valve-guide li {
  margin-bottom: 6px;
}

.valve-guide .examples {
  background: transparent;
  padding: 15px;
  margin-top: 15px;
  border-left: 5px solid #1B7AC8;
  border-radius: 8px;
}

.valve-guide table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.valve-guide table,
.valve-guide th,
.valve-guide td {
  /* border: 1px solid #ccc; */
  border: 1px solid black;
}

.valve-guide th,
.valve-guide td {
  padding: 10px;
  text-align: left;
}

.valve-guide th {
  /* background-color: #dbeeff; */
}

.section-title {
  margin-top: 15px;
  font-size: 18px;
  color: #1a0afc;
}

.tips {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;
  margin-top: 15px;
}

.tips h3 {
  margin-bottom: 10px;
  color: #444;
}

.tips ol {
  padding-left: 20px;
}

.tips ol li {
  margin-bottom: 10px;
}

.tips ol ol {
  margin-top: 8px;
  padding-left: 20px;
}

 .thankyou {
  width: 100%;
  height: 100%;
  font-size: 10vw;
  color: #000000;
  font-weight: 700;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  font-family: 'Open Sans';
}

.thankyou #than {
  color: transparent;
  -webkit-text-stroke: 2px #000000;
  text-stroke: 100% #969696;
}









 
:root {
   --black-color: #17181c;
   --blue-color: #3e50b4;
   --white-rbg-color: 255, 255, 255;
   --green-rbg-color: 0, 212, 113;
}
 

.cursor {
   width: 20px;
   height: 20px;
   border: 10px solid rgba(var(--white-rbg-color), .8);
   border-radius: 50%;
   position: absolute;
   transition-duration: 200ms;
   transition-timing-function: ease-out;
   animation: cursor-animate 550ms infinite alternate;
   pointer-events: none;
   z-index: 999999;
}
 
.cursor::after {
   content: "";
   width: 40px;
   height: 40px;
   border: 15px solid rgba(var(--white-rbg-color), .2);
   border-radius: 50%;
   position: absolute;
   top: -34px;
   left: -34px;
   animation: cursor-animate-2 550ms infinite alternate;
}

/* ------------------ */




/*Modificador*/
.cursor--expand {
   animation: cursor-animate-3 550ms forwards;
   border: 10px solid #00aaff;
    /* rgb(var(--green-rbg-color)); */
}
 
.cursor--expand::after {
   border: 15px solid #00aaff;
   /* rgba(var(--green-rbg-color), .3); */
}
 
/*Keyframes*/
@keyframes cursor-animate {
   from {
      transform: scale(1);
   }
 
   to {
      transform: scale(1.5)
   }
}
 
@keyframes cursor-animate-2 {
   from {
      transform: scale(1);
   }
 
   to {
      transform: scale(.3);
   }
}
 
@keyframes cursor-animate-3 {
   0% {
      transform: scale(1);
   }
 
   50% {
      transform: scale(3);
   }
 
   100% {
      transform: scale(1);
      opacity: 0;
   }
}
 


.reveal-list li {
  opacity: 0;
  transform: translateY(20px);
  animation: revealLine 0.5s forwards;
  animation-delay: calc(var(--i) * 0.2s);
}

.reveal-list li:nth-child(1) { --i: 0; }
.reveal-list li:nth-child(2) { --i: 1; }
.reveal-list li:nth-child(3) { --i: 2; }
.reveal-list li:nth-child(4) { --i: 3; }
.reveal-list li:nth-child(5) { --i: 4; }

@keyframes revealLine {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.leftquest::-webkit-scrollbar {
  width: 8px;
}

.leftquest::-webkit-scrollbar-track {
  background: #fff;
}

.leftquest::-webkit-scrollbar-thumb {
  background: #00aaff;
  border-radius: 4px;
}

.leftquest::-webkit-scrollbar-thumb:hover {
  background: #00aaff;
}



/* page44leftcon Text reveal code */
/* .page44leftcon > * {
  opacity: 0;
  transform: translateY(20px);
}

/* This will apply the animation */
 /* .page44leftcon.reveal > * {
  opacity: 1;
  transform: translateY(0);
  animation: revealLine 0.6s ease forwards;
}

.page44leftcon.reveal > *:nth-child(1) {
  animation-delay: 0.1s;
}
.page44leftcon.reveal > *:nth-child(2) {
  animation-delay: 0.3s;
}
.page44leftcon.reveal > *:nth-child(3) {
  animation-delay: 0.5s;
}
.page44leftcon.reveal > *:nth-child(4) {
  animation-delay: 0.7s;
}

@keyframes revealLine {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }  */
 /* .reveal{
  border: 2px solid red;

} */
/* .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
} */

.reveal > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

/* Parent gets .revealed, child elements will reveal one by one */
.reveal.revealed > *:nth-child(1) {
  transition-delay: 0.1s;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed > *:nth-child(2) {
  transition-delay: 0.3s;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed > *:nth-child(3) {
  transition-delay: 0.5s;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed > *:nth-child(4) {
  transition-delay: 0.7s;
  opacity: 1;
  transform: translateY(0);
}
/* --------------------- */
/* 
 .reveal > * {
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

.reveal.active-line > * {
  animation: lineReveal 0.6s ease forwards;
}

.reveal.active-line > *:nth-child(1) { animation-delay: 0.3s; }
.reveal.active-line > *:nth-child(2) { animation-delay: 0.4s; }
.reveal.active-line > *:nth-child(3) { animation-delay: 0.6s; }
.reveal.active-line > *:nth-child(4) { animation-delay: 0.8s; }
/* Add more if needed */

 /* @keyframes lineReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}   */
/* Base state for reveal */
.reveal > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal.revealed > *:nth-child(1) {
  transition-delay: 0.1s;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed > *:nth-child(2) {
  transition-delay: 0.3s;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed > *:nth-child(3) {
  transition-delay: 0.5s;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed > *:nth-child(4) {
  transition-delay: 0.7s;
  opacity: 1;
  transform: translateY(0);
}

/* Add more if needed */
/* SimpleBar scrollbar styling */
.simplebar-scrollbar:before {
  background: red; /* thumb color */
}

.simplebar-track.simplebar-vertical {
  width: 8px;
  background: blue;
}
/* ---------------------------- */

/* For WebKit browsers (Chrome, Edge, Safari) */
.reveal::-webkit-scrollbar {
  width: 10px;
}

.reveal::-webkit-scrollbar-track {
  background: #ffffff;
}

.reveal::-webkit-scrollbar-thumb {
  background-color: #00aaff;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.reveal::-webkit-scrollbar-thumb:hover {
  background-color: #00aaff;
}

/* Common styling for the container */
.reveal {
  overflow-y: auto;
  border-radius: 10px;
  /* 🚫 Do not include scrollbar-width or scrollbar-color here */
}


.reveal::-webkit-scrollbar {
  width: 10px;
}

.reveal::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.reveal::-webkit-scrollbar-thumb {
  background-color: #00aaff;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.reveal::-webkit-scrollbar-thumb:hover {
  background-color: #00aaff;
}


#servicesList{
  width: 100%;
  max-height: 28%;
  overflow-y: auto;
}

#servicesList::-webkit-scrollbar {
  width: 8px;
}

#servicesList::-webkit-scrollbar-track {
  background: #f0f0f0;
}

#servicesList::-webkit-scrollbar-thumb {
  background-color: #00aaff;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

#servicesList::-webkit-scrollbar-thumb:hover {
  background-color: #00aaff;
}

/* zoomable */


.zoomable-wrapper {
    position: relative;
    /* display: inline-block; */
    width: fit-content;
    max-width: 75%;
    display: flex;
    justify-content: center;
}


/* Expand icon */
.expand-icon {
  position: absolute;
  bottom: 8px;
  right: 3px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  z-index: 2;
  user-select: none;
}

/* Modal Styles */
.zoomImagemodal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.zoomImage-modal-content {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  object-fit: contain;
  background-color: white;
}

.zoomImagemodal .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}


/* ******************* magnifying galss ******************** */

.magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 120px;
  height: 120px;
  overflow: hidden;
  display: none;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.magnifier-glass img {
  position: absolute;
  pointer-events: none;
  user-select: none;
}


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

.ventinganimationvideoContainer video {
  height: auto;
  max-width: 35%;
  width: 100%;
}








#videoContainer3 {
  position: relative;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  border-radius: 10px;
}

#videoContainer3 video {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* Magnifier glass styling */
#magnifier3 {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #000;
  border-radius: 50%;
  overflow: hidden;
  display: none;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: #000;
}

/* Zoomed video inside magnifier */
#magnifier3 video {
  position: absolute;
  pointer-events: none;
  user-select: none;
}




.video-wrapper {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoomVideo {
  height: 95%;
  width: auto;
  border-radius: 8px;
}

.expand-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.expand-icon:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Modal */
.video-section-container {
    width: 100%;
    display: flex;
    gap: 15%;
    height: 100%;
    justify-content: center;
}

.video-wrapper-custom {
  position: relative;
  /* width: 50%; */
  height: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-thumb-custom {
  width: auto;
  height: 95%;
  border-radius: 8px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
}


.expand-icon-custom {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.expand-icon-custom:hover {
  background: rgba(0, 0, 0, 0.8);
}

.fullscreen-modal-custom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.fullscreen-modal-custom video {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
  background-color: white;
}

.modal-close-custom {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  z-index: 10000;
}








@keyframes riseFromBottom {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.departments1 li.animate-up {
  animation: riseFromBottom 0.5s ease-out forwards;
}




/* 3d modal faq modal */

.faq-model {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background: white;
    position: absolute;
    width: 25%;
    top: 18%;
    right: 1%;
    display: none;
}

.faq-model-item {
  border-bottom: 1px solid #e2e2e2;
}

.faq-model-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  background: #fff;
  font-weight: 600;
  font-size: 1vw;
}

.faq-model-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  color: #111;
  background: #fafafa;
  font-size: 1vw;
  transition: all 0.3s ease;
}

.faq-model-answer.open {
  padding: 15px 20px;
  max-height: 500px;
}

.chevron {
  transition: transform 0.3s ease;
  font-size: 14px;
}