/* General Styling */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*height: 200vh;  Make the page scrollable */
    background-color: #f0f0f0;
    margin: 0;
  }

  .container {
    width: 80%;
    display: flex;
    flex-direction: column; /* Stack boxes */
    align-items: center; /* Center boxes horizontally */
    margin-top: 50vh; /* Start further down the page */
  }

  .box {
    width: 50%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    opacity: 0;
    border-radius: 8px;
    margin: 10px 0; /* Space between boxes */
    transform: translateX(0); /* Reset transform for visibility */
  }

  /* Left Box Styling */
  .box-left {
    background-color: #000000;
  }

  /* Right Box Styling */
  .box-right {
    background-color: #000;
  }

  /* Keyframes for left and right animations */
  .slide-in-left {
    animation: slideInLeft 1s forwards;
  }

  .slide-in-right {
    animation: slideInRight 1s forwards;
  }

  @keyframes slideInLeft {
    0% {
      transform: translateX(-150%);
      opacity: 0;
    }
    100% {
      transform: translateX(-65%);
      opacity: 1;
    }
  }

  @keyframes slideInRight {
    0% {
      transform: translateX(150%);
      opacity: 0;
    }
    100% {
      transform: translateX(65%);
      opacity: 1;
    }
  }


/* Inner div styling for centering content */
.box-left div, .box-right div {
  display: flex;
  flex-direction: column; /* Ensures vertical alignment */
  align-items: center;
  text-align: center;
  padding: 10px;
}

/* Paragraph styling inside the box */
.box-left p, .box-right p {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}

/* Iframe styling for consistent spacing and border */
.box-left iframe, .box-right iframe {
  border: 2px solid #f4f4f4;
  border-radius: 8px;
  width: 208px;
  height: 167px;
}

.container1 {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.intro, .skills, .integration, .learning, .collaboration {
  margin-bottom: 15px;
  padding: 10px;
  border-left: 4px solid #4a90e2; /* Change color as needed */
  background-color: #f9f9f9; /* Light background for emphasis */
}
.intro:hover, .skills:hover, .integration:hover, .learning:hover, .collaboration:hover {
  background-color: #e8f4fa; /* Light blue on hover */
  transition: background-color 0.3s ease;
}

.header1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #4a90e2; /* Change this to your preferred color */
}