.Bodback{
	min-height: 60vh;
	
}


.scroll-back {
	position: relative;
	justify-content: center;
    align-items: center;
	text-align: center;
    min-height: 470px;
	height: 100%;
	max-width: 680px;
	margin: auto;
	
}

.x5{
	position: relative;
	background-image: url("Img/x54.png") ;
	background-repeat:  no-repeat;
	background-size: 105%;
    object-fit: cover;
	bachground-position: 50% 50%;
}

.expandable-container {
	flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
    position: relative; 
    width: 100%;
    top: 0;
    left: 0;
    min-height: 0px;
    height: 0px;
    overflow: hidden; 
    transition: min-height 2s ease-out;
	
	
	z-index: 100;
	
}

.expandable-container::before,
.expandable-container::after {
  content: '';
  position: absolute;
  background-color: #3498db; 
  transition: transform 2s ease-out;
	
}

.expandable-container::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0px; /* Top line */
  transform: scaleX(0); /* Initially hidden */
  transform-origin: left;
	
	
}

.expandable-container::after {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0px; /* Bottom line */
  transform: scaleX(0); /* Initially hidden */
  transform-origin: right;
}

.expandable-container.expanded {
  min-height: 380px;
	
 
	
}

.expandable-container.expanded::before {
  transform: scaleX(1); 
	
}

.expandable-container.expanded::after {
  transform: scaleX(1); 
}



.expandable-container2 {
	flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
    position: relative; 
    width: 100%;
    top: 0;
    left: 0;
    min-height: 0px;
    height: 0px;
	max-height: 100%;
    overflow: hidden; 
    transition: min-height 2s ease-out;
	
	
	z-index: 100;
	
}

.expandable-container2::before,
.expandable-container2::after {
  content: '';
  position: absolute;
  background-color: #3498db; 
  transition: transform 2s ease-out;
	
}

.expandable-container2::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0px; /* Top line */
  transform: scaleX(0); /* Initially hidden */
  transform-origin: left;
	
	
}

.expandable-container2::after {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0px; /* Bottom line */
  transform: scaleX(0); /* Initially hidden */
  transform-origin: right;
}

.expandable-container2.expanded {
  min-height: 380px;
 
  
}

.expandable-container2.expanded::before {
  transform: scaleX(1); 
	
}

.expandable-container2.expanded::after {
  transform: scaleX(1); 
}



.container-swiper{
	white-space: wrap;
	position: relative;
	justify-content: center;
    align-items: center;
	text-align: center;
	
	padding-left: 25px;
	padding-right: 25px;
		
}

.slider-wrapper{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    max-width: 600px;
	min-height: 330px;
	
    margin: 20px 20px 15px;
	
}

.card-list .card-item{
    color:#fff;
    user-select: none;
	width: 100%;
	height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	
}



.slider-wrapper .swiper-pagination{
	justify-content: center;
	align-items: center;
	text-align: center;
    padding-bottom: 15px;
	padding-left: 5px;
	padding-right: 5px;
	
}


.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 14px)) !important;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 14px)) !important;
  box-shadow: inset 0px 0px 0px rgba(38, 38, 38, 0.65);
  background: var(--swiper-pagination-bullet-inactive-color, rgba(184, 164, 101, 0.15)) !important; 
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.55) !important;
  --swiper-pagination-bullet-horizontal-gap: 10px;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%) !important; 
  transform: scale(0.85) rotate(45deg) !important;
  border-style: ridge !important;
  border-width: 2px !important;
  border-color: #D0D0D0;
  opacity: 0.85 !important;
}

.swiper-pagination-bullet-active {
     background-color:  #9FECFD !important;
}


.slider-wrapper .swiper-slide-button{
    color:#fff;
    margin-top: -50px;
    transition: 0.2 ease ;
	
}
.slider-wrapper .swiper-slide-button:hover{
    color:#4658ff;

}



@media(max-height: 500px){
	
	
	
	.expandable-container{
		display: none !important;
	}
	
	.expandable-container2{
		display: block!important;
	}
	
	
	
}

@media(max-width:768px){
	
    .slider-wrapper{
        margin: 10px 15px 20px;
		min-height: 360px;
    }
    .slider-wrapper .swiper-slide-button{
        display: none;
    }
    
	.expandable-container.expanded {
  		min-height: 400px;
	
	}
	
	.expandable-container2.expanded {
  		min-height: 400px;
	
	}
	
}

@media(max-width: 678px){
	
	.slider-wrapper{
		min-height: 380px;
	
	}
	
	.expandable-container.expanded {
  		min-height: 410px;
	
	}
	
	.expandable-container2.expanded {
  		min-height: 410px;
	
	}
	
}

@media(max-width: 620px){
	
	
	scroll-back {
		
		min-height: 400px;
		
		
	
}
	
	.hide1{
		display: none !important;
	}
	
	.hide2{
		display: block!important;
	}
	
}


@media(max-width: 608px){
	
	.slider-wrapper{
		min-height: 400px;
	
	}
	
	.expandable-container.expanded {
  		min-height: 440px;
	
	
	}
	
	.expandable-container2.expanded {
  		min-height: 440px;
	
	
	}
	
	
	.x5{
		
		background-image: url("Img/x58.png") ;
		background-size: 100%;
		
		
	}
	
}


@media(max-width: 538px){
	
	
	
	.slider-wrapper{
		min-height: 450px;
	
	}
	
	.expandable-container.expanded {
  		min-height: 490px;
	
	
	}
	
	.expandable-container2.expanded {
  		min-height: 490px;
	
	
	}
	
}

@media(max-width: 420px){
	
	.slider-wrapper{
		min-height: 530px;
	
	}
	
	.expandable-container.expanded {
  		min-height: 570px;
	
	}
	
	
	.expandable-container2.expanded {
  		min-height: 570px;
	
	}
	
	.x5{
		
		background-image: url("Img/x56.png") ;
		background-size: 100%;
		
	}
	
}

@media(max-width: 370px){
	
	.slider-wrapper{
		min-height: 580px;
	
	}
	
	.expandable-container.expanded {
  		min-height: 630px;
	
	}
	
	.expandable-container2.expanded {
  		min-height: 630px;
	
	}
	
	.x5{
		
		background-image: url("Img/x56.png") ;
		background-size: 100%;
		
	}
	
}