*{
    margin: 0;
    padding: 0;
}

/*MARK:Body
*/
:root {
  --org: #f78154;
  --grn: #095d41;
  --wht: #f5f5f5;
  --blc: #0f0a0a;
  --gry: #b3bdbd;
}

@font-face {
  font-family: 'Popins'; /* libovolný název */
  src: url('fonts/Poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: 'Popins-bolt'; /* libovolný název */
  src: url('fonts/Poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: 'Popins-extrabolt'; /* libovolný název */
  src: url('fonts/Poppins/Poppins-ExtraBold.ttf');
}

h1{
    font-family: "Popins-extrabolt";
    font-size: 30px;
    font-weight: 700;
}

h2{
    font-family: "Popins-bolt";
    font-size: 24px;
    color: var(--blc);
}

h3{
    font-family: "Popins";
    font-weight: 500;
    font-size: 18px;
}

h4{
    font-size: 16px;
    font-family: 'Popins-extrabolt';
    margin-bottom: 12px;
    color: var(--blc);
}

p{
    font-family: "Popins";
    font-size: 16px;
    color: var(--blc);
}

a{
    font-family: "Popins-bolt";
    font-size: 16px;
    color: var(--blc);
    text-decoration: none;
}


body{
    justify-items: center;
    display: grid;
}

main{
    max-width: 1200px;
    width: 100%;
    color: var(--wht);
}



@media (max-width: 1199px) {

}

/*MARK:Navbar
*/
#header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 60px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    z-index: 999;
    position: sticky;
    transition: top 0.3s ease;
    top: 0;
    left: 0;   
}

#header img{
    height: 50px;
    transition: transform 0.6s ease;
   
}

#header img:hover{
    transform: rotate(-360deg);
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar li {
    list-style: none;
    padding: 0 15px;
    position: relative;
    transition: 0.3s;
}

#navbar li a {
    text-decoration: none;
    font-family: 'Popins-bolt';
    font-size: 18px;
    color: var(--blc);
    transition: 0.3s ease;
    position: relative;
}

#navbar li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--org);
    left: 0;
    bottom: -3px;
    transition: width 0.3s ease-in-out;
}

#navbar li a:hover::after {
    width: 100%;
}

#navbar li a:hover {
    color: var(--org); 
}

#mobil{
    cursor: pointer;
    display: none;
    align-items: center;
}

#close{
    cursor: pointer;
    display: none;
}

/*MARK:Headline
*/
#headline{
  background-image: url(img/baner1.jpeg);
  background-position: top right; /* nebo top center, podle potřeby */
  background-repeat: no-repeat;
  background-size: cover;
  height: 60vh;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 70px;
}

.headline-text{
    width: 44%;
    color: var(--blc);
    
}

.headline-text h3{
    color: var(--blc);
    padding: 18px 0;
}

.headline-text span{
    color: var(--org);
}

button{
    margin-top: 25px;
    text-decoration: none;
    background-color: var(--org);
    border: none;
    padding: 8px 10px;
}

button p{
    font-family: "Popins-bolt";
    line-height: 18px;
}

/*MARK:Way
*/
#way{
    padding: 80px 70px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    color: var(--blc);
}

#way p{
    margin-top: 25px;
}

/*MARK:Icons
*/

#icons{
    color: var(--blc);
    background-color: var(--wht);
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding:100px 70px;
    box-sizing: border-box;
}

.icon-box{
    flex: 1 1 calc(25% - 20%);
    min-width: 200px;
    text-align: center;
}

.icon-box img{
    width:120px;
    margin: 0 auto 0px auto;
    padding: 20px 0px;
    border-bottom: 2px solid #ccc;
    display: block;
}

.icon-box h4{
    font-size: 22px;
    font-family: 'Popins-extrabolt';
    margin-bottom: 20px;
    height:70px;
}

.icon-box p {
    text-align: center;
    line-height: 1.5;
}


@media (max-width: 1000px) {
    .icon-box {
        flex: 1 1 calc(50% - 30px); /* dva sloupce */
    }
}

@media (max-width: 500px) {
    .icon-box {
        flex: 1 1 100%; /* jeden sloupec */
    }
}

/*MARK:Run
*/
#rungirl{
    display: flex;
    align-items: center;
    background-color: var(--org);
}

#rungirl .girl{
    width: 40%;
    height: 100%;
}
 
#rungirl .girl img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#rungirl .run-text{
    width: 60%;
    padding: 0% 10%; 
    text-align: justify
}

#rungirl .run-text h2{
    font-size: 30px;
    padding-bottom: 30px;  
}

#rungirl .run-text p{
    padding-bottom: 30px;  
}

/*MARK:Faq
*/
#faq{
    padding: 70px 70px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

#faq .task {
    border-bottom: 1px solid var(--gry);
    padding: 14px 0;
}

#faq .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

#faq .task button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;           
    background-color: var(--org);       
    color: var(--blc);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;

    display: flex;         
    align-items: center;
    justify-content: center;
    line-height: 0.9;
    transition: background-color 0.3s;
    flex-shrink: 0;                  
}

#faq .task button.active {
    background-color: var(--gry);
    color: var(--blc);
}

#faq .task p {
    display: none;         
    margin: 4px 0 0 0;
}

/*MARK:Program
*/

#program {
    display: flex;
    align-items: center;
    background-color: var(--gry);
}

#program .girl{
    width: 40%;
    height: 100%;
}
 
#program .girl img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#program .program-text{
    width: 60%;
    padding: 0% 10%; 
    text-align: justify
}

#program .program-text h2{
    font-size: 30px;
    padding-bottom: 30px;  
}

#program .program-text p{
    padding-bottom: 30px;  
}

/*MARK:Benefits
*/

#benefits {
    padding: 70px 70px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

#benefits h2 {
    margin-bottom: 30px;
}

.benefits-info {
    border-bottom: 1px solid var(--gry);
    padding-bottom: 15px;  
}

.benefits-text {
    display: flex;
    justify-content: space-between;
    align-items: center;   
    gap: 10px;
}

.benefits-text h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;      
    flex: 1;               
}

.benefits-text button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: #f26522; /* oranžová */
    color: var(--blc);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;

    display: flex;         
    align-items: center;
    justify-content: center;
    line-height: 0.9;
    transition: background-color 0.3s;
    flex-shrink: 0;      
}

.benefits-text button.active {
    background-color: var(--gry); 
}

.benefits-info p {
    display: none;
    margin: 10px 0 0 0;
}
/*MARK:Phase
*/

#phase{
    padding: 70px 70px;
    background-color: var(--grn);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#phase .phase-box{
    width: 43%;
    min-width: 200px;
    padding: 0 8px;
    margin: 25px 0;
    display: flex;              /* udělá z boxu flex-container */
    flex-direction: column;
}

#phase .phase-box h2{
    color: var(--org);
    margin: 12px 0;
}

#phase .phase-box h3{
    margin: 12px 0;
}

#phase .phase-box li{
    font-family: "Popins";
    color: white;
    padding-top: 5px;
}

#phase .phase-box p{
    color: var(--org);
    padding-top: 22px;
    margin-top: auto;
    
}
/*MARK:About
*/
#about-info {
    display: flex;
    align-items: center;
    background-color: var(--gry);
}

#about-info .girl{
    width: 50%;
    height: 100%;
}
 
#about-info .girl img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#about-info .about-text{
    width: 50%;
    padding: 0% 10%; 
    text-align: justify
}

#about-info .about-text h2{
    font-size: 30px;
    padding-bottom: 30px;  
}

#about-info .about-text p{
    padding-bottom: 30px;  
}

/*MARK:Reference
*/
#reference {
    position: relative;
    background: white;     /* světle šedé pozadí */
    padding: 60px 40px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}

.reference-container {
    display: flex;
    transition: transform 0.5s ease;
}

.reference-box {
    flex: 0 0 33.3%;
    flex-wrap: wrap;
    min-width: 300px;             
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.reference-box img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;          
    margin-bottom: 20px;
}

.reference-box h3 {
    color: black;
    font-family: 'Popins-bolt';
    margin-bottom: 10px;
}

.reference-box p {
    color: black;
    max-width: 400px;
    margin: 0 auto;
}

/* šipky */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: var(--org);        
    cursor: pointer;
    user-select: none;
    z-index: 10;
}

.arrow.left {
    left: 10px;
}

.arrow.right {
    right: 10px;
}

#contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--wht);          
    padding: 30px 60px;
}

#contact .name h2 {
    margin-bottom: 10px;
}

#contact .name p,
#contact .name a {
    font-family: "Popins";
    font-size: 16px;
    color: var(--blc);
    margin: 3px 0;
    color: black;                    /* tmavý text */
}

#contact .media {
    display: flex;
    gap: 20px;                      /* mezera mezi ikonami */
}

#contact .media img {
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#contact .media img:hover {
    transform: scale(1.1);          /* jemný efekt při najetí */
}

/* responzivita */
@media (max-width: 768px) {
    #contact {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

footer{
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    text-align: center;
    justify-content: center;
    height: 25px;
    padding-bottom: 5px;
}

footer img{
    margin-left: 20px;

}


@media (max-width: 1000px) {
    #header, 
    #way, 
    #icons, 
    #faq, 
    #benefits, 
    #phase,
    #contact {
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }

    #rungirl,
    #program,
    #about-info {
        flex-direction: column;
    }

    #rungirl .girl,
    #program .girl,
    #about-info .girl {
        width: 100%;
        height: auto;
    }

    #rungirl .run-text,
    #program .program-text,
    #about-info .about-text {
        width: auto;
        padding: 40px 20px;
    }
}

/*MARK:900
*/
@media (max-width: 900px) {
    #header {
        padding: 10px 30px;
    }

    #navbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    #navbar li {
        padding: 10px 8px;
    }
}

/*MARK:800
*/
@media (max-width: 800px) {
    #headline {
        padding-left: 30px;
        justify-content: center;
        text-align: center;
        background-position: 50%;
    }

    .headline-text {
        width: 80%;
    }

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

    .reference-box {
        flex: 1 1 100%;
        max-width: 500px;
    }

    .arrow {
        display: none;
    }

      #navbar {
    display: none;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background-color: white;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  #mobil, #close {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 26px;
    color: var(--blc);
    z-index: 1000;
  }

  #mobil {
    margin-left: auto;
  }

  #close {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
  }
}

/*MARK:700
*/
@media (max-width: 700px) {
    #icons {
        flex-direction: column;
        align-items: center;
        padding: 60px 20px;
    }
}

/*MARK:600
*/
@media (max-width: 600px) {
    #contact {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    #phase .phase-box {
        width: auto;
        min-width: 200px;
        padding: 0 8px;
        margin: 25px 0;
        display: flex;
        flex-direction: column;
    }

    #program .program-text h2 {
        text-align: left;
        padding-bottom: 30px;
    }
}