.menu-items a:nth-child(1) {
  margin-right: 50px;
}
.banner {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.overlay3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.377);
}

/* ------animatie text 1------------------------------- */
.section1 .content2 {
  position: absolute;
  top: 70%;
  left: 4%;
  text-align: left;
  margin: auto;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 1s, transform 1s;
}
@keyframes slideInFromBottoM {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.section1 .content2.active2 {
  animation: slideInFromBottoM 1.2s ease-in-out;
  opacity: 1;
  transform: translateY(0);
}
/* --------------------------------------- */
.section1 .content2 h2 {
  color: white;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.753);
  font-size: 52px;
  font-weight: 400;
  margin: 0;
}
.section1 .content2 h1 {
  color: #fff;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.753);
  font-size: 72px;
  margin: 0;
}
.section1 .content2 p {
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.753);
  font-size: 52px;
  font-weight: 400;
  margin: 10px 0 0 0;
}
/* ------animatie text 1------------------------------- */
.section1 .content3 {
  position: absolute;
  top: 76%;
  left: 55%;
  text-align: left;
  margin: auto;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 1s, transform 1s;
}
@keyframes slideInFromBottoM {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.section1 .content3.active3 {
  animation: slideInFromBottoM 1.2s ease-in-out;
  opacity: 1;
  transform: translateY(0);
}
/* --------------------------------------- */
.section1 .content3 h2 {
  color: white;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.753);
  font-size: 45px;
  font-weight: 400;
  margin: 0;
}
.section3a {
  background: linear-gradient(
    -45deg,
    #141414 0%,
    #141414 20%,
    #141414 40%,
    rgb(107, 70, 0) 60%,
    #141414 80%
  );
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.section3a .half-width-image {
  border-radius: 30px;
  height: 90%;
  width: 45%;
  object-fit: cover;
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* --------------------------------- */

/* ------animatie text 1------------------------------- */
.section3a .container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 860px;
  margin: 50px auto;
  padding: 10px;
}
.section3a .container p {
  font-size: 20px;
  font-weight: 700;
  padding-left: 50px;
}
.text {
  margin: 0;
  padding: 10px;
  text-align: left;
  border-radius: 10px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(-100%);
  animation: slideIn 1s forwards; /* Animatie de intrare */
  display: flex;
  align-items: center;
}

/* animației de intrare */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* animației de ieșire */
@keyframes slideOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.icon {
  width: 75px;
  height: auto;
  margin-right: 50px; /* Spațiu între imagine și text */
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .section1 .content2 {
    top: 58%;
    left: 0%;
    text-align: center;
  }
  .section1 .content2 h2 {
    font-size: 32px;
    font-weight: 400;
  }
  .section1 .content2 h1 {
    font-size: 52px;
    margin: 0;
  }
  .section1 .content2 h1 span {
    color: orange;
  }
  .section1 .content2 p {
    font-size: 32px;
    font-weight: 400;
  }
  .section1 .content3 {
    display: none;
  }
  .section3a {
    height: 905px;
  }
  .section3a .half-width-image {
    border-radius: 30px;
    height: 90%;
    width: 90%;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    /* opacity: 0;
    transition: opacity 1s ease-in-out; */
  }
  .section3a .container {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    margin: 50px auto;
    padding: 10px;
  }
  .section3a .container p {
    font-size: 20px;
    font-weight: 700;
    padding-left: 50px;
  }
  .icon {
    width: 30px;
    height: auto;
    margin-right: 50px; /* Spațiu între imagine și text */
  }
}
@media only screen and (max-width: 900px) and (orientation: landscape) {
  .section1 .content2 {
    top: 42%;
    left: 0%;
    text-align: center;
  }
  .section1 .content2 h2 {
    font-size: 32px;
    font-weight: 400;
  }
  .section1 .content2 h1 {
    font-size: 52px;
    margin: 0;
  }
  .section1 .content2 h1 span {
    color: orange;
  }
  .section1 .content2 p {
    font-size: 32px;
    font-weight: 400;
  }
  .section1 .content3 {
    display: none;
  }
  .section3a {
    height: 450px !important;
  }

  .section3a .half-width-image {
    border-radius: 30px;
    height: 350px;
    width: 350px;
    object-fit: cover;
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .section3a .container {
    position: absolute;
    top: -10%;
    left: 50%;
    width: 40%;
    margin: 50px auto;
    padding: 10px;
  }
  .section3a .container p {
    font-size: 15px;
    font-weight: 700;
    padding-left: 50px;
  }
  .icon {
    width: 20px;
    height: auto;
    margin-right: 50px; /* Spațiu între imagine și text */
  }
  .text {
    padding: 6px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .section1 .content2 {
    top: 58%;
    left: 0%;
    text-align: center;
  }
  .section1 .content2 h2 {
    font-size: 46px;
    font-weight: 400;
  }
  .section1 .content2 h1 {
    font-size: 70px;
    margin: 0;
  }
  .section1 .content2 h1 span {
    color: orange;
  }
  .section1 .content2 p {
    font-size: 46px;
    font-weight: 400;
  }
  .section1 .content3 {
    display: none;
  }
  .section3a {
    height: 1300px;
  }
  .section3a .half-width-image {
    border-radius: 30px;
    height: 90%;
    width: 90%;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
  }
  .section3a .container {
    position: absolute;
    top: 77%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    margin: 50px auto;
    padding: 10px;
  }
  .section3a .container p {
    font-size: 20px;
    font-weight: 700;
    padding-left: 50px;
  }
  .icon {
    width: 30px;
    height: auto;
    margin-right: 50px; /* Spațiu între imagine și text */
  }
}
/* ------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) {
  .section1 .content2 {
    top: 58%;
    left: 0%;
    text-align: center;
  }
  .section1 .content2 h2 {
    font-size: 46px;
    font-weight: 400;
  }
  .section1 .content2 h1 {
    font-size: 70px;
    margin: 0;
  }
  .section1 .content2 h1 span {
    color: orange;
  }
  .section1 .content2 p {
    font-size: 46px;
    font-weight: 400;
  }
  .section1 .content3 {
    display: none;
  }
  .section3a {
    height: 600px;
  }
  .section3a .container {
    width: 45%;
  }
  .section3a .container p {
    font-size: 20px;
    font-weight: 700;
    padding-left: 50px;
  }
  .icon {
    width: 30px;
    height: auto;
    margin-right: 50px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1500px) {
  .section1 .content2 {
    top: 58%;
    left: 0%;
    text-align: center;
    /* border: 1px solid red; */
  }
  .section1 .content2 h2 {
    font-size: 46px;
    font-weight: 400;
  }
  .section1 .content2 h1 {
    font-size: 70px;
    margin: 0;
  }
  .section1 .content2 h1 span {
    color: orange;
  }
  .section1 .content3 {
    display: none;
  }
  .section3a {
    height: 700px;
  }
  .section3a .half-width-image {
    border-radius: 30px;
    height: 600px;
    width: 600px;
    object-fit: cover;
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .section3a .container {
    width: 45%;
  }
  .section3a .container p {
    font-size: 20px;
    font-weight: 700;
    padding-left: 50px;
  }
  .icon {
    width: 45px;
    height: auto;
    margin-right: 50px;
  }
  .section6 {
    height: 700px;
  }
}