body {
  background-color: #f5f5f5;
  overflow-x: hidden;
}
:root {
  --main-color: #0078ff;
}
html {
  scroll-padding-top: 50px;
}
.bg-main-color {
  background-color: var(--main-color);
}
.text-main-color {
  color: var(--main-color);
}
/*!==========================================*/
.header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/images/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.bg-nav {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}
.nav-item {
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #fff;
  bottom: 7px;
  left: 10%;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

body:not(:has(:target)) .nav-item:has(.home__link)::after,
body:has(.header:target) .nav-item:has(.home__link)::after,
body:has(.about:target) .nav-item:has(.about__link)::after,
body:has(.services:target) .nav-item:has(.services__link)::after,
body:has(.work:target) .nav-item:has(.work__link)::after,
body:has(.blog:target) .nav-item:has(.blog__link)::after,
body:has(.contact:target) .nav-item:has(.contact__link)::after,
.nav-item:hover::after {
  width: 80%;
}
body:has(.about:target) .bg-nav,
body:has(.services:target) .bg-nav,
body:has(.work:target) .bg-nav,
body:has(.blog:target) .bg-nav,
body:has(.contact:target) .bg-nav {
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(15px);
}
.nav__close {
  display: none;
}

.dropdown-item {
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.dropdown-item:hover {
  color: var(--main-color);
  background-color: transparent;
}
.bout__me-title::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 4px;
  background-color: var(--main-color);
  bottom: -5px;
  left: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.w-85 {
  width: 85% !important;
}
.w-90 {
  width: 90% !important;
}

.card__icon-circle {
  width: 60px;
  height: 60px;
  border: 10px solid var(--main-color);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.card:hover > .card__icon-circle {
  background-color: var(--main-color);
  color: #fff;
  border: 10px solid rgba(177, 213, 255, 0.9) !important;
}

.services__header::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 8px;
  background-color: var(--main-color);
  bottom: 15px;
  left: 50%;
  translate: -50%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.counters {
  background-image: linear-gradient(
      rgba(0, 120, 255, 0.6),
      rgba(0, 120, 255, 0.7)
    ),
    url(../assets/images/counters-bg.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 20px;
}
.counter__icon-circle {
  width: 90px;
  height: 90px;
  border: 10px solid rgba(255, 255, 255, 0.5);
  padding: 10px;
  font-size: 40px;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}

.counter:hover > .counter__icon-circle {
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--main-color);
  scale: 1.1;
}
.work__header::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 8px;
  background-color: var(--main-color);
  bottom: -15px;
  left: 50%;
  translate: -50%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.portfolio__content .card img {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.portfolio__content .card:hover img {
  scale: 1.05;
}
.testimonial {
  background-image: linear-gradient(
      rgba(0, 120, 255, 0.6),
      rgba(0, 120, 255, 0.7)
    ),
    url(../assets/images/overlay-bg.jpg);
  background-position: center;
  background-size: 100% 100%;
  background-attachment: fixed;
  padding: 20px;
}
.blog__header::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 8px;
  background-color: var(--main-color);
  bottom: -15px;
  left: 50%;
  translate: -50%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.blog-card .badge {
  translate: 0 50%;
}
.blog-card {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.blog-card:hover {
  translate: 0 -5px;
}
.blog-card img {
  object-fit: contain;
}
.contact__header::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 8px;
  background-color: var(--main-color);
  bottom: -15px;
  left: 50%;
  translate: -50%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.contact__form {
  background-image: linear-gradient(
      rgba(0, 120, 255, 0.6),
      rgba(0, 120, 255, 0.7)
    ),
    url(../assets/images/overlay-bg.jpg);
  background-position: center;
  background-size: 100% 100%;
  background-attachment: fixed;
  padding-block: 100px;
}
.contact__form-title::after {
  content: "";
  position: absolute;
  width: 25%;
  height: 4px;
  background-color: var(--main-color);
  bottom: -10px;
  left: 0%;
  border-radius: 5px;
}
.social__media-icons a{
  border: 5px solid var(--main-color);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.social__media-icons a:hover {
  background-color: var(--main-color);
  color: #fff !important;
  border: 5px solid rgba(177, 213, 255, 0.9) !important;
}
footer {
  background-color: var(--main-color);
}