body{
        background: linear-gradient(90deg, Gray 50%, #b22222 50%);
    }
    .box{
		margin: 0;
		padding: 0;
		/*min-height: 100vh;*/
		display: flex;
		justify-content: center;
		align-items: center;
		/*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
		
		/*overflow-x: hidden;*/
		/*overflow-y: hidden;*/
		margin-top:50px;
		margin-bottom:50px;
	}
	input{
		display: none;
	}
	.back-btn img{
		width: 100%;
		height: 100%;
	}
	#cover img{
		width: 100%;
		height: 100%;
	}
	.book{
		display: flex;
	}
	#cover{
		width: 40vw;
		height: 90vh;
	}
	.flipbook{
		width: 40vw;
		height: 90vh;
		position: relative;
		perspective: 1500px;
		
	}
	.flip{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transform-origin: left;
		transform-style: preserve-3d;
		transform:rotateY(0deg);
		transition: 0.5s;
		color: #000;
		
	}
	.front p{
		font-size: 1.2vw;
		line-height: 1.7vw;
		margin-top:2vw;
	}
	.front{
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 13px;
		box-shadow: inset 20px 0px 50px rgba(0, 0, 0, 0.5);
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	
	.back-btn{
		cursor: pointer;
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		z-index: 999;
		transform:rotateY(180deg);
		backface-visibility: hidden;
		background-color: #000;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		
	}
	#cover {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		background-image: url("hero.webp");
		/*background-attachment: fixed;*/
		background-size: cover;
		background-position: right;
		/*background-position-y:100px;*/
		
	}

	.back-btn img{
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	.next-btn{
		cursor: pointer;
	}
	
	#p1{
		z-index: 3;
	}
	#p2{
		z-index: 2;
	}
	#p3{
		z-index: 1;
	}
	#p4{
		z-index: 3;
	}
	#p5{
		z-index: 2;
	}
	#p6{
		z-index: 1;
	}
	#c1:checked ~ .flipbook #p1{
		transform: rotateY(-180deg);
		z-index: 1;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	#c2:checked ~ .flipbook #p2{
		transform: rotateY(-180deg);
		z-index: 1;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	#c3:checked ~ .flipbook #p3{
		transform: rotateY(-180deg);
		z-index: 1;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	@keyframes myAnimation {
  		from {transform: translate(0 vh);}
  		to {transform: translate(1000 vh);}
	}
	#c4:checked ~ .flipbook #p4{
		transform: rotateY(-180deg);
		z-index: 1;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	#c5:checked ~ .flipbook #p5{
		transform: rotateY(-180deg);
		z-index: 1;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	#c6:checked ~ .flipbook #p5{
		transform: rotateY(0deg);
		z-index: 2;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	#c6:checked ~ .flipbook #p4{
		transform: rotateY(0deg);
		z-index: 3;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	.front h2{
		margin-top: 45px;
		/* margin-bottom: 65px; */
		height: 30%;
		font-size:50px;
		color: #2C3E50;
	}
	.front p{
		margin-left: 5%;
		width:90%;
		text-align: justify;
	}
	.text{
		height: 70%;
		justify-items: center;
		align-items: center;
	}
	.book-mobile{
		display: none;
	}
	#b1{
			background-image: url("download_head2.jpg");
			background-attachment: fixed;
		background-size: cover;
		background-position: left;
	}
	#b2{
			background-image: url("Consultancy.jpg");
			background-attachment: fixed;
		background-size: cover;
		background-position: center;
	}
	@media (max-width: 1100px) {
		.book{
			display: none;
		}
		.flipbook{
			width: 80vw;
		}
		/* #cover{
			position: absolute;
		}
		.front{
			width: 90vw;
		}
		#cover{
			display: none;
		} */
		
		.book-mobile{
			display: flex;
		}
		.front{
			border-radius: 20px;
		}
		.front p{
			font-size: 1.8vh;
			line-height: 2.7vh;
			margin-top:3vh;
			color: whitesmoke;
		}
		#page1{
			background-image: linear-gradient(to right, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.6) 60%), url("hero.webp");
			background-size: cover;
		}
		#page2{
			background-image: linear-gradient(to right, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.6) 60%), url("download_head2.jpg");
			background-size: cover;
		}
		#page3{
			background-image: linear-gradient(to right, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.8) 60%), url("Consultancy.jpg");
			background-size: cover;
		}
		.front h2{
			color: #b22222;
		}
		
	}