/* Local Fonts */
@font-face {
    font-family: 'Exo';
    src: url('../fonts/exo-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/exo-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/exo-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/courier-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/courier-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/courier-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --primary-color: #ff6600;
    /* Orange from logo */
    --text-color: #000000;
    --bg-color: #f0f0f0;
    /* Changed to requested gray */
    --sidebar-bg: #ffffff;
    --sidebar-width: 400px;
    --gap: 2rem;
    --main-font: 'Courier Prime', Courier, monospace;
    /* Changed to local font */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--main-font);
    /* Uses variable */
    /* background-color: var(--bg-color); */
    color: var(--text-color);
    /* Remove flex from body as wrapper handles layout */
    display: block;
    min-height: 100vh;
}

/* Site Wrapper */
.site-wrapper {
    max-width: 1300px;
    margin: 60px auto;
    background-color: #fff;
    display: flex;
    min-height: 100vh;
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); */
    /* Optional subtle shadow */
}

h1 {
    /* font-family: 'Exo', sans-serif; */
    /* Keep titles in Exo? Or everything in Courier? User said "usa solo i font in locale sia per exo che per courier" which implies both are used. Usually titles -> Exo, Body -> Courier or vice versa. Let's keep h1 in Exo as per likely design intent for "premium" feel, or switch if user wanted everything courier. User said "imposta anche come font un courier new", implying body text. */
    font-size: 32px;
    font-weight: 700;
    text-align: left;
    /* max-width: 800px; */
    margin: 0 auto 20px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

h1 span {
    font-weight: 400;
}

#home h1 {
    max-width: 800px;
    text-wrap: balance;
}

p {
    line-height: 1.5rem;
    text-wrap: balance;
}

#chisiamo h2 {
    margin: 20px 0 20px 0;
}

/* Sidebar Styling */
aside {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Right align text */
    position: sticky;
    /* Changed from fixed */
    top: 60px;
    height: calc(90vh - 60px);
    flex-shrink: 0;
    z-index: 100;
    border-right: 1px solid #eee;
    scrollbar-color: transparent transparent;
    /* overflow-y: hidden; */
    /* Allow scrolling */
    scrollbar-width: thin;
}

aside::-webkit-scrollbar {
    width: 6px;
}

aside::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

aside .logo {
    margin-bottom: 2rem;
    /* Reduced from 3rem */
    width: 100%;
    text-align: right;
}

aside .logo img {
    max-width: 280px;
    height: auto;
}

nav ul {
    list-style: none;
    text-align: right;
}

nav ul li {
    margin-bottom: 0.8rem;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    /* font-family: 'Exo', sans-serif; */
    /* Nav usually looks better in Exo */
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: capitalize;
    transition: color 0.3s ease;
    letter-spacing: 1px;
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* Social Icons */
.social-icons {
    margin-top: 2rem;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 10px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: #ddd;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 1.2rem;
}

.social-icons a.fa-facebook-f {
    background-color: #3b5998;
}

.social-icons a.fa-vimeo-v {
    background-color: #1ab7ea;
}

.social-icons a.fa-linkedin-in {
    background-color: #0077b5;
}

.social-icons a:hover {
    opacity: 0.8;
}

/* Partners Grid */
.partners-grid {
    margin-top: 0;
    /* Push to bottom */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 2 columns */
    gap: 10px;
    width: 100%;
    max-width: 100%;
    /* margin-top: 2rem; Removed as hr provides spacing */
    /* Constrain width */
}

.partner-logo {
    width: 100%;
    height: auto;
    /* Let content dictate height */
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #e0e0e0; Removed placeholder bg */
    border-radius: 2px;
}

.partner-logo img {
    max-width: 100%;
    max-height: 70px;
    /* Constrain height */
    width: auto;
    object-fit: contain;
    opacity: 0.8;
    /* Increased visibility */
    transition: opacity 0.3s;
}

.partner-logo img:hover {
    opacity: 1;
}


/* Main Content Styling */
main {
    /* margin-left removed as flex handles it */
    padding: 0 2rem;
    flex-grow: 1;
    background-color: #fff;
    /* width: calc(100% - var(--sidebar-width)); REMOVED */
    /* max-width: 1200px; REMOVED or kept as inner max */
}

hr {
    border: none;
    height: 1px;
    background-color: #dbdbdb;
    width: 100%;
    margin: 2rem 0;
}

.video-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Video Card Styling */
.video-card {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #000;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
    aspect-ratio: 16 / 9;

}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.video-thumbnail {
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.video-card:hover .video-thumbnail {
    opacity: 0.4;
}

/* Video Info Overlay */
.video-info {
    position: absolute;
    bottom: 20%;
    left: 5%;
    right: 15%;
    color: white;
    pointer-events: none;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.video-title {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 0.5rem;
    text-align: center;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.3);
    /* Slightly darken text area */
    display: inline-block;
    padding: 5px 15px;
    /* font-family: 'Exo', sans-serif !important; */
    /* Force Exo for titles */
}

.video-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0.5rem;
    text-align: center;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    /* font-family: 'Exo', sans-serif !important; */
}


/* Minimal Play Button (Centered) */
.minimal-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    /* Large minimal icon */
    color: #fff;
    opacity: 0.9;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    pointer-events: none;
    /* Allows click to pass through to the card */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    /* Very subtle backdrop */
    border-radius: 50%;
    backdrop-filter: blur(2px);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.video-card:hover .minimal-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(var(--primary-color), 0.4);
    /* Optional: Use primary color if hex is converted or just keep white/transparent */
    background: rgb(244, 86, 6);
    /* Using the primary orange manually */
    border-color: transparent;
}

.fa-play {
    font-size: 50px;
    margin-left: 6px;
}

footer {
    text-align: right;
    padding: 1rem;
    /* background-color: #333; */
    color: #333;
    margin-top: 30px;
    border-bottom: 1px solid #f0f0f0;
    margin: 32px 0;
}

footer p {
    margin: 0;
    text-align: right;
    font-size: 14px;
}

main .partners-grid {
    display: none;
}

@media(max-width:600px) {
    footer {
        text-align: center;
        text-wrap: balance;
    }

    footer p {
        text-align: center;
        width: 100%;
        margin: 0 auto;
        text-wrap: balance;
    }


}

footer small {
    margin: 0;
    text-align: right;
    font-size: 12px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-card {
    animation: fadeIn 0.6s ease-out forwards;
}

@media (max-width: 768px) {
    .site-wrapper {
        flex-direction: column;
        margin: 0;
        /* Remove top margin on mobile */
    }

    h1 {
        text-align: center;
        margin: 0 auto;
    }

    aside {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        align-items: center;
        border-right: none;
        /* border-bottom: 1px solid #eee; */
        overflow-y: visible;
        margin: 10px auto;
        padding: 20px;
        /* padding-bottom: 30px; */
        /* No scroll needed usually if it flows */
    }

    aside .logo {
        text-align: center;
        margin-bottom: 1rem;
    }

    aside .logo img {
        max-width: 200px;
        /* Smaller logo on mobile */
    }

    nav ul {
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    nav ul li {
        margin-bottom: 0;
    }

    .social-icons {
        justify-content: center;
        margin-top: 1rem;
    }

    .partners-grid {
        margin-top: 2rem;
        margin-left: auto;
        margin-right: auto;
        /* improved grid for mobile if needed, or keep 3 columns */
    }

    main {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .video-title {
        font-size: 1.5rem;
        /* Smaller title on mobile */
    }

    .video-subtitle {
        font-size: 0.9rem;
    }

    .minimal-play-btn {
        width: 60px;
        height: 60px;
        font-size: 2.5rem;
    }

    .chisiamo aside .partners-grid,
    .contactpage aside .partners-grid,
    .videopage aside .partners-grid,
    .partnerspage aside .partners-grid,
    .chisiamo aside hr,
    .contactpage aside hr,
    .videopage aside hr,
    .partnerspage aside hr {
        display: none;
    }

    main .partners-grid {
        display: grid;
    }

    footer,
    footer p {
        text-align: center;
    }

    hr {
        margin: 1rem 0;
    }

    main h1:first-of-type {
        margin: 12px 0;
    }
}

/* Clients List Styling */
.clients-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    /* Spazio abbondante tra i loghi */
    padding: 3rem 0;
    width: 100%;
}

.client-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.client-item a {
    text-align: center;
}

p.center {
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
}

.client-item img {
    height: auto;
    width: 250px;
    max-width: 80%;
    /* Dimensione controllata ma visibile */
    max-height: 150px;
    object-fit: contain;
    /* filter: grayscale(100%); Optional */
    transition: transform 0.3s;
}

.client-item img:hover {
    transform: scale(1.05);
}

nav ul li a.active {
    color: var(--primary-color);
    font-weight: 700;
}

/* Video Grid Styling (2 per row) */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem 0;
    width: 100%;
}

.video-grid-item {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/9;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.video-grid-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s;
}

.video-grid-item:hover .video-grid-thumbnail {
    opacity: 0.6;
}

.video-grid-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #fff;
    opacity: 0.8;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.video-grid-item:hover .video-grid-play-btn {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(255, 102, 0, 0.9);
    border-color: transparent;
}

.video-grid .fa-play {
    font-size: 33px
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .video-grid-play-btn {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }

    .fa-play {
        font-size: 33px;
    }
}

/* Contact Page Styling */
.contact-info {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-info p {
    margin: 1rem 0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.contact-info a {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.3s;
}

.contact-info a:hover {
    opacity: 0.7;
}

/* Privacy Policy Page Styling */
.privacy-content {
    max-width: 800px;
    padding: 2rem 0;
    line-height: 1.8;
}

.privacy-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.privacy-content p {
    margin-bottom: 1rem;
}

.privacy-content ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.privacy-content li {
    margin-bottom: 0.5rem;
}

.privacy-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.privacy-content a:hover {
    text-decoration: underline;
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

@media (min-width:1024px) and (max-width: 1280px) {
    aside {
        top: 50px;
        height: calc(97vh - 50px);
    }
}

@media (max-height: 700px) and (min-width: 800px) {
    .site-wrapper {
        margin: 3px auto
    }

    aside {
        top: 0px;
        height: calc(100vh - 3px);
        overflow-y: scroll;
        scrollbar-width: none;
    }

    aside .logo {
        margin-bottom: 0px;
    }

    nav ul li a {
        font-size: 1.1rem;
    }

    hr {
        margin: 1.8rem auto;
    }

    nav ul li {
        margin-bottom: 1rem;
    }

    .social-icons {
        margin-top: 0.3rem;
    }


}