/* =========================================================
   1. SEZIONE — SERVIZI PRINCIPALI
   BLU / NERO
   ========================================================= */

.services-section {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            ellipse at 75% 10%,
            rgba(54, 61, 170, 0.35) 0%,
            rgba(30, 32, 90, 0.18) 25%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 20% 45%,
            rgba(35, 30, 110, 0.20),
            transparent 55%
        ),
        #03030d;
}


/* =========================================================
   GRIGLIA
   ========================================================= */

.services-section::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .14;

    background-image:
        linear-gradient(
            rgba(255,255,255,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.10) 1px,
            transparent 1px
        );

    background-size: 150px 150px;
}


/* =========================================================
   GLOW
   ========================================================= */

.services-section::after {

    content: "";

    position: absolute;

    width: 900px;
    height: 650px;

    top: -300px;
    right: -200px;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(70, 75, 190, .18),
            transparent 68%
        );

    filter: blur(60px);
}


/* =========================================================
   CONTAINER SERVIZI
   ========================================================= */

.services-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    padding-top: 70px;
    padding-bottom: 120px;
}


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

.services-header {

    max-width: 620px;

    margin: 0 auto 100px;

    text-align: center;
}

.services-header h1 {

    margin: 0 0 16px;

    color: #f5f5f5;

    font-size: clamp(42px, 5vw, 62px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -2px;
}

.services-header p {

    max-width: 580px;

    margin: 0 auto;

    color: #9493a3;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 300;
}


/* =========================================================
   SERVICE ROW
   ========================================================= */

.service-row {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 70px;

    margin-bottom: 100px;
}


/* =========================================================
   ALTERNANZA
   ========================================================= */

.service-row.reverse .service-content {
    order: 2;
}

.service-row.reverse .service-image {
    order: 1;
}


/* =========================================================
   SERVICE TEXT
   ========================================================= */

.service-content {

    min-width: 0;
}

.service-content h2 {

    margin: 0 0 12px;

    color: #f4f4f5;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: -.8px;
}

.service-description {

    max-width: 430px;

    margin: 0 0 28px;

    color: #91909d;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 300;
}


/* =========================================================
   ACCORDION
   ========================================================= */

.service-accordion {

    width: 100%;

    max-width: 450px;
}

.accordion-item-custom {

    border-bottom:
        1px solid rgba(255,255,255,.10);
}

.accordion-button-custom {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: #f3f3f5;

    font-family: inherit;

    font-size: 14px;

    font-weight: 400;

    text-align: left;

    cursor: pointer;

    transition:
        color .25s ease;
}

.accordion-button-custom:hover {

    color: #aaaef5;
}

.accordion-icon {

    color: #aaa;

    font-size: 18px;

    font-weight: 300;
}

.accordion-description {

    padding:
        0 30px 17px 0;

    color: #858491;

    font-size: 12px;

    line-height: 1.65;
}


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

.service-image {

    min-width: 0;

    width: 100%;
}

.image-frame {

    position: relative;

    width: 100%;

    padding: 6px;

    overflow: hidden;

    border:
        1px solid rgba(100,110,220,.30);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #182052,
            #101438 50%,
            #293276
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        0 0 40px rgba(50,60,180,.12);
}

.image-frame img {

    display: block;

    width: 100%;

    aspect-ratio:
        1.35 / 1;

    object-fit: cover;

    border-radius: 6px;
}


/* =========================================================
   SEPARATORE
   ========================================================= */

.services-section + .categories-section {

    border-top:
        1px solid rgba(255,255,255,.04);
}


/* =========================================================
   2. SEZIONE — CATEGORIE
   ========================================================= */

.categories-section {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            ellipse at 75% 20%,
            rgba(55,70,120,.42),
            rgba(25,35,80,.20) 32%,
            transparent 65%
        ),
        radial-gradient(
            ellipse at 10% 50%,
            rgba(25,45,100,.20),
            transparent 50%
        ),
        #11143A;
}


/* =========================================================
   GRIGLIA
   ========================================================= */

.categories-section::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.11) 1px,
            transparent 1px
        );

    background-size: 150px 150px;
}


/* =========================================================
   GLOW
   ========================================================= */

.categories-section::after {

    content: "";

    position: absolute;

    width: 850px;
    height: 600px;

    top: -250px;
    right: -150px;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(70,90,190,.20),
            transparent 68%
        );

    filter: blur(60px);
}


/* =========================================================
   CONTAINER CATEGORIE
   ========================================================= */

.categories-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    padding-top: 80px;

    padding-bottom: 120px;
}


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

.categories-header {

    max-width: 470px;

    margin-bottom: 65px;
}

.categories-header h2 {

    margin: 0 0 25px;

    color: #f2f3ed;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(42px, 4vw, 58px);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -1.5px;
}

.categories-header p {

    max-width: 430px;

    margin: 0;

    color: #9da398;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 300;
}


/* =========================================================
   GRID
   ========================================================= */

.categories-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 7px;
}


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

.category-card {

    position: relative;

    height: 128px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(140,155,210,.28);

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(25,35,70,.32),
            rgba(5,10,30,.38)
        );

    cursor: pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.category-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(130,150,255,.60);

    background:
        linear-gradient(
            145deg,
            rgba(45,55,110,.45),
            rgba(8,14,45,.50)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.30),
        0 0 25px rgba(70,90,200,.10);
}


/* =========================================================
   ICONA
   ========================================================= */

.category-icon {

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 9px;

    color: #8793c5;

    font-size: 23px;

    font-weight: 300;

    transition:
        color .3s ease,
        transform .3s ease;
}

.category-card:hover .category-icon {

    color: #aebaff;

    transform:
        translateY(-2px);
}


/* =========================================================
   NOME
   ========================================================= */

.category-name {

    padding: 0 8px;

    color: #f0f1ed;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 400;

    text-align: center;
}


/* =========================================================
   =========================================================
   SERVICE MODAL
   BLU / BIANCO
   =========================================================
   ========================================================= */

.service-modal {

    --modal-blue: #3949ab;

    --modal-blue-dark: #283593;

    --modal-blue-light: #eef1ff;

    --modal-blue-soft: #f5f7ff;

    --modal-text: #171a25;

    --modal-text-light: #6d7280;

    --modal-border: #e1e5f2;

    z-index: 1055;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.modal-backdrop.show {

    background-color:
        #050814;

    opacity:
        .72;

    backdrop-filter:
        blur(5px);
}


/* =========================================================
   DIALOG
   ========================================================= */

.service-modal .modal-dialog {

    width:
        calc(100% - 30px);

    max-width:
        820px;

    margin:
        30px auto;
}


/* =========================================================
   MODAL CONTENT
   ========================================================= */

.service-modal .modal-content {

    overflow: hidden;

    border:
        1px solid #d9def0;

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        var(--modal-text);

    box-shadow:
        0 30px 90px rgba(10,20,60,.30),
        0 0 50px rgba(50,70,180,.10);
}


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

.service-modal .modal-header {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        17px 30px;

    border-bottom:
        1px solid #e6e9f4;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #f8f9ff
        );
}


/* =========================================================
   LABEL
   ========================================================= */

.service-modal-label {

    color:
        var(--modal-blue);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


/* =========================================================
   CLOSE
   ========================================================= */

.service-modal .btn-close {

    width:
        36px;

    height:
        36px;

    margin:
        0;

    padding:
        0;

    border:
        1px solid #dce1f0;

    border-radius:
        50%;

    opacity:
        .70;

    background-color:
        #ffffff;

    transition:
        opacity .25s ease,
        transform .3s ease,
        background-color .25s ease,
        border-color .25s ease;
}


.service-modal .btn-close:hover {

    opacity:
        1;

    transform:
        rotate(90deg);

    border-color:
        #b9c2e8;

    background-color:
        #eef1ff;
}


/* =========================================================
   BODY
   ========================================================= */

.service-modal .modal-body {

    padding:
        40px 55px 45px;

    background:
        #ffffff;

    text-align:
        center;
}


/* =========================================================
   ICONA MODAL
   ========================================================= */

.service-modal-icon {

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 18px;

    border:
        1px solid #ccd4f2;

    border-radius:
        50%;

    color:
        var(--modal-blue);

    background:
        linear-gradient(
            145deg,
            #f7f9ff,
            #edf1ff
        );

    box-shadow:
        0 10px 30px rgba(57,73,171,.12);

    font-size:
        31px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.service-modal-eyebrow {

    margin-bottom:
        7px;

    color:
        var(--modal-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;
}


/* =========================================================
   TITOLO
   ========================================================= */

.service-modal .modal-body h2 {

    margin:
        0;

    color:
        var(--modal-text);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(32px, 5vw, 44px);

    font-weight:
        400;

    line-height:
        1.15;

    letter-spacing:
        -.8px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.service-modal-divider {

    width:
        100%;

    max-width:
        270px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        18px auto 20px;
}


.service-modal-divider span {

    flex:
        1;

    height:
        1px;

    background:
        #dce1f0;
}


.service-modal-divider i {

    color:
        var(--modal-blue);

    font-size:
        8px;

    transform:
        rotate(45deg);
}


/* =========================================================
   DESCRIZIONE
   ========================================================= */

.service-modal-description {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--modal-text-light);

    font-size:
        14px;

    line-height:
        1.75;

    font-weight:
        300;
}


/* =========================================================
   =========================================================
   GALLERIA
   =========================================================
   ========================================================= */

.service-gallery {

    width:
        100%;

    max-width:
        700px;

    margin:
        35px auto 0;
}


/* =========================================================
   FOTO PRINCIPALE
   ========================================================= */

.service-gallery-main {

    position:
        relative;

    width:
        100%;

    height:
        430px;

    overflow:
        hidden;

    border:
        1px solid #d9dff0;

    border-radius:
        12px;

    background:
        #f4f6ff;

    box-shadow:
        0 12px 35px rgba(30,45,100,.12);
}


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

.service-gallery-main img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    background:
        #f8f9ff;

    opacity:
        1;

    transition:
        opacity .2s ease;
}


/* =========================================================
   =========================================================
   THUMBNAILS
   =========================================================
   ========================================================= */

.service-gallery-thumbnails {

    display:
        flex;

    gap:
        10px;

    width:
        100%;

    margin-top:
        13px;

    padding:
        2px 2px 8px;

    overflow-x:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        #aeb9e5 transparent;
}


/* =========================================================
   THUMBNAIL
   ========================================================= */

.service-gallery-thumbnail {

    flex:
        0 0 105px;

    width:
        105px;

    height:
        78px;

    padding:
        0;

    overflow:
        hidden;

    border:
        2px solid transparent;

    border-radius:
        8px;

    background:
        #f0f3ff;

    opacity:
        .60;

    cursor:
        pointer;

    transition:
        opacity .25s ease,
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   IMG THUMBNAIL
   ========================================================= */

.service-gallery-thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   HOVER
   ========================================================= */

.service-gallery-thumbnail:hover {

    opacity:
        1;

    transform:
        translateY(-2px);

    border-color:
        #b8c2eb;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.service-gallery-thumbnail.active {

    opacity:
        1;

    border-color:
        var(--modal-blue);

    box-shadow:
        0 4px 15px rgba(57,73,171,.22);
}


/* =========================================================
   FOCUS
   ========================================================= */

.service-gallery-thumbnail:focus-visible {

    outline:
        2px solid
        var(--modal-blue);

    outline-offset:
        2px;
}


/* =========================================================
   =========================================================
   FRECCE GALLERIA
   =========================================================
   ========================================================= */

.gallery-arrow {

    position:
        absolute;

    top:
        50%;

    z-index:
        5;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid rgba(255,255,255,.75);

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(35,50,130,.65);

    backdrop-filter:
        blur(6px);

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease,
        border-color .25s ease;
}


.gallery-arrow:hover {

    background:
        rgba(57,73,171,.95);

    border-color:
        #ffffff;

    transform:
        translateY(-50%) scale(1.08);
}


.gallery-arrow i {

    font-size:
        18px;
}


.gallery-arrow-prev {

    left:
        15px;
}


.gallery-arrow-next {

    right:
        15px;
}


/* =========================================================
   ZOOM HINT
   ========================================================= */

.gallery-zoom-hint {

    position:
        absolute;

    right:
        15px;

    bottom:
        15px;

    z-index:
        5;

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(35,50,130,.70);

    backdrop-filter:
        blur(5px);

    font-size:
        14px;

    pointer-events:
        none;
}


/* =========================================================
   CURSORE FOTO
   ========================================================= */

.service-main-image {

    cursor:
        zoom-in;
}


/* =========================================================
   =========================================================
   FEATURES
   =========================================================
   ========================================================= */

.service-features {

    width:
        100%;

    max-width:
        680px;

    margin:
        40px auto 0;
}


/* =========================================================
   TITOLO FEATURES
   ========================================================= */

.service-features-title {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        18px;
}


.service-features-title span {

    flex:
        1;

    height:
        1px;

    background:
        #dce1f0;
}


.service-features-title h3 {

    margin:
        0;

    color:
        var(--modal-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =========================================================
   FEATURES GRID
   ========================================================= */

.service-features-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        9px;

    text-align:
        left;
}


/* =========================================================
   FEATURE
   ========================================================= */

.service-feature {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 12px;

    border:
        1px solid #e0e5f3;

    border-radius:
        8px;

    color:
        #626879;

    background:
        #fafbff;

    font-size:
        12px;

    line-height:
        1.4;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.service-feature:hover {

    transform:
        translateY(-2px);

    border-color:
        #c1caea;

    background:
        #f4f6ff;

    box-shadow:
        0 5px 18px rgba(50,65,150,.08);
}


/* =========================================================
   CHECK
   ========================================================= */

.service-feature > i {

    flex:
        0 0 26px;

    width:
        26px;

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--modal-blue);

    background:
        var(--modal-blue-light);

    font-size:
        14px;
}


/* =========================================================
   =========================================================
   PREZZO
   =========================================================
   ========================================================= */

.service-price {

    width:
        fit-content;

    display:
        flex;

    align-items:
        baseline;

    justify-content:
        center;

    gap:
        10px;

    margin:
        30px auto 0;

    padding:
        13px 20px;

    border:
        1px solid #dce2f2;

    border-radius:
        8px;

    background:
        #f8f9ff;
}


.service-price span {

    color:
        #858a98;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.service-price strong {

    color:
        var(--modal-blue);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        22px;

    font-weight:
        500;
}


/* =========================================================
   =========================================================
   NOTA
   =========================================================
   ========================================================= */

.service-modal-note {

    max-width:
        680px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    margin:
        27px auto 0;

    padding:
        12px 14px;

    border-left:
        2px solid
        #6674c4;

    color:
        #858a98;

    background:
        #f8f9ff;

    font-size:
        11px;

    line-height:
        1.6;

    text-align:
        left;
}


.service-modal-note i {

    flex:
        0 0 auto;

    margin-top:
        2px;

    color:
        var(--modal-blue);

    font-size:
        14px;
}


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

.service-modal .modal-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 30px;

    border-top:
        1px solid #e3e7f2;

    background:
        linear-gradient(
            90deg,
            #f9faff,
            #f4f6ff
        );
}


/* =========================================================
   BOTTONE CHIUDI
   ========================================================= */

.service-modal-close {

    padding:
        11px 20px;

    border:
        1px solid #d5dbea;

    border-radius:
        7px;

    color:
        #687080;

    background:
        #ffffff;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        11px;

    cursor:
        pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.service-modal-close:hover {

    color:
        #27315e;

    border-color:
        #b9c3e7;

    background:
        #f0f3ff;

    transform:
        translateY(-1px);
}


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

.service-modal-contact {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        12px 21px;

    border:
        1px solid
        var(--modal-blue);

    border-radius:
        7px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #4a5bd5,
            #3949ab
        );

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.service-modal-contact:hover {

    color:
        #ffffff;

    border-color:
        var(--modal-blue-dark);

    background:
        linear-gradient(
            135deg,
            #3949ab,
            #283593
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 25px
        rgba(57,73,171,.28);
}


.service-modal-contact i {

    font-size:
        13px;

    transition:
        transform .25s ease;
}


.service-modal-contact:hover i {

    transform:
        translateX(3px);
}


/* =========================================================
   =========================================================
   ANIMAZIONE MODAL
   =========================================================
   ========================================================= */

.service-modal.fade .modal-dialog {

    transform:
        translateY(20px)
        scale(.98);

    transition:
        transform .3s ease;
}


.service-modal.show .modal-dialog {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   =========================================================
   LIGHTBOX
   =========================================================
   ========================================================= */

.service-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px;

    background:
        rgba(5,8,20,.95);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


/* =========================================================
   LIGHTBOX ACTIVE
   ========================================================= */

.service-lightbox.active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   CONTAINER FOTO
   ========================================================= */

.lightbox-image-container {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* =========================================================
   FOTO LIGHTBOX
   ========================================================= */

.lightbox-image-container img {

    max-width:
        90vw;

    max-height:
        82vh;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border-radius:
        5px;

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.60);

    user-select:
        none;

    transition:
        opacity .2s ease;
}


/* =========================================================
   CHIUSURA LIGHTBOX
   ========================================================= */

.lightbox-close {

    position:
        absolute;

    top:
        22px;

    right:
        25px;

    z-index:
        10;

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid rgba(150,165,230,.40);

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(55,70,160,.35);

    cursor:
        pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.lightbox-close:hover {

    background:
        rgba(70,90,200,.65);

    border-color:
        rgba(190,200,255,.75);

    transform:
        rotate(90deg);
}


.lightbox-close i {

    font-size:
        16px;
}


/* =========================================================
   FRECCE LIGHTBOX
   ========================================================= */

.lightbox-arrow {

    position:
        absolute;

    top:
        50%;

    z-index:
        10;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(150,165,230,.40);

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(55,70,160,.35);

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.lightbox-arrow:hover {

    background:
        rgba(70,90,200,.65);

    border-color:
        rgba(190,200,255,.75);

    transform:
        translateY(-50%) scale(1.08);
}


.lightbox-arrow i {

    font-size:
        21px;
}


.lightbox-prev {

    left:
        25px;
}


.lightbox-next {

    right:
        25px;
}


/* =========================================================
   CONTATORE LIGHTBOX
   ========================================================= */

.lightbox-counter {

    position:
        absolute;

    bottom:
        22px;

    left:
        50%;

    z-index:
        10;

    padding:
        7px 14px;

    border:
        1px solid
        rgba(150,165,230,.30);

    border-radius:
        20px;

    color:
        rgba(255,255,255,.90);

    background:
        rgba(25,35,100,.50);

    backdrop-filter:
        blur(5px);

    font-size:
        11px;

    letter-spacing:
        1px;

    transform:
        translateX(-50%);
}


/* =========================================================
   =========================================================
   RESPONSIVE TABLET
   =========================================================
   ========================================================= */

@media (max-width: 1199px) {

    .services-container,
    .categories-container {

        padding-left:
            35px;

        padding-right:
            35px;
    }

    .categories-grid {

        grid-template-columns:
            repeat(4, 1fr);
    }
}


/* =========================================================
   =========================================================
   RESPONSIVE MOBILE
   =========================================================
   ========================================================= */

@media (max-width: 767px) {

    .services-container,
    .categories-container {

        padding-left:
            22px;

        padding-right:
            22px;

        padding-top:
            55px;

        padding-bottom:
            80px;
    }


    /* =====================================================
       SERVIZI
       ===================================================== */

    .services-header {

        margin-bottom:
            65px;
    }

    .services-header h1 {

        font-size:
            42px;

        letter-spacing:
            -1px;
    }

    .services-header p {

        font-size:
            13px;
    }


    .service-row,
    .service-row.reverse {

        display:
            flex;

        flex-direction:
            column;

        gap:
            35px;

        margin-bottom:
            75px;
    }


    .service-row.reverse .service-content,
    .service-row.reverse .service-image {

        order:
            initial;
    }


    .service-content h2 {

        font-size:
            25px;
    }


    .service-image {

        width:
            100%;
    }


    /* =====================================================
       CATEGORIE
       ===================================================== */

    .categories-header {

        margin-bottom:
            45px;
    }

    .categories-header h2 {

        font-size:
            42px;

        letter-spacing:
            -1px;
    }


    .categories-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            6px;
    }


    .category-card {

        height:
            115px;
    }


    .category-icon {

        font-size:
            21px;
    }


    .category-name {

        font-size:
            12px;
    }


    /* =====================================================
       MODAL
       ===================================================== */

    .service-modal .modal-dialog {

        width:
            calc(100% - 16px);

        margin:
            8px auto;
    }


    .service-modal .modal-header {

        min-height:
            60px;

        padding:
            14px 18px;
    }


    .service-modal .modal-body {

        padding:
            30px 18px 35px;
    }


    .service-modal-icon {

        width:
            68px;

        height:
            68px;

        font-size:
            27px;
    }


    .service-modal .modal-body h2 {

        font-size:
            31px;
    }


    .service-modal-description {

        font-size:
            12px;
    }


    /* =====================================================
       GALLERY
       ===================================================== */

    .service-gallery {

        margin-top:
            28px;
    }


    .service-gallery-main {

        height:
            320px;
    }


    .service-gallery-thumbnail {

        flex:
            0 0 88px;

        width:
            88px;

        height:
            67px;
    }


    /* =====================================================
       FRECCE GALLERY
       ===================================================== */

    .gallery-arrow {

        width:
            36px;

        height:
            36px;
    }


    .gallery-arrow-prev {

        left:
            10px;
    }


    .gallery-arrow-next {

        right:
            10px;
    }


    .gallery-zoom-hint {

        right:
            10px;

        bottom:
            10px;

        width:
            32px;

        height:
            32px;
    }


    /* =====================================================
       FEATURES
       ===================================================== */

    .service-features {

        margin-top:
            30px;
    }


    .service-features-grid {

        grid-template-columns:
            1fr;
    }


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

    .service-modal .modal-footer {

        flex-direction:
            column-reverse;

        align-items:
            stretch;

        padding:
            15px 18px;
    }


    .service-modal-close,
    .service-modal-contact {

        width:
            100%;

        min-height:
            44px;
    }


    /* =====================================================
       LIGHTBOX
       ===================================================== */

    .service-lightbox {

        padding:
            55px 15px;
    }


    .lightbox-image-container img {

        max-width:
            94vw;

        max-height:
            78vh;
    }


    .lightbox-close {

        top:
            12px;

        right:
            12px;

        width:
            40px;

        height:
            40px;
    }


    .lightbox-arrow {

        width:
            40px;

        height:
            40px;

        top:
            auto;

        bottom:
            25px;

        transform:
            none;
    }


    .lightbox-arrow:hover {

        transform:
            scale(1.08);
    }


    .lightbox-prev {

        left:
            25px;
    }


    .lightbox-next {

        right:
            25px;
    }


    .lightbox-counter {

        bottom:
            37px;
    }
}


/* =========================================================
   =========================================================
   MOBILE PICCOLO
   =========================================================
   ========================================================= */

@media (max-width: 400px) {

    .categories-grid {

        grid-template-columns:
            1fr;
    }


    .category-card {

        height:
            105px;
    }


    .service-modal .modal-body {

        padding:
            25px 14px 30px;
    }


    .service-modal .modal-body h2 {

        font-size:
            27px;
    }


    .service-gallery-main {

        height:
            270px;
    }


    .service-gallery-thumbnail {

        flex:
            0 0 78px;

        width:
            78px;

        height:
            59px;
    }
}