/* navbar */
* {
  box-sizing: border-box;
  font-size: 16px;
  top: 0;
  margin: 0;
  padding: 0;
}


@font-face {
  font-family: poppin;
  src: url(../Poppins/Poppins-Bold.ttf);
}

.container {
  display: flex;
  justify-content: space-between;
  background-color: white;
  position: fixed;
  z-index: 999;
  overflow: hidden;
  width: 100%;
}

.heading h3 {
  font-weight: 500%;
  padding: 8px 4px;
  font-size: 32px;
  padding-left: 60px;
  font-weight: bolder;
}

.navbar {
  font-weight: 500%;
  width: 50%;
}

.fix {
  color: white;
  background-color: black;
  font-size: 16px;
  font-weight: bolder;
  /* padding: 16px 22px; */
}

.list {
  display: flex;
  justify-content: flex-start;
  width: 50%;
  /* padding: 16px 22px; */
}

ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
  color: #fff;
  z-index: -1;
  transition: transform 0.5s;
}

ul li a:hover::after {
  transform: scaleX(1);
}

ul li a:hover {
  color: #fff;
  padding: 12px 16px;
  background-color: #000;
  font-weight: 500%;
  list-style-type: none;
}

ul li {
  list-style-type: none;
  font-size: 16px;
}

ul li a {
  float: left;
  width: 100px;
  height: 50px;
  text-decoration: none;
  color: #000;
  text-align: center;
  line-height: 50px;
  font-size: 17px;
  transition: all 500ms;
  position: relative;
  z-index: 1;
}

header nav a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: right;
  background: black;
  color: #fff;
  z-index: -1;
  transition: transform 1s;
}



/* main */
.main {
  background-color: rgb(250, 248, 250);
  align-items: center;
  display: flex;
  width: 90%;
  /* position: relative; */
  margin: 7px;
  /* position: fixed;
    z-index: -1; */
  margin-left: 60px;
}

.left img {
  width: 480px;
  height: 520px;
  object-fit: cover;
  position: fixed;
  z-index: 999;
  top: 54px;
}

.right {
  display: flex;
  float: right;
  left: 600px;
  flex-direction: column;
  left: 800px;
  padding-top: 58px;
  margin-top: 58px;
  padding-left: 500px;
  margin-left: 8px;
  margin-bottom: 70px;
  height: auto;
  overflow: hidden;
  transform: translateY(5%);
    animation: slide-up 1.5s ease-in-out forwards;
}
@keyframes slide-up {
    0%{
        opacity: 0;
        transform: translateY(5%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}


.head p {
  display: inline-block;
  position: relative;
  font-weight: bolder;
  font-size: 28px;
  letter-spacing: 8px;
  color: #333;
  font-family: 700;
}
.head p::after{
  position: absolute;
  content: "";
  width: 450px;
  height: 1px;
  left: 100%;
  top: 48%;
  background-color: #7d7789;
  transform: translateY(-50%);
  margin-left: 10px;
}

.right .info {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: 1;
}

.information {
  width: 50%;
  left: -15px;
  position: relative;
  align-items: start;
}

.information p {
  font-size: 17px;
  padding: 6px;
  margin: 6px;
  color: rgb(138, 136, 136);
}

.history p {
  font-size: 19px;
  padding: 2px;
  margin: 2px;
  color: rgb(138, 136, 136);
}

.history {
  margin-left: -28px;
  padding-left: -18px;
}

.history strong {
  padding: 14px;
  margin: 14px;
  color: rgb(138, 136, 136);
}

.serve {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: 1;
}

.serve-left {
  width: 50%;
}

.serve-left p,
.serve-right p {
  font-size: 20px;
  position: relative;
  font-weight: bolder;
  justify-content: flex-start;
  align-items: flex-start;
  /* color: rgb(138, 136, 136); */
}

.serve-left p::after{
  position: absolute;
  content: "";
  width: 200px;
  height: 1px;
  left: 100%;
  top: 48%;
  background-color: #7d7789;
  transform: translateX(-50%);
  margin-left: -140px;
}

.serve-right p::after{
  position: absolute;
  content: "";
  width: 220px;
  height: 1px;
  left: 100%;
  top: 48%;
  background-color: #7d7789;
  transform: translateY(-50%);
  margin-left: 10px;
}

.service-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.service-list-left,
.service-list-right {
  width: 50%;
  background-size: 30px;
  border-color: rgb(250, 248, 250);

}

.service-list-left li::before {
  background-image: url(../Images/arrow.jpg);
  content: "";
  display: inline-block;
  margin-right: 7px;
  height: 5px;
  width: 5px;
}

.service-list-right li::before {
  background-image: url(../Images/arrow.jpg);
  content: "";
  display: inline-block;
  margin-right: 7px;
  height: 5px;
  width: 5px;
}

.service-list-left li,
.service-list-right li {
  list-style-type: none;
  padding: 5px;
  margin: 8px;
  color: rgb(138, 136, 136);
}


.learn {
  display: flex;
  flex-direction: row;
  flex-wrap: 1;
  width: 100%;
}

.learn #pro{
  width: 50%;
  position: relative;
  font-size: 22px;
  font-weight: bolder;
  letter-spacing: 3px;
}

.learn #pro::after{
  position: absolute;
  content: "";
  width: 160px;
  height: 1px;
  left: 100%;
  top: 52%;
  background-color: #7d7789;
  transform: translateY(-50%);
  margin-left: -200px;
}
.learn #lan {
  width: 50%;
  position: relative;
  font-size: 22px;
  letter-spacing: 3px;
  font-weight: bolder;
}
.learn #lan::after{
  position: absolute;
  content: "";
  width: 170px;
  height: 1px;
  left: 100%;
  top: 48%;
  background-color: #7d7789;
  transform: translateY(-50%);
  margin-left: -190px;
}

.skills {
  display: flex;
  flex-direction: column;
}

.edu {
  display: flex;
  flex-direction: row;
  /* justify-content: flex-start; */
  margin-bottom: 70px;
}

.language {
  display: flex;
  flex-direction: column;
}

.disc {
  display: flex;
  flex-direction: row;
}

.program p {
  width: 100%;
  font-size: 19px;
  /* padding: 4px; */
  margin: 4px;
  padding-top: 18px;
  padding-bottom: 8px;
  color: rgb(125, 119, 137);
}

progress {
  width: 250px;
  height: 4px;
  border: none;
  background-color: rgb(250, 248, 250);
}

progress::-webkit-progress-value {
  background-color: rgb(52, 51, 52);
}

progress::-moz-progress-bar {
  background-color: rgb(121, 117, 121);
}

.language {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  margin: 15px;
}

.progress-bar {
  display: inline-block;
  text-align: center;
  margin: 20px;
}

.progress-circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgb(250, 248, 250);
}

.progress-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(250, 248, 250);
  clip: rect(0, 60px, 120px, 0);
  transform-origin: center right;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-weight: bold;
  color: #171817;
}

.progress-bar-fill {
  position: absolute;
  top: calc(50% - (80px / 2));
  left: calc(50% - (80% / 2));
  background-color: rgb(250, 248, 250);
}

.disc {
  margin-top: 10px;
}

.circle-wrap {
  position: relative;
  margin: 20px;
  width: 120px;
  height: 120px;
  background: rgb(178, 173, 178);
  border-radius: 50%;
  border: 1px solid rgb(106, 105, 106)0;
  transition: all 0.3s ease;
}



.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 120px, 120px, 60px);
}

.circle-wrap .inside-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgb(241, 238, 246);
  line-height: 106px;
  text-align: center;
  margin-top: 5px;
  margin-left: 5px;
  color: #373839;
  position: absolute;
  z-index: 100;
  font-weight: 500;
  font-size: 2em;
}

/* color animation */

/* 1st progress bar */
.mask .fill:first-child {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #616164;
}

.mask.full:first-child,
.circle .fill:first-child {
  animation: fill1 ease-in-out 3s;
  transform: rotate(170deg);
}

/* 2nd progress bar */
.mask .fill:nth-child(2) {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #474849;
}

.mask.full:nth-child(2),
.circle .fill:nth-child(2) {
  animation: fill2 ease-in-out 3s;
  transform: rotate(120deg);
}

/* 3rd progress bar */
.mask .fill:nth-child(3) {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #227ded;
}

.mask.full:nth-child(3),
.circle .fill:nth-child(3) {
  animation: fill3 ease-in-out 3s;
  transform: rotate (90deg);
}

@keyframes fill1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(95deg);
  }
}

@keyframes fill2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(80deg);
  }
}

@keyframes fill3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

.circles-wrap {
  position: relative;
  margin: 20px;
  width: 120px;
  height: 120px;
  background: rgb(178, 173, 178);
  border-radius: 50%;
  border: 1px solid rgb(106, 105, 106)0;
  transition: all 0.3s ease;
}



.circles-wrap .circles .masks,
.circles-wrap .circles .fills {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}

.circles-wrap .circles .masks {
  clip: rect(0px, 120px, 120px, 60px);
}

.circles-wrap .inside-circles {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgb(241, 238, 246);
  line-height: 106px;
  text-align: center;
  margin-top: 5px;
  margin-left: 5px;
  color: #373839;
  position: absolute;
  z-index: 100;
  font-weight: 500;
  font-size: 2em;
}

/* color animation */

/* 1st progress bar */
.masks .fills:first-child {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #616164;
}

.masks.fulls:first-child,
.circles .fills:first-child {
  animation: fill1 ease-in-out 3s;
  transform: rotate(150deg);
}

/* 2nd progress bar */
.masks .fills:nth-child(2) {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #474849;
}

.masks.fulls:nth-child(2),
.circles .fill:nth-child(2) {
  animation: fill2 ease-in-out 3s;
  transform: rotate(120deg);
}

/* 3rd progress bar */
.masks.fills:nth-child(3) {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #227ded;
}

.masks.fulls:nth-child(3),
.circle .fill:nth-child(3) {
  animation: fill3 ease-in-out 3s;
  transform: rotate (90deg);
}

@keyframes fill1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(120deg);
  }
}

@keyframes fill2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(120deg);
  }
}

@keyframes fill3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(120deg);
  }
}

.circle-wrapOne {
  position: relative;
  margin: 20px;
  width: 120px;
  height: 120px;
  background: rgb(178, 173, 178);
  border-radius: 50%;
  border: 1px solid rgb(106, 105, 106)0;
  transition: all 0.3s ease;
}



.circle-wrapOne .circleOne .maskOne,
.circle-wrapOne .circleOne .fillOne {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrapOne .circleOne .maskOne {
  clip: rect(0px, 120px, 120px, 60px);
}

.circle-wrapOne .inside-circleOne {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgb(241, 238, 246);
  line-height: 106px;
  text-align: center;
  margin-top: 5px;
  margin-left: 5px;
  color: #373839;
  position: absolute;
  z-index: 100;
  font-weight: 500;
  font-size: 2em;
}

/* color animation */

/* 1st progress bar */
.maskOne .fillOne:first-child {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #616164;
}

.maskOne.fullOne:first-child,
.circleOne .fillOne:first-child {
  animation: fill1 ease-in-out 3s;
  transform: rotate(160deg);
}

/* 2nd progress bar */
.maskOne .fillOne:nth-child(2) {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #474849;
}

.maskOne.fullOne:nth-child(2),
.circleOne .fillOne:nth-child(2) {
  animation: fill2 ease-in-out 3s;
  transform: rotate(140deg);
}

/* 3rd progress bar */
.maskOne.fillOne:nth-child(3) {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #227ded;
}

.maskOne.fullOne:nth-child(3),
.circleOne .fillOne:nth-child(3) {
  animation: fill2 ease-in-out 3s;
  transform: rotate (90deg);
}

@keyframes fill2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(150deg);
  }
}

@keyframes fill2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(120deg);
  }
}

@keyframes fill3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(120deg);
  }
}

.explain {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.explain p {
  font-size: 17px;
  font-weight: bolder;
  color: rgb(138, 136, 136);
}









/* footer */
footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 18px;
  padding-left: 40px;
  padding-top: 10px;
  position: fixed;
  background-color: white;
  z-index: 2000;
  bottom: 0;
  top: 90%;
  /* margin-top: 900px; */
  width: 100%;
}

.social-icons {
  width: 25px;
  height: auto;
  display: flex;
  width: 15%;
  margin-right: 28px;
}

i {
  padding-right: 12px;
  color: black;
}