/* =============================================


   UniServiceHub – style.css  v4.1


   Bootstrap 5 overrides + brand extensions


   ============================================= */





/* ─── Google Font ─────────────────────────── */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');





/* ─── Brand tokens ────────────────────────── */


:root {


  --bs-primary:     #0363b7;


  --bs-primary-rgb: 3, 99, 183;


  --brand:          #0363b7;


  --brand-dark:     #024a8a;


  --brand-light:    #e8f2fc;


  --green:          #4bbb69;


  --green-dark:     #38a355;


  --white:          #fff;


  --wa:             #25D366;


  --wa-dark:        #1da851;


  --gray-bg:        #f8f9fa;


  --radius:         0.75rem;


}


/* Scrollbar */


::-webkit-scrollbar { width: 12px; }


::-webkit-scrollbar-track { background: #f1f1f1; }


::-webkit-scrollbar-thumb { background: var(--brand); }


::-webkit-scrollbar-thumb:hover { background: var(--green); }





::-webkit-selection, ::-moz-selection, ::selection {


    color: var(--white);


    background: var(--brand)


}


/* ─── Base ────────────────────────────────── */


body {


  font-family: 'Inter', system-ui, sans-serif;


  color: #212529;


}





h1, h2, h3, h4, h5 {


  font-weight: 700;


}





/* ─── Utility: colori ─────────────────────── */


.color-primary   { color: var(--brand); }


.color-secondary { color: var(--green); }


.color-red { color: #ea4335; }


.text-green      { color: var(--green); }   /* es. span nei titoli hero carousel */


.text-white      { color: var(--white); }   /* es. span nei testi topbar */


.bg-brand        { background-color: var(--brand); }


.bg-brand-light  { background-color: var(--brand-light); }





/* ─── Topbar ──────────────────────────────── */


.topbar {


  background-color: var(--brand);


  padding: 0.4rem 0;


  /*font-size: 0.82rem;*/


}


.topbar a             { color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.15s; }


.topbar a:hover       { color: #fff; }


/*.topbar .bi           { font-size: 0.9rem; }*/





/* ─── Navbar ──────────────────────────────── */


.navbar-main {


  background: #fff;


  box-shadow: 0 2px 8px rgba(0,0,0,0.08);


}


.navbar-main .navbar-brand img {


  height: 70px;


  width: auto;


}


.navbar-main .nav-link {


  font-weight: 500;


  color: #333;


  padding-left: 0.9rem;


  padding-right: 0.9rem;


  transition: color 0.15s;


}


.navbar-main .nav-link:hover,


.navbar-main .nav-link.active {


  color: var(--brand);


}





/* Megamenu ───────────────────────────────── */


.megamenu {


  min-width: 480px;


  border-top: 3px solid var(--brand);


  border-radius: 0 0 var(--radius) var(--radius);


  box-shadow: 0 8px 24px rgba(0,0,0,0.12);


  left: auto !important;


  right: 0 !important;


}


@media (max-width: 991.98px) {


  .megamenu {


    min-width: 100%;


    left: 0 !important;


    right: 0 !important;


  }


}


.megamenu .list-group-item {


  border: none;


  padding: 0.4rem 0.75rem;


  font-size: 0.9rem;


}


.megamenu .list-group-item-action:hover {


  background: var(--brand-light);


  color: var(--brand);


}


.megamenu h6.list-group-item {


  font-size: 0.75rem;


  text-transform: uppercase;


  letter-spacing: 0.05em;


  background: transparent;


  font-weight: 700;


  color: var(--brand);


}





/* Navbar CTA button ─────────────────────── */


.btn-nav-wa {


  background: var(--wa);


  color: #fff;


  border-radius: 2rem;


  font-size: 0.85rem;


  font-weight: 600;


  padding: 0.4rem 1rem;


  border: none;


  white-space: nowrap;


  transition: background 0.2s;


  text-decoration: none;


}


.btn-nav-wa:hover { background: var(--wa-dark); color: #fff; }





/* ─── Hero carousel ───────────────────────── */


#hero-carousel .carousel-item img {


  height: 520px;


  object-fit: cover;


  filter: brightness(0.62);


}


#hero-carousel .carousel-caption {


  bottom: auto;


  top: 50%;


  transform: translateY(-50%);


  text-align: left;


  left: 8%;


  right: 8%;


}


#hero-carousel .carousel-caption h2 {


  font-size: clamp(1.8rem, 4vw, 3rem);


  font-weight: 800;


  text-shadow: 0 2px 8px rgba(0,0,0,0.4);


  margin-bottom: 0.75rem;


}


#hero-carousel .carousel-caption p {


  font-size: clamp(0.95rem, 2vw, 1.15rem);


  text-shadow: 0 1px 4px rgba(0,0,0,0.4);


  margin-bottom: 1.5rem;


  max-width: 560px;


}


#hero-carousel .carousel-indicators [data-bs-target] {


  width: 10px;


  height: 10px;


  border-radius: 50%;


  border: none;


  background: rgba(255,255,255,0.6);


}


#hero-carousel .carousel-indicators .active {


  background: var(--green);


}





/* ─── Buttons ─────────────────────────────── */


.btn-whatsapp {


  background: var(--wa);


  color: #fff;


  border: none;


  font-weight: 600;


  transition: background 0.2s;


}


.btn-whatsapp:hover { background: var(--wa-dark); color: #fff; }





.btn-brand {


  background: var(--brand);


  color: #fff;


  border: none;


  font-weight: 600;


  transition: background 0.2s;


}


.btn-brand:hover { background: var(--brand-dark); color: #fff; }





.btn-outline-brand {


  border: 2px solid var(--brand);


  color: var(--brand);


  font-weight: 600;


  background: transparent;


  transition: background 0.2s, color 0.2s;


}


.btn-outline-brand:hover { background: var(--brand); color: #fff; }





/* ─── Trust bar ───────────────────────────── */


.trust-bar {


  background: var(--brand);


  color: #fff;


  padding: 1.2rem 0;


}


.trust-bar .trust-item {


  display: flex;


  align-items: center;


  gap: 0.6rem;


  padding: 0.4rem 0;


}


.trust-bar .trust-item .bi {


  font-size: 1.5rem;


  flex-shrink: 0;


  color: var(--green);


}


.trust-bar .trust-item strong {


  display: block;


  font-size: 0.95rem;


  line-height: 1.2;


}


.trust-bar .trust-item small {


  font-size: 0.78rem;


  opacity: 0.85;


}





/* ─── Section heading ─────────────────────── */


.section-header {


  margin-bottom: 2.5rem;


}


.section-header h2 {


  font-size: clamp(1.6rem, 3vw, 2.2rem);


}


.section-header .lead {


  color: #6c757d;


}





/* ─── Service cards ───────────────────────── */


.service-card {


  border: 1px solid #e9ecef;


  border-radius: var(--radius);


  padding: 2rem;


  height: 100%;


  transition: box-shadow 0.2s, transform 0.2s;


  background: var(--white);


}


.service-card:hover {


  box-shadow: 0 8px 24px rgba(3,99,183,0.12);


  transform: translateY(-3px);


}


.service-card .service-icon {


  font-size: 2.5rem;


  color: var(--brand);


  margin-bottom: 1rem;


}


.service-card.featured {


  border-color: var(--green);


  background: #f0fff5;


  /*background: linear-gradient(135deg, #f0fff5 0%, #fff 100%);*/


}


.service-card.featured li {


    background: #f0fff5;


}


.service-card.featured .badge-combo {


  background: var(--green);


  color: #fff;


  font-size: 0.75rem;


  padding: 0.3rem 0.7rem;


  border-radius: 2rem;


  font-weight: 700;


}





/* ─── Come funziona: numeri step ─────────── */


.step-number {


  width: 48px;


  height: 48px;


  border-radius: 50%;


  background: var(--brand);


  color: #fff;


  font-size: 1.3rem;


  font-weight: 800;


  display: flex;


  align-items: center;


  justify-content: center;


  flex-shrink: 0;


}





/* ─── Testimonianze ───────────────────────── */


.testimonial-card {


  border: 1px solid #e9ecef;


  border-radius: var(--radius);


  padding: 1.75rem;


  height: 100%;


  background: #fff;


  transition: box-shadow 0.2s, transform 0.2s;


}


.testimonial-card:hover {


  box-shadow: 0 6px 20px rgba(0,0,0,0.08);


  transform: translateY(-2px);


}


.testimonial-card .stars {


  color: #f59e0b;


  font-size: 1rem;


  margin-bottom: 0.75rem;


  letter-spacing: 0.05em;


}


.testimonial-card blockquote {


  font-size: 0.92rem;


  line-height: 1.65;


  color: #495057;


  margin-bottom: 1.25rem;


  font-style: italic;


  border-left: 3px solid var(--brand-light);


  padding-left: 0.85rem;


}


.testimonial-card .author {


  display: flex;


  align-items: center;


  gap: 0.75rem;


  border-top: 1px solid #e9ecef;


  padding-top: 1rem;


}


.testimonial-card .author img {


  width: 44px;


  height: 44px;


  border-radius: 50%;


  object-fit: cover;


  border: 2px solid var(--brand-light);


}


.testimonial-card .author-name     { font-weight: 700; font-size: 0.88rem; color: #212529; }


.testimonial-card .author-location { font-size: 0.78rem; color: #6c757d; }





/* ─── FAQ accordion ───────────────────────── */


.accordion-button:not(.collapsed) {


  background: var(--brand-light);


  color: var(--brand);


  box-shadow: none;


}


.accordion-button:focus {


  box-shadow: 0 0 0 0.2rem rgba(3,99,183,0.2);


}





/* ─── Portfolio: immagine "Perché sceglierci" */


.portfolio-wrap { overflow: hidden; border-radius: 10px; max-height: 280px; }


.portfolio-img  { object-fit: cover; object-position: center 40%; }





/* ─── Garanzie icons ──────────────────────── */


.garanzia-item .bi {


  font-size: 2.5rem;


  color: var(--brand);


}





/* ─── Coming soon pills ───────────────────── */


.pill-soon {


  display: inline-flex;


  align-items: center;


  gap: 0.4rem;


  background: #f0f4f8;


  border: 1px dashed #b0c4d8;


  color: #5a7a99;


  border-radius: 2rem;


  padding: 0.45rem 1rem;


  font-size: 0.88rem;


  font-weight: 500;


}


.pill-soon .badge-soon {


  background: #5a7a99;


  color: #fff;


  font-size: 0.68rem;


  padding: 0.15rem 0.5rem;


  border-radius: 2rem;


}





/* ─── Page hero (pagine interne) ──────────── */


.page-hero {


  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);


  color: #fff;


  padding: 4rem 0 3rem;


}


.page-hero h1  { font-size: clamp(1.6rem, 3vw, 2.4rem); }


.page-hero .lead { opacity: 0.9; }


.breadcrumb-item a { color: rgba(255,255,255,0.55); text-decoration: none; }


.breadcrumb-item.active,


.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.55); }





/* ─── Blog cards ──────────────────────────── */


.blog-card {


  border: 1px solid #e9ecef;


  border-radius: var(--radius);


  overflow: hidden;


  height: 100%;


  transition: box-shadow 0.2s, transform 0.2s;


}


.blog-card:hover     { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-3px); }


.blog-card img       { height: 200px; object-fit: cover; width: 100%; }


.blog-card .card-body { padding: 1.5rem; }





/* ─── Price table ─────────────────────────── */


.price-card {


  border: 2px solid #e9ecef;


  border-radius: var(--radius);


  padding: 1.75rem;


  height: 100%;


  text-align: center;


}


.price-card.featured    { border-color: var(--brand); }


.price-card .price-range {


  font-size: 1.8rem;


  font-weight: 800;


  color: var(--brand);


}





/* ─── Footer ──────────────────────────────── */


footer.site-footer {


  background: #1a2a3a;


  color: rgba(255,255,255,0.8);


  padding: 3.5rem 0 0;


}


footer.site-footer h5 {


  color: #fff;


  /*font-size: 0.9rem;*/


  text-transform: uppercase;


  letter-spacing: 0.06em;


  margin-bottom: 1.2rem;


}


footer.site-footer .nav-link {


  color: rgba(255,255,255,0.65);


  padding: 0.2rem 0;


  font-size: 0.9rem;


  transition: color 0.15s;


}


footer.site-footer .nav-link:hover { color: #fff; }





/* Testo descrittivo nel footer */


footer.site-footer .footer-desc {


  color: rgba(255,255,255,0.6);


  font-size: 0.88rem;


}


/* Lista contatti nel footer: gap ridotto */


footer.site-footer .footer-contacts { gap: 0.3rem; }





/* Social icons nel footer */


footer.site-footer .footer-social-link {


  color: rgba(255,255,255,0.5);


  transition: color 0.2s;


}


footer.site-footer .footer-social-link:hover { color: #fff; }





footer.site-footer .footer-bottom {


  border-top: 1px solid rgba(255,255,255,0.1);


  padding: 1.25rem 0;


  margin-top: 2.5rem;


  font-size: 0.85rem;


  color: rgba(255,255,255,0.5);


}





/* Logo nel footer: sfondo bianco per leggibilità su dark bg */


footer.site-footer .footer-logo img {


  height: 70px;


  width: auto;


  margin-bottom: 1rem;


  background: #ffffff;


  padding: 8px 14px;


  border-radius: 10px;


  box-shadow: 0 2px 8px rgba(0,0,0,0.18);


}





/* ─── Google Maps embed ───────────────────── */


.map-embed {


  width: 100%;


  height: 380px;


  border: 0;


  border-radius: 10px;


  display: block;


}





/* ─── Scroll-to-top button ────────────────── */


.scroll-top {


  position: fixed;


  bottom: 90px;


  right: 20px;


  width: 42px;


  height: 42px;


  border-radius: 50%;


  background: var(--brand);


  color: #fff;


  border: none;


  font-size: 1.1rem;


  display: none;


  align-items: center;


  justify-content: center;


  z-index: 900;


  cursor: pointer;


  box-shadow: 0 4px 12px rgba(3,99,183,0.35);


  transition: background 0.2s;


}


.scroll-top.visible { display: flex; }


.scroll-top:hover   { background: var(--brand-dark); }





/* ─── Mobile: sticky CTA bar ─────────────── */

.sticky-cta {

  display: none;

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  background: #fff;

  border-top: 1px solid #e9ecef;

  z-index: 1000;

  padding: 0.5rem 0.75rem;

  gap: 0.5rem;

}


.sticky-cta .btn {

  flex: 1;

  font-size: 0.88rem;

  padding: 0.6rem 0.5rem;

  border-radius: 0.5rem;

}


/* ─── Responsive ──────────────────────────── */

@media (max-width: 767.98px) {

  .sticky-cta                         { display: flex; }

  body                                { padding-bottom: 70px; }

  #hero-carousel .carousel-item img   { height: 320px; }

  #hero-carousel .carousel-caption h2 { font-size: 1.5rem; }

  #hero-carousel .carousel-caption p  { font-size: 0.9rem; }

  .megamenu                           { min-width: 100%; }
  .scrollToTopBtn { bottom: 120px !important; }

}


/* ─── Misc helpers ────────────────────────── */

.rounded-10 { border-radius: 10px; }

.fw-800     { font-weight: 800; }

.text-wa    { color: var(--wa); }

.bg-green   { background: var(--green); }




/* ─── MIE CLASSI ────────────────────────── */

.form-control-lg, .form-select { font-size: 1rem }


/* TORNA SU */

.scrollToTopBtn {

    background-color: var(--brand);

    border: none;

    color: var(--white);

    cursor: pointer;

    line-height: 45px;

    width: 45px;

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

    opacity: 0;

    transform: translateY(100px);

    transition: all 0.5s ease;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

}


    .scrollToTopBtn:hover {

        background-color: var(--green);

    }


.showBtn {

    opacity: 1;

    transform: translateY(0);

}


.lista-ordinata { list-style-type: none; padding-left: 0px !important; }