.swiper-grid-values {
	overflow: visible;
}

.gridValues-card{
	background: #393939;
    min-height: 500px;
    padding: 25px;
    position: relative;
    cursor: pointer;
}

.main-content-gridValues{
	display: flex;
	flex-direction: column;
	/*gap: 20px;*/
	
}

.dark-mode .gridValues-card{
	background: #707070;
}

.cover-gridValues-card{
	visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 31px;
    padding-right: 31px;
    gap: 15px;
	
}
.gridValues-card:hover .cover-gridValues-card{
	visibility: unset;
    opacity: 1;
	transition: 1s all;
    color: var(--white);
}

.main-content-gridValues h4 {
	/*min-height: 80px;*/
}
.contentV{
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 25px;
	padding-bottom: 25px;
	/*left: 50%;*/
	position: relative;
	opacity: 1;
	transition: opacity 1s;
}
.gridValues-card:hover .contentV {
	opacity: 1;
	left: 0;
}
.gridValues-card p{
	
	transition: .3s all;
	opacity: 0;
}
.gridValues-card:hover p{
	opacity: 1;
}
.gridValues-card:hover h4, .gridValues-card p{
	position: relative;
    z-index: 6;
	transition: .3s all;
    color: var(--white);
}

.gridValues-card:hover .cover-gridValues-card p{
	transition: .3s all;
    color: var(--white);
}

.gridValues-btn{
	position: absolute;
    bottom: 5%;
    left: 0;
    margin-left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    border: 0;
    outline: none;
}
.gridValues-card:hover .plus-icon {
    opacity: 0;
}

.gridValues-container{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 30px;
    grid-column-gap: 25px;
}



.swiper-grid-values .slider-number-controls {
	margin-top: 3rem;
}

.swiper-grid-values .swiper-scrollbar-drag {
	background: #707070;
}


.swiper-grid-values-control {
	position: relative;
	margin-top: 3rem;
	padding-bottom: 8px;
}


.swiper-grid-values-control  .swiper-button-prev {
	overflow: visible;
	right: 75px;
	left: auto;
	px;
	top: 0;
} 
.swiper-grid-values-control  .swiper-button-next {
	right: 0;
	top: 0;
}
.swiper-grid-values-control .swiper-button-next::after, .swiper-grid-values-control  .swiper-button-prev::after  {
	color: #707070;
	font-weight: bold;
	font-size: 30px;
}
.swiper-grid-values-control  .swiper-button-next:hover::after, .swiper-grid-values-control  .swiper-button-prev:hover::after  {
	color: #00bb7d
}

.swiper-grid-values-scrollbar{
	width: 88% !important;
}

@media (max-width: 1140px){
	.cover-gridValues-card{
		padding-top: 13%;
	}
	.gridValues-container{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 800px){
	.gridValues-container{
		grid-template-columns: repeat(1, 1fr);
	}
	
	.contentV{
		opacity: 1;
		visibility: visible;
		left: 0;
	}
	
	.main-content-gridValues h4 {
    	display: flex;
		z-index: 99;
		color: var(--white);
	}
	
	.gridValues-btn{
		display: none;
	}
	
	.gridValues-card p{
		opacity: 1;
	}
	
	.cover-gridValues-card{
		visibility: visible;
		opacity: 1;
	}
}

@media only screen and (max-width: 1000px){
	.swiper-grid-values-scrollbar{
		width: 80% !important;
		margin-right: 10px;
		margin-left: 10px;
	}
}

@media only screen and (max-width: 700px){
	.swiper-grid-values-scrollbar{
		width: 65% !important;
		margin-right: 10px;
		margin-left: 10px;
	}
	
	.gridValues-card{
    min-height: 400px;
  
}
.swiper-grid-values {
    margin-right: 16px !important;
    margin-left: 16px !important;
}
.gridValues-card {
    background: #393939;
    min-height: 500px;
    padding: 20px;
    position: relative;
    cursor: pointer;
}	
}