/* Reset some default styles */
body,
h1,
h2,
p {
  margin: 0;
  padding: 0;
}

/* Style the video background container */
.video-background {
  position: relative;
  width: 100%;
  min-height: 30vh;
  overflow: none;
  text-align: center;
}

/* Style the content on top of the video background */
.header-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Style the footer */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #edbb4eba;
  text-align: center;
  padding: 5px 0;
  font-size: 15px;
  color: white;
}

/* Style the top buttons and move them to the right */
.top-buttons,
.nav-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

/* Style the Home button */
.video-button.home-button {
  background: transparent;
  background-blend-mode: luminosity;
  border: none;
  color: black;
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 10px;
}

/* Style the About Us button */
.video-button.about-button {
  background: transparent;
  background-blend-mode: luminosity;
  border: none;
  color: black;
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 10px;
}

/* Style the Contact Us button */
.video-button.contact-button {
  background: transparent;
  background-blend-mode: luminosity;
  border: none;
  color: black;
  padding: 5px 10px;
  margin-right: 570px;
  margin-top: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 10px;
}

/* Style the Teacher's Portal button */
.video-button.teachers-button {
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  border-color: none;
  color: black;
  background-color: white;
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
}

/* Style the Learner's Portal button */
.video-button.learners-button {
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  border-color: none;
  color: black;
  background-color: white;
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
}

/* Hover effect for each button */
.video-button:hover {
  background-color: #edbb4eba;
  color: white;
}

/* Style the fullscreen image */
.fullscreen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Style the MySyncSpace text */
.my-syncspace {
  position: absolute;
  top: 15px;
  left: 20px;
}

.small-title {
  font-family: "Eras Bold ITC", sans-serif;
  font-size: 35px;
  color: black;
  text-shadow: rgb(245, 148, 22);
  margin-bottom: 5px;
}

/* Style the paragraph below the title (Your English Learning Base) */
.subtitle {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  text-shadow: rgb(245, 148, 22);
  margin-left: 1px;
  margin-right: 15px;
}

/* Style the additional text box */
.additional-text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: none;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  width: 80%; /* Adjust the width as needed */
  max-width: 600px; /* Adjust the maximum width as needed */
}

/* Style the first paragraph */
.paragraph1 {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  margin: 8px 0;
  text-align: center; /* Align paragraphs to justify text */
  line-height: 1.5; /* Adjust line height as needed */
}

/* Style the third paragraph */
.paragraph2 {
  font-size: 25px; /* Customize the font size for the third paragraph */
  color: white; /* Customize the color for the third paragraph */
  margin: 20px 0; /* Customize the margin for the third paragraph */
  text-align: center; /* Customize the text alignment for the third paragraph */
  font-style: bold;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

/* Ensure that the existing styles are not affected */

/* Style the "LEARN MORE" button */
.learn-more-button {
  background-color: #ff6600; /* Background color for the button */
  color: white; /* Text color for the button */
  font-weight: bold; /* Bold text */
  font-size: 18px; /* Font size */
  border: none; /* Remove button border */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Cursor style */
  margin-top: 30px; /* Spacing between button and paragraphs */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition on hover */
}

/* Hover effect for the button */
.learn-more-button:hover {
  background-color: rgb(245, 148, 22); /* Change background color on hover */
}
/* ... (existing styles) ... */

/* Style the additional text box */
.additional-text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: none;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  width: 80%; /* Adjust the width as needed */
  max-width: 600px; /* Adjust the maximum width as needed */
}

/* Style the additional information text */
.additional-info {
  margin-top: 20px; /* Adjust the margin to create space between paragraphs and additional text */
  text-align: left; /* Align the additional text to the left */
}

/* Style the links within the additional information */
.additional-info a {
  color: #ff6600; /* Customize link color */
  text-decoration: none; /* Remove underlines from links */
  transition: color 0.3s; /* Smooth color transition on hover */
}

/* Hover effect for links within the additional information */
.additional-info a:hover {
  color: rgb(245, 148, 22); /* Change link color on hover */
}

/* ... (existing styles) ... */