/* Logo header */
#header-logo {
    height: 3rem; /* Înălțimea logo-ului */
    width: auto; /* Menține raportul de aspect */
    padding-left: 1rem; /* Spațiu din partea stângă */
}

/* Logo header - ajustări pentru ecrane mici */
@media (max-width: 768px) {
    #header-logo {
        content: url('./assets/imagini/logo-forja-digitala-header-long-mobile.svg'); /* Logo mobil */
        height: auto; /* Înălțime automată pentru raportul de aspect */
        max-width: 80%; /* Ajustare pentru ecrane mici */
    }
    .fading-border-button {
        display: none; /* Ascunde butonul pe ecrane mici */
    }
}

/* Efect hover pentru grup */
.group:hover .group-hover\:fill-\[\#00c9ff\] {
    fill: #00c9ff;
}

/* Stiluri pentru body */
body {
    overflow-x: hidden; /* Ascunde overflow orizontal */
    margin: 0; /* Elimină marginea */
    width: 100%; /* Lățime 100% */
}

/* Stiluri pentru header și container */
header, .container {
    overflow-x: hidden; /* Ascunde overflow orizontal */
    width: 100%; /* Lățime 100% */
}

/* Ajustări pentru padding pe ecrane mici */
@media (max-width: 640px) {
    .container {
        padding-left: 0.1rem;
    }

    .hamburger-icon {
        margin-right: 1rem; /* Spațiu din dreapta */
    }
}

/* Ajustări suplimentare pentru ecrane foarte mici */
@media (max-width: 350px) {
    .container {
        padding-left: 0;
    }

    .hamburger-icon {
        margin-right: 1rem; /* Spațiu din dreapta */
    }
}

/* Secțiuni - alb */
.section-white {
    background-color: #F6F6F6; /* Culoare de fundal albă */
    padding: 4rem 2rem; /* Padding pentru secțiune */
}

/* Secțiuni - albastru */
.section-blue {
    background-color: #00C9FF; /* Culoare de fundal albastră */
    color: #F6F6F6; /* Culoare text */
    padding: 4rem 2rem; /* Padding pentru secțiune */
}

/* Animație SVG */
.animate-svg {
    animation: verticalMove 5s ease-in-out infinite;
}

/* Keyframes pentru animația verticalMove */
@keyframes verticalMove {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Mișcare verticală */
    }
    100% {
        transform: translateY(0);
    }
}

/* Keyframes pentru animația fade-border */
@keyframes fade-border {
    0% {
      border-color: rgba(0, 201, 255, 0); /* Total transparent */
    }
    50% {
      border-color: rgba(0, 201, 255, 1); /* Total opac */
    }
    100% {
      border-color: rgba(0, 201, 255, 0); /* Total transparent */
    }
}

/* Buton cu border fade */
.fading-border-button {
    position: relative;
    display: inline-block;
    border: 2px solid rgba(0, 201, 255, 0); /* Border transparent */
    border-radius: 0.375rem; /* Colțuri rotunjite */
    transition: background-color 0.3s, color 0.3s;
    animation: fade-border 2s infinite; /* Animație border fade */
}

.fading-border-button:hover {
    background-color: #00c9ff; /* Culoare fundal la hover */
    color: #ffffff; /* Culoare text la hover */
}

/* Rectangular - poziționare relativă */
.rectangle {
    position: relative;
}

/* SVG iconă în rectangle */
.rectangle .svg-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Padding pentru icon */
}

/* Iconă SVG - tranziție opacitate */
.rectangle .svg-icon img {
    transition: opacity 0.3s ease;
}

.rectangle:hover .svg-icon img {
    opacity: 0; /* Ascunde iconul la hover */
}

/* Overlay text în rectangle */
.rectangle .overlay-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5); /* Fundal semi-transparent */
    color: white;
    transition: opacity 0.3s ease;
}

.rectangle:hover .overlay-text {
    opacity: 1; /* Afișează textul la hover */
}

/* Imagine rectangle */
.rectangle-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Menține raportul de aspect */
}

/* Stiluri mobile pentru rectangle */
@media (max-width: 768px) {
    .rectangle .svg-icon img {
        opacity: 1; /* Afișează iconul pe mobil */
    }

    .rectangle:hover .overlay-text {
        display: none; /* Îndepărtează efectul hover pe mobil */
    }
}

/* Stiluri generale pentru modal */
.modal, #fullscreen-modal {
    display: none; /* Ascunde modalele implicit */
}

.modal.show, #fullscreen-modal.show {
    display: flex; /* Afișează modalul când clasa 'show' este adăugată */
}

.modal, #fullscreen-modal {
    background: rgba(0, 0, 0, 0.5); /* Fundal semi-transparent */
    position: fixed;
    inset: 0;
    z-index: 50; /* Nivel de z */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Conținut modal */
.modal-content, #fullscreen-modal .fullscreen-image {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    position: relative;
    overflow: hidden; /* Ascunde overflow-ul */
}

/* Buton închidere modal */
.modal-close, .fullscreen-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
}

/* Stiluri pentru carousel */
.carousel {
    display: flex;
    gap: 1rem; /* Spațiu între imagini */
}

/* Imagine carousel */
.carousel-image {
    flex-shrink: 0; /* Nu permite micșorarea imaginii */
    max-width: 100%; /* Asigură scalarea corectă */
    height: auto; /* Menține raportul de aspect */
}

/* Controlează anterior și ulterior carousel */
.carousel-prev, .carousel-next {
    z-index: 10; /* Nivel de z pentru controale */
}

a:hover svg {
    fill: #0f0f0f;
}

/* Stiluri pentru debug modal */
.debug-modal {
    display: none; /* Ascunde debug modal implicit */
}

.debug-modal.show {
    display: flex; /* Afișează când clasa 'show' este adăugată */
}

.debug-modal {
    background: rgba(0, 0, 0, 0.5); /* Fundal semi-transparent */
    position: fixed;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Conținut debug modal */
.debug-modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    height: 70vh; /* Înălțime modal */
    overflow-y: auto; /* Scroll vertical activat */
    position: relative;
    color: #000; /* Culoare text */
}

/* Buton închidere debug modal */
.debug-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000; /* Culoare buton închidere */
}

/* Stiluri pentru text debug */
.debug-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Greutate font regulat */
    color: #000; /* Culoare text */
}