/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/*h1 {
    color: pink;
}



nav ul {
    margin-top: 70px;
    margin-right: 40px;

} 

nav ul li {
    display: inline-block;
    margin-left: 40px;

}

h2 {

} */

/*body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   /* font-family: 'Open Sans', sans-serif;*/



 /*.navbar {
    width: 100%;
    padding: 15px 16px;
    border-bottom: .5px solid black;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
}

.navbar .brand {
    color: #000000e6;
}

.navbar .brand a {
    color: #000000e6;
    text-decoration: none;
    letter-spacing: 3px;
    font-size: 1.25rem;
}


.navbar .navigations {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.navbar .navigations .navigation-button {
    padding: 0 10px;

}


.navbar .navigations .navigation-button a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000e6;
    opacity: .8;


}




.navbar-mare {
    display: block;
}

.navbar-mare {
    color: #333333;
    font: 16px 'Josefin-sans', sans-serif;
    background: #FFFFFF;
    padding: 15px 16px;
    
}
 
.navbar-brand {

}

.prima-imagine {
    width: 1440px;
    height:433px;
    object-fit: cover;
    position: relative;
    overflow: hidden;

}

.overlay-wrap {
width: 100%;
height: 63.68px;
    margin: 0px 0px 8px;
    padding: 0px 0px 10px;
    color: #FFFFFF;
    font-family: 'Josefin-sans', sans-serif;
    /* position: absolute; */
  /*  display:flex;
    justify-content:center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* ajustează înălțimea undei după nevoi */
    /*background: url('calea-spre-imaginea-cu-efect-de-unda.png');
    background-size: 100% 100%;
    animation: wave 2s linear infinite;
}



/* .titlu-mare .overlay-wrap .mb-2 .vlad-titlu{
    font: 53.16px;
    font-family: 'Josefin-sans' , sans-serif;
    color: black;
} */


/*.titlu-mare {
    height: 100vh;
    width:100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction:column;
    /* justify-content: center; */
    /*align-items: center;
    /* position: relative; */
   
   




/* Stilizarea div-ului cu text și imaginea deasupra */
/*.overlay {
    background-color: pink;
    /* position: absolute; */
   /* bottom: -5%;
    transform: translate(-50% -50%);
    margin-top: 280px;
   padding: 50px;   

}

.about-me {

    margin-left: 30px;
    color:#333333;
    font-family: 32px, 'Josefin-Sans', 'sans-serif';
    letter-spacing: 2px;
    position: absolute;
    top: 300px;
    margin-top: 230px;
 
 
}

.descriere {
    color: #333333;
    font-family:  'Josefin-Sans', 'sans-serif';


}


.poza-rotunda{
    width: 300px;
    border-radius: 70%;
    overflow: hidden;
    margin-top : 100px;
    margin-bottom: 70px;
    margin-left: 500px;
    margin-right: 70px;
}

.cards {
   margin-top: 300px;
   width: 100%;
   color: aquamarine;

}

/* Stilizarea cardului */
/*.card {
    width: 200px;
    height: 300px;
    perspective: 1000px; /* Adaugă perspectivă pentru efectul 3D */


/* .card-face .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden; /* Ascunde partea din spate a cardului */
    /* Efectul de flip va dura 0.5 secunde */


 /*.card-back {
    transform: rotateY(180deg); /* Inițial, spatele cardului este rotit cu 180 de grade pentru a fi ascuns */


/* Stilizarea butonului de flip */
/*.flip-button {
    position: absolute;
    bottom: 20px;
    right: 20px; */


/* Stilizarea cardului pe față și spate */
/* .card-face {
    background-color: #3498db;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-back {
    background-color: #e74c3c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg); /* Spatele cardului rotit cu 180 de grade */


/*.card-back .p {
    color: aqua;
}

/* Stilizarea textului pe față și spate */
/*h3 {
    color:bisque;
} 
  */ 

  /*.container-services {
    margin-top: 400px;
    color: #333333;
    margin-left: 600px; 
    font-family: 'Josefin-sans' , sans-serif;
}

.movingImg{
        width: 100%;
        min-height: 300px;
        background: url(../images/freelance.jpeg);
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
}

#container {
    position: relative;
    margin: 10px auto;
    width: 450px;
    height: 281px;
    z-index: 1;
  }
  
  #container {
    perspective: 1200px;
    transform-style: preserve-3d;
  }
  #innercontainer {
    width: 100%;
    height: 100%;
    transition: all 1.0s linear;
  }

  #container:hover #innercontainer {
    transform: rotateX(180deg);
    box-shadow: -5px 5px 5px #aaa;
  }
  .face {

    position: absolute;
    width: 100%;
    height: 100%;

  }
  .face.back {
    display: block;
    transform: rotateX(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: blue;
    z-index: 0;
  }
  .face.front {
    background-color: orangered;
    background-image: url(../images/p3-3.jpeg);
   /* background-attachment: fixed; */
   /* background-size: contain;
    backface-visibility: hidden;
    z-index: 1;
  }
  /*#container:hover #innercontainer .face.front {
    transform: translateZ(100px);
    }*/
 



  /*.card {
    margin-top: 50px;
    margin-left: 100px;
  }
*/ 

/* Stilizarea containerului cardurilor */

/* Stilizarea containerului cardurilor folosind CSS Grid */
 /*.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 coloane cu lățime egală */
    /*gap: 20px; /* Spațiu între carduri */
   /* grid-column: 30px;
   
}

/* Stilizarea fiecărui card */
/*.card {
    background-color: #3498db;
   width: 320px;
   height: 240px;
    text-align: center;
    margin-left: 50px;
    margin-right:50px;

}
/* incercare de a colora secriunea my expertises*/
/*.my-resumee{
    background-color: #22c1c3;
}
.container-resume {
    margin-top: 150px;
    margin-bottom: 90px;
    color: #333333;
    margin-left: 600px; 
    font-family: 'Josefin-sans' , sans-serif;}


    /*titluri de carduri*/
/*.titlu-dreapta {
    color:#333333;
    margin-left: 70px;
    margin-top: 70px !important;

}
.titlu-dreapta-stanga {
    display:flex;
    justify-content: space-between;
    width:80%
}
 .titlu-stanga {
    color: darkred;
    margin-left: 900px;
    

 }

    /* Stilizarea containerului cardurilor */
/*.card-container {
    display:flex;
    justify-content:space-between;
    width:100%;
}

/* Stilizarea fiecărui card */
/*.card2 {
    width: calc(33.33% - 10px); /* Aproximativ 33.33% lățime cu un spațiu mic între carduri */
   /* margin-bottom: 20px;
    background-color: #3498db;
    padding: 10px;
    text-align: center;
    width: 540px;
    /* height: 170.19px; */

  
/*}
 /*.mini-titlu {
     color: red;
}

/* .carousel {
    display: flex;
    overflow: hidden;
    width: 100%; /* Ajustează lățimea caruselului */
   


/*.slide {
    flex: 0 0 100%; /* Slide-urile ocupă întreaga lățime a caruselului */
  

/* Afișează doar prima imagine inițial 
.slide:not(:first-child) {
    transform: translateX(100%);
} */


/*html,
body {
  padding: 0;
  margin: 0;
}

html {
  height: 100vh;
}

body {
  height: 100vh;
}

.carousel {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    font-family: Arial;
}
.carousel__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    justify-content: center;
    perspective: 300px;
}
.carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0px;
    width: 150px;
    height: 250px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
    position: absolute;
    transition: all 0.3s ease-in;
}
.carousel__item:nth-child(1) {
    background: linear-gradient(45deg, #2d35eb 0%, #904ed4 100%);
}
.carousel__item:nth-child(2) {
    background: linear-gradient(45deg, #2d35eb 0%, #fdbb2d 100%);
}
.carousel__item:nth-child(3) {
    background: linear-gradient(45deg, #2d35eb 0%, #22c1c3 100%);
}
.carousel__item:nth-child(4) {
    background: linear-gradient(45deg, #fdbb2d 0%, #904ed4 100%);
}
.carousel__item:nth-child(5) {
    background: linear-gradient(45deg, #22c1c3 0%, #904ed4 100%);
}
.carousel__item[data-pos="0"] {
    z-index: 5;
}
.carousel__item[data-pos="-1"], .carousel__item[data-pos="1"] {
    opacity: 0.7;
    filter: blur(1px) grayscale(10%);
}
.carousel__item[data-pos="-1"] {
    transform: translateX(-40%) scale(0.9);
    z-index: 4;
}
.carousel__item[data-pos="1"] {
    transform: translateX(40%) scale(0.9);
    z-index: 4;
}
.carousel__item[data-pos="-2"], .carousel__item[data-pos="2"] {
    opacity: 0.4;
    filter: blur(3px) grayscale(20%);
}
.carousel__item[data-pos="-2"] {
    transform: translateX(-70%) scale(0.8);
    z-index: 3;
}
.carousel__item[data-pos="2"] {
    transform: translateX(70%) scale(0.8);
    z-index: 3;
}
.carousel__item img {
    height: 100%;
    width: 100%;
}
.swiper {
    width: 80%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0 auto;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
  }

  .swiper-slide img {
    display: block;
    width: 50%;
    margin: 0 auto;
  }

.testi {

 background-color: #F7F7F7;

  display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Aceasta asigură centrarea pe verticală */
    /*}
    .testimonial {
        width: 700px;
        height: 280px;
        margin-left: auto;
        margin-right: auto;
        background-color:red;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    

.poza-testi {
 
        width: 100px;
        height: 100px;
        border-radius: 30px; /* Ajustează acest număr pentru a controla nivelul de rotunjire */
    
    /*INCERCARE 2*/ 

    
  /*body {
  
    font-family: 'Josefin Sans', sans-serif;
    
    
  }
*/

body {
  
    font-family: 'Josefin Sans', sans-serif;
    scroll-behavior: smooth;
    
  }

  /*NAVBAR8*/

.navbar {
    background-color: #FFFFFF;
    scroll-behavior: smooth;
    width: 100%;
    padding: 15px 16px;
    border-bottom: .5px solid black;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;

    position: fixed; /* Fixează navbarul pe ecran */
    top: 0; /* Poziționează-l la 0 pixeli de partea de sus a ecranului */
    left: 0; /* Poziționează-l la 0 pixeli de partea stângă a ecranului */
    right: 0; /* Asigurați-vă că se extinde până la marginea dreaptă a ecranului */
    z-index: 1000; 
    flex-direction: row;
    justify-content: space-evenly;
}

.brand {
    font-size: 24px;
    font-weight: bold;
    float: left;
    margin-left: 30px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

nav li a {
    text-decoration: none;
    color: #000;
    padding: 5px 10px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

nav li a:hover {
    border-color: #ff0000; }


  /*POZA PRINCIPALA*/
  body{
    margin:0;
    padding: 0;
  }
  .full-landing-image{
    width: 100%;
    height: 100vh;
    background: url('../../assets/images/vl.jpg') no-repeat center;
    background-size: cover;
    position: relative;
  }




 /* .poza-mare{
   

    object-fit: cover;
    position: relative;
    overflow: hidden;
   

  }
.poza-mare .name-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('calea-spre-imaginea-ta.jpg') no-repeat center; /* Modifică 'calea-spre-imaginea-ta.jpg' cu calea corectă către imaginea ta */
   /* background-size: cover; /* pentru a acoperi întregul fundal cu imaginea */
   /* padding: 50px; /* Ajustează paddingul după cum dorești */
   /* color: red; /* Culoarea textului albă */
 


/*.intro {
    font-size: 20px; /* Ajustează dimensiunea fontului după cum dorești */
    /*margin-bottom: 10px;
}

.name {
    font-size: 70px; /* Ajustează dimensiunea fontului după cum dorești */
  /*  position: relative;
    margin-bottom: 20px; /* Ajustează marginea de jos după cum dorești */

/*
.name-title {
    border-bottom: 3px solid #fff; /* Adaugă o linie sub numele "Lee" */
    /*.name-container {
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        font-family: 'Josefin Sans', sans-serif; /* am adăugat și fontul pe care l-ai menționat anterior */
    
    
    /*.name-title::after {
        content: ""; 
        display: block;
        position: absolute;
        bottom: 0; 
        left: 0;
        right: 0;
        height: 3px; /* înălțimea liniei - poți să o ajustezi după preferință */
       /* background: rgba(255, 255, 255, 0.5); /* culoare albă cu transparență de 50% */
       /* margin: 3px 0; /* spațiu între text și linie */
    
  
/*ABOUT ME*/

    .about-me {
        position: absolute; /* poziționare absolută față de container */
        bottom: -25%; /* mută div-ul 20px peste partea de jos a imaginii principale */
        left: 50%; /* start centrat orizontal */
        transform: translateX(-50%); /* ajustare pentru a centra div-ul */
        background-color: rgba(255, 255, 255, 0.9); /* fundal alb cu opacitate puțin redusă */
        padding: 20px; /* spațiere în interior */
        border: 2px solid #ffffff; /* chenar alb */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* o umbră ușoară pentru a evidenția div-ul */
        max-width: 80%; /* limitează lățimea la 80% din container */
    }

       /* font-family: 'Arial', sans-serif;
        max-width: 500px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
      justify-content: center;
      align-items: center;
        text-align: center;
     bottom: -20px; /* mută div-ul 20px peste partea de jos a imaginii principale */
     /*left: 50%; /* start centrat orizontal */
   /* ajustare pentru a centra div-ul */
     /*max-width: 80%; */
    .my-service-heading{
        margin-top: 20%;
    }
    
    .profile-pic {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        margin: 0 auto;
    }
    
    h2 {
        margin: 20px 0;
        color: #333;
        font-size: 24px;
    }
    
    p {
        color: #777;
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    
    .social-icons a {
        color: #555;
        font-size: 20px;
        transition: color 0.3s;
    }
    
    .social-icons a:hover {
        color: #333;
    }
    
   /* CARDURI - MY SERVICE*/
   .carduri-grafice {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px; /* distanța dintre carduri */
}

.card7 {
    width: 150px; /* dimensiunea pătrată a cardului */
    height: 150px; /* dimensiunea pătrată a cardului */
    border: 1px solid #e0e0e0;
    overflow: hidden; /* pentru a ascunde părțile imaginii care nu se încadrează */
    position: relative; /* pentru a permite poziționarea textului absolut */
}

.card .sapte {
    width: 100%;
    height: 100%;
    object-fit: cover; /* redimensionează imaginea pentru a acoperi complet cardul, fără a schimba raportul de aspect */
}

.card .scris {
    position: absolute;
    bottom: 5px;
    left: 5px;
    margin: 0;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.6); /* fundal semi-transparent */
    padding: 2px 5px;
}


 pana aici 
   /*.carduri-grafice {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card7 {
    box-sizing: border-box;
    width: calc(33.33% - 20px); /* Asumând o distanță de 20px între carduri */
   /* margin-bottom: 20px;
    background-color: white;
    border: 1px solid #e0e0e0;
    text-align: center;
    padding: 20px;
    position: relative;
}

.card .sapte {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.card .scris {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
}


/*.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2%; */
   

   


/*.card {
    position: relative;
    width: 100%; /* Ajustează această valoare dacă este necesar */
   /* margin-bottom: 2%;
 flex: 1 1 calc(33.3333% - 2%); /* Acesta le va face să ocupe o treime din spațiu, minus gap-ul */
  /* margin-bottom: 2%;
}
/*.card-front, .card-back {
    width: 100%;
    height: 100%;
    /*backface-visibility: hidden; /* Ascunde partea din spate a cardului când se rotește */
   /* transition: transform 0.6s; /* Adaugă animația de rotație */
 /* Poziționează conținutul cardului peste celălalt */


/*.card-front {
    /* Stilizează fața cardului după cum dorești */


/*.card-back {
    transform: rotateY(180deg); /* Întoarce partea din spate a cardului pentru a fi pregătită pentru animație */
    /* Stilizează spatele cardului după cum dorești */
  /*  background-color: coral;
}

.card:hover .card-front {
    transform: rotateY(180deg); /* Rotește fața cardului */


/*.card:hover .card-back {
    transform: rotateY(0deg); /* Rotește spatele cardului înapoi */



/*.card img {
    width: 100%;
    display: block;
}

.description {
   
    bottom: 10px;
    left: 10px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
}  


/*MY EXPERTISES*/

.expertises {
    text-align: center;
    padding: 50px 0;
    background-color: #f5f5f5;
    margin-top: 20%;
  }
  
  .expertises .my {
    font-size: 24px;
    margin-bottom: 30px;
    color: #333;
    margin-top: 10%;
    
  }
  
  .carduri-noi {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10%;
  }
  
  .carduri {
    border: 1px solid #e0e0e0;
    padding: 20px;
    width: 280px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;

   
      
    
        width: calc(33.33% - 20px); /* Acest lucru va face ca fiecare card să ocupe o treime din lățimea containerului, minus 20px pentru a adăuga spațiu între carduri */

   
        margin-bottom: 20px; /* Acest lucru va adăuga spațiu între rânduri */
      }
      


  
  .carduri .trei {
    font-size: 18px;
    margin-bottom: 10px;
    color: #444;
  }
   
  .carduri .an {
    color: #FFFFFF;
    background-color:orangered;
    display: inline;
    padding:4px;
    border-radius:8px;
   }
  .card .cola {
    margin-bottom: 10px;
  }
  .card-container {
   background-color: #FFF;
  }

  .card2{
    border: 1px solid #e0e0e0;

  }


  /*MY WORKS*/
  .my-works {
    padding: 50px 0; /* Puteți ajusta această valoare pentru a controla spațiul din jurul secțiunii */
    background-color: #fff; /* Culoarea de fundal a secțiunii, poate fi ajustată după nevoie */
}

.title-section {
    text-align: center;
    padding: 20px 0;
}

.subtitle {
    display: block;
    font-size: 14px;
    color: #999; 
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.main-title {
    font-size: 40px; 
    color: #333;
    font-weight: bold;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.underline {
    width: 100px;
    height: 2px; 
    background-color: #999; 
    margin: 0 auto; 
}
#carouselExampleIndicators{
    width: 50%; /* sau orice procentaj sau valoare fixă doriți */
    margin: 0 auto; /* pentru a centra carousel-ul pe pagină */
}
 /*TESTIMONIALE*/

 
 .testimonial-section {
    text-align: center;
    padding: 50px 0; /* Acesta adaugă un spațiu de sus și de jos pentru secțiune */
}

.testimonial-subtitle {
    font-size: 16px;
    letter-spacing: 2px; /* Acesta adaugă spațiu între litere pentru un aspect estetic */
    text-transform: uppercase; /* Transformă textul în majuscule */
    color: #888888; /* O nuanță de gri, dar poate fi ajustată */
    margin-bottom: 10px;
}

.testimonial-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

.testimonial-line {
    width: 100px; /* Puteți ajusta aceasta pentru a schimba lungimea liniei */
    height: 2px;
    background-color: #000;
    margin: 0 auto; /* Centrează linia orizontal */
}

.carousel-item {
    height: 50vh !important;


}

.carousel-item img {

    width: 100%;
    height: 100%;
}
  

/* ... (Codul anterior pentru testimonial) ... */

.testimonial-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    border: 1px solid #e0e0e0;
    padding: 30px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-button {
    background-color: transparent;
    border: none;
    font-size: 30px;
    margin: 0 15px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.carousel-button:hover {
    opacity: 0.7;
}

.testimonial-slide {
    width: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.testimonial-image {
    width: 100px; 
    height: 100px;
    object-fit: cover;
    border-radius: 30%; /* Pentru a face poza rotundă */
    margin-bottom: 20px;
}

.testimonial-slide p {
    margin: 5px 0;
}


.movingImg{
    width: 100%;
    min-height: 300px;
    background: url(../images/freelance.jpeg);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;


  
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}
 

.content .butonas {
    color: white; /* sau orice culoare de font dorită */
    margin-bottom: 20px; /* spațiu între titlu și buton */
    font-size: 2em; /* sau dimensiunea dorită */
    text-transform: uppercase;
    letter-spacing: 5px; /* distanța dintre litere */
  }
  
  .hire-me-btn {
    display: inline-block;
    text-decoration: none;
    color: white; /* culoarea textului butonului */
    background-color: transparent; /* sau orice altă culoare de fundal dorită */
    padding: 10px 25px; /* dimensiunile de padding pentru buton */
    border: 2px solid white; /* grosimea și culoarea border-ului butonului */
    font-size: 1em;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .hire-me-btn:hover {
    color: #333; /* culoarea textului butonului la hover */
    background-color: white; /* culoarea de fundal a butonului la hover */
    cursor: pointer;
  }


.blog-section {
    text-align: center;
    padding: 50px 0;
    background-color: #ffffff; /* Puteți să schimbați culoarea în funcție de preferințe */
}

.blog-subtitle {
    font-size: 20px;
    color: #a0a0a0; /* Culoare de gri deschis */
    margin-bottom: 10px;
}

.blog-title {
    font-size: 48px;
    color: #333333; /* Culoare de gri închis */
    margin-bottom: 30px;
    letter-spacing: 3px;
    font-weight: bold;
}
 

.blog-section {
    width: 100%;
    padding: 50px 50px;
    text-align: center;


}

.card-cont {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px; /* spațiu între carduri */
    margin-bottom: 30px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.blog-card {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.blog-card .bi {
    width: 100%;
    height: auto;
}

.blog-card .pi {
    margin: 15px 0;
    font-weight: bold;
}

.blog-card .sp {
    color: gray;
    font-size: 0.9em;
}

.view-more-btn {
    display: inline-block;
    padding: 10px 30px;
    background-color: orangered;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.view-more-btn:hover {
    background-color: darkorange;
}

/* Linia oranj de sub carduri */
.card-cont::after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background-color: orangered;
    margin-top: 40px;
    position: absolute;
    bottom: -10px;
}


.contact-section {
    
    text-align: center;
    padding: 50px 0; /* Acest padding este doar pentru a oferi spațiu deasupra și dedesubt. Ajustează-l după nevoi. */
}

.contact-header {
    font-size: 24px; /* Ajustează dimensiunea fontului după nevoi. */
    color: #999; /* O nuanță de gri. Ajustează culoarea după nevoi. */
    margin-bottom: 10px; /* Spațiu între "SAY HELLO" și "CONTACT". */
    font-weight: normal; /* Textul este afișat cu greutate normală. */
}

.contact-title {
    font-size: 48px; /* Ajustează dimensiunea fontului după nevoi. */
    color: #333; /* O nuanță mai închisă de gri. Ajustează culoarea după nevoi. */
    margin-bottom: 20px; /* Spațiu între "CONTACT" și linie. */
    font-weight: bold; /* Textul este afișat cu greutate bold. */
}

.contact-line {
    width: 30%; /* Linia ocupă 50% din lățimea containerului. Ajustează procentajul după nevoi. */
    height: 2px; /* Grosimea liniei. */
    background-color: #e0e0e0; /* O nuanță deschisă de gri. Ajustează culoarea după nevoi. */
    margin: 0 auto; /* Centrez linia orizontal. */
}
.contact-subtitle {
    font-size: 32px;
    color: #333;
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: normal;
}

.contact-map {
    width: 100%;
    height: 400px; /* Alege înălțimea potrivită pentru harta ta */
    margin-top: 20px;
}


#contact-section {
    margin-top: 50px;
    display: flex;
    flex-direction: column; /* schimbă "column" în "row" */
    align-items: center;
    justify-content: center; /* pentru a centra cardurile orizontal */
    gap: 20px; /* aceasta va adăuga spațiu între carduri */
}

.contact-card {
    border: 1px solid #ccc;
    padding: 20px;
    transition: transform 0.3s ease;
    cursor: pointer;
    width: 350px; /* lățimea cardului */
    height: 173px; /* înălțimea cardului */
    background-color: #FFFFFF; /* culoarea de fundal a cardului */
    color: #333333; /* culoarea textului */
    font-size: 16px; /* dimensiunea fontului */
    font-family: 'Josefin Sans', sans-serif; /* familia de fonturi */
    padding: 24px; /* padding-ul din interiorul cardului */
    box-sizing: border-box; /* asigură că padding-ul și border-ul sunt incluse în lățimea și înălțimea totală */
    /* alte stiluri necesare, cum ar fi margini, borduri, umbre etc. */
  }


.contact-card:hover {
    transform: translateY(-10px);
}

.icon-container {
    font-size: 24px;
    margin-bottom: 10px;
}
.footer-text {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin-top: 20px;
}

.services-section {
    margin-top: 20%;
}

.services-section .content-services {
    width: 100%;
    padding: 0 25px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 25px;
}

.services-section .content-services .service-card {
    width: 90%;
    perspective: 1000px;
}

.services-section .content-services .service-card .service-card-inner {
    position: relative;
    width: 100%;
    height: 270px;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.service-card:hover .service-card-inner {
    transform: rotateX(180deg);
}



@keyframes animateText {
    0% {
        top: 150%
    }

    100% {
        top: 0%;
    }
}

.service-card-front {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;

}
.service-card-front .button {
    padding: 5px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;

}

.service-card-back {
    background-color: #fd735a;
    color: white;
    text-align: center;

}

.service-card-back .text-area .title {
    font-size: 24px;
}

.service-card-back, .service-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

}

.service-card-back {
    transform: rotateX(180deg);
}