html {
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.footer-wrapper{
    max-width:1108px;
}

/* Fix per container su mobile */
.container,
.container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Fix per immagini su mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Fix per row Bootstrap su mobile */
.row {
    margin-left: 0;
    margin-right: 0;
}

.row > * {
    max-width: 100%;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-section {
        display: flex;
        height: auto !important;
        max-height: 600px;
        background-image: none !important; 
        padding: 0!important;
        padding-bottom:50px !important;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 16px;
        opacity: 1;
    }

        .hero-section.container {
            padding: 0 !important;
        }

    .navbar {
        width: 100% !important;
    }
}

/* Fix aggiuntivi per mobile */
@media (max-width: 768px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .product-card,
    .contacts-card,
    .order-card {
        max-width: 100% !important;
        margin-left: 5px;
        margin-right: 5px;
    }

    .products-section,
    .contacts-section,
    .order-content-section {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 1080px !important;
    }

    /* Header allineato con le card */
    .hero-section {
        padding: 2px 10px 0 10px !important; 
        margin:0 !important;
    }

    .hero-section .container,
    .hero-section .header-main,
    .hero-section .header-main > .container,
    .hero-section .navbar > .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .hero-section .navbar {
        margin: 0 !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom:50px !important;
    }
}