:root {
  --dark-color: #19283f;
  --green-color: #33d1cc;
  --red-color: #ff3150;
  --dark-red: #b4152d;
  --yellow-color: #ffc400;
  --section-color: #9e9e9e57;
}
.yellow {
  color: var(--yellow-color);
}
body {
  font-family: "Roboto", sans-serif;
}
.wide-btn{
  width: 185px;
}
.main-btn {
  background-color: var(--red-color);
  color: var(--yellow-color);
  padding: 0.5rem 1rem;
}
.main-btn:hover {
  background-color: var(--dark-red);
  color: var(--yellow-color);
}
.main-title::after {
  content: "";
  width: 120px;
  height: 2px;
  background-color: var(--green-color);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}


/* Start Navbar */
.navbar {
  background-color: var(--dark-color);
}


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

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover {
  color: var(--green-color);
}

.navbar .search {
  border-left: 1px solid var(--green-color);
}
.navbar .search svg {
  color: var(--green-color);
}

.navbar .navbar-toggler {
  color: white;
  font-size: 25px;
  border-color: white;
}

.navbar .navbar-toggler:focus {
  box-shadow: none;
}

.navbar .navbar-toggler[aria-expanded="true"] {
  border-color: var(--green-color);
}

/* End Navbar */
/* Start Landing */
.landing {
  background-color: var(--dark-color);
  min-height: calc(100vh - 72px);
}


.landing .text-center p {
  font-size: 13px;
}
/* End Landing */
/* Start Features */
.features .icon-holder {
  height: 200px;
}


.features .icon-holder .icon{
    color: var(--green-color);
}
.features .feat h4 {
    color: var(--yellow-color);
}
/* End Features */

 /* Start Our Work */
 .our-work {
   background-color: var(--section-color);
  }

  .our-work ul li.active {
   background-color: var(--red-color);
   color: var(--yellow-color);
  }

  .our-work ul li {
    padding: .5rem 1rem;
    cursor: pointer;
    border-radius: 100rem ;
  }
 .our-work ul li:not(.active):hover{
   color: var(--red-color);
  }
 .our-work .box {
   padding: 5px;
   overflow: hidden;
   position: relative;
  }
  .our-work .box::before{
    content: attr(data-work);
    position: absolute;
    background-color:  #33d1ccc2;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: .3s;
    font-size: 1.5rem;
    transform: translateX(calc(-100% - 5px));
  }
  .our-work .box:hover::before {
    transform: translateX(0);
    
  }
  /* End Our Work */

  /* Start Stuff */
  .stuff .description{
    max-width:400px ;
  }
  .stuff .row .col-sm-12 h2{
    color: var(--dark-color);
  }
  /* End Stuff */
  /* Start Team */
  .team{
    background-color: var(--section-color);
  }
  .team h2{
    color: var(--yellow-color);
  }
  .team .box h4{
    background-color: var(--green-color);
  }
  /* End Team */
  /* Start Project*/
  .project{
    background-color: var(--dark-color);
  }
  /* End Project*/
  
  /* Start Subscribe*/
  .subscribe{
    background-color: var(--yellow-color);
  }
  .subscribe #input {
    border: none;
    border-bottom: 1px solid white;
    color: white;
  }
  .subscribe #input:focus {
    outline: none;
  }
  .subscribe ::placeholder {
    color: white;
  }
  .subscribe .btn {
    background-color: var(--dark-color);
    color: var(--yellow-color);
    padding: 0.5rem 1rem;
  }
  /* End Subscribe*/
  /* Start Footer */
  .footer {
    background-color: var(--dark-color);
    font-size: 14px;
  }
  .footer .wider-btn{
    width: 380px;
    color: white;
    font-size: 14px;
  }
  .footer .copyright > span {
    color: var(--green-color);
  }
  .footer .copyright div span {
    color: var(--yellow-color);
  }
  .footer .contact ul svg {
    width: 20px;
    height: 20px;
  }
  .footer .facebook {
    background-color: #1877f2;
  }
  .footer .twitter {
    background-color: #1da1f2;
  }
  .footer .linkedin {
    background-color: #0077b5;
  }
  .footer .youtube {
    background-color: #ff0000;
  }
  /* End Footer */