.diff-container h2 {
  padding: 1rem 0;
  font-size: 4.5rem;
  font-weight: bold;
}
h2 {
  font-size: 2rem;

}
.grid-text {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto;
  gap: 0.01rem;
  margin-top: 50px;
}

@media screen and (min-width: 320px) and (max-width: 900px) {
  .grid-text {
      grid-template-columns: auto;
  }
}

.grid-content {
  /* border: none; */
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.grid-content h3 {
  font-size: 1.5rem;
  letter-spacing: 0.04rem;
  margin-bottom: 1rem;
  font-size: 28px;
  text-transform: capitalize;
  /* line-height: 38px; */
}

.diff-container h2 {
  padding-top: 1rem;
  padding-bottom: 3rem;
  font-size: 90px;
  /* line-height: 90px; */
}

.strategic-design-container {
  position: relative;
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  padding-top: 9rem;
}
.logistic-container {
  position: relative;
  margin: 3rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 45px;
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  .strategic-img {
      width: 100%;
      background-color: pink;
  }
  .strategic-text-container {
      width: 100%;
  }
  .logistic-img img {
      width: 100%;
  }
  .logistic-img {
      max-width: 100%;
      padding-top: 0;
      width: 64vh;
      /* padding-left: 7rem; */
  }
}
.logistic-container .logistic-text-container.scrolling-element.aos-init.aos-animate{
  padding: 0;
}


.strategic-text-container,
.logistic-text-container h2 {
  padding-bottom: 1rem;
}

.strategic-img img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.logistic-img img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
@media (min-width: 768px){
	.strategic-img img,
	.logistic-img img{height:auto;}
}
.strategic-text-container {
  padding-left: 100px;
}

/* .logistic-text-container {
  margin-top: 3rem;
} */
.about .logo-slide h3{text-transform:initial;}
.about .service-container p{
  /* font-size:3rem; */
  font-size: 90px;
  line-height: 90px;


}
.text-container {
  /* width: 75%; */
  width:60% ;
}
.logo-container {
  width: 25%;
  margin-left: 20px;
}
.footer-sub-container4 {
  align-items: center;
}

#text1 {
  font-weight: bolder;
  /* font-size: 4rem; */
  font-size: 90px;
  margin: 0;
  /* line-height: 0; */
}
#text2 {
  font-weight: 300;
  /* font-size: 4rem; */
  font-size: 90px;
  margin: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  #text1,
  #text2 {
      font-size: 2rem;
  }
  /* FOOTER CSS */
  .footer-sub-container1 h3 {
      padding: 8px 55px;
      font-size: 3.25rem;
      font-weight: bold;
  }
}
.media-main-container {
  position: relative;
  margin-bottom: 0.1rem;
  width: 100%;
  height: 7rem;
  border-bottom-width: 3px;
}
@media screen and (min-width: 320px) and (max-width: 1600px) {
  .footer-sub-container1 h3 {
      font-size: 50px;
  }
}

.media-main-container {
  position: relative;
  margin-bottom: 0.1rem;
  width: 100%;
  height: 7rem;
  border-bottom: 2px solid #fff;
}

.footer-sub-container1 {
  /* margin-bottom: .1rem; */
  border-bottom: 3px solid #fff;
}
.footer-media-container2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  padding: 18px 55px;
  margin-bottom: 0.5rem;
}

/* .media-text h3 {
  font-size: 3.25rem;
  font-weight: bold;
} */
/* @media screen and (min-width: 320px) and (max-width: 1600px) {
  .media-text h3 {
      font-size: 35px;
  }
} */
@media screen and (min-width: 320px) and (max-width: 900px) {
  .strategic-design-container {
      flex-direction: column;
      align-items: flex-start;
      padding-top: 4px;
  }
  .strategic-text-container {
      padding-left: 0;
  }
  .logistic-container {
      flex-direction: column-reverse;
      align-items: flex-start;
  }
  .logistic-container {
      margin-top: 1rem;
  }
  .logistic-text-container {
      margin-top: 1rem;
      max-width: 90%;
  }
}

.footer-media-container3 {
  position: absolute;
  display: flex;
  align-items: left;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #A30708;
  overflow: hidden;
  transform-origin: left;
  transition: height 0.35s ease;
}

.media-main-container:hover .footer-media-container3 {
  /* animation: expandAnimation 0.6s forwards; */
  height: 100%;
}

@keyframes expandAnimation {
  0% {
      height: 0;
      transform: scaleY(0); /* Adjusted to remove translateY */
  }
  100% {
      height: 100%;
      transform: scaleY(1); /* Adjusted to remove translateY */
  }
}

.footer-media-container3::before {
  content: "";
  display: block;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.5;
  animation: moveAnimation 8s linear infinite;
}

@keyframes moveAnimation {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(100%);
  }
}
/* .new-marquee-text h3 {
  font-size: 3rem;
} */

/* Define the animation */
@keyframes marquee {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(100%);
  }
}

.footer-sub-container4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 55px 30px;
  margin-bottom: 24px;
  margin-top: 53px;
}
.footer-sub-container4 .text-container {
  line-height: 1;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .text-container {
      width: 100%;
  }
  .logo-container {
      width: 100%;
  }
  .logo-container img {
      margin: 0 !important;
  }
}

/* responsive version of shoeb sir CSS */
@media screen and (min-width: 320px) and (max-width: 900px) {
  .about-content-sect {
      padding: 0;
  }
}

.media-main-container img {
  width: 40px;
}
.new-marquee-text h3 {
  font-weight: bold;
  white-space: nowrap;
  margin-right: 30px;
  width: 95%;
  font-size: 3.25rem;
}
.new-marquee-text img {
  white-space: nowrap;
}
.logistic-container {
  padding-top: 4rem !important;
}

/* animation start */
.stackbox {
  display: flex;
  justify-content: center;
}
.stackbox .container {
  /* display: flex;
flex-direction: column; 
width: 666px; */
  width: 100%;
  overflow-y: auto;
  height: 645px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  overflow-x: hidden;
}
.stackbox .section {
  /* display: flex;
flex-direction: column; 
width: 666px; */
  width: 100%;
  overflow-y: auto;
  height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  overflow-x: hidden;
}

.item-container {
  height: 750px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  position: sticky;
  top: 0;
  overflow-x: hidden;
}
.item-container::-webkit-scrollbar {
  display: none;
}

.stackbox .container::-webkit-scrollbar {
  display: none;
}
.stackbox .section::-webkit-scrollbar {
  display: none;
}
.stackbox .card {
  /* width: 100vw;
height: 100vh; */
  /* background: rgb(20, 50, 100, 0.8); */
  /* color: grey; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
}

.item {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}

.product-name {
  padding: 30px;
  padding-left: 35px;
  background-color: white;
  margin-bottom: 0px;
}
.center {
  width: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* animation: zoomout 5s ease-out forwards; */
}
@-webkit-keyframes zoomout {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(0.67);
  }
  100% {
      transform: scale(1);
  }
}
@keyframes zoomout {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(0.67);
  }
  100% {
      transform: scale(1);
  }
}

.cont {
  position: relative;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
}
.we-help {
  color: rgb(255, 255, 255);
  font-family: NHaasGroteskDSPro-75Bd, "Neue Haas Grotesk Display Pro";
  line-height: 1;
}

.card-text {
  font-size: 45px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  font-family: NHaasGroteskDSPro-75Bd, "Neue Haas Grotesk Display Pro";
  margin-bottom: 0;
  opacity: 1;
}
.card-text-end {
  font-size: 45px;
  font-weight: bold;
  color: rgb(234, 53, 248);
}
/* animation end */
.product-manufacturing-container h3{margin-bottom:8px;}
.product-manufacturing-container h3 + p{line-height:normal;}
@media only screen and (max-width: 575px) {
  .slider .slide {
      width: 50% !important;
  }
  .item-container {
      height: 250px !important;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      align-items: center;
      position: sticky;
      top: 0;
  }
  .btn-center {
      margin: 10px auto 0;
  }
  .scroll-container {
      margin-bottom: 5px;
      padding-bottom: 5px;
  }
  .stackbox .container {
      /* display: flex;
flex-direction: column; */
      width: 450px;
      overflow-y: auto;
      height: 500px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      align-items: center;
      overscroll-behavior: auto;
  }
  .stackbox .section {
      /* display: flex;
flex-direction: column; */
      width: 450px;
      overflow-y: auto;
      height: 500px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      align-items: center;
      overscroll-behavior: auto;
  }
  .stackbox .card {
      height: 500px;
  }
  .port-images {
      display: flex;
      flex-direction: column;
      /* width: 450px; */
      overflow-y: auto;
      /* height: 345px; */
      scrollbar-width: none;
      -ms-overflow-style: none;
      align-items: center;
      overscroll-behavior: auto;
  }
  .port-images img {
      width: 400px;
  }
}
@media (min-width:993px) {
	/* .about .container{margin-left:0;padding-left:57px;padding-right:57px;} */
}
@media (min-width: 768px) {
	.about .diff-container .grid-content{margin-bottom:40px;}
	.about .product-manufacturing-container .grid-content{margin-bottom:30px;}
}
.about .diff-container .grid-content p{max-width:475px;}
@media (max-width: 767px) {
	.strategic-text-container{margin-top:40px;}
	.logistic-container {
	  padding-top: 0 !important;
	  margin-bottom:0;
	}
}