@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
.carvaansleep{
	font-family: 'Quicksand', sans-serif;
	line-height: 1.4;
	font-weight: 400;
	color: #fff;
}
#sleepSound{position: absolute;z-index: -1;visibility: hidden;}

.carvaansleep .section{position: relative;}
.carvaansleep .carvaanlogo{
	position: absolute;
	top: 30%;
	left: 20%;
	width: 20%;
}
.carvaansleep .home-text{position: absolute;left: 25%;margin: 0 auto;text-align: center;bottom: 8%;width: 30%;}
.carvaansleep .bg-dark{background-color: #396c89;}
.carvaansleep .bg-dark-1{background-color: #174C6A;}

.carvaansleep .secondSection .h2_heading{text-align: center;text-transform: capitalize;margin-top: 2rem;}

.carvaansleep .third-text{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 5%;
	text-align: center;
}
.carvaansleep .thirdSection1 .third-text{top: 42%;}
.carvaansleep .third-text p{font-size: 4rem;text-transform: capitalize;color: #fff;}

.carvaansleep .fourthSection, 
.carvaansleep .fifthSection, 
.carvaansleep .sixthSection{padding: 5rem 0;}
.carvaansleep .h3_heading{text-align: center;margin: 1rem auto;color: #fff;font-size: 4rem;text-transform: capitalize;line-height: 1.2;}
.carvaansleep .fourthList{list-style-type: none;padding: 0;margin: 3rem auto;text-align: center;}
.carvaansleep .fourthList li{
	display: inline-block;
	width: 9%;
	text-align: center;
	padding: 1%;
	vertical-align: top;
	position: relative;
	cursor: pointer;
}
.carvaansleep .fourthList li p{color: #fff;margin-top: 10px;text-transform: capitalize;}

.carvaansleep .fifthSection .innerContent{position: relative;}
.carvaansleep .fifthSection .overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.6);
	text-align: center;
	color: #fff;
	padding: 40% 25%;
}
.carvaansleep .fifthSection .overlay .h2_heading{font-weight: 400;line-height: 1.2;text-transform: uppercase;}

.carvaansleep .sixthSection .container{width: 70%;margin: 0 auto;}
.carvaansleep .sixthSection .h2_heading{font-size: 6rem;line-height: 1.2;}
.carvaansleep .sixthSection .sixthList{margin-top: 2rem;}
.carvaansleep .sixthSection .sixthList li{margin-bottom: 15px;font-size: 2rem;}

.carvaansleep .seventhSection .innerContent{position: relative;}
.carvaansleep .seventhSection .overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 10%;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	padding: 0% 10%;
	text-transform: uppercase;
}

.carvaansleep .eightSection{padding: 5rem 0;min-height: auto;}
.carvaansleep .eightSection .eighth-img{width: 40%;margin-bottom: 3rem;}
.carvaansleep .eightSection .carvaansleepTitlImg{line-height: 2;}

.carvaansleep .playPauseBox{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: block;
}
/* */
.carvaansleep .pause-icon {
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	margin: 0 auto;
	width: 100%;
} 
/* 
.carvaansleep .fourthList li:not(.no-hover):hover::before {
    content: url('../images/carvaansleep/play-icon.png'); 
    position: absolute;
	left: 0;
	right: 0;
	top:0;
	margin: 0 auto;
}
.carvaansleep .fourthList li:not(:has(.no-hover)):hover::before {
    content: url('../images/carvaansleep/pause-icon.png');
    position: absolute;
	left: 0;
	right: 0;
	top:0;
	margin: 0 auto;
}
.carvaansleep .fourthList li:not(.playing):hover::before {
    content: url('../images/carvaansleep/play-icon.png'); 
    position: absolute;
	left: 0;
	right: 0;
	top:0;
	margin: 0 auto;
} */
.carvaansleep .fourthList li.playing:hover::before {
    content: none;
}
.carvaansleep .fourthSectionInfo{display: block; margin-top: 5px; font-size: 45%; font-style: normal; color:rgba(255, 255, 255, 0.8)}

.carvaansleep .imgAreaSleep{position: relative; display: block;}
.carvaansleep .fourthList li .imgAreaSleep:hover::before {
    position: absolute;
	left: 0;
	right: 0;
	top:0;
	margin: 0 auto;
	background-image: url('../images/carvaansleep/play-icon.png');
    background-size: 100% 100%;
    display: inline-block;
    width: 100%; 
    height: 100%;
    content:"";
}
.carvaansleep .fourthList li.playing .imgAreaSleep:hover::before {
    content: none;
	background: none;
}
/*Responsive*/
@media(max-width:767px){
    .imgBlk{width: 100%;margin: 0;}
    .carvaansleep .carvaanlogo{
	    top: 10%;
	    left: 0%;
	    width: 50%;
	    right: 0;
	    margin: 0 auto;
	}
	.carvaansleep .third-text{top: 45%;}
	.carvaansleep .thirdSection1 .third-text{top: 0%;}
	.carvaansleep .third-text p{font-size: 2rem;}
	.carvaansleep .h3_heading{font-size: 2rem;}
	.carvaansleep .fourthList li{width: 25%;}
	.carvaansleep .home-text{bottom: 60%;left: 0;right: 0;width: 90%;}

	.carvaansleep .fourthSection, 
	.carvaansleep .fifthSection, 
	.carvaansleep .sixthSection{padding: 3rem 0;}

	.carvaansleep .fifthSection .col-sm-3{width: 49%;display: inline-block;}
	.carvaansleep .fifthSection .innerContent{margin: 10px;}
	.carvaansleep .fifthSection .overlay{padding: 0%;}
	.carvaansleep .fifthSection .h2_heading{padding-top: 40%;font-size: 1.5rem;}

	.carvaansleep .sixthSection .h2_heading{font-size: 3rem;}
	.carvaansleep .sixthSection .sixthList{margin-top: 1rem;padding-left: 2rem;}
	.carvaansleep .sixthSection .container{width: 85%;}
	.carvaansleep .sixthSection .sixthList li{font-size: 1.3rem;}

	.carvaansleep .seventhSection .overlay{padding: 0;}
	.carvaansleep .seventhSection .h2_heading{font-size: 2rem;line-height: 1.4;}

	.carvaansleep .eightSection{padding: 3rem 0;min-height: auto;text-align: center;}
	.carvaansleep .eightSection .eighth-img{width: 80%;margin: 0 auto;margin-bottom: 3rem;}
	.carvaansleep .eightSection .carvaansleepTitlImg{line-height: 2;}
	.carvaansleep .pause-icon {
		width: 100%;
	} 
	.carvaansleep .fourthList li .imgAreaSleep:hover::before {
		content: none;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px){
    
}
@media screen and (min-width: 1025px) and (max-width: 1281px){
    
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) and (orientation : portrait){
    
}
@media screen and (min-width: 1367px) and (max-width: 1600px){
    
}
@media screen and (min-width: 1601px) and (max-width: 1920px){
    
}
@media screen and (min-width: 1921px) and (max-width: 3000px){
    
}