/* RESET */
/**/










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










/* BODY */
body {
    user-select: none;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color:#333;
    color: whitesmoke;
}










/* TOP BAR */
.top-bar {
  position: sticky;
  top: 0;
  left: 0;

  width: 100%;
  padding: 6px 30px;   /* 🔥 thinner */

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(51, 51, 51, 0.90); /* subtle dark overlay */

  backdrop-filter: blur(10px);     /* glass effect */

  z-index: 100;
}

.top-bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 1px;
  
/*
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.3),
    transparent, transparent,
    rgba(255,255,255,0.3)
  );*/
}

.logo img {
  height: 35px;
  width: auto;

  filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
  transition: all 0.3s ease;
}

.nav-links {
  display: flex;
  gap: 22px;
}

.nav-links a {
  text-decoration: none;
  color: rgba(255,255,255,0.7);

  font-family: "Proxima Nova", Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;

  letter-spacing: 1.5px;

  transition: all 0.3s ease;
}

.nav-links a:hover {
  color: white;
}

.nav-links a.active {
  color: rgba(255,255,255,0.3); 
}

.top-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

}











/* HEADER */
header {
    text-align: center;
    padding: 40px 20px;
}

header h1 {
    font-size: 2.5rem;
}

header p {
    color: aliceblue;
}










/* HERO */

.hero {
   margin-top: 0; /* usually fine */
   position: relative;
  height: 100vh;

 /* background-image: url("img/hero1v2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;*/

}



/* This becomes the reference for positioning the button */
.hero-section {
  position: relative;     /* IMPORTANT */
  width: 100%;
  text-align: center;
}



/* Image */
.hero img {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 0;
}



.hero-frame {
  position: absolute;

  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90%;
  max-width: 600px;
  min-width: 400px;

  padding: 50px;

  border: 1px solid rgba(200, 200, 200, 0.4);

  text-align: center;

  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  gap: 10px;   /* 🔥 controls spacing between elements */
  z-index: 2;
}

.hero-frame h2 {
  font-size: 36px;        /* bigger */
  margin-bottom: 20px;    /* space below */
  line-height: 1.2;
}

.hero-frame p {
  font-size: 19px;        /* adjust readability */
  line-height: 1.2;       /* 🔥 more breathing room */

  margin-bottom: 25px;    /* space before button */

  text-align: justify;
  text-align-last: center;
}



/* Text on top */
/* Hero text container (the "frame area") */

/*
.hero-text {
  position: absolute;

  top: 32%;              /* anchor from top instead of center 
  left: 50%;
  transform: translateX(-50%);  /* ONLY horizontal centering 

  width: 500px;
  max-width: 90%;

  text-align: center;
}

/*
.hero-text {
  position: absolute;              /* Place it over your background frame 
  top: 45%;                        /* Adjust to match your frame 
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 500px;                    /* Match your frame width 
  max-width: 80%;                  /* Makes it responsive on smaller screens 
  
  text-align: center;              /* Center text 
  
  overflow: hidden;                /* Prevents overflow outside frame 
}
*/



/* Control the text inside (VERY IMPORTANT)*/
.hero-text h1 {
  font-family: "Proxima Nova", Arial, sans-serif;
  font-size: 36px;
  margin: 0 0 10px 0;
  
  line-height: 1.2;                /* Controls spacing between lines */
  word-wrap: break-word;           /* Prevents overflow */
}

.hero-text h2 {
  font-family: "Proxima Nova", Arial, sans-serif;
  font-size: 36px;
  margin: 0 0 20px 0;
  
  line-height: 1.2;                /* Controls spacing between lines */
  word-wrap: break-word;           /* Prevents overflow */
}

.hero-text p {
 text-align: justify;
  text-justify: inter-word;
  text-align-last: center;

  font-family: "Proxima Nova", Arial, sans-serif;
  font-size: 19px;
  margin: 0;
  
  line-height: 1.5;
  word-wrap: break-word;
}
/*
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    color: white;
}
*/

/*
.hero {
    text-align: center;
    padding: 60px 20px;
}

.hero h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}
*/










/* BUTTON */
/* Simple oval button */
.simple-btn {
  display: inline-block;   /* 🔥 important */
  margin-top: 20px;

  background-color: white;
  color: black;

  font-family: "Proxima Nova", Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;

  padding: 20px 50px;
  border: none;
  border-radius: 999px;

  cursor: pointer;

  transition: box-shadow 0.3s ease, transform 0.1s ease;
}

.simple-btn:hover {
  transform: translateY(-3px);   /* slight lift */

  box-shadow:
    0 5px 10px rgba(0,0,0,0.2),        /* depth */
    0 0 10px rgba(255,255,255,0.6);    /* glow */
}

/* Small press effect */
.simple-btn:active {
  transform: scale(0.97);           /* Slight shrink when clicked */
}

/* Glow effect (added with JavaScript) */
.simple-btn.glow {
  box-shadow: 
    0 0 10px rgba(0,0,0,0.2),       /* soft shadow */
    0 0 20px rgba(0,0,0,0.3);       /* stronger glow */
}



/* Scroll arrow */
.scroll-arrow {
  transition: opacity 0.2s linear; /* smooth fading */
  position: absolute;
bottom: 8vh;   /* 🔥 scales with screen height */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);

  width: 18px;
  height: 18px;

  border-right: 2px solid white;
  border-bottom: 2px solid white;

  z-index: 1;

  animation: arrowMove 2.5s ease-in-out infinite;
}

.scroll-arrow:hover {
  transform: translateY(-5px);
  border-color: lightgray;
  cursor: pointer;
}










@keyframes arrowMove {
  0% {
    transform: translate(-50%, 0px) rotate(45deg);
    filter: opacity(1);
  }

  50% {
    transform: translate(-50%, 12px) rotate(45deg);
    filter: opacity(0.4);
  }

  100% {
    transform: translate(-50%, 0px) rotate(45deg);
    filter: opacity(1);
  }
}

/* img version Scroll arrow for laters*/
/*
/* Arrow image 
.scroll-arrow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);

  width: 30px;      /* control size 
  height: auto;     /* keeps proportions 

  z-index: 10;
  cursor: pointer;

  animation: arrowMove 2.5s ease-in-out infinite;
}

@keyframes arrowMove {
  0% {
    transform: translate(-50%, 0px);
    filter: opacity(0.6);
  }

  50% {
    transform: translate(-50%, 12px);
    filter: opacity(1);
  }

  100% {
    transform: translate(-50%, 0px);
    filter: opacity(0.6);
  }
}
*/










/* __________Under the hero zone__________ */



/* PROJECTS GRID */
.projects {
    position: relative;
    padding: 40px;
    justify-content: center;
    /* distanta dintre imagini categorie*/
    gap: 20px;
    flex-wrap: wrap; /* allows wrapping on small screens */
    padding: 30px;
}







/* CARD */
.card {
  flex: 0 0 auto;  /* 🔥 IMPORTANT */
  border: 1px solid transparent;   /* invisible border */
  /*transition: transform 0.2s ease, border-color 0.3s ease;     /* smooth animation */
  transition: transform 0.25s ease, border-color 0.3s ease;

  display: block;
  text-decoration: none;   /* remove underline */
  color: inherit;          /* keep text color */

    background-color: #333;
     /* latime imagine */
    width: 471px;
    /* rotunjire colturi */
    border-radius: 0px;
    overflow: hidden;
}

/*
.card:hover {
  transform: translateY(-5px);
  border-color: lightgray;
  cursor: pointer;
}
*/
.card:hover {
  /* transform: scale(1.03);   /*🔥 slight zoom */
  transform: translateY(-3px) scale(1.03);
   /*border-color: lightgray;*/
  cursor: pointer;
  z-index: 5;
}

.card:hover img {
  opacity: 0.9;
}

/* IMAGE */
.card img {
    width: 100%;
    /* inaltime imagine categorie*/
    height: 484px;
    object-fit: cover;
    
}

/* TEXT */
.card h3 {
 /* distanta dintre imagini categorie si text jos */
 padding: 10px 10px;   /* top/bottom, left/right */
}

.card p {
 padding: 0 10px 15px;
 color: lightgray;
}

.projects {
  position: relative;
  padding: 40px;
}










.carousel {
  position: relative;
  overflow: hidden;   
  padding: 15px 10px;   /* 🔥 more breathing room */
}


.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.carousel::before {
  left: 0;
  background: linear-gradient(to right, #333, transparent);
}

.carousel::after {
  right: 0;
  background: linear-gradient(to left, #333, transparent);
}

.carousel.is-moving::before,
.carousel.is-moving::after,
.carousel.show-left-fade::before,
.carousel.show-right-fade::after {
  opacity: 1;
}

.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: rgba(0,0,0,0.5);
  border: none;
  color: white;

  font-size: 26px;
  width: 42px;
  height: 84px;
  padding: 0;
  display: grid;
  place-items: center;

  cursor: pointer;
  z-index: 10;

  transition: background 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(255,255,255,0.2);
}

.carousel-btn:disabled {
  cursor: default;
}

.carousel-btn.left {
  left: 10px;
  border-radius: 0 42px 42px 0;
  text-indent: -4px;
}

.carousel-btn.right {
  right: 10px;
  border-radius: 42px 0 0 42px;
  text-indent: 4px;
}


/*________________________________FOOTER________________________________*/

footer {
  
  position: relative;
  padding: 60px 20px;

  /*Grey line - delimiteaza footerul*/
  /*border-top: 1px solid rgba(255,255,255,0.3);*/

  color: white;
}

/* Gradient fade at top of footer */
footer::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 150px;  /* 🔥 controls how far the fade goes */

  background: linear-gradient(
    to bottom,
    rgba(200, 200, 200, 0.2),  /* light grey near the line */
    rgba(0, 0, 0, 0)           /* fades to transparent */
  );

  pointer-events: none;  /* prevents blocking clicks */
}

.footer-contact {
  max-width: 500px;
  margin: 0 auto;   /* 🔥 centers horizontally */
  text-align: center;
}

.footer-contact input,
.footer-contact textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;

  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px;

  color: white;
  outline: none;
}

/*________________________________________________________________________________*/


/* Social bar container */
.social-bar {
  display: flex;
  gap: 15px;

  z-index: 100;
}

/* Each icon button */
.social-bar a {
  width: 45px;
  height: 45px;

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

  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100%;

  transition: all 0.3s ease;
}

.social-bar img {
  width: 43px;
  height: 43px;
}
.social-bar a:hover {
  transform: scale(1.1);

  border-color: white;

  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.footer-text {
  text-align: center;
  margin-top: 100px;
  color: lightgray;
}


/* -----------------   For ABOUT ME page   ----------------- */

.aboutme-hero{
    display:flex;
    align-items:center;
    min-height:80vh;
}

.aboutme-hero-image{
    flex:0 0 40%;
    max-width:650px;
    flex-shrink:0;
}

.aboutme-hero-image img{
    width:100%;
    height:auto;
    display:block;
}

.aboutme-hero-content{
    flex:1;
    max-width:650px;
    margin-left:70px;
    padding-right:80px;
}

.aboutme-hero-content h1{
    margin:20px 0 40px;
}

.aboutme-hero-content p{
    margin-bottom:35px;
    line-height:1.8;
}

.aboutme-section-title{
    letter-spacing:5px;
    text-transform:uppercase;
    font-size:.9rem;
}

.aboutme-divider{
    width:50px;
    height:1px;
    background:#e6e6e6;
    margin:20px 0 35px;
}


.aboutme-services{
    max-width:1200px;
    margin:120px auto;
    padding:0 40px;
}

.aboutme-services h2{
    text-align:center;
    margin-bottom:70px;
}

.aboutme-cards{
    display:flex;
    justify-content:space-between;
    gap:40px;
}

.aboutme-card{
    flex:1;

    text-align:center;

    padding:40px 30px;

    transition:.3s;
}
.aboutme-card i{
    font-size:2.8rem;
    margin-bottom:25px;
}
.aboutme-card h3{
    margin-bottom:20px;
}

/*
.aboutme-card p{
    line-height:1.7;
}
.aboutme-card:hover{

    transform:translateY(-8px);

    border-color:#ffffff;

}*/
.aboutme-card{
    flex:1;
    text-align:center;
    padding:40px 30px;
    transition:transform .3s ease;
}

/*.aboutme-card:not(:last-child){
    border-right:1px solid rgba(255,255,255,.25);
}*/

.aboutme-card:hover{
    transform:translateY(-8px);
}

.aboutme-card i{
    font-size:2.8rem;
    margin-bottom:25px;
    transition:transform .3s ease;
}

.aboutme-card:hover i{
    transform:scale(1.1);
}

/* ---------------------------------- */

/* mobile */

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

   .hero-btn{
        top:75%;
    }

    .social-bar{
        position:static;
        flex-direction:row;
        justify-content:center;
        margin-bottom:20px;
    }

    .social-bar{
        position:static;
        flex-direction:row;
        justify-content:center;
        margin-bottom:20px;
    }

    /* ----------------- ABOUT ME page ----------------- */

    .aboutme-hero{
        flex-direction:column;
        min-height:auto;
    }

    .aboutme-hero-image{
        width:100%;
        max-width:100%;
        flex:none;
    }

    .aboutme-hero-image img{
        width:100%;
        height:auto;
    }

    .aboutme-hero-content{
        width:100%;
        max-width:100%;
        margin-left:0;
        padding:40px 25px;
        text-align:center;
    }

    .aboutme-divider{
        margin:20px auto 35px;
    }

     .aboutme-cards{

        flex-wrap:wrap;
        justify-content:center;

    }

    .aboutme-card{

        flex:0 0 45%;

    }

}

/* ==========================================================
   ABOUT ME - SOFTWARE
========================================================== */

.aboutme-software{
    max-width:1200px;
    margin:120px auto;
    padding:0 40px;
}

.aboutme-software .aboutme-section-title{
    margin:0;
}

.aboutme-software .aboutme-divider{
    margin:20px 0 45px;
}

.aboutme-software-list{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.aboutme-software-item{
    display:flex;
    align-items:center;
    gap:15px;
    flex:1;
    transition:transform .3s ease;
}

.aboutme-software-item img{
    width:45px;
    height:45px;
    object-fit:contain;
    flex-shrink:0;
}

.aboutme-software-item h3{
    margin:0 0 6px;
    font-size:1rem;
}

.aboutme-software-item p{
    margin:0;
    font-size:.8rem;
    line-height:1.4;
    opacity:.65;
}

.aboutme-software-item:hover{
    transform:translateY(-5px);
}


/* tablet */

@media screen and (min-width:769px) and (max-width:1199px){

    .aboutme-hero{
        flex-direction:column;
        min-height:60vh;
    }

    .aboutme-hero-image{
        width:60%;
        max-width:500px;
        flex:none;
    }

    .aboutme-hero-image img{
        width:100%;
        height:auto;
    }

    .aboutme-hero-content{
        width:100%;
        max-width:700px;
        margin-left:0;
        padding:50px;
        text-align:center;
    }

    .aboutme-divider{
        margin:20px auto 35px;
    }

    .aboutme-cards{

        flex-direction:column;

    }

}