html,
body {
  font-family: "Marvel", "Open Sans", "sans-serif";
  font-size: 16px;
  font-display: optional;
  color: #212529;
}

@media screen and (max-width: 640px) {
  html,
  body {
    font-size: 14px;
  }
}

/* @media screen and (max-width: 400px) {
  html,
  body {
    font-size: 12px;
  }
} */

/* Color  */

.grey-light {
  background-color: #f5f5f5;
}

.white-light {
  background-color: #ffffff !important;
}

/* Contact banner */

#sm-contact .list-inline-item {
  font-size: 0.9rem;
}

#informations i {
  color: #999999;
}

.list-inline-item a {
  color: #212529;
  text-decoration: none;
}

/* Navbar */

header .nav-item {
  font-size: 1rem !important;
}

.nav-item a {
  color: #212529 !important;
  text-decoration: none !important;
}

.nav-item a:hover {
  color: #22b8f0 !important;
}

.nav-text {
  letter-spacing: 0.15rem !important;
}

@media screen and (max-width: 880px) {
  .nav-text {
    letter-spacing: normal !important;
  }
}

/* Carousel */

.carousel-inner h5 {
  font-size: 3rem;
}

.carousel-inner p {
  font-size: 2rem;
}

@media screen and (max-width: 950px) {
  .carousel-inner h5 {
    font-size: 2.5rem;
  }

  .carousel-inner p {
    font-size: 1.5rem;
  }
}

.carousel-caption-fs {
  right: 60%;
  left: 10%;
  top: 30%;
}

.carousel-caption-f {
  right: 8%;
  left: 68%;
  top: 25%;
  /* top: 30%; */
}

/* Services */

.icon {
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
  color: #22b8f0;
}

.btn-services {
  color: #fff;
  background-color: #22b8f0;
  /* border-color: #22b8f0; */
}

.btn-services:hover {
  background-color: #212529;
  color: #fff;
}

/* About Me */

.desktop-img {
  font-size: 15rem;
  width: 15rem;
  height: 15rem;
  color: #22b8f0;
}

@media screen and (max-width: 780px) {
  .desktop-img {
    font-size: 10rem;
    width: 10rem;
    height: 10rem;
  }
}

.bullet-circle {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #22b8f0;
  color: #ffffff;
  border-radius: 100px;
  text-align: center;
}

@media screen and (max-width: 576px) {
  .bullet-circle {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}

/* Skills */

/* used by about-me and skills part */
@media screen and (max-width: 576px) {
  .flex-column-xs {
    flex-direction: column;
  }
}

/* Latest works */

/* Contact Form */

.env-img {
  font-size: 10rem;
  width: 10rem;
  height: 10rem;
}

@media screen and (max-width: 780px) {
  .env-img {
    font-size: 7.5rem;
    width: 7.5rem;
    height: 7.5rem;
  }
}