/* ===== Variables ===== */
:root {
  --primary-color: #DE3163;
  --dark-color: #686868;
  --black-color: #000;
  --light-color: #0ABAB5;
  --white-color: #fff;
  --transition: all 0.3s ease-in-out;
}

/* ===== Sfondo del logo in basso ===== */
.logo-container {
    padding: 5px; 
    border-radius: 8px; 
    display: inline-block; 
}

/* ===== Reset ===== */
* { margin:0; padding:0; box-sizing:border-box; }
/* body { font-family:'Segoe UI',sans-serif; line-height:1.6; color:var(--dark-color); background:#f4f4f4; }
body { font-family:'Segoe UI',sans-serif; line-height:1.6; color:var(--black-color); background:#f4f4f4; } */
body { font-family:'Segoe UI',sans-serif; line-height:1.6; color:var(--black-color); background:#E8E2CE; }

/* ===== Header ===== */
header { background: var(--white-color); box-shadow:0 2px 6px rgba(0,0,0,0.08); position:sticky; top:0; z-index:999; }
.top-bar { background: linear-gradient(90deg,#1a2133,#2a365a); color:white; padding:8px 40px; display:flex; justify-content:center; align-items:center; font-size:0.9rem; position:relative; }
.top-bar span { display:none; }
.top-bar .logo { display:flex; justify-content:center; align-items:center; }
.top-bar .logo img, .top-bar .logo-placeholder { height:40px; float:left;}
.main-nav { display:flex; justify-content:space-between; align-items:center; padding:0px 30px; }
.nav-links { display:flex; list-style:none; text-decoration:none; margin-right:50px;}
.nav-links li { margin-left:25px; }
.nav-links a { text-decoration:none; color:var(--dark-color); font-weight:500; font-size:1.1em; position:relative; transition: var(--transition); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--primary-color); transition: var(--transition);}
.nav-links a:hover::after { width:100%; }



/* Hamburger */
.hamburger { display:none; flex-direction:column; justify-content:center; cursor:pointer; width:30px; height:25px; position:absolute; right:20px; top:15px; z-index:1000; }
.hamburger span { 
    height:3px; 
    width:100%; 
    background:var(--black-color); /* Colore impostato a NERO */
    margin: 3px 0; /* Ridotto il margine verticale (da 5px a 3px) per rientrare nell'altezza di 25px */
    transition:0.4s; 
}

/* ===== Sections Alternate ===== */
section { padding:80px 20px; }
section .text h2 { font-size:2rem; margin-bottom:20px; color:var(--dark-color);}
section .text p { font-size:1.1rem; line-height:1.6;}
section .image img { width:100%; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.1); object-fit:cover;}
.services .container { direction: rtl; }
.services .text { direction:ltr; }

/* ===== Blog ===== */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; }
.blog-card { background:white; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:var(--transition);}
.blog-card:hover { transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.blog-card img, .blog-image { width:100%; height:200px; background:#e9e9e9; display:flex; align-items:center; justify-content:center; color:#999; font-style:italic; }
.blog-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.blog-image img {
  width: 100%;
  max-width: 300px;
  max-height: 400px; /* altezza massima */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== Buttons ===== */
.btn { display:inline-block; background:var(--primary-color); color:#0ABAB5; padding:12px 28px; border-radius:30px; font-weight:600; transition:var(--transition);}
.btn:hover { background:#686868; transform:translateY(-3px); box-shadow:0 6px 15px rgba(87,185,87,0.4); color:#DE3163; }

/* ===== Footer ===== */
footer { background:#111827; color:#d1d5db; padding:60px 20px 30px; margin-top:60px; }
.footer-container { max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px;}
.footer-col h4 { color:white; margin-bottom:20px; font-size:1.2rem; font-weight:600; position:relative;}
.footer-col h4::after { content:""; display:block; width:40px; height:2px; background:var(--primary-color); margin-top:6px; border-radius:2px;}
.footer-col p, .footer-col a { font-size:0.95rem; color:#9ca3af; line-height:1.6; transition:var(--transition);}
.footer-col a:hover { color:var(--primary-color);}
.footer-social { margin-top:15px; display:flex; gap:12px; }
.footer-social a { width:38px; height:38px; background:#1f2937; color:#d1d5db; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:1rem; transition:var(--transition);}
.footer-social a:hover { background:var(--primary-color); color:white;}
.footer-bottom { text-align:center; padding-top:25px; border-top:1px solid #374151; font-size:0.85rem; color:#9ca3af; margin-top:40px;}

/* ===== Popup ===== */
.questionario-btn { display:none; position: fixed; bottom: 20px; right: 20px; background: var(--primary-color); color:white; padding:12px 20px; border-radius:30px; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,0.2); transition:var(--transition); z-index:9999;}
.questionario-btn:hover { background:#0ABAB5; transform:translateY(-3px);}
.popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:10000; }
.popup { 
    background:white; 
    padding:30px; 
    border-radius:12px; 
    max-width:800px; 
    width:90%; 
    text-align:center; 
    animation:fadeUp 0.4s ease forwards;
}



.close-popup { margin-top:20px; cursor:pointer; color:#666; font-weight:bold;}
.close-popup:hover { color:var(--primary-color);}
@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes gradientShift {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== Mobile ===== */
@media(max-width:768px){
  .hero, section .container { grid-template-columns:1fr; text-align:center; }
  .services .container { direction:ltr; }
  .main-nav { display:none; flex-direction:column; background:white; position:absolute; top:60px; left:0; width:100%; padding:20px 0; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
  .main-nav.active { display:flex; animation:slideDown 0.3s ease forwards;}
  .main-nav ul { flex-direction:column; gap:20px; }
  .main-nav li { margin:0; }
  .hamburger { display:flex; }
  .questionario-btn { display:inline-block; }
}

@keyframes slideDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

/* Custom utility classes */
.text-light-color {
    color: var(--light-color) !important;
}

/*.bg-light-color {
    background-color: var(--light-color) !important;
}
*/
.container-custom {
	max-width: 800px;
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding: 2rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.message-box {
	margin-bottom: 1rem;
}
.facebook-feed {
	margin-top: 2rem;
}

.bg-primary-custom {
    /* background-color: #DE3163; */
	background-color: #E8E2CE;
}

.btn-outline-green {
    background-color: var(--light-color);
    color: var(--white-color) !important;
    border-color: var(--light-color);
}

.btn-outline-green:hover {
    background-color: var(--light-color);
    color: var(--white-color) !important;
    border-color: var(--light-color);
}

/* Stile personalizzato per il form di contatto */
.contact-form-container {
    max-width: 600px; 
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-form-container label,
.contact-form-container h2 {
    color: #666; /* Grigio scuro per il testo */
}

@media (max-width: 600px) {
    .g-recaptcha {
        transform: scale(0.50); /* dimensione ridotta del 15% */
        transform-origin: 0 0; /* scalato dall'angolo in alto a sinistra */
    }
}

/*
 * Regola per impedire che le ancore di navigazione (link #id)
 * vengano coperte dall'header fisso.
 * La proprietà scroll-margin-top aggiunge spazio sopra l'elemento di destinazione.
 */
section[id] {
    /* Il valore deve essere leggermente superiore all'altezza dell'header/navbar */
    scroll-margin-top: 120px;
}