@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url('/assets/bg.gif') center center / cover no-repeat fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Poppins', sans-serif; /* Apply Poppins to all text */
  }

  h1{
    font-weight: 400;
  }

  .grey{
    color:#a0a0a0;
  }

  .designation {
    display: flex;
    align-items: center; /* Aligns the text vertically center */
    font-size: 20px; /* Adjust font size as needed */
}

#role {
    margin: 0 5px; /* Adds a little space around the animated text */
    font-weight: 500; /* Optional: Makes the animated text stand out */
}


  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #060606;
    opacity: 0.7;
    z-index: 1; /* Ensures the overlay is above the background but below the content */
  }

  .container {
  color: white;
  position: relative;
  z-index: 2; /* Ensures the content is above the overlay */
  }
  
  .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 20px; /* Centers the avatar and adds space below */
    display: block;
  }

  .text-content, .avatar-section {
    text-align: center;
}
  
  .cta {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 24px;
  background-color: #242424;
  color: #a0a0a0;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  }
  
  .cta:hover {
  background-color: #2e2e2e;
  color: #fff;
  }

  .logo {
    display: block;
    width: 48px;
    max-width: 100%; /* ensures the image is responsive */
    height: auto; /* maintains the aspect ratio */
    margin: 50px auto; /* centers the image and adds space around it */
}
  
  .social-links a {
    text-decoration: none;
  font-size: 24px;
  margin: 0 10px;
  }
  
  .social-links {
  margin-top: 50px;
  }

  .social-icon {
    display: inline-flex; /* Use inline-flex to keep icons in line and center content */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    width: 60px; /* Circle size */
    height: 60px; /* Circle size */
    background-color: #242424; /* Circle color */
    color: #A0A0A0; /* Icon color */
    border-radius: 50%; /* Make it round */
    margin: 5px; /* Space between icons */
    font-size: 20px; /* Icon size */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.social-icon:hover {
    background-color: #2e2e2e; /* Darker shade for hover effect */
    color: #fff;
}

/* Media query for web and iPad screens */
@media (min-width: 768px) {

  h1{
    font-size: 40px;
    text-align: left;
  }
  .avatar-section {
      display: flex;
      align-items: center;
  } 

  .text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

  .avatar {
      margin: 0 60px 90px 0; /* Adjusts margin for spacing between avatar and text */
  }

  .cta {
      margin: 20px 0 0; /* Adjusts margin for spacing above the button */
      padding: 15px 18px;
      display: inline-block; /* Aligns button next to text on larger screens */
      font-size: 24px;
      align-self: flex-start;
  }

  .logo {
    margin-top: 100px;
  }

  .social-links {
    margin-top: 100px;
    }
}