@font-face {
    font-family: "Aeonik";
    src: url("font/AeonikProTRIAL-Light.otf");
  
}
*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

html,body{
  height: 100%;
  width: 100%;

}
.navbar{
  font-family: 'Aeonik Pro', sans-serif;
  padding-top:3rem;
}

.container{
  width: 100%;
  background-color: #DEDDFF;
}



.links{
  background: linear-gradient(to top, #396ff7d0, #0647ed);
}

.links img{
  height: 28px;
  width: 28px;
}
.navbar img{
  object-fit: contain;
}

.login-page{
  border: 1px solid #0042EC;
  scale: 0.95;
  border-radius: 20px;
}

.work{
  background-color: #DDFF00;
}

.yellow-color{
  color: #DDFF00;
}

.border-color{
  border: 1px solid #1162dc65;

}

/* center */

.review-card-heading{
color: #6B67FF;
font-size: 2rem;
}

.review-container{
background-color: #DEDDFF;
}

.center{
background-color: #DEDDFF;
width: 100%;
}

/* Card Container */
.card {
  background: #d8ff00; 
  border-radius: 20px;
  padding: 20px;
  width: 320px;
  font-family: sans-serif;
  position: relative;
}

/* Text */
.title {
  font-size: 18px;
  color: #125;
  margin-bottom: 15px;
}

.percentage {
  font-size: 36px;
  /* font-weight: bold; */
  color: #006E56;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 10px;
  background: #fff;
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.progress {
  width: 80%;
  height: 100%;
  background: #006E56;
  border-radius: 10px;
}

/* Avatar Images */
.avatars {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid white;
  position: absolute;
}

.first {
  right: 0;
}

.second {
  right: 20px;
}

/* Plus Icon */
.plus-icon {
  width: 40px;
  height: 40px;
  background: #006E56;
  color: white;
  font-size: 29px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* right: 0px; */
  /* top: -6px; */
}

.center-right{
  color: #006E56;
}


.strategic-btn{
  color: #006e56a9;
}

.strategic-work-btn img{
  background-color: #006E56;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  padding: 5%;
}

.strategic-btn img{
  background-color: #006E56;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  padding: 2%;

}

.title{
  color: #006E56;
}

.gradient-btn{
  background: linear-gradient(to right, #2B81FF, #1563DC);
}

.yellow-border{
background-color: #F0FF91;

}

/* footer */

.right-text-links a{
  color: #0042EC;
  font-size: 2.5rem;

}

.right-text h2{
  font-weight: 700;
  color: #0042EC ;
}

.footer .left a{
  color: #0042EC;
}


/* Work Page-CSS */

.work-image{
background-image: url(../images/work-main-img-svg.svg);
height: 130vh;
width: 100%;
background-position: top;
background-size: cover;

}


.work-image img{
margin-top: -10%;
height: 100%;
width: 100%;
object-position: center;
overflow: hidden;
z-index: -9;
}


.work-image h2{
color: #0042EC;
}

.about-pages{
background-color: #DEDDFF;
}

.yellow-btn{
background-color: #DDFF00;
color: #1A7D67;

}

/* @media (max-width: 1200px) {
.yellow-btn{
  background-color: #DDFF00;
  color: #1A7D67;
  font-size: 1rem;

}


} */

@media (max-width: 650px) {

  .links img{
    height: 18px;
    width: 18px;
  }


  .first-right, .second-left, .second-right, .second-left{
    width: auto;
  }


  .strategic-work-btn img{
    background-color: #006E56;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding: 2%;
  }


}
.footer{
    font-family: 'Aeonik Pro', sans-serif;
}

@media (max-width: 650px) {
  .work-image{
    height: 38vh;
  }
  .work-image h2{
    margin-top:-25% !important;
  }
  .first-left img {
    transform: scaleX(2.5) scaleY(8.5) !important;
   object-fit: cover !important;
  }
  #second-right{
    transform: scaleX(2.5) scaleY(6.5) !important;
  }
  #second-left{
    transform: scaleX(2.5) scaleY(6.5) !important;
    margin-bottom :150px;
    margin-left :50px;
  }
  #second-right-fourth{
    transform: scaleX(2.5) scaleY(4.5) !important;
    margin-left: 30px;

  }
}

.btn-hover{
  background-color: #DDFF00;
  /* width: 50%; */
}

#mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   z-index: 100;
}
#mobile-menu li{
  padding-bottom: 1.25rem;
}
.mobile-logo-brand {
   margin-top: 7%;
   margin-bottom: 5%;
   margin-left: 5%;
   background: white;
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
}
#close-btn{
  position: fixed;
    top: 7%;
    right: 3%;
    z-index: 999;
    transform: rotate(45deg);
}
.mobile-logo-brand a img{
  height:50px;
}