html {
  scroll-behavior: smooth;
  scroll-padding-top: 63px;
}

::selection {
  background-color: #0078ff;
  color: white;
}

/* start navbar */

nav a {
  position: relative;
  padding-bottom: 5px;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: white;
  transition: width 300ms ease;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

nav a.dropdown-toggle::after {
  content: none;
}

.navbar-brand::after {
  content: none;
}

/* end navbar */

/* start header section */

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6)),
    url(../images/hero-bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

header span:after {
  content: "";
  animation: typing 10s infinite;
}

@keyframes typing {
  0% {
    content: " D|";
  }

  1.3% {
    content: "De|";
  }

  2.6% {
    content: "Des|";
  }

  3.9% {
    content: "Desi|";
  }

  5.2% {
    content: "Desig|";
  }

  6.5% {
    content: "Design|";
  }

  7.8% {
    content: "Designe|";
  }

  9.1% {
    content: "Designer|";
  }

  10.4% {
    content: "Designe|";
  }

  11.7% {
    content: "Design|";
  }

  13% {
    content: "Desig|";
  }

  14.3% {
    content: "Desi|";
  }

  15.6% {
    content: "Des|";
  }

  16.9% {
    content: "De|";
  }

  18.2% {
    content: "D|";
  }

  19.5% {
    content: "De|";
  }

  20.8% {
    content: "Dev|";
  }

  22.1% {
    content: "Deve|";
  }

  23.4% {
    content: "Devel|";
  }

  24.7% {
    content: "Develo|";
  }

  26% {
    content: "Develop|";
  }

  27.3% {
    content: "Develope|";
  }

  28.6% {
    content: "Developer|";
  }

  29.9% {
    content: "Develope|";
  }

  31.2% {
    content: "Develop|";
  }

  32.5% {
    content: "Develo|";
  }

  33.8% {
    content: "Devel|";
  }

  35.1% {
    content: "Deve|";
  }

  36.4% {
    content: "Dev|";
  }

  37.7% {
    content: "De|";
  }

  39% {
    content: "D|";
  }

  40.3% {
    content: "F|";
  }

  41.6% {
    content: "Fr|";
  }

  42.9% {
    content: "Fre|";
  }

  44.2% {
    content: "Free|";
  }

  45.5% {
    content: "Freel|";
  }

  46.8% {
    content: "Freela|";
  }

  48.1% {
    content: "Freelan|";
  }

  49.4% {
    content: "Freelanc|";
  }

  50.7% {
    content: "Freelance|";
  }

  52% {
    content: "Freelancer|";
  }

  53.3% {
    content: "Freelance|";
  }

  54.6% {
    content: "Freelanc|";
  }

  55.9% {
    content: "Freelan|";
  }

  57.2% {
    content: "Freela|";
  }

  58.5% {
    content: "Freel|";
  }

  59.8% {
    content: "Free|";
  }

  61.1% {
    content: "Fre|";
  }

  62.4% {
    content: "Fr|";
  }

  63.7% {
    content: "F|";
  }

  65% {
    content: "Ph|";
  }

  66.3% {
    content: "Pho|";
  }

  67.6% {
    content: "Phot|";
  }

  68.9% {
    content: "Photo|";
  }

  70.2% {
    content: "Photog|";
  }

  71.5% {
    content: "Photogr|";
  }

  72.8% {
    content: "Photogra|";
  }

  74.1% {
    content: "Photograph|";
  }

  75.4% {
    content: "Photographe|";
  }

  76.7% {
    content: "Photographer|";
  }

  78% {
    content: "Photographe|";
  }

  79.3% {
    content: "Photograph|";
  }

  80.6% {
    content: "Photogra|";
  }

  81.9% {
    content: "Photogr|";
  }

  83.2% {
    content: "Photog|";
  }

  84.5% {
    content: "Photo|";
  }

  85.8% {
    content: "Phot|";
  }

  87.1% {
    content: "Pho|";
  }

  88.4% {
    content: "Ph|";
  }

  89.7% {
    content: "P|";
  }

  90% {
    content: " |";
  }

  /* Restart cleanly */
  100% {
    content: " | ";
  }
}

/* end header section */

/* start section About */

.about h1 {
  position: relative;
  width: fit-content;
}

.about h1::after {
  content: "";
  width: 70%;
  height: 3.5px;
  background-color: #0078ff;
  position: absolute;
  bottom: 15px;
  left: 0px;
}

.title p::after {
  content: "";
  width: 50px;
  height: 5px;
  background-color: #0078ff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}

/* end section About */

/* start section services */

.services .icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: #0078ff solid 10px;
  transition: all 0.3 ease-in;
}

.services .card:hover .icon {
  border-color: #cde1f8;
  background-color: #0078ff;
  color: white;
}

/* end section services */

/* start counter section */

#counter {
  background-image: linear-gradient(rgba(0, 120, 255, 0.6)),
    url(../images/counters-bg.jpg);
  background-attachment: fixed;
}

#counter .icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: #cde1f8 solid 10px;
  transition: all 0.3 ease-in;
}
/* end counter section */

/* start portifolio section */

.icn {
  width: 50px;
  height: 50px;
  border-radius: 50%;

  border: #0078ff solid 3px;
  color: #0078ff;
}

.work .card {
  overflow: hidden;
}

.work .card .image img {
  transition: all 800ms ease-out;
}

.work .card:hover .image img {
  transform: scale(1.3);
}

/* end portifolio section */

/* testmonial start */

.image-test1 {
  width: 150px;
  height: 150px;
}

.image-test img {
  width: 100%;
}

#testmonial {
  background-image: linear-gradient(rgba(0, 120, 255, 0.7)),
    url(../images/overlay-bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.carousel-indicators [data-bs-target] {
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

.image-link {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.image-link img {
  width: 100%;
}

/* testmonial end */

/* Blog start */

.caption {
  background-color: #0078ff;
  text-align: center;
  width: fit-content;
}
.caption p {
  font-size: small;
}

/* contact start */

#contact {
  background-image: linear-gradient(rgba(0, 120, 255, 0.7)),
    url(../images/overlay-bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#contact h2 {
  position: relative;
  width: fit-content;
}

#contact h2::after {
  content: "";
  width: 55%;
  height: 3.5px;
  background-color: #0078ff;
  position: absolute;
  bottom: 12px;
  left: 0px;
}

#contact .iicon {
  color: #0078ff;
}

#contact .icon {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: #0078ff solid 3px;
  transition: all 300ms ease-in;
}

#contact a:hover .icon {
  border-color: #cde1f8;
  background-color: #0078ff;
  color: white;
}

/* start footer */

#footer {
  background-color: #0052d3;
}