*{
	margin: 0;
    padding: 0;
	box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #232323;
    text-decoration: solid;
}

header {
    position: relative;
    overflow: hidden;
    text-align: center;
}


.SMTU

.Raul:link,
.Raul:visited,
.Raul:active {
    color: rgb(22, 170, 22) !important;
    text-decoration: none !important; 
    transition: color 0.3s ease;
}

.Raul:hover {
    color: red !important;
    text-decoration: none !important; 
}

.contact-container {
    padding-top: 2%;
    padding-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    background-color: #1b2838; /* Dark blue background */
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 50px; /* Rounded edges */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    outline: none;
}

.contact-button:hover {
    background-color: rgba(211, 211, 211, 0.3); /* Light gray transparent background */
    color: black; /* Text turns black */
    border-color: black; /* Slim black border */
}

.whatsapp-logo {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.contact-button img {
    vertical-align: middle;
}



.content {
    padding: 20px;
    text-align: center;
    margin: 0 20px; /* Adjust the margin for distance from left and right */
}


.titlu-pagini {
    font-family: "Bebas Neue", sans-serif;
    font-size: 3em;
    color: white;
    font-weight: bold;
    text-align: middle;
    padding-top: 5%;
}


.text {
    font-size: 1.2em;
    color: white;
    font-weight: bold;
    line-height: 1.5;
    padding-bottom: 5%;
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
}


.text-u-ol {
    font-size: 1em;
    color: white;
    font-weight: bold;
    line-height: 1.5;
    padding-top: 1%;
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
}

.text-ol {
    font-size: 1em;
    color: white;
    font-weight: bold;
    line-height: 1.5;
    padding-top: 1%;
    text-align: left;
    margin-left: 17%;
    margin-right: 15%;
}

.logo-container {
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */

}


.responsive-logo {
    padding-top: 10px;
    padding-bottom: 6%;
    max-width: 600px;
    height: auto;
}

.site-intro {
    font-size: 2em;
    color: black;
    font-weight: bold;
    text-align: middle;
}

.site-intro-1 {
    font-size: 3em;
    padding-bottom: 25%;
    color: white;
    font-weight: bold;
    text-align: middle;
}

.nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    position: relative;
    padding: 45px 240px;
    color: white;
}

.steam-bg {
    position: relative;

    /* background image */
    background: url("photos/page/Picture.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.steam-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.port-bg {
    position: relative;

    /* background image */
    background: url("photos/page/port1.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.port-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.evenimente-bg {
    position: relative;

    /* background image */
    background: url("photos/page/evenimente-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.evenimente-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.produse-bg {
    position: relative;

    /* background image */
    background: url("photos/page/produse-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.produse-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.shaormashukran-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/produse/low-res/portfolio-products-shaowrma-21.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.shaormashukran-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.autovehicule-bg {
    position: relative;

    /* background image */
    background: url("photos/page/autovehicule-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.autovehicule-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.sedinteFoto-bg {
    position: relative;

    /* background image */
    background: url("photos/page/sedinteFoto-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.sedinteFoto-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.privateArmataFlorii-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/sedinteFoto/private/DSC04330.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.privateArmataFlorii-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.privateArmataDenis-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/sedinteFoto/private/denis/low-res/@shotbyfunder-DenisJuramant-62.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.privateArmataDenis-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.privateArmataFlavia-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/sedinteFoto/private/flaviaArmata/DSC04773-2.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.privateArmataFlavia-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.sedinteFotoBall-bg {
    position: relative;

    /* background image */
    background: url("photos/page/Ball2025DA-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.sedinteFotoBall-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}



.adrianNorocel1-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/ballAutoDrept28.11.2025/adrianNorocel/low-res/@shotbyfunder-ballDreptAutoAdrianNorocel2025-31.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.adrianNorocel1-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.evenimentBallAutoDrept281125-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/ballAutoDrept28.11.2025/eveniment/low-res/@shotbyfunder-ballDreptAutoEveniment2025-00.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.evenimentBallAutoDrept281125-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}



.concurentiBallAutoDrept281125-bg {
    position: relative;

    /* background image */
    background: url("photos/portfolio/ballAutoDrept28.11.2025/concurenti/low-res/@shotbyfunder-ballDreptAutoConcurenti2025-04.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.concurentiBallAutoDrept281125-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.iubita-bg {
    position: relative;

    /* background image */
    background: url("photos/page/iubita&david.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.iubita-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}
.printu-bg {
    position: relative;

    /* background image */
    background: url("photos/private/share/low-res/@shotbyfunder-private-share-57.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.printu-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.elenaDanut-bg {
    position: relative;

    /* background image */
    background: url("photos/private/share/high-res/@shotbyfunder-private-share-65.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.elenaDanut-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}



.OSACEbilliard-bg {
    position: relative;

    /* background image */
    background: url("photos/private/OSACE/low-res/@shotbyfunder-private-osace-048.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.OSACEbilliard-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}
.cosminAndrei-bg {
    position: relative;

    /* background image */
    background: url("photos/page/cosminAndrei.png") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.cosminAndrei-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}


.omv240126batmaro-bg {
    position: relative;

    /* background image */
    background: url("photos/private/OMV24012026/low-res/@shotbyfunder-OMV24012026-22.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.omv240126batmaro-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.omv240126corvette-bg{
    position: relative;

    /* background image */
    background: url("photos/private/OMV24012026/low-res/@shotbyfunder-OMV24012026-36.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.omv240126corvette-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.botez8-11-25-bg {
    position: relative;

    /* background image */
    background: url("photos/private/botez/8.11.2025/low-res/@shotbyfunder-botez-8.11.25-09.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.botez8-11-25-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}


.botez17-1-26-bg {
    position: relative;

    /* background image */
    background: url("photos/private/botez/17.01.2026/low-res/@shotbyfunder-botez-coperta-17.01.2026.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.botez17-1-26-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}


.sasukeAndt131225-bg {
    position: relative;

    /* background image */
    background: url("photos/private/andt&sasuke/low-res/@shotbyfunder-andt&sasuke-13.12.25-12.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.asukeAndt131225-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.celentano-bg {
    position: relative;

    /* background image */
    background: url("photos/private/celentano/low-res/@shotbyfunder-celentano-18.12.25-01.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.celentano-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.e907126-bg {
    position: relative;

    /* background image */
    background: url("photos/private/e90-7.1.26/low-res/@shotbyfunder-lowres-e90-7.1.26-10.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.e907126-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}


.omv250126tts-bg {
    position: relative;

    /* background image */
    background: url("pages/cars/photos/low-res/cars-audi-8.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover;

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh;
    /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px;
}

.omv250126tts-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}



.IR-bg {
    position: relative;

    /* background image */
    background: url("photos/page/I&R-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.IR-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.AM-bg {
    position: relative;

    /* background image */
    background: url("") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.AM-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.MdP-bg {
    position: relative;

    /* background image */
    background: url("photos/page/MdP-page.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.MdP-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.ser-bg {
    position: relative;

    /* background image */
    background: url("photos/page/Me-camera2.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.ser-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}
 

.IlincaAmelia-bg {
    position: relative;

    /* background image */
    background: url("photos/private/botez/28.03.2026/low-res/@shotbyfunder-botez-ilincaAmelia-29.03.26-023.jpg") no-repeat center center;

    /* afișare corectă, cinematică, fără distorsiuni */
    background-size: cover; 

    /* dimensiunea secțiunii ca să se vadă poza întreagă */
    min-height: 60vh; /* sau 70–80vh după preferință */

    /* banda neagră poate fi pusă aici sau separat */
    padding-top: 50px; 
}

.IlincaAmelia-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
    z-index: 1;
    pointer-events: none;
}

.logo img {
    width: 120px;
    height: auto;
}

.menu {display: flex;}
.menu li {
    padding-left: 30px;
    padding-right: 30px;
}
.menu li a {
    display: inline-block;
    text-decoration: none;
    color: var(--color1);
    text-align: center;
    transition: 0.15s ease-in-out;
    position: relative;
    text-transform: uppercase;
}
.menu li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color1);
    transition: 0.15s ease-in-out;
}
.menu li a:hover:after {width: 100%;}
.open-menu , .close-menu {
    position: absolute;
    color: var(--color1);
    cursor: pointer;
    font-size: 1.5rem;
    display: none;
}
.open-menu {
    top: 50%;
    right: 34%;
    transform: translateY(-50%);
}
.close-menu {
    top: 40px;
    right: 40px;
}

.footer{
	padding: 4%;
    padding-bottom: 5%;
    margin-right: 20%;
    margin-left: 20%;
    background-color: transparent;
}

.container-footer{
	max-width: 1160px;
	margin:auto;
}

.footer-col{
   width: 35%;
   margin-left: 20px;

}
.footer-col h4{
	font-size: 18px;
	color: #ffffff;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #e91e63;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}

.footer-col ul {
    padding-left: 20px;
}

.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

.footer-col ul li::marker {
    color: white;
}

.row{
	display: flex;
	flex-wrap: wrap;
}

.i_content_FAQ {
    box-sizing: border-box;
    padding: 4%;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 10%;
    color: #FFFFFF;
}

.faq-container {
    max-width: 2000px;
    margin: 0 auto;
  }
  
  .faq-question {
    margin-bottom: 10px;
    padding: 10px;
    cursor: pointer;
  }
  
  .faq-question:hover {
    background-color: #e0e0e0;
  }
  
  .faq-answer {
    display: none;
  }
  
  .faq-question.active .faq-answer {
    display: block;
  }

  .faq-question:target {
    height: auto;
  }
  
  .faq-question:target h3 {
    font-weight: bold;
  }
  
  .faq-question:target .faq-answer {
    display: block;
  }

  .body_FAQ{
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

.titleFAQ {
    font-size: 50px;
    text-align: center;
    margin-bottom: 5%;
    text-decoration: underline 4px;
}

.questions-container{
    max-width: 2000px;
    margin: 0 auto;
}

.question{
    border-bottom: 1px solid #fff;
}
.question button{
    width: 100%;
    background-color: #232323;;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    border:none;
    outline: none;
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.question p{
    font-size: 22px;
    max-height: 0;
    opacity: 0;
    line-height: 1.5;
    overflow: hidden;
    transition: all 0.6s ease;
}
.d-arrow{
    transition: transform 0.5s ease-in ;
    color: #fff;
}

/*add this class when click*/
.question p.show{
    max-height: 2000px; 
    opacity: 1;
    padding:0px 15px 30px 15px;
}

/* IMAGE GRID */
/* IMAGE GRID - DYNAMIC DESKTOP */
.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px; /* bigger space between images */
    margin: 40px 0;
}

.image-card {
    position: relative;
    width: 300px;  /* bigger than before */
    height: 300px; /* keep 1:1 */
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* stagger rotation */
.image-card:nth-child(odd) {
    transform: rotate(-3deg);
}

.image-card:nth-child(even) {
    transform: rotate(3deg);
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.image-card:hover img {
    transform: scale(1.15) rotate(0deg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}

.image-text {
    position: absolute;
    bottom: 30px; /* text slightly above bottom */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    padding: 0 5px;
}

.about-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin: 80px 0;
    padding: 0 5%;
}

.about-image img {
    width: 420px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

.about-text {
    flex: 1;
}

.about-image {
    margin-left: 14%;   /* same as .text from desktop */
}

/* ===== PORTFOLIO SECTION ===== */

/* === PORTFOLIO MASONRY (4 columns, 2px gaps) === */
.portfolio__section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1rem;
}

.portfolio__header {
    position: relative;
    width: fit-content;
    margin: 0 auto 3rem;
    padding-bottom: 0.5rem;
    font-size: 3rem;
    font-weight: 800;
    color: white;
}

.portfolio__header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 2px;
    background-color: white;
}

/* === Masonry columns === */

/* ====== Portfolio grid (for JustifiedGallery) ====== */
.portfolio__grid {
    /* container used by JustifiedGallery - don't force column-count/grid here */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Keep the anchors block-level so JS can size them */
.portfolio__grid a {
    display: block;
}


/* Prevent any CSS from forcing a square crop on images.
   Let the JustifiedGallery script control sizing (it will add inline widths/heights). */
.portfolio__grid img,
.justifiedGallery img,
.portfolio__grid a img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* keeps whole image visible, no cropping */
}


/* ================================
   TIKTOK EMBED FIX — FINAL CLEAN VERSION
   ================================ */

.tiktok-section {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.tiktok-header {
    position: relative;
    width: fit-content;
    margin: 0 auto 3rem;
    padding-bottom: 0.5rem;
    font-size: 3rem;
    font-weight: 800;
    color: white;
}

.tiktok-header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 2px;
    background-color: white;
}

/* GRID FIX — this is the real fix for desktop */
.tiktok-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    grid-auto-rows: auto !important;
    align-items: start !important;
}

.tiktok-card {
    background: transparent;
    padding: 0;
    margin: 0;
    overflow: visible !important;

    /* REQUIRED to remove scroll on desktop */
    height: auto !important;
    max-height: none !important;
}

.tiktok-card blockquote.tiktok-embed {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tiktok-card iframe {
    width: 100% !important;

    /* prevents clipping */
    height: auto !important;

    /* DESKTOP FIX */
    min-height: 850px !important;

    display: block !important;
    overflow: visible !important;
}

/* FORCE DARK BACKGROUND AROUND EMBED */
.tiktok-card {
    background: #232323 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* REMOVE ALL INTERNAL MARGINS */
.tiktok-card blockquote {
    margin: 0 !important;
    padding: 0 !important;
    background: #232323 !important;
}

/* FORCE IFRAME TO TAKE FULL WIDTH */
.tiktok-card iframe {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    background: #232323 !important;
}

/* Mobile taller embeds */
@media (max-width: 768px) {
    .tiktok-card iframe {
        min-height: 950px !important;
    }
}







/* RESPONSIVE */
@media (max-width: 1024px) {
    .portfolio__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .portfolio__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 1100px) {
    .portfolio__grid.fallback-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
}
@media (max-width: 1024px) {
    .portfolio__grid.fallback-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .portfolio__grid.fallback-grid { grid-template-columns: repeat(2, 1fr); }
}





/* Mobile */
@media (max-width: 900px) {
    .about-section {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .about-text .text {
        margin-left: 5% !important;
        margin-right: 5% !important;
        text-align: left;
    }

    .about-image img {
        width: 80%;
        border-radius: 20px;
    }

    .about-image {
        margin-left: 5%;
        margin-right: 5%;
    }
}


/* MOBILE STYLING */
@media screen and (max-width: 768px) {
    .image-card {
        width: 70%;           
        height: auto;         
        aspect-ratio: 1 / 1;  
        margin-bottom: 20px;
        border-radius: 50%;   
        transform: rotate(0deg);
    }

    .image-card img {
        border-radius: 50%;
    }

    .image-row {
        gap: 0; /* stacked vertically */
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 768px){


    .text {
        font-size: 1em;
        color: white;
        font-weight: bold;
        line-height: 1.5;
        padding-bottom: 10%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .text-u-ol {
        font-size: 1em;
        color: white;
        font-weight: bold;
        line-height: 1.5;
        padding-top: 1%;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
    }

    .site-intro {
        font-size: 1.25em;
        padding-bottom: 3%;
        color: white;
        text-align: middle;
    }

    .contact-container {
        padding-top: 2%;
        padding-bottom: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .responsive-logo {
        max-width: 70%;
        height: auto;

    }

}

/* Move the arrows inside the image on mobile */
@media (max-width: 768px) {

    .title {
        bottom: 10%; /* Adjust the bottom value for a slightly higher position on mobile */
        font-size: 1.5em;
    }

    .text {
        margin-top: 10px; /* Adjust the margin-top value for a slightly higher position on mobile */
        font-size: 1em;
    }
}

#check {display: none;}
@media(max-width: 1012px){
    .menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 89%;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 100;
        background-color: black;
        transition: all 0.2s ease-in-out;
    }


    .menu li {margin-top: 40px;}
    .menu li a {padding: 10px;}
    .open-menu , .close-menu {display: block;}
    #check:checked ~ .menu {right: 0;}
    .nav-bar {
        width: 100%;
        display: flex;
        justify-content: space-between;
        list-style: none;
        position: relative;
        padding: 45px;
    }
    .nav-bar {
        padding-left: 70%;
    }

    .steam-bg {
        position: relative;
        background-color: #232323; /* Same as the grey background */
    }
    
    .steam-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
        z-index: 1;
        pointer-events: none;
    }

    .port-bg {
        position: relative;
        background-color: #232323; /* Same as the grey background */
    }
    
    .port-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #232323 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #232323 100%);
        z-index: 1;
        pointer-events: none;
    }

}

@media(max-width: 767px){
    .footer-col{
        width: 50%;
        margin-bottom: 30px;
    }
}
@media(max-width: 500px){
    .footer-col{
        width: 100%;
    }
    .footer{
         margin-left: 12%;
         margin-right: 12%;
    }
}

.copyright {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


/* ================================
   LIGHT THEME — GLOBAL
================================ */

.body-light {
    background: #ffffff;
    color: #000000;
    font-family: "Quicksand", sans-serif;
}

/* ================================
   NAVBAR — LIGHT
================================ */

.nav-light {
    width: 100%;
}

.nav-bar-light {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 45px 240px;
    list-style: none;
}

.nav-bar-light a {
    color: #000 !important;
    text-transform: uppercase;
}

.menu-light {
    display: flex;
}

.menu-light li {
    padding-left: 30px;
    padding-right: 30px;
}

.menu-light li a {
    position: relative;
}

.menu-light li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: #e91e63;
    transition: 0.3s ease;
}

.menu-light li a:hover::after {
    width: 100%;
}

.logo-light img {
    width: 120px;
}

/* MOBILE NAV — LIGHT */

#check-light { display: none; }

.open-menu-light,
.close-menu-light {
    display: none;
}

@media (max-width: 1012px) {

    .menu-light {
        position: fixed;
        right: -100%;
        top: 0;
        width: 80%;
        height: 100vh;
        background: white;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.2s ease;
        z-index: 1000;
    }

    #check-light:checked ~ .menu-light {
        right: 0;
    }

    .open-menu-light,
    .close-menu-light {
        display: block;
        position: absolute;
        color: #000;
        font-size: 2rem;
    }

    .open-menu-light {
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
    }

    .close-menu-light {
        top: 40px;
        right: 40px;
    }
}

/* ================================
   LIGHT THEME — FINAL (UPDATED)
   Place this at the BOTTOM of styles.css
   ================================ */

/* Global */
.body-light {
    background: #ffffff;
    color: #000000;
    font-family: "Quicksand", sans-serif;
}

/* NAVBAR LIGHT */
.nav-bar-light {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 45px 240px;
    list-style: none;
    margin: 0;
}

.logo-light img {
    width: 120px;
    height: auto;
}

/* links */
.nav-bar-light a {
    color: #000 !important;
    text-decoration: none;
    font-weight: 500;
}

/* desktop menu spacing */
.menu-light {
    display: flex;
    gap: 20px;
    align-items: center;
}

.menu-light li { list-style: none; }
.menu-light li a { position: relative; padding: 6px 0; }

/* underline accent */
.menu-light li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: #e91e63;
    transition: width .25s ease;
}
.menu-light li a:hover::after {
    width: 100%;
}

/* MOBILE HAMBURGER — show the three lines icon (fa-bars) on mobile
   Behavior mirrors your original site: open-menu visible on small screens,
   toggles the sliding menu which holds the close icon. */
.open-menu-light,
.close-menu-light {
    display: none; /* hidden on desktop */
}

/* the checkbox that controls mobile menu: #check-light is in the HTML */
#check-light { display: none; }

/* MOBILE: slide-in menu */
@media (max-width: 1012px) {
    .nav-bar-light { padding: 45px; }

    .menu-light {
        position: fixed;
        right: -100%;
        top: 0;
        width: 89%;
        height: 100vh;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        justify-content: center;
        transition: right 0.22s ease;
        z-index: 9999;
    }

    /* when checkbox checked, menu slides in */
    #check-light:checked ~ .menu-light { right: 0; }

    .open-menu-light {
        display: block;
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.6rem;
        color: #000;
        cursor: pointer;
        z-index: 10000;
    }

    .close-menu-light {
        display: block;
        position: absolute;
        right: 24px;
        top: 28px;
        font-size: 1.6rem;
        color: #000;
        cursor: pointer;
    }

    .menu-light li {
        padding: 10px 0;
    }

    .menu-light li a { font-size: 1.25rem; color: #000; }
}

.tiktok-section-light {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.tiktok-header-light {
    font-family: "Bebas Neue", sans-serif;
    font-size: 3rem;
    color: #000;
    font-weight: 800;
    position: relative;
    width: fit-content;
    margin: 0 auto 3rem;
    padding-bottom: 0.5rem;
}

.tiktok-header-light::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 2px;
    background: #e91e63;
}

.tiktok-grid-light {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.tiktok-card-light {
    background: #ffffff;
    overflow: hidden !important;
}

.tiktok-card-light iframe {
    width: 100% !important;
    min-height: 850px !important;
    border: none;
    background: white !important;
}

@media (max-width: 768px) {
    .tiktok-card-light iframe {
        min-height: 950px !important;
    }
}
@media (max-width: 768px) {
    .tiktok-card-light iframe { min-height: 950px !important; }
}

.tiktok-card-light {
    background: #ffffff;
    padding: 0;
    overflow: visible !important;

    /* REMOVE fade-in line problem */
    border-radius: 0 !important;
    box-shadow: none !important;

    display: flex;
    justify-content: center;
    align-items: start;
}

/* FOOTER LIGHT */
.footer-light {
    padding: 4%;
    margin-left: 20%;
    margin-right: 20%;
    background: #ffffff;
    color: #000;
}
.container-footer-light { max-width: 1160px; margin: 0 auto; }
.row-light { display: flex; gap: 40px; flex-wrap: wrap; }

/* columns */
.footer-col-light { width: 35%; min-width: 200px; }
.footer-col-light h4 {
    font-size: 18px;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
}
.footer-col-light h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: #e91e63;
    height: 2px;
    width: 50px;
}

/* list links */
.footer-col-light ul { padding-left: 20px; margin: 0; }
.footer-col-light ul li { margin-bottom: 8px; list-style: none; }
.footer-col-light ul li a {
    color: #555;
    text-decoration: none;
    font-weight: 300;
    display: block;
    transition: all .2s ease;
}
.footer-col-light ul li a:hover { color: #000; padding-left: 8px; }

/* SOCIAL ICONS */
.social-links-light {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.social-links-light a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: #000;
    text-decoration: none;
    transition: all .25s ease;
}
.social-links-light a i { font-size: 18px; }
.social-links-light a:hover { background: #e91e63; color: #fff; transform: translateY(-3px); }

/* COPYRIGHT LINE */
.copyright-light {
    text-align: center;
    padding: 15px;
    background: #f3f3f3;
    color: #111;
    font-size: 0.95rem;
}
/* keep the Raul-light link style consistent */
.Raul-light, .Raul-light:visited { color: #e91e63; text-decoration: none; font-weight: 700; }
.Raul-light:hover { color: #c2185b; }

/* RESPONSIVE FOOTER */
@media (max-width: 1024px) {
    .container-footer-light { padding: 0 5%; }
    .footer-col-light { width: 48%; }
}
@media (max-width: 768px) {
    .footer-col-light { width: 100%; }
    .nav-bar-light { padding: 24px; }
    .copyright-light { font-size: 0.9rem; }
}

/* ===============================
   PORTFOLIO — LIGHT THEME VERSION
   =============================== */

.portfolio-light-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1rem;
    background: #ffffff;
}

.portfolio-light-header {
    position: relative;
    width: fit-content;
    margin: 0 auto 3rem;
    padding-bottom: 0.5rem;
    font-size: 3rem;
    font-weight: 800;
    color: #000;
    font-family: "Bebas Neue", sans-serif;
}

.portfolio-light-header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 2px;
    background-color: #e91e63;
}

/* MASONRY GRID — LIGHT VERSION */
.portfolio-light-grid {
    column-count: 4;
    column-gap: 2px;
}

.portfolio-light-grid a {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 2px;
}

.portfolio-light-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .portfolio-light-grid { column-count: 3; }
}

@media (max-width: 768px) {
    .portfolio-light-grid { column-count: 2; }
}

@media (max-width: 480px) {
    .portfolio-light-grid { column-count: 1; }
}

/* ====================================================
   NEW: PRISM FLUX CAROUSEL CSS for PORTFOLIO PAGES 
   (Used on sedinteFoto.html, autovehicule.html, etc.)
   ==================================================== */

/* Variables are used from the main block in styles.css if already added */

/* ====================================================
   NEW: PRISM FLUX CAROUSEL CSS for PORTFOLIO PAGES 
   (Used on sedinteFoto.html, autovehicule.html, etc.)
   ==================================================== */

/* ====================================================
   NOU: STILURI CARUSEL PORTOFOLIU (Pentru sub-pagini)
   ==================================================== */

/* Containerul principal */
/* ====================================================
   NEW: PRISM FLUX CAROUSEL CSS for PORTFOLIO PAGES 
   (Used on sedinteFoto.html, autovehicule.html, etc.)
   ==================================================== */

/* Variables are used from the main block in styles.css if already added */

/* ====================================================
   NEW: PRISM FLUX CAROUSEL CSS for PORTFOLIO PAGES 
   (Used on sedinteFoto.html, autovehicule.html, etc.)
   ==================================================== */

/* ====================================================
   NOU: STILURI CARUSEL PORTOFOLIU (Pentru sub-pagini)
   ==================================================== */

/* ====================================================
   NOU: STILURI CARUSEL PORTOFOLIU (pentru paginile interne)
   Acest bloc se adaugă la sfârșitul fișierului styles.css
   ==================================================== */

/* Container Principal al Caruselului */
/* ====================================================
   NOU: STILURI CARUSEL PORTOFOLIU (pentru paginile interne)
   FINAL - 1:1 Aspect Ratio + ACTIVARE 3D (cu prefixare -webkit-)
   ==================================================== */

/* Container Principal al Caruselului */
/* ====================================================
   NOU: STILURI CARUSEL PORTOFOLIU (pentru paginile interne)
   FINAL - 1:1 Aspect Ratio + ACTIVARE 3D
   ==================================================== */

/* Container Principal al Caruselului */
.hero-portfolio {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px 20px;
    /* Asigură un context de randare curat */
    overflow: hidden; 
}

.carousel-container-portfolio {
    width: 100%;
    max-width: 1000px; /* Mai compact pentru a vedea efectul mai bine */
    height: 450px;
    position: relative;
    margin-top: 20px;
    
    /* ESENȚIAL PENTRU 3D */
    perspective: 1000px; 
    -webkit-perspective: 1000px;
}

.carousel-portfolio {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Slide-ul Individual */
.carousel-item-portfolio {
    position: absolute;
    width: 300px; 
    height: 400px; 
    left: 50%;
    top: 50%;
    /* Centrare și pregătire pentru transformare */
    transform: translate(-50%, -50%); 
    
    /* Activare 3D pe element */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    
    /* Tranziție fluidă pentru mișcare */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
    
    cursor: pointer;
    z-index: 1;
    opacity: 0.7; 
}

.carousel-item-portfolio.active {
    opacity: 1;
    z-index: 10;
}

/* Cardul */
.carousel-item-portfolio .card {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1e1e1e, #121212);
    border: 1px solid #333;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); /* Umbră mai pronunțată pentru profunzime */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    
    /* Asigură că conținutul nu "iese" din planul 3D */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Numărul Cardului */
.carousel-item-portfolio .card-number {
    position: absolute;
    top: 10px;
    left: 15px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.1);
    z-index: 2;
}

/* Imaginea (1:1 Aspect Ratio) */
.carousel-item-portfolio .card-image {
    width: 100%;
    aspect-ratio: 1 / 1; 
    height: auto; 
    margin-top: 15px; 
    margin-bottom: 10px; 
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
}

.carousel-item-portfolio .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.carousel-item-portfolio:hover .card-image img {
    transform: scale(1.05);
}

/* Titlul */
.carousel-item-portfolio .card-title {
    font-family: 'Protest Guerrilla', sans-serif; 
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Butoane Control */
.carousel-controls-portfolio {
    position: absolute;
    bottom: 10px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 100;
    /* Le aducem în față în spațiul 3D pentru a fi clickabile */
    transform: translateZ(50px) translateX(-50%);
}

.carousel-btn-portfolio {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
}

.carousel-btn-portfolio:hover {
    background: #fff;
    color: #000;
    transform: scale(1.1);
}

/* Indicatori - Poziționați SUS */
.carousel-indicators-portfolio {
    position: absolute;
    top: 10px; /* Poziționat sus, la distanță mică de slide */
    bottom: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 20;
    transform: translateZ(50px);
    -webkit-transform: translateZ(50px);
}

.indicator-portfolio {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator-portfolio.active {
    background-color: #fff;
    transform: scale(1.2);
}

/* Responsive Mobil */
@media (max-width: 768px) {
    .carousel-container-portfolio {
        height: 450px;
        /* Pe mobil, perspectiva poate fi puțin mai mică pentru a accentua efectul */
        perspective: 800px;
    }
    .carousel-item-portfolio {
        width: 260px; 
        height: 360px;
    }
}


.gallery-grid-mobile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
}

/* image styling */
.gallery-grid-mobile img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .gallery-grid-mobile {
        width: 100%;
    }

    .gallery-grid-mobile-item {
        width: 20%;  /* 5 per row */
        float: left;
        padding: 2px;
        box-sizing: border-box;
    }

    .gallery-grid-mobile-item img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;   /* prevents cropping */
    }
}