body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  height: 100vh; /* Set the height of the body to the full viewport height */
  font-family: 'Raleway', Arial, sans-serif;
}

.rooms-container {
  display: flex;
  width: 100%; /* Set width to 100% of the viewport */
  height: 100%; /* Set height to 100% of the viewport */
}

.edittingroom, .animationroom {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.edittingroom video, .animationroom video {
  width: 100%; /* Ensure videos take up full width */
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio */
}

.button-container {
  position: absolute;
  bottom: 34%;
  left: 50%;
  transform: translateX(-50%);
}

.edittingroom:hover,
.animationroom:hover {
  opacity: 1;
}

.edittingroom:hover .smaller-button,
.animationroom:hover .anime-button {
  display: inline-block;
}
.tap-logo {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  opacity: 0; /* Initially invisible */
  transition: opacity 1s ease-in-out;
  z-index: 20; /* Ensure it's on top of other elements */
  pointer-events: none; /* Prevent interaction */
  animation: scalePulse 2s infinite ease-in-out; /* Add the scale animation */
  display: none; /* Initially hidden */
}

/* Keyframes for scaling animation */
@keyframes scalePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.smaller-button {
  display: none;
  background-color: green; /* Default color */
  color: white;
  padding: 18px 42px; /* Reduced padding */
  font-size: 20px; /* Ensure text is not too large */
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  filter: drop-shadow(10px 0 30px rgba(0, 0, 0, 0.3));
  white-space: nowrap; /* Prevent text from wrapping */
}


.anime-button {
  display: none;
  background-color: #B5B072;
  color: white;
  padding: 18px 42px;
  font-size: 20px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  filter: drop-shadow(10px 0 30px rgba(0, 0, 0, 0.3));
      white-space: nowrap; /* Prevent text from wrapping */

}

 .smaller-button:hover {
    background-color: white;
    color: green;
    border: 2px solid green;
    font-weight: bold;
    transform: scale(1.2);
  }

  .anime-button:hover {
    background-color: white;
    color: #B5B072;
    border: 2px solid #B5B072;
    font-weight: bold;
    transform: scale(1.2);
  }

img {
  width: 100%;
  height: auto;
}

.heading {
  color: white; /* Adjust the color as needed */
  margin-top: 20px; /* Adjust the spacing as needed */
  /* Add any other styles you need for the heading */
}
.overlay {
  display: none; /* Initially hidden */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 10; /* Make sure overlay is on top */
}

.play-button {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 80px solid white;
  transform: rotate(148deg); /* Rotate triangle to have flat line on the left */
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
}

.play-button:hover {
  opacity: 0.8;
}
 .tap-logo {
    display: none; /* Ensure hidden on larger screens */
  }
/********************************************************************** First Responsive Layout ***********************************************************************************************/
@media (min-width: 1440px) and (max-width: 1680px) {
  .smaller-button {
  display: none;
  background-color: green; /* Default color */
  color: white;
  padding: 14px 36px; /* Reduced padding */
  font-size: 20px; /* Ensure text is not too large */
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  filter: drop-shadow(10px 0 30px rgba(0, 0, 0, 0.3));
  white-space: nowrap; /* Prevent text from wrapping */
}


.anime-button {
  display: none;
  background-color: #B5B072;
  color: white;
  padding: 14px 36px;
  font-size: 20px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  filter: drop-shadow(10px 0 30px rgba(0, 0, 0, 0.3));
      white-space: nowrap; /* Prevent text from wrapping */

}
    
 .smaller-button:hover {
    background-color: white;
    color: green;
    border: 2px solid green;
    font-weight: bold;
    transform: scale(1.1);
  }

  .anime-button:hover {
    background-color: white;
    color: #B5B072;
    border: 2px solid #B5B072;
    font-weight: bold;
    transform: scale(1.1);
  }
}
/********************************************************************** First Responsive Layout ***********************************************************************************************/
@media (max-width: 1440px) {

.smaller-button {
  display: none;
  background-color: green; /* Default color */
  color: white;
  padding: 14px 36px; /* Reduced padding */
  font-size: 20px; /* Ensure text is not too large */
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  filter: drop-shadow(10px 0 30px rgba(0, 0, 0, 0.3));
  white-space: nowrap; /* Prevent text from wrapping */
}


.anime-button {
  display: none;
  background-color: #B5B072;
  color: white;
  padding: 14px 36px;
  font-size: 20px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  filter: drop-shadow(10px 0 30px rgba(0, 0, 0, 0.3));
      white-space: nowrap; /* Prevent text from wrapping */

}
    
 .smaller-button:hover {
    background-color: white;
    color: green;
    border: 2px solid green;
    font-weight: bold;
    transform: scale(1.1);
  }

  .anime-button:hover {
    background-color: white;
    color: #B5B072;
    border: 2px solid #B5B072;
    font-weight: bold;
    transform: scale(1.1);
  }
}
/********************************************************************** Tablet Layout ***********************************************************************************************/
@media screen and (min-width: 600px) and (max-width: 1025px) {

  .rooms-container {
    flex-direction: column; /* Stack videos vertically */
    }

  .edittingroom, .animationroom {
    width: 100%; /* Ensure each video container takes full width */
    height: 50%; /* Adjust height for top and bottom layout */
  }

  .edittingroom video, .animationroom video {
    width: 100%; /* Ensure videos take up full width */
    height: 100%; /* Ensure videos take up full height of their container */

  }
      .smaller-button, .anime-button {
    display: none;
          opacity: 0;
  }
    .edittingroom:hover .smaller-button,
.animationroom:hover .anime-button {
  display: none;
    opacity: 0;
}
      .overlay {
    display: flex; /* Show overlay on small screens */
  }
    
    
.buttonsmallscreen-editting {
  display: none; /* Initially hidden */
  opacity: 0; /* Start with fully transparent */
  background-color: green; /* Customize the background color for animation button */
  color: white;
  padding: 15px 30px;
  font-size: 18px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: absolute;
    animation: fadeInLeft .5s ease-in-out forwards;
  transition: opacity 0.5s ease, transform 0.2s ease; /* Fade-in effect */
          white-space: nowrap; /* Prevent text from wrapping */

}
    
.buttonsmallscreen-animation {
  display: none; /* Initially hidden */
  opacity: 0; /* Start with fully transparent */
  background-color: #B5B072; /* Customize the background color for animation button */
  color: white;
  padding: 15px 24px;
  font-size: 18px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: absolute;
    animation: fadeInRight .5s ease-in-out forwards;
  transition: opacity 0.5s ease, transform 0.2s ease; /* Fade-in effect */
          white-space: nowrap; /* Prevent text from wrapping */

}


@keyframes fadeInRight {
    from {
        right: 39%; 
        top: 20%; 
        opacity: 0; 
    }
    to {
        right: 39%; 
        top: 25%; 
        opacity: 1; 
    }
}
@keyframes fadeInLeft {
    from {
        left: 37%; 
        top: 20%; 
        opacity: 0; 
    }
    to {
        left: 37%; 
        top: 32%; 
        opacity: 1; 
    }
}
.tap-logo {
    display: block; /* Display element on smaller screens */
  }





}


/********************************************************************** Mobile Layout ***********************************************************************************************/
@media screen and (min-width: 400px) and (max-width: 600px) {
  .rooms-container {
    flex-direction: column; /* Stack videos vertically */
  }

  .edittingroom, .animationroom {
    width: 100%; /* Ensure each video container takes full width */
    height: 50%; /* Adjust height for top and bottom layout */

  }

  .edittingroom video, .animationroom video {
    width: 100%; /* Ensure videos take up full width */
    height: 100%; /* Ensure videos take up full height of their container */
      
  }
      .smaller-button, .anime-button {
    display: none;
          opacity: 0;
  }
    .edittingroom:hover .smaller-button,
.animationroom:hover .anime-button {
  display: none;
    opacity: 0;
}
      .overlay {
    display: flex; /* Show overlay on small screens */
  }
    
    
.buttonsmallscreen-editting {
  display: none; /* Initially hidden */
  opacity: 0; /* Start with fully transparent */
  background-color: green; /* Customize the background color for animation button */
  color: white;
  padding: 15px 30px;
  font-size: 18px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: absolute;
    animation: fadeInLeft .5s ease-in-out forwards;
  transition: opacity 0.5s ease, transform 0.2s ease; /* Fade-in effect */
          white-space: nowrap; /* Prevent text from wrapping */

}
    
.buttonsmallscreen-animation {
  display: none; /* Initially hidden */
  opacity: 0; /* Start with fully transparent */
  background-color: #B5B072; /* Customize the background color for animation button */
  color: white;
  padding: 15px 24px;
  font-size: 18px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: absolute;
    animation: fadeInRight .5s ease-in-out forwards;
  transition: opacity 0.5s ease, transform 0.2s ease; /* Fade-in effect */
          white-space: nowrap; /* Prevent text from wrapping */

}

@keyframes fadeInRight {
    from {
        right: 26%; 
        top: 15%; 
        opacity: 0; 
    }
    to {
        right: 26%; 
        top: 20%; 
        opacity: 1; 
    }
}
@keyframes fadeInLeft {
    from {
        left: 28%; 
        top: 5%; 
        opacity: 0; 
    }
    to {
        left: 28%; 
        top: 10%; 
        opacity: 1; 
    }
}
.tap-logo {
    display: block; /* Display element on smaller screens */
  }


}
/********************************************************************** Second Mobile Layout ***********************************************************************************************/

@media screen and (max-width: 399px) {
    
    .rooms-container {
    flex-direction: column; /* Stack videos vertically */
  }

  .edittingroom, .animationroom {
    width: 100%; /* Ensure each video container takes full width */
    height: 50%; /* Adjust height for top and bottom layout */
  }

  .edittingroom video, .animationroom video {
    width: 100%; /* Ensure videos take up full width */
    height: 100%; /* Ensure videos take up full height of their container */
  }
      .smaller-button, .anime-button {
    display: none;
          opacity: 0;
  }
    .edittingroom:hover .smaller-button,
.animationroom:hover .anime-button {
  display: none;
    opacity: 0;
}
      .overlay {
    display: flex; /* Show overlay on small screens */
  }
      
.buttonsmallscreen-editting {
  display: none; /* Initially hidden */
  opacity: 0; /* Start with fully transparent */
  background-color: green; /* Customize the background color for animation button */
  color: white;
  padding: 15px 30px;
  font-size: 18px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: absolute;
    animation: fadeInLeft .5s ease-in-out forwards;
  transition: opacity 0.5s ease, transform 0.2s ease; /* Fade-in effect */
          white-space: nowrap; /* Prevent text from wrapping */

}
    
.buttonsmallscreen-animation {
  display: none; /* Initially hidden */
  opacity: 0; /* Start with fully transparent */
  background-color: #B5B072; /* Customize the background color for animation button */
  color: white;
  padding: 15px 24px;
  font-size: 18px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  position: absolute;
    animation: fadeInRight .5s ease-in-out forwards;
  transition: opacity 0.5s ease, transform 0.2s ease; /* Fade-in effect */
          white-space: nowrap; /* Prevent text from wrapping */

}


@keyframes fadeInRight {
    from {
        right: 19%; 
        top: 5%; 
        opacity: 0; 
    }
    to {
        right: 19%; 
        top: 10%; 
        opacity: 1; 
    }
}
@keyframes fadeInLeft {
    from {
        left: 20%; 
        top: 5%; 
        opacity: 0; 
    }
    to {
        left: 20%; 
        top: 10%; 
        opacity: 1; 
    }
}

}


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

@keyframes fadeInRight {
    from {
        right: 12%; 
        top: 5%; 
        opacity: 0; 
    }
    to {
        right: 12%; 
        top: 10%; 
        opacity: 1; 
    }
}
@keyframes fadeInLeft {
    from {
        left: 15%; 
        top: 5%; 
        opacity: 0; 
    }
    to {
        left: 15%; 
        top: 10%; 
        opacity: 1; 
    }
}

}

}