:root {
    --primary-color: #0d1b2a;
    --accent-color: #e63946;
    /* Approximate reddish/orange from image */
    --text-color: #1b263b;
    --light-text: #ffffff;
    --bg-color: #ffffff;
    --font-main: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* Header */
header {
    background-color: #fff;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary-color);
    text-transform: uppercase;
}

.logo-icon {
    height: 30px;
    /* Placeholder for sardinia shape if possible, or just use css shape */
    color: var(--primary-color);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    font-weight: 500;
    font-size: 0.95rem;
    color: #333;
}

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

/* Google Translate Widget */
#google_translate_element {
    display: flex;
    align-items: center;
}

#google_translate_element select {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: var(--font-main);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

#google_translate_element select:hover {
    background-color: #1b263b;
}

.goog-te-combo {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    font-family: var(--font-main) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-size: 14px !important;
}

.goog-te-combo:hover {
    background-color: #1b263b !important;
}

.goog-te-combo option {
    background-color: white !important;
    color: #333 !important;
}

/* Hide Google Translate branding */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-te-gadget {
    font-family: var(--font-main) !important;
}

.goog-te-gadget-simple {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.goog-te-gadget-simple .goog-te-menu-value span {
    color: #333 !important;
}

.goog-te-gadget-simple .goog-te-menu-value span:hover {
    color: var(--primary-color) !important;
}

/* Hide ALL Google Translate branding elements */
/* Hide the logo image */
.goog-te-gadget img {
    display: none !important;
}

/* Hide the logo link */
.goog-logo-link {
    display: none !important;
}

/* Hide all text nodes and links in the gadget */
.goog-te-gadget>span,
.goog-te-gadget>div>span,
.goog-te-gadget a {
    display: none !important;
}

/* Make the gadget container transparent for any remaining text */
.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
}

/* Ensure the select dropdown is still visible */
.goog-te-combo {
    display: inline-block !important;
    color: #333 !important;
    font-size: 14px !important;
}


/* Hero Section with Carousel */
.hero {
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5%;
    overflow: hidden;
}

/* Carousel Container */
.carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark overlay for readability */
.carousel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 1.5rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    border-radius: 4px;
    backdrop-filter: blur(5px);
}

.carousel-arrow:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.prev {
    left: 2rem;
}

.carousel-arrow.next {
    right: 2rem;
}

/* Indicator Dots */
.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 2;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.dot.active {
    background-color: white;
    transform: scale(1.3);
}

/* Hero Content Overlay */
.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 600px;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.btn-primary {
    display: inline-block;
    background-color: rgba(13, 27, 42, 0.9);
    /* Dark semi-transparent */
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: white;
}

/* Projects Section */
.projects {
    padding: 4rem 5%;
    text-align: center;
}

.projects h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 3rem;
    text-align: left;
    /* Per design */
}

.projects .section-slogan {
    text-align: center;
    margin-bottom: 2rem;
}

.projects-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.project-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Icon Placeholders - using FontAwesome or similar in HTML */
.icon-box {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.project-item h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color);
    max-width: 150px;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .projects-grid {
        justify-content: center;
    }
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 4rem 5% 1rem;
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--light-text);
    position: relative;
    padding-bottom: 10px;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.company-info .logo-container {
    color: var(--light-text);
    margin-bottom: 1rem;
}

.company-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.contact i {
    color: var(--accent-color);
    margin-top: 5px;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s;
}

.social-icons a:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px);
    padding-left: 0;
    /* Override generic link hover */
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Mobile Footer Adjustments */
@media (max-width: 768px) {
    .footer-content {
        gap: 2.5rem;
        text-align: center;
    }

    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .company-info .logo-container {
        justify-content: center;
    }

    .contact li {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }
}

/* Features Section */
.features {
    padding: 4rem 5%;
}

.feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 5rem;
}

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

.feature-image {
    flex: 1;
}

.feature-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-content {
    flex: 1;
}

.feature-content h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.feature-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #555;
    line-height: 1.7;
}

/* Responsive adjustments for features */
@media (max-width: 768px) {
    .feature-item {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 4rem;
        text-align: center;
    }

    /* 
       To ensure consistent ordering on mobile (Image first, then text),
       we can use order property or just let them stack naturally if we want alternating.
       However, usually user wants alternating to stack nicely.
       
       Existing HTML is customized: 
       Item 1: Image - Text
       Item 2: Text - Image
       
       On mobile:
       Item 1: Image on top (natural)
       Item 2: Text on top (natural). Use flex-direction: column-reverse to put image on top?
    */

    .feature-item:nth-child(even) {
        flex-direction: column-reverse;
        /* Puts image on top for Text-Image blocks */
    }
}

/* Services Page Styles */

/* Hero Small for subpages */
.hero-small {
    height: 40vh;
    min-height: 300px;
}

.services-container {
    padding: 4rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.tab-btn {
    background-color: #f0f0f0;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    color: var(--text-color);
}

.tab-btn:hover {
    background-color: #ddd;
}

.tab-btn.active {
    background-color: var(--primary-color);
    color: white;
}

/* Tab Content */
.tab-content {
    animation: fadeEffect 1s;
    /* Fading effect takes 1 second */
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tab-content h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-size: 2rem;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.service-card {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.service-card p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    color: #666;
}

.pdf-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    align-self: center;
}

/* Navbar active state */
nav a.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
}

/* About Page Styles */

.about-container {
    padding: 4rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
}

/* Team Grid */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
}

.team-card {
    text-align: center;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    flex-basis: 300px;
    max-width: 400px;
}

.team-card:hover {
    transform: translateY(-5px);
}

.team-image {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-color);
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.role {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.bio {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Team Video Embedded */
.team-videos-container {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.team-videos-container h4 {
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.team-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.team-video-item {
    background-color: #f8f9fa;
    aspect-ratio: 16/9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #eee;
    transition: all 0.3s;
}

.team-video-item:hover {
    background-color: #e9ecef;
    border-color: var(--accent-color);
}

.team-video-item i {
    font-size: 1.2rem;
    color: var(--accent-color);
    opacity: 0.8;
}

.team-video-item:hover i {
    opacity: 1;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #000;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.close-modal {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: -35px;
    right: 0;
    cursor: pointer;
    z-index: 1001;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}