@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,800;1,200;1,600;1,800&display=swap');

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

:root {
   --logo-green: #1686c7;
   --logo-red: #C73B48;
   --logo-dark-green: #395459;
   --logo-pink: #E298A3;
   --border-radius-default: 10px;
}

body {
   background-color: whitesmoke;
   font-family: "Poppins";
}

a{
   color: black;
   text-decoration: none;
}

.btn-customize:active {
       transform: scale(0.98)
   }
   
.btn-my-green{
   background-color: var(--logo-green);
}   

.btn-customize{
   background-color: var(--logo-green);
   border-radius: var(--border-radius-default);
   padding: 10px 20px;
   color: white;
   font-size: 1.4rem;
   border: none;
   outline: none;
   box-shadow: 0 3px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1);
   transition: 0.4s;
}

.buttons-web-yt{
   display: flex;
   width: 100%;
   gap: 3%;
   margin-bottom: 3%;
}

.btn-customize.web {
   background-color: white;
   border: 1px solid var(--logo-green);
   color: var(--logo-green);
   font-size: 18px;
}

.btn-customize.youtube {
   font-size: 18px;
}

.event-headline-icon.hrko{
   margin-top: 3%;
}

.btn-customize:hover {
   transform: scale(1.1);
}

.btn-customize:active {
   transform: scale(0.98);
}

.btn-contact{
   background-color: var(--logo-green);
   border-radius: var(--border-radius-default);
   padding: 10px 30px !important;
   color: white !important;
   font-size: 1.3rem;
   border: none;
   outline: none;
   transition: 0.4s;
   box-shadow: 0 6px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1);
}

.btn-contact:hover {
   transform: scale(1.1);
}

.btn-contact:active {
   transform: scale(0.98);
}

/* navigation */

.nav-link {
   font-size: 1.1rem;
   color: black;
}

.nav-link-customize {
   margin-left: 30px;
   transition: 0.4s
}

.nav-link-customize:hover{
   border-bottom: 2px solid var(--logo-green);
}

.color-whitesmoke {
   background-color: whitesmoke;
}

.customize-logo img{
   width: 150px;
   margin-top: 0%;
}


/* main section */
.main-section {
   display: grid;
   grid-template-columns: 1fr 2fr;
   height: 80vh;
   position: relative;
 
}

/* right-side-main-section */
.right-side-main {

}

/* vyhlídkové lety - hero část */
#uvod-kecy {
   margin-top: 5%;
   margin-bottom: 5%;
}

/* left-side-main-section */
.left-side-main {
   display: grid;
   place-content: center;
}

.left-side-main h1 {
   margin-bottom: 10%;
}

.main-text-wrapper{
   margin-top: -30%;
}

/* icon - bage */
.fa-circle-check {
   color: #28adc4;
   margin-bottom: 1%;
}

/* events */
.event-headline-icon{
   display: flex;
   align-items: center;
   gap: 1.5%;
}

.events-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: .7s;
   border-radius: var(--border-radius-default);
   height: 100%;
   margin: 3% 0 15% 0;
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);
}


.events-wrapper:hover{
   background-color: white;

}

.events-img {
   border-radius: var(--border-radius-default);
   transform: rotate(5deg);
   transition: .4s;
}

.events-img-wrapper.hrko img {
   width: 400px;
   height: 400px;
}

.events-img-wrapper img {
   width: 300px;
   height: 300px;
}

.events-text{
   transition: 0.4s;
   padding: 50px 100px;
}

.events-p {
   margin: 3% 0 3% 0;
}

.mobile-h3-event-fourth{
   display: none;
}

.desktop-h3-event-fourth{
   display: block;
}

/* accordion */
#section-accordion{
   margin: 3% 0 10% 0;
}

.accordion-h2 {
   margin-bottom: 3%;
}

.accordion-item {
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);
}

/* cards */
.cards-wrapper {
   display: flex;
   justify-content: space-between;
   margin: 3% 0 10% 0;
}


.card-customize{
   border-radius: var(--border-radius-default);
   width: 30%;
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);

}

.card-customize img {
   border-top-right-radius: var(--border-radius-default);
}

/* lety homepage karty */
.card-customize-lety{
   border-radius: var(--border-radius-default);
   width: 42.5%;
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);

}

/* cards - vyhlídka */

.cards-wrapper-vyhlidka {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;              /* mezera mezi kartami */
  margin: 3% 0 10% 0;
}

.cards-wrapper-vyhlidka .card {
  flex: 0 0 calc(33.333% - 13.333px);
  max-width: calc(33.333% - 13.333px);
  box-sizing: border-box;
  margin-bottom: 20px;    /* mezera pod kartami */
}


/* kontejner karet */
.cards-wrapper-vyhlidka.pilot-okruh {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;          /* mezera mezi kartami */
  margin: 3% 0 10% 0;
  box-sizing: border-box;
}

/* samotné karty uvnitř kontejneru */
.cards-wrapper-vyhlidka.pilot-okruh .card {
  flex: 0 0 42.5%;
  max-width: 42.5%;
  box-sizing: border-box;
  margin-bottom: 20px; /* mezera pod kartami */
}



/* Responzivně 2 karty pod sebe <992px, 1 karta <576px */
@media (max-width: 992px) {
  .cards-wrapper-vyhlidka .card {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

    /* Na mobilech/slabších tabletech dej karty pod sebe */
  .cards-wrapper-vyhlidka.pilot-okruh {
    flex-direction: column;
    align-items: stretch; /* roztáhne karty na celou šířku kontejneru */
  }

  .cards-wrapper-vyhlidka.pilot-okruh .card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


@media (max-width: 576px) {
  .cards-wrapper-vyhlidka .card {
    flex: 0 0 100%;
    max-width: 100%;
  }

    /* Na mobilech/slabších tabletech dej karty pod sebe */
  .cards-wrapper-vyhlidka.pilot-okruh {
    flex-direction: column;
    align-items: stretch; /* roztáhne karty na celou šířku kontejneru */
  }

  .cards-wrapper-vyhlidka.pilot-okruh .card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* form */
.form-wrapper{
   display: flex;
}

/* form-left side*/
.form-center{
   width: 50%;

}

.contact-h2 {
   margin-bottom: 3%;
}


.form-center input {
   width: 100%;
   padding: 15px;
   margin: 2% 0;
   border-radius: var(--border-radius-default);
   border: none;
   outline: none;
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);
}

.form-center textarea {
   width: 100%;
   padding: 15px;
   margin: 2% 0;
   border-radius: var(--border-radius-default);
   border: none;
   outline: none;
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);
}

.odeslat-btn{
   background-color: var(--logo-green);
   color: white;
   padding: 12px;
}

.odeslat-btn:active{
   transform: scale(0.98);
}

/* telephone */
.form-telephones {
   display: grid;
   place-content: center;
   margin-left: 20%;
   gap: 10%;
}

.form-telephones h2 {
   text-align: left;
}

.fa-phone{
  color: var(--logo-green)
}

.fa-envelope {
   color: var(--logo-green);
   text-transform: lowercase;
}

.tel-ahref{
   margin-top: 5%;
   display: block;
   transition: 0.4s;
}

.tel-ahref:hover{
   transform: scale(1.1);
}

.email-ahref {
   color: black;
   font-family: "poppins";
   text-transform: lowercase;
   margin-bottom: 5%;
   transition: 0.4s;
}

.email-ahref:hover {
   color: var(--logo-green);
   transform: scale(1.1);
}

/* footer */
.footer-wrapper{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 10%;
   margin-bottom: 2%;
}

.logo-footer img{
   width: 130px;
}

/* slider */
#slidy-container {  
   overflow: hidden; 
   clip-path: polygon(0 0, 100% 0, 100% 99%, 0% 100%);
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);
   border-radius: var(--border-radius-default);
 
 }


 .slider-wrapper{
   width: 100%;
   box-shadow: 0 5px 25px rgba(0,0,0, 0.2);

 }

 /* mobile */
 @media (max-width: 992px){

   /* navbar */
   .navbar{
      margin-bottom: 10%;
   }

   .nav-link-customize{
      margin: 2% 33%;
   }

   .btn-contact{
      padding: 10px 10px !important;
   }

   /* logo */
   .customize-logo img{
      width: 130px;
      margin-top: 5%;
   }

   /* main */
   .main-section {
  display: flex;
  flex-direction: column;
  height: auto;


   }
   .btn-customize{
      width: 100%;
      font-size: 1.3rem;
   }

   .left-side-main {
      margin-bottom: 10%;
      
   }
   
   
   .main-text-wrapper{
      margin-top: 0;
     
   }

   .main-text-wrapper h1 {
      font-size: 2rem;
   }

   /* slider */

   #slidy-container {  
      clip-path: polygon(0 0, 100% 0%, 100% 99%, 0% 100%);
    
    }
   
    .slider-wrapper{
      width: 100%;
      height: 120%;
      box-shadow: 0 5px 25px rgba(0,0,0, 0.2);

    }


   /* events  */
   .events-wrapper{
      flex-direction: column;
      height: 120%;
      margin-top: 10%;
   }

   .events-wrapper.first-event {
      height: 100%;
  }

   .events-text{
      transition: 0.4s;
      padding: 7% 8%;
   }


   .events-img-wrapper img{
     display: none;

   }

   .event-h2{
      margin-bottom: 10%;
   }

    .event-h2-recenze{
      margin-bottom: 0%;
   }

   .event h3 {
   
   }

   .first-event{
      background-image: linear-gradient( rgba(25, 25, 28, 0.52), rgba(4, 2, 2, 0.73)), url("img/lada-cech.webp");
      width:100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      color: white;
   }

   .buttons-web-yt{
      display: flex;
      flex-direction: column;
      width: 100%;
      font-size: 16px;
   }

   .youtube {
      margin-bottom: 3%;
   }

   .btn-customize {
      font-size: 16px;
     
   }

   .second-event{
      background-image: linear-gradient(rgba(25, 25, 28, 0.52), rgba(4, 2, 2, 0.73)), url("img/slavnosti-event.png");
      width:100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      color: white;
   }

   .third-event{
      background-image: linear-gradient(rgba(25, 25, 28, 0.52), rgba(4, 2, 2, 0.73)), url("img/krasobrusleni-event.png");
      width:100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      color: white;
   }

   .fourth-event{
      background-image: linear-gradient(rgba(25, 25, 28, 0.52), rgba(4, 2, 2, 0.73)), url("img/gamechanger-event.png");
      width:100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      color: white;
   }

   .mobile-h3-event-fourth{
      display: block;
   }

   .desktop-h3-event-fourth{
      display: none;
   }

   .event-h2, 
   .accordion-h2{
      margin-bottom: 10%;
   }

   /* cards */
   .cards-wrapper{
      flex-direction: column;
   }

   .card-customize{
      width: 100%;
      margin-top: 10%;
   }

      .card-customize-lety{
      width: 100%;
      margin-top: 10%;
   }

   .card-text-customize{
      font-size: .92rem;
   }

   /* slider */
   #slidy-container{
      border-radius: var(--border-radius-default);
   }

   /* form */
   .form-wrapper{
      flex-direction: column-reverse;
      
   }

   .form-center input, 
   .form-center textarea{
      width: 100%;
   }

   .form-center{
      width: 100%;
      margin-top: 15%;
   }

   .form-telephones{
      margin-left: 2%;
   }

   .item1{
      margin-top: 5%;
   }

   /* h2- mobile hero */
   .team-h2{
      margin-top: 10%;
   }

   /* zpráva odeslána */
   .send-info-text{
      text-align: center;
      width: 100vw;
      background-color: white;
      padding: 5% 5%;
      box-shadow: 0 6px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1);
      border-radius: var(--border-radius-default);
   }

 }

/* zpráva odeslána */
.wrapper-send-info{
   margin-top: 5%;
   height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.send-info-text{
   text-align: center;
   width: 70vw;
   background-color: white;
   padding: 10% 15%;
   box-shadow: 0 6px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1);
   border-radius: var(--border-radius-default);
}