/**
 * Theme Name: Studio Porcelli Bari
 * Template: twentynineteen 
 * Author: Meridion S.r.l.
 * Text Domain: studio-porcelli-bari
 */

 @font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "DM Sans", sans-serif;
}

section {
  scroll-margin-top: 80px !important;
}

#top-header {
  z-index: 9998;
}

#main-header {
  transition: top 0.4s ease, opacity 0.4s ease;
  position: absolute;
  z-index: 9990;
}

#main-header.sticky {
  position: fixed;
  opacity: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#main-header.sticky.visible {
  opacity: 1;
}

#contatti {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* height: 80vh; */

  /* background-position: 0 40%; */
}

.contact-banner {
  height: 60vh; /* default for desktop */
}

@media (min-width: 576px) {
  /* Bootstrap sm breakpoint and below */
  .contact-banner {
    height: 60vh; /* shorter box -> less crop, looks zoomed out */
  }


}

@media (min-width: 768px) {
  .contact-banner {
    height: 80vh;
  }
}

@media (max-height: 900px) {
  .floating-form {
    height: 70vh;
  }
}

@media (max-height: 800px) {
  .floating-form {
    height: 80vh;
  }
}

@media (max-height: 667px) {
  .floating-form {
    height: 90vh;
  }
}

@media (min-height: 901px) {
  .floating-form {
    height: 50vh;
  }
}

.contact-banner img {
  object-position: 44%;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

.my-text {
  text-align: justify !important;
}

.bg-trans {
  background-color: transparent !important;
}

.bg-dred {
  background-color: rgb(104, 12, 27);
}

.text-dred {
  color: rgb(104, 12, 27) !important;
}

.border-dred {
  border-color: rgb(104, 12, 27) !important;
}

.text-dred-over {
  color: rgb(66, 9, 19) !important;
}

.bg-dred-over {
  background-color: #420913 !important;
}

/* 1. Set up the parent link for positioning */
.nav-link {
  position: relative;
  /* Optional: Remove default underline */
  text-decoration: none;
  /* Optional: Add padding to make space for the line */
  padding-bottom: 5px;
}

/* 2. Style the pseudo-element to be the underline */
.nav-link::after {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: white; /* Color of the underline */
  /* Start scaled to 0 and prepare for animation */
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

/* 3. Animate the underline on hover */
.nav-link:hover::after {
  transform: scaleX(1); /* Scale to full width on hover */
}

/* Style for the underline on HOVER and for the ACTIVE link */
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1); /* Scale to full width */
}

.navbar-nav:hover .nav-link.active:not(:hover)::after {
  transform: scaleX(0);
}

#service-page-section .my-heading {
  position: relative;
  min-height: 50px;
}

#service-page-section .my-heading::after {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  bottom: 0; /* Position at the bottom of the h2 container */
  left: 0; /* Start from the left edge */
  width: 50%; /* Make it span the full width of the h2 */
  height: 3px !important; /* Set the thickness of the underline */
  background-color: rgb(104, 12, 27); /* Choose your color */
}

.c-underline {
  position: relative;
}

.c-underline::after {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  bottom: 0; /* Position at the bottom of the h2 container */
  left: 35%; /* Start from the left edge */
  width: 30%; /* Make it span the full width of the h2 */
  height: 3px !important; /* Set the thickness of the underline */
  background-color: rgb(104, 12, 27); /* Choose your color */
}

.site-footer {
  z-index: 99999 !important;
}

label.my-text {
  font-size: x-small;
}

.back {
  z-index: 0 !important;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}