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

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.container {
  width: 100%;
  max-width: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    padding: 0 20px;
    margin: 0;
}

/* Header Styles */
header {
    /* background: linear-gradient(135deg, #FF6F61 0%, #FF9A8B 100%); */
    background: linear-gradient(326deg,#dd6467,#217fb5,#1bbd9b,#d618e7);
    background-size: 240% 240%;
    animation: gradient-animation 4s ease infinite;

    color: white;
    padding: 60px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/* Stiluri pentru secțiunea de marquee */
/*.marquee-section {*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*    background: #f4f4f4;*/
/*    padding: 20px 0;*/
/*}*/

/*.section-title {*/
/*    text-align: center;*/
/*    font-size: 2rem;*/
/*    color: #333;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.marquee {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    overflow: hidden;*/
/*    position: relative;*/
    background: #fff; /* Sau orice altă culoare dorită */
/*    white-space: nowrap;*/
/*}*/

/*.marquee-content {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    animation: marquee 15s linear infinite;*/
/*}*/

/*.company {*/
/*    display: inline-block;*/
    padding: 0 50px; /* Spațiu între companii */
/*    font-size: 1.2rem;*/
/*    color: #333;*/
/*}*/

/* Animatie pentru derularea textului */
/*@keyframes marquee {*/
/*    0% {*/
/*        transform: translateX(100%);*/
/*    }*/
/*    100% {*/
/*        transform: translateX(-100%);*/
/*    }*/
/*}*/










/* Stiluri pentru "Desfășurarea Cursului" */
/* .desfasurarea-cursului {
    width: 100%; /* Asigură că secțiunea ocupă întreaga lățime */
    box-sizing: border-box; /* Include padding-ul în lățimea totală */
    padding: 5px; /* Adaugă spațiu în jurul conținutului */
    margin: 0; /* Elimină marginea pentru a ocupa întreaga lățime */
} */






/* Stiluri generale pentru secțiuni */
section, .about, .course {
    padding: 5px 5px; /* Adaugă spațiu în jurul secțiunii */
    width: 100%; /* Asigură că secțiunea ocupă 100% din lățimea paginii */
    box-sizing: border-box; /* Include padding-ul și marginile în lățimea totală */
    max-width: 1200px; /* Maximizează lățimea secțiunii pentru a nu fi prea mare pe ecrane mari */
    margin: 0 auto; /* Centrează secțiunea pe ecran */
}


/* Stiluri pentru meniul pe mobile */
@media (max-width: 768px) {

  .about{
    padding-top: 0px;
  }

  section {
      padding: 0px 0px; /* Reduce spațiul în jurul secțiunii pe mobile */
  }

  .about, .course, .benefits {
    padding: 0px 0px;
      /* Asigură că secțiunile despre, curs și beneficii sunt pe lățime completă */
      width: 100%;
      margin: 0;
  }

  /* Stiluri pentru logo și meniul din header */
  header {
      text-align: center; /* Centrează conținutul în header */
      padding: 20px 0; /* Adaugă spațiu sus și jos */
  }

  .logo {
      margin-bottom: 20px; /* Spațiu între logo și meniu */
  }

  /* Stiluri pentru meniul principal */
  .main-nav {
      display: flex;
      justify-content: center; /* Centrează meniul pe ecran */
  }


    .main-nav {
        display: none; /* Ascunde meniul pe dispozitivele mobile */
    }

    .logo {
        margin-top: 0; /* Elimină marginea de sus pentru logo pe mobile */
    }
}



/* Configurare pentru layout-ul în două coloane */
.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 20px;
    position: relative;
    z-index: 1;
}

.hero-text {
    flex: 1;
    margin-right: 20px;
}

.hero-media {
    flex: 1;
    max-width: 50%;
}

.hero-media img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 768px) {

  .footer-rights, .footer-contact {
       font-size: 0.9em; /* Redimensionează textul pentru mobile */
       text-align: center; /* Aliniază textul la centru */
       margin: 10px 0; /* Adaugă margini pentru un aspect echilibrat */
       padding: 0 10px; /* Spațiu adițional pe laterale pentru un aspect aerisit */
   }

  footer p {
        font-size: 0.8em; /* Redimensionează textul pentru mobile */
        text-align: center; /* Aliniază textul la centru */
        margin: 10px 0; /* Adaugă margini pentru un aspect echilibrat */
        padding: 0 10px; /* Spațiu adițional pe laterale pentru un aspect aerisit */
    }


  /* Ajustări pentru textul din paragrafe */
    .hero-text p {
        text-align: left; /* Aliniere la stânga pentru paragrafe */
        margin: 10px 0;   /* Margini pentru un aspect mai echilibrat */
        line-height: 1.5; /* Îmbunătățirea spațierii între rânduri */
        padding: 0 10px;  /* Spațiu adițional pe laterale pentru un aspect aerisit */
    }

    /* Dacă dorești să faci la fel pentru textul altor secțiuni */
    section p {
        text-align: left;
        margin: 5px 0;
        line-height: 1.5;
        padding: 0 10px;
    }
    

  /* Diminuarea dimensiunii textului pentru mobile */
    .hero-text h1, h2 {
      padding-top: 25px;
        font-size: 1.8rem; /* Ajustează dimensiunea textului principal */
        line-height: 1.2; /* Îmbunătățirea spațierii dintre rânduri */
        margin-bottom: 10px; /* Spațiu mai mic între text și următorul element */
    }

    .hero-text p {
        font-size: 1rem; /* Ajustare dimensiune text pentru paragraful de sub titlu */
    }

    .hero-content {
        flex-direction: column-reverse; /* Inversarea coloanelor pe dispozitive mobile */
        text-align: center;
    }

    .hero-text {
        margin-right: 0;
    }

    .hero-media {
        max-width: 100%;
        margin-top: 20px;
    }
}
/* Configurare pentru layout-ul în două coloane */


h1 {
    font-size: 2.5em;
    margin: 0;
    font-weight: bold;
    line-height: 45px;
}

p {
    /* font-size: 1.5em; */
    margin: 18px 0;
    font-style: italic;
}

.cta-button {
    display: block;
    margin: 20px auto; /* Pentru a centra butonul și a adăuga spațiu deasupra */
    width: fit-content; /* Pentru a face ca butonul să se adapteze conținutului */
    background-color: #ff4b5c;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background-color: #ff707d;
    transform: scale(1.05);
}

/* Sticky Menu Styles */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    transition: all 0.3s ease; /* Tranziție pentru efectele de schimbare */
}

.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asigură că meniul este deasupra altor elemente */
    background: #333; /* Culoarea de fundal a meniului sticky */
    padding: 10px 20px; /* Padding pentru a adăuga spațiu în jurul meniului */
}

nav .logo img {
    width: 160px;
    height: auto; /* Menține proporțiile imaginii */
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

.hero {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.cta-button {
    background: white;
    color: #4CAF50;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background: #45a049;
    color: white;
}

/* Section Styles */
section {
    padding: 40px 0;
    margin: 20px 0;
}

.about, .course {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.about img, .course img {
    max-width: 100%;
    margin-right: 20px;
    border-radius: 10px;
    flex: 1;
}

.about-text, .course-text {
    flex: 1;
    padding: 20px;
}

.benefits {
    background: #fff;
    text-align: center;
    padding: 40px 20px;
}

.benefit-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.benefit-item {
    flex: 1 1 300px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: white;
    max-width: 300px;
}

.benefit-item span {
    font-size: 2rem;
    color: #4CAF50;
    margin-bottom: 10px;
}




/* Slider Section Styles */

#slider {
    padding: 20px 20px;
    text-align: center;
}

#slider h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* .wrapper{
  position: relative;
  width: 100%;
  height: 35vw;
} */
.cont{
  text-align: -webkit-center; !important;
}

.wrapper{
  z-index: 1;
  position: relative;
  width: 400px;
  height: 70vh;
}
.wrapper .img{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  clip-path: circle(0% at 0% 100%);
  transition: all 0.7s;
}
#one:checked ~ .img-1 img{
  clip-path: circle(150% at 0% 100%);
}
#two:checked ~ .img-1 img,
#two:checked ~ .img-2 img{
  clip-path: circle(150% at 0% 100%);
}
#three:checked ~ .img-1 img,
#three:checked ~ .img-2 img,
#three:checked ~ .img-3 img{
  clip-path: circle(150% at 0% 100%);
}
#four:checked ~ .img-1 img,
#four:checked ~ .img-2 img,
#four:checked ~ .img-3 img,
#four:checked ~ .img-4 img{
  clip-path: circle(150% at 0% 100%);
}
#five:checked ~ .img-1 img,
#five:checked ~ .img-2 img,
#five:checked ~ .img-3 img,
#five:checked ~ .img-4 img,
#five:checked ~ .img-5 img{
  clip-path: circle(150% at 0% 100%);
}

#six:checked ~ .img-1 img,
#six:checked ~ .img-2 img,
#six:checked ~ .img-3 img,
#six:checked ~ .img-4 img,
#six:checked ~ .img-5 img,
#six:checked ~ .img-6 img{
  clip-path: circle(150% at 0% 100%);
}

#seven:checked ~ .img-1 img,
#seven:checked ~ .img-2 img,
#seven:checked ~ .img-3 img,
#seven:checked ~ .img-4 img,
#seven:checked ~ .img-5 img,
#seven:checked ~ .img-6 img,
#seven:checked ~ .img-7 img{
  clip-path: circle(150% at 0% 100%);
}

#eight:checked ~ .img-1 img,
#eight:checked ~ .img-2 img,
#eight:checked ~ .img-3 img,
#eight:checked ~ .img-4 img,
#eight:checked ~ .img-5 img,
#eight:checked ~ .img-6 img,
#eight:checked ~ .img-7 img,
#eight:checked ~ .img-8 img{
  clip-path: circle(150% at 0% 100%);
}

#nine:checked ~ .img-1 img,
#nine:checked ~ .img-2 img,
#nine:checked ~ .img-3 img,
#nine:checked ~ .img-4 img,
#nine:checked ~ .img-5 img,
#nine:checked ~ .img-6 img,
#nine:checked ~ .img-7 img,
#nine:checked ~ .img-8 img,
#nine:checked ~ .img-9 img{
  clip-path: circle(150% at 0% 100%);
}

#ten:checked ~ .img-1 img,
#ten:checked ~ .img-2 img,
#ten:checked ~ .img-3 img,
#ten:checked ~ .img-4 img,
#ten:checked ~ .img-5 img,
#ten:checked ~ .img-6 img,
#ten:checked ~ .img-7 img,
#ten:checked ~ .img-8 img,
#ten:checked ~ .img-9 img,
#ten:checked ~ .img-10 img{
  clip-path: circle(150% at 0% 100%);
}

#eleven:checked ~ .img-1 img,
#eleven:checked ~ .img-2 img,
#eleven:checked ~ .img-3 img,
#eleven:checked ~ .img-4 img,
#eleven:checked ~ .img-5 img,
#eleven:checked ~ .img-6 img,
#eleven:checked ~ .img-7 img,
#eleven:checked ~ .img-8 img,
#eleven:checked ~ .img-9 img,
#eleven:checked ~ .img-10 img,
#eleven:checked ~ .img-11 img{
  clip-path: circle(150% at 0% 100%);
}



.wrapper .sliders{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
}
.wrapper .sliders label{
  border: 2px solid rgb(142,197,252);
  width: 13px;
  height: 13px;
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five
#six:checked ~ .sliders label.six,
#seven:checked ~ .sliders label.seven,
#eight:checked ~ .sliders label.eight,
#nine:checked ~ .sliders label.nine,
#ten:checked ~ .sliders label.ten,
#eleven:checked ~ .sliders label.eleven {
  width: 35px;
  border-radius: 14px;
  background: rgb(142,197,252);
}
.sliders label:hover{
  background: rgb(142,197,252);
}
input[type="radio"]{
  display: none;
}


@keyframes slideInOut {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.wrapper .img {
  animation: slideInOut 0.5s ease-in-out;
}






/*logo slider*/

















/* Reviews Section Styles */



/* Contact Section */
.contact {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
}

.contact form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.contact label {
    display: block;
    margin: 10px 0 5px;
}

.contact input, .contact textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact button {
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact button:hover {
    background: #45a049;
}

/* Footer Styles */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

footer ul {
    list-style: none;
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

footer ul li {
    margin: 0 15px;
}

footer ul li a {
    color: white;
    text-decoration: none;
}

.social-icons a {
    margin: 0 10px;
}

.social-icons img {
    width: 30px;
}

/* Responsive Styles */
@media (max-width: 768px) {

  .wrapper{
    padding: 0px;
    position: relative;
    width: auto;
    height: 75vh;
  }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    .about, .course {
        flex-direction: column;
        text-align: center;
    }

    .about img, .course img {
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    .about-text, .course-text {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .benefit-items {
        flex-direction: column;
        align-items: center;
    }
}