/*------- founder page css-------*/
.founder-name p{
  font-size: 20px;
  color: #692a2a;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.founder-intro img{
  position: relative;
  animation-name: logooart2;
  animation-duration: 10s;
  animation-iteration-count: calc(1);
}

@keyframes logopart2 {
  0% {
      background-color: #fff;
      left: -400px;
      top: 0px;
  }

  25% {
      background-color: #fff;
      left: 1px;
      top: 0px;
  }

}

/*Social Media Icons*/
.ft-icon{
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
  color: #692a2a;
}

.fa-linkedin {
  border-radius: 10px;
  font-size: 20px;
  color: #692a2a;
}

.fa-facebook {
  border-radius: 10px;
  font-size: 20px;
  color: #692a2a;
}

.fa-twitter {
  border-radius: 10px;
  font-size: 20px;
  color: #692a2a;
}

.fa-instagram {
  border-radius: 10px;
  font-size: 20px;
  color: #692a2a;
}

.ft-icon a{
  padding: 10px;
  background-color: #e6cea3;
  margin: 10px
}

/*----------- book section css -----------*/

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Petemoss&display=swap");

.book {
	--book-height: 600px;
	--book-ratio: 1.4;
  margin-left: 480px;
}

.book > div {
	height: var(--book-height);
	width: calc(var(--book-height) / var(--book-ratio));
	overflow: auto;
	background-color: #0a0a0a;
	transform: scale(0.9);
	border-radius: 6px;
	transform-origin: left;
}

.book-cover {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 9;
	text-align: center;
  background-color: #692a2a;
  width: 420px;
	transition: transform 4s;
}

.book-content {
	transform: scale(0.9) translateY(30px);
	background-color: white !important;
	transition: all 0.3s 1s;
}

.book-content h3,
.book-content p {
	opacity: 0;
	transition: all 0.3s 0.3s;
}

h3 {
	padding: 30px;
}

p {
	padding: 0px 30px 10px 30px;
	text-align: justify;
	font-size: 14px;
}

.book-cover > div {
	transition: opacity 0s 0.6s;
}

.book:hover > .book-cover {
	transform: rotateY(180deg) scale(0.9);
}

.book:hover > .book-cover > div {
	opacity: 0;
}

.book:hover > .book-content {
	transform: scale(0.9) translateY(0px);
}

.book:hover > .book-content h3,
.book:hover > .book-content p {
	opacity: 1;
}

.book-review{
  background-color: #e6cea3;
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #692a2a;
}

.book-img img{
    width: 428px;
    height: 600px;
}

h4{
    text-align: justify;
    font-size: 18px;
    margin: 0px;
    justify-content: center;
    background-color: #e6cea3;
}

.card{
    width: 180px;
    height: 220px;
    background-color: #e6cea3;
    border: 2px #692a2a solid;
}

.row.g-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  margin: auto;
}

    @media screen and (max-width: 768px) {
        .book {
          margin-left: 0; /* Aligns the book to the left */
        }
      
        .book-cover {
          width: 40%; /* Adjust width to take full space */
        }
      
        .book-content {
          transform: scale(1) translateY(0px); /* Ensuring proper scaling */
        }
      
        .book-review {
          padding-left: 20px;
          padding-right: 20px;
        }
      
        h4 {
          text-align: left; /* Align the text to left */
        }

        
.book-img img{
    width: 290px;
    height: 400px;
}
      }
      @media screen and (max-width: 768px) {
        .book {
          --book-height: 400px; /* Reduce height for smaller screens */
          --book-ratio: 1.4;
          margin-left: 0; /* Align to left */
        }
      
        .book > div {
          height: var(--book-height);
          width: calc(var(--book-height) / var(--book-ratio));
          transform: scale(1); /* Ensure correct scaling */
        }
      
        .book-cover {
          width: 100%; /* Adjust width */
        }
      
        .book-content {
          transform: scale(1) translateY(0px);
        }
      }