@font-face {
  font-family: 'Figtree Bold';
  src: url(../fonts/Figtree-Bold.ttf);
}
@font-face {
  font-family: 'Figtree';
  src: url(../fonts/Figtree-Regular.ttf);
}
@font-face {
  font-family: 'Figtree Semibold';
  src: url(../fonts/Figtree-SemiBold.ttf);
}
@font-face {
  font-family: 'Fraunces Semibold';
  src: url(../fonts/Fraunces-SemiBold.ttf);
}
@font-face {
  font-family: 'Fraunces Bold';
  src: url(../fonts/Fraunces-Bold.ttf);
}
.inter-semi{
  font-family: 'Figtree Semibold' !important;
}
body {
  font-family: 'Figtree' !important;
  color: #171717 !important;
  -webkit-font-smoothing: antialiased;
}
h1{
  font-family: 'Fraunces Semibold' !important;
}
button, a.btn {
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Figtree Semibold', sans-serif;
  transition: 0.4s;
}
.btn-big {
  font-size: 1em !important;
  background-color: #7061EC !important;
  padding: 0.7em 0.5em !important;
  color: #ffffff !important;
  border-radius: 0.5em !important;
}
.btn-big:hover {
  color: #ffffff !important;
  background-color: #4D42A0 !important;
  transition: 0.2s all;
  img{
    transform: translate(20%);
  }
}
.btn-big:focus {
  color: #ffffff !important;
  background-color: #393176 !important;
}
.btn-mid {
  font-size: 1em !important;
  background-color: #ffffff !important;
  padding: 0.5em !important;
  color: #7061EC !important;
  border-radius: 0.5em !important;
  border: 1px solid #7061EC !important;
}
.btn-mid:hover {
  color: #ffffff !important;
  background-color: #5C33CC !important;
}
.btn-mid:focus {
  color: #ffffff !important;
  background-color: #5C33CC !important;
}
.btn-in {
  font-weight: 500 !important;
  font-size: 1em !important;
  background-color: #ffffff !important;
  padding: 0.5em !important;
  color: #0A66C2 !important;
  transition: 0.4s all !important;
  border-color: transparent !important;
}
.btn-in:hover {
  color: #ffffff !important;
  background-color: #0A66C2 !important;
}
.btn-in:focus {
  color: #ffffff !important;
  background-color: #0A66C2 !important;
}
.btn-email {
  font-weight: 500 !important;
  font-size: 1em !important;
  background-color: #ffffff !important;
  padding: 0.5em !important;
  color: #EA4335 !important;
  transition: 0.4s all !important;
  border-color: transparent !important;
  word-break: break-word;
}
.btn-email:hover {
  color: #ffffff !important;
  background-color: #EA4335 !important;
}
.btn-email:focus {
  color: #ffffff !important;
  background-color: #EA4335 !important;
}
.btn-phone {
  font-weight: 500 !important;
  font-size: 1em !important;
  background-color: #ffffff !important;
  padding: 0.5em !important;
  color: #333333 !important;
  transition: 0.4s all !important;
  border-color: transparent !important;
}
.btn-phone:hover {
  color: #ffffff !important;
  background-color: #333333 !important;
}
.btn-phone:focus {
  color: #ffffff !important;
  background-color: #333333 !important;
}
.navbar-bordered {
  border-bottom: 1px solid #F2F2F5;
  font-family: 'Figtree', sans-serif;
  padding: 0.5rem 1rem;
  opacity: 0;
  background-color: #ffffff;
}
.navbar-bordered .navbar-nav .nav-link{
  color: #6E6E6E !important;
}
.navbar-bordered .navbar-nav .nav-link:hover{
  color: #0D0D0D !important;
}
.navbar-bordered a.navbar-brand img {
  vertical-align: text-bottom;
}
.navbar-main .nav-item a.active {
  color: #0D0D0D !important;
  font-family: 'Figtree Semibold';
}
.social .nav-item .linkedin:hover {
  color: #0a65c1 !important;
}
.social .nav-item .behance:hover {
  color: #053eff !important;
}
.social .nav-item .dribbble:hover {
  color: #ea4e8a !important;
}
.social .nav-item .instagram:hover {
  color: #c1558b !important;
}
.social .nav-item .behance{
  font-size: 1.1em;
}
.headline {
  line-height: 1.2em;
  font-size: 4.5em;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  opacity: 0;
  transform: translateY(100px);
  padding-bottom: 0.2em;
}
.headline2 {
  font-size: 3rem;
  font-family: 'Fraunces Semibold', sans-serif;
}
.headline3{
  font-size: 1.5em;
  font-family: 'Figtree', sans-serif;
  text-align: center;
  line-height: 1.5;
  color: #6e6e6e;
}
.subtitle {
  font-size: 1.3em;
  font-family: 'Figtree', sans-serif;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  opacity: 0;
  transform: translateY(100px);
  color: #171717;
}
.subtitle strong {
  font-weight: 500;
}
.hero-btn {
  opacity: 0;
  transform: translateY(100px);
}
.hero-picture {
  position: relative;
  opacity: 0;
  transform: translateY(100px);
}
.hero-picture .waves {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.hero-picture .img-container {
  position: relative;
}
.hero-picture .img-container svg {
  position: absolute;
  bottom: 0;
  right: 0;
}
.half-circle {
  position: absolute;
  left: 0;
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  transform: translateZ(100px);
  top: 30%;
}
.half-circle.right{
  right: 0 !important;
  left: auto;
  transform: rotate(0deg) !important;
  top: 0;
  z-index: -1;
}
.btm-shadow {
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.04);
}
/*.up-shadow {
  box-shadow: 0px -12px 12px rgba(0, 0, 0, 0.04);
}*/
.projects {
  margin-top: 6rem;
}
.projects .project-card {
  /*margin-bottom: 1rem;*/
  background: linear-gradient(180deg, #F2F2F5 0%, #FFFFFF 100%);
  border-radius: 2em;
}
.projects .project-card .project-image img{
  border-radius: 1em;
}
.projects .project-card .project-desc {
  font-family: 'Figtree Bold', sans-serif;
}
.projects .project-card .project-desc h3 {
  color: #333333;
  font-weight: 600;
  margin-bottom: 0.2em;
}
.projects .project-card .project-desc p {
  color: #171717;
  font-family: 'Figtree', sans-serif;
  font-size: 1.1em;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
.projects .project-card .project-desc .labels span {
  font-family: 'Figtree', sans-serif;
  background-color: rgba(51, 51, 51, 0.1);
  padding: 0.5em 1em;
  border-radius: 2em;
  margin-right: 0.5em;
  color: #333333;
  font-weight: 500;
}
.projects .project-card .project-desc-right {
  left: 0;
}
.testimonials {
  margin-bottom: 7rem;
  margin-top: 7rem;
}
.testimonials .testimonial-card {
  background: radial-gradient(156% 500% at 0% 0%, #FFFFFF 0%, #F2F2F5 70%);
  border: 1px solid #F2F2F2;
  border-radius: 1em;
}
.testimonials .testimonial-card img {
  display: block;
}
.testimonials .testimonial-card p {
  color: #0D0D0D;
  font-family: "Figtree", sans-serif;
  font-size: 1em;
  line-height: 1.6;
}
.testimonials .testimonial-card .testimonial-author img {
  display: block;
  max-width: 56px;
}
.testimonials .testimonial-card .testimonial-author span a{
  color: #171717;
  font-weight: 400;
  font-size: 1em;
  text-decoration: none;
  font-family: "Figtree Bold", sans-serif;
}
.testimonials .testimonial-card .testimonial-author small {
  color: #171717;
  font-family: "Figtree", sans-serif;
  font-size: 0.875em;
}
#about{
  background: radial-gradient(45% 32% at 50% 0%, #7061EC 0%, rgba(13, 13, 13, 0.1) 99%);
  background-color: #0D0D0D;
  color: #ffffff;
  padding: 6rem 0;
}
.about {
  /*margin-bottom: 8rem;*/
}
.about p {
  color: #545465;
  font-family: "Figtree", sans-serif;
  font-size: 1.1em;
  line-height: 1.6em;
  color: #ffffff;
}
.about p.dark-p{
  color: #171717;
}
.about p a{
  color: #333333;
}
#footer {
  padding: 6rem 0;
  position: relative;
  background: radial-gradient(45% 32% at 50% 0%, #7061EC 0%, rgba(13, 13, 13, 0.1) 99%);
  background-color: #0D0D0D;
  color: #ffffff;
}
#footer .subtitle{
  color: #ffffff;
}
#footer img.shapes {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: updown 4s infinite;
  z-index: -1;
}
/*Click to top CSS*/
.btn-bottom {
  position: absolute;
  right: 30px;
  bottom: 30px;
  transition: 0.4s;
  z-index: 1;
}
.btn-bottom:hover .outer-circle {
  fill: #333333;
}
.btn-bottom:hover {
  transition: 0.4s;
}
@keyframes updown {
  0%, 100% {
    top: 50%;
  }
  50% {
    top: 55%;
  }
}
.bar {
  background: #5C33CC;
}
.case-container .img-100 {
  width: 100%;
}
.case-container .waves {
  top: 2em;
  right: 25%;
  left: auto;
}
.case-container .green-shape {
  position: absolute;
  bottom: -1em;
  right: -1em;
}
.case-study {
  margin-bottom: 6em;
}
.case-study p {
  color: #2E2E2E;
  font-family: "Figtree", sans-serif;
  font-size: 1.2em;
}
.case-study .headline2 {
  font-size: 2.5em;
}
.case-study .labels {
  font-family: 'Montserrat';
  font-style: italic;
  color: rgba(51, 51, 51, 0.8);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
}
.case-study .case-header {
  margin-top: 3em !important;
}
.case-study .case-header h2{
  font-size: 1.6em;
}
.img-caption{
  font-size: 1em;
  font-family: "Figtree", sans-serif;
}
.case-subheader{
  font-size: 1.5em;
  font-family: 'Figtree Semibold', sans-serif;
  line-height: 1.5;
  color: rgba(50, 51, 52, 0.6);
  margin-bottom: 0;
}
.case-subheader.black{
  color: rgba(50, 51, 52, 0.9);
}
.reveal {
  opacity: 0;
  transition: all 2s ease;
}
.reveal.active {
  opacity: 1;
}
.case-img a:hover {
  transform: translateY(-5px);
  transition: all 0.4s linear;
}
.case-img-container{
  background: #dbd9f1;
  padding: 3rem 1rem;
}
.case-img-container img{
  border-radius: 12px;
  box-shadow: 0px 10px 30px rgba(72, 64, 186, 0.05);
}
.case-img-container.gradient{
  background: linear-gradient(45deg, #eebbb0, rgba(77, 84, 253, 0.5));
}
.case-img-container.red{
  background-color: #ffe7e5;
}
.white-margin-top{
  margin-top: 8rem !important;
}
.white-padding-bottom{
  padding-bottom: 8rem !important;
}
.case-list li p{
  color: #1a1a1a !important;
}
.gif-container{
  background-color: #EBEBEB;
  border-radius: 8px;
}
.skill-card{
  background: radial-gradient(156% 500% at 0% 0%, #FFFFFF 0%, #F2F2F5 70%);
  border: 1px solid #F2F2F2;
  border-radius: 1em;
}
.skill-card p{
  color: #0D0D0D;
  font-family: "Figtree", sans-serif;
  font-size: 1em;
  line-height: 1.6;
}
.skill-card .subtitle2{
  color: #171717;
  font-weight: 400;
  text-decoration: none;
  font-family: "Figtree Semibold", sans-serif;
}
.light-text{
  color: #ECE9F5 !important;
}
.light-text2{
  color: #CFC2F2 !important;
}
.light-btn:hover{
  box-shadow: 4px 4px 0px #e5b72e !important;
}
.copyright{
  font-family: 'Figtree';
  font-size: 0.9em;
  color: #e2e2e2;
  background-color: #0D0D0D;
}
.white-link{
  color: #ffffff !important;
  &:hover{
    text-decoration: underline;
  }
}


/* CSS for Marquee effect in the future */

.marquee:before{
  left: 0;
}

.marquee:after{
  right: 0;
  transform: scaleX(-1);
}

.marquee:after, .marquee:before{
  content: "";
  position: absolute;
  z-index: 99;
  top: 0;
  background: linear-gradient(to right, #ffffff,transparent);
  width: 25%;
  max-width: 200px;
  height: 100%;
}

/*------ Responsive CSS ------*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .height-90 {
    height: auto;
  }
  .case-container.hero-picture {
    display: block !important;
  }
  .hero-picture .waves{
    left: 0em;
  }
}
@media screen and (min-width: 320px) and (max-width: 768px) {
  .navbar-bordered {
    border: none;
    padding: 1rem 1rem;
  }
  .navbar-main .nav-item {
    text-align: center;
    padding: 0.5rem;
  }
  .social {
    flex-direction: row !important;
    justify-content: space-evenly;
  }
  .social .nav-link {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .res-p {
    padding: 0 !important;
  }
  .res-m {
    margin: 0 !important;
  }
  .headline {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.2em;
  }
  .headline2 {
    font-size: 2rem;
  }
  .subtitle {
    text-align: center;
    font-size: 1rem;
  }
  .height-90 {
    height: auto;
  }
/*  .hero-picture {
    display: none;
  }*/
  .hero-btn {
    margin-bottom: 3rem;
  }
  .half-circle {
    display: none;
  }
  .project-card {
    margin-bottom: 1rem !important;
    flex-direction: column;
  }
  .project-card .project-image {
    width: 100% !important;
  }
  .project-card .project-image img {
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.04);
  }
  .project-card .project-image-right {
    width: 100% !important;
  }
  .project-card .project-image-right img {
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.04);
  }
  .project-card .project-desc {
    position: relative !important;
    width: 100% !important;
    transform: none !important;
    padding: 1.5rem 0 !important;
  }
  .project-card .project-desc-right {
    left: 0;
  }
  .projects .project-card .project-desc p{
    font-size: 1em !important;
  }
  .btn-mid {
    margin: 1.5rem auto 0 auto !important;
  }
  #footer {
    text-align: center;
  }
  #footer img.shapes {
    display: none;
  }
  .mobile-center {
    text-align: center;
  }
  .headline3{
    font-size: 1.5em;
  }
  .marquee{
    flex-direction: column;
  }
  .about p{
    font-size: 1em;
  }
  .mobile-none{
  display: none;
  }
  .white-margin-top{
    margin-top: 0rem !important;
  }
  .white-padding-bottom{
    padding-bottom: 3rem !important;
  }
  .projects{
     margin-top: 3rem !important;
  }
  .case-study p{
    font-size: 1em;
  }
  .case-study .case-header h2{
    font-size: 1.2em;
  }
  .case-study .case-header{
    margin-top: 1.5em !important;
  }
}