@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Oswald:wght@200..700&display=swap');

* { 
    margin: 0;
    padding: 0;
    /* box-sizing: border-box;  */
    font-family: "Nunito Sans", sans-serif;
}


#hideButton{
    position:fixed;
    height:100vh;
    width:100%;
     z-index:10;
     display:flex;
     background-color:#000000b0;
}

#hideButton p{
    margin:auto;
    display:block;
     align-items: center;
     justify-content: center;
}

#hideButton p{
     
     color:#fff;
    
}

/* loader */

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0); /* Initial background color with opacity */
  transition: background-color 4s ease-in-out; /* Transition duration and easing */
  z-index: 9999; /* Ensure loader sits above other elements */
  display: grid;
  place-items: center;
}

#loader.hidden {
  opacity: 0;
  display: none;
}

#loader img{
  height: 300px;

}


.bottom-pop{
  bottom: 15px;
	left: 15px;
	position: fixed;
	z-index: 997;
}

.iconInner {
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	background: #a64bf4;
	background: -webkit-linear-gradient(
		to left,
		#00dbde,
		#fc00ff,
		#00dbde,
		#fc00ff
	);
	background: -o-linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);
	background: -moz-linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);
	background: linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);
	background-position: 50%;
	background-size: 300%;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size: 1.7em;
	height: 2em;
	justify-content: center;
	width: 2em;
}



    /* header */

    header{
        position: fixed;
        top: 0;
        width: 90%;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1% 5%;
       
    }

    header .logo{
        height: 50px;
       
    }

    header .logo img{
        width: auto;
        height: 100%;
    }

    header .contact a{
        color: #fff; 
        text-decoration: none;
        margin-left: 1rem;
        font-weight: 600;
    }

    header .contact a i{
        margin-right: 0.3rem;
    }

/* FlipBook */

.main-section {
  /* or any other parent wrapper */
  margin: 0;
  display: flex;
  height: 100vh;
  perspective: 1000px;
  font: 1em/1.4 "Poppins", sans-serif;
  overflow: hidden;
  color: hsl(180 68% 5%);
  background-color: #000;
  position:relative;
}




#openFirstPage{
    position:absolute;
    top:50%;
    left:55%;
    background-color:#FFC107;
    border:1px solid #000;
        border-radius: 50px;
    padding:0.5rem 1rem 0.5rem 2rem;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}


/* main book section */

.book {
  position: relative;
  display: flex;
  margin: auto;
  width: 37%;
  height: 85vh;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 5%;
  rotate: 1 0 0 5deg;
  transition: 1s;
  margin-top: 2rem;
  z-index:5;
 
}

/* .book:hover{
  rotate: 1 0 0 0deg;
  
  transition: 1s;
  
} */


.book .register{
  position: absolute;
  left: 15%;
  bottom: 23%;
  background-color: #FFC801;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  color: #000;
  font-weight: 800;
  cursor: pointer;
  transition: 0.5s;
  scale: 1.05;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.book .register:hover{
  scale: 1;
  box-shadow: none;
}


.back-form-button{
  right: 18% !important;
  left: auto !important;
}




.book .contact{
  position: absolute;
  bottom: 2%;
  left: 12%;
}

.book .contact a{
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  color: #000;

}


.page {
  /* PS: Don't go below thickness 0.5 or the pages might transpare */
  --thickness: 4;
  flex: none;
  display: flex;
  width: 100%;
  font-size: 2cqmin;
  /*1* allow pointer events on pages */
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition:
    transform 1s,
    rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ( calc((var(--c) - var(--i) - 0.05) * calc(var(--thickness) * .23cqmin))) ;
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  
}





.front,
.back {
  position: relative;
  flex: none;
  width: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: #2d1f50;
  /* Fix backface visibility Firefox: */
  translate: 0px;
  box-sizing: border-box;
  
}

.back {
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}


/* That's it. Your FlipBook customization styles: */

.book {
  counter-reset: page -1;
  & a {
    color: inherit;
  }
}

.page {
  box-shadow: 0em .5em 1em -.2em #00000020;
  color: #000000;
}

.service-container{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.service-container p{
  font-size: 0.8rem !important;
  width:50%;
}

.service-container a{
  width: 40% !important;
  height: auto !important;
  overflow:hidden;
}

.service-container a img{
    width:100%;
    height:auto;
    
}



.mission-image{
  height: 210px !important;
  margin-top: 1rem;
  margin-bottom: 1rem;
  object-fit: contain !important;
}



.service-main-image{
  height: 300px !important;
  margin-top: 1rem;
  object-fit: contain !important;
}

.service-main-page{
  justify-content: center;
}

.service-heading{
  font-size: 3rem;
  text-align: center;
}

.why-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.whyus-main-image{
  height: 230px !important;
  margin-top: 1rem;
  object-fit: contain !important;
}

.why-content{
  width: 35%;
  height: 150px;
  border-radius: 50%;
  background-color: #FFC801;
  padding: 7%;
  text-align: center;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-content h5{
  /* margin-top: 0.7rem; */
 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.5rem;
 
}

.why-content p{
 font-size: 0.7rem !important;
 text-align: center !important;
}

.activity-images{
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.activity-images a{
  height: 200px !important;
  width: 40% !important;
  outline:4px solid #FFC801; 
  
}


.activity-images img{
  height:100%;
  width:100%;
  
}

.activity-images a:first-child{
  height: 250px !important;
}

.activity-images a:nth-child(4){
  height: 250px !important;
  margin-top: -50px;
}



.suprise-image{
  height: 250px !important;
  margin-bottom:3rem;
}

.pagegif{
  object-fit: fill !important;
}

.join-us img{
  height: 200px !important;
  object-fit: contain !important;
}

.join-us h2{
  font-size: 1.5rem !important;
  color: #000000;
  font-weight: 1000;
}

.join-us p{
  background-color: #FFC801;
  padding: 0.5rem;
  border-radius: 10px;

}

.front h4,
.back h4{
  font-size: 1rem;
  background-color: #FFC801;
  clip-path: polygon(50% 0%, 100% 0, 98% 51%, 100% 100%, 0 100%, 3% 50%, 0 0);
  text-align: center;
  padding: 0.1rem 0.5rem;
}

.front h2,
.back h2{
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  
}

.front p,
.back p{
  text-align: justify;
  font-size: 0.9rem;
  font-weight: 600;
}

.front h6,
.back h6{
  font-size: 1.8rem;
  text-align: center;
  width: 80%;
  margin: auto;
  display: block;
  color: #2d1f50;
}

.front,
.back {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  
  padding: 2em;
  border: 1px solid #0002;
  
  &:has(img) {
    padding: 0;
  }

  &:has(.mission-image ,.suprise-image) {
    padding: 2em;
  }

  &:has(.service-main-image , .whyus-main-image){
    padding: 2em;
  }

  &:has( .service-container img ,.join-us img ){
    padding: 2em;
  }


 
  
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 
  
  


  &::after {
    position: absolute;
    bottom: 1em;
    right: 0;

    font-size: 0.8em;
    font-weight:700!important;
  }
}
.cover {
  &::after {
    content: "" !important;
  }
}
.front {
  &::after {
    right: 1em;
     content: "Next →";
  }
  background-color: #E9F7FB;
  border-radius: .1em .5em .5em .1em;
}
.back {
  &::after {
    left: 1em;
     content: "← Back ";
  }
  background-color: #E9F7FB;
  border-radius: .5em .1em .1em .5em;
}

.cover {
  background: url("images/bookcover.jpg") 50% / cover;
  color: hsl(200 30% 98%);
  border-radius: 3px;
  border-left: 3px solid #8558b0;
  box-shadow: 
  inset 4px 1px 3px #ffffff60,
  inset 0 -1px 2px #00000080;
}





/* thankyou-pop */

.thank-you-popup{
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #FFC801;
  padding: 1rem;
}

.thank-you-popup button{
  position: absolute; 
  top: -10px;
  right: -10px;
  background-color: #ff0000;
  border-radius: 50%;
  padding: 0.2rem 0.4rem;
  border: none;

}






/* for mobile book */




#myDiv {
  /* Initial styles for the div */
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  cursor: pointer;  /* Set cursor to pointer on hover */
  margin: auto;
  display:none;
  position: relative;
 
 
}

.large-invisible {
  transform: scale(10);  /* Increase size by 10 times */
  opacity: 0;     
  display: none !important;     
}

#unlockDiv {
  /* Styles for the unlock div */
  display: none;  /* Initially hidden */
}


.mobbook {
  --witdh: 200px;
  --height: 300px;
  --thick: 40px;
  --inner: 6px;
  --pages-bg: white;
  --cover-bg: rgba(33,32,30,255);
  --cover-radius: 6px;
  position: absolute;
  width: var(--witdh);
  height: var(--height);
  transform: rotateY(-30deg) rotateX(30deg) translate(-50%, -50%);
  transition: 0.5s transform;
  top: 40%;
  left: 40%;
}

/* .mobbook:hover {
  transform: rotateY(-20deg) rotateX(20deg);
} */

.mobbook,
.mobbook__cover,
.mobbook__pages {
  transform-style: preserve-3d;
}

.mobbook__cover,
.mobbook__cover::before,
.mobbook__cover-img {
  border-top-right-radius: var(--cover-radius);
  border-bottom-right-radius: var(--cover-radius);
  user-select: none;
}

.mobbook__cover::before,
.mobbook__cover::after,
.mobbook__pages::before,
.mobbook__pages::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
}

.mobbook__cover,
.mobbook__cover::before,
.mobbook__cover::after {
  background-color: var(--cover-bg);
}

.mobbook__cover {
  width: 100%;
  height: 100%;
}

.mobbook__cover::before {
  width: 100%;
  transform: translateZ(calc(var(--thick)*-1));
  box-shadow: 0 0 16px 1px rgba(0, 0, 0, 1);
}

.mobbook__cover::after {
  width: var(--thick);
  transform-origin: left center;
  transform: rotateY(90deg);
}

.mobbook__cover-img {
  width: 100%;
  height: 100%;
}

.mobbook__pages,
.mobbook__pages::before,
.mobbook__pages::after {
  background: var(--pages-bg);
}

.mobbook__pages {
  position: absolute;
  right: var(--inner);
  top: var(--inner);
  width: var(--thick);
  height: calc(100% - var(--inner)*2);
  transform-origin: right center;
  transform: rotateY(-90deg);
}

.mobbook__pages::before,
.mobbook__pages::after {
  width: var(--thick);
  height: calc(var(--witdh) - var(--inner));
}

.mobbook__pages::before {
  transform-origin: center top;
  transform: rotateX(90deg);
}

.mobbook__pages::after {
  top: unset;
  bottom: 0;
  transform-origin: center bottom;
  transform: rotateX(-90deg);
}