aboutus.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

body {
  font-family: "Poppins", Arial, sans-serif;
  background-color: #F9F8F9;
  width: 100%;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  /* background-color: #f20000; */
  height: 80px;
  width: 100%;
}

.header-container h2 {
  /* margin-left: 20px; */
  padding: 10%;
}




#menuitem {
  display: flex;
  /* gap: 20px; */
  /* margin-right: 20px; */
  display: none;
  flex-direction: column;
  position: absolute;
  /* padding-right: 20%; */
  width: 15%;
  /* padding-left: 900px; */
  /* justify-content: space-between; */
  /* align-content: space-between; */
  background-color: white;
  right: 30px;
  top: 50px;
  padding: 1% 0;
}

.hamburger-btn {
  background: none;
  border: none;
  font-size: large;
}

.hamburger-menu {
  margin-right: 30px;
  /* font-size: 13px; */
  font-weight: 100;
  background-color: none;
}

nav a {
  text-decoration: none;
  color: rgb(52, 46, 46);
  font-size: 13px;
  padding: 5% 10%;
}

nav a:active {
  /* background-color: #D4C555; */
  color: #D4C555;
}

a {
  text-decoration: none;
}

.aboutus_container {
  display: flex;
  /* padding-left: 10%; */
  /* padding-right: 10%; */
  height: 50vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #F9F8F9;
}

.navi {
  margin-top: 20%;
  /* margin-bottom: 20%; */
  display: flex;
  /* position: relative; */
  justify-content: center;
  align-items: center;
  /* background-color: blue; */
  width: 100%;
  height: 100px;
  text-transform: uppercase;
  flex-direction: column;
}

.navi a {
  color: #949594;
}

.navi a:hover {
  color: #D4C555
}



.aboutus_heading {
  text-transform: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 40px;
}

.aboutme_container {
  display: flex;
  flex-direction: row;
  /* height: 100%; */
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
  align-items: center;
  /* background-color: aquamarine; */
}

.count_div {
  display: flex;
  flex-direction: column;
  width: 50%;
  /* height: 100%; */
  justify-content: center;
  align-items: center;

}

.aboutme_div {
  display: flex;
  flex-direction: column;
  width: 45%;
  height: 100%;
  /* justify-content: center;
  align-items: center; */
  /* padding-left: 2%; */
}

.countrow1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 85%;
  margin-bottom: 6%;
}

.countrow2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 85%;
  margin-bottom: 6%;
}

.count {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  /* margin: 3% 5%; */
  padding: 7% 1%;
  text-align: center;
  margin: 0% 2%;
  /* margin-bottom: 2%; */
}

.count p {
  color: #D4C555;
  font-size: 40px;
  font-weight: 600;
}

.count span {
  font-size: 14px;

  /* display: inline; */
}

.subheading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #D4C555;
  text-transform: uppercase;
  font-size: small;
}

.info {
  margin-bottom: 4%;
}

.aboutme_div h3 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 4%;
}

.descripation {
  color: #949594;
  font-size: medium;
  font-weight: 400;
}

.details1 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 8%;
}

.det1 {
  width: 100%;
}

.detailsinfo {
  display: flex;
  flex-direction: row;
  /* justify-content: space-around; */
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.detailsinfo span:first-child {
  color: #000000;
  width: 50%;
}

.detailsinfo span:last-child {
  width: 100%;
  color: #D4C555;
}

.downloaddiv:hover {
  cursor: pointer;
}

.downloadbtn {
  background: #D4C555;
  border: 1px #D4C555 solid;
  padding: 2% 5%;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}

.skilldiv {
  margin-top: 5%;
}


.skilldiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 5%;
}

.Myskillheader {
  /* margin: 20%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 5%;
}

.Myskillheader h1 {
  font-size: 40px;
  /* font-weight 200; */
  font-weight: 600;
}

.Myskillheader span {
  font-size: 13px;
  font-weight: 700;
  color: #D4C555;
  letter-spacing: 2px;
}

.skills {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 100%;
  /* margin-left: 2%; */
}

.skills-grid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  width: 33%;
  /* padding-left: 3%; */
}

.progress {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin-bottom: 5%;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.progress-bar {
  display: flex;
  height: 7px;
  background-color: #949594;
  width: 80%;
}

.progress h3 {
  margin-bottom: 7px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  color: #323333;
  /* display: flex; */
}

.progress span {
  /* position: relative; */
  position: absolute;
  /* margin-left: 266px;
  margin-top: 3px;
  margin-bottom: 20px; */
  top: 2%;
  right: 20%;
}


.progression {
  background-color: #D4C555;
}

.Testdiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10%;
  /* margin-bottom: 3%; */
}

.Testheader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 5%;
}

.Testheader span {
  font-size: 13px;
  font-weight: 700;
  color: #D4C555;
  letter-spacing: 2px;

}

.Testheader h1 {
  font-weight: 600;
  font-size: 40px;
}

.testcontainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2%;
  margin-bottom: 8%;
  padding: 0 6%;
}

.test-card {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  width: 33%;
  /* padding-right: 2%; */
  padding: 0 1%;
}

.test-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5% 8%;
  /* background-color: #949594; */
  background-color: white;
}

.test-img {
  /* width: 100px;
  height: 100px; */
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  /*background-image: url();*/
}

.test-quote {
  position: absolute;
  right: 70%;
  bottom: 0;
  height: 28%;
  width: 10%;
  background-color: #D4C555;
  border-radius: 50%;
  /* -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%; */
}

.test-quote span {
  padding-left: 20%;
  font-size: 22px;
  color: #FFFFFF;
  padding-top: 8%;
}

.test-name {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* padding: 30px */
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
}

.test-name .name {
  font-size: 20px;
  font-weight: 700;
}

.test-name span {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 14px;
  color: #D4C555;
}

.test-desc {
  margin: 10% 2%;
  font-size: small;
  font-weight: 500;
  color: #949594;

}


.contact_footer {
  display: flex;
  margin-top: 100px;
  margin-bottom: 10px;
  align-items: end;
  justify-content: center;
  color: #9D9A99;
}

.contact_heading {
  font-family: "Poppins", Arial, sans-serif;
}

/* 
.test-info p{
  margin: 10% 2%;
} */

/* fade in animation */
/* 
@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
    
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
} */