/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/

:root {
  --gold-50: #fffeeb;
  --gold-100: #fffbc6;
  --gold-200: #fff688;
  --gold-300: #ffed49;
  --gold-400: #ffde20;
  --gold-500: #fac213;
  --gold-600: #dd9302;
  --gold-700: #b76a06;
  --gold-800: #95510b;
  --gold-900: #7a420d;
  --gold-950: #462302;
  --gold-design: #f8f0ac;

  --blue-50: #f6f7f9;
  --blue-100: #ebeff3;
  --blue-200: #d4dbe3;
  --blue-300: #aebdcb;
  --blue-400: #8199af;
  --blue-500: #627c95;
  --blue-600: #4b6178;
  --blue-700: #3f5165;
  --blue-800: #374555;
  --blue-900: #313c49;
  --blue-950: #212730;
  --blue-design: #324256;

  --smoke-50: #f8f8f8;
  --smoke-100: #f2f2f2;
  --smoke-200: #dcdcdc;
  --smoke-300: #bdbdbd;
  --smoke-400: #989898;
  --smoke-500: #7c7c7c;
  --smoke-600: #656565;
  --smoke-700: #525252;
  --smoke-800: #464646;
  --smoke-900: #3d3d3d;
  --smoke-950: #292929;
}

html {
  background: black;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: var(--smoke-900);
}

/* Start MAIN */

#home .hero-wrap {
}

#home img {
}

.whatsapp {
  opacity: 0;
  transition: 1.5s;
  transform: translateX(50px);

  height: 60px;
  width: 60px;
  z-index: 9999;
}

.whatsapp.whatsapp-show {
  opacity: 1;
  transform: translateX(0);

  position: fixed;
  right: 30px;
  bottom: 40px;
  z-index: 9999;
}

@media (pointer: fine) {
  .whatsapp:hover {
    transform: scale(1.5);
    transition: 1.5s;
  }
}

.logo-hero {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  z-index: 999; /* Certifique-se de que a logomarca fique acima dos slides */
  opacity: 1;
}

/* Estilos opcionais para a logomarca */
.logo-hero img {
  max-width: 50%; /* Garante que a imagem não ultrapasse a largura do contêiner */
  max-height: 50%; /* Garante que a imagem não ultrapasse a altura do contêiner */
  margin: auto; /* Centraliza a imagem horizontalmente */
}

.main-slide {
  position: relative;
  width: 100%;
  height: 95vh;
  overflow: hidden;
}

.main-slide .owl-carousel {
  position: absolute;
  width: 100%;
  height: 100%;
}

.main-slide .owl-carousel .item img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}

.primary-menu-blue {
  /* background: #2c3e50; */
  background: #2c3e50;
}

.primary-menu {
  background: var(--blue-design);
}

#main-wrapper {
  background: white;
}

#header-nav a {
  color: var(--gold-50);
}

.navbar-accordion button span {
  color: #fff;
  background: #fff;
}

#header-nav > .social-icons-accordion {
  display: none;
}

#header.nav > .social-icons {
  display: none;
}

span {
  color: var(--blue-design);
}

.typed {
  color: var(--smoke-850);
}

.typed-cursor {
  color: var(--smoke-850);
}

.background-header {
  background: black;
}

.scroll-down-arrow span {
  color: var(--smoke-900);
}

.underline {
  border: 4px solid var(--gold-400);
  border-radius: 8px;
  color: black;
  width: 20%;

  margin-left: auto;
  margin-right: auto;
}

.social-icons {
  color: black;
}

/* End MAIN */

/* Start SERVICES */

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
  /* padding: 100px; */
}

.item-services {
  height: 250px;
  overflow: hidden;
}

.image-slide {
  width: auto;
  height: 100%;
  max-height: 100%;
}

.card-content {
  /* Other styles for card-content */
  flex: 1; /* Allow card-content to take remaining space */
  display: flex;
  flex-direction: column;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border: 0;
  color: var(--blue-design);
  font-family: "Judson", sans-serif;
  overflow: hidden;

  /* background: var(--gold-100); */

  /* background-color: var(--gold-50); */
}

.card-wrapper {
  border-radius: 20px; /* Adjust the radius as needed */
  overflow: hidden;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); Optional: Add a box-shadow */
  height: 100%;

  display: flex;
  justify-content: center; /* Horizontally center the content */
  align-items: center; /* Vertically center the content */

  -webkit-box-shadow: 3px -4px 15px -6px black;
  box-shadow: 3px -4px 15px -6px black;
}

.text-content-wrapper {
  /* padding: 25px 0; */
}

.description-content-wrapper {
  /* background: grey; */
  height: 100%;
  flex: 1; /* Allow text-content-wrapper to take remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Horizontally center the content */
  align-items: center; /* Vertically center the content */

  padding: 0px 0px 0px 0px;
}

.content-title {
  padding: 20px 0px 0px 20px;
}

.text-content {
  height: 100%;
  padding: 20px 20px 0px 20px;
}

/* End SERVICES */

/* Start Quote/Contact */

.quote-button {
  border-radius: 20px;
}

/* End Quote/Contact */

/* Start PROJECTS */

#portfolio .container h2 span {
  color: var(--blue-design);
}

.card-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-self: center;
  padding: 20px;
}

.card-projects-items {
  height: 300px;
  width: 500px;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
}

.container.ajax-container {
  width: 100%;
  height: 100vh; /* Ajusta a altura do contêiner para a altura da tela */
  overflow: hidden; /* Garante que o conteúdo extra não seja visível */
}

.owl-carousel .item-portfolio {
  width: 100%;
  height: 100vh; /* Garante que o carrossel ocupe toda a tela */
  /* padding: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  place-items: center;
  padding: 25px;
}

.owl-carousel .item-portfolio img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* End PROJECTS */

/* Start ABOUT*/

.about {
  display: flex;
  justify-content: center;
  gap: 150px;

  padding: 0 15rem 0 15rem;

  margin-right: auto;
  margin-left: auto;
}

.half span {
  color: var(--gold-50);
}

.about-text p {
  color: var(--gold-50);
  padding: 100px;
}

.about-wrapper {
  display: flex;
  background: var(--blue-design);
}

.half {
  flex: 1;
  padding: 20px;
}
/* You can adjust the styling of each half as needed */
.left-half {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
}

/* .right-half {
	border:0;
	background-image:url('images/Projects/Drywall/File1.jpeg');
	background-size: cover;
	background-position:center;
	opacity: 0.5;
  } */

.right-half img {
  width: 100%;
}

/* End ABOUT*/

.contact-form {
  background: var(--gold-design);
  color: var(--blue-design);
}

.send-btn {
  border-radius: 20px;
  background: var(--blue-950);
}

.send-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 10px;
}

.arrow-right {
  height: 25px;
}

#submit-btn {
  background-color: inherit;
  color: white;
  border: 0;
}

@media (max-width: 600px) {
  /* Start MAIN */

  .main-slide .owl-carousel .item img {
    height: 100vh;
  }

  #header-nav > .social-icons-accordion {
    display: flex;
    justify-content: center;
  }

  #header-nav a {
    color: #2c3e50;
  }

  .social-icons-lg > .social-icons {
    display: none;
  }

  /* End MAIN */

  /* Start SERVICES */

  .card-container {
    display: flex;
    flex-direction: column;
  }

  .card-content {
    width: 100%;
  }

  .card {
    display: flex;
    flex-direction: column;

    /* background: var(--blue-design); */
  }

  /* End SERVICES */

  /* Start PROJECTS */

  #portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .card-projects {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center;
		align-content: center; */
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .card-projects-items {
    height: 100%;
    width: 100%;
  }

  /* End PROJECTS */

  /* Start ABOUT */
  .right-halt {
    display: none;
  }

  .about-wrapper {
    display: block;
  }

  .about-wrapper .right-half {
    display: none;
  }

  .about-text {
    padding: 50px;
  }

  .about-text p {
    padding: 0;
  }

  /* End ABOUT */
}