/* =========================================
   1. RESET & SETĂRI GENERALE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    overflow-x: hidden;
    line-height: 1.6;
    background-color: #fff;
    
}
.liste ul{
    list-style: none;        /* scoatem bullet-ul standard */
    padding-left: 0;         /* eliminăm indentarea implicită */
    margin-left: 0;

}

.liste ul li {
    position: relative;
    padding-left: 28px;      /* spațiu pentru iconiță */
    margin-bottom: 12px;
    font-size: 1.1rem;
    color: #fff;             /* sau #333 dacă e pe fundal deschis */
}

.liste ul li::before {
    content: " ● ";            /* bullet premium */
    font-weight: bold;
    /* position: absolute; */
    /* left: 0; */
    top: 0;
    color: #fff;          /* culoarea brandului */
    font-size: 1.6rem;
    line-height: 1;
}





/* =========================================
   2. NAVBAR
   ========================================= */
.navbar {
    height: 80px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    /* Împinge logo la stânga și meniu la dreapta */
    align-items: center;
    padding: 0 5%;
    background: transparent;
    transition: 0.4s;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Logo-ul trebuie să stea cuminte în stânga */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Spațiu între imagine și text */
    cursor: pointer;
}

.logo img {
    height: 70px;      /* Dimensiunea logo-ului */
    width: auto;
    display: block;      /* Elimină spațiile goale de sub imagine */
}

.logo-text {
    font-family: 'Kaushan Script', cursive !important; /* Forțăm fontul corect */
    font-size: 2.2rem;
    /* Dimensiunea textului de lângă logo */
    color: white;
    line-height: 1;      /* Elimină spațiul deasupra/dedesubtul textului */
    white-space: nowrap; /* Împiedică textul să sară pe rândul următor */
} 

/* Corecție pentru când navbar-ul devine alb la scroll */
.navbar.scrolled .logo-text {
    color: #333;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links li a, .dropdown-toggle {
    text-decoration: none;
    color: #fff;
    /* Alb când e pe video */
    font-weight: 500;
    transition: 0.3s;
    padding: 10px 15px;
    display: inline-block;
}

.navbar.scrolled .nav-links a {
    color: #333;
    /* Negru când dăm scroll */
}

/* Dropdown container */
.dropdown {
    position: relative;
}
/* Butonul Servicii */
.dropdown-toggle {
    cursor: pointer;
    color: #fff;
    font-weight: 500;
    padding: 10px;
    display: inline-block;
}

/* Ascundem meniul implicit */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: transparent;
    padding: 10px 0;
    list-style: none;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 6px;
    z-index: 9999;
}

/* Linkurile din dropdown */
.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: transparent;
}

/* Desktop: hover deschide meniul */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    
}




/* Navbar pentru mobile: HAMBURGER  */
/* --- HAMBURGER STYLE --- */
.hamburger {
    display: none;
    /* Pe PC stă ascuns */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 3000;
    padding: 10px;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #fff;
    /* Albe pe video */
    border-radius: 3px;
    transition: 0.3s;
}

/* Dacă navbar-ul e transparent pe video, liniuțele ar trebui să fie albe */
.navbar:not(.scrolled) .hamburger span {
    background-color: #fff;
}

/* Când dăm scroll, liniuțele devin negre */
.navbar.scrolled .hamburger span {
    background-color: #333;
}

/* Mobil: dropdown deschis */
.dropdown.open .dropdown-menu {
    display: block !important;
    position: static;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
 .dropdown-menu {
        display: none !important;
    }

}





/* =========================================
   3. HERO SECTION (VIDEO & TEXT)
   ========================================= */

.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.back-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* Aceasta este cheia: video-ul va umple tot ecranul fără să se deformeze */
    z-index: 1;

    /* position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Stratul 1 - cel mai jos 
    object-fit: cover; */
}

/* Overlay-ul negru ca div separat */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
    /* Stratul 2 - peste video */
}

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

.hero-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Stratul 10 - mult peste video și overlay */
    /* Nu pune pointer-events: none aici încă, să testăm dacă se vede */
}

.hero-content {
    position: absolute;
    top: 1px;
    left: 175px;
    color: white;
    text-align: right;
}

.hero-content h1 {
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Playfair Display', serif; */
    font-style: italic;
    font-size: 4rem;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
}

.mute-control {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 60px;
    /* Puțin mai mare pentru a fi ușor de apăsat */
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.3);
    /* Fundal mai închis pentru contrast */
    color: white;
    cursor: pointer;
    z-index: 100;
    /* Cel mai înalt strat */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}

.mute-control:hover {
    transform: scale(1.1);
}


/*  ===============================================================
    Imaginea singura pe tot ecranul
    ===============================================================   */
/* Stil pentru secțiunea cu o singură poză */

.single-feature {
    width: 100%;
    overflow: hidden;
}

/* Forțăm elementul să fie 100% lățime */
.grid-item.full-width {
    min-width: 100%;
    height: 1168px;
    /* Poți ajusta înălțimea aici (mai mică decât cele 3 poze) */
}

/* Opțional: Putem mări textul pentru poza landscape, fiind mai mult spațiu */
.full-width .overlay h3 {
    font-size: 3rem;
}

.btn-transparent {
    margin-top: 15px;
    padding: 12px 30px;
    background: transparent;
    /* Face butonul transparent */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* Bordură fină semi-transparentă */
    border-radius: 5px;
    /* font-size: 1rem;     font-weight: 500;     text-transform: uppercase;     letter-spacing: 1px; */
    cursor: pointer;
    transition: all 0.3s ease;
    /* Animație lină pentru hover */
    text-decoration: none;
    display: inline-block;
}

/* Efectul când treci cu mouse-ul peste el */

.btn-transparent:hover {
    background: white;
    /* Se umple cu alb */
    color: #333;
    /* Textul devine închis la culoare */
    border-color: white;
    transform: translateY(-3px);
    /* Se ridică ușor pentru un efect premium */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Sectiunea cu 2 imagini GRID
   ========================================= */

.echipa-section{
    margin: auto;
    /* padding: 0px 2%; */
    background-color: #fdfdfd;
    /* Un alb foarte ușor gri pentru contrast */
    
    display: flex;
    /*    gap: 50px;          */
    align-items: center; 
} 

.echipa-info{
    width: 100%;
    
}

.echipa-info h2 {
    /* border: 5px solid rgb(131, 46, 180); */
    font-family: 'Kaushan Script', cursive;
    font-style: italic;
    font-size: 3rem;
    margin: 0 auto;
    color: #333;
    text-align: center;
    /* display: flex; */
    /* gap: 30px; */
    align-items: center;
    
}



.double-feature {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.grid-item.half-width {
    flex: 1;
    min-width: 50%;
    /* Ocupă exact jumătate de ecran */
    height: 1200px;
    /* Înălțime mai mare pentru a accentua formatul portret */
}

/* Aliniere specială pentru text în colțul din dreapta jos */
.overlay.bottom-right {
    justify-content: flex-end;
    /* Împinge conținutul spre fundul pozei */
    align-items: flex-end;
    /* Împinge conținutul spre dreapta */
    text-align: right;
    /* Aliniază liniile de text la dreapta */
    padding: 40px;
    /* Spațiu față de margini (ajustează după gust) */
}

.despremine {
        color: #999;
        text-decoration: none;
        
    }
    .despremine:visited, .despremine:active { color: #999; text-decoration: none; }
    .despremine:hover {
        color: #fff
    }



/* =========================================
   Sectiunea cu 3 imagini GRID
   ========================================= */

.image-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.grid-item {
    flex: 1;
    min-width: 33.333%;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.grid-item:hover .bg-image {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 2;
    text-align: center;
    padding: 20px;
}

.overlay h3 {
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Playfair Display', serif; */
    font-style: italic;
    font-size: 2.2rem;
}




/* ====================================================================
   SECTIUNEA de CONTACT  
   ====================================================================     */


.contact-section {
    padding: 100px 10%;
    background-color: #fdfdfd;
    /* Un alb foarte ușor gri pentru contrast */
}

.contact-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.contact-info {
    flex: 1;
}

.contact-info h2 {
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Playfair Display', serif; */
    font-style: italic;
    font-size: 3rem;
    margin-bottom: 20px;
    color: #333;
}

.contact-info p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
}

.details p {
    margin-bottom: 10px;
    font-weight: 500;
}

.contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #333;
}

.send-btn {
    padding: 15px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.send-btn:hover {
    background-color: #555;
}


/* =========================================
   Pagina de prezentare Linda / Raluca
   ========================================= */


.despre-mine {
    margin: 0; 
    padding: 0; /* ocupă toată înălțimea ecranului */
    background-image: url('media/be_authentic_you_marit.png');          /* background-color: #a88b8d;  ##ddbfa1; #d7b89c; cacao cu lapte */
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; /* opțional, arată premium */
}

.continut-despre-mine {padding: 40px; border-radius: 10px; text-align: center; max-width: 1100px; width: 100%;}
.continut-despre-mine img {display: block; max-width: 100%; height: auto; margin: 0 auto; padding: 0; border-radius: 50px; } /* box-shadow: 0 4px 15px rgba(0,0,0,0.15); object-fit: cover; margin: 10px auto; padding: 15px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);  */
.continut-despre-mine h1 { margin-bottom: 20px; font-size: 36px; color: #fff; margin-top: 150px;}
.continut-despre-mine h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff;}
.continut-despre-mine p {font-size: 20px; color: #fff; display: block;}
.continut-despre-mine ul li {font-size: 20px; color: #fff; display: block;}
.continut-despre-mine-contact p { font-size: 18px; margin: 5px 0; color:#fff} 
.continut-despre-mine-contact a { color: #fff; text-decoration: none; font-weight: bold; } 
.continut-despre-mine-contact a:hover { text-decoration: underline; }

.despre-mine section {
    min-height: calc(100vh - 80px - 250px);
    /* 80px = navbar, 250px = footer aproximativ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px; /* spațiu sub navbar */

}

/* =========================================
   Pagina de Terapie Individuala
   ========================================= */
.terapie-individuala { 
    margin: 0; 
    padding: 0; /* ocupă toată înălțimea ecranului */ 
    background-image: url('media/individual.jpg');
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; /* opțional, arată premium */

     /*   /* imaginea acoperă tot ecranul  display: flex; justify-content: center; align-items: center; */  

}
.continut-terapie-individuala { /* background: rgba(255, 255, 255, 0.7);  fundal alb semi-transparent */ padding: 40px; border-radius: 10px; text-align: center; max-width: 800px; }
.continut-terapie-individuala h1 { margin-bottom: 20px; font-size: 36px; color: #fff; margin-top: 150px;}
.continut-terapie-individuala h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff; }
.continut-terapie-individuala p { font-size: 20px; color: #fff; }

.terapie-individuala section {
    min-height: calc(100vh - 80px - 250px);
    /* 80px = navbar, 250px = footer aproximativ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
} 

/* =========================================
   Pagina de Terapie Cupluri
   ========================================= */
.terapie-cuplu { 
    margin: 0; 
    padding: 0; /* ocupă toată înălțimea ecranului */ 
    background-image: url('media/cuplu.png');
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; /* opțional, arată premium */

       /* imaginea acoperă tot ecranul  display: flex; justify-content: center; align-items: center; */  

}
.continut-terapie-cuplu { /* background: rgba(255, 255, 255, 0.7);  fundal alb semi-transparent */ padding: 40px; border-radius: 10px; text-align: center; max-width: 800px; }
.continut-terapie-cuplu h1 { margin-bottom: 20px; font-size: 36px; color: #fff; margin-top: 150px;}
.continut-terapie-cuplu h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff; }
.continut-terapie-cuplu p { font-size: 20px; color: #fff; }

.terapie-cuplu section {
    min-height: calc(100vh - 80px - 250px);
    /* 80px = navbar, 250px = footer aproximativ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}


/* =========================================
   Pagina de Terapie de Grup
   ========================================= */
.terapie-grup { 
    margin: 0; 
    padding: 0; /* ocupă toată înălțimea ecranului */ 
    background-image: url('media/grup.png');
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; /* opțional, arată premium */

     /*   /* imaginea acoperă tot ecranul  display: flex; justify-content: center; align-items: center; */  

}
 .continut-terapie-grup { /* background: rgba(255, 255, 255, 0.7);  fundal alb semi-transparent  */ padding: 40px; border-radius: 10px; text-align: center; max-width: 800px; }
.continut-terapie-grup h1 { margin-bottom: 20px; font-size: 36px; color: #fff; margin-top: 150px;}
.continut-terapie-grup h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff; }
.continut-terapie-grup p { font-size: 20px; color: #fff; }

.terapie-grup section {
    min-height: calc(100vh - 80px - 250px);
    /* 80px = navbar, 250px = footer aproximativ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
} 

/* =========================================
       Pagina de CONTACT
   ========================================= */
.contact {
    margin: 0; 
    padding: 0; /* ocupă toată înălțimea ecranului */
    background-image: url('media/be_authentic_you_marit.png');          /* background-color: #a88b8d;  ##ddbfa1; #d7b89c; cacao cu lapte */
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; /* opțional, arată premium */
}


.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 10px 0;
}
.cards-grid h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff;}
.cards-grid p {font-size: 20px; color: #fff; display: block;}



.card {
    background: transparent;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    
    border: 1px solid #eee;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: block;
    margin: 0 auto;
}
.card a{
    text-decoration: none;
}

/* Efect hover */
.card:hover {
    transform: translateY(-10px);
    border-color: #ff6a00;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Icon / imagine */
.card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #fff;
}

/* iconite rotunde  */
.card-icon img {
    width: 150px;
    height: 150px;

    /* max-width: 100%; 
    object-fit: contain;*/
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;

    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.double-contact {
    /* display: flex;
    flex-wrap: wrap; */

    width: 100%;
    /* height: 150px; */
    
    margin-top: 80px;
    margin-bottom: 20px;
    
}

.grid-item-contact {
    flex: 1;
    min-width: 50%;
    /* Ocupă exact jumătate de ecran */
    /* height: 240px; */
    /* Înălțime mai mare pentru a accentua formatul portret */
    
}
.grid-item-contact h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff;}
.grid-item-contact p {font-size: 20px; color: #fff; display: block;}
/* .card-icon h3 {
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Playfair Display', serif; 
    font-style: italic;
    font-size: 2.2rem;
    color: #fff;
} */
.contact-text {
    max-width: 1100px;      /* controlează lățimea textului */
    width: 100%;           /* permite micșorarea pe mobil */
    margin: 0 auto;        /* centrează pe orizontală */
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 0 20px;       /* distanță egală stânga-dreapta */
    color: #fff;
}
.contact-text h3 {font-family: 'Kaushan Script', cursive; /* font-family: 'Playfair Display', serif; */ font-style: italic; font-size: 2.2rem; color: #fff;}
.contact-text p {font-size: 20px; color: #fff; display: block;}

.contact-wrapper {
    min-height: calc(100vh - 200px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}





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

.main-footer {
    background-color: #1a1a1a;
    /* Negru mat/antracit */
    color: #fff;
    padding: 80px 10% 20px;
    margin-top: 0;
    /* Ne asigurăm că nu există spațiu alb deasupra */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    
}

.footer-col {
    flex: 1;
    min-width: 200px;
    text-align: center;   /* ← Asta centrează TOT textul din coloană */
}

.footer-logo {
    font-family: 'Kaushan Script', cursive;
    /* font-family: 'Playfair Display', serif; */
    font-style: italic;
    font-size: 1.8rem;
    
    margin-bottom: 20px;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    color: #ccc;
    
}

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

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color: #999;
    text-decoration: none;
    transition: 0.3s;
    
}

.footer-col a:hover {
    color: #fff;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    justify-content: center;
    }

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #333;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}




/* =========================================
   fortez culoarea link-ului de la pc-service.ro sa ranama alba 
   ========================================= */

.credits a {
    /* Forțăm culoarea să nu mai fie albastră */
    color: #aaa !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.credits a:hover {
    color: #ffffff !important;
    /* Devine alb curat la hover */
    text-decoration: underline;
}




/* =========================================
   5. MOBIL obisnuit
   ========================================= */

@media (max-width: 768px) {
    .hamburger {
        display: flex;
        /* Apare doar pe mobil */

    }
.dropdown-toggle {
    display: block;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        color: #000; /* rămâne alb ca restul meniului */
        font-size: 1.5rem;      /* ← aceeași mărime ca Acasă și Contact */
        font-weight: 500;       /* ← aceeași grosime */
        line-height: 1.2;       /* ← aliniere identică */

    }
    * Fundal alb pentru submeniuri */
    .dropdown-menu {
        background: #ffffff !important;
        display: none; /* ascuns implicit */
    }

    .dropdown-menu li a {
        color: #000 !important;
        padding: 12px 0;
        text-align: center;
        display: block;

    }
    /* Când e deschis */
    .dropdown.open .dropdown-menu {
        display: block !important;
    }

    .navbar {
        height: 70px;
        /* Îl facem puțin mai compact pe mobil */
        padding: 0 15px;
        /* Spațiu mai mic pe margini */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Micsorăm imaginea logo-ului */

    .logo img {
        height: 50px !important;
        /* Ajustează această valoare până când arată bine */
        width: auto;
        max-width: 150px;
        /* Ne asigurăm că nu ocupă mai mult de jumătate de ecran */
        object-fit: contain;
    }

    .logo-text {
        font-size: 1.8rem !important;
        /* Puțin mai mic pe mobil, dar tot vizibil */
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        /* Ascuns în dreapta */
        width: 80%;
        /* Ocupă aproape tot ecranul pe lățime */
        height: 100vh;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.5s ease;
        z-index: 2500;
    }

    .nav-links.active {
        right: 0;
        /* Glisează în interiorul ecranului */
    }

    .nav-links a {
        color: #000 !important;
        /* Textul din meniu să fie negru pe fundal alb */
        font-size: 1.5rem;
    }

    .nav-links li {
        margin: 20px 0;
    }

    .hero-content {
        top: 25%;
        right: 0;
        left: 0;
        text-align: center;
        padding: 20px;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .grid-item {
        min-width: 100%;
    }

    .mute-control {
        bottom: 30px;
        right: 30px;
    }

    .full-width .overlay h3 {
        font-size: 2rem;
    }

    .grid-item.full-width {
        height: 300px;
        /* Mai scurtă pe mobil */
    }


    /*   Pentru Contact */

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .double-contact {
        margin-top: 40px;
        margin-bottom: 10px;
    }



    .contact-container {
        flex-direction: column;
    }

    .contact-info h2 {
        font-size: 2.2rem;
    }

    .grid-item.half-width {
        min-width: 100%;
        /* Pe mobil revin una sub alta */
        height: 500px;
        /* Reducem puțin înălțimea pe ecrane mici */
    }

    .overlay.bottom-right {
        padding: 20px;
    }

    .overlay.bottom-right h3 {
        font-size: 1.8rem;
    }

    

    /* RESPONSIVE FOOTER */

    .main-footer {
        padding: 50px 5% 20px;
        text-align: center;
    }

    .footer-container {
        flex-direction: column;
        gap: 40px;
    }

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


   /* Paginile despre mine */
 .profil-content { flex-direction: column; align-items: center; } 
 .profil-poza img { width: 100%; max-width: 350px; } 


}

/* =========================================
   5. MOBIL FOLD
   ========================================= */

@media (max-width: 950px) {

    /* Am mărit de la 768px la 950px pentru Fold */
    .navbar {
        height: 70px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    .logo {
        flex: 0 1 auto;
        /* Nu lăsăm logo-ul să ocupe tot spațiul */
    }

    .logo img {
        height: 50px !important;
        /* Forțăm o dimensiune mică */
        width: auto !important;
    }

    .logo-text {
        font-size: 1.8rem;
        /* Puțin mai mic pe mobil, dar tot vizibil */
    }

    .hamburger {
        display: flex !important;
        /* Ne asigurăm că e forțat să apară */

    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        /* Ascuns în dreapta */
        width: 80%;
        /* Ocupă aproape tot ecranul pe lățime */
        height: 100vh;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.5s ease;
        z-index: 2500;
    }

    /* Clasa care se activează la click */
    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 20px 0;
    }

    .full-width .overlay h3 {
        font-size: 2rem;
    }

    .grid-item.full-width {
        height: 300px;
        /* Mai scurtă pe mobil */
    }

    /* RESPONSIVE FOOTER */
    .main-footer {
        padding: 50px 5% 20px;
        text-align: center;
    }

    .footer-container {
        flex-direction: column;
        gap: 40px;
    }

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

    .credits {
        margin-top: 5px;
        color: #666;
        /* Culoarea textului "Realizat de" */
    }
}