/*---------------------------------------------------------
Promo Section: Multiple Items
---------------------------------------------------------*/
.artdemo {
 	  float:none; display:block; border:0px solid lightgreen; padding:10px; 
}
 
.artdemo h1 {
 	margin-top:100px;  
}

 
 
 
/*--containr for each item (image+content)---------------*/
.artdemo .promo-slider3 .box{ 
  	display: flex;
    align-items:center;  
   /* padding:2rem 0rem;
    border:var(--border);*/
    border:1px solid #E1E1E1; background-color: #F6F6F6; border-radius:10px;
   /* margin:1rem 0;
    margin:1rem 0;*/
	height:30rem; font-size:1.55rem; 
 }

.artdemo .promo-slider3 .box:hover{
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
   cursor:pointer; !Important  
}
 
.artdemo .promo-slider3 .box:after  { /*to avoid the parent div's height is 0*/
	content: " ";
	display:block;
}
 
 

@media all and (max-width: 768px) {
	.artdemo .promo-slider3 .box{
		width:98%;  
		border:var(--border2);
	}
}


/*-------------------------------------------------------------------------------------------------*/
section{
    padding:5rem 9%;  
}


/*---------------------------------------------------------
Promo Section: Single Item Section (none slider)
---------------------------------------------------------*/
/*--overal container: for image+content---------------*/
.artdemo .singleitem3 .none-slider .box {
    display: flex;
    align-items:center;
    gap:1.5rem;
    border:var(--border);
    margin:1rem 0; /**/
  	height:300px; /*fixed height*/
 	width:350px; 
	border:0px solid blue; 
	background-color: #F6F6F6; border-radius:10px; cursor:pointer  !Important;  
}

/*------------------------------------------------
Media Queries
------------------------------------------------*/
@media all and (max-width:2400px){ /*largescreen*/
}

@media all and (max-width:1600px){ /*wide screen laptop*/
}

@media all and (max-width:1200px){ /*laptop*/
	.artdemo .singleitem3 .none-slider .box {
		width:350px; 
	} 
}

@media all and (max-width:991px){ /*small screen*/
	.artdemo .singleitem3 .none-slider .box {
		width:300px; 
	} 
}

@media all and (max-width:768px){ /*iPads, Tablets*/
	.artdemo .singleitem3 .none-slider .box {
		width:250px; 
	} 
}

@media all and (max-width:480px){ /*wide screen laptop*/
	.artdemo .singleitem 3.none-slider .box {
		width:150px; 
	} 
 
}

.artdemo .singleitem3 .none-slider .box:hover{ box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);}
.swiper-none-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}


@media all and (max-width: 768px) {
	.artdemo .singleitem3 .none-slider .box{ width:98%; border:var(--border2); }
}



/*---------------------------------------------------------
Swipper Button
---------------------------------------------------------*/
.swiper-button-next,
.swiper-button-prev{
    border:var(--border-hover);
    height:4rem;
    width:4rem;
    color:var(--black);
    background: #fff;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 2rem;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    background: var(--black);
    color:#fff;
}