@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@100,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
* { box-sizing: border-box;}
/*section .container */
:root {
  --pm-color: rgb(173, 50, 72);
  --barva-hneda: rgb(224, 111, 5);
  --barva-hneda-svetla: rgb(234, 224, 216);
  --barva-zelena: rgb(5, 105, 5);
   
  --barva-zelena-svetla: rgb(227, 231, 226);
  --barva-zelena-svetla: rgb(187, 189, 186);
  --header-font: 'Exo 2', Verdana, sans-serif;
  --text-color: rgb(33, 33, 35);
  --text-color-box: rgb(247, 242, 241);

  --text-color-pozadi: rgb(247, 244, 229);
  font-size: 13px;
  /*font-family: 'Nunito Sans', system-ui, sans-serif;*/
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 300; /* 400 default for text */
  color: var(--text-color);
  scroll-behavior: smooth;
}



h1 {
    font-weight: 600;
    margin-top:  100px;
    margin-bottom: 30px;
  
    font-size: 3rem;
    color: var(--barva-hneda);
      color: rgb(224, 111, 5);
    text-transform:uppercase;
    margin-left: 0;
    font-size: 5rem;
  }

h2 {
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
   
   
    font-size: 4rem;
    color: var(--barva-hneda);
     
    text-transform:uppercase;
    
  }

h3 {margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;

     color: rgb(33, 136, 42);
     color: var(--barva-zelena);
    font-size: 2.3rem;
    font-weight: 500;
  
    
  }

h4 {margin-bottom:100px;}  

h5 {font-weight: 600;
    font-size: 1.8rem;
    color:black;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    }

.flex-item-contact p {font-size: 1.7rem;
    color:rgb(87, 85, 85)}

body {
  margin: 0;
  padding: 0;
  background-color:var(--text-color-pozadi) ; 
 
  overflow-x: hidden; /* ADD THIS */

}

header {
  position: sticky;
  top: 0;
  background-color: var(--text-color-pozadi);

  z-index: 10;
 
  border-bottom: 1.5px solid var(--pm-color);
  padding-block: 1rem;
  padding-top: 0;
  overflow-x: hidden; 
  width: 100%; 
  margin-top: 20px;
  margin-bottom: 10px;

}


html {scroll-padding-top: 130px;}


.desktop-menu {
 
  display: grid;
  grid-template-areas:
    'logo lang'
    'logo links';
}

.langbar {
  grid-area: lang;
  justify-self: end;
  font-size: 0.7rem;
  font-weight: 100; /* override langbar */
  padding-top: 5px;
  text-transform: uppercase;
  margin-bottom: 13px;
  
}
.langbar a {
  color: var(--pm-color);
  text-decoration: underline;
  font-weight: 100;
  

}

.logo-wrapper {
  grid-area: logo;
  margin-top: 30px;
  margin-bottom: 0;
}


.logo-ievidence{

  color:#520307;
  
  font-size: 300%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 900;
  
}

.logo-wrapper a{
  text-decoration:none;
  
}


.flag {
  width: 30px;
  margin-right: 8px;
  margin-top:50px;
}

.flagCB {
  width: 30px;
  filter: grayscale(1);
  margin-right: 8px;
}


.navbar {
  justify-self: end;
  align-self: flex-end;
  grid-area: links;
  display: flex;
  gap: 2rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  font-size: 2rem;
 

}

.navbar a {
  text-decoration:none;
  color: var(--text-color);
  font-weight: 500; /* <A> */
  font-size: 1.2rem;
}

.logo {
  width:90 vw;
  max-width: 250px;
  /*background-color: bisque;*/
}


        /* MOBILNI NAVIGACE
        /*
        * Made by Erik Terwan
        * 24th of November 2015
        * MIT License
        *
        *
        * If you are thinking of using this in
        * production code, beware of the browser
        * prefixes.
        */



        #menuToggle
        {
        font-family: 'Raleway','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 14rem;
        font-weight: 800;
        display: none;
        position: fixed;
        right: 50px;
        top: 30px;
        z-index: 500;
        -webkit-user-select: none;
        user-select: none;
        }

        #menuToggle a
        {
            
        text-decoration: none;
        color: rgb(217, 217, 222);/* #232323;*/
        font-variant: small-caps;

        transition: color 0.3s ease;
        }

        #menuToggle a:hover {

        color: rgb(246, 168, 168);
        font-weight: 800;
        font-size: 6rem;
        }


        #menuToggle input
        {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;

        cursor: pointer;

        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */

        -webkit-touch-callout: none;
        }

        /*
        * Just a quick hamburger
        */
        #menuToggle span
        {
        display: block;
        width: 40px;
        height: 6px;
        margin-bottom: 5px;
        position: relative;

        background: #525050; /*barva hamburgeru */
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
        }

        #menuToggle span:first-child
        {
        transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2)
        {
        transform-origin: 0% 100%;
        }

        /* 
        * Transform all the slices of hamburger
        * into a crossmark.
        */
        #menuToggle input:checked ~ span
        {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #faf8f8;

        }

        /*
        * But let's hide the middle one.
        */
        #menuToggle input:checked ~ span:nth-last-child(3)
        {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
        }

        /*
        * Ohyeah and the last one should go the other direction
        */
        #menuToggle input:checked ~ span:nth-last-child(2)
        {
        transform: rotate(-45deg) translate(0, -1px);
        }
        #menuToggle:checked ~ #menuMobile {
            transform: translateX(0);
        }
                  


        /*
        * Make this absolute positioned
        * at the top left of the screen
        */
        #menuMobile
        {
        position: fixed;
        width: 300px;
     
        /*margin: -100px 0 0 -50px;*/
        margin: -100px 0 0 -200px;
        padding: 50px;
        padding-top: 125px;
        color:rgb(228, 221, 221);
        /*background:rgb(192, 190, 190) ;#ededed;*/
        /* POZADI MOBIL MENU */
        background: #ed850d;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        transform: translate(200%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        /*transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);*/
        }

        #menuMobile li
        {
        padding-top: 10px;
        padding-left: 10px;
        font-size: 30px;
        }
        #menuMobile li a:hover {
            color:yellow;
            font-size: 30px;
            font-weight: 600;
        }

        /*
        * And let's slide it in from the left
        */
        #menuToggle input:checked ~ ul
        {
        transform: none;
        }

        /* KONEC MOBIL NAVIGACE */






#menuBenefits{display: none;}



.customer-adj{
  gap:0;
  padding :0;
  margin-top: 0px;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #520307;
  margin-left: 50px;


}


/** ievidence */

.card-service {
  order:2;
  
  width: 35%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  margin-bottom: 0px;
  padding-top: 10px;

  padding-left: 10px;
  margin-top: 70px;
 
}

.card-service1 {
  order:1;
  
  width: 35%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  margin-bottom: 0px;
  padding-top: 10px;

  padding-left: 0px;
  margin-top: 70px;
 
}



.card-service-text {

  order:1;
  width: 60%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-weight: 300;
  color: rgb(79, 78, 78);
  margin-left:0px;
  margin-bottom: 50px;
  background-color: var(--text-color-pozadi);

  
}
.card-service-text2 {

  order:2;
  width: 60%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-weight: 300;
  color: rgb(79, 78, 78);
  margin-left:40px;
  margin-bottom: 50px;
  background-color: var(--text-color-pozadi);

  
}

.poradi1 {order:1};
.poradi2 {order:2};

.card-service-text p {
margin-bottom: 0em;


}


.okraj{margin-left: 10px;}

.card-customer {
  width: 45%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
  
  margin-bottom: 0;
  column-gap: 15px;
  
  justify-content:flex-start;
}

.card-customer-image{
  display: flex;
 
  flex: 2 1 0;
  max-width: 40px;
  object-fit:contain;
  
  border: var(--barva-hneda);
  border-width: 0.2px;
  filter: grayscale(0.4);

  

  
}
.card-customer-name{
  display: flex;
  min-width: 300px;
  font-weight: 300;
  min-height: 2.5rem;
  font-size: 1.7rem;
  
  border: var(--barva-hneda);
  border-width: 0.2px;
  margin:0;
  padding: 0;
  
 
}


.flex-item-contact{
  font-size: 1.2rem;
  
 
}




.card {
  background: var(--barva-hneda-svetla);
  border-radius: 25px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  width: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
 
  height: 300px;
  margin-bottom: 30PX;
}


/* Po najetí na .card se obrázek skryje a detail zobrazí */
.card:hover .card-image {
  display: none;
}

.card:hover .card-detail {
  display: block;
  font-size: 1.7rem;

  }

  .card-desc {
    padding: 25px;
    padding-top: 20px;
    height: 30%;
    font-size: 1.8rem;
    text-transform: uppercase;
    text-align: center;
   
  }


  .card:hover .card-desc {
    background-color: var(--barva-zelena);
    color: rgb(247, 242, 235);


  
    }

.zelena {
  
  background-color:var(--barva-zelena-svetla); ;
}

.zelena-barva{ color:var(--barva-zelena)}
.svetle-hneda{color: var(--barva-hneda-svetla)}
.pozadi-bile  {background-color: white;}

.card-image{
  display: block;
  flex: 2 1 0;
  width: 100%;
  object-fit:cover;
  height: 50%;
  border: var(--barva-hneda);
  border-width: 0.2px;
  background-color: var(--barva-hneda-svetla)
  

  /*padding-bottom: 2.33%; /* 2/3 of card height */
}

.nopading {padding-top: 0;
margin-top: 0;}

.card-service-image{

  display: block;
  margin-top: 0px;
  width:100%;
 
  object-fit:contain;
  border: var(--barva-hneda);
  border-width: 0.2px;
 
  /* TEST */
  /* background-color: brown; */
 


  

  /*padding-bottom: 2.33%; /* 2/3 of card height */
}

.bw {filter: grayscale(90%);
  -webkit-filter: grayscale(90%); /* For Safari */}

.sephia {filter: sepia(90%);
  -webkit-filter: sepia(90%); /* For Safari */}

  .sephia30 {filter: sepia(30%);
    -webkit-filter: sepia(30%); /* For Safari */}

.flip-horizontally {
 transform: scaleX(-1);
}

.hovered {
  /* pouzit v js funkcich, hover jedne tridy ovlivni jine tridy */
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%); /* For Safari */  
  background-color: var(--barva-zelena);
  color: aliceblue;
}




.card-item{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 10px;
   
}

.cards-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between;
  gap: 5px;
  padding-top: 0;
  background-color: var(--text-color-pozadi);
  font-size: 1.7rem;
  font-weight: 500;
  text-align: left;
  align-items: flex-start;
  margin-top: 40px;
  padding: 0;
  
  
}
.container-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:flex-start;
  column-gap: 80px;
  margin-right: 1px;
 
  text-align: left;
  align-items: flex-start;
}



.card-service-header {
  flex: 1 1 0;
  padding: 0px;
  
  text-align: left;
  display: flex;
  align-items:flex-start;
  justify-content:flex-start;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--barva-hneda); 
  
  
}

.card-detail {
  
  flex: 1 1 0;
  padding: 20px;
  padding-top: 20px;
  text-align: center;
  display: none;
  align-items:center;
  justify-content:center;
  font-size: 1rem;
  font-weight: 400;
  /* color: var(--barva-hneda); */
  min-height: 60%;
  background-color: rgb(246, 248, 244);
}






/** ievidence */

.container-flex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 3rem;
 
}



.container {
  margin-inline: auto;
  width: auto;
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: var(--text-color-pozadi);
  
}

.contact-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

.section {
  margin-top: 0rem;
  margin-bottom: 8rem;
  
}
.section:last-child {
  margin-bottom: 2rem;
}


.section:last-child {
  margin-bottom: 2rem;
}

            @media (min-width: 1000px) {
        /* Hide hamburger on large screens */
        #menuToggle {
          display: none;
        }

}

                      @media (max-width: 1000px) {
                        
                        .logo-wrapper {margin-top: 5px;}
                        
                        
                        .logo {
                         width: 90vw;        /* CHANGE from 60vw   max-width: 90vw;    /* ADD THIS */
            
                        height: auto;       /* ADD THIS */
                       
                        }

                        #menuToggle {
                          display: block;
                          right: 3vw;
                        top:6vw}

                
                        .card-item {flex-direction: column;
                                  
                        }
                        
                        
                        .card-service {
                            min-width: 100px;
                            width: 100%;
                            
                            align-items:flex-start;
                            justify-content:left;
                            margin-bottom: 0;
                            margin-left:0;
                            margin-top: 0;
                            order:1;
                            padding-right: 10px;
                            padding-left: 1px;
                           
                           
                          }
                        
                          .card-service-image{
                              margin-top: 3px;
                              object-fit:fill;
                              justify-items: left;
                              margin-left: 0;
                              width:100%;
                             
                  
                      }
                        

                      .card-service-text{
                              width: 100%;
                              order:2;
                            
                            }

                      .container{
                       width: 95%; /* Lepší základ pro kontejnery */
                  
                       padding-left: 15px;
                        padding-right: 15px;
                        /*background-color: var(--text-color-pozadi);*/
                        justify-items: left;
                         
                      }

            
                        
                    

                      .cards-container {
                        flex-direction: row;
                         justify-content: flex-start;
                         justify-items: flex-start;
                
                        
                        
                      }

                      .card {
                        width:40vw;
                        height:48vw;
                        margin-bottom: 20PX;
                        
                      }

                      .card-desc {
                        font-size: 2rem;
                      }

                      .card-customer {
                          display: flex;
                          flex-direction: row;
                          overflow: hidden;
                          width: 90%;
                          min-width: auto;
                          min-height: 3vw;
                          margin-bottom: 0;
                          column-gap: 4vw;
                          
                          
                          justify-content:flex-start;
}

                      .card-customer-image{
                        max-width: 40px;

                      }
                       .card-customer-name {min-width: auto;  text-align: left;
                                  }

                      
                      

                        [id] {
                          scroll-margin-top: 10px;
                        }

            

                        .desktop-menu {
                          grid-template-areas:
                            'logo lang'
                            'logo lang'
                            'links links';
                             grid-template-columns: 1fr auto;  /* ADD THIS */
                              width: 100%;  /* ADD THIS */
                             
                        }
                        .navbar {
                          display: none;
                          flex-flow: row wrap;
                          justify-self: center;
                          justify-content: space-evenly;
                          margin-top: 1rem;
                          gap: 0.75rem 1rem;
                          
                        }

                        .langbar{display: none;}
                      }


                                  @media (max-width: 500px) {
                                              
h1 {
    font-size: 15vw;
  }

h2 {font-size: 10vw;
  }
h3 {font-size:6vw}

                                              /* co se zobrazi po hamburgu */
                                              #menuMobile
                                                    {
                                                    
                                                    width: 100%;
                                                    /*margin: -100px 0 0 -50px;*/
                                                    margin: -100px 0 0 0; /* CHANGE from -200px to 0 */
                                                    padding: 1px;
                                                     padding-left: 50px; /* ADD THIS to compensate */
                                                    padding-top: 125px;
                                                    right: 0; /* ADD THIS */
                                                    left: auto; /* ADD THIS */
                                                    }        

                                                  #menuToggle {
                                                      display: block;
                                                      right: 5vw;
                                                    top:6vw}


                                              
                                              .container-contact {
                                                      display: flex;
                                                      flex-direction: column;
                                                      flex-wrap: wrap;
                                                      justify-content:flex-start;
                                                      column-gap: 1px;
                                                      margin-right: 1px;
                                                      
                                              

  
                                                      }
                                              
                                              
                                              
                                              
                                              .cards-container {
                                                display: flex;
                                                flex-wrap: wrap;
                                                justify-content:flex-start;
                                                justify-items: flex-start;
                                                
                                               
                                                padding: 5px 5px 5px 5px;
                                              }


                                                .card {
                                                  /*
                                                width: 100%;
                                                max-height:100vw;
                                                */

                                                margin-bottom: 20PX;
                                                
                                              }
                                              .card-customer {
                                                justify-items: flex-start;
                                                width: 95%;
                                                align-items: flex-start;
                                                column-gap: 3vw;
                                              
                                               
                                              }
                                              .card-customer-name {min-width: auto;  font-size: 6vw; text-align: left;
                                  }
                                              .menuToggle {top:20px;
                                                            

                                  }
                                  .logo {width: 60vw; /* ADD THIS */
                                          height: auto; /* ADD THIS */
                                          
                                        }
                                }