/********** Template CSS **********/

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #F2F2F2;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #000026;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #000026;
  }

:root {
  --navy-900: #000026;   /* navy principale */
  --navy-800: #101c64;   /* navy medio */
  --navy-700: #1a2a8a;   /* navy chiaro */

  --primary: var(--navy-900);
  --secondary: var(--navy-800);

  --light: #1111115c;
  --dark: #111111;
}





.fw-medium {

    font-weight: 600 !important;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 45px;

    bottom: 45px;

    z-index: 99;

}





/*** Spinner ***/

#spinner {

    opacity: 0;

    visibility: hidden;

    transition: opacity .5s ease-out, visibility 0s linear .5s;

    z-index: 99999;

}



#spinner.show {

    transition: opacity .5s ease-out, visibility 0s linear 0s;

    visibility: visible;

    opacity: 1;

}





/*** Button ***/

.btn {

    font-weight: 500;

    text-transform: uppercase;

    transition: .5s;

}



.btn.btn-primary,

.btn.btn-secondary {

    color: #FFFFFF;

}



.btn-square {

    width: 38px;

    height: 38px;

}



.btn-sm-square {

    width: 32px;

    height: 32px;

}



.btn-lg-square {

    width: 48px;

    height: 48px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: normal;

    border-radius: 2px;

}





/*** Navbar ***/

.navbar .dropdown-toggle::after {

    border: none;

    content: "\f107";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    vertical-align: middle;

    margin-left: 8px;

}



.navbar-light .navbar-nav .nav-link {

    margin-right: 30px;

    padding: 25px 0;

    color: #FFFFFF;

    font-size: 15px;

    text-transform: uppercase;

    outline: none;

}



.navbar-light .navbar-nav .nav-link:hover,

.navbar-light .navbar-nav .nav-link.active {

    color: var(--primary);

}



@media (max-width: 991.98px) {

    .navbar-light .navbar-nav .nav-link  {

        margin-right: 0;

        padding: 10px 0;

    }



    .navbar-light .navbar-nav {

        border-top: 1px solid #EEEEEE;

    }

}



.navbar-light .navbar-brand,

.navbar-light a.btn {

    height: 75px;

}



.navbar-light .navbar-nav .nav-link {

    color: #F2F2F2;

    font-weight: 500;

}



.navbar-light.sticky-top {

    top: -100px;

    transition: .5s;

}



@media (min-width: 992px) {

    .navbar .nav-item .dropdown-menu {

        display: block;

        border: none;

        margin-top: 0;

        top: 150%;

        opacity: 0;

        visibility: hidden;

        transition: .5s;

    }



    .navbar .nav-item:hover .dropdown-menu {

        top: 100%;

        visibility: visible;

        transition: .5s;

        opacity: 1;

    }

}





/*** Header ***/

.carousel-caption {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .7);

    z-index: 1;

}



.carousel-control-prev,

.carousel-control-next {

    width: 10%;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

    width: 3rem;

    height: 3rem;

}



@media (max-width: 768px) {

    #header-carousel .carousel-item {

        position: relative;

        min-height: 450px;

    }

    

    #header-carousel .carousel-item img {

        position: absolute;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

}



.page-header {

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}



.page-header-inner {

    background: rgba(0, 0, 0, .7);

}



.breadcrumb-item + .breadcrumb-item::before {

    color: var(--light);

}





/*** Facts ***/

.fact {

    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/carousel-bg-1.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}





/*** Service ***/

.service .nav .nav-link {

    background: var(--light);

    transition: .5s;

}



.service .nav .nav-link.active {

    background: var(--primary);

}



.service .nav .nav-link.active h4 {

    color: #FFFFFF !important;

}





/*** Booking ***/

.booking {

    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/carousel-bg-2.jpg) center center no-repeat;

    background-size: cover;

}



.bootstrap-datetimepicker-widget.bottom {

    top: auto !important;

}



.bootstrap-datetimepicker-widget .table * {

    border-bottom-width: 0px;

}



.bootstrap-datetimepicker-widget .table th {

    font-weight: 500;

}



.bootstrap-datetimepicker-widget.dropdown-menu {

    padding: 10px;

    border-radius: 2px;

}



.bootstrap-datetimepicker-widget table td.active,

.bootstrap-datetimepicker-widget table td.active:hover {

    background: var(--primary);

}



.bootstrap-datetimepicker-widget table td.today::before {

    border-bottom-color: var(--primary);

}





/*** Team ***/

.team-item .team-overlay {

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    transform: scale(0);

    transition: .5s;

}



.team-item:hover .team-overlay {

    transform: scale(1);

}



.team-item .team-overlay .btn {

    color: var(--primary);

    background: #FFFFFF;

}



.team-item .team-overlay .btn:hover {

    color: #FFFFFF;

    background: var(--secondary)

}





/*** Testimonial ***/

.testimonial-carousel .owl-item .testimonial-text,

.testimonial-carousel .owl-item.center .testimonial-text * {

    transition: .5s;

}



.testimonial-carousel .owl-item.center .testimonial-text {

    background: var(--primary) !important;

}



.testimonial-carousel .owl-item.center .testimonial-text * {

    color: #FFFFFF !important;

}



.testimonial-carousel .owl-dots {

    margin-top: 24px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.testimonial-carousel .owl-dot {

    position: relative;

    display: inline-block;

    margin: 0 5px;

    width: 15px;

    height: 15px;

    border: 1px solid #CCCCCC;

    transition: .5s;

}



.testimonial-carousel .owl-dot.active {

    background: var(--primary);

    border-color: var(--primary);

}





/*** Footer ***/

.footer {

    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)), url(../img/carousel-bg-1.jpg) center center no-repeat;

    background-size: cover;

}



.footer .btn.btn-social {

    margin-right: 5px;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #F2F2F2;

    border: 1px solid #FFFFFF;

    border-radius: 35px;

    transition: .3s;

}



.footer .btn.btn-social:hover {

    color: var(--primary);

}



.footer .btn.btn-link {

    display: block;

    margin-bottom: 5px;

    padding: 0;

    text-align: left;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: normal;

    text-transform: capitalize;

    transition: .3s;

}



.footer .btn.btn-link::before {

    position: relative;

    content: "\f105";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    margin-right: 10px;

}



.footer .btn.btn-link:hover {

    letter-spacing: 1px;

    box-shadow: none;

}



.footer .copyright {

    padding: 25px 0;

    font-size: 15px;

    border-top: 1px solid rgba(256, 256, 256, .1);

}



.footer .copyright a {

    color: #F2F2F2;

}



.footer .footer-menu a {

    margin-right: 15px;

    padding-right: 15px;

    border-right: 1px solid rgba(255, 255, 255, .3);

}



.footer .footer-menu a:last-child {

    margin-right: 0;

    padding-right: 0;

    border-right: none;

}



.lettering {

    width: 17vw;

}



@media (min-width:1920px) {

    .lettering {

        width: 12vw;

    }

}



@media (max-width:900px) {

    .lettering {

        width: 30vw;

    }



    .boxlettering2 {

        width: 100%;

        height: 12vh;

        margin-bottom: 2vh;

    }



    .boxlettering2 img {

        margin-left: -30vw;

    }

}







@media (max-width:500px) {

    .lettering {

        width: 50vw;

    }



    .boxlettering2 {

        width: 100vw;

        height: 12vh;

        margin-bottom: 2vh;

    }



    .boxlettering2 img {

        margin-left: -62vw;

    }

}

#walloffamebutton a {
    border: 0; 
    background: var(--light); 
}

#walloffamebutton a:hover {
    background: var(--secondary);
}

#walloffamebutton a:hover i {
    color: white;
}

#walloffamebutton a:hover h4 {
    color: white;
}

.portfolio-item::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #FFFFFF;
    z-index: 1;
  }
  
  .portfolio-item .portfolio-btn {
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    text-decoration: none;
    opacity: 0;
    transition: .5s;
    z-index: 2;
  }
  
  .portfolio-item:hover .portfolio-btn {
    opacity: 1;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    top: 30px;
    left: 30px;
  }

.descrizionemarmitte {
    display: flex;
    width: 100% !important;
    color: #fff;
}

.titolo {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding-right: 5%;
    white-space: nowrap;
}


.prezzo {
    width: 100%;
    float: right;    
    text-align: right;
    font-size: 3.5vh;
}

#ecommerce .portfolio-item::after {
    border: 0 !important;
    z-index: 0 !important;
}

/*
  LOGIN AREA
*/

.grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 24em;
    width: 90%;
    margin-top: 1%;
    margin-bottom: 1%;
    border: 2px solid #000026;
  }
  
  .grid p{
    color: #000026;
    text-align: center;
  }
  
  .immagine_login{
    width: 100%;
    padding: 20px 20px;
  }
  
  .header_login{
    background-color: #000026;
  }
  
  .login__title {
    font-size: 16px;
    font-size: 1rem;
    margin: 0;
  }
  
  .login__body {
  
    background-color: #fff;
    padding: 1.5em;
    position: relative;
  }
  
  .form__field{
    margin-left: 11%;
    padding: 10px 10px;
  
  }
  
  .login__body::before {
    background-color: #fff;
    content: '';
    height: 0.5em;
    left: 50%;
    margin-left: -0.25em;
    margin-top: -0.25em;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 0.5em;
  }
  
  .login input[type='email']{
    border: 0.0625em solid #e5e5e5;
    padding: 1em 1.25em;
    border-radius: 5px;
  }
  
  .login input[type='password'] {
    border: 0.0625em solid #e5e5e5;
    padding: 1em 1.25em;
    border-radius: 5px;
  }
  
  .login input[type='submit'] {
    background-color: #101c64;
    border-radius: 0.25em;
    border: 2px solid #101c64;
    color: #fff;
    font-weight: 700;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    padding: 0.75em 1.25em;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    margin-left: 34%;
  }
  
  .login input[type='submit']:focus,
  .login input[type='submit']:hover {
    background-color: #000026;
    border: 2px solid #000026;
  }
  
  .login__footer {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #fff;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  

  .square-box {
    position: relative;
    overflow: hidden;
    padding-top: 100%;
}

.square-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-logo {
  max-width: 520px;     /* ↑ logo più grande */
}

@media (max-width: 992px) {
  .hero-logo {
    max-width: 440px;
  }
}

@media (max-width: 576px) {
  .hero-logo {
    max-width: 340px;
  }
}
.hero-btn-square{
  width: 300px !important;   /* ↓ più piccoli */
  height: 300px !important;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem;
}

/* Contenuto */
.hero-btn-square i{
  font-size: 2.2rem;
}

.hero-btn-square span{
  font-size: 1.7rem;
  line-height: 1.1;
}

.hero-btn-square small{
  font-size: .95rem;
  letter-spacing: .08em;
}

/* Tablet */
@media (max-width: 992px){
  .hero-btn-square{
    width: 260px !important;
    height: 260px !important;
  }

  .hero-btn-square span{
    font-size: 1.5rem;
  }
}

#header-carousel .carousel-inner,
#header-carousel .carousel-item{
  overflow: visible;
}/* Desktop: ok hero pieno */
/* =========================
   HERO (FIX DEFINITIVO)
   - 2 pulsanti sempre affiancati
   - si rimpiccioliscono su mobile
   - niente margin-top negativi instabili
   - vh iOS-safe
   ========================= */

/* iOS viewport stabile */
#header-carousel .carousel-caption{
  min-height: 100svh;          /* iOS 16+ */
  padding-top: 24px;
  padding-bottom: 24px;
}
@supports not (height: 100svh){
  #header-carousel .carousel-caption{ min-height: 100vh; }
}

/* Logo: scala bene senza trucchi di margin-left negativi */
.hero-logo{
  width: min(520px, 82vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Contenitore dei 2 pulsanti: SEMPRE 2 colonne */
.hero-tiles{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  width: min(720px, 92vw);
  margin: 22px auto 0;
  padding: 0 10px;
  position: relative;
  z-index: 10;
}

/* Pulsante: niente width/height fissi in px.
   Manteniamo un rapporto “quasi quadrato” con aspect-ratio */
.hero-btn-square{
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;

  border-radius: 18px;
  padding: clamp(12px, 2.2vw, 18px);
  text-align: center;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px;

  /* glass */
  background: rgba(20, 40, 90, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(120, 160, 255, 0.35);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);

  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.hero-btn-square:hover{
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

/* Testi/icon: dimensioni fluide */
.hero-btn-square i{
  font-size: clamp(18px, 3.4vw, 34px);
  margin-bottom: 0;           /* rimuove i tuoi 50px che distruggono il layout */
  color: rgba(255,255,255,.95);
}

.hero-btn-square span{
  font-size: clamp(12px, 2.8vw, 22px);
  line-height: 1.1;
  font-weight: 900;

  /* il tuo marrone, ma con contrasto più controllato */
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

.hero-btn-square small{
  font-size: clamp(10px, 2.2vw, 14px);
  line-height: 1.2;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  max-width: 28ch;
}

/* Mobile: restano affiancati, ma “più piccoli” (riduciamo container e gap) */
@media (max-width: 576px){
  .hero-tiles{
    width: min(520px, 94vw);
    gap: 10px;
    margin-top: 16px;
  }
  .hero-btn-square{
    border-radius: 16px;
    padding: 10px;
  }
}

/* iPhone piccoli: ancora 2 affiancati, ma più compatti */
@media (max-width: 380px){
  .hero-tiles{
    width: 96vw;
    gap: 8px;
  }
  .hero-btn-square small{
    letter-spacing: .04em;
  }
}

/* Tablet */
@media (max-width: 992px){
  .hero-tiles{
    margin-top: -70px;
  }
}

/* Mobile: salgono di più */
@media (max-width: 576px){
  .hero-tiles{
    margin-top: -110px;   /* valore chiave */
  }
}

@media (max-width: 576px) {
  .df-services {
    margin-top: 200px;   /* aumenta/diminuisci a piacere */
  }
}
/* MOBILE: evita che le sezioni sotto risalgano e coprano il carousel */
@media (max-width: 576px) {

  /* 1) Spazio reale sotto il carousel */
  #header-carousel {
    margin-bottom: 80px;
  }

  /* 2) Se hai wrapper con margini negativi (tipico), annullali su mobile */
  .services-wrapper,
  .df-services {
    margin-top: 0 !important;
  }

  /* Se avevi spostato i bottoni verso l’alto con margin negativo, riduci l'effetto su mobile */
  .hero-tiles {
    margin-top: 0 !important;
    padding-bottom: 30px;
  }
}
@media (max-width: 576px) {

  #header-carousel{
    margin-bottom: 80px; /* spazio reale sotto hero */
  }
}

@media (max-width: 992px){
  .hero-btn-square{
    width: 260px;
    height: 260px;
  }

  .hero-tiles{
    gap: 1.5rem;
    margin-top: -70px;
  }
}

@media (max-width: 576px){

  /* 1) Lascia spazio sotto al titolo del carousel */
  #header-carousel .carousel-caption{
    padding-bottom: 140px;  /* spazio per i 2 pulsanti */
  }

  /* 2) Porta i pulsanti più in basso (niente overlap col titolo) */
  .hero-tiles{
    margin-top: 0 !important;     /* annulla il negativo su mobile */
    padding: 0 16px;              /* evita tagli laterali */
  }

  /* 3) Centra davvero la griglia e mantieni i due quadrati vicini */
  .hero-tiles{
    display: grid !important;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    justify-items: center;
    gap: 12px;
  }

  /* 4) Quadrati un filo più piccoli per sicurezza */
  .hero-btn-square{
    width: 132px !important;
    height: 132px !important;
    border-radius: 16px;
  }
  .hero-btn-square i{
  font-size: 1.6rem; 
  margin-bottom: 20px;     /* icona più grande */
}

.hero-btn-square span{
  font-size: 0.6rem;     /* titolo */
  line-height: 0.95;
}

.hero-btn-square small{
    margin-top: -5px;
  font-size: 0.50rem;    /* motto */
  letter-spacing: .08em;
}
}
/* =========================
   HERO BUTTON – GLASS STYLE
   ========================= */
.hero-btn-square{
  background: rgba(20, 40, 90, 0.35);  /* vetro */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

border: 1px solid rgba(120, 160, 255, 0.35);
  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.45),
    inset 0 0 0 rgba(255,255,255,0);

  color: #ffffff;
  transition: 
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.hero-btn-square:hover{
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-6px) scale(1.03);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.45),
    inset 0 0 20px rgba(255,255,255,0.15);
}
.hero-btn-square i{
  color: #ffffff;
  opacity: 0.95;
}

/* TITOLO – marrone richiesto */
.hero-btn-square span{
  color: #502600;
  font-weight: 800;
  text-shadow:
    -0.5px -0.5px 0 rgba(0, 0, 0, 0.9),
     0.5px -0.5px 0 rgba(2, 2, 2, 0.9),
    -0.5px  0.5px 0 rgba(0, 0, 0, 0.9),
     0.5px  0.5px 0 rgba(255,255,255,0.9);
}

.hero-btn-square small{
  color: rgba(255,255,255,0.75);
}
/* =========================
   BACKGROUND GLOBALE – NAVY INTENSO
   ========================= */

/* ===== BACKGROUND GLOBALE – OVERRIDE (mettilo a fine file) ===== */
html, body{
  min-height: 100%;
}

/* =========================================
   BACKGROUND GLOBALE – NAVY PIATTO
   ========================================= */

body{
  background-color: var(--navy-900) !important; /* #00003d */
  background-image: none !important;
  background-attachment: initial !important;
}


/* =========================
   FIX STRABORDO NERO CAROUSEL + SERVIZI SOTTO
   (metti a fine file)
   ========================= */

/* Il carousel non deve mai strabordare fuori */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item{
  overflow: hidden !important;
}

/* Stessa altezza per item/caption/immagine (mobile compreso) */
#header-carousel .carousel-item{
  min-height: 100svh;           /* iOS moderno */
  position: relative;
}
@supports not (height: 100svh){
  #header-carousel .carousel-item{ min-height: 100vh; }
}

/* Immagine sempre “copri” e alta quanto l’item */
#header-carousel .carousel-item > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption: non usare più min-vh-100 “di bootstrap” come vincolo principale */
#header-carousel .carousel-caption{
  min-height: 100% !important;  /* segue l’item */
  height: 100%;
  padding-bottom: 24px;         /* spazio sotto ai pulsanti */
}

/* Spazio reale dopo il carousel così i servizi non risalgono */
#header-carousel{
  margin-bottom: 70px !important;
}
/* =========================================================
   HERO BUTTONS – OVERRIDE FINALE (DESKTOP OK, MOBILE SMALL)
   Incolla QUESTO BLOCCO ALLA FINE del tuo CSS
   ========================================================= */

/* 1) Base (mobile-first): due pulsanti affiancati sempre */
.hero-tiles{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin-top: 0 !important;        /* niente negativi di default */
  padding: 0 14px 24px !important; /* respiro su mobile */
  position: relative;
  z-index: 10;
}

/* Pulsante: dimensioni di base (mobile) */
.hero-btn-square{
  width: 148px !important;
  height: 148px !important;
  border-radius: 16px !important;
  padding: 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
}

.hero-btn-square i{
  font-size: 1.6rem !important;
  margin-bottom: 10px !important;
}
.hero-btn-square span{
  font-size: .95rem !important;
  line-height: 1.1 !important;
}
.hero-btn-square small{
  font-size: .65rem !important;
  letter-spacing: .04em !important;
  margin-top: 0 !important;
}

/* 2) Ultra-small (se vuoi ancora più compatti sotto ~360px) */
@media (max-width: 360px){
  .hero-btn-square{
    width: 132px !important;
    height: 132px !important;
  }
  .hero-tiles{
    gap: 10px !important;
  }
}

/* 3) Tablet: cresce un po’ */
@media (min-width: 576px){
  .hero-btn-square{
    width: 220px !important;
    height: 220px !important;
    border-radius: 18px !important;
    padding: 22px !important;
  }
  .hero-btn-square i{ font-size: 2.4rem !important; margin-bottom: 18px !important; }
  .hero-btn-square span{ font-size: 1.25rem !important; }
  .hero-btn-square small{ font-size: .85rem !important; }
  .hero-tiles{ gap: 18px !important; padding-bottom: 34px !important; }
}

/* 4) Desktop: dimensione “grande” come prima (NON deve ridursi) */
@media (min-width: 992px){
  .hero-tiles{
    grid-template-columns: repeat(2, 300px) !important; /* 2 card da 300 */
    gap: 40px !important;
    padding: 0 0 0 !important;
  }

  .hero-btn-square{
    width: 300px !important;
    height: 300px !important;
    border-radius: 20px !important;
    padding: 32px !important;
  }

  .hero-btn-square i{
    font-size: 3.2rem !important;
    margin-bottom: 26px !important;
  }
  .hero-btn-square span{ font-size: 1.7rem !important; }
  .hero-btn-square small{ font-size: 1.0rem !important; margin-top: 10px !important; }
}

/* 5) Importante: evita sbordi neri/overlay del carousel */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item{
  overflow: hidden !important;
}

/* Su mobile, assicurati che sotto al carousel ci sia spazio reale */
@media (max-width: 576px){
  #header-carousel{ margin-bottom: 70px !important; }
  #header-carousel .carousel-caption{ padding-bottom: 170px !important; }
}
/* FIX CENTRATURA HERO TILES (desktop + mobile) */
.hero-tiles{
  width: fit-content !important;   /* il blocco si “stringe” sui 2 bottoni */
  margin-left: auto !important;
  margin-right: auto !important;   /* centrato orizzontalmente */
}

/* Se su desktop vuoi griglia a larghezza fissa e centrata */
@media (min-width: 992px){
  .hero-tiles{
    display: grid !important;
    grid-template-columns: repeat(2, 300px) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: stretch !important;
  }
}
/* Tablet: centra sempre il blocco dei bottoni hero */
@media (max-width: 992px){
  .hero-tiles{
    width: 100% !important;          /* evita fit-content */
    justify-content: center !important;
    justify-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== HERO: 2 colonne anche su smartphone (no overflow) ===== */
@media (max-width: 576px){

  /* 2 colonne sempre, ma contenitore fluido */
  .hero-tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(520px, 96vw) !important;
    margin: 0 auto !important;
    gap: 10px !important;
  }

  /* card fluida: sostituisce i 300px fissi */
  .hero-btn-square{
    width: 100% !important;          /* prende la colonna */
    height: auto !important;         /* evita tagli */
    aspect-ratio: 1 / 1;             /* mantiene forma “quadrata” */
    padding: 12px !important;
  }

  /* testo più compatto per stare nel quadrato */
  .hero-btn-square span{
    font-size: clamp(14px, 3.2vw, 18px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center;
  }

  .hero-btn-square small{
    font-size: clamp(10px, 2.4vw, 13px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center;
  }
}
/* ===== Colore testo card hero: bianco ===== */
/* ===== Colore testo card hero: bianco ===== */
.df-tab.df-tab--card,
.df-tab.df-tab--card *{
  color: #ffffff !important;
}

/* ===== Riduzione titolo card su smartphone ===== */
@media (max-width: 576px){
  .df-tab.df-tab--card .df-tab__title{
    font-size: clamp(1rem, 3vw, 1.25rem);
    letter-spacing: 0.5px;
  }
}
/* =========================================
   FIX boxlettering2 – logo centrato e non tagliato
   ========================================= */

/* Contenitore */
.boxlettering2{
  width: 100%;
  text-align: center;
}

/* Immagine logo */
.boxlettering2 img.hero-logo{
  display: block !important;
  margin: 0 auto !important;      /* centratura PERFETTA */
  max-width: 360px;               /* leggermente più piccolo su PC */
  width: 85vw;                    /* fluido su mobile */
  height: auto !important;
}
/* =========================================
   GLOBAL BLUE → NAVY OVERRIDE
   ========================================= */

/* Background blu / glass */
.bg-primary,
.btn-primary,
.btn-secondary,
.service .nav .nav-link.active,
.team-item .team-overlay,
.testimonial-carousel .owl-item.center .testimonial-text,
.testimonial-carousel .owl-dot.active{
  background-color: var(--navy-900) !important;
}

/* Hover / secondary */
.btn-primary:hover,
.btn-secondary:hover,
.footer .btn.btn-social:hover{
  background-color: var(--navy-800) !important;
}


/* Bordi blu */
.border-primary,
.testimonial-carousel .owl-dot.active{
  border-color: var(--navy-900) !important;
}
/* =========================================
   TOPBAR / NAVBAR – FORCE NAVY
   ========================================= */

/* sfondo navbar */
.navbar,
.navbar-light,
.navbar-light.sticky-top{
  background-color: var(--navy-900) !important;
}

/* link */
.navbar-light .navbar-nav .nav-link{
  color: #ffffff !important;
}

/* hover / active */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active{
  color: #ffffff !important;
}

/* dropdown menu */
.navbar .dropdown-menu{
  background-color: var(--navy-900) !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* voci dropdown */
.navbar .dropdown-menu .dropdown-item{
  color: #ffffff !important;
}

.navbar .dropdown-menu .dropdown-item:hover{
  background-color: var(--navy-800) !important;
  color: #ffffff !important;
}
/* =========================================
   TESTI – sempre bianchi sul tema navy
   ========================================= */

body,
p,
h1, h2, h3, h4, h5, h6,
span,
small,
.card,
.card *{
  color: #ffffff;
}
/* =========================================
   SECTIONS – NAVY COERENTE
   ========================================= */

/* Section servizi */
.df-services{
  background: #000026 !important;   /* navy uniforme */
  border: 1px solid rgba(255,255,255,0.06);
}
/* =========================================
   DF SERVICES – didascalia
   ========================================= */
.df-services__caption{
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.55rem;          /* molto piccola */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;         /* UNA SOLA RIGA */
}
/* =========================================
   TITOLI GLOBALI – marrone brand
   ========================================= */

h1, h2, h3, h4, h6,
.section-title,
.svc-detail-title,
.svc-card__title,
.df-tab__title{
  color: #502600 !important;
}
h1 .text-primary,
h2 .text-primary,
h3 .text-primary,
h4 .text-primary{
  color: #502600 !important;
}
/* =========================================
   LOGO LETTERING – tinta marrone brand
   ========================================= */

img.lettering{
  filter: brightness(0) saturate(100%)
          invert(18%)
          sepia(68%)
          saturate(760%)
          hue-rotate(-10deg)
          brightness(75%)
          contrast(102%);
}

#svcDetailTitle,
.svc-detail-title{
  color: #502600 !important;
}
/* =========================================
   HERO – 2 pulsanti glass (hero-btn-square)
   ========================================= */

.hero-btn-square{
  /* glass */
  background: rgba(0, 3, 61, 0.28) !important;           /* navy trasparente */
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  /* depth */
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  /* qualità visiva */
  text-decoration: none;
}

.hero-btn-square:hover{
  background: rgba(0, 3, 61, 0.35) !important;
  border-color: rgba(255,255,255,0.24) !important;
}


/* opzionale: rende più stabile il blur su alcuni browser */
.hero-tiles{
  isolation: isolate;
}


/* hover: più “vetro”, un filo più luce */
.hero-btn-square:hover{
  background: rgba(0, 3, 61, 0.20) !important;
  border-color: rgba(255,255,255,0.22) !important;
  transform: translateY(-4px);
}

/* opzionale: rende più stabile il blur su alcuni browser */
.hero-tiles{
  isolation: isolate;
}

/* =========================================
   TABLET – riduzione spazio carousel → about
   ========================================= */
@media (min-width: 768px) and (max-width: 991px){

  /* carousel */
  .carousel,
  .carousel-inner,
  .carousel-item{
    margin-bottom: 0 !important;
  }

  /* sezione about */
  .about,
  .about-section,
  #about{
    padding-top: 2rem !important;   /* riduci (default spesso 5–6rem) */
    margin-top: 0 !important;
  }
}

/* Desktop: effetto hero pieno */
#header-carousel .carousel-item {
  height: 100vh;
}

#header-carousel .hero-carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px){
  #header-carousel .carousel-inner .carousel-item .hero-carousel-img{
    height: auto !important;
    object-fit: contain !important;
    max-height: 75vh;
  }
}
/* Mobile: immagine INTERA (no crop) + altezza non forzata */
@media (max-width: 768px){
  #header-carousel .carousel-item{
    height: auto !important;        /* <-- elimina la causa #1 del crop */
    min-height: 0 !important;
  }

  #header-carousel .carousel-caption{
    min-height: 0 !important;       /* <-- elimina la causa #2 del crop */
  }

  #header-carousel .hero-carousel-img{
    height: auto !important;        /* <-- l'immagine decide la sua altezza */
    max-height: 75vh;               /* <-- limita l’altezza su mobile */
    object-fit: contain !important; /* <-- zero crop */
    background: #000;               /* bande se serve */
  }
}

/* Desktop: ok hero pieno */
#header-carousel .carousel-item {
  height: 100vh;
  position: relative;
}

#header-carousel .hero-carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: altezza guidata dall'immagine + caption in overlay */
@media (max-width: 768px){

  /* 🔥 elimina qualunque altezza forzata che crea il "vuoto sotto" */
  #header-carousel,
  #header-carousel .carousel-inner,
  #header-carousel .carousel-item,
  #header-carousel .carousel-caption{
    height: auto !important;
    min-height: 0 !important;
  }

  /* l'immagine decide l'altezza, zero crop */
  #header-carousel .hero-carousel-img{
    height: auto !important;
    width: 100%;
    max-height: 75vh;               /* regola qui se la vuoi più alta/bassa */
    object-fit: contain !important; /* immagine intera */
    background: #000;               /* opzionale */
  }

  /* caption sopra l'immagine, senza creare spazio */
  #header-carousel .carousel-item{
    position: relative;
  }

  #header-carousel .carousel-caption{
    position: absolute !important;
    inset: 0;                       /* top/right/bottom/left:0 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.5rem 1rem;
  }
}
/* =========================================================
   HEADER CAROUSEL – FIX DEFINITIVO (NO CROP MOBILE, NO COLLASSO)
   Incolla a FINE FILE
   ========================================================= */

/* Desktop: hero pieno */
#header-carousel .carousel-item{
  height: 100vh;
  position: relative;
}
#header-carousel .hero-carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: altezza data dall'immagine (quindi niente vuoto e niente collasso) */
@media (max-width: 768px){

  /* IMPORTANTE: l’immagine NON deve essere assoluta su mobile */
  #header-carousel .carousel-item img,
  #header-carousel .hero-carousel-img{
    position: static !important;
  }

  /* Il contenitore deve “abbracciare” l’immagine */
  #header-carousel .carousel-item{
    height: auto !important;
    min-height: 0 !important;
  }

  /* Immagine intera, zero crop */
  #header-carousel .hero-carousel-img{
    width: 100%;
    height: auto !important;
    max-height: 75vh;               /* cambia se la vuoi più alta */
    object-fit: contain !important;
    background: #000;               /* opzionale */
  }

  /* Caption overlay sopra l’immagine, senza influire sull’altezza */
  #header-carousel .carousel-caption{
    position: absolute !important;
    inset: 0;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem;
  }
}
/* =====================================================
   HEADER CAROUSEL – MOBILE VERTICALE FULL
   ===================================================== */

/* Desktop invariato */
#header-carousel .carousel-item{
  height: 100vh;
  position: relative;
}

#header-carousel .hero-carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================
   MOBILE: HERO VERTICALE
   ====================== */
@media (max-width: 768px){

  /* Il carosello diventa verticale */
  #header-carousel,
  #header-carousel .carousel-inner,
  #header-carousel .carousel-item{
    height: 90vh !important;     /* 🔥 altezza verticale */
    min-height: 90vh !important;
  }

  /* L’immagine NON è assoluta e riempie in verticale */
  #header-carousel .hero-carousel-img{
    height: 100% !important;
    width: 100%;
    object-fit: contain !important; /* immagine intera */
    position: static !important;
    background: #000;
  }

  /* Caption in overlay, centrata */
  #header-carousel .carousel-caption{
    position: absolute !important;
    inset: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    padding: 2rem 1rem;
    z-index: 5;
  }
}
/* ==============================
   MOBILE: NO CROP GUARANTEED
   ============================== */
   @media (max-width: 768px){

    /* box verticale */
    #header-carousel,
    #header-carousel .carousel-inner,
    #header-carousel .carousel-item{
      height: 90vh !important;
      min-height: 90vh !important;
    }
  
    /* il contenitore centra davvero l'immagine */
    #header-carousel .carousel-item{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: visible !important; /* evita tagli da overflow hidden */
      position: relative;
      background: #000; /* opzionale */
    }
  
    /* immagine: NON può croppare */
    #header-carousel .carousel-item img,
    #header-carousel .hero-carousel-img{
      position: static !important;
      width: auto !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: 90vh !important;  /* deve stare dentro il box */
      object-fit: unset !important; /* elimina cover/contain ereditati */
      display: block;
    }
  
    /* caption overlay sopra, senza influire */
    #header-carousel .carousel-caption{
      position: absolute !important;
      inset: 0;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 2rem 1rem;
      z-index: 5;
    }
  }
  @media (max-width: 768px){
    #header-carousel { overflow: visible !important; }
  }
  @media (max-width: 768px){

    /* altezza verticale hero */
    #header-carousel,
    #header-carousel .carousel-inner,
    #header-carousel .carousel-item{
      height: 90vh !important;
      min-height: 90vh !important;
    }
  
    /* base */
    #header-carousel .carousel-item{
      position: relative;
      overflow: hidden; /* serve per il blur dietro */
      background: #000;
    }
  
    /* SFONDO: stessa immagine, ma cover + blur per riempire */
    #header-carousel .carousel-item::before{
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("img/carousel-bg-1.png");
      background-size: cover;
      background-position: center;
      filter: blur(18px);
      transform: scale(1.12); /* evita bordi dopo blur */
      opacity: 0.55;
      z-index: 1;
    }
  
    /* IMMAGINE DAVANTI: intera, non croppata */
    #header-carousel .hero-carousel-img{
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100% !important;
      object-fit: contain !important;  /* immagine intera */
      display: block;
    }
  
    /* CONTENUTI (logo + bottoni) sopra tutto */
    #header-carousel .carousel-caption{
      position: absolute !important;
      inset: 0;
      z-index: 3;
    }
  }
  /* =====================================================
   HEADER CAROUSEL – HEIGHT CONTROL FINALE
   ===================================================== */

/* ===== DESKTOP / TABLET ===== */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item{
  height: 100vh;
  max-height: 100vh;   /* 🔒 non cresce oltre */
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

  /* hero un po’ più basso */
  #header-carousel,
  #header-carousel .carousel-inner,
  #header-carousel .carousel-item{
    height: 80vh !important;      /* 🔽 ridotto */
    min-height: 80vh !important;
    max-height: 80vh !important;
  }

  #header-carousel .carousel-item{
    position: relative;
    overflow: hidden;
    background: #000;
  }

  /* sfondo blur che riempie */
  #header-carousel .carousel-item::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("img/carousel-bg-1.png");
    background-size: cover;
    background-position: center;
    filter: blur(18px);
    transform: scale(1.12);
    opacity: 0.55;
    z-index: 1;
  }

  /* immagine principale intera */
  #header-carousel .hero-carousel-img{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* contenuti sopra */
  #header-carousel .carousel-caption{
    position: absolute !important;
    inset: 0;
    z-index: 3;
  }
}
/* ====== HERO IMG SWITCH (FORZATO) ====== */
#header-carousel .carousel-item img.hero-img-mobile{
  display: none !important;   /* desktop: nascondi mobile */
}

#header-carousel .carousel-item img.hero-img-desktop{
  display: block !important;  /* desktop: mostra desktop */
}

@media (max-width: 768px){
  #header-carousel .carousel-item img.hero-img-desktop{
    display: none !important;  /* mobile: nascondi desktop */
  }

  #header-carousel .carousel-item img.hero-img-mobile{
    display: block !important; /* mobile: mostra mobile */
  }
}

.hero-btn-square{
  width: 240px;
  height: 240px;
  border-radius: 18px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


@media (max-width: 576px){
  .hero-btn-square{
    width: 140px;
    height: 140px;
    padding: 10px;
  }

  .hero-btn-square span{
    font-size: 0.75rem;
  }

  .hero-btn-square small{
    font-size: 0.6rem;
  }
}
/* ===== HERO BUTTONS FIX DEFINITIVO ===== */

.hero-buttons-wrapper{
  max-width: 820px !important;
  margin: 20px auto 0 !important;
  row-gap: 18px !important;
}

.hero-buttons-wrapper > div{
  display: flex;
  justify-content: center;
}

.hero-btn-square{
  width: 240px !important;
  height: 240px !important;
  padding: 18px !important;
  border-radius: 18px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  text-align: center !important;
}

.hero-btn-square i{
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}

.hero-btn-square span{
  font-size: 1.15rem !important;
  line-height: 1.1 !important;
}

.hero-btn-square small{
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
}

/* mobile */
@media (max-width: 576px){
  .hero-buttons-wrapper{
    margin-top: 10px !important;
    row-gap: 14px !important;
  }

  .hero-btn-square{
    width: 150px !important;
    height: 150px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .hero-btn-square i{
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
  }

  .hero-btn-square span{
    font-size: 0.78rem !important;
  }

  .hero-btn-square small{
    font-size: 0.56rem !important;
    letter-spacing: .03em !important;
  }
}
@media (max-width: 576px){
  #header-carousel .carousel-caption{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: flex-start !important;
  }

  .boxlettering2{
    margin-bottom: 12px !important;
  }

  .hero-logo{
    max-width: 160px !important;
    width: 50vw !important;
    height: auto !important;
  }

  .hero-buttons-wrapper{
    margin-top: 10px !important;
  }
}
.hero-btn-square {
    width: 280px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.hero-btn-square {
    width: 100%;
    max-width: 280px;
    min-height: 180px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    border-radius: 28px;
}

@media (max-width: 768px) {
    .hero-btn-square {
        max-width: 270px;
        min-height: 170px;
    }
}
.prd-card-art .prd-thumb {
    width: 100%;
    height: 420px; /* più alta */
    object-fit: cover;
}

@media (max-width: 992px) {
    .prd-card-art .prd-thumb {
        height: 360px;
    }
}

@media (max-width: 576px) {
    .prd-card-art .prd-thumb {
        height: 360px;
    }
}