@charset "utf-8";

/* CSS Document */
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 630px; */
}

/* ---- ------------*/

.aex-banner-item{ display: flex;flex-flow: row wrap; justify-content: flex-start; align-items: center; }
.dada{background-color: #da8e76;}
.newd{background-color: #eca054;}
.cover{background-color: #7c95bf;}
.picture{background: url(../images/aex/banner/picture-bg.jpg) no-repeat; background-size: cover;} 
.friends{background-color: #b4b62f;}
.aloo-chili{background-color: #6076ba;}

.aex-banner-content {text-align: left;  padding: 0 5% 0 10%; flex: 1 0 50%; transform: translateY(24%); position: relative;}

.aex-banner-img {flex: 1 0 50%;
  transform: translateX(0) translateY(0%);
  animation-duration: 1s; animation-fill-mode: both;
  animation-name: fadeInBottom 
} 

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to { opacity: 1 }
}



.swiper-wrapper:nth-child(6n+1)  .swiper-slide .aex-banner-img{animation-delay: 0.5s;}
.swiper-wrapper:nth-child(6n+2)  .swiper-slide .aex-banner-img {animation-delay:3s;} 
.swiper-wrapper:nth-child(6n+3)  .swiper-slide .aex-banner-img{animation-delay: 7s;} 
.swiper-wrapper:nth-child(6n+4)  .swiper-slide .aex-banner-img{animation-delay: 9s;}
.swiper-wrapper:nth-child(6n+5)  .swiper-slide .aex-banner-img {animation-delay:13s;} 
.swiper-wrapper:nth-child(6n+6)  .swiper-slide .aex-banner-img {animation-delay:16s;} 
   






.slide-title  {
  font-size: 70px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 20px;
  text-transform: uppercase;
  transition: all .4s ease;
}


.slide-text p {
  opacity: 0.8;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  color: #ffffff;
  margin: 0 0 40px;
  padding-right: 50px;
  transition: all .4s ease;
}

/* ---------------aex-list------------------- */

.aex-list{margin-top: -80px; margin-bottom: 20px; z-index:8; position: relative; 
  width: 100px;
  animation: 2.5s ease-out 0s 1 slideInFromLeft;}


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

.aex-list img{animation: movingX 8s linear infinite}
@keyframes movingX {
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0)
  }

  50% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px)
  }

  100% {
      -webkit-transform: translateX(0);
      transform: translateX(0)
  }
}
/*+-----------------aex-item-----------------    */

.aex-item {
  margin: 0 auto 50px;
  text-align: center;
}

.aex-item img {
  border-radius: 15px;
}

/*-------------------*/
.cards {
  position: relative;
  width: 250px;
  height: 333px;
  margin: 0 auto 60px;
  border-radius: 15px;
  overflow: hidden;
  background: #fdf5ee;
  box-shadow: 0px 30px 50px -20px rgba(115, 63, 17, 0.7);
z-index: 1;
}

.cards .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  z-index: 100000;
  transform-origin: top;
}

.cards:hover .imgBx {
  transform: translateY(30px) scale(0.5);
}

.cards .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.cards .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 20px;
  transform: translateY(100%);
  transition: 0.5s;
}

.cards:hover .content {
  transform: translateY(0);
}

.cards .content .details h4 {
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  line-height: 22px;
  color: var(--red);
  padding: 0 8px;
  
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  
}

.cards .content .details  .aex-year {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  text-align: center;
}

.social_icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.social_icons li {
  list-style: none;
  margin: 4px 6px;
}

.social_icons li a {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 5px;
  color: #fff;
  text-decoration: none;
  transition: 0.5s;
  background: #a30d18;
}

.social_icons li a:hover {
  transform: rotate(360deg);

}

/* ------------------------------ */
@media (max-width:1400px) {.slide-title{font-size:48px;} .slide-text p {font-size:19px; } }
@media (max-width: 920px) {.slide-title  {font-size:40px;  margin: 0 0 10px;}  
.aex-banner-content{padding: 0  4% 0 10%;}
}


@media only screen and (min-width: 1177px) and (max-width: 1400px){.cover img{width: 90%;}}
@media only screen and (min-width: 768px) and (max-width: 860px){.cover img , .picture img, .newd img, .dada img, .friends img{height: 390px;}}


@media (max-width: 767px) { .aex-banner-content{order: 2; flex: 1 1 100%;  margin-top: calc(-22% + 40px);}
.aex-banner-img{order: 1; flex: 1 1 100%; transform: translateY(-10%);}
.slide-text p {font-size: 16px;font-weight: normal; }
.slide-title  {font-size: 30px;}
.aex-banner-item{position: relative; z-index: 2;}
.swiper-slide { position: relative;}  
.swiper-slide::before{z-index: 1;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  bottom: 45px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 3) 100%);}
  .swiper-slide img{ width:60%; margin:0 auto; display: block; object-fit: contain;}
}

@media (max-width:639px){.swiper-slide img{ margin:-1% auto 0;}
.swiper-slide img{ width:70%;}
.aex-banner-content{ margin-top: calc(-24% + 40px);}
}

@media (max-width:520px){.swiper-slide img{ margin:-2% auto 0;}
.swiper-slide img{ width:75%;}
.aex-banner-content{ margin-top: calc(-26% + 40px);}
}

@media (max-width:480px){.swiper-slide img{ width:86%;}
.aex-banner-content{ margin-top: calc(-30% + 40px);}
}

@media (max-width:420px){.swiper-slide img{ width:90%; margin:-8% auto 0;}}
@media (max-width:375px){
.swiper-slide img{margin-top:-10%;}
.aex-banner-content{ margin-top: calc(-33% + 40px);}
}

@media (max-width:369px){.aex-list{margin-top: -33px;}}

@media (max-width:340px){.swiper-slide img{ width:88%; margin:-25% auto 0;}}

/* ----------------------for ios iphone ------------------------- */

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
  
  
 /* @media screen and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 2) {
  .aex-banner-content {
    transform: translateY(-52%) !important;
  }
} 
   */
  
 @media only screen 
  and (min-device-width: 390px) 
  and (max-device-width: 430px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  /* Styles for iPhone 14/15/16 Pro and Pro Max models */
  
 .aex-banner-img{transform: translateY(-5%);}
  
} 
  
  
  
}