@font-face {
  font-family: "Tusker";
  src: url("Fonts/TuskerGrotesk-4700Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("Fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  font-family: "Poppins", sans-serif; /* Apply Poppins font to body */
  background-color: #fff200;
}

/* Header styles */
header {
  background-color: #1a2658; /* Blue background */
  padding: 20px;
  text-align: left;
}

.logo img {
  height: 50px; /* Adjust the height as needed */
}

/* Main section styles */

main {
  height: 95%;
  background: url("images/1920x1080_YB.webp") no-repeat center center / cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  background-position-y: 0px;
}

.content {
  color: #1a2658;
  max-width: 1200px;
  padding: 20px;
  border-radius: 5px;
}

.content h1 {
  font-size: 7.8em; /* Adjust font size for mobile */
  color: #1a2658;
  line-height: 1.1em;
  font-family: "Tusker"; /* Apply Tusker font to h1 */
}

.content h2 {
  font-size: 2.5em; /* Adjust font size for mobile */
  color: #1a2658;
  font-family: "Tusker"; /* Apply Tusker font to h1 */
}

.content h3 {
  font-size: 4em; /* Adjust font size for mobile */
  color: #1a2658;
  font-family: "Poppins"; /* Apply Tusker font to h1 */
}

.content p {
  font-size: 2.6em;
  color: #1a2658;
  margin-top: -20px;
  margin-bottom: 40px;
  font-family: "Poppins";
  line-height: 85px;
}

.image-links img {
  width: 25%;
}

/* Styles for tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  header {
    text-align: center; /* Center header text */
  }

  .logo img {
    display: block; /* Ensure the logo image behaves correctly */
    margin: 0 auto; /* Center the logo horizontally */
    height: auto; /* Adjust height for better responsiveness */
    width: 100%; /* Ensure the logo scales well on tablets */
    max-width: 150px; /* Limit the maximum width */
  }

  main {
    height: calc(100% - 40px);
    background: url("images/800x1200_YB.webp") no-repeat center center/cover; /* Tablet background image */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Center text content */
  }

  .content {
    margin-top: 54vw; /* Adjust margin for content placement on tablets */
  }

  .content h1 {
    font-size: 6em; /* Adjust font size for tablets */
  }

  .content h3 {
    font-size: 3em;
    color: #1a2658;
  }

  .content p {
    font-size: 2.3em; /* Adjust font size for tablets */
    margin-top: -0.5vw; /* Adjust margin for better spacing */
    margin-bottom: 2vw; /* Adjust margin for better spacing */
  }
  .image-links img {
    width: 32%;
  }
}

/* Responsive styles */
@media (max-width: 767px) {
  header {
    text-align: center;
    padding: 5px;
  }

  .logo img {
    height: auto; /* Adjust height for better responsiveness */
    width: 100%; /* Ensure the logo scales well on mobile */
    max-width: 120px; /* Limit the maximum width */
  }

  main {
    height: 93%; /* Adjust height based on header height */
    background: url("images/800x1200_YB.webp") no-repeat center center/cover; /* Mobile background image */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content on mobile */
    text-align: center; /* Center text on mobile */
  }

  .content {
    margin-top: 80vw;
  }

  .content h1 {
    font-size: 2.5em; /* Adjust font size for mobile */
    color: #1a2658;
    font-family: "Tusker"; /* Apply Tusker font to h1 */
  }

  .content h2 {
    font-size: 1.5em; /* Adjust font size for mobile */
    color: #1a2658;
    font-family: "Tusker"; /* Apply Tusker font to h1 */
  }

  .content h3 {
    font-size: 1.8em;
    color: #1a2658;
    font-family: "Poppins";
  }

  .content p {
    font-size: 1.3em;
    margin-top: -1vw;
    margin-bottom: 7vw;
    font-family: "Poppins";
    line-height: 0px;
  }
  .image-links img {
    width: 60%;
  }
}