/* Stilurile pentru antet */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(10deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    height: 60px;
    padding: 0 20px;
    color: #FFF;
    position: relative;
}

#logo {
    display: flex;
    align-items: center;
}

#logo-text {
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFF;
    line-height: 1;
    margin: 0;
}

.logo-text-primary {
    background: linear-gradient(10deg, rgba(65, 94, 251, 1) 0%, rgba(252, 40, 107, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-text-secondary {
    font-size: 24px;
    color: #EAEAEA;
    margin-top: -10px;
    text-align: left;
    position: relative;
    display: inline-block;
    padding: 2px 5px;
    background-clip: text;
    -webkit-background-clip: text;
    color: radiant;
    padding: 0em 1.5em;
}

/* Stilurile pentru meniu */
#menu {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 2;
}

#menu ul {
    text-align: center;
    margin: 0;
    background: 0;
    padding: 0;
}

#menu li {
    display: inline-block;
    padding: none;
    margin: none;
}

#menu li a, #menu li span {
    display: inline-block;
    padding: 0em 1.5em;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
    color: #EAEAEA;
}

#menu li:hover a, #menu li span {
    background: 0;
    color: #EAEAEA;
    border-left: 1px solid #0074D9;
    text-decoration: none;
}

/* Stilurile pentru fundalul paginii */
body {
    background: rgb(63, 94, 251);
    background: linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    margin: 0;
    padding: 0;
}

/* Stilurile pentru program */
.program1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.time {
    width: 20%;
    text-align: justify;
}

.description {
    width: 75%;
    text-align: justify;
}

.program {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
    background: 0;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

.program h3 {
    font-size: 16px;
    margin: 0;
}

.program p {
    font-size: 14px;
    margin: 10px 0;
}

/* Stilurile pentru imagine */
#logo-img {
    max-width: 100%;
}

.logo-container{
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 80%;
    max-height: 80%;
}



/* Stilurile pentru a face imaginea să fie responsivă */
@media screen and (max-width: 768px) and (max-width: 1199px){
    #menu {
        position: relative;
        text-align: center;
    }

    #menu ul {
        display: none;
        background: #333;
        position: absolute;
        width: 100%;
        top: 60px;
        left: 0;
    }

    #menu li {
        display: block;
        margin: 0;
        padding: 0;
    }

    #menu li a, #menu li span {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #555;
    }

    #menu.active ul {
        display: block;
    }

    .logo-container {
        top: 30%;
    }

    #logo-img {
        max-width: 90%;
    }
}

/* Stilurile pentru ecran cu lățimea maximă de 550px */
@media screen and (max-width: 550px) {
    /* Stilizează antetul pentru ecrane mici */
    #header {
        height: auto; /* Lăsați înălțimea să se ajusteze automat */
        padding: 10px 20px; /* Adăugați un spațiu de sus și de jos */
    }

    #logo-text {
        font-size: 36px; /* Redimensionați textul logo-ului */
    }

    .logo-text-secondary {
        font-size: 16px; /* Redimensionați textul secundar */
    }

    #menu {
        position: static; /* Anulați poziția absolută */
        text-align: center; /* Ajustați alinierea textului */
        background: none; /* Eliminați fundalul */
    }

    #menu ul {
        display: none; /* Ascundeți lista de meniu */
    }

    #menu li {
        display: block; /* Afișați elementele de meniu ca blocuri */
        margin: 0;
        padding: 0;
    }

    #menu li a, #menu li span {
        display: block; /* Afișați elementele de meniu ca blocuri */
        padding: 10px 0;
        border-bottom: 1px solid #555;
    }

    #menu.active ul {
        display: block; /* Afișați lista de meniu când este activată */
    }

    /* Stilizează imaginea pentru ecrane mici */
    .logo-container {
        top: 10%; /* Ajustați poziția verticală */
    }

    #logo-img {
        max-width: 100%; /* Asigurați-vă că imaginea rămâne în cadrul ecranului */
    }

    /* Stilizează conținutul principal pentru ecrane mici */
    .content {
        padding: 20px; /* Adăugați spațiu în jurul conținutului */
    }

    /* Stilizează secțiunea de program pentru ecrane mici */
    .program {
        width: 100%; /* Lățime maximă pentru conținutul programului */
        margin: 0 0 20px; /* Adăugați un spațiu între secțiuni */
    }

    /* Stilizează textul din program pentru ecrane mici */
    .program h3 {
        font-size: 18px; /* Măriți dimensiunea titlurilor */
    }

    .program p {
        font-size: 14px; /* Măriți dimensiunea textului */
    }
}

/* Stilurile pentru ecran cu lățimea maximă de 550px */
@media screen and (max-width: 550px) {
    /* Stilizează antetul pentru ecrane mici */
    #header {
        height: auto; /* Lăsați înălțimea să se ajusteze automat */
        padding: 10px 20px; /* Adăugați un spațiu de sus și de jos */
    }

    #logo-text {
        font-size: 36px; /* Redimensionați textul logo-ului */
    }

    .logo-text-secondary {
        font-size: 16px; /* Redimensionați textul secundar */
    }

    #menu {
        position: static; /* Anulați poziția absolută */
        text-align: center; /* Ajustați alinierea textului */
        background: none; /* Eliminați fundalul */
    }

    #menu ul {
        display: none; /* Ascundeți lista de meniu */
    }

    #menu li {
        display: block; /* Afișați elementele de meniu ca blocuri */
        margin: 0;
        padding: 0;
    }

    #menu li a, #menu li span {
        display: block; /* Afișați elementele de meniu ca blocuri */
        padding: 10px 0;
        border-bottom: 1px solid #555;
    }

    #menu.active ul {
        display: block; /* Afișați lista de meniu când este activată */
    }

    /* Stilizează imaginea pentru ecrane mici */
    .logo-container {
        top: 10%; /* Ajustați poziția verticală */
    }

    #logo-img {
        max-width: 100%; /* Asigurați-vă că imaginea rămâne în cadrul ecranului */
    }

    /* Stilizează conținutul principal pentru ecrane mici */
    .content {
        padding: 20px; /* Adăugați spațiu în jurul conținutului */
    }

    /* Stilizează secțiunea de program pentru ecrane mici */
    .program {
        width: 100%; /* Lățime maximă pentru conținutul programului */
        margin: 0 0 20px; /* Adăugați un spațiu între secțiuni */
    }

    /* Stilizează textul din program pentru ecrane mici */
    .program h3 {
        font-size: 18px; /* Măriți dimensiunea titlurilor */
    }

    .program p {
        font-size: 14px; /* Măriți dimensiunea textului */
    }
}

/* Stilurile pentru ecran cu lățimea între 551px și 768px */
/* Stilurile pentru ecran cu lățimea maximă de 550px */
@media screen and (max-width: 550px) {
    /* ... alte stiluri pentru ecrane mici ... */

    /* Stilizează meniul pentru ecrane mici */
    #menu {
        position: relative; /* Anulați poziția absolută */
        text-align: center; /* Ajustați alinierea textului */
        background: none; /* Eliminați fundalul */
    }

    #menu ul {
        display: block; /* Afișați lista de meniu ca bloc */
        background: 0; /* Adăugați un fundal pentru meniu */
        position: static; /* Anulați poziția absolută */
        width: 100%; /* Lățime de 100% pentru a se potrivi ecranului */
        top: auto; /* Anulați poziția superioară */
        left: auto; /* Anulați poziția stângă */
        margin-top: 10px; /* Adăugați spațiu de sus pentru a evita suprapunerea cu imaginea */
    }

    #menu li {
        display: block; /* Afișați elementele de meniu ca blocuri */
        margin: 0;
        padding: 0;
    }

    #menu li a, #menu li span {
        display: block; /* Afișați elementele de meniu ca blocuri */
        padding: 10px 0;
        border-bottom: 1px solid #555;
    }

    #menu.active ul {
        display: block; /* Afișați lista de meniu când este activată */
    }
#logo-img {
    max-width: 100%;
}

.logo-container {
    position: relative;
    top: 0; /* Eliminați top-ul pentru a muta imaginea mai sus */
    left: 50%; /* Mutați imaginea în dreapta cu 50% din lățimea containerului */
    transform: translate(-50%, -90%); /* Centrare precisă pe orizontală și verticală */
    z-index: 0;
    width: 100%;
    max-height: 100%;
}

}