:root {
	 /* 
	 ==========================================================================
       FONT SIZE
     ========================================================================== 
	*/
    /* Scala tipografica */
	/* 18px -> 20px (Es. Testi in evidenza o pulsanti) */
    --text-md: clamp(1.1250rem, 1.0893rem + 0.1786vw, 1.2500rem);

    /* 16px -> 18px (Es. Testo paragrafo secondario) */
    --text-sm: clamp(1.0000rem, 0.9643rem + 0.1786vw, 1.1250rem);

    /* 12px -> 14px (Es. Note legali, tooltip) */
    --text-xs: clamp(0.7500rem, 0.7143rem + 0.1786vw, 0.8750rem);
	
	 /* 
	 ==========================================================================
       COLORI PRIMITIVI (Palette di base)
     ========================================================================== 
	*/
    --color-white: #FFFFFF;
    --color-orange:  #b98e88;
	--color-pink: #DFD5CB;
	--color-green: #727E6A;

    /* 
    ==========================================================================
       COLORI SEMANTICI (Utilizzo logico nel sito)
    ========================================================================== 
	*/
    --bg-site:          var(--color-pink);       /* Sfondo principale del sito */
    --brand-primary:    var(--color-orange);        /* Colore principale dell'agenzia (Call to action, link, accenti) */
    
    /* Gestione dei testi per una perfetta gerarchia visiva */
    --text-main:        var(--color-gray-dark);   /* Testo corpo: un grigio scuro (#5A5A5A) è molto più elegante e leggibile del nero puro */
    --text-muted:       var(--color-gray-medium); /* Testo secondario o didascalie (#707070) */
    --text-light:       var(--color-gray-light);  /* Testo ancora più tenue o elementi disabilitati/border (#848484) */
    --text-on-dark:     var(--color-white);       /* Testo da usare sopra i bottoni blu o sfondi scuri */
}
/* 
==========================================================================
	GLOBAL SETTINGS
========================================================================== 
*/
html{
	scroll-behavior: smooth;
}
body{
	background-color: var(--bg-site);
	overflow-x: hidden;
}
*{
	font-family: 'Montserrat', sans-serif;
	font-optical-sizing: auto;
}
.color-orange{
	color: var(--color-orange);
}
.color-green{
	color: var(--color-green);
}
.text-xs{
	font-size: var(--text-xs) !important;
}
.text-sm{
	font-size: var(--text-sm) !important;
}
.text-md{
	font-size: var(--text-md) !important;
}
p{
	font-size: var(--text-sm);
}
.link-1{
	color: var(--color-white);
	text-decoration: unset;
}
.btn-1{
	display: inline-block;
	background-color: var(--color-white);
	color: var(--color-orange);
	padding: 20px 30px;
	text-decoration: unset;
	transition: 0.25s;
	letter-spacing: 4px;
	font-size: var(--text-md);
}
.btn-1:hover{
	background-color: #727e6a;
	color: var(--color-white);
}
.service-icon{
	width: 100%;
	max-width: 130px;
	min-width: 60px;
}
.decorative-element{
	width: 0%;
	min-height: 1px;
	background-color: var(--color-orange);
	transition: 1s ease-in-out;
}
.decorative-element.active{
	width: 100%;
}
.decorative-element-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.animated-svg {
  transform: rotate(-90deg);
}
.circle-path {
  fill: transparent;           /* Nessun colore di riempimento */
  stroke: var(--color-orange);             /* Colore della linea del cerchio */
  stroke-width: 0.5;             /* Spessore della linea */
  stroke-linecap: round;       /* Estremità arrotondate della linea */
  
  /* Circonferenza = 2 * Math.PI * 50 = ~314 */
  stroke-dasharray: 314;       
  stroke-dashoffset: 314;      /* Nasconde il tracciato spingendolo fuori */
  
  /* Imposta la transizione. Verrà animata solo quando l'offset cambia */
  transition: stroke-dashoffset 1s ease-in-out;
}
.decorative-element-circle.active .circle-path {
  stroke-dashoffset: 0;        /* Riporta il tracciato a 0, creando l'effetto disegno */
}
.decorative-element-semicircle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.decorative-element-semicircle.active .circle-path {
  stroke-dashoffset: 0;        /* Riporta il tracciato a 0, creando l'effetto disegno */
}
.btn-2{
	color: var(--color-green);
	border: 1px solid var(--color-green);
}
/* 
==========================================================================
	BLOG CARD
========================================================================== 
*/
.blog-card{
	display: block;
	width: 100%;
	text-decoration: none;
}
.blog-card .card-img-wrapper{
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 400px;
}
.blog-card .card-img-wrapper img{
	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center; 
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: -1;
}
.blog-card .card-title{
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	color: var(--color-orange);
}
.blog-card .card-date{
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	color: var(--color-green);
	font-size: var(--text-xs);
	border-bottom: 1px solid var(--color-orange);
	border-top: 1px solid var(--color-orange);
}
.blog-card .card-description{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size: var(--text-xs);
	color: var(--color-green);
}
.blog-card .card-date{
	color: var(--color-green);
}
.blog-card .card-end{
	width: -webkit-fill-available; 
	height: 1px; 
	background-color: var(--color-orange); 
	max-width: 50%;
}
/* 
==========================================================================
	ROOM SWIPER SECTION
========================================================================== 
*/
.room-swiper .swiper-navigation-icon{
	display: none;
}
.swiper-blog-button .swiper-navigation-icon{
	display: none;
} 
.swiper-blog-button-next{ 
	transform: translateX(150%);
}
.swiper-blog-button-prev{ 
	transform: translateX(-150%);
}	
.room-swiper .room-slide{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
/* 
==========================================================================
	CONTACT SECTION
========================================================================== 
*/
#contact-section{
	min-height: 85vh;
	background-image: url(/wp-content/uploads/2026/10/contatti-1.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#gramsci-contact-form input, #gramsci-contact-form textarea{
	width: 100%;
	border-radius: 6px;
	border: 1px solid #DFD5CB;
	background-color: #ffffff73;
	color: white;
	outline: unset;
	font-size: var(--text-md);
}
#gramsci-contact-form input::placeholder, #gramsci-contact-form textarea::placeholder{
	color: white;
}
#submit-btn{
	display: inline-block;
	background-color: var(--color-white);
	color: var(--color-orange);
	padding: 20px 30px;
	text-decoration: unset;
	transition: 0.25s;
	letter-spacing: 4px;
	font-size: var(--text-md);
	border: unset;
}
#submit-btn:hover{
	background-color: #727e6a;
	color: var(--color-white);
}
/* 
==========================================================================
	SERVICE SECTION
========================================================================== 
*/
#service-section .service-description{
	color: var(--color-orange);
}
#service-section .service-description:first-of-type{
	border-top: 1px solid white;
}
#service-section .service-description{
	border-bottom: 1px solid white;
}
/* 
==========================================================================
	COOMING SOON
========================================================================== 
*/
#cooming-soon{
	background-image: url(/wp-content/uploads/2026/10/bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#cooming-soon .row{
	min-height: 100vh;
}
#cooming-soon-content{
	min-height: 85vh;
	background-image: url(/wp-content/uploads/2026/10/frame.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;
}
/* 
==========================================================================
	HOMEPAGE
========================================================================== 
*/
#homepage-header{
	background-image: url('/wp-content/uploads/2026/10/hero-home.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 80vh; 
}
#dove-siamo{
	background-image: url(/wp-content/uploads/2026/10/chi-siamo-home.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 80vh;
}
/* 
==========================================================================
	MEDIA QUERY
========================================================================== 
*/
@media screen and (max-width: 992px){
	.btn-1{
		padding: 15px 20px;
	}
}