/* main.css - Mobile First Styles */
@font-face {
    font-family: 'Basis Grotesque Arabic Pro';
    src: url('fonts/BasisGrotesqueArabicPro-Bold.eot');
    src: local('Basis Grotesque Arabic Pro Bold'), local('BasisGrotesqueArabicPro-Bold'),
        url('fonts/BasisGrotesqueArabicPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/BasisGrotesqueArabicPro-Bold.woff2') format('woff2'),
        url('fonts/BasisGrotesqueArabicPro-Bold.woff') format('woff'),
        url('fonts/BasisGrotesqueArabicPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Basis Grotesque Arabic Pro Lt';
    src: url('fonts/BasisGrotesqueArabicPro-Light.eot');
    src: local('Basis Grotesque Arabic Pro Light'), local('BasisGrotesqueArabicPro-Light'),
        url('fonts/BasisGrotesqueArabicPro-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/BasisGrotesqueArabicPro-Light.woff2') format('woff2'),
        url('fonts/BasisGrotesqueArabicPro-Light.woff') format('woff'),
        url('fonts/BasisGrotesqueArabicPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Basis Grotesque Arabic Pro';
    src: url('fonts/BasisGrotesqueArabicPro-Regular.eot');
    src: local('Basis Grotesque Arabic Pro Regular'), local('BasisGrotesqueArabicPro-Regular'),
        url('fonts/BasisGrotesqueArabicPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/BasisGrotesqueArabicPro-Regular.woff2') format('woff2'),
        url('fonts/BasisGrotesqueArabicPro-Regular.woff') format('woff'),
        url('fonts/BasisGrotesqueArabicPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Basis Grotesque Arabic Pro Blk';
    src: url('fonts/BasisGrotesqueArabicPro-Black.eot');
    src: local('Basis Grotesque Arabic Pro Black'), local('BasisGrotesqueArabicPro-Black'),
        url('fonts/BasisGrotesqueArabicPro-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/BasisGrotesqueArabicPro-Black.woff2') format('woff2'),
        url('fonts/BasisGrotesqueArabicPro-Black.woff') format('woff'),
        url('fonts/BasisGrotesqueArabicPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Basis Grotesque Arabic Pro Md';
    src: url('fonts/BasisGrotesqueArabicPro-Medium.eot');
    src: local('Basis Grotesque Arabic Pro Medium'), local('BasisGrotesqueArabicPro-Medium'),
        url('fonts/BasisGrotesqueArabicPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/BasisGrotesqueArabicPro-Medium.woff2') format('woff2'),
        url('fonts/BasisGrotesqueArabicPro-Medium.woff') format('woff'),
        url('fonts/BasisGrotesqueArabicPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* --- GENERAL & RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #000;
    font-family: 'Basis Grotesque Arabic Pro', sans-serif;
    font-weight: normal;
    color: #A6A8AB;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

/* General padding */
.paddgen{
    padding-left: 20px;
    padding-right: 20px;
}

/* --- PANEL MENU --- */
.panel-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0C0C0C;
    z-index: 999; /* Sub header, dar peste restul continutului */
    
    /* Starea initiala: ascuns si invizibil */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto; /* Permite scroll vertical daca meniul e prea lung */
}

/* Clasa adaugata de JS pentru a face panoul vizibil */
.panel-menu.is-open {
    opacity: 1;
    visibility: visible;
}

.panel-menu-content {
    padding: 90px 20px 40px 20px; /* Spatiu sus pentru header, si jos */
}

.panel-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-menu nav li {
    padding: 15px 0;
}

.panel-menu-link {
    color: #FFFFFF;
    font-size: 16px;
    font-family: 'Basis Grotesque Arabic Pro', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Starea activa a header-ului cand meniul e deschis */
.head-fixed-general-on-scroll.menu-is-open {
    /* Il facem fix indiferent de pozitia de scroll */
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(0); /* Il fortam sa fie vizibil */
}

/* Adaugam o linie alba sub header in meniu */
.head-fixed-general-on-scroll.menu-is-open::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

/* Animatia butonului Hamburger -> X */
.head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(2) {
    opacity: 0;
}
.head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(3) {
    transform: translateY(-3px) rotate(-45deg);
}
.head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(4) {
    opacity: 0;
}

/* Clasa adaugata pe <body> pentru a bloca scroll-ul */
body.no-scroll {
    overflow: hidden;
}

.head-fixed-general-on-scroll {
    position: relative; /* Pozitionare normala la incarcarea paginii */
    z-index: 1000;
    width: 100%;
    background-color: #0C0C0C;
    padding-top: 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Adaugam tranzitie pentru o trecere lina la starea 'sticky' */
    transition: transform 0.4s ease-in-out;
}

/* Starea 'STICKY' (cand devine fix) */
.head-fixed-general-on-scroll.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    /* Initial este ascuns deasupra ecranului */
    transform: translateY(-100%);
}

/* Starea 'VIZIBIL' (cand apare la scroll in sus) */
.head-fixed-general-on-scroll.is-visible {
    transform: translateY(0);
}

/* --- Stiluri interne ale header-ului (raman neschimbate) --- */
.logo .logo-complet {
    display: block;
    height: 18px;
}

.nav-first {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-phone-icon img {
    display: block;
    height: 16px;
}

.deschide-meniu {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    /* Inaltimea va fi setata de JS, dar punem o valoare de fallback */
    height: 22px; 
    /* Transformam butonul in container flexibil */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuie spatiul egal intre linii */
}

/* Stilul pentru fiecare linie din cele 4 */
.deschide-meniu span {
    display: block;
    width: 100%;
    height: 1.2px; /* Grosimea liniilor */
    background-color: #B89C5E;
    transition: all 0.3s ease;
}

/* --- SECTION 0: INTRO PAGINA --- */
.intro-pagina {
    width: 100%;
    height: 96vh;
    background-image: 
        /* Stratul 1 (deasupra): Gradientul */
        linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 65%),
        /* Stratul 2 (dedesubt): Imaginea originala */
        url('../img/intro-mob.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    /* Am eliminat proprietatile flex de aici */
    text-align: center;
}

.intro-pagina-content {
    height: 100%; /* Ocupa toata inaltimea parintelui */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aliniaza primul element (h1) sus, si ultimul (butoanele) jos */
    align-items: center; /* Centreaza elementele pe orizontala */
    padding-top: 14vh;
    padding-bottom: 11vh;
    box-sizing: border-box; /* Asigura ca padding-ul este inclus corect in inaltime */
}

/* MODIFICAT: Eliminam marginea de jos care nu mai este necesara */
.intro-pagina-content h1 {
    margin-bottom: 0;
}

.h1titlu, .h1subtitlu {
    display: block;
    font-family: 'Basis Grotesque Arabic Pro', sans-serif;
    font-weight: normal;
    color: #fff;
}

.h1titlu {
    font-size: 36px;
    margin-bottom: 0px;
    letter-spacing: -0.864px;
}

.h1subtitlu {
    font-size: 16px;
}

.ast{
width:100%;
min-width:240px;
height:auto;
}

.intro-pagina-buttons {
    display: flex;
    flex-direction: column; /* Butoanele sunt una sub alta pe mobil */
    gap: 10px; /* Spatiu intre butoane */
    align-items: center;
    width: 100%;
}

.intro-btn {
    width: 76%;
    display: inline-block;
    padding: 15px 20px;
    background: transparent;
    border: 2px solid #B69A57;
    color: #B69A57;
    font-family: 'Basis Grotesque Arabic Pro Md', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}

.intro-btn:hover {
    background-color: #B69A57;
    color: #fff;
}

/* --- SECTION: DESPRE PROIECT --- */
.despre-insert {
    background-image: url('../img/flame-mobil.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row; /* Pe mobil, coloanele sunt una sub alta */
    min-height: 10vh;
}

.despre-insert-s {
    width: 64%;
}

.despre-insert-r {
    width: 38%;
}

.despre-insert-s {
    color: #fff;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.despre-content {
    max-width: 450px; /* Limiteaza latimea continutului in coloana */
    margin: 0 auto;
    padding-left: 8px;
}

.despre-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 30px;
}

.despre-text {
    font-family: 'Basis Grotesque Arabic Pro Lt', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height:1.4;
    margin-bottom: 20px;
}

.text-extins {
    display: none; /* Textul extra este initial ascuns */
}

.btn-toggle-details {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Basis Grotesque Arabic Pro', sans-serif;
    font-size: 12px;
    padding: 0;
}

.arrow-icon {
    width: 8px;
    transition: transform 0.3s ease-in-out;
}

.btn-toggle-details.active .arrow-icon {
    transform: rotate(180deg);
}

.linie-despartitoare {
    height: 1px;
    margin: 40px 0;
}

.btn-programare {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-family: 'Basis Grotesque Arabic Pro Md', sans-serif;
    font-size: 10px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.btn-programare span {
    position: relative;
    padding-bottom: 8px; /* Adaugam spatiu sub text pentru linie */
}

/* Cream linia de sub text folosind un pseudo-element */
.btn-programare span::after {
    content: ''; /* Obligatoriu pentru pseudo-elemente */
    position: absolute;
    bottom: 0; /* Pozitioneaza linia la baza spatiului creat de padding */
    left: 0;
    width: 100%; /* Linia va avea latimea textului */
    height: 1px; /* Grosimea liniei, conform cerintei */
    background-color: #FFFFFF; /* Culoarea liniei */
}

.calendar-icon {
    width: 20px;
}

.despre-insert-r {
    background-image: url('../img/despre-proiect-imagine.jpg'); /* Pune aici calea corecta a pozei */
    background-size: cover;
    background-position: 20% 38%;
    min-height: 400px; /* O inaltime minima pe mobil */
}

/* --- SECTION: SLIDER --- */
.slider-insert {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
}

.main-slider {
    width: 100%;
    height: 100%; /* Umple containerul parinte */
}

.main-slider .slick-list {
    height: 100% !important;
}

.main-slider .slick-track {
    height: 100% !important;
}

.slider-item {
    width: 100%;
    height: 90vh; /* Asiguram ca fiecare slide are inaltimea corecta */
    background-size: cover;
    background-position: center;
}

/* Containerul pentru elementele statice de deasupra */
.slider-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Titlul static "ASTORIA" */
.slider-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 350px;
}

/* Navigatia (paginatie + sageti) */
.slider-navigation {
    position: absolute;
    top: 30px;
    right: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Basis Grotesque Arabic Pro', sans-serif;
    font-size: 12px;
    pointer-events: all;
    letter-spacing: 1.4px;
}

.slider-nav-arrows {
    display: flex;
    gap: 0px;
}

.slider-prev, .slider-next {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
}

.slider-prev img, .slider-next img {
    display: block;
    width: 15px;
}

/* Ascunderea sagetilor default ale Slick Slider */
.main-slider .slick-prev,
.main-slider .slick-next {
    display: none !important;
}

/* --- SECTION: LOCALIZARE --- */
.localizare {
    background-color: #0C0C0C;
    padding-top: 60px;
    padding-bottom: 60px;
}

.localizare-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Coloanele una sub alta pe mobil */
    gap: 60px;
}

/* Coloana Stanga */
.localizare-s {
    text-align: center; /* Titlul centrat pe mobil */
}

.localizare-titlu {
    color: #F0F1F1;
    font-family: 'Basis Grotesque Arabic Pro Lt';
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 60px;
}

.localizare-poza img {
    width: 100%;
    height: auto;
    display: block; /* Elimina spatiu extra sub imagine */
}

/* Coloana Dreapta */
.localizare-r {
    text-align: left; /* Subtitlul centrat pe mobil */
}

.localizare-subtitlu {
    color: #CBA571;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 50px;
    text-align: center;
}

.beneficii-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* O singura coloana pe mobil */
    gap: 30px;
    margin-bottom: 60px;
    text-align: left; /* Aliniem textul la stanga in interiorul grid-ului */
}

.beneficiu-item {
    display: flex;
    align-items: flex-start; /* Aliniere verticala la inceput (top) */
    gap: 15px;
}

.beneficiu-item img {
    width: 26px; /* Dimensiune fixa pentru iconite */
    height: 26px;
    flex-shrink: 0; /* Previne micsorarea iconitei */
}

.beneficiu-item span {
    color: #EBE6E0;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.6;
}

/* Reutilizam stilul pentru butonul de programare de la sectiunea anterioara */
.localizare-r .btn-programare {
    justify-content: flex-start;
}

/* --- SECTION: ARHITECTURA & DESIGN --- */
.arhitectura-design {
    display: flex;
    flex-direction: column; /* Coloanele una sub alta pe mobil */
    background-image: url('../img/creamy.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Coloana stanga (cu tipa) */
.arhitectura-design-s {
    position: relative;
    width: 100%;
    min-height: 70vh; /* O inaltime minima pe mobil */
    background-image: url('../img/arhitectura-mobil.jpg');
    background-size: cover;
    background-position: top center;
}

.arhitectura-logo-overlay {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);
    width: 76%;
    max-width: 300px;
}

/* Coloana dreapta (cu text si poze mici) */
.arhitectura-design-d {
    width: 100%;
    /*background-color: #EBE6E0;*/
    background-color: rgba(235, 230, 224, 0.3);
    padding: 60px 25px;
}

.arhitectura-content {
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.arhitectura-design-d h2 {
    text-align: center;
    color: #4D4741;
    margin-bottom: 50px;
}

.arhitectura-titlu, .arhitectura-subtitlu {
    display: block;
    letter-spacing: 1px;
}

.arhitectura-titlu {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.arhitectura-subtitlu {
    font-weight: normal;
    font-size: 14px;
}

/* Containerul cu 2 coloane de poze/text */
.arhitectura-desc {
    display: flex;
    gap: 10px; /* Spatiu intre sub-coloane */
    margin-bottom: 50px;
    margin-left: -25px;
    margin-right: -25px;
}

.arhitectura-desc-s, .arhitectura-desc-d {
    width: 50%;
}

.arhitectura-desc-s p {
    font-weight: 500;
    color: #4D4741;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 15px;
    padding-left: 25px;
    padding-right: 25px;
}

.arhitectura-poza-desc {
    display: block;
    width: 100%;
    height: auto;
}

.arhitectura-desc-d {
    background-image: url('../img/p1-1.jpg');
    background-size: cover;
    background-position: center;
}

/* Stil pentru butonul de programare auriu */
.btn-programare-gold {
    color: #CBA571;
}

.btn-programare-gold span::after {
    background-color: #CBA571; /* Culoarea liniei */
}

/* --- SECTION: APARTAMENTE --- */
.apartamente {
    background-color: #fff; /* Fundalul sectiunii */
    padding-top: 40px;
    padding-bottom: 40px;
}

.apartamente-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Coloane una sub alta pe mobil */
    gap: 30px;
}

/* Coloana Stanga */
.apartamente-s {
    text-align: center;
}

.apartamente-titlu {
    color: #CBA571;
    font-family: 'Basis Grotesque Arabic Pro Lt';
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.apartamente-poza img {
    width: 100%;
    height: auto;
    display: block;
}

/* Coloana Dreapta (Acordeon) */
.apartamente-d {
    width: 100%;
}

.acordeon-item {
    border-bottom: 1px solid #EBE6E0;
}

.acordeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
}

.acordeon-header h3 {
    color: #4D4741;
    font-weight: normal;
    font-size: 14px;
    text-transform: uppercase;
}

.detalii-acordeon {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #CBA571;
}

.detalii-acordeon .arrow-icon {
    width: 8px;
    transition: transform 0.3s ease;
}

/* Starea activa a butonului */
.acordeon-item.active .detalii-acordeon {
    color: #BBBDBF;
}
.acordeon-item.active .detalii-acordeon .arrow-icon {
    content: url('../icons/icon-close.svg'); /* Schimbam iconita */
    width: 10px; /* Ajustam dimensiunea pentru iconita de close */
}

/* Continutul ascuns al acordeonului */
.acordeon-content {
    display: none; /* Initial ascuns */
    padding-bottom: 30px;
}

.acordeon-content img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 25px;
}

.item-desc {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
}

.item-desc-s {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-desc-s h3 {
    color: #A6A8AB;
    font-family: 'Basis Grotesque Arabic Pro Md';
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
}

.item-desc-d {
    text-align: right;
}

.btn-vezi-schita {
    color: #CBA571;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
}

.btn-vezi-schita::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #CBA571;
}

/* --- SECTION: VIDEO PLAYER (Refactorizat) --- */
.teaser-film {
    background-image: url('../img/creamy.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 40px;
    padding-bottom: 40px;
}

.tf1{
    display: flex;
    flex-direction: column; /* Coloane una sub alta pe mobil */
}

.teaser-video-col, .teaser-content-col {
    width: 100%;
}

.teaser-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Fortam un aspect ratio patrat (1:1) pe mobil */
    background-color: #000;
    overflow: hidden;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

#teaserVideoDesktop {
    display: none;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    pointer-events: none; /* Permite click-ul prin overlay catre butonul de play */
}

.video-title {
    color: #fff;
    font-family: 'Basis Grotesque Arabic Pro Md', sans-serif;
    font-size: 24px;
    letter-spacing: 10px;
    margin-bottom: 20px;
}

.btn-video-play {
    background: transparent;
    border: none;
    cursor: pointer;
    width: auto;
    height: 30px;
    transition: transform 0.2s ease, opacity 0.3s ease;
    pointer-events: all; /* Activeaza click-ul pe buton */
}

.btn-video-play img {
    width: 100%;
    height: 100%;
}

.btn-video-play:hover {
    transform: scale(1.1); /* Simplificat transform-ul pentru hover */
}

.btn-video-play.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Stilul pentru butonul de sunet ramane neschimbat */
.btn-sound {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 11;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: none; /* Initial ascuns */
}

.btn-sound.visible {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stil comun pentru ambele SVG-uri din interior */
.btn-sound svg {
    width: 24px; /* O dimensiune potrivita */
    height: 24px;
    /* CULOAREA AURIE SETATA AICI */
    stroke: #D5C5AE; 
    stroke-width: 1.5; /* O grosime potrivita a liniei */
    fill: none; /* Asigura ca nu este umplut cu culoare */
}

/* Stare inactiva (muted): arata iconita taiata, ascunde cealalta */
.btn-sound.muted .icon-sound-off {
    display: block;
}
.btn-sound.muted .icon-sound-on {
    display: none;
}

/* Stare activa (sunet pornit): arata iconita normala, ascunde cealalta */
.btn-sound:not(.muted) .icon-sound-on {
    display: block;
}
.btn-sound:not(.muted) .icon-sound-off {
    display: none;
}

/* Stiluri pentru coloana de continut */
.teaser-content-col {
    padding: 60px 25px;
    color: #4d4741;
}

.teaser-content-inner {
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.teaser-content-col h2 {
    text-align: center;
    margin-bottom: 40px;
}

.teaser-content-titlu, .teaser-content-subtitlu {
    display: block;
    letter-spacing: 1px;
}

.teaser-content-titlu {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.teaser-content-subtitlu {
    font-weight: normal;
    font-size: 14px;
}

/* Stiluri pentru sub-coloanele din teaser */
.tf1 .arhitectura-desc {
    display: flex;
    gap: 10px;
    align-items: stretch; /* Asigura ca ambele coloane se intind pe inaltimea maxima */
    margin-left: -25px;
    margin-right: -25px;
}

.tf1 .arhitectura-desc-s,
.tf1 .arhitectura-desc-d {
    width: 50%;
}

.tf1 .arhitectura-poza-desc {
    width: 100%;
    height: auto;
    display: block;
}

.tf1 .teaser-desc-d {
    background-image: url('../img/p2-2.jpg');
    background-size: cover;
    background-position: center;
}

.tf1 .despre-text {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 20px;
    margin-bottom: 20px;
}

.tf1 .despre-text p {
    color: #4d4741;
}

.tf1 .btn-toggle-details {
    color: #cba571;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-left: 25px;
}

.tf1 .arrow-icon {
    width: 8px;
    transition: transform 0.3s ease-in-out;
}

.tf1 .btn-toggle-details.active .arrow-icon {
    transform: rotate(180deg);
}

/* --- SECTION 2: FORM --- */
.teaser-form {
    /* MODIFICARE: Adaugam un spatiu deasupra egal cu inaltimea header-ului */
    padding: 100px 20px;
    background-color: #000;
    background-image: url('../img/background-teaser.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.teaser-form-in {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    background-image: url('../img/background-form.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 20px;
    text-align: center;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
}

.teaser-titlu {
    color: #4D4741;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.teaser-subtitlu {
    color: #4D4741;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 10px;
    margin-bottom: 40px;
}

.teaser-formular { 
    display: flex; 
    flex-direction: column; 
    gap: 25px; 
    align-items: center; /* Centreaza campurile in container */
    margin-top: 80px;
    margin-bottom: 80px;
}

.form-group { 
    position: relative; 
    width: 100%;
    max-width: 400px; /* Seteaza o latime maxima pentru campuri */
}

.form-group input,
.form-group select { 
    width: 100%; 
    border: 1px solid #D5C5AE; /* Border complet */
    padding: 18px 20px;
    background: transparent; 
    /*font-size: 12px; - pt ca face zoom pe iphone*/
    font-size: 16px;
    color: #A6A8AB; 
    font-weight: normal; 
    font-family: 'Basis Grotesque Arabic Pro', sans-serif; 
    position: relative; 
    z-index: 2; 
    text-align: center; /* Textul introdus este centrat initial */
    -webkit-appearance: none; /* Ascunde stilurile default ale browser-ului */
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* Asigura colturi drepte pe iOS */
}

/*optional*/
.form-group.active input,
.form-group.active select {
    text-align: left;
}

.form-group input:focus,
.form-group select:focus { 
    outline: none; 
    border-color: #B79C5E; 
}

/* Starea initiala (inactiva) a etichetei */
.form-group label { 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #B79C5E;
    font-family: 'Basis Grotesque Arabic Pro Md', sans-serif;
    font-weight: 500;
    /*font-size: 12px; - pt ca face zoom pe iphone*/
    font-size: 16px;
    transition: all 0.3s ease; 
    z-index: 1;
    pointer-events: none; /* Permite click-ul 'prin' eticheta catre input */
    width: 90%; 
    text-align: center;
}

/* Starea activa a etichetei (la focus sau cand exista text) */
.form-group.active label {
    top: -10px; /* Ridica eticheta deasupra bordurii */
    left: 15px;
    /*font-size: 0.75rem;*/
    font-size: 12px;
    transform: translate(0, 0); /* Reseteaza transformarea */
    /* ATENTIE: Acest fundal trebuie sa fie similar cu cel al formularului (#F8F6F1 este o presupunere) pentru a crea efectul de "taiere" a bordurii */
    background: #F8F6F1; 
    padding: 0 5px;
    width: auto; /* Latimea se muleaza pe text */
    z-index: 3; /* Se asigura ca este deasupra bordurii */
}

/* ADAUGARE: Stiluri specifice pentru grupul de select */
.select-group .select-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; /* Seteaza dimensiunea iconitei */
    height: auto;
    z-index: 1; /* Sub select, dar peste label */
    pointer-events: none; /* Sa nu blocheze click-ul */
    transition: transform 0.3s ease;
}

/* ADAUGARE: Rotirea sagetii cand campul este activ */
.form-group.active .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.form-group-check { 
    text-align: left; 
    position: relative; 
    padding-left: 35px; 
    width: 100%; 
    max-width: 400px;
}

.form-group-check input[type="checkbox"] { 
    display: none; 
}

.form-group-check label { 
    font-weight: normal; 
    color: #A6A8AB; 
    cursor: pointer; 
    font-size: 12px; 
    line-height: 24px; 
}

.form-group-check label::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 4px;
    width: 14px; 
    height: 14px; 
    border: 1px solid #D5C5AE; 
    background: transparent; 
}

.form-group-check input[type="checkbox"]:checked + label::after { 
    content: '✓'; 
    position: absolute; 
    left: 2px; 
    top: 0; 
    font-size: 12px; 
    font-weight: bold; 
    color: #D5C5AE; 
}

.btn-submit { 
    background: transparent; 
    border: 1px solid #D5C5AE; 
    color: #B79C5E; 
    font-weight: 500; 
    padding: 15px; 
    cursor: pointer; 
    transition: background-color 0.3s ease, color 0.3s ease; 
    text-transform: uppercase; 
    width: 100%; 
    max-width: 400px;
    font-size: 11px;
    font-family: 'Basis Grotesque Arabic Pro Md', sans-serif;
}

.btn-submit:hover { 
    background-color: #B79C5E; 
    color: #E7E2DC; 
} 

.form-group.error input, 
.form-group.error select, 
.form-group-check.error label::before { 
    border-color: #ff0000 !important; 
}

.error-message { 
    display: none; 
    background-color: #ff0000; 
    color: white; 
    font-size: 0.8rem; 
    padding: 5px 10px; 
    margin-top: 5px; 
    text-align: left; 
}

.form-group.error .error-message, 
.form-group-check.error .error-message { 
    display: block; 
}

.teaser-form-in-end img {
    max-width: 50px;
    margin-bottom: 20px;
}

.teaser-text-outro {
    color: #4D4741;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 10px;
    line-height: 1.6;
}

/* --- SECTION 3: FOOTER --- */
.teaser-footer {
    background-color: #0C0C0C;
    padding: 50px 20px;
}

.teaser-footer-in {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*
    gap: 25px;
    */
    font-size: 0.8rem;
}

.teaser-footer-in2{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.footer-tel {
    color: #B79C5E;
    font-family: 'Basis Grotesque Arabic Pro Lt', sans-serif;
    font-weight: 300;
    font-size: 30px;
    letter-spacing: 1px;
}

.linie-teaser {
    width: 100%;
    height: 1px;
    background-color: rgba(201, 166, 118, 0.6);
    margin-top: 25px;
    margin-bottom: 25px;
}

.footer-logo-text {
    max-width: 140px;
}

.ft-txt{
    font-size: 12px;
}

.copy{
    font-size: 10px;
}

.lnk-cosmoplit{
    position: relative;
    display: block;
    width: auto;
}

.tf-separator{
    width: 100%;
    height: 1px;
    background-color: #cba571;
}

/* --- SECTION: TF2 --- */
.tf2 {
    padding: 80px 0; /* Padding sus/jos, fara stanga/dreapta */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Pe mobil, una sub alta */
}

/* Coloana Stanga */
.tf2-s {
    text-align: center;
    padding: 0 25px; /* Padding stanga/dreapta pentru continut */
}

.titlu-tf2 {
    color: #4d4741;
    font-family: 'Basis Grotesque Arabic Pro Lt';
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.tf2-poza img {
    width: 100%;
    height: auto;
    display: block;
}

/* Coloana Dreapta */
.tf2-d {
    color: #ffffff;
    padding: 60px 25px 0 25px; /* Spatiu sus, si padding stanga/dreapta */
}

.tf2-d .despre-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tf2-d .despre-text p {
    color: #4d4741;
}

.tf2-d .btn-toggle-details {
    color: #cba571;
}

/* Reutilizam linia despartitoare */
.tf2-d .linie-despartitoare {
    margin: 30px 0;
}

.tf2-d .calup-text p{
    font-size: 16px; 
}

.tf2-d .calup-text .text-extins p{
    font-size: 12px;
    margin-top: 10px;
}

.teaser-form-sus{
    text-align: center;
}

.teaser-form-sus-titlu {
    color: #F0F1F1;
    font-family: 'Basis Grotesque Arabic Pro Lt';
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 60px;
}

/* --- DESKTOP STYLES --- */
@media (min-width: 992px) {
    .paddgen{
        padding-left: 50px;
        padding-right: 50px;
    }

    /* Animatia butonului Hamburger -> X */
    .head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(1) {
        transform: translateY(13px) rotate(45deg);
    }
    .head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(2) {
        opacity: 0;
    }
    .head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(3) {
        transform: translateY(0px) rotate(-45deg);
    }
    .head-fixed-general-on-scroll.menu-is-open .deschide-meniu span:nth-child(4) {
        opacity: 0;
    }

    .panel-menu-content {
        padding-top: 120px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .panel-menu-link {    
        font-size: clamp(24px, 19.72px + 0.43vw, 28px);
    }
    
    .head-fixed-general-on-scroll.menu-is-open::after {
        left: 50px;
        right: 50px;
    }

    .head-fixed-general-on-scroll {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .logo .logo-complet {
        height: 25px;
    }

    .nav-first {
        gap: 50px;
    }

    .header-phone-icon img {
        height: 22px;
    }

    .deschide-meniu {
        width: 24px;
        height: 20px;
    }

    .deschide-meniu span {
        height: 2px; /* Grosimea liniilor */
    }

    .intro-pagina {
        background-image: 
            /* Stratul 1 (deasupra): Gradientul */
            linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.01) 50%),
            /* Stratul 2 (dedesubt): Imaginea originala */
            url('../img/intro-pagina-bk.jpg');
        height: 98vh;
	background-position: bottom 55% center;
    }

    .h1titlu {
        font-size: clamp(48px, 33.03px + 1.51vw, 62px);
    }

.ast{
width:100%;
min-width:300px;
height:auto;
}

    .h1subtitlu {
        font-size: 20px;
    }

    .intro-pagina-buttons {
        flex-direction: row; /* Butoanele sunt una langa alta pe desktop */
        justify-content: center;
        max-width: 800px;
    }

    .intro-btn {
        font-size: 14px;
        white-space: nowrap;
    }

    .despre-insert {
        flex-direction: row; /* Pe desktop, coloanele sunt una langa alta */
        min-height: 80vh;
    }

    .despre-insert-s, .despre-insert-r {
        width: 50%;
    }

    .despre-insert-s {
        padding: 80px 0px;
    }

    .despre-logo {    
        max-width: clamp(120px, 77.24px + 4.31vw, 160px);
    }

    .despre-insert .despre-content {
        max-width: 100%;
        margin: 0 auto;
        padding-left: 50px;
        padding-right: 50px;
    }

    .despre-insert .despre-text {
        font-size: clamp(14px, 9.72px + 0.43vw, 18px);
        font-weight: 300;
        line-height: clamp(1.2em, 1.614em - 0.022vw, 1.4em);
    }

    .btn-toggle-details{
        font-size: clamp(12px, 9.86px + 0.22vw, 14px);
    }

    .btn-programare {        
        font-size: clamp(10px, 7.86px + 0.22vw, 12px);
    }

    .slider-navigation {
        right: 50px;
        font-size: 18px;
    }

    .slider-title {
        max-width: 500px;
	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }

    .localizare {
        padding-top: 80px;
        padding-bottom: 80px;
        min-height: 80vh;
    }

    .localizare-container {
        width: 100%;
    }

    .localizare-container {
        flex-direction: row; /* Coloanele una langa alta pe desktop */
        align-items: center; /* Aliniere verticala pe mijloc a coloanelor */
    }

    .localizare-s, .localizare-r {
        width: 50%;
        text-align: left; /* Aliniere la stanga pe desktop */
    }
    
    .localizare-titlu {        
        font-size: clamp(22px, 19.86px + 0.22vw, 24px);
        line-height: 1.2;
        margin-bottom: 80px;
    }
    
    .localizare-subtitlu {    
        font-size: clamp(18px, 15.86px + 0.22vw, 20px);
    }

    .beneficii-grid {
        grid-template-columns: 1fr 1fr; /* Doua coloane pe desktop */
        gap: 40px 30px; /* Spatiu vertical si orizontal */
    }

    .beneficiu-item span {        
        font-size: clamp(13px, 9.79px + 0.32vw, 16px);
    }

    .localizare-r .btn-programare {
        justify-content: flex-start; /* Aliniere la stanga pe desktop */
    }

    .arhitectura-design {
        flex-direction: row; /* Coloanele una langa alta pe desktop */
    }

    .arhitectura-design-s, .arhitectura-design-d {
        width: 50%;
        min-height: 80vh;
    }

    .arhitectura-design-s {
        background-image: url('../img/arhitectura-desktop.jpg');
        background-position: top center;
    }

    .arhitectura-logo-overlay {
        position: absolute;
        top: 38%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        max-width: 700px;
    }

    .arhitectura-design-d {
        padding: 80px 50px;
    }

    .arhitectura-titlu {
        font-size: clamp(22px, 19.86px + 0.22vw, 24px);
    }

    .arhitectura-subtitlu {
        font-size: clamp(18px, 15.86px + 0.22vw, 20px);
    }

    .arhitectura-desc {
        /* Pe desktop, scoatem padding-ul lateral al parintelui */
        
    }
    
    .arhitectura-desc-s p {
        font-size: clamp(13px, 9.79px + 0.32vw, 16px);
        line-height: 1.4;
        padding-left: 15px;
        padding-right: 15px;
    }

    .apartamente {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .apartamente-container {
        flex-direction: row;
        gap: 50px;
        min-height: 80vh;
    }
    
    .apartamente-s {
        width: 50%;
        text-align: left;
    }
    
    .apartamente-d {
        width: 50%;
        /*
        display: flex;
        flex-direction: column;
        justify-content: center;
        */
    }

    .apartamente-titlu {
        font-size: clamp(22px, 19.86px + 0.22vw, 24px);
        line-height: 1.2;
        margin-bottom: 80px;
    }

    .acordeon-header h3 {        
        font-size: clamp(18px, 15.86px + 0.22vw, 20px);
    }

    .detalii-acordeon{
        font-size: clamp(12px, 9.86px + 0.22vw, 14px);
    }
    
    .item-desc-s h3 {            
        font-size: clamp(14px, 11.86px + 0.22vw, 16px);
    }

    .btn-vezi-schita {
        font-size: clamp(10px, 7.86px + 0.22vw, 12px);
    }

    .teaser-film {
        background-image: url('../img/creamy.jpg');
/*
        background-image: 
                linear-gradient(to top, rgba(153, 97, 38, 0.8) 0%, rgba(141, 91, 37, 0.3) 100%),
                url('../img/auriu-d.jpg');
*/
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .tf1{
        flex-direction: row; /* Coloane una langa alta pe desktop */
        padding-bottom: 80px;
    }

    .teaser-video-col, .teaser-content-col {
        width: 50%;
    }

    .teaser-video-sticky-container {
        position: -webkit-sticky; /* Pentru Safari */
        position: sticky;
        top: 100px; /* Spatiu fata de partea de sus a ecranului */
    }

    .teaser-video-wrapper {
        padding-top: 100%; 
    }

    #teaserVideoMobile {
        display: none;
    }

    #teaserVideoDesktop {
        display: block;
    }

    .video-title {
        font-size: 32px;
    }

    .btn-video-play {
        width: auto;
        height: 40px;
    }

    .teaser-content-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 50px;
    }

    .teaser-content-inner {
        /*max-width: 1200px;*/
        margin: 0;
    }

    .teaser-content-titlu {
        font-size: clamp(22px, 19.86px + 0.22vw, 24px);
    }

    .teaser-content-subtitlu {
        font-size: clamp(18px, 15.86px + 0.22vw, 20px);
    }

    .tf1 .despre-text p {
        /*font-size: 18px;*/
        font-size: clamp(13px, 9.79px + 0.32vw, 16px);
        line-height: 1.4;
        padding-left: 15px;
        padding-right: 15px;
    }

    .tf1 .btn-toggle-details{
        margin-left: 15px;
    }

    .tf2 {
        padding: 100px 50px; /* Marim padding-ul general pe desktop */
        flex-direction: row; /* Una langa alta pe desktop */
        align-items: center; /* Aliniere verticala pe mijloc */
        gap: 5%;
    }

    .tf2-s, .tf2-d {
        width: 50%;
        padding: 0; /* Eliminam padding-ul stanga/dreapta */
    }

    .tf2-s {
        text-align: left;
    }

    .titlu-tf2 {
        font-size: clamp(22px, 19.86px + 0.22vw, 24px);
        line-height: 1.2;
        margin-bottom: 80px;
    }

    .tf2-d .calup-text p{    
        font-size: clamp(16px, 11.72px + 0.43vw, 20px);
    }
    
    .tf2-d .calup-text .text-extins p{
        font-size: clamp(14px, 11.86px + 0.22vw, 16px);
        margin-top: 20px;
    }
 
    .btn-submit { 
        font-size: 14px;
        font-family: 'Basis Grotesque Arabic Pro Md', sans-serif;
    }

    .btn-submit:hover {
        background-color: #B79C5E;
        color: #E7E2DC;
    }
    
    .teaser-form {
        padding: 100px 40px;
    }

    .teaser-form-in {
        padding: 70px;
    }

    .teaser-titlu {
        font-size: 46px;
    }
    .teaser-subtitlu, .teaser-text-outro {
        font-size: 12px;
    }

    .teaser-formular {
        padding: 0 50px;
    }

    .teaser-form-in-end img {
        max-width: 50px;
        margin-bottom: 30px;
    }

    .teaser-footer-in {
        font-size: 0.9rem;
    }

    .footer-tel {
        font-size: 2.2rem;
    }

    .linie-teaser {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .footer-logo-text {
        max-width: 200px;
    }

    .teaser-footer-in2{
        gap: 10px;
    } 

    .teaser-form-sus-titlu {        
        /*font-size: clamp(22px, 19.86px + 0.22vw, 24px);*/    
        font-size: clamp(24px, 19.72px + 0.43vw, 28px);
        line-height: 1.2;
        margin-bottom: 80px;
    }
    
}

/* Stiluri pentru mesajele formularului */
.form-messages {
    width: 100%;
    max-width: 400px;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    display: none; /* Ascuns initial */
    margin: auto;
}

.form-messages.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-messages.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Stil pentru buton in timpul trimiterii */
.btn-submit.sending {
    cursor: not-allowed;
    background-color: #A6A8AB;
    border-color: #A6A8AB;
    color: #fff;
}

.anpcl img{
    max-width:100px;
    height:auto;
}

.anpcl-extra{
    margin-top:30px;
}