/* Manrope Regular (peso 400) */
@font-face {
  font-family: 'Manrope';
  src: url('../font/manrope/static/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Opzionale: migliora il rendering */
}
/* Dancing Script Regular (peso 400) */
@font-face {
  font-family: 'Dancing';
  src: url('../font/Dancing_Script/static/DancingScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Opzionale: migliora il rendering */
}
/* Tangerine Regular (peso 400) */
@font-face {
  font-family: 'Tangerine';
  src: url('../font/tangerine/Tangerine-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Opzionale: migliora il rendering */
}

/* Manrope Bold (peso 700) */
@font-face {
  font-family: 'Manrope';
  src: url('../font/manrope/static/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Dancing Script Bold (peso 700) */
@font-face {
  font-family: 'Dancing';
  src: url('../font/Dancing_Script/static/DancingScript-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tangerine Bold (peso 700) */
@font-face {
  font-family: 'Tangerine';
  src: url('../font/tangerine/Tangerine-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* Opzionale: migliora il rendering */
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #DD6E00;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


footer p, footer li {
      color:rgb(180, 180, 180)

}

footer h2 {
  font-size:calc(12px + 1.3vw) !important
}
p {
  color:rgb(122, 122, 122);
  line-height:calc(2);
}

.elegante {
  font-family: "Tangerine" !important;
}

video {
  filter:brightness(0.8)
}

.font-standard {
  font-family: "Manrope" !important;
}

.border-primary {
  border:solid 1px #DD6E00 !important
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Tangerine";
  color:#DD6E00;
}

h1 {
    font-size:calc(28px + 3vw) !important;
text-shadow:
  1px 2px 0 black;
      font-weight: 800;

}
.paragrafo-hero {
text-shadow:
  1px 2px 0 black;
      font-weight: 800;
    font-size:calc(10px + 0.3vw) !important;

}

.nav-item {
text-shadow:
  1px 2px 0 black;
      font-weight: 800;
}

.nav-link:hover {
  color: #DD6E00 !important;
}


h2,h3,h4,h5,h6  {
    font-size:calc(20px + 2.3vw) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;     /* Spessore della linea */
    text-underline-offset: 10px;         /* Distanza della linea dal testo */
}

.form-label {
  font-family: "Tangerine";
  font-size:calc(15px + 0.5vw) !important;

}

select, input, .form-control, input::placeholder {
    font-size: calc(10px + 0.3vw) !important;
    color:rgb(130,130,130) !important;
}

.colore-principale, .text-primary{
  color:#DD6E00 !important; 
}

.text-muted {
  color:rgba(172, 172, 172, 0.524) !important;
}

.titan {
  font-size: calc(30px + 3vw) !important;
  font-weight: 900;
}

.banda-colorata {
  height:60%;
  width:10px;
  background-color:rgba(172, 172, 172, 0.223);
  position:absolute;right:2%;
  z-index:-1
}

.bg-principale {
  background-color:#DD6E00;
}

body {
  scroll-behavior: smooth;
}

.nav-link {
  color:white
}

.relative {
  position:relative
}

.bg-dark {
  background-color: rgba(6,6,6,1) !important;
}

.masonry {
  column-count: 1;
  column-gap: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Classi per le altezze */
.empty-300 {
  height: 300px;
}

.height-500 {
  height: 500px;
}

.height-400 {
  height: 400px;
}

.height-350 {
  height: 350px;
}

/* Background per le immagini */
.bg-home1 {
  background-image: url('../img/Masonry Home 1.webp');
}

.bg-home2 {
  background-image: url('../img/Masonry Home 2.webp');
}

.bg-home3 {
  background-image: url('../img/Masonry Home 3.webp');
}

/* Layout responsive della masonry */
@media (min-width: 576px) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

@media (min-width: 992px) {
  .masonry {
    column-count: 2;
  }
}

/* Nascondi gli elementi vuoti su mobile */
@media (max-width: 575.98px) {
  .masonry-item.empty {
    display: none;
  }
}

/* Stato iniziale: invisibile */
.fadeInLeft,
.fadeInRight {
  opacity: 0;
}

/* Quando viene aggiunta la classe "animate", parte l'animazione */
.fadeInLeft.animate {
  animation: fadeInLeftAnim 1s forwards;
}

.fadeInRight.animate {
  animation: fadeInRightAnim 1s forwards;
}

/* Keyframes per l'animazione da sinistra */
@keyframes fadeInLeftAnim {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframes per l'animazione da destra */
@keyframes fadeInRightAnim {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#logo-fixed {
  position:absolute;bottom:10%;
}

.z-top {
  z-index:900;
}

.btn-primary {
  border:solid 2px #9a4d00;
  background-color:#DD6E00 !important;
  padding-left: 25px;
  padding-right: 25px;
  padding-top:13px;
  padding-bottom: 13px;
  border-radius: 30px;
}
.btn-primary:hover {
  border:solid 2px #171717;
  background-color:#040404 !important;
  padding-left: 25px;
  padding-right: 25px;
  padding-top:13px;
  padding-bottom: 13px;
  border-radius: 30px;
}
.btn-light {
  border:solid 2px #DD6E00;
  background-color:white !important;
  padding-left: 25px;
  padding-right: 25px;
  padding-top:13px;
  padding-bottom: 13px;
  border-radius: 30px;
}

.btn-light:hover {
  color:white;
  background-color:black !important;
}
.btn-dark {
  border:solid 1px #DD6E00;
  background-color:rgb(0, 0, 0) !important;
  padding-left: 25px;
  padding-right: 25px;
  padding-top:13px;
  padding-bottom: 13px;
  border-radius: 30px;
}

.btn-dark:hover {
  color:rgb(255, 255, 255);
  background-color:#DD6E00 !important;
}

#main-contatti {
  background-image: url(../img/Contattami.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.thumb-img {
  width: 120px;
  height: 80px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.thumb-img:hover {
  transform: scale(1.05);
}

#alert-annuncio {
  width:100%;
  border-radius:10px;
}

#scheda-casa {
  background-image: url("../img/sfondo-carta-2.avif");
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border: outset 10px rgb(20, 20, 20);
}
.classe-energetica {
  display: inline-block;
  color: white;
  font-weight: bold;
  padding: 4px 10px 4px 10px;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  font-size: 0.9rem;
  text-align: center;
  min-width: 36px;
}

/* Colori per le classi energetiche */
.classe-energetica.G    { background-color: #e60000; }
.classe-energetica.F    { background-color: #ff4500; }
.classe-energetica.E    { background-color: #ff8c00; }
.classe-energetica.D    { background-color: #ffcc00; }
.classe-energetica.C    { background-color: #99cc00; }
.classe-energetica.B    { background-color: #33cc33; }
.classe-energetica.A    { background-color: #00b300; }
.classe-energetica.A2,
.classe-energetica.A3,
.classe-energetica.A4   { background-color: #007f00; }
  


.service-bubble {
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-bubble i {
  font-size: 1.2rem;
  color: #333;
}

@media screen and (min-width:768px){

.service-bubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.grappolo {
  position: relative;
}

.grappolo-centro {
  z-index: 10;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 2rem;
}

.grappolo-satellite {
  position: absolute;
  transform: translate(-50%, -50%);
}

}

@media screen and (max-width: 1025px) {
  .grappolo {
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .grappolo-centro {
    position: static !important;
    transform: none !important;
    margin-bottom: 1rem;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    color: #fff !important;
    font-size: 1.5rem;
  }

  .grappolo-satellite {
    position: static !important;
    transform: none !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .service-bubble {
    width: 90%;
    justify-content: flex-start;
    text-align: left;
  }

  .service-bubble i {
    flex-shrink: 0;
  }
}

.navbar-brand img {
  height: 55px;
  width: auto;
}

.lh2 {
  line-height: calc(1.5);
}
@media (max-width: 767px) {
  .navbar-collapse {
    background-color: #000 !important;
    padding: 1rem;
    z-index:999;
    position:relative

  }

  .navbar-nav .nav-link {
    color: white !important;
    z-index:999;
    position:relative
  }

  .navbar-nav .nav-item.bg-white .nav-link.text-dark {
    color: #000 !important; /* mantieni il pulsante 'Contattami' visibile */
    z-index:999;
    position:relative
  }
}


@media screen and (min-width:768px){
  .parallax {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* NO fixed! */
    height: 500px
  }
}

@media screen and (max-width:768px){
  .parallax {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px
  }
}

.bg-home1 {
  background-image: url('../img/Masonry Home 1.webp');
}

.bg-home2 {
  background-image: url('../img/Masonry Home 2.webp');
}

.bg-home3 {
  background-image: url('../img/Masonry Home 3.webp');
}
.bg-chi1 {
  background-image: url('../img/citta-del-capo.jpg');
}
.bg-chi2 {
  background-image: url('../img/foto Stock Piacenza.jpg');
}
.bg-chi3 {
  background-image: url('../img/Masonry Home 1.webp');
}
.bg-vendi1 {
  background-image: url('../img/valutazione.jpg');
}
.bg-vendi2 {
  background-image: url('../img/marketing.webp');
}
.bg-vendi3 {
  background-image: url('../img/support.jpg');
}

.btn-outline-dark {
  border:solid 1px #DD6E00;
  color:white;
  background-color:black;
}

.testo-main {
  font-size: calc(12px + 0.3vw);
}

.min-vh-50 {
  min-height: 50vh;
}

 /* Preloader overlay */
.preloader-overlay {
  position: fixed;
  inset: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.preloader-overlay video {
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
  z-index: 9999 !important;
  position:relative;
  filter: brightness(1);

}

.preloader-hidden {
  display: none !important;
}


a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 2px solid #c30c0c !important;
  border-radius:10px;
  color: #000000 !important;
  text-shadow:none;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background:#DD6E00;
  border-radius:10px;
}

::selection {
  color: white;
  background: #DD6E00;
  border-radius:10px;

}

.titolo-scheda-annuncio {
  color:rgb(230, 230, 230);
  text-shadow:black 2px 2px 5px;
  font-size:calc(25px + 1.5vw)!important;
}
.titolo-scheda-annuncio-sotto{
  font-size:calc(25px + 1.5vw)!important;
}

.testo-zona-annuncio, .testo-tipo-annuncio, .dettagli-annuncio, .testo-data-annuncio {
  color:rgb(230, 230, 230) !important;
  text-shadow:black 2px 2px 5px;
  font-size:calc(12px)!important;
}

.testo-tipo-annuncio {
  position:absolute;
  top:5px;
  left:15px;
}
.testo-zona-annuncio {
  position:absolute;
  top:35px;
  left:15px;
}

.scheda-annuncio-casa h3 {
  font-size: calc(28px + 1vw) !important;
  text-decoration: none;
  margin-bottom: 20px;
}


#scheda-casa p, #scheda-casa li, #scheda-casa {
  font-size: calc(12px + 0.3vw) !important;
}

.titolo-annuncio-pagina-annunci {
    font-size:calc(20px + 1.5vw)!important;
}

.navbar-nav .elegante {
  font-size: calc(10px + 1vw);
}
.navbar-nav .btn {
  font-size: calc(10px + 1vw);
}

.background--chisono-container {
  position: relative;
  min-height: 100vh;
  background-image: url('../img/Rosanna Gabriella Costa.webp');
  background-size: cover;
  background-position: right;
}

.background--chisono-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25); /* Sovrapposizione nera trasparente */
  z-index: 1; /* Metti l'overlay sopra l'immagine */
}

.background-chisono-container > * {
  position: relative;
  z-index: 2; /* Metti il contenuto sopra l'overlay */
}
/* Modello di container con background+overlay */
.background--copertina {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: right;
}
.background--copertina::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.background--copertina > * {
  position: relative;
  z-index: 2;
}
#container-titolo {
  z-index: 1000;
  background-color: #0000005a;
  padding: 10px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}