/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #0070c1;
    --primary-dark: #005a9c;

    --accent: #59ACF2;
    --accent-dark: #59ACF2;

    --dark: #17212b;
    --dark-soft: #263442;

    --light: #f5f8fb;
    --lighter: #f8fafc;

    --text: #343a40;
    --muted: #6c757d;

    --border: #e5eaf0;

    --header: #075985;

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --shadow-sm: 0 8px 25px rgba(23, 33, 43, .06);
    --shadow-md: 0 18px 45px rgba(23, 33, 43, .10);

    --transition: .25s ease;

}


/* =========================================================
   BASE
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    background: #fff;
}

img {
    max-width: 100%;
}

a {
    transition: var(--transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -.02em;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--header);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    transition: box-shadow var(--transition);
}

.site-header.scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.navbar {
    min-height: 82px;
}

.site-logo {
    width: 180px;
    height: auto;
}

.navbar-nav {
    gap: 4px;
}

.navbar .nav-link {
    padding: .65rem .8rem !important;
    color: rgba(255, 255, 255, .9);
    font-size: .92rem;
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--accent) !important;
}

.navbar .dropdown-toggle {
    color: rgba(255, 255, 255, .9);
}

.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle.show {
    color: var(--accent) !important;
}

.dropdown-menu {
    padding: .5rem;
    border: 0;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    padding: .7rem .85rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary);
    background: #eef7ff;
}
.dropdown-category {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--dark);
    font-weight: 700;
}

.dropdown-category:hover,
.dropdown-category:focus {
    color: var(--primary);
    background: #eef7ff;
}

.dropdown-subitems {
    position: relative;
    margin: 2px 0 4px 18px;
    padding-left: 20px;
    border-left: 2px solid #d9e3eb;
}

.dropdown-subitem {
    position: relative;
    padding: .5rem .85rem;
    color: var(--muted);
    font-size: .84rem;
}

.dropdown-subitem::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    transform: translateY(-50%);
}

.dropdown-subitem:hover,
.dropdown-subitem:focus {
    color: var(--primary);
    background: #eef7ff;
}

.navbar-toggler {
    border: 0;
    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.btn-primary-custom {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-weight: 600;
}

.btn-primary-custom:hover {
    color: #fff;
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

.site-header .btn-primary-custom {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--dark);
}

.site-header .btn-primary-custom:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--dark);
}

.btn-outline-custom {
    color: var(--dark);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
}

.btn-outline-custom:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* =========================================================
   COMMON
========================================================= */

.section-padding {
    padding: 100px 0;
}

.section-eyebrow {
    margin-bottom: 15px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.section-heading {
    gap: 30px;
    margin-bottom: 45px;
}

.section-heading h2 {
    max-width: 700px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.section-link span {
    transition: transform var(--transition);
}

.section-link:hover {
    color: var(--primary-dark);
}

.section-link:hover span {
    transform: translateX(4px);
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0 130px;
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(23, 33, 43, .92) 0%,
            rgba(23, 33, 43, .75) 45%,
            rgba(23, 33, 43, .25) 100%
        ),
        url('../img/SLIDE-confezionamento.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: 680px;
}

.hero-content h1 {
    margin-bottom: 25px;
    color: #fff;
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: .98;
}

.hero-content h1 span {
    color: var(--accent);
}

.hero-content .lead {
    max-width: 620px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, .9);
    font-size: 1.08rem;
    line-height: 1.8;
}

.hero-image-wrapper {
    position: relative;
    padding: 20px;
}

.hero-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    border: 6px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
}


.hero-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 135px;
    height: 135px;
    padding: 15px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background: var(--primary);
    box-shadow: var(--shadow-md);
}

.hero-badge strong {
    font-size: 2rem;
    line-height: 1;
}

.hero-badge span {
    margin-top: 5px;
    font-size: .72rem;
    font-weight: 600;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.service-card-image {
    overflow: hidden;
    height: 250px;
    background: var(--light);
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.service-card:hover .service-card-image img {
    transform: scale(1.04);
}

.service-card-content {
    position: relative;
    padding: 30px;
}

.service-number {
    margin-bottom: 15px;
    color: var(--primary);
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    font-weight: 700;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.45rem;
    font-weight: 700;
}

.service-card p {
    margin-bottom: 20px;
    color: var(--muted);
    line-height: 1.7;
}

.service-card a {
    display: inline-flex;
    gap: 8px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.service-card a span {
    transition: transform var(--transition);
}

.service-card:hover a span {
    transform: translateX(4px);
}


/* =========================================================
   VISION
========================================================= */

.vision-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: #fff;

    background:
        linear-gradient(
            120deg,
            rgba(0, 72, 126, .98),
            rgba(0, 112, 193, .93)
        ),
        url('../img/background.png') center / cover;
}

.vision-section h2 {
    max-width: 800px;
    margin-bottom: 25px;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
}

.vision-section h2 span {
    color: var(--accent);
}

.vision-section p {
    max-width: 700px;
    line-height: 1.8;
}

.vision-quote {
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

.quote-mark {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: .6;
}

.vision-quote p {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    padding: 70px 0;
    background: var(--light);
}

.cta-box {
    position: relative;
    overflow: hidden;
    padding: 55px 60px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.cta-box::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(97, 206, 112, .10);
    pointer-events: none;
}

.cta-box h2 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin-bottom: 12px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.cta-box p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.cta-box .section-eyebrow {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.cta-box .btn {
    position: relative;
    z-index: 1;
}


/* =========================================================
   BROCHURE
========================================================= */

.brochure-section {
    padding: 100px 0;
    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
}

.brochure-image {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}

.brochure-content {
    padding-left: 20px;
}

.brochure-content .section-eyebrow {
    color: var(--accent);
}

.brochure-content p {
    max-width: 560px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.8;
}

.brochure-content strong {
    color: #fff;
    font-weight: 700;
}

.brochure-content .btn-primary-custom {
    background: #fff;
    border-color: #fff;
    color: var(--primary);
}

.brochure-content .btn-primary-custom:hover {
    background: var(--lighter);
    border-color: var(--lighter);
    color: var(--primary-dark);
}


/* =========================================================
   PARTNERSHIP
========================================================= */

.partnership-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: #fff;

    background-image:
        linear-gradient(
            rgba(8, 35, 55, .86),
            rgba(0, 72, 126, .90)
        ),
        url('../img/partnership-background.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.partnership-section .section-eyebrow {
    color: var(--accent);
}

.partnership-section h2 {
    color: #fff;
}

.partnership-intro {
    max-width: 850px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .92);
    font-size: 1.05rem;
    line-height: 1.8;
}

.partnership-card {
    height: 100%;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

.partnership-card h3 {
    margin-bottom: 15px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

.partnership-card p {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    line-height: 1.75;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 70px 0 25px;
    color: rgba(255, 255, 255, .75);
    background: var(--dark);
}

.footer-logo {
    display: inline-block;
    margin-bottom: 25px;
}

.footer-logo img {
    width: 190px;
    filter: brightness(0) invert(1);
}

.footer-contact-list,
.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.footer-contact-list a {
    color: inherit;
    text-decoration: none;
}

.footer-contact-list a:hover {
    color: #fff;
}

.footer-icon {
    width: 22px;
    color: var(--accent);
    font-weight: 700;
}

.footer-title {
    margin-bottom: 20px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-links a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 3px;
}

.footer-brand-assets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.footer-brand-assets img {
    max-width: 145px;
    max-height: 55px;
    object-fit: contain;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.footer-social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .05);
    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.footer-social a:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
}

.footer-social i {
    font-size: 1.1rem;
}

.footer-divider {
    margin: 45px 0 20px;
    border-color: rgba(255, 255, 255, .12);
}

.footer-copyright {
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
}

.footer-download {
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.footer-download:hover {
    color: var(--accent);
}

/* =========================================================
   TITOLO PAGINA NOI
========================================================= */

.noi-page-title {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--primary);
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}


/* =========================================================
   INTRODUZIONE NOI
========================================================= */

.noi-intro-title {
    max-width: 650px;
    margin-bottom: 25px;
    color: var(--dark);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.15;
}

/* =========================================================
   PAGINA NOI
========================================================= */



.noi-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.noi-hero p.text-secondary {
    color: var(--text) !important;
}

.noi-highlight {
    max-width: 620px;
    padding: 25px 30px;
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.noi-highlight p {
    color: var(--dark);
    font-size: 1.1rem;
    line-height: 1.7;
}

.noi-line {
    display: block;
    width: 150px;
    height: auto;
}

.noi-main-image {
    position: relative;
    padding: 20px;
}

.noi-main-image::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 75%;
    border-radius: var(--radius-lg);
    background: rgba(0, 112, 193, .12);
}

.noi-main-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background: rgba(97, 206, 112, .18);
}

.noi-main-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   STORIA
========================================================= */

.noi-history {
    background: var(--light);
}

.noi-history-intro {
    max-width: 700px;
    color: var(--text);
}

.noi-timeline {
    max-width: 1050px;
    margin: 70px auto 0;
}

.noi-timeline-item {
    position: relative;
    margin-bottom: 45px;
}

.noi-timeline-item:last-child {
    margin-bottom: 0;
}

.noi-timeline-year {
    padding: 25px 35px 25px 0;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 800;
    text-align: end;
}

.noi-timeline-card {
    position: relative;
    height: 100%;
    padding: 30px 35px;
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.noi-timeline-card::before {
    content: '';
    position: absolute;
    top: 28px;
    left: -10px;
    width: 17px;
    height: 17px;
    border: 4px solid var(--primary);
    border-radius: 50%;
    background: #fff;
}

.noi-timeline-line {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    opacity: .7;
}

.noi-timeline-card ul {
    padding-left: 20px;
}

.noi-timeline-card li {
    margin-bottom: 13px;
    color: var(--text);
    line-height: 1.8;
}

.noi-timeline-card li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity .6s ease,
        transform .6s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   PAGINA CERTIFICAZIONI
========================================================= */

.certificazioni-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.certificazioni-page-title {
    max-width: 700px;
    margin-bottom: 25px;
    color: var(--primary);
    font-size: clamp(2.8rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1;
}

.certificazioni-hero-image {
    position: relative;
    padding: 20px;
}

.certificazioni-hero-image::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 70%;
    border-radius: var(--radius-lg);
    background: rgba(0, 112, 193, .10);
}

.certificazioni-hero-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   CERTIFICATION CARDS
========================================================= */

.certificazioni-list {
    background: var(--light);
}

.certification-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.certification-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.certification-image {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    padding: 30px;
    background: #fff;
}

.certification-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.certification-content {
    padding: 25px 30px 30px;
}

.certification-number {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.certification-content h3 {
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}


/* =========================================================
   DOCUMENTI
========================================================= */

.certificazioni-documents {
    background: #fff;
}

.certificazioni-documents h2 {
    
    margin-bottom: 20px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.document-download {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.document-download:hover {
    color: var(--text);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.document-download-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 12px;
}

.document-download-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-download-content {
    flex-grow: 1;
}

.document-download-label {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.document-download-content strong {
    display: block;
    font-size: 1rem;
}

.document-download-arrow {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.document-intro {
    color: var(--text);
    line-height: 1.8;
}

/* =========================================================
   DOCUMENTI - TITOLO
========================================================= */

.certificazioni-documents-title {
    margin-bottom: 20px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
}

/* =========================================================
   PAGINA CONTATTI
========================================================= */

.contatti-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.contatti-page-title {
    margin-bottom: 20px;
    color: var(--primary);
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
}

.contatti-intro {
    max-width: 700px;
    margin: 0 auto;
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   INFO CARD
========================================================= */

.contact-info-card {
    padding: 40px;
    border-radius: var(--radius-lg);
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--dark),
            var(--dark-soft)
        );
    box-shadow: var(--shadow-md);
}

.contact-info-card .section-eyebrow {
    color: var(--accent);
}

.contact-info-card h2 {
    margin-bottom: 40px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.contact-info-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    color: var(--accent);
    background: rgba(255, 255, 255, .06);
    font-size: 1.15rem;
}

.contact-info-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .5);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-info-item a {
    color: #fff;
    line-height: 1.7;
    text-decoration: none;
}

.contact-info-item a:hover {
    color: var(--accent);
}

.contact-info-cta {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.contact-info-cta p {
    margin-bottom: 15px;
    color: rgba(255, 255, 255, .75);
}


/* =========================================================
   FORM
========================================================= */

.contact-form-card {
    padding: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.contact-form-card h2 {
    margin-bottom: 15px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.contact-form-intro {
    margin-bottom: 30px;
    color: var(--text);
    line-height: 1.8;
}

.contact-form .form-label {
    margin-bottom: 8px;
    color: var(--dark);
    font-size: .85rem;
    font-weight: 700;
}

.contact-form .form-control {
    min-height: 52px;
    padding: .8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    background: var(--lighter);
    box-shadow: none;
}

.contact-form textarea.form-control {
    min-height: 160px;
    resize: vertical;
}

.contact-form .form-control:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(0, 112, 193, .10);
}

.contact-form .form-control::placeholder {
    color: #8a949e;
}


/* =========================================================
   MAP / SEDE
========================================================= */

.contact-map-section {
    padding: 0 0 100px;
    background: #fff;
}

.contact-map-card {
    padding: 45px 50px;
    border-radius: var(--radius-lg);
    background: var(--light);
}

.contact-map-card h2 {
    margin-bottom: 12px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.contact-map-card p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}

/* =========================================================
   PAGINA STAMPA DIGITALE PERSONALIZZATA
========================================================= */

.service-page-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.service-page-title {
    width: 100%;
    margin: 0 auto 25px;
    color: var(--dark);
    font-size: clamp(2.8rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.service-page-title span {
    color: var(--primary);
}

.service-page-intro {
    max-width: 650px;
    margin-bottom: 0;
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1.8;
}

.service-page-image {
    position: relative;
    padding: 20px;
}

.service-page-image::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 70%;
    border-radius: var(--radius-lg);
    background: rgba(0, 112, 193, .10);
}

.service-page-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   DIRECT MAILING
========================================================= */

.service-content-section {
    background: var(--light);
}

.service-feature-card {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.service-feature-card:hover {
    border-color: rgba(0, 112, 193, .25);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.service-feature-card h3 {
    margin: 0;
    color: var(--dark);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.5;
}

.service-section-intro {
    max-width: 850px;
    margin: 20px auto 0;
    color: var(--text);
    line-height: 1.8;
}

.service-feature-number {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
}



/* =========================================================
   ENTI PUBBLICI E PRIVATI
========================================================= */

.service-public-section {
    position: relative;
    overflow: hidden;
    color: #fff;

    background-image:
        linear-gradient(
            120deg,
            rgba(7, 35, 52, .94),
            rgba(0, 90, 156, .88)
        ),
        url('../img/bk-stampa-pers.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.service-public-section .section-eyebrow {
    color: var(--accent);
}

.service-public-section h2 {
    color: #fff;
}

.service-public-section .service-section-intro {
    color: rgba(255, 255, 255, .92);
}

.service-feature-card-light {
    background: #fff;
}


/* =========================================================
   CTA
========================================================= */

.service-cta {
    background: #fff;
}

.service-cta-box {
    padding: 50px 55px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            var(--dark),
            var(--dark-soft)
        );
    box-shadow: var(--shadow-md);
}

.service-cta-box .section-eyebrow {
    color: var(--accent);
}

.service-cta-box h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1;
}


/* =========================================================
   CLIENTI
========================================================= */

.service-clients {
    background: var(--lighter);
}

.client-logo-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.client-logo-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.client-logo-card img {
    width: 100%;
    max-width: 180px;
    max-height: 95px;
    object-fit: contain;
}

.clients-section-title {
    margin: 0;
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================================
   GESTIONE DOCUMENTI DIGITALI
========================================================= */

.document-management-intro {
    position: relative;
    overflow: hidden;
    color: #fff;

    background:
        linear-gradient(
            120deg,
            rgba(7, 35, 52, .92),
            rgba(0, 90, 156, .88)
        ),
        url('../img/bk.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.document-management-intro .service-section-intro {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .94);
}

.document-management-intro .service-section-intro:last-child {
    margin-bottom: 0;
}

.document-management-services {
    background: var(--light);
}

/* =========================================================
   PAGINA CONFEZIONAMENTO
========================================================= */

.confezionamento-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.confezionamento-hero .service-page-title {
    margin-bottom: 20px;
    color: var(--primary);
}

.confezionamento-services {
    background: var(--light);
}

.confezionamento-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.confezionamento-card:hover {
    border-color: rgba(0, 112, 193, .25);
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

.confezionamento-card-image {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--light);
}

.confezionamento-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.confezionamento-card:hover .confezionamento-card-image img {
    transform: scale(1.04);
}

.confezionamento-card-body {
    padding: 30px;
}

.confezionamento-card-body .section-eyebrow {
    margin-bottom: 10px;
}

.confezionamento-card-body h2 {
    margin-bottom: 15px;
    color: var(--dark);
    font-size: 1.7rem;
    font-weight: 700;
}

.confezionamento-card-body p {
    margin-bottom: 20px;
    color: var(--text);
    line-height: 1.8;
}

/* =========================================================
   PAGINA EDITORIA / CANCELLERIA
========================================================= */

.editoria-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.editoria-hero-image {
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
}

.editoria-hero-image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   SEZIONI
========================================================= */

.editoria-section {
    background: #fff;
}

.editoria-section-light {
    position: relative;
    overflow: hidden;
    color: #fff;

    background-image:
        linear-gradient(
            120deg,
            rgba(7, 35, 52, .80),
            rgba(0, 90, 156, .72)
        ),
        url('../img/Immagine-background-PRODOTTI-DI-CANCELLERIA-1.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   CONTENUTI
========================================================= */

.editoria-content h2 {
    max-width: 650px;
    margin-bottom: 18px;
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
}

.editoria-content p {
    max-width: 650px;
    margin-bottom: 20px;
    color: var(--text);
    line-height: 1.8;
}


/* =========================================================
   CONTENUTI SU BACKGROUND FOTOGRAFICO
========================================================= */

.editoria-section-light .section-eyebrow {
    color: var(--accent);
}

.editoria-section-light .editoria-content h2 {
    color: #fff;
}

.editoria-section-light .editoria-content p {
    color: rgba(255, 255, 255, .94);
}


/* =========================================================
   LINEA DECORATIVA
========================================================= */

.editoria-line {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin-bottom: 25px;
    opacity: .75;
}


/* =========================================================
   IMMAGINI
========================================================= */

.editoria-image {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.editoria-image img {
    display: block;
    width: 100%;
    transition: transform .5s ease;
}

.editoria-image:hover img {
    transform: scale(1.03);
}

/* =========================================================
   SEZIONE FINALE EDITORIA / CANCELLERIA
========================================================= */

.editoria-final-section {
    position: relative;
    overflow: hidden;
    color: #fff;

    background-image:
        linear-gradient(
            120deg,
            rgba(7, 35, 52, .82),
            rgba(0, 90, 156, .78)
        ),
        url('../img/editoria-cancelleria_ultima-foto.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.editoria-final-content {
    max-width: 750px;
}

.editoria-final-content p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .94);
    font-size: 1.1rem;
    line-height: 1.8;
}

.editoria-final-content .btn {
    margin-top: 10px;
}

/* =========================================================
   PAGINA IMBUSTAMENTO
========================================================= */

.imbustamento-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.imbustamento-hero-image {
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
}

.imbustamento-hero-image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   TIPOLOGIE
========================================================= */

.imbustamento-types {
    background: var(--light);
}

.imbustamento-type-card {
    padding: 35px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.imbustamento-type-card:hover {
    border-color: rgba(0, 112, 193, .25);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.imbustamento-type-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
}

.imbustamento-type-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.imbustamento-type-card h2 {
    margin-bottom: 20px;
    color: var(--dark);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.imbustamento-type-card ul {
    margin: 0;
    padding-left: 20px;
}

.imbustamento-type-card li {
    margin-bottom: 10px;
    color: var(--text);
    line-height: 1.6;
}

.imbustamento-type-card li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PERSONALIZZAZIONE BUSTA
========================================================= */

.imbustamento-personalizzazione {
    position: relative;
    overflow: hidden;
    color: #fff;

    background-image:
        linear-gradient(
            120deg,
            rgba(7, 35, 52, .86),
            rgba(0, 90, 156, .78)
        ),
        url('../img/Immagine-background-paragrafo-personalizzazione-della-busta2.png');

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.imbustamento-content {
    max-width: 700px;
}

.imbustamento-content .section-eyebrow {
    color: var(--accent);
}

.imbustamento-content h2 {
    margin-bottom: 25px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
}

.imbustamento-content p {
    margin: 0;
    color: rgba(255, 255, 255, .94);
    line-height: 1.8;
}

/* =========================================================
   PERSONALIZZAZIONE PRODOTTI IMBUSTATI
========================================================= */

.imbustamento-final-section {
    background: #fff;
}

.imbustamento-final-content h2 {
    max-width: 650px;
    margin-bottom: 25px;
    color: var(--primary);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
}

.imbustamento-final-content p {
    max-width: 650px;
    margin: 0;
    color: var(--text);
    line-height: 1.8;
}

.imbustamento-final-image {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.imbustamento-final-image img {
    display: block;
    width: 100%;
    transition: transform .5s ease;
}

.imbustamento-final-image:hover img {
    transform: scale(1.03);
}

/* =========================================================
   PAGINA COSMETICA
========================================================= */

.cosmetica-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.cosmetica-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
}

.cosmetica-hero-image img {
    display: block;
    width: 100%;
    max-width: 850px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   SEZIONI
========================================================= */

.cosmetica-section {
    background: #fff;
}

.cosmetica-section-light {
    background: var(--light);
}


/* =========================================================
   CONTENUTI
========================================================= */

.cosmetica-content {
    max-width: 650px;
}

.cosmetica-content h2 {
    margin-bottom: 25px;
    color: var(--primary);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
}

.cosmetica-content p {
    margin-bottom: 20px;
    color: var(--text);
    line-height: 1.8;
}


.cosmetica-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.cosmetica-image img {
    display: block;
    width: 80%;
    max-width: 600px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform .5s ease;
}

.cosmetica-image:hover img {
    transform: translateY(-15px);
}

/* =========================================================
   PAGINA FLOWPACK
========================================================= */

.flowpack-hero {
    background:
        linear-gradient(
            135deg,
            #f5f9fc 0%,
            #ffffff 60%,
            #f4faf7 100%
        );
}

.flowpack-hero-image {
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
}

.flowpack-hero-image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   CONTENUTO
========================================================= */

.flowpack-section {
    background: var(--light);
}

.flowpack-content {
    max-width: 650px;
}

.flowpack-content h2 {
    margin-bottom: 18px;
    color: var(--primary);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
}

.flowpack-content p {
    margin-bottom: 20px;
    color: var(--text);
    line-height: 1.8;
}

.flowpack-line {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin-bottom: 25px;
    opacity: .75;
}


/* =========================================================
   IMMAGINE
========================================================= */

.flowpack-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.flowpack-image img {
    display: block;
    width: 80%;
    max-width: 600px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform .5s ease;
}

.flowpack-image:hover img {
    transform: translateY(-15px);
}

/* =========================================================
   APPROFONDIMENTO FLOWPACK
========================================================= */

.flowpack-final-section {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    background-image: url('../img/immagine-orizz.png');
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}



.flowpack-final-content p {
    margin: 0;
    color: var(--dark);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.8;
}