.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
  display: none !important;
}
.diff-container h2 {
    padding: 1rem 0;
    font-size: 4.5rem;
    font-weight: bold;
}
h2 {
  font-size: 2rem;
  font-weight: bold;
}
.grid-text {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto;
  gap: .01rem;
}

@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: .04rem;
  margin-bottom: 1rem;
}

.diff-container h2 {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.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: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
}
@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: 50px;
  width: 64vh;
  /* padding-left: 7rem; */
}
}


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

.strategic-img img {
width: 80%;
height: 86vh;
object-fit: cover;
}

.logistic-img img {
width: 80%;
height: 86vh;
object-fit: cover;
}

.strategic-text-container {
  padding-left: 7rem;
}


/* .logistic-text-container {
  margin-top: 3rem;
} */

.text-container {
  width: 75%;
}
.logo-container {
  width: 25%;
}
.footer-sub-container4 {
  align-items: center;
}
#text1 {
  font-weight: bolder;
  font-size: 4rem;
}
#text2 {
  font-weight:500;
  font-size:4rem;
}

@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: .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: .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: 30px 55px;
  margin-bottom: .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: #EA35F8; */
  background-color: #A30708;
  overflow: hidden;
  transform-origin: left;
  
}

.media-main-container:hover .footer-media-container3 {
  animation: expandAnimation .6s forwards;
}

@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 15px;
}
.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{white-space: nowrap;margin-right: 30px;width: 95%;}
.new-marquee-text img{white-space: nowrap;}
.logistic-container{padding-top:4rem !important}

/* animation start */
.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;
} */
.stackbox .section {
width: 100%;
}
.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;
height: 645px;
width: 100%;
}
.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";
}


.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;
transform: scale(1.5);
}
.card-text-end {
font-size: 45px;
font-weight: bold;
color: rgb(234, 53, 248);
transform: scale(1.5);


}
/* animation end */
@media screen and (max-width: 942px){
.card-text {
  transform: scale(1.2);
}
.card-text-end {
  transform: scale(1.2);
}
}
@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 .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;}
}