@import "tailwindcss";

body {
  font-family: "Montserrat", sans-serif;
  background-color: #fff;
}
* {
  outline-color: #5b21b6;
}

.font-mont {
  font-family: "Montserrat", sans-serif;
}
.font-play {
  font-family: "Playfair Display", serif;
}
.solid header {
  background: rgba(63, 71, 216, 0.7);
  backdrop-filter: blur(20px);
}
header:hover {
  transform: translateY(0) !important;
}
.nav-up header {
  transform: translateY(-5.5rem);
}

.faqDiv.faqOpen h3 svg {
  transform: rotate(180deg);
}

.detailContent h2,
.detailContent h3,
.detailContent h4,
.detailContent h5,
.detailContent h6 {
  color: #5b21b6;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
}
.detailContent h3,
.detailContent h4 {
  font-size: 1.25rem;
}
.detailContent h5,
.detailContent h6 {
  font-size: 1rem;
}
.detailContent p {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  margin-top: 0.875rem;
}
.detailContent *:first-child {
  margin-top: 0;
}
.detailContent ul {
  padding-left: 1.5rem;
  list-style: disc;
  margin-top: 0.875rem;
}
.detailContent ul li {
  color: #333;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  margin-top: 0.875rem;
}
.detailContent ul li::marker {
  color: #f59e0b;
}
.swiper-pagination span {
  background: #f0f0fc;
  opacity: 1;
}
.swiper-pagination span.swiper-pagination-bullet-active {
  background: #5b21b6;
}
.PropertySwiperThumb .swiper-slide {
  border: 1px solid transparent;
}
.PropertySwiperThumb .swiper-slide-thumb-active {
  border: 1px solid #5b21b6;
}

/* form start */
.spotlightForm form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1.25rem;
}
.spotlightForm form p {
  width: calc((100% / 3) - 1rem);
}
.spotlightForm form p button {
  width: 100%;
  margin-top: 2rem;
}
.spotlightForm form .form-control p {
  width: 100%;
}
.contatFormWrapper form  p br ,
.spotlightForm form .form-control p br {
  display: none;
}
.contatFormWrapper form textarea,
.contatFormWrapper form select,
.contatFormWrapper form input,
.spotlightForm form input {
  width: 100%;
  margin-top: 0.75rem; /* 12px */
  padding: 0.5rem 1.25rem; /* py-2 (8px), px-5 (20px) */
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem; /* 10px */
  color: #333333;
  font-size: 0.875rem; /* 14px */
}
.wpcf7-response-output {
  width: 100% !important;
  margin: 0 !important;
}
.contatFormWrapper .wpcf7-response-output{
  margin-top: 1rem !important;
}
.wpcf7-response-output,
.wpcf7-not-valid-tip {
  font-size: 0.875rem;
}

/* form end */
.phoneBtn{
  background: #f59e0b;
  font-weight: 500;
  color: #000 ;
}
.phoneBtn img{
  filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(16%) hue-rotate(246deg) brightness(98%) contrast(105%);
}
.phoneBtn:hover{
  background: #ffb93f;
}
.phoneBtn span{
  color: #000;
}
.whatsappBtn{
  background: #22c55e;
  color: #fff ;
  font-weight: 500;
}
.whatsappBtn:hover{
  background: #0b9b40;
}
.whatsappBtn img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(56%) saturate(0%) hue-rotate(3deg) brightness(102%) contrast(101%);
}
.whatsappBtn span{
  color: #fff;
}

@media screen and (max-width: 1600px) and (min-width: 1451px) {
  html {
    font-size: 13px;
  }
  .container {
    max-width: 1280px;
  }
}
@media screen and (max-width: 1450px) and (min-width: 1200px) {
  html {
    font-size: 11px;
  }
  .container {
    max-width: 1150px;
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  .nav-up header {
    transform: translateY(-4.625rem);
  }
  .burgermenu span {
    transform-origin: right center;
    transition: all 0.3s ease-in-out;
  }
  .mobilemenuactive {
    overflow: hidden;
  }
  .mobilemenuactive .burgermenu span:nth-child(2) {
    opacity: 0;
  }
  .mobilemenuactive .burgermenu span:nth-child(1) {
    transform: rotate(45deg) translate(15px, 15px);
  }
  .mobilemenuactive .burgermenu span:nth-child(3) {
    transform: rotate(-45deg) translate(15px, -15px);
  }
  .mainnav .nav-item.active .menuArrow {
    transform: rotate(180deg);
    stroke: #3f46d8;
  }
  .mainnav .nav-item.active {
    background: #cdcff6;
  }
  .mainnav .nav-item.active > a {
    color: #3f46d8;
  }
  .mobilemenuactive .mainnav {
    left: 0;
  }
  .mobilemenuactive header {
    background: #fff;
  }
  .mobilemenuactive .burgermenu span {
    background: #3f46d8;
  }
  .mobilemenuactive .logo-wrapper p {
    color: #3f46d8;
  }
  .mobilemenuactive .logo-wrapper p span {
    color: #333;
  }
  .spotlightForm form p {
    width: 100%;
  }
  .spotlightForm form p button {
    margin-top: 0;
  }
  .wpcf7-response-output,
  .wpcf7-not-valid-tip {
    font-size: 0.75rem;
  }
}