/* Reset default margin and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif; /* Use Roboto font */
}

body {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  background: #31363F;
}

/* Navigation styles */
nav {
  position: relative;
  background-color: #333333;
  text-align: center; /* Center the text inside the nav */
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0; /* Remove default margin */
}

nav ul li {
  display: inline;
}

nav ul li a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
}

nav ul li a:hover {
  background-color: #555555;
}

/* About section styles */
.about-us {
  padding: 10vh 0; /* Adjust padding for smaller screens */
  background: #31363F;
}

.about {
  max-width: 90%; /* Adjust max-width for smaller screens */
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Stack items vertically on smaller screens */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  text-align: center;
}

.pic {
  width: 200px; /* Set width to 200px */
  height: auto; /* Maintain aspect ratio */
}

a {
  color: #40A2D8;
}

/* Text styles */
.text {
  width: 90%;
  color: #F0EDCF;
}

.text h2 {
  font-size: 8vw; /* Responsive font size */
  margin-bottom: 10px;
}

.text h5 {
  font-size: 4vw; /* Responsive font size */
  margin-bottom: 20px;
}

.text h3 {
  font-size: 15px; /* Fixed font size */
  /* Add any other styles for h3 elements here */
}

.text p {
  font-size: 3vw; /* Responsive font size */
  line-height: 1.5;
}

/* Normal size font */
.text p.normal {
  font-size: 5px; /* Fixed font size */
}

.data {
  margin-top: 3vw; /* Responsive margin */
}

.hire {
  font-size: 3vw; /* Responsive font size */
  padding: 2vw 5vw; /* Responsive padding */
}

/* Social icons styles */
.social-icons {
  display: flex; /* Change display to flex */
  justify-content: center;
  margin-top: 2vw;
}

.social-icons a {
  margin: 0 1vw; /* Adjust spacing between icons */
}

.social-icons a i {
  font-size: 4vw; /* Responsive font size */
  width: 7vw; /* Responsive width */
  height: 7vw; /* Responsive height */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.social-icons a:hover i {
  background-color: #4070f4;
  color: #ffffff;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .about-us {
    padding: 20px 0; /* Adjust padding for smaller screens */
  }

  .pic {
    width: 80%; /* Adjust width for smaller screens */
    height: auto; /* Maintain aspect ratio */
  }

  .social-icons a i {
    font-size: 6vw; /* Responsive font size */
    width: 10vw; /* Responsive width */
    height: 10vw; /* Responsive height */
  }
}
.hire{
  font-size: 20px;
  background: #4070f4;
  color: #fff;
  text-decoration: none;
  border: none;
  padding: 8px 25px;
  border-radius: 6px;
  transition: 0.5s;
}
.hire:hover{
  background: #000000;
  border: 1px solid #4070f4;
}