@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playwrite+HR:wght@100..400&display=swap');
/*
@font-face {
    font-family: 'Autograf', serief;
    src: url('styles/fonts/Autograf_PersonalUseOnly.ttf') format('opentype');
}
*/


@font-face {
    font-family: 'Creattion Demo';
    src: url('/fonts/Creattion_Demo.otf') format('opentype');
}

.sign {
    font-family: 'Creattion Demo', sans-serif;
    font-size: 50px;
    margin-left: 30px;
}



:root {
    --active_profile_color: #68e0cf;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: #373b40;
}

.container {
    display: flex;

    position: relative;
    /* Adăugat pentru a permite poziționarea absolută a titlului */
}

.card {
    width: 50%;
  /*  padding: 20px; */
    position: relative;
}

.fixed-card {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 50%;
    z-index: 1;
    background-color: #f9f9f9;

}

.image-profile {
    position: relative;
    /* Necesare pentru a poziționa overlay-ul */
    width: 100%;
    height: 100%;
    background-image: url('images/my_photo_back_and_white_avatar.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    background-color: var(--active_profile_color);
    background-blend-mode: multiply;
}

/*https://codepen.io/savnac/pen/YRxgmJ */
.image-profile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/my_photo_back_and_white-avatar.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    transition: filter 0.3s ease;
    /* Tranziție pentru umbra */
    z-index: 1000;
    /* Overlay deasupra */
}

.image-profile:hover::after {
    filter: drop-shadow(0 0 20px rgba(250, 113, 33, 0.925));
    /* Umbră la hover */
}



.container .card:not(.fixed-card) {
    margin-left: 50%;
    padding-left: 20px;
}

.h-title {
    position: absolute;
    z-index: 3;
    margin: 150px 0 0 -11vw;
    padding: 4.2vw;
    font-size: 50px;
    line-height: 1.2;
    font-weight: 800;
    /*color: #fff; */
    /*color: #F29494; */
    color: #fff;
    background: #373b40;
    word-break: break-word;
    border-radius: 264px;
}

.start-description {
    position: relative;
    top: calc(330px + 4.2vw + 20px);
    color: #fff;
    font-family: "Poppins", sans-serif;
}


.ull {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #38444d;
    border-radius: 50px;
}

.lii {
    float: left;
    margin: 0;
    padding: 0;
}

.menu-icon {
    font-family: "Playwrite HR", cursive;
    height: 50px;
    color: #fff;
    margin-left: 30px;
}

header {
    background-color: #222831;
    position: fixed;
    width: 80%;
    margin: 30px 10%;
    z-index: 999;
    border-radius: 50px;
    border: 2px solid #fff;
    border-bottom: 2px solid red;

}


.about-me {
    display: flex;
    justify-content: space-around;

}


.about-me-desc {
    padding: 5px;
    margin: 5px;

}

.about-me-desc-title {
    color: #68e0cf;
}

li a,
.dropbtn {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin: 0;
}

li a,
.dropdown .dropbtn {
    background-color: transparent;
    border-bottom: 2px solid transparent;
    /* Border inițial transparent */
    transition: border-bottom 0.3s ease;
    /* Definim tranziția */
}

li a:hover,
.dropdown:hover .dropbtn {
    background-color: #000;
    border-bottom: 2px solid red;
    /* Schimbarea culorii border-bottom */
}

li.dropdown {
    display: inline-block;
}

.focus:hover {
    background-color: #000;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #76ABAE;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-top: -5px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #38444d;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
}

.menu {
    height: 50px;
    margin: 0;
}

.button-home {
    border-color: #68e0cf;
    background-color: #373b40;
    color: #68e0cf;
    font-size: 20px;
    padding: 10px;
    margin-top: 30px;
    margin-left: 50px;
}

h3 {
    color: #68e0cf;
    font-size: 14px;
    font-family: "Poppins";
    margin-bottom: 50px;
}

h2 {
    font-size: 55px;
    font-family: "Poppins";
}

.about {
    padding-top: 100px;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-me-description {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}


.experience-container {
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

.experience-card {
    display: flex;
    justify-content: space-between;
    width: 400px;
}

.experience-card h4 {
    font-size: 20px;
}

.experience-card h6 {
    margin-top: 5px;
}

.rotation-title-experience {
    transform: rotate(90deg);
    color: #68e0cf;
    margin-right: 50px;
    height: 100px;
    width: 100px;
    font-size: 14px;
    top: 0;
}

.experience-title {
    padding-top: 20px;

}

.scroll-container {
    width: 100%;
    /*  overflow-x: auto; 
    
 /*   overflow: hidden; */
    overflow-x: scroll;
    overflow: hidden;
    white-space: nowrap;
}


.scroll-container-edu {
    width: 100%;
    /*  overflow-x: auto; 
    
 /*   overflow: hidden; */
    overflow-x: scroll;
    overflow: hidden;
    white-space: nowrap;
}

.navs {
    display: flex;
    justify-content: flex-end;
    margin: -50px auto;
}


.prev,
.next {
    cursor: pointer;
    padding: 20px;
    margin: 15px;
    background-color: #373b40;
    border: 2px solid #ccc;
    border-radius: 100px;
    position: relative;
    z-index: 10;
}


.next:hover,
.prev:hover {
    cursor: pointer;
    padding: 20px;
    margin: 15px;
    background-color: #373b40;
    border: 2px solid red;
    border-radius: 100px;
    position: relative;
    z-index: 10;
}

.line {
    display: flex;
    justify-content: end;
}

.line-button {
    position: relative;
    z-index: 9;
    width: 30%;
    margin-top: 0;
    border-bottom: 2px solid #ccc;
    height: 2px;
}

.container-project {
    width: 90%; 
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}


.column {
    float: left;
    width: 50%;
    padding: 10px;
}

.column img {
    margin-top: 12px;
    display: block;
    position: relative;
}


.row:after {
    content: "";
    display: table;
    clear: both;
}




img {
    width: 100%;
    transition: opacity 0.3s ease;
}

img:hover {
    opacity: 0.8;
}

.img-container {
    position: relative;
    display: inline-block;
}

.img-container:after {
    content: attr(title);
    background-color: rgba(0, 0, 0, 0.7);
    color: #68e0cf;
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
    height: 100px;
    font-size: 50px;
    font-family: "Edu AU VIC WA NT Hand", cursive;
}

.img-container:hover:after {
    visibility: visible;
    opacity: 1;
}

.container-skills {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    justify-content: space-around;
}

.card-skills {
    flex-direction: column;
    width: calc(40%);
    margin-bottom: 50px;
}

.progress-container {
    margin-top: 20px;
    background-color: #e0e0e0;
    border-radius: 25px;

    height: 10px;
}

.progress-bar {
    height: 10px;
    width: 0;
    background-color: #68e0cf;
    border-radius: 25px 0 0 25px;
    transition: width 0.4s ease;


}

.progress-bar-percent {

    color: #68e0cf;
    margin-left: 0;
    font-size: 20px;
    margin-top: -35px;

}

.container-contact {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#contact {
    padding: 5%;
}

.container-contact-card {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 45%;
}


.input-container {
    position: relative;
    margin-bottom: 30px;
}

input[type=submit] {
    background-color: #32363b;
    border: 1px solid #585d65;
    border-radius: 30px;
    padding: 10px;
    color: #00d8b5;
    font-size: 16px;
    outline: none;
    height: 50px;
    font-weight: bold;
    width: 80%;
}

input[type=text]:focus,
input[type=email]:focus {
    border: 1px solid #fff;
}



.input-container input {
    width: 100%;
    background-color: #32363b;
    border: 1px solid #585d65;
    border-radius: 30px;
    padding: 15px 15px 0 15px;
    color: white;
    font-size: 16px;
    outline: none;
    height: 50px;
}


.input-container textarea {
    width: 100%;
    height: 150px;
    background-color: #32363b;
    border: 1px solid #585d65;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    padding: 20px 20px;
}

.input-container input::placeholder {
    color: transparent;
}

.input-container textarea::placeholder {
    color: transparent;
}


.input-container label {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #32363b;
    padding: 0 5px;
    font-weight: bold;
    color: white;
    font-size: 16px;
    transition: 0.2s ease all;
    pointer-events: none;
}


.input-container label span {
    color: #00d8b5;
}


.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #00d8b5;
}

.input-container textarea:focus+label,
.input-container template:not(:placeholder-shown)+label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #00d8b5;
}

.container-contact-card-desc {
    display: flex;
    flex-direction: column;
    border: 1px solid #585d65;
    width: 45%;
    border-radius: 30px;
}

.desc-me-inline {
    display: flex;
    flex-direction: row;
    margin: 50px 20px;
}



.desc-me {
    display: flex;
    flex-direction: column;
    margin: 50px 30px;
}

.desc-me-name .name {
    font-size: 24px;
    color: #fff;
    margin: 10px 30px;
    font-weight: bold;
    margin-bottom: 0;
}

.desc-me-name h3 {
    font-size: 14px;
    margin: 0px 30px;
    font-weight: normal;

}

.input-container>small {
    color: red;
}
/*
@font-face {
    font-family: 'Creattion Demo';
    src: url('/styles/fonts/Creattion_Demo.otf') format('opentype');
}

*/
/*
.sign {
    font-family: "Dancing Script", cursive;
    font-size: 50px;
    margin-left: 30px;
}*/


@font-face {
    font-family: 'Creattion Demo';
    src: url('/fonts/Creattion_Demo.otf') format('opentype');
}

.sign {
    font-family: 'Creattion Demo', sans-serif;
    font-size: 50px;
    margin-left: 30px;
}


.footer-about-me {
    display: flex;
    justify-content: end;
    width: 100%;
    border-top: 2px solid #fff;
    height: 50px;
    padding-right: 5%;
}

.footer-about-me-logo {
    width: 45px;
    height: 45px;
    margin: 10px 5px;
    
}

@media (max-width: 800px) {
    .container {
        flex-direction: column;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .fixed-card {
        position: static;
        height: auto;
        width: 100%;


    }

    .container .card:not(.fixed-card) {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
    }

    .image-profile {
        width: 100%;
        height: 700px;
    }

    .h-title {
        position: static;
        margin: 10px 0;
        padding: 10px;
        font-size: 50px;
    }

    .start-description {
        margin-top: 0;
        position: static;
    }

    /*header {
        width: 100px; 
        height: -50px;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menu-icon {
        display: block;
        height: 50px;
        width: 50px;
        overflow: hidden;
    }
    /*.menu-icon h4 {
        display: none; 
    }

    nav {
        display: none; 
    }*/

    #contact {
        padding: 0;
    }
    .container-project {
        width: calc(90% + 12px); 
        position: relative;
        overflow: hidden;
       
        
    }


    .column {
        float: left;
        width: 50%;  
    }

    .column img {
        margin-top: 12px;
        display: block;
        position: relative;
    }
    .about-me {
        display: flex;
        justify-content: start;
        flex-direction: row;
        margin-top: 50px;
    }

    .about-me-description {
        display: flex;
        justify-content: start;
        flex-direction: column;
        margin-top: 10px;
    }

    .experience-container {
        display: flex;
        justify-content: start;
        flex-direction: column;

    }

    .experience-card {
        margin-top: 50px;
        margin-left: 0;
    }

    .container-contact {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 10% auto;
        gap: 40px;
        right: 10px;
    }

    .container-contact-card {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-contact-card input[type="submit"] {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-contact-card-desc {
        display: flex;
        flex-direction: column;
        border: 1px solid #585d65;
        width: 100%;
        border-radius: 30px;
    }

    h3,
    h2 {
        margin: 10%;
    }

    .rotation-title-experience {
        transform: rotate(90deg);
        color: #68e0cf;
        /*  margin-right: 20px;
        margin-top: 25px;
       */
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        height: 20px;
        width: 100px;

        font-size: 14px;
        top: 0;
    }

    .experience-card {
        display: flex;
        justify-content: space-between;
        width: 300px;
    }

    .container-skills {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

    }

    .experience-title {
        padding-top: 0;

    }

    .card-skills-desc {
        position: relative;
        left: 0;
        margin: 0;
        padding: 0;
    }

    .scroll-container {
        width: 100%;

        display: flex;
        justify-content: start;
        flex-direction: row;
    }

    .scroll-container {
        height: 650px;
        display: flex;
        flex-direction: column;
    }

    .container-skill {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

    }

    .experience-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

    }

    .experience-card {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        margin-top: 20px;
        padding: 0;
        gap: 20px;
    }

    .rotation-title-experience {
        display: relative;
        margin: 0;
        padding: 0;
        left: 10px;

    }

    .card-skills-desc {
        display: relative;
        left: -20px;
        justify-content: start;
        align-items: start;
        align-self: flex-start;
        align-content: start;
    }

    .scroll-container-edu {
        height: 650px;
        display: flex;
        flex-direction: column;
    }

    .ull {
        display: none;
    }

    header {

        position: fixed;
        width: 90%;
        margin: 10px 5%;
        z-index: 999;
        border-radius: 50px;
        border: 2px solid #fff;
        border-bottom: 2px solid red;

    }

    li a,
    .dropdown .dropbtn {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        margin: 0;
        border-bottom: 2px solid transparent;
        /* Asigură că border-ul este vizibil la hover */
        transition: border-bottom 0.3s ease;
    }

    li a:hover {
        border-bottom: 2px solid red;
        /* Aplică border-bottom la hover */
    }

    .show {
        display: block;
    }

    .menu-content {
        display: none;
        /* Ascuns inițial */
        position: fixed;
        /* Asigură poziția fixă a meniului */
        top: 0;
        left: 0;
        width: 150vw;
        height: 150vh;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 9998;
        flex-direction: column;
        justify-content: start;
        align-items: start;


    }

    .menu-content.show {
        display: flex;
        /* Afișează meniul când este activ */
        ;
    }

    .menu-content a {
        color: white;
        padding: 20px;
        font-size: 24px;
        text-decoration: none;
        position: relative;
        /* Asigură că elementul este poziționat */
        z-index: 1;
        /* Asigură că link-urile sunt deasupra altor elemente */
    }


    .menu-content a:hover,
    .menu-content a:active,
    .menu-content a:focus {
        border-bottom: 5px solid red;
        background-color: #fff;
        color: #000;
        width: 100%;
        display: flex;
    }

    li a,
    .dropbtn {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        margin: 0;
    }

    li a,
    .dropdown .dropbtn {
        background-color: transparent;
        border-bottom: 2px solid transparent;
        /* Border inițial transparent */
        transition: border-bottom 0.3s ease;
        /* Definim tranziția */
    }

    li a:hover {

        border-bottom: 20px solid red;

    }


    .dropbtn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;

    }

    .dropbtn img {
        width: 50px;
        height: 50px;
        position: relative;
        top: -13.5px;
    }


    .menu-active {
        display: block;
        /* Afișează meniul când este activ */

    }



    .input-container>small {
        color: red;
    }

    p {
        margin-left: 10px;
    }
}

@media only screen and (min-width:800px) and (max-width:1280px) {

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }


    .container {
        display: flex;

        position: relative;
        /* Adăugat pentru a permite poziționarea absolută a titlului */
    }

    .card {
        width: 400px;
        /*padding: 20px; */
        position: relative;
    }

    .fixed-card {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        height: 100%;
         width: 400px;
        z-index: 1;
        background-color: #f9f9f9;

    }

    .image-profile {
        position: relative;
        /* Necesare pentru a poziționa overlay-ul */
        width: 100%;
        height: 100%;
        background-image: url('images/my_photo_back_and_white_avatar.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin: 0;
        padding: 0;
        background-color: var(--active_profile_color);
        background-blend-mode: multiply;
    }

    /*https://codepen.io/savnac/pen/YRxgmJ */
    .image-profile::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('images/my_photo_back_and_white-avatar.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin: 0;
        padding: 0;
        transition: filter 0.3s ease;
        /* Tranziție pentru umbra */
        z-index: 1000;
        /* Overlay deasupra */
    }

    .image-profile:hover::after {
        filter: drop-shadow(0 0 20px rgba(250, 113, 33, 0.925));
        /* Umbră la hover */
    }



    .container .card:not(.fixed-card) {
        margin-left: 50%;
        padding-left: 20px;
    }
    .about-me  {
        display: flex;
        justify-content: start;
        flex-direction: row;
        
    }

    .about-me-description {
        display: flex;
        justify-content: start;
        flex-direction: column;
        margin-top: 10px;
    }

    .experience-container {
        display: flex;
        justify-content: start;
        flex-direction: column;

    }

    .experience-card {
        margin-top: 40px;
        margin-left: 0;
    }

    .container-contact {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        gap: 40px;
    }

    .container-contact-card {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-contact-card input[type="submit"] {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-contact-card-desc {
        display: flex;
        flex-direction: column;
        border: 1px solid #585d65;
        width: 100%;
        border-radius: 30px;
    }

    h3,
    h2 {
        margin: 10%;
    }

    .rotation-title-experience {
        transform: rotate(90deg);
        color: #68e0cf;
        /*  margin-right: 20px;
        margin-top: 25px;
       */
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        height: 20px;
        width: 100px;

        font-size: 14px;
        top: 0;
    }

    .experience-card {
        display: flex;
        justify-content: space-between;
        width: 300px;
    }

}