/* General styles */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #000;
  color: #fff;
}

/* Main Blocks */
.mainblock {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  align-items: center;
  width: 100%;
}

/* Logo */
.logo {
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;  /* Ensures it takes the available space */
}

/* Rightbox - Language and Sign In */
.rightbox {
  display: flex;
  gap: 10px;
  justify-content: end; /* Align right */
  align-items: end;  /* Vertical alignment */
}

/* Language select */
.language-select {
  padding: 5px;
  border-radius: 5px;
  background-color: #333; /* Optional background color */
  color: white;
}

/* Login button */
.sinin {
  padding: 5px 10px;
  background-color: red;
  border: none;
  border-radius: 5px;
  color: white;
}
.lowerbox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px; /* More padding for breathing space */
}

.details {
  width: 70%;
  max-width: 1200px;
  background-color:white; /* Dark background for details box */
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2); /* Softer glowing shadow */
  display: flex;
  justify-content: space-evenly; /* Equal space between items */
  align-items: center;
  padding: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 20px; /* Space between items */
  text-decoration-color: white;
  list-style: none;
}


/* Banner */
.banner {
  text-align: center;
  padding: 20px;
}

.banner .text h2 {
  font-size: 22px;
}

.banner .text h4 {
  font-size: 18px;
}

.banner .text p {
  font-size: 14px;
  margin-bottom: 10px;
}

/* InputBox */
.inputbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.inputbox input.email {
  width: 90%;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
}

.getstarted {
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  background-color: #e50914;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

/* Carousel Sections */
.cravsualcontainer, .cravsualcontainer2, .cravsualcontainer3, .cravsualcontainer4 {
  padding: 10px;
}

/* Cards */
.cravsualcard, .cravsualcard2, .cravsualcard3, .cravsualcard4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 10px;
  overflow-x: auto;
}

/* Card items */
.cravsualitem, .cravsualitem2, .cravsualitem3, .cravsualitem4 {
  background-color: #111;
  padding: 5px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-bottom: none; /* 9:16 Aspect ratio */
}

.cravsualitem img, .cravsualitem2 img, .cravsualitem3 img, .cravsualitem4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensure image fits box without distorting */
  border-radius: 6px;
}

/* Smaller images for the last carousel */
.cravsualcontainer4 .cravsualitem img {
  width: 80%;  /* Smaller width for the last carousel */
  height: auto;  /* Keep aspect ratio */
  max-height: 160px; /* Smaller height for the last carousel */
}

/* Video Player container */
.videoplayer-container {
  text-align: center;
  margin-top: 20px;
}

#moviePlayer {
  width: 100%;
  max-width: 600px;
  border: 3px solid #fff;
  border-radius: 12px;
}

.download-btn {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #28a745;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

.quality-select {
  margin-top: 10px;
}

/* Feedback section */
.FeedBacksection {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.FeedBack {
  width: 90%;
  padding: 10px;
  border-radius: 6px;
  border: none;
}

.submitbutton {
  margin-top: 10px;
  padding: 10px;
  background-color: red;
  border: none;
  border-radius: 6px;
  color: white;
  width: 50%;
  cursor: pointer;
}