.flip-container {
    perspective: 1000px; /* Add perspective for 3D effect */
    height: 200px; /* Set a fixed height for each flip container */
}


.flipper {
    transition: 0.6s; /* Add transition for smooth flipping effect */
    transform-style: preserve-3d; /* Ensure 3D transformation */
    position: relative;
}

/* Hide the back side by default */
.front {
    backface-visibility: hidden; /* Hide back side */
    position: absolute; /* Position elements absolutely */
    top: 0;
    left: 0;
}

.back{
    backface-visibility: hidden;
}
/* Style the front side */
.front {
    z-index: 2; /* Ensure front side is on top */
}

/* Style the back side */
.back {
    transform: rotateY(180deg); /* Rotate the back side by 180 degrees */
}

/* Apply flipping effect on hover */
.flip-container:hover .flipper {
    transform: rotateY(180deg); /* Rotate the flipper by 180 degrees on hover */
}


.row {
    display: flex;
    flex-wrap: wrap;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 5px;
  }
  .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  *{
    font-family: "Crimson Text";
  }

  @media screen and (max-width: 991px){
   

    .logoText{
        display: none;
    }
  }

  .help {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 9999; /* Ensure the button appears above other content */
  }

  .container-fluid {
    width: 100%;
    overflow: hidden;
}

.floating-text {
    animation: floatAnimation 10s linear infinite;
}

@keyframes floatAnimation {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* .text-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
} */

.enquire-now {
  position: relative;
  padding: 100px;
  font-size: 30px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* Text color */
  font-size: 24px; /* Adjust font size as needed */
  background-color: #f1c40f; /* Background color */
  clip-path: polygon(50% 0%, 67.43% 33.6%, 100% 33.6%, 68% 57%, 79% 100%, 50% 70%, 21% 100%, 32% 57%, 0% 33.6%, 32.57% 33.6%);
  /* Adjusted clip-path coordinates */
  height: 250px; /* Adjust height as needed */
  width: 350px; /* Adjust width as needed */
  z-index: 1; /* Ensure the text is above the background shape */
}

@media screen and (max-width: 991px){
   

  .frontText{
      font-size: 30px !important;
  }
}

@media screen and (max-width: 531px){
   

  .logoFont{
      font-size: 10px !important;
  }
  .logoFont2{
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  .logoFont3{
    font-size: 10px !important;
  }
  .logoImg{
    height: 40px !important;
    width: 200px !important;
  }
  .logoImg2{
    height: 40px !important;
    width: 40px !important;
    padding-top: 5px !important;
    /* padding-right: none !important;
    position: relative;
    left: 20px !important */
  }
}

@media screen and (min-width: 768px) and (max-width: 996px){
  /* .logoImg{
    position: relative;
    right: 170px !important;
  } */
  .logoImg2{
    position: relative;
    left: 20px !important
  }
  .school{
    position: relative;
    right: 220px !important;
    padding-top: 5px !important;
  }
}


@media screen and (max-width: 1213px){
   

  .logoFont{
      font-size: 13px !important;
  }
  .logoFont2{
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .logoFont3{
    font-size: 7.7px !important;
  }
  .logoImg{
    height: 50px !important;
    width: 350px !important;
  }
  .logoImg2{
    height: 40px !important;
    width: 40px !important;
    padding-top: 5px !important;
    
  }
}

@media screen and (max-width: 401px){
   

  .logoFont{
      font-size: 7px !important;
  }
  .logoFont2{
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  .logoFont3{
    font-size: 5px !important;
  }
  .logoImg{
    height: 30px !important;
    width: 200px !important;
  }
  .logoImg2{
    height: 30px !important;
    width: 30px !important;
  }
}

@media screen and (max-width: 595px){
  .floating-text{
    font-size: 12px !important;
  }
  #flipText{
    font-size: 12px !important;
  }
}

/* @media screen and (max-width: 595px){
  .school {
    margin-left: 0 !important;
  }
} */

/* @media screen and (max-width: 760px){
  .logoImg{
    position: none;
    
  }
} */

@media screen and (min-width: 470px) and (max-width: 767px){
  /* .logoImg{
    position: relative;
    right: 90px !important;
  } */
  .logoImg2{
    position: relative;
    left: 20px !important
  }
  .school{
    position: relative;
    right: 120px !important;
    padding-top: 5px !important;
  }
}


@media screen and (max-width: 469px) {
  /* .logoImg{
    position: relative;
    right: 30px !important;
  } */
  .logoImg2{
    position: relative;
    left: 20px !important
  
  }
  .school{
    position: relative;
    right: 70px !important;
    padding-top: 5px !important;
  }
  
}

tr, th, td {
  color: #0a1062 !important;
}


#fixed-button {
  
  background-color: #f8d31b;
  color: #FFF;
  border-color: #f8d31b;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}