@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@layer base {
  body {
    @apply font-satoshi font-normal text-base text-body bg-white relative z-1;
  }
}

/* parent */
parent {
  padding-right: 8%;
  padding-left: 8%;
}

.parent {
  padding-right: 8%;
  padding-left: 8%;
}

@media only screen and (max-width: 600px) {
  .parent {
    padding-right: 8%;
    padding-left: 8%;
  }
}

.visible {
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 40;
  height: 4rem;
  transition: 0.3s linear;
  display: flex;
  justify-content: stretch;
  align-items: center;
}

/* Primary Button */
.primary-button {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-align: center;
  width: 130px;
  height: 40px;
  background-color: #ff651c;
  transition-duration: 0.5s;
  border-radius: 10px;
}

.primary-button:hover {
  background-color: transparent;
  border-color: #ff651c;
  color: #000000;
  border-width: 2px;
}

/* Secondary Button */
.secondary-button {
  color: #000000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  text-align: center;
  width: 130px;
  height: 40px;
  border-color: #ff651c;
  border-width: 2px;
  background-color: transparent;
  transition-duration: 0.5s;
  border-radius: 10px;
}

.secondary-button:hover {
  color: #ffffff;
  background-color: #ff651c;
}

/* Show Case */

/* Show Case */

.active-btn {
  color: #ff651c;
  background-color: transparent;
}

.item-container {
  height: 400px;
  overflow: hidden;
}

.item {
  background: transparent;
  position: relative;
}

.item img {
  opacity: 1;
  object-fit: cover;
}

.item .overlay {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  padding: 10px;
  text-align: center;
  border: 2px solid #ff651c;
  border-radius: 5px;
  content: '';
  opacity: 1;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: none;
  transform: none;
}

.item img {
  opacity: 1;
  transition: none;
}

.slick-dots li button:before {
  color: #ff651c;
}

.slick-dots li.slick-active button:before {
  color: #ff651c;
}

.showcase_image {
  display: inline-block;
  width: 100%;
  height: 18rem;
  border-radius: 0.4rem;
}

@media only screen and (max-width: 768px) {
  .project_image {
    height: 16rem;
  }
}


/* Bottom Line */

.side-line {
  height: 8px;
  width: 8px;
  margin: 0 10px;
  background-color: #ff651c;
  transform: rotate(45deg);
}

.middle-line {
  width: 180px;
  height: 4px;
  background-color: #ff651c;
  border-radius: 4px;
  position: relative;
}

.inner-circle {
  height: 10px;
  width: 10px;
  background-color: #ffffff;
  transform: rotate(45deg);
  border: 1px solid #ff651c;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  animation: left-right-moving 6s infinite;
  animation-timing-function: linear;
}

@keyframes left-right-moving {
  0%,
  100% {
    left: 0%;
  }

  50% {
    left: 97%;
  }
}

/* Contact */

.input-field {
  display: inline-block;
  padding: 9px;
  border-radius: 7px;
  box-shadow: 0 0 5px 1px #b8bec9;
  margin: 12px 0;
  width: 100%;
  background-color: #e5e7eb;
  color: #212121;
}

.input-field::placeholder {
  color: #212121;
}

.input-field:focus {
  outline: none;
  box-shadow: 0 0 5px 2px #ff651c;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}

input[data-autocompleted] {
  background-color: transparent !important;
}

/* Login Image */
.img-login {
  margin-top: 15px;
  display: inline-block;
  width: 380px;
  height: 380px;
}
