/* General style */

body{
  background-color: #f5f5f5;
}

* {
  box-sizing: border-box;
}

:root{
  --main-color: #0078ff; 
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
}

a{
  color: #1e1e1e;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

ul li{
  list-style: none;

}

.section-padding {

  padding-top: 4rem;
}

.counter .layer,.testimonial .layer,.contact .layer{
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  background-color: var(--main-color);

}


.span-title {
  font-weight: 600;
  color: #1e1e1e;
  font-size: 1.1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.title {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
}

.line {
  width: 40px;
  height: 5px;
  background-color: var(--main-color);
  margin: 0 auto;
}


/* start navbar */

.dropdown .dropdown-menu li a{
  color:#4e4e4e
}

.navbar-nav .nav-link {
  color: white;
}

.dropdown-item:hover {
  color: #189fff;
}

.dropdown-menu:hover {
  color: #189fff;

}

.navbar .dropdown{
  width:160px;

}

.dropdown-menu{
  width: 120%;
  border-radius: 0;
}


.navbar .dropdown ul a {
  font-size: 14px;
  font-weight: 500;
  color: #4e4e4e;
  transition: all 0.3s;
  }


.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #0078ff;
  background-color: transparent;
}

.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
}
.dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 99%;
}

.navbar a, .navbar a:active {
    transition: 0.3s;
    letter-spacing: 0.4px;
    position: relative;
    text-transform: uppercase;
    color: #fff; 
}

.navbar .nav-item .active{
    color: #fff;
}

.navbar ul li a:before  {
    content: "";
    position: absolute;
    top: 95%;
    left: 10px;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: all .5s;
    color:#fff;
    opacity: 0;

}

.navbar a:hover:before, .navbar li:hover>a:before, .navbar .active:before, .navbar .nav-item a {
    opacity: 1;
    width: 80%;
    color: #fff;
}

.navbar-toggler{
  background-color: #fff;
  border: none;
}

.navbar .navbar-brand{
  color: #fff;
}



/* start header */

header{
  background-image: url(../img/hero-bg.jpg);
  background-size:cover ;
  background-position: center;
  background-attachment: fixed;
  position: relative;

}

#home .layer{
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: 0.9;

}

header h1 {
  font-size: 72px;
  color: #fff;
}

header p {
  color: #fff;
  text-align: center;
}

header p::after {
  content: "";
  position: absolute;
  font-size: 36px;
  translate: -2rem 0px;
  animation-name: typing;
  animation-duration: 10s;
  animation-iteration-count: infinite;

}

@keyframes typing {
    1% {
      content: " |";
    }
  
    2% {
      content: "D |";
    }
  
    3% {
      content: "De |";
    }
  
    4% {
      content: "Dev |";
    }
  
    5% {
      content: "Deve |";
    }
  
    6% {
      content: "Devel |";
    }
  
    7% {
      content: "Develo |";
    }
  
    8% {
      content: "Develop |";
    }
  
    9% {
      content: "Develope |";
    }
  
    10% {
      content: "Developer |";
    }
    11% {
      content: "Developer |";
    }
    12% {
      content: "Developer |";
    }
    13% {
      content: "Developer |";
    }
    14% {
      content: "Developer |";
    }
    15% {
      content: "Developer |";
    }
  
    16% {
      content: "Develope |";
    }
  
    17% {
      content: "Develop |";
    }
  
    18% {
      content: "Develo |";
    }
  
    19% {
      content: "Devel |";
    }
  
    20% {
      content: "Deve |";
    }
  
    21% {
      content: "Dev |";
    }
  
    22% {
      content: "De |";
    }
  
    23% {
      content: "Des|";
    }
  
    24% {
      content: "Desi|";
    }
  
    25% {
      content: " Desig |";
    }
  
    26% {
      content: " Design |";
    }
    27% {
      content: " Designe |";
    }
    28% {
      content: " Designer |";
    }
    29% {
      content: " Designer |";
    }
    40% {
      content: " Designer |";
    }
    31% {
      content: " Designer |";
    }
    32% {
      content: " Designer |";
    }
    33% {
      content: " Designer |";
    }
    34% {
      content: " Designe |";
    }
    35% {
      content: " Design |";
    }
    36% {
      content: " Desig |";
    }
    37% {
      content: " Desi |";
    }
    38% {
      content: " Des |";
    }
    39% {
      content: " De |";
    }
    40% {
      content: " D |";
    }
    41% {
      content: "  |";
    }
    42% {
      content: "f  |";
    }
    43% {
      content: "fr  |";
    }
    44% {
      content: " fre |";
    }
    
    45% {
      content: "free |";
    }
    46% {
      content: "freel  |";
    }
    47% {
      content: "freela  |";
    }
    48% {
      content: "freelan  |";
    }
    49% {
      content: "freelanc|";
    }
    50% {
      content: "freelance  |";
    }
    51% {
      content: "freelancer  |";
    }52% {
      content: "freelancer  |";
    }53% {
      content: "freelancer  |";
    }54% {
      content: "freelancer  |";
    }55% {
      content: "freelancer  |";
    }56% {
      content: "freelancer  |";
    }57% {
      content: "freelancer  |";
    }58% {
      content: "freelancer  |";
    }
    59% {
      content: "freelance  |";
    }
    60% {
      content: "freelanc  |";
    }
    61% {
      content: "freelan  |";
    }
    62% {
      content: "freela  |";
    }
    63% {
      content: "freel  |";
    }
    64% {
      content: "free  |";
    }
    65% {
      content: " fre |";
    }
    66% {
      content: "fr  |";
    }
    67% {
      content: "f  |";
    }
    68% {
      content: "  |";
    }
    69% {
      content: "p  |";
    }
    70% {
      content: "ph  |";
    }
    71% {
      content: "pho  |";
    }
    72% {
      content: "phot  |";
    }
    73% {
      content: "photo  |";
    }
    74% {
      content: "photog  |";
    }
    75% {
      content: "photogr  |";
    }
    76% {
      content: "photogra  |";
    }
    77% {
      content: "photograp  |";
    }
    78% {
      content: "photograph  |";
    }
    79% {
      content: "photographe |";
    }
    80% {
      content: "photographer  |";
    }81% {
      content: "photographer  |";
    }82% {
      content: "photographer  |";
    }83% {
      content: "photographer  |";
    }84% {
      content: "photographer  |";
    }85% {
      content: "photographer  |";
    }
    86% {
      content: "photographe  |";
    }
    87% {
      content: "photograph  |";
    }
    88% {
      content: "photograp  |";
    }
    89% {
      content: "photogra  |";
    }
    90% {
      content: "photogr |";
    }
    91% {
      content: "photog  |";
    }
    92% {
      content: "phot  |";
    }
    93% {
      content: "pho |";
    }
    94% {
      content: "ph  |";
    }
  
    95% {
      content: "p  |";
    }
  
    96% {
      content: "  |";
    }
    97% {
      content: "  |";
    }
    98% {
      content: "  |";
    }
    99% {
      content: "  |";
    }
    100% {
      content: "  |";
    }
  }

  @media only screen and (max-width: 702px) {

    .home-section h1{
    text-align: center;
    }

    .home-section p{
    translate: -50px 0;
    }
    }

  /* start about */
  
  .box-shadow{
      padding-top: 4rem;
      padding-bottom: 4rem;
  }

  .box-shadow{
    padding: 3rem 3rem;
    position: relative;
    background-color: #fff;
    margin-bottom: 3rem;
    z-index: 2;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
} 

  .content-box h5::after{
    content: "";
    position: absolute;
    height: 3px;
    background-color: var(--main-color);
    width: 100px;
    bottom: -12px;
    left: -2px

  }

  .skill-progress .progress {
    background-color: #cde1f8;
    margin: 0.5rem 0 1.2rem 0;
    border-radius: 0;
    height: 0.7rem;
}

  .content-box h5{
    font-size: 2rem;
    position: relative;
}

/* start service */

.service-box {
  background-color: #fff;
  padding: 2.5rem 1.3rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
  text-align: center;
  box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);

}

.icon-circle {
  height: 100px;
  width: 100px;
  font-size: 2rem;
  border-radius: 50%;
  line-height: 1.55;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 0 0 10px var(--main-color);
  display: block;
  transition: all 500ms ease;
  
}

.main-title{
  font-size: 1.4rem;
  padding: 0.4rem 0;

}

.second-title{
    color: #4e4e4e;
}

.service-box:hover .icon-circle {
  transition: all 500ms ease;
  color: #fff;
  background-color: var(--main-color);
  box-shadow: 0 0 0 10px #cde1f8;
}

/* start counter */

.counter{
  background-image: url(../img/counters-bg.jpg);
  background-size:cover ;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;

}

.counter-icon .icon-circle {
    height: 60px;
    width: 60px;
    line-height: 1.5;
    box-shadow: 0 0 0 10px #cde1f8;
}

@media screen and (max-width: 575px) {
  #counter .container .count{
    gap: 60px;

  }

  #about .media{
    margin-top: 30px ;
  }

}

/* start portfolio */

.portfolio-box {
    margin-bottom: 3rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff;
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.portfolio-box img {
    transition: all 0.5s ease-in-out;
}

.portfolio-box:hover  img {
  transform: scale(1.3);
}

.more-info{
  color: #4e4e4e;
  font-size: 0.8rem;
}

.portfolio-content .more-info .category {
  color: var(--main-color);
}

.portfolio-content .icon {
  font-size: 2.5rem;
  color: var(--main-color);

}

/* start testimonial */

.testimonial{
  background-image: url(../img/overlay-bg.jpg);
  background-size:cover ;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;

}

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

/* start blog */

#blog{
  margin-bottom: 5rem;
}

#blog .card-box{
  color: #fff;
  padding: 8px 18px 2px;
  overflow: hidden;
  background-color: var(--main-color);
  border-radius: 4px;
    
}

#blog .card-img,#blog .author-info,#footer .credits{
  cursor: pointer;

}
  
#blog .card-box .card-category{
  font-size: 11.2px;
}

#blog .card-title:hover,#blog .author:hover{
  color: var(--main-color);
  transition: all 0.5s ease-in-out;
  

}

#blog .author-img{
  width: 2rem;
  height: 2rem;
}

/* start contact */

#contact{
  background-image: url(../img/overlay-bg.jpg);
  background-size:cover ;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;

}

#contact .input{
  border-radius: 0;
}
 

#contact button[type=submit] {
  background: #0078ff;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 5rem;
  font-size: 19.2px;
}

#contact button[type=submit]:hover {
  background: #3393ff;
  box-shadow: 0 0 0 4px #cde1f8;
}

#contact .icon-footer{
  width: 2rem;
  height: 2rem;
  box-shadow: 0 0 0 3px var(--main-color);
  transition: all 500ms ease;
}


#contact .icon-footer:hover {
    background-color: var(--main-color);
    color: #fff;
    box-shadow: 0 0 0 3px #cde1f8;
    transition: all 500ms ease;
}

#contact .list-icon .fa {
  color: var(--main-color)
}

/* start footer */

#footer {
  text-align: center;
  color: #fff;
  padding: 25px 0;
  background: #0062d3;
}

/* icon arrow */

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #0078ff;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}