:root {
  --properties-font-family:       "Poppins", Sans-serif;  
  --properties-font-base:         16px;

  --properties-color-brand:       rgba(     152,    0,      8,      1);
  --properties-color-primary:     rgba(     87,      87,      87,      1);
  --properties-color-secondary:   rgba(     87,      87,      87,      1);

  --properties-background-page:    rgba(    0,      0,      0,      0.02);
  --properties-background-items:   rgba(   255,    255,    255,    1);

  --propertis-border-items-size:            5px;
  --propertis-border-items-color:           rgba(    0,      0,      0,      0);
  --propertis-border-items-color-hover:     rgba(    0,      0,      0,      0.1);

  --properties-border-radius-items:       10px;
  --properties-border-radius-image:       10px;

}

html,body
{
    background: var(--properties-background-page);
    font-family: var(--properties-font-family);
    font-size: var(--properties-font-base);
}

#formRicerca label
{
     text-transform: uppercase;
     font-size: 0.8rem;
     margin: 0 0 0  10px;
     padding: 0px;
     color: var(--properties-color-primary);
}


/************************************************************* 

            RICERCA - PROPERTIES ITEMS 

*************************************************************/



.properties-items
{
    display:            block;
    text-decoration:    none;
    background:         var(--properties-background-items);
    overflow:           hidden;
    border:             solid var(--propertis-border-items-size) var(--propertis-border-items-color);
    border-radius:      var(--properties-border-radius-items);
}

.properties-items:hover
{
    border: solid var(--propertis-border-items-size) var(--propertis-border-items-color-hover);
}


.properties-items-image img
{
    width:              100%;
    margin:             0px;
    padding:            0px;
    border-radius:      var(--properties-border-radius-image);
}

.properties-items-price
{
    color:              var(--properties-color-secondary);
    font-size:          1.4rem;
}

.properties-items-rif > small
{
    font-weight:        500;
    color:              var(--properties-color-secondary);
    font-size:          0.8rem;
    margin:             0px;
}

.properties-items-title > h2
{
    font-weight:        600;
    color:              var(--properties-color-brand);
    font-size:          1.2rem;
    margin:             0px;
}

.properties-items-address
{
    color:              var(--properties-color-primary);
    font-size:          1.1rem;
}

.properties-items-description
{
    color:              var(--properties-color-primary);
    font-size:          1.0rem;
    text-align:         justify;

    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow:           hidden;
}

.properties-items-features
{
    color:              var(--properties-color-primary);
    font-size:          1rem;
}



/************************************************************* 

            SCHEDA - HEADER NAVIGAZIONE 

*************************************************************/

.property-header a
{
    text-decoration: none;
    color: var(--properties-color-primary);
}


/************************************************************* 

            SCHEDA - PROPERTY - GALLERY + CAROSELLO

*************************************************************/


.property-gallery
{

display:                grid;
grid-template-columns:  repeat(4, 1fr);
grid-template-rows:     repeat(4, 1fr);
grid-column-gap:        1px;
grid-row-gap:           1px;
position:               relative;
overflow:               hidden;

border-radius:          var(--properties-border-radius-items);
width:                  100%;
height:                500px;
}


.property-gallery .div1 { grid-area: 1 / 1 / 5 / 4; overflow: hidden; }
.property-gallery .div2 { grid-area: 1 / 4 / 2 / 5;  overflow: hidden; }
.property-gallery .div3 { grid-area: 2 / 4 / 3 / 5;  overflow: hidden; }
.property-gallery .div4 { grid-area: 3 / 4 / 4 / 5;  overflow: hidden; }
.property-gallery .div5 { grid-area: 4 / 4 / 5 / 5;  overflow: hidden; } 

/* ogni cella della colonna destra */
.property-gallery .box-vertical{
  position: relative;
  width: 100%;
  height: 100%;   /* forza la cella a riempire la griglia */
}

.property-gallery .box-vertical > a {
  display: block;
  width: 100%;
height: 100%; 
}

.property-gallery .box-vertical .veletta
{
display: none;    
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
background: #000;
opacity: 0.5;
z-index: 2
}

.property-gallery .box-vertical:hover .veletta
{
display: block;
}

.property-gallery .box-vertical .veletta-scura
{
display: block;    
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
background: #000;
opacity: 0.7;
z-index: 2
}

.property-gallery .box-vertical:hover .veletta-scura
{
opacity: 0.5;
}


.property-gallery .box-vertical .room
{
  position: absolute;        
                    
  left: 10px;                
  bottom: 10px;
  z-index: 3;              
  background: #333;
  font-size: 13px;
  color: #fff;
  font-weight: 600;

  padding: 6px 12px;
}


.property-gallery .box-vertical .tot-images
{
  position: absolute;      
                        
  top: 50%;            
  left: 50%;              
  transform: translate(-50%, -50%); 
  z-index: 3;    

  font-size: 27px;
  color: #fff;
  font-weight: 600;

}



.property-gallery .box-vertical > a > img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
  display: block;
}


.property-gallery .carousel-control-prev,
.property-gallery .carousel-control-next {
  width: 5%;             
}

.property-gallery .carousel-control-prev i,
.property-gallery .carousel-control-next i {
  font-size: 2.5rem;       
  color: white;           
  position: absolute;
  top: 50%;                
  transform: translateY(-50%);
}

.property-gallery .carousel-control-prev i 
    {
    top: calc( 50% - 35px );
    left: 10px;              
    width: 50px;
    }


.property-gallery .carousel-control-next i 
    {
    top: calc( 50% - 35px );
    right: 10px;              
    width: 50px;
    }


@media (min-width: 768px) 
{
    .property-gallery .carousel-control-prev i 
    {
    left: 30px;              
    width: 50px;
    }


    .property-gallery .carousel-control-next i 
    {
    right: 10px;              
    width: 50px;
    }

}



.property-gallery .carousel-control-prev:hover,
.property-gallery .carousel-control-next:hover 
{
  opacity: 1 !important;
}


@media (max-width: 1000px) {
.property-gallery .div1 { grid-area: 1 / 1 / 5 / 5;  overflow: hidden; }
.property-gallery .div2 { display: none; }
.property-gallery .div3 { display: none; }
.property-gallery .div4 { display: none; } 
.property-gallery .div5 { display: none; }     
.property-gallery 
{
border-radius: 0px;
}
}



.property-gallery .nav-item.contatori a
{
  display: block !important;
  width: 140px;
  height:130px;
  padding: 20px;
  text-align: center;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 45px;
  text-transform: capitalize;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0,49,81,.16),0 1px 4px 0 rgba(0,49,81,.12);
  margin-right: 20px;
  color: #222;
  background: #f0f0f0;
}

.property-gallery .nav-item.contatori a:hover
{
  color: #222;
  background: #fff;
}


.property-gallery .nav-item.contatori a span
{
    display: block;
    float: none;
    margin: 5px;
}

/************************************************************* 

            SCHEDA - INDICE ICONE

*************************************************************/

.property-nav,
.property-nav a
{
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--properties-color-primary);
}

.property-nav a.nav-link
{
    padding: 0px;
    margin: calc( -10px - var(--propertis-border-items-size));
    margin-bottom: 10px;
}

.property-nav li.nav-item a
{
    padding: 0px;
    background: #f0f0f0;
    color: var(--properties-color-primary);
    border:             solid var(--propertis-border-items-size) var(--propertis-border-items-color);
    border-radius:      var(--properties-border-radius-items);
}

.property-nav li.nav-item a:hover
{
    color: var(--properties-color-primary);
    border: solid var(--propertis-border-items-size) var(--propertis-border-items-color-hover);
}


.property-nav svg
{
    display: none;
}

@media (min-width: 768px) 
{

    .property-nav,
    .property-nav a
    {
        font-size: 1.0rem;
        text-decoration: none;
        color: var(--properties-color-primary);
    }

    .property-nav a.nav-link
    {
        padding: 0px;
        margin: calc( -10px - var(--propertis-border-items-size));
    }

    .property-nav li.nav-item a
    {
        padding: 10px;
        background: #f0f0f0;
        color: var(--properties-color-primary);
        border:             solid var(--propertis-border-items-size) var(--propertis-border-items-color);
        border-radius:      var(--properties-border-radius-items);
    }

    .property-nav li.nav-item a:hover
    {
        color: var(--properties-color-primary);
        border: solid var(--propertis-border-items-size) var(--propertis-border-items-color-hover);
    }


    .property-nav svg
    {
        height: 20px;
        padding-right: 10px;
        color: var(--properties-color-primary);
    }

}

/************************************************************* 

            SCHEDA - PROPERTY 

*************************************************************/

.property-container
{
  background: #fff;
  border-radius:      var(--properties-border-radius-items);
  color:              var(--properties-color-primary);
}

.listello-titolo {
    display: flex;
    align-items: flex-start; /* o center se vuoi centrati */
    gap: 10px; /* spazio tra immagine e testo */

}

.listello-titolo h1 {
    margin: 0;
    font-size: 18px; /* o la misura che ti serve */
    font-weight: 600;
    line-height: -1;
    margin-bottom: 22px;
}
.listello-titolo p {

    font-size: 14px; /* o la misura che ti serve */

    line-height: -1;
}
.listello-titolo img {
    width: 80px;  /* o la misura che ti serve */
    height: auto;
}

.listello-titolo p {
    margin: 0;
}

.descrizione,
.descrizione p 
{
   font-size: 18px;
   line-height: 22px;
}

.descrizione,
.descrizione p 
{
   margin-bottom: 5px;

}


/************************************************************* 

            MODALE - PROPERTY 

*************************************************************/

.property-modal-nav 
{

  border: none;
}

.property-modal-nav .nav-item span
{
  background: #fefefe;
  color: var(--properties-color-primary);
  border:             solid var(--propertis-border-items-size) var(--propertis-border-items-color);
  border-radius:      var(--properties-border-radius-items);
  cursor: pointer;
  margin-right: 15px;

}

.property-modal-nav .nav-item span:hover
{
     color: var(--properties-color-primary);
    border: solid var(--propertis-border-items-size) var(--propertis-border-items-color-hover);
}


.property-modal-nav .nav-item span.active
{
    background: #f0f0f0;
    color: var(--properties-color-primary);
    border:             solid var(--propertis-border-items-size) var(--propertis-border-items-color);
    border-radius:      var(--properties-border-radius-items);
}






/************************************************************* 

            CARATTERISTICHE

*************************************************************/

.caratteristica > h6
{
color: var(--properties-color-brand);
text-transform: uppercase;
margin: 0px;
}

.caratteristica > p
{
color: var(--properties-color-primary);
margin:  0px;
}

.rif 
{
  color: var(--properties-color-primary);
}

.agenzia
{
    background: #fafafa;
    padding: 20px;
    border-radius: 15px;
}
.agenzia h5
{
color: var(--properties-color-brand);
margin: 0px;
}

.agenzia .indirizzo
{
    font-size: 14px;
}

.btn-imi,
.btn-imi:hover
{
background-color: var(--properties-color-brand);
color: #ffffff !important;  
margin: 20px 0 20px 0;  
}



.caratteristicheLabel
{
font-weight: 600 !important;

}

.table-striped.property-table  > tbody > tr:nth-of-type(2n+1) > * {
    --bs-table-bg-type: rgb(250, 250, 250) !important; /* opzionale */
}



.table-striped.property-table tr td 
{
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 21px;
    color: #575757;
    border: none;
    
}

.table-striped.property-table tr td.sx 
{
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: 18px !important;
    border-right: solid 1px #d0d0d0;
    width: 30%;
    color: rgb(152, 0, 8);
}

.table-striped.property-table tr:nth-of-type(1) td.dx,
.table-striped.property-table tr:nth-of-type(2) td.dx
{
 font-weight: 600 !important;
}

.descrizione > p
{
text-align: justify !important;
line-height: 1.9rem;
}


.contrattoLabel
    {
        position: relative;
        display: inline-block;
        background: #f0f0f0;

        padding: 10px;
        margin: 10px 0 10px 0;
        border-radius: 5px;
        font-size: 1rem;
        font-weight: 500;
    }

@media (min-width: 768px) 
{
    .contrattoLabel
        {
            position: absolute;
            display: inline;
            background: #f0f0f0;
            top: 0px;
            right: 0px;
            padding: 10px;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 500;
        }
}