/* navbar */
body {
  background-color: #f5f5f5;
}
nav {
  background-color: rgba(0, 0, 0, 0.9);
}
nav h1 > a {
  font-size: 32px;
  text-decoration: none;
  color: #fff;
}

nav .nav-list > li.nav-item > a {
  font-weight: 600;
  color: #fff;
  /* مش شغاله مش عارف ليه؟! */
  overflow: hidden;
  position: relative;
}
nav .nav-list > li.nav-item > a::after {
  content: "";
  width: 70%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 100%;
  left: 10%;
  transition: all 0.5s;
  transform: translateX(-100%);
}
nav .nav-list > li:hover a::after {
  transform: translateX(0);
}
#main-nav .navbar-nav {
  font-size: 20px;
}
#main-nav .navbar-nav li.dropdown ul.dropdown-menu li {
  margin: 10px 0;
}
#main-nav .navbar-nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}

/* home */
.home {
  color: #fff;
  padding-top: 40px;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/hero-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.home .home-text {
  line-height: 2;
}
.home .home-text .home-title {
  font-size: 70px;
  font-weight: 900;
}
.home .home-text span {
  font-size: 48px;
  font-weight: 700;
}

.about {
  background-color: #f5f5f5;
}
.about .user-details {
  /* font-size: ; */
  font-weight: 300;
}
.about .user-details li {
  margin-bottom: 16px;
}
.about .user-details li b {
  font-weight: 500;
}

.about .about-skills > div {
  margin-bottom: 32px;
}

.about-context h2 {
  font-size: 32px;
  position: relative;
}
.about-context h2::after {
  content: "";
  width: 100px;
  height: 4px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 120%;
  left: 0;
}

.about-context .context-details > p {
  line-height: 1.8;
}

/* services */
.services .sub-header {
  position: relative;
}
.services .sub-header::after {
  content: "";
  width: 50px;
  height: 4px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
}
.services .service-card {
  background-color: var(--bs-white);
}

.services .serv-icon i {
  font-size: 32px;
  border: 8px solid var(--bs-primary);
  transition: all 0.5s;
}

.services .service-card {
  box-shadow: 0 16px 10px -16px rgba(0, 0, 0, 0.1);
}
.services .service-card .serv-context p {
  font-size: 14px;
}

.services .service-card:hover i {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  border-color: #cde1f8;
}

.services .numbers {
  background-image: linear-gradient(
      rgba(13, 109, 253, 0.7),
      rgba(13, 109, 253, 0.7)
    ),
    url("../images/counters-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* portfolio */
.portfolio .sub-header {
  position: relative;
}
.portfolio .sub-header::after {
  content: "";
  width: 50px;
  height: 4px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
}

.portfolio .portfolio-card {
  box-shadow: 0 16px 10px -16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.portfolio .portfolio-card .card-img {
  overflow: hidden;
}
.portfolio .portfolio-card .card-img img {
  transition: transform 1s;
}
.portfolio .portfolio-card:hover .card-img img {
  transform: scale(1.3);
}

/* testimonials */
.portfolio .testimonials {
  background-image: linear-gradient(
      rgba(13, 109, 253, 0.7),
      rgba(13, 109, 253, 0.7)
    ),
    url("../images/overlay-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.portfolio .testimonials .dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
.portfolio .testimonials .dots .dot:first-child {
  background-color: var(--bs-primary-bg-subtle);
  opacity: 0.5;
}

.portfolio .testimonials .dots .dot:last-child {
  background-color: var(--bs-white);
}

/* blog */
.blog .sub-header {
  position: relative;
}
.blog .sub-header::after {
  content: "";
  width: 50px;
  height: 4px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
}
.blog .blog-post {
  box-shadow: 0 16px 10px -16px rgba(0, 0, 0, 0.1);
}
.blog .author-details a.author-name {
  color: var(--bs-dark);
  transition: color 0.5s;
}
.blog .author-details a.author-name:hover {
  color: var(--bs-primary);
}

/* contact */
.contact {
  background-image: linear-gradient(
      rgba(13, 109, 253, 0.6),
      rgba(13, 109, 253, 0.8)
    ),
    url("../images/overlay-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.contact .contact-header {
  position: relative;
}
.contact .contact-header::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 4px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 140%;
  left: 0;
}

.contact .info-header {
  position: relative;
}
.contact .info-header::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 4px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 140%;
  left: 0;
}
.contact .social .social-list li {
  margin-right: 7px;
}
.contact .social .social-list li span {
  padding: 5px;
  border: 3px solid var(--bs-primary);
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.5s;
}

.contact .social .social-list li:hover span {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

footer {
  background-color: #0062d3;
}

.up {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background-color: #0078ff;
  padding: 14px 15px;
  border-radius: 50%;
  color: var(--bs-white);
  cursor: pointer;
}
.up a {
  color: inherit;
}