.carousel-control-prev, 
.carousel-control-next{   
	top: 10%;
	height: 75%;
	width: 25%;
	position: center;
	border-radius: 25%;
	background: transparent	;
}
.carousel-control-prev{
	left: 0%;
}
.carousel-control-next{
	right: 0%;
}
        button .carousel-control-prev-icon {
    display: none;
}
button .carousel-next-icon {
    display: none;
}
.carousel-indicators{
	bottom: 90%;
	left: 0%;
}
    .carousel-indicators [data-bs-target] {
        width: calc(10% - 10px);
    }
.carousel-inner{
	position: relative;
    box-sizing: border-box;
    border-radius: 4%;
	}
.carousel-caption{
	position: absolute;
	left: 0;
	bottom: 0;	
	/*height: 40%;*/
	width: 100%;
	/*background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,
                    rgba(0,0,0,.3) 30%,
                    rgba(0,0,0,.4) 60%,
                    rgba(0,0,0,.6) 80%)*/

	}
	.carousel-inner {
		height: 100%;
	}
	.carousel-item{
		
		width: 480px;
        height: 760px;
		margin: auto;
       
	}
    .carousel .btn-prev {
        left: -50px;
        background-color: white;
    }
    .carousel .btn-next {
        right: -50px;
        background-color: white;
    }
    .carousel-item .carousel-image img {
            height: 760px;
            width: 480px;
        }
    @media (min-height: 600px) and (max-height: 600px) and (min-width: 1024px) and (max-width: 1024px) 
    { 
        .carousel-item{
		 height: 85vh;
            width: 35vw;
	    }
        .carousel-item .carousel-image img {
            height: 520px;
            width: 480px;
        }
        .carousel-item >.carousel-caption >.carousel-text >p {
         font-size: calc(0.7rem + 0.2vw);
        }
    }
	@media (max-width: 1000px)
	{
		.carousel-item{
		 height: 760px;
            width: 480px;
	    }
        
	    .logo{
		    height: 50px;
	        width: 50px;
	    }
	}
    @media (max-width: 850px)
	{
		.carousel-item{
		 height: 760px;
            width: 480px;
	    }
        
	    .logo{
		    height: 50px;
	        width: 50px;
	    }
	}
	@media (max-width: 700px)
	{
		.carousel-item{
		   height: 740px;
            width: 450px;          
	    }
        .carousel-item .carousel-image img {
           
            width: 99vw;
        }
	    .logo{
		    height: 45px;
	        width: 45px;
	    }        
	}
    @media (min-height: 360px) and (max-height: 360px) and (min-width: 640px) and (max-width: 640px) 
    { 
        .carousel-item{
		 height: 80vh;
            width: 45vw;
	    }
    }
	@media (max-width: 550px)
	{
		.carousel-item{
		    height: 90vh;
            width: 100vw;
	    }
        .carousel-item .carousel-image img {
            height: 98vh;
            width: 100vw;
        }
        .carousel {
         height: 100%;
        }
        .carousel-inner {
            border-radius: 0px;
        }
	    .logo{
		    height: 38px;
	        width: 38px;
	    }
        .carousel .carousel-control-next-icon {
           display: block;
           position: absolute;
           right: -5px;
        }
        .carousel .fa-rotate-left {
            display: block;
           position: absolute;
           right: 5px;
        }
        .carousel .carousel-control-prev-icon {
           display: block;
           position: absolute;
           left: -5px;
        }
        .carousel .btn-prev {
            display: none;
        }
        .carousel .btn-next {
            display: none;
        }
	}

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.carousel-image{
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}


.bg-image {
  /* The image used */
  /*background-image: url("Sample-jpg-image-200kb.jpg");*/
  
  /* Add the blur effect */
  /*filter: blur(10px);
  -webkit-filter: blur(10px);*/
  height:100vh;
 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.story-image{
	 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;  
}
.logo{
	left: 5%;
	top: 5%;
	z-index: 100;
	height: 60px;
	width: 60px;
	border-radius: 20%;
	background-color: rgba(38, 38, 37,0.7);
}
.icon-share{
	z-index: 100;
	right: 5%;
	top: 5%;
	background-color: rgba(38, 38, 37,0.7);
	color: rgb(250, 250, 245);
	width: 30px;
	text-align: center;
}