/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: rgb(0, 118, 103);
}

/* Welcome Section Styling */
#wel {
  text-align: center;
  padding: 50px;
  background-color: black;
}

#wel h1 {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
}

#wel h4 {
  font-size: 24px;
  color: rgb(235, 228, 228);
  margin-top: 10px;
}

/* Content Section Styling */
/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Navbar styling */
.navbar {
  background-color: rgb(148, 142, 142);
  padding: 20px;
}

.navbar-brand img {
  margin-right: 15px;
  background-color: rgb(148, 142, 142);
}

.navbar-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

/* Page 1 styling */
#page1 {
  display: flex;
  align-items: center; /* Vertically center content */
  justify-content: space-between; /* Spread content to left and right */
  height: 100vh; /* Full viewport height */
  /* Black background */
  padding: 20px; /* Add padding around the content */
  box-sizing: border-box;
}
#page1 p {
  text-align: center;
  color: #fff;
}
#page1 img {
  max-width: 100%;
  border-radius: 10px;
}

/* Card section styling */
#page2 {
  padding: 50px 0;
  background-color: black;
}

#page2 h3 {
  color: white;
}

.card {
  margin-bottom: 30px;
  background-color: #333;
  color: white;
  transition: transform 0.2s;
  border: none;
}

.card:hover {
  transform: scale(1.05);
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}

/* Page 2 Styling */
#page2 {
  padding: 50px;
}

#page2 h3 {
  text-align: center;
  color: white; /* Ensure text is visible */
}
#left {
  flex: 1;
  display: flex;
  justify-content: center; /* Center the image horizontally */
}

#left img {
  max-width: 90%; /* Ensure the image doesn't overflow */
  height: auto;
  border-radius: 10px; /* Optional: add some rounding to the corners */
}

/* Text on the right side */
#right {
  flex: 1;
  color: black; /* White text for contrast against black background */
  padding-left: 20px; /* Add space between image and text */
}

#right p {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 300; /* Light font weight */
}

/* Logo in the welcome section */
#wel img {
  width: 100px;
  height: 100px;
  float: left;
}
.name-container {
  text-align: center;
}
#page3 h3 {
  text-align: center;
  color: #fff;
}

/* Media Queries for responsiveness */

/* For mobile devices (max-width: 768px) */
@media only screen and (max-width: 768px) {
  #page1 {
    flex-direction: column; /* Stack content vertically */
  }
  #page1 img {
    width: 100%; /* Make image full-width */
  }
  #left {
    flex-direction: column; /* Stack image and text vertically */
  }
  #left img {
    width: 100%; /* Make image full-width */
  }
  #right {
    padding-left: 0; /* Remove padding for mobile devices */
  }
  #right p {
    font-size: 16px; /* Reduce font size for mobile devices */
  }
  .card {
    margin-bottom: 20px; /* Reduce margin for mobile devices */
  }
  .card-img-top {
    height: 150px; /* Reduce image height for mobile devices */
  }
}

/* For tablet devices (min-width: 769px) and (max-width: 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  #page1 {
    flex-direction: row; /* Return to horizontal layout */
  }
  #page1 img {
    width: 50%; /* Make image half-width */
  }
  #left {
    flex-direction: row; /* Return to horizontal layout */
  }
  #left img {
    width: 50%; /* Make image half-width */
  }
  #right {
    padding-left: 20px; /* Restore padding for tablet devices */
  }
  #right p {
    font-size: 18px; /* Increase font size for tablet devices */
  }
  .card {
    margin-bottom: 25px; /* Increase margin for tablet devices */
  }
  .card-img-top {
    height: 180px; /* Increase image height for tablet devices */
  }
}

/* For laptop and desktop devices (min-width: 1025px) */
@media only screen and (min-width: 1025px) {
  #page1 {
    flex-direction: row; /* Return to horizontal layout */
  }
  #page1 img {
    width: 50%; /* Make image one-third width */
  }
  #left {
    flex-direction: row; /* Return to horizontal layout */
  }
  #left img {
    width: 100%; /* Make image one-third width */
  }
  #right {
    padding-left: 30px; /* Increase padding for laptop and desktop devices */
  }
  #right p {
    font-size: 20px; /* Increase font size for laptop and desktop devices */
  }
  .card {
    margin-bottom: 30px; /* Increase margin for laptop and desktop devices */
  }
  .card-img-top {
    height: 200px; /* Increase image height for laptop and desktop devices */
  }
}