:root {
  --dark-color: #19283f;
  --green-color: #33d1cc;
  --red-color: #ff3150;
  --yellow-color: #ffc400;
  --section-bg: #eff7fa;
  --transition-duration: 0.3s;
}
body {
  font-family: "Roboto", sans-serif;
}
.main-btn {
  background-color: var(--red-color);
  color: var(--yellow-color);
}
nav {
  min-height: 56px;
  background-color: hsla(216, 43%, 17%, 0.95);
}
nav .navbar-toggler {
  border-color: #fff;
  &:focus {
    box-shadow: none;
  }
}
nav .navbar-nav a:not(.active) {
  color: #fff;
}
nav .navbar-nav a:is(.active, :hover, :focus) {
  color: var(--green-color) !important;
}
nav .search {
  color: var(--green-color);
  border-left-color: var(--green-color) !important;
}
.landing {
  background-color: var(--dark-color);
  min-height: calc(100vh - 72px);
}
.main-title::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 120px;
  background-color: var(--green-color);
}
.features .feat .icons-holder {
  height: 200px;
}
.features .feat .number {
  color: var(--section-bg);
}
.features .feat .icon {
  color: var(--green-color);
}
.features .feat h3 {
  color: var(--yellow-color);
}
.work {
  background-color: var(--section-bg);
}
.work .box {
  padding: 5px;
}
.work .box .img::before {
  content: attr(data-work);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(51, 209, 204, 0.7);
  transform: translateX(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition-duration);
}
.work .box .img:hover::before {
  transform: translateX(0);
}
.work .tabs {
  justify-content: safe center;
}
.work .tabs li.active {
  background-color: var(--red-color);
  color: var(--yellow-color);
}
.work .tabs li:not(.active):hover {
  color: var(--red-color);
}
.stuff p.info {
  max-width: 500px;
}
.stuff img {
  bottom: -1px;
}
.team {
  background-color: var(--section-bg);
}
.team h2 {
  color: var(--yellow-color);
}
.team h3 {
  background-color: var(--green-color);
}
.team blockquote svg {
  font-size: 12px;
  top: -5px;
}
.team blockquote svg:first-child {
  left: -3px;
}
.team blockquote svg:last-child {
  left: 3px;
}
.start {
  background-color: var(--dark-color);
}
.newsletter {
  background-color: var(--yellow-color);
}
.newsletter input[type="email"] {
  bottom: 7px;
  &::placeholder {
    color: #fff;
  }
  &:focus {
    outline: none;
  }
}
.newsletter input[type="submit"] {
  background-color: var(--dark-color);
  color: var(--yellow-color);
}
footer {
  background-color: var(--dark-color);
}
footer .social a {
  width: 34px;
  height: 34px;
}
footer .social .facebook {
  background-color: #1877f2;
}
footer .social .twitter {
  background-color: #1da1f2;
}
footer .social .linkedin {
  background-color: #0a66c2;
}
footer .social .youtube {
  background-color: #ff0000;
}