* {
  font-family: Poppins, sans-serif;
}
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
@media (max-width: 991.98px) {
  .navbar-expand-lg.navbar-dark .navbar-collapse {
    background: rgba(0, 0, 0, 0.95);
  }
}
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse {
    background: #fff;
    box-shadow: 10px 15px 15px rgba(255, 255, 255, 0.568);
    left: 0;
    margin-top: 0;
    position: absolute;
    right: 0;
    top: 99%;
    z-index: 1000;
  }
}
a {
  text-decoration: none;
  color: white;
}
.nav-link {
  color: white !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.nav-item .nav-link:hover {
  color: rgb(32, 201, 151) !important;
}
.active {
  color: rgb(32, 201, 151) !important;
}
ul li {
  padding-right: 15px;
}
.fa-twitter:hover {
  color: rgb(40, 166, 239);
}
.fa-facebook-f:hover {
  color: rgb(12, 62, 91);
}
.fa-dribbble:hover {
  color: rgb(159, 19, 141);
}
.fa-google:hover {
  color: rgb(208, 17, 17);
}
.fa-github:hover {
  color: rgb(31, 30, 30);
}
.wel {
  color: white;
  font-size: 30px;
  line-height: 50px;
  font-weight: 530;
}
.animation {
  font-size: 64px;
  line-height: 83px;
  font-weight: 600;
  color: white;
}

.animation::after {
  content: "";
  left: 0;
  top: 0;
  animation: anima 15s infinite;
}
@keyframes anima {
  0% {
    content: "";
  }
  0.69% {
    content: "I";
  }
  1.38% {
    content: "I'";
  }
  2.08% {
    content: "I'm";
  }
  2.7% {
    content: "I'm ";
  }
  3.47% {
    content: "I'm S";
  }
  4.16% {
    content: "I'm Si";
  }
  4.86% {
    content: "I'm Sim";
  }
  5.5% {
    content: "I'm Simo";
  }
  6.25% {
    content: "I'm Simon";
  }
  6.94% {
    content: "I'm Simone";
  }
  7.63% {
    content: "I'm Simone ";
  }
  8.33% {
    content: "I'm Simone O";
  }
  9.02% {
    content: "I'm Simone Ol";
  }
  9.72% {
    content: "I'm Simone Oli";
  }
  10.41% {
    content: "I'm Simone Oliv";
  }
  11.1% {
    content: "I'm Simone Olivi";
  }
  11.8% {
    content: "I'm Simone Olivia";
  }
  12.5% {
    content: "I'm Simone Olivia.";
  }
  13.19% {
    content: "I'm Simone Olivia";
  }
  13.8% {
    content: "I'm Simone Olivi";
  }
  14.58% {
    content: "I'm Simone Oliv";
  }
  15.27% {
    content: "I'm Simone Oli";
  }
  15.97% {
    content: "I'm Simone Ol";
  }
  15.66% {
    content: "I'm Simone O";
  }
  17.36% {
    content: "I'm Simone ";
  }
  18.05% {
    content: "I'm Simone";
  }
  18.75% {
    content: "I'm Simon ";
  }
  19.44% {
    content: "I'm Simo";
  }
  20.13% {
    content: "I'm Sim";
  }
  20.83% {
    content: "I'm Si";
  }
  21.52% {
    content: "I'm S";
  }
  22.2% {
    content: "I'm ";
  }
  22.91% {
    content: "I'm";
  }
  23.61% {
    content: "I'";
  }
  24.3% {
    content: "I";
  }
  24.9% {
    content: "";
  }
  25% {
    content: "I";
  }
  25.69% {
    content: "I";
  }
  26.38% {
    content: "I'";
  }
  27.08% {
    content: "I'm";
  }
  27.7% {
    content: "I'm ";
  }
  28.47% {
    content: "I'm a";
  }
  29.16% {
    content: "I'm a ";
  }
  29.86% {
    content: "I'm a F";
  }
  30.5% {
    content: "I'm a Fr";
  }
  31.25% {
    content: "I'm a Fre";
  }
  31.94% {
    content: "I'm a Free";
  }
  32.63% {
    content: "I'm a Freel";
  }
  33.33% {
    content: "I'm a Freela";
  }
  34.02% {
    content: "I'm a Freelan";
  }
  34.72% {
    content: "I'm a Freelanc";
  }
  35.41% {
    content: "I'm a Freelance";
  }
  36.1% {
    content: "I'm a Freelancer";
  }
  36.8% {
    content: "I'm a Freelancer.";
  }
  37.5% {
    content: "I'm a Freelancer.";
  }
  38.19% {
    content: "I'm a Freelancer";
  }
  38.8% {
    content: "I'm a Freelance";
  }
  39.58% {
    content: "I'm a Freelanc";
  }
  40.27% {
    content: "I'm a Freelan";
  }
  40.97% {
    content: "I'm a Freela";
  }
  41.66% {
    content: "I'm a Freel";
  }
  42.36% {
    content: "I'm a Free";
  }
  43.05% {
    content: "I'm a Fre";
  }
  43.75% {
    content: "I'm a Fr";
  }
  44.44% {
    content: "I'm a F";
  }
  45.13% {
    content: "I'm a ";
  }
  45.83% {
    content: "I'm a";
  }
  46.52% {
    content: "I'm ";
  }
  47.2% {
    content: "I'm";
  }
  47.91% {
    content: "I'";
  }
  48.61% {
    content: "I";
  }
  49.3% {
    content: "";
  }
  49.9% {
    content: "";
  }
  50% {
    content: "I";
  }
  50.69% {
    content: "I";
  }
  51.38% {
    content: "I'";
  }
  52.08% {
    content: "I'm";
  }
  52.7% {
    content: "I'm ";
  }
  53.47% {
    content: "I'm a";
  }
  54.16% {
    content: "I'm a ";
  }
  54.86% {
    content: "I'm a P";
  }
  55.5% {
    content: "I'm a Ph";
  }
  56.25% {
    content: "I'm a Pho";
  }
  56.94% {
    content: "I'm a Phot";
  }
  57.63% {
    content: "I'm a Photo";
  }
  58.33% {
    content: "I'm a Photog";
  }
  59.02% {
    content: "I'm a Photogr";
  }
  59.72% {
    content: "I'm a Photogra";
  }
  60.41% {
    content: "I'm a Photograp";
  }
  61.1% {
    content: "I'm a Photograph";
  }
  61.8% {
    content: "I'm a Photographe";
  }
  62.5% {
    content: "I'm a Photographer.";
  }
  63.19% {
    content: "I'm a Photographer";
  }
  63.8% {
    content: "I'm a Photographe";
  }
  64.58% {
    content: "I'm a Photograph";
  }
  65.27% {
    content: "I'm a Photograp";
  }
  65.97% {
    content: "I'm a Photogra";
  }
  66.66% {
    content: "I'm a Photogr";
  }
  67.36% {
    content: "I'm a Photog";
  }
  68.05% {
    content: "I'm a Photo";
  }
  68.75% {
    content: "I'm a Phot";
  }
  69.44% {
    content: "I'm a Pho";
  }
  70.13% {
    content: "I'm a Ph";
  }
  70.83% {
    content: "I'm a P";
  }
  71.52% {
    content: "I'm a";
  }
  72.2% {
    content: "I'm ";
  }
  72.91% {
    content: "I'm";
  }
  73.61% {
    content: "I'";
  }
  74.3% {
    content: "I";
  }
  74.9% {
    content: "";
  }
  75% {
    content: "I";
  }
  75.69% {
    content: "I";
  }
  76.38% {
    content: "I'";
  }
  77.08% {
    content: "I'm";
  }
  77.7% {
    content: "I'm ";
  }
  78.47% {
    content: "I'm a";
  }
  79.16% {
    content: "I'm a ";
  }
  79.86% {
    content: "I'm a D";
  }
  80.5% {
    content: "I'm a De";
  }
  81.25% {
    content: "I'm a Des";
  }
  81.94% {
    content: "I'm a Desi";
  }
  82.63% {
    content: "I'm a Desig";
  }
  83.33% {
    content: "I'm a Design";
  }
  84.02% {
    content: "I'm a Designe";
  }
  84.72% {
    content: "I'm a Designer";
  }
  85.41% {
    content: "I'm a Designer.";
  }
  86.1% {
    content: "I'm a Designer.";
  }
  86.8% {
    content: "I'm a Designer.";
  }
  87.5% {
    content: "I'm a Designer.";
  }
  88.19% {
    content: "I'm a Designer";
  }
  88.8% {
    content: "I'm a Designe";
  }
  89.58% {
    content: "I'm a Design";
  }
  90.27% {
    content: "I'm a Desig";
  }
  90.97% {
    content: "I'm a Desi";
  }
  91.66% {
    content: "I'm a Des";
  }
  92.36% {
    content: "I'm a De";
  }
  93.05% {
    content: "I'm a D";
  }
  93.75% {
    content: "I'm a ";
  }
  94.44% {
    content: "I'm a";
  }
  95.13% {
    content: "I'm ";
  }
  95.83% {
    content: "I'm";
  }
  96.52% {
    content: "I'";
  }
  97.2% {
    content: "I";
  }
  97.91% {
    content: "I";
  }
  98.61% {
    content: "";
  }
  99.3% {
    content: "";
  }
  100% {
    content: "";
  }
}
.animated-box {
  margin-top: 100px;
  font-size: 20px;
  animation: fadeInDown 1.2s ease-out infinite;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-25px);
  }
  100% {
    opacity: 1;
    transform: translateY(30px);
  }
}
.scroll-down-arrow i {
  font-family: "FontAwesome";
}
.bas {
  color: rgba(255, 255, 255, 0.774);
  font-size: 24px;
  line-height: 24px;
  font-weight: 350;
}
.first button {
  border-color: rgb(32, 201, 151) !important;
  color: rgb(32, 201, 151) !important;
  border-radius: 30px;
  width: 150px;
  height: 50px;
  font-weight: 500;
}
.first button:hover {
  background-color: rgb(32, 201, 151) !important;
  color: white !important;
}
.about {
  margin: 80px;
}
.back {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -43%);
  z-index: 0;
}
.back p {
  font-size: 120px;
  line-height: 70px;
  font-weight: 550;
  color: rgba(33, 37, 41, 0.06);
  text-align: center;
}
.front {
  position: relative;
  z-index: 1;
}
.front p {
  font-size: 36px;
  line-height: 54px;
  font-weight: 600;
  color: rgb(33, 37, 41);
  margin-bottom: 100px;
  text-align: center;
}
.text-center {
  position: relative;
}
.front p::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 3px;
  background-color: rgb(32, 201, 151);
  border-radius: 2px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}
.title span {
  color: rgb(32, 201, 151);
}
.content {
  font-size: 17px;
  line-height: 29px;
  font-weight: 400;
  color: rgba(76, 77, 77, 0.892);
}
.cv p {
  font-size: 17px;
  line-height: 29px;
  font-weight: 400;
  color: rgba(76, 77, 77, 0.892);
}
.cv span {
  font-weight: 600;
  color: rgb(76, 77, 77);
}
.cv button,
.contact button {
  border-color: rgb(32, 201, 151) !important;
  background-color: rgb(32, 201, 151) !important;
  color: white !important;
  border-radius: 30px;
  width: 200px;
  height: 50px;
  font-weight: 550;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.404);
  margin: 10px;
}
.cv hr {
  color: rgba(0, 0, 0, 0.338);
}
.count {
  font-size: 50px;
  font-weight: 550;
  color: rgba(76, 77, 77, 0.715);
}
.a {
  font-size: 18px;
  font-weight: 350;
  color: rgba(22, 22, 22, 0.759);
}
.num {
  position: relative;
}
.num::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 120px;
  background-color: rgba(76, 77, 77, 0.105);
  border-radius: 2px;
}
.service {
  padding: 80px 50px;
  background-color: rgb(248, 249, 250);
  width: 100%;
}
.icon-container i {
  color: rgb(32, 201, 151);
  font-size: 40px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border: 1px solid white;
  border-radius: 10px;
  margin: 0px 20px;
  box-shadow: 3px 3px 10px rgba(116, 117, 118, 0.342);
}
.service .a,
.summary .a {
  color: rgb(37, 43, 51);
  font-size: 1.4rem;
  margin-bottom: 10px;
  font-weight: 530;
  line-height: 24px;
}
.service .b,
.summary .b,
.uni {
  color: rgb(76, 77, 77);
  font-size: 1rem;
  font-weight: 400;
  line-height: 29px;
}
.summary {
  margin: 90px 40px;
}

.ed div,
.exp div {
  margin: 0px 40px;
  padding-left: 15px;
}
.categ {
  color: rgb(41, 42, 42);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 29px;
}
.sq {
  border: 1px solid rgb(198, 199, 200);
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
}
.sq div {
  margin: 5px;
  max-width: 90%;
}
.sq .date {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  background: rgb(32, 201, 151);
  color: white;
}
.progress {
  height: 8px;
}
.progress-bar {
  background-color: rgb(32, 201, 151);
}
.summary .sk {
  margin: 40px;
}
.sk .a {
  font-size: 1rem;
}
.sk button {
  margin: 40px;
  border: 1px solid #6c757d;
  border-radius: 30px;
  color: #6c757d;
  width: 200px;
  height: 50px;
  font-weight: 550;
  transition: 0.5s 0.3s;
}
.sk .btn:hover {
  border: 1px solid #6c757d;
  background-color: #6c757d;
  color: white;
}
.follow i {
  color: #6c757d;
}
.contact .row {
  gap: 30px;
}
.con i {
  color: rgb(32, 201, 151);
}
[placeholder="Name"],
[placeholder="Email"],
[placeholder^="Tell"] {
  padding: 2%;
  font-family: "Courier New", Courier, monospace;
  border: 1px double rgba(118, 122, 122, 0.586);
  color: rgba(118, 122, 122, 0.586);
}
input {
  height: 50px;
  border-radius: 5px;
}
textarea {
  width: 100%;
  min-height: 150px;
  border-radius: 5px;
}
footer {
  font-size: 17px;
}
footer a {
  color: black;
}
.footer a:hover,
footer span {
  color: rgb(32, 201, 151);
}
footer .row {
  padding: 50px 0 40px 0;
}
.client .row .sq {
  background-color: rgb(248, 249, 250);
  border: none;
}
.client .row .sq img {
  border-radius: 100%;
  padding: 0;
  margin: 0;
}
.client .row .sq i {
  color: #ffc107;
}
.portfolio {
  background-color: rgb(248, 249, 250);
  padding-top: 80px;
  padding-bottom: 50px;
}
#portfolio-grid {
  margin: 50px;
  margin-bottom: 0px;
}
.portfolio-img {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
}
.portfolio-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.portfolio-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.portfolio-img img:hover {
  transform: scale(1.05);
  filter: blur(5px);
}
.portfolio-img:hover::after {
  opacity: 1;
}
.portfolio-img .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  color: white;
  text-align: center;
  z-index: 2;
}
.portfolio-img:hover .overlay {
  opacity: 1;
}
.portfolio-img .overlay .text {
  font-size: 1.2rem;
}