/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body and background */
body {
  font-family: 'Arial', sans-serif;
  text-align: center;
  background-color: #f9f9f9;
  color: #333;
}

/* Hero Section */
.hero {
  background-color: #4e73df;
  color: white;
  padding: 40px 20px;  /* Reduced padding to make it more compact */
}

.hero h1 {
  font-size: 2.2em;  /* Reduced font size */
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.1em;  /* Reduced font size */
  margin-top: 10px;
}

.hero .price {
  font-size: 1.3em;  /* Reduced font size */
  margin-top: 10px;
  font-weight: bold;
  color: #ff5733;
}

/* Upload Section */
.upload {
  background-color: white;
  padding: 40px 20px;
}

.upload h2 {
  font-size: 1.5em;  /* Reduced font size */
  margin-bottom: 30px;
}

.upload-box {
  text-align: center;
}

input[type="file"] {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  width: 100%;
  max-width: 300px;
  background-color: #f1f1f1;
}

button {
  background-color: #ff5733;
  color: white;
  border: none;
  padding: 12px 25px;
  font-size: 1.1em;  /* Reduced font size */
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #e65c2f;
}

/* How It Works Section */
.how-it-works {
  background-color: #f4f4f4;
  padding: 40px 20px;
}

.how-it-works h2 {
  font-size: 1.8em;  /* Reduced font size */
  margin-bottom: 20px;
}

.steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.step {
  text-align: center;
  width: 100%;
  max-width: 300px;
  margin-bottom: 30px;
}

.step i {
  font-size: 2.5em;  /* Reduced icon size */
  margin-bottom: 10px;
  color: #4e73df;
}

.step p {
  font-size: 1em;  /* Reduced font size */
  margin-top: 10px;
}

.step strong {
  font-size: 1.1em;  /* Reduced font size */
  font-weight: bold;
}

/* Video Ratings Section */
.video-ratings {
  padding: 40px 20px;
}

.video-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-item {
  width: 80%;
  margin: 20px 0;
}

.video-item iframe {
  width: 100%;
  height: 200px;
  border: none;
}

.video-item p {
  font-size: 1.1em;  /* Reduced font size */
  margin-top: 10px;
}

/* Footer */
footer {
  padding: 20px;
  background-color: #f4f4f4;
  font-size: 14px;
  color: #888;
}

/* Mobile-Friendly */
@media (max-width: 768px) {
  .steps {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center all items */
  }

  .step {
    width: 80%;
    max-width: 400px;
  }

  .step i {
    font-size: 2.2em;  /* Reduced icon size */
  }

  .step p {
    font-size: 1.1em;
  }
}
/* Hero Section */
.hero {
  background-color: #3b2a71;  /* Dark purple background */
  color: white;
  padding: 40px 20px;  /* Reduced padding to make it more compact */
}

.hero h1 {
  font-size: 2.2em;  /* Reduced font size */
  margin-bottom: 10px;
  text-align: center;  /* Ensuring the text is centered */
}

.hero p {
  font-size: 1.1em;  /* Reduced font size */
  margin-top: 10px;
  text-align: center;  /* Centering the description text */
}

.hero .price {
  font-size: 1.3em;  /* Reduced font size */
  margin-top: 10px;
  font-weight: bold;
  color: #ff5733;
  text-align: center;  /* Centering the price text */
}
/* Mobile-Specific Adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.8em;  /* Reduced font size for mobile */
    text-align: center; /* Ensuring the text is centered */
  }

  .hero p {
    font-size: 1em;  /* Reduced font size for mobile */
    margin-top: 8px;
    text-align: center; /* Center the text */
  }

  .hero .price {
    font-size: 1.1em;  /* Reduced font size for mobile */
    margin-top: 8px;
    font-weight: bold;
    color: #ff5733;
    text-align: center;
  }
}
/* Hero Section - Smaller title for better fit */
.hero h1 {
  font-size: 1.8em;  /* Reduced font size for smaller screens */
  text-align: center;  /* Ensure the title is centered */
  margin-bottom: 10px;
}

/* Video Ratings Section - Ensuring videos are stacked vertically and centered */
.video-gallery {
  display: flex;
  flex-direction: column;  /* Stack videos vertically */
  align-items: center;  /* Center videos horizontally */
}

.video-item {
  width: 80%;
  margin: 20px 0;
  text-align: center;  /* Ensuring the video and the text are centered */
}

.video-item iframe {
  width: 100%;
  height: 200px;
  border: none;
}

.video-item p {
  font-size: 1.1em;  /* Adjust text size */
  margin-top: 10px;
}

/* Mobile Adjustments - Further reducing title size and ensuring better layout */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.5em;  /* Smaller title size on mobile */
  }
}
/* Ensuring TikTok videos are centered properly */
.video-gallery {
  display: flex;
  flex-direction: column;  /* Stack videos vertically */
  align-items: center;  /* Center videos horizontally */
  justify-content: center; /* Ensure videos are centered vertically if needed */
}

.video-item {
  width: 80%;  /* Ensure videos are of a consistent width */
  margin: 20px 0;
  text-align: center;  /* Centering the video and its description */
}

.video-item iframe {
  width: 100%;  /* Ensures the video takes full width of its container */
  height: 200px;
  border: none;
}

.video-item p {
  font-size: 1.1em;  /* Adjust text size */
  margin-top: 10px;
}

/* Mobile Specific Adjustments - Keep videos centered on mobile devices */
@media (max-width: 768px) {
  .video-gallery {
    width: 100%;  /* Ensure videos take full width on mobile */
  }
}
/* Fixing TikTok video alignment and adding space between sections */
.video-gallery {
  display: flex;
  flex-direction: column;  /* Stack videos vertically */
  align-items: center;  /* Center videos horizontally */
  justify-content: center; /* Ensure videos are centered vertically */
  width: 100%;
}

.video-item {
  width: 80%;  /* Ensure videos are of a consistent width */
  margin: 20px 0;
  text-align: center;  /* Centering the video and its description */
}

.video-item iframe {
  width: 100%;  /* Ensures the video takes full width of its container */
  height: 200px;
  border: none;
}

.video-item p {
  font-size: 1.1em;  /* Adjust text size */
  margin-top: 10px;
}

/* Adding spacing between TikTok/Instagram section and the price text */
.video-ratings {
  margin-bottom: 40px;  /* Add space below video section */
}

/* Adding more space between sections on mobile */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.5em;  /* Smaller title size for mobile */
    margin-bottom: 20px;  /* Adding more spacing under the title */
  }

  .hero .price {
    margin-top: 20px;  /* Adding more space between price and other content */
  }
}
/* Fix for TikTok video centering */
.video-item iframe {
  width: 100%;  /* Ensure the video takes full width of its container */
  height: 200px;
  border: none;  /* Removing any border or unwanted elements */
}

.video-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center TikTok videos horizontally */
  justify-content: center; /* Ensure videos are centered vertically */
  width: 100%;
}

.video-item {
  width: 80%;  /* Ensure videos have consistent width */
  margin: 20px 0;
  text-align: center;  /* Center the content of the video item */
}

.video-item iframe {
  width: 100%;  /* Video fills container width */
  height: 200px;
  border: none;  /* No border around TikTok video */
}

.video-item p {
  font-size: 1.1em;
  margin-top: 10px;
}
/* Change icon color to black */
.fas, .fab, .far {
  color: black !important;  /* Force icons to be black */
}

.step i {
  color: black !important;  /* Ensure icons in the steps section are also black */
}
/* Specific fix for TikTok videos centering */
.video-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center videos horizontally */
  justify-content: flex-start; /* Align videos properly at the top, ensuring they stack vertically */
  width: 100%;
  margin: 0 auto;  /* Ensures proper centering */
}

.video-item {
  width: 90%;  /* Make videos slightly smaller on larger screens to avoid overflow */
  margin: 20px 0;
  text-align: center;  /* Ensuring text and videos are centered */
}

.video-item iframe {
  width: 100%;  /* Ensure video takes full width of the container */
  height: 200px;  /* Set a fixed height for consistency */
  border: none;
}

.video-item p {
  font-size: 1.1em;
  margin-top: 10px;
}

@media (max-width: 768px) {
  /* Ensuring TikTok videos are properly centered on smaller screens */
  .video-gallery {
    width: 100%;  /* Full width on mobile */
  }
  
  .video-item iframe {
    height: 200px;  /* Keep height consistent for mobile */
  }
}