body {
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.orderInquiryBox {
  position: fixed;
  min-height: 70vh;
  z-index: 6;
  width: 40%;
  bottom: 6.9%;
  right: 2.8%;
  padding: 20px;
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
  border-bottom-left-radius: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 134, 217);
  color: white;
} 

.orderInquiryBox input:focus, .orderInquiryBox textarea:focus{
  border-color: rgb(255, 182, 74);
  outline: none;
  box-shadow: 0 0 10px rgba(255, 182, 74, 0.8);
}

.inputAndLabel {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.fullName, .contactInformation {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.orderInquiryBox #product {
  width: 100%;
}

.orderInquiryBox .product, .orderInquiryBox option {
  background-color: rgb(240, 247, 255);
  border: 2px solid rgb(63, 142, 255);
  border-radius: 1.3rem;
  height: 40px;
  color: rgb(63, 73, 142);
  margin-top: 10px;
  margin-bottom: 10px;
  transition: border-color 0.3s ease-in-out;
}

.orderInquiryBox input{
  background-color: rgb(240, 247, 255);
  border: 2px solid rgb(63, 142, 255);
  border-radius: 10px;
  height: 40px;
  padding: 5px;
  color: rgb(63, 73, 142);
  margin-top: 10px;
  margin-bottom: 10px;
  transition: border-color 0.3s ease-in-out;
}

.product:focus, option:focus {
  border-color: rgb(255, 182, 74);
}


textarea {
  width: 95%;
}

.orderInquiryBox input[type="submit"] {
  width: 100%;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.orderInquiryBox input[type="submit"]:hover {
  transition: all 0.3s;
  background: linear-gradient(145deg, rgba(255, 107, 107, 1) 0%, rgba(255, 182, 74, 1) 100%);
  color: aliceblue;
  border: 0px solid transparent;
  transform: scale(1.01);
}

textarea {
  background-color: rgb(240, 247, 255);
  border: 2px solid rgb(63, 142, 255);
  color: rgb(63, 73, 142);
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: box-shadow 0.3s ease-in-out;
  padding: 10px;
}

textarea:focus {
  box-shadow: 0 0 10px rgba(63, 142, 255, 0.8);
  outline: none;
}

.orderInquiryBox #product {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  height: 50px;
  border: 3px solid #0000;
  border-radius: 12px;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(var(--angle), #e38b1e, #b668ff, #68c0ff) border-box;
  animation: rotate 8s linear infinite;
}


#verifyForm {
  display: flex;
  flex-direction: column;
  align-items: center;
}


@keyframes rotate {
  to {
      --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

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

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

.fade-out {
  animation: fadeOut 0.6s ease-in-out;
}

.content {
  transition: opacity 0.6s ease-in-out;
}

.fade-out {
  opacity: 0;
}

.content {
  width: 100%;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
}

.fade-out {
  opacity: 0;
}

h1, p {
  margin: 0;
  padding: 10px 0;
}

/* #order_inquiry {
  display: flex;
  flex-direction: column;
  align-items: center;
} */

.body1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh; /* Make it twice the viewport height to allow scrolling */
  z-index: 1;
}

.body1 video {
  position: absolute; /* Changed to absolute for proper layering */
  width: 100%;
  height: 100%; /* Ensure video covers the entire container */
  object-fit: cover; /* Ensure the video scales properly */
  z-index: -1;
}

#videoElement {
  position: relative; /* Ensures it moves within its container */
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-out; /* Optional smooth movement */
}


.body1 .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at bottom left, purple, transparent 30%),
              radial-gradient(circle at bottom right, purple, transparent 30%),
              linear-gradient(to top, rgba(128, 0, 128), transparent);
  z-index: 2;
  pointer-events: none;
}

.yellow-tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 0, 0.537); /* Light yellow with 20% opacity */
  mix-blend-mode: multiply; /* Ensures the tint blends well with the video */
  z-index: 2;
  pointer-events: none;
}

#videoElement, #yellow-tint {
  position: fixed; /* Ensure they stay in place relative to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover; /* Scale the video properly */
  z-index: -1; /* Keep them behind the content */
}


.body1 #text {
  position: absolute; /* Ensures it floats above the video */
  z-index: 3; /* Higher than the overlay and video */
  color: white;
  font-size: 2rem;
  text-align: center;
  padding: 20px;
  border-radius: 1.2rem; /* Optional: Adds rounded corners */
}

.body1 #orderNowButton{
  margin-top: 20px;
  padding: 10px;
  font-size: 20px;
  color: white;
  border-radius: 0.6rem;
  border: 2px solid rgb(26, 103, 203);
  background-color: rgb(0, 110, 255);
  cursor: pointer;
  transition: all 0.3s ease;
}

.body1 #orderNowButton:hover{
  font-size: 20px;
  transform: scale(1.08);
  cursor: pointer;
}

.body1 #productsButton{
  margin-top: 20px;
  padding: 10px;
  font-size: 20px;
  color: rgb(0, 119, 255);
  border-radius: 0.6rem; 
  border: 2px solid rgb(0, 81, 255);
  background-color: rgba(255, 255, 255, 0.689);
  cursor: pointer;
  transition: all 0.3s ease;
}

.body1 #productsButton:hover{
  font-size: 20px;
  transform: scale(1.08);
  cursor: pointer;
}

.dot, .prev, .next{
  cursor:pointer;
}
.dot{
  height:13px;width:13px;padding:0;
}

.body2{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-color: rgba(128, 0, 128, 0.41);
  color: white;
}

.body2 {
  background: rgb(129,0,128);
  background: linear-gradient(180deg, rgba(128, 0, 128) 41%, rgba(179, 0, 255) 97%);


  position: relative;
  z-index: 2; /* Ensure it appears above the video */
  background-color: rgba(128, 0, 128, 0.78); /* Optional: Semi-transparent background */
  padding: 20px; /* Add spacing for content */
}

.body2 #title{
  display: flex;
  align-items: center;
  justify-content: center;

  color: white;

  font-size: 50px;
  width: 100%;
}

.body2 .information{
  padding: 10px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  font-size: 0.85cm;
}

.body2 .information .imageSide{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-height: 50%;
}
.body2 .information .textSide{
  display: flex;
  align-items: center;
  justify-content: center ;
  width: 50%;
  max-height: 50%;
  font-size: 1cm;
}

.body2 img{
  width: auto;
  height: 50%;
  margin-right: 5vh;

  border-radius: 1.3rem;
}

.body2-body3-gradient{
  position: relative;
  z-index: 4;

  width: 100vw;
  height: 10vh;

  border: 0px solid transparent ;

  background: rgba(179, 0, 255, 0.7);
  background: linear-gradient(180deg, rgb(179, 0, 255) 30%, rgb(0, 0, 0) 60%); 
}

.body3{
  position: relative;
  z-index: 3;
 
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-image: url('/assets/body3-background.jpg');

  height: max-content;

  color: white;

  font-size: 20px;
}

.body3 .startingGradient{
  position: absolute;
  z-index: 3;

  height: 105vh;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.831), transparent 90%);
} 

.slideshowContainer{
  position: absolute; 
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100vh;
}

 .slideshow-slide{
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(22, 22, 22, 0.919);
  width: 67%;
  height: 60vh;
  padding: 30px;
  border-top-right-radius: 1.7rem;
  border-top-left-radius: 1.7rem;
}

 .slideshow-slide .leftSide{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 49%;
  height: 100%;
  
  margin-right: 1%;

  border-right: 1px solid rgb(157, 157, 157);
}

.slideshow-slide .leftSide img{
  height: 90%;
  width: auto;
}

 .slideshow-slide .rightSide{
  display: flex;
  flex-direction: column;


  width: 50%;
  height: 100%;
}

.slideshow-slide .rightSide p{
  display: inline-block;
  letter-spacing: 0.03cm;
  font-size: calc(9px + 0.8vw);
    height: 70%;
}

.slideshow-slide .rightSide select{
  background-color: white;
  color: black;
  border: 4px solid rgb(0, 115, 255);

  border-radius: 10px;
  width: 100%;

  cursor: pointer;

  height: 5vh;
  border: 0px;
}

.slideshow-slide button{
  border: 4px solid rgb(0, 115, 255);
  border-radius: 10px;

  margin-top: 1vh;

  background-color: rgb(0, 140, 255);
  color: white;
  font-size: 25px;
  width: 100%;
  height: 7vh;

  cursor: pointer;

  transition: 0.3s all ease;
}

.slideshow-slide button:hover{
  background-color: rgb(208, 246, 255);
  color: rgb(0, 40, 75);
  transform: scale(1.05);
}

.slideshow-controls {
  border-bottom-right-radius: 1.7rem;
  border-bottom-left-radius: 1.7rem;
  padding: 10px;
  background: rgba(22, 22, 22, 0.919);

  border-top: 1px solid rgb(203, 203, 203);

  width: 69.2%;
  height: auto;
  display: flex;
  justify-content: space-evenly ;
  align-items: center;
  pointer-events: auto; /* Ensure elements are clickable */
}

.slideshow-controls .prev, .slideshow-controls .next{
  font-size: 40px;
  transition: 0.2s all ease;
}

.slideshow-controls .prev:hover, .slideshow-controls .next:hover{
  transform: scale(1.15);
  color: rgb(208, 208, 208);
}

.slideshow-dots {
  max-width: 10%;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: auto; /* Ensure dots are clickable */
}

.dot {
  height: 13px;
  width: 13px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer; /* Make the cursor a pointer */
  display: inline-block;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.dot:hover {
  transform: scale(1.2);
  background-color: rgba(255, 255, 255, 1);
}

.dot.active {
  background-color: white;
  width: 2vw;
  border-radius: 7px;
  transform: scale(1.3);
}

@keyframes slideF {
  from {
    transform: translateX(102);
  }
  to {
    transform: translateX(-102%);
  }
}

@keyframes slideS {
  from {
    transform: translateX(-102%);
  }
  to {
    transform: translateX(102%);
  }
}

.body3 .images {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  padding: 60px 0;
  height: 90vh;
  width: 100%; /* Ensure the container takes full width */
  white-space: nowrap;
  filter: blur(4px);
}

.images:before,
.images:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.images:before {
  left: 0;
}

.images:after {
  right: 0;
}

.images:hover .images-slideF .images-slideS {
  animation-play-state: paused;
}

.images-slideF {
  display: inline-block;
  animation: 40s slideF infinite linear;
}

.images-slideS {
  display: inline-block;
  animation: 30s slideS infinite linear;
}

.images-slideB{
  display: inline-block;
  animation: 40s slideF  infinite linear;
}


.images-slideS img, .images-slideF img, .images-slideB img{
  border-radius: 5px;
  width: auto;
  height: 200px;
  margin: 0 30px;
}

.body3 .black-tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.7); /* Black with 50% opacity */
  z-index: 1;
  pointer-events: none; /* Ensure the overlay does not interfere */
}

.orderInquiryButtonAndBox{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 5;

}

.orderInquiryButtonAndBox button{
  position: fixed;
  bottom: 2vh;
  right: 2vh;
  z-index: 6;

  background-color: rgb(0, 115, 255);
  border: 0px;
    width: 70px;
  height: 70px;
  color: white;
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s all ease;
}

.orderInquiryButtonAndBox button:not(#active):hover{
  background-color: rgb(0, 90, 200);
  transform: scale(1.05);
}

.orderInquiryButtonAndBox button#active{
  background-color: rgb(0, 134, 217);
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  border-top-right-radius: 100%;
}

.orderInquiryButtonAndBox button:not(#active){
  border-radius: 100%;
}

.disableBackground{
  visibility: hidden;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.401);
  z-index: 4;
  width: 100%;
  height: 100%;
}



footer{
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  z-index: 5;

  width: 100%;
  height: 20vh;

  background-color: black;
}

footer .details{
  text-align: center;
  background-color: black;
  letter-spacing: 0.3px;
  color: white;
}

@keyframes fillDiv {
  0% {
    transform-origin: bottom right; /* Start scaling from bottom-right */
    transform: scale(0);
  }
  100% {
    transform-origin: bottom right; /* Maintain scaling from bottom-right */
    transform: scale(1);
  }
}

@keyframes deleteDiv {
  0% {
    transform-origin: bottom right; /* Shrink toward bottom-right */
    transform: scale(1);
  }
  100% {
    
    transform-origin: bottom right; /* Maintain scaling from bottom-right */
    transform: scale(0);
  }
}

.fillDiv {
  animation: fillDiv 0.3s ease-in-out forwards;
}

.deleteDiv {
  animation: deleteDiv 0.3s ease-in-out forwards;
}