.center img{
    margin: auto;
    text-align: center;
}
.center h1,.center h2,.center h3,.center h4,.center h5,.center h6 {
    text-align: center;
}
.center p {
    text-align: center;
}

/* about ut page */


.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: block;
  perspective: 1000px;
}

@media (min-width: 768px) {
  .about-us-big .flip-box {
    width: 470px;
    height: 575px;
  }
  .about-us-small .flip-box {
    width: 325px;
    height: 490px;
  }
}

@media (min-width: 992px) {
  .about-us-big .flip-box {
    width: 375px;
    height: 482px;
  }
  .about-us-small .flip-box {
    width: 435px;
    height: 540px;
  }
}
@media (max-width: 1200px) {
  .flip-box h4{
      font-size: 25px;
  }
  .about-us-small .flip-box h3{
      font-size: 24px;
  }
}
@media (min-width: 1200px) {
  .about-us-big .flip-box {
    width: 458px;
    height: 565px;
  }
  .about-us-small .flip-box {
    width: 345px;
    height: 490px;
  }
}
/* This container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, 
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
border-radius: 4px;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
background-color: #fff;
color: black;
}

/* Style the back side */
.flip-box-back {
/* background-color: dodgerblue; */
/* color: white; */
/* transform: rotateY(180deg); */
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 340px;
  height: 280px;
  background-color: #434343;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 0%;
 
  right: 50%;
  left: -25%;
  padding-right: 5px;
  padding-left: 5px;
  -moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);
  /* margin-left: 80px; */
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.about-us-img {
  border-radius: 10px;
}

.about-us-img-more {
  border-radius: 20px;
}


/* banner video on Fence LP */
.overlay-for-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* Add background color for better visibility */
  }
  
  .overlay-for-banner h1 {
  color: white; /* Text color */
  
  }
  
  /* Apply styles for screens with a maximum width of 576px (xs screens, adjust as needed) */
  @media (max-width: 576px) {
  
    .overlay-for-banner h1 {
      font-size: 3.25em; /* Adjust the font size for xs screens */
    }
  }
  
  /* Apply styles for screens with a maximum width of 576px (xs screens, adjust as needed) */
  @media (max-width: 768px) {
  
    .overlay-for-banner h1 {
      font-size: 4.25em; /* Adjust the font size for xs screens */
    }
  }
  
  @media (max-width: 464px) {
  
    .overlay-for-banner h1 {
      font-size: 2.8em; /* Adjust the font size for xs screens */
    }
  }
  
  @media (max-width: 464px) {
  
    .overlay-for-banner p {
      font-size: 1.25em; /* Adjust the font size for xs screens */
    }
  }