@import "https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap";

h1,
h2,
h3,
h4 {
  font-family: 'Yeseva One', serif;
}

h5,
h6,
button {
  font-family: "Poppins", system-ui, sans-serif;
}

[role="button"] {
  padding: 18px 32px;
}

article{
  margin: 30px 12px;
}

section{
  padding-bottom: 2rem;
}

.logo{
  max-width: 250px;
  padding: 20px 0;
}

.text-right{
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}

.hero{
  position: relative;
  padding: 2rem 0;
}

h5 {
  line-height: 2em;
  font-weight: 400;
}

.hero h1 {
  font-weight: 500;
  font-size: 2.6em;
}

.hero h4 {
  font-weight: 300;
}

.hero-background-svg, 
.hero-background-svg-large {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 65%;
}

.hero-background-svg svg, 
.hero-background-svg-large svg {
  width: 100%;
  height: 100%;
}

.hero-background-svg-large {
  display: none;
}

@media (min-width: 1535px) {
  .hero-background-svg {
    display: none;
  }
  .hero-background-svg-large {
    display: inherit;
  }
}

.hero-blob {
  position: absolute;
  top: -120px;
  left: -300px;
  width: 700px;
  z-index: -1;
  pointer-events: none;
}

.hero-blob svg {
  width: 100%;
  height: 100%;
}

.profile {
  text-align: right;
}

.profile img {
  width: 86%;
  mask-image: url("../img/hero-mask-svg.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

@media (max-width: 767px) {
  .profile {
    text-align: center;
    margin-bottom: 30px;
  }
  .profile img{
    width: 70%;
    border-radius: 20%;
    mask-image: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

.about {
  position: relative;
  margin: 20px 0 80px 0;
  text-align: center;
}

.about-content-inner-blob {
  position: absolute;
  top: 50px;
  right: 0px;
  z-index: -1;
  width: 700px;
}

.about-content-inner-blob svg {
  width: 100%
}

.ruby img{
  width: 86%;
  mask-image: url("../img/skill-mask-svg.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

@media (max-width: 767px) {
  .ruby {
    text-align: center;
    margin-bottom: 30px;
  }
  .ruby img{
    width: 70%;
    border-radius: 20%;
    mask-image: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

#services{
  position: relative;
}

.services-background {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 55%;
}

.services-background svg {
  width: 100%;
  height: 100%
}

.services{
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
  .services{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .services{
    grid-template-columns: repeat(1, 1fr);
  }
}

.services>div{
  margin: 15px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(50, 65, 141, .12);
  border-radius: 20px;
  background: #fff;
}

.icon {
  margin-bottom: 40px;
  position: relative
}

.icon svg {
  color:#0172ad;
  /* margin-top: -80px; */
  width: 64px;
  height: 64px;
  position: absolute;
    bottom: 0;
    left: 0;
}

.footer-background-shape {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0
}

.footer-background-shape svg {
  height: 100%;
  width: 100%
}

.footer-background-shape svg path {
  fill: #fff
}

@media(max-width:767px) {
  .footer-background-shape {
    display: none
  }
}

.footer-cta {
  background: #0172ad;
  padding: 100px 80px;
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  margin-top: -210px;
  margin-bottom: 80px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  z-index: 5
}

@keyframes moveLeft {

  0%,
  100% {
    -webkit-transform: translateX(0)rotate(-20deg);
    transform: translateX(0)rotate(-20deg)
  }

  50% {
    -webkit-transform: translateX(15px)rotate(-20deg);
    transform: translateX(15px)rotate(-20deg)
  }
}

.footer-cta .shape-1 {
  position: absolute;
  z-index: -1;
  transform: rotate(-20deg);
  top: -43%;
  left: 2%;
  animation: moveLeft 5s infinite linear;
}

.footer-cta .shape-1 svg path {
  fill: #fff;
  opacity: .07
}

@keyframes moveTop {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(15px)
  }
}

.footer-cta .shape-2 {
  position: absolute;
  z-index: -1;
  transform: rotate(80deg);
  top: 12%;
  right: -9%;
  width: 235px;
  height: 208px;
  animation: moveTop 3s infinite linear;
}

.footer-cta .shape-2 svg {
  height: 100%;
  width: 100%
}

.footer-cta .shape-2 svg path {
  fill: #fff;
  opacity: .07
}

@media(max-width: 1023px) {
  .footer-cta {
    padding: 70px 40px
  }
}

.footer-cta-content {
  width: 60%;
}

.footer-cta-content h5{
  color: white;
}

@media(max-width: 1023px) {
  .footer-cta-content {
    width: 100%;
    text-align: center;
    margin-bottom: 20px
  }
}

.footer-cta-content span {
  font-size: 20px;
  display: block;
  line-height: 1;
  margin: 0 0 20px 40px;
  position: relative
}

@media(max-width: 1023px) {
  .footer-cta-content span {
    display: inline-block
  }
}

.footer-cta-action {
  width: 40%
}

.footer-cta-action a {
  background: white;
  color: #0172ad;
  padding: 18px 32px;
}

.footer-cta-action a:hover {
  background: #e6e6e6;
}

@media(max-width: 1023px) {
  .footer-cta-action {
    width: 100%;
    text-align: center
  }
}

.footer-cta-action a {
  float: right
}

@media(max-width: 1023px) {
  .footer-cta-action a {
    float: none
  }
}

footer{
  background: #092436;
  position: relative;
  margin-top: 120px
}

footer .container {
  margin-top: 70px;
  padding-bottom: 200px;
}

footer p,
footer ul{
  font-size: 0.9em;
  color: white;
}

footer img{
  max-width: 200px;;
}

footer h1 {
  font-size: 2.2em;
}