/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

.container {
  padding-top: 10%;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.show {
  opacity: 1;
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

.contai {
  display: flex;
  flex: initial;
  justify-content: center;
}

.box {
  max-width: 500px; /* Initial width for desktop */
  background: transparent;
  padding: 10px;
  margin: 5px;
}

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url('/images/home-bg.jpg');
  background-repeat: no-repeat;
  background-position: 60% 0%;
  background-size: cover;
  background-attachment: fixed;
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#work .img,
#work img,
.hire-text h2 {
  position: relative;
}

#work .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 97px);
  background: var(--gray-color);
}

.btn-water {
  background: url('https://i.postimg.cc/J07vSC9q/hero-background.jpg') no-repeat center;
  background-size: cover;
}

#work img,
#work .hire-text h2 {
  width: 140px;
}

#work .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

.slow-flip {
  -webkit-animation: fa-flip 4s infinite linear;
  animation: fa-flip 4s infinite linear;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

/* Media queries */
@media screen and (max-width: 575px) {
  .prof {
    padding-top: 10%;
  }
  .box {
    max-width: 100%;
  }
  .hero {
    margin-top: 17%;
  }
}

@media screen and (max-width: 320px) {
  .prof {
    padding-top: 10%;
  }
  .box {
    max-width: 100%;
  }
  .hero {
    padding-top: 50%;
  }
}