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

@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

.arvo-regular {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: normal;
}

.arvo-bold {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: normal;
}

.arvo-regular-italic {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: italic;
}

.arvo-bold-italic {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: italic;
}

/* Light */
.nunito-light {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* Regular */
.nunito-regular {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Medium */
.nunito-medium {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Semi-Bold */
.nunito-semibold {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* Bold */
.nunito-bold {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* Extra Bold */
.nunito-extrabold {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/* Black */
.nunito-black {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

:root {
  /* background-color: #1F1729; */
  background-color: #060606;
  color: #fff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.hidden {
  opacity: 0;
  translate: -100% 0;
  filter: blur(10px);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
}

.contain{
  @apply container mx-auto;
}

.subtitle {
  @apply text-[#EDEDED] capitalize nunito-extrabold mb-4 xl:text-[2rem];
}

.newDivClass {
  @apply mt-[5rem] px-4 mx-auto md:w-[50%];
}

.paratext {
  @apply nunito-regular text-[1rem] capitalize font-normal;
}
.imaging {
  @apply w-[100%] h-[100%] md:h-[50%] object-cover mb-6 rounded-lg;
}

.detailList {
  @apply text-[.8rem] nunito-regular list-none;
}

.bigDiv {
  @apply px-4 md:px-8 lg:px-12 container max-w-xl;
}
.titling {
  @apply text-problack font-Arvo text-[1.25rem] mb-4 xl:text-[1.5rem] 2xl:text-[2rem];
}

.css-tags {
  @apply px-3 mb-4 xl:px-5 py-1 rounded-full bg-tagColor text-[.8rem] text-white xl:text-[1.2rem] xl:mb-4 2xl:text-[1.5rem];
}

.desc-css {
  @apply paratext text-[.8rem] xl:text-[1.5rem] mb-8 2xl:text-[1.6rem];
}

.form-input {
  @apply border border-transparent mb-[4rem] border-b-[1px] border-b-problack bg-transparent outline outline-none p-4 placeholder:text-greyWhite text-[.8rem] w-full font-Nunito italic;
}

.introDiv {
  @apply mt-12 mb-4;
}

@media (min-width: 768px) {
  .about {
    width: 85%;
  }

  .get-width {
    width: 55%
  }

  .services, .project-div, .get-in {
    display: flex;
    align-items: center;
    gap: 3rem;
    font-size: .7rem;
  }
  .service-title {
    font-size: 1.5rem;
  }
  .service-bar {
    height: 80%;
  }
  .featured-div {
    padding: 0 2rem;
  }
  .featured-title{ 
    font-size: 1.5rem;
  }
  .featured-text {
    font-size: 1.2rem;
  }
  .get-start-div, .contact-div {
    width: 50%;
  }
  .nth-2-child {
    float: right;
  }
  .contact-form {
    display: flex;
    align-items: center;
    gap: 3rem;
  }
}