* {

  margin: 0;

  padding: 0;

  border: 0;

  box-sizing: border-box;

  font-family: Inter;

}



.container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 48px;

}



.banka {

  text-decoration: none;

  color: white;

}

.banka a{

  text-decoration: none;

  color: white;

}





/********/

/*header*/

/********/ 



.header-line {

  display: flex;

  justify-content: space-between;

  padding: 8px 48px;

  align-items: center;

  background-color:black;

  color: white;

  height: 64px;

  font-size: 16px;

}



.header-line .contacts .email,

.header-line .contacts .phone {

  padding-left: 15px;

  margin-left: 15px;

}



.contacts {

  display: flex;

  align-items: center; 

}



.contacts a {

  color: white;

  border-left: 1px solid white;

  text-decoration: none;

}





/********/

/*header-navigation*/

/********/ 



/*sluzby rozklik*/



.dropdown li {

  width: 100%;

  background-color: white;

  font-size: 18px;

}



.dropdown li a {

  text-decoration: none;

  color: #00923F;

  text-transform: uppercase;

  width: 100%;

  display: block;

}

.dropdown li a:hover {

  color: black;

}



ul li ul.dropdown li {

  display: block;

  padding: 5px 0;

  width: 100%;

}



ul li ul.dropdown-menu {

  width: 210px;

  background: white;

  position: absolute;

  z-index: 999;

  display: none;

  padding-left: 10px;

  padding-top: 5px;

  padding-bottom: 10px;

  box-shadow: 3px 3px 3px 2px rgba(31, 31, 31, 0.37);

  border-top: 2px solid #00923F;

  transform: translateX(-10px);

  

  

}



ul li:hover ul.dropdown-menu {

  display: block;

}



/*hlavicka*/



.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: white;

  height: 130px;

  padding: 0 48px;

  position: relative;

}



.custom-header a {

  text-decoration: none;

}



.nav.main-nav {

  text-align: center;

}



.main-nav-list  {

  list-style: none;

  display: flex;

  align-items: center;

  gap: 2rem;

  margin-bottom: 0px;

}



/* .xxxnav {

  list-style: none;

  display: flex;

  gap: 10px;

} */



.main-nav-link:link,

.main-nav-link:visited {

  display: inline-block;

  text-decoration: none;

  color: #00923F;

  font-weight: 500;

  font-size: 20px;

  transition: all 0.3s;

}



.main-nav-link:hover,

.main-nav-link:active {

  color: black;

}



.img-mobile {

  display: none;

}







/*mobile*/



.btn-mobile-nav {

  border: none;

  background: none;

  cursor: pointer;

  display: none;

}



.icon-mobile-nav {

  height: 3.2rem;

  width: 3.2rem;

  color: #00923F;

}



.icon-mobile-nav[name="close-outline"] {

  display: none;

}



/********/

/*hero*/

/********/ 



.hero {

    background-image:

    linear-gradient(rgba(0, 146, 63, 1), rgba(0, 146, 63, 0.5)),

    url('image/MarsikElektro-Domy1.jpg');

    background-position: center; 

    background-size: cover;

    background-repeat: no-repeat;

    height: 70vh;

    width: 100%;

    text-align: center;

}   





.hero-obsah {

  padding-top: 18vh;

  opacity: 0;

    transform: translateY(20px);

    transition: opacity 1s ease, transform 1s ease;

}



.hero-obsah.visible {

    opacity: 1;

    transform: translateY(0);

}





.hero h1 {

    font-size: 45px;

    font-weight: 500;

    color: #ffffff;

    line-height: 65px; 

    text-transform: uppercase;



  

}



.hero p {

    font-size: 20px;

    letter-spacing: 2px;

    padding-top: 20px;

    color: #ffffff;

    font-weight: 500;

}





.hero-button {

    display: inline-block;

    border-radius: 32px;

    background-color: black;

    color: white;

    font-size: 18px;

    padding: 16px 48px;

    text-decoration: none;

    margin-top: 31px;

    font-weight: 500;

  }



  .hero-button:hover {

    background-color: white;

    color: black;

  }





  .dropdown-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

}



.dropdown-arrow {

  background: none;

  border: none;

  cursor: pointer;

  font-size: 22px;

  color: #00923F;

  margin-left: 10px;

}





/********/

/*sluzby*/

/********/ 





.titulka {

  padding-top: 50px;

}



.titulka h1 {

  font-size: 35px;

  font-weight: 400;

  text-transform: uppercase;

  font-style: italic;

}



.liner {

  height: 4px;

  background-color: #00923F;

  width: 100%;

}





.card {

    display: grid;

    gap: 20px;

    grid-template-columns: repeat(4, 1fr); 

    margin-bottom: 100px;

    margin-top: 75px;

}



.cards {

  box-sizing: border-box;

  position: relative;

  box-shadow: 0px 0px 14px 1px rgba(31, 31, 31, 0.37);

  border-radius: 20px;

}





.cards-img {

  position: relative;

  width: 100%;

}



.cards-obsah:hover {

  color: white;

  background-color: #00923F;

   border-bottom-left-radius: 20px;

  border-bottom-right-radius: 20px;

}





.cards-img img {

  display: block;

}



.cards img {

  width: 100%;

  height: auto;

  max-width: 100%;

}



.img-default,

.img-hover {

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

}



.img-hover {

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    transition: opacity 0s ease; }



.cards-img a:hover .img-hover {

  opacity: 1;

}



.cards-obsah {

  padding: 10px;

  min-height: 250px;

  display: grid;

  grid-template-rows: 1.5fr 4fr 1fr;

}



.cards-obsah h2 {

  font-size: 22px;

  text-transform: uppercase;

  text-align: center;

  font-weight: 400;

  display: flex;

  justify-content: center;

  align-items: center;

 

}



.cards-obsah p {

  font-size: 18px;

  padding: 5px 5px;

  



}



.cards-obsah a {

  font-size: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

}









.cards-btn {

  cursor: pointer;

  text-align: center;

  text-decoration: none;

  background-color: black;

  color: white;

  padding: 10px;

  border-radius: 10px;

  min-height: 40px;

}



.cards-btn:hover {

  background-color: white;

  color: black;

  

}





/********/

/*text_o_firme*/

/********/







.blok {

  height: 64px;

  background-color: #00923F;

}



.partners {

  text-align: left;

  margin-bottom: 50px;

  font-size: 38px;

  color: #00923F;

}



.text p {

  margin-bottom: 75px;

  margin-top: 75px;

  font-size: 18px;

}



.logotext {

  text-align: center;

}



.logofirma {

  text-align: center;

  margin-bottom: 100px;

  width: 100%;

}





/********/

/*sluzby*/

/********/



.sluzby-menu {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  margin-bottom: 40px;

  margin-top: 20px;

  text-align: center;

  

}

.sluzby-menu a{

  text-decoration: none;

  color: black;

  font-size: 18px;

  /* border-left: 2px solid #00923F;

  border-right: 2px solid #00923F; */

  font-weight: 500;

  text-align: left;

}





.revize-list {

  padding-left: 20px;

}







.sluzby-galerka h3 {

  font-size: 25px;

  font-weight: 500;

  text-transform: uppercase;

  font-style: italic;

  margin-bottom: 5px;

  border-bottom: 4px solid #00923F;

}

.sluzby-galerka p {

  font-size: 18px;

  margin-bottom: 10px;

}



.hover-underline {

  font-size: 2rem;

  color: #ffffff;

  position: relative;

  display: inline-block;

}







.hover-underline::after {

  content: '';

  position: absolute;

   width: 99%;

  height: 2px;

  background: linear-gradient(to right, #00923F);

  bottom: -5px;

  left: 0;

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.4s ease-out;

}







.hover-underline:hover::after,

.hover-underline:hover::before {

  transform: scaleX(1);

}



#revize {

  margin-bottom: 100px;

}







.gallery {

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 30px;

  margin-top: 10px;

  margin-bottom: 100px;

}



.thumbnail {

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  cursor: pointer;

  transition: transform 0.2s;

}



.thumbnail:hover {

  transform: scale(1.05);

}



.overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

  color: white;

  z-index: 1000;

}



.overlay-img {

  max-width: 90%;

  max-height: 70%;

  margin-top: 20px;

}



.description {

  margin-top: 20px;

  font-size: 18px;

}



.close {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 40px;

  color: white;

  cursor: pointer;

}



.prev, .next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.5);

  color: white;

  border: none;

  padding: 10px;

  cursor: pointer;

  font-size: 20px;

}



.prev {

  left: 10px;

}



.next {

  right: 10px;

}



/********/

/*kontakt*/

/********/



.row {

  display: grid;

  grid-template-columns: 1fr 1fr 2fr;

  margin-bottom: 75px;

  margin-top: 75px;

  font-size: 18px;

}



.row p {

  margin-bottom: 16px;

}



.row a {

  text-decoration: none;

  color: black;

}





/********/

/*firmy*/

/********/







.firmos {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 50px;

  margin-bottom: 75px;

  margin-top: 75px;

  

}



.firmos img {

  width: 80%;

  height: auto;

  object-fit: contain;

  margin: 0 auto;

}



/********/

/*footer*/

/********/ 



.footer {

    background-color: black;

    color: white;

    padding-top: 32px;

    padding-bottom: 8px;

}



.footer h6 {

    font-size: 18px;

    margin-top: 8px;

}



.footer p {

    font-size: 16px;



}



.footer-first p {

    padding-top: 8px;

}



.footer-slouper {

    display: grid;

    gap: 16px;

}



.footer-sluzby {

    text-decoration: none;

    color: white;

}



.footer-contact p {

    padding-top: 16px;

}



.contact {

    padding-left: 8px;

    text-decoration: none;

    color: white;

}



.footer-obsah {

    display: grid;

    gap: 5px;

    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;

}



.line {

  width: 100%;

  height: 1px;

  background-color: white;

  margin-top: 32px;

  opacity: 0.5;

}



.footer-popis {

    display: flex;

    justify-content: space-between;

    text-align: center;

    align-items: baseline;

    padding-top: 6px;

    font-size: 12px;

}



.footer-popis p {

    font-size: 12px;

   

}



.footer-popis a {

    text-decoration: none;

    color: white;

    font-size: 12px;

  

    

}





.soukromebudovy,

.komercnibudovy,

.fve,

.revize {

  padding-top: 10px;

}







@media screen and (max-width: 999px) {

  .img-responsive {

    display: none;

  }



  .img-mobile {

    margin: 0 auto;

    display: block;

  }



  .no-scroll {

    overflow: hidden;

  }



  .header-line {

    display: none;

  }



  .header {

    height: 6.4rem;

    padding: 0 12px;

    }



  .btn-mobile-nav {

    display: block;

    z-index: 9999;

  }



  .main-nav {

    background-color: rgba(255, 255, 2555, 1);

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 100vh;

    transform: translateX(0%);

    z-index: 999;

    margin-top: 102px;

    display: flex;

    justify-content: center;

    transition: all 0.2s ease-in;

    text-align: center;

    font:  sans-serif;

    opacity: 0;

    pointer-events: none;

    visibility: hidden;

    background-color: white;

    border-top: #00923F 64px solid;

    

}



.main-nav-list li {

  text-align: left;



}







.nav-open .main-nav{

    opacity: 1;

    pointer-events: auto;

    visibility: visible;

    transform: translateZ(0);

}



.nav-open .icon-mobile-nav[name="close-outline"] {

    display: block;

}



.nav-open .icon-mobile-nav[name="menu-outline"] {

    display: none;

}



.main-nav-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding-top: 16px;

    width: 100%;

    padding-left: 24px;

    padding-right: 24px;

    align-items: flex-start;

}



.main-nav-link {

  display: block;

  width: 100%;

  padding: 1rem 0;

}



.main-nav-list li {

  width: 100%;

 

}



ul li ul.dropdown li {

padding: 0px 0px;  }





.main-nav-link:link,

.main-nav-link:visited {

    font-size: 22px;

    color: #00923F;

    font-style: italic;

    font-weight: 400;

} 



.main-nav-link:hover {

  color: black;

}



.img-mobile {

  z-index: 2;

}



.kokot {

  text-align: left;

  width: 100%;

}







  .dropdown-arrow {

    background: none;

    border: none;

    cursor: pointer;

    font-size: 20px;

    color: #00923F;

    padding-left: 50px;

    padding-top: 16px;

    padding-bottom: 16px;

  }  



.dropdown-menu li {

  width: 100%;

  background: none;

  font-size: 18px;

  padding-top: 20px;

  

  

}



.dropdown-menu li a {

  text-decoration: none;

  color: #00923F;

  font-size: 18px;

  text-transform: uppercase;

  padding: 10px 0;

  

}





.ul li ul.dropdown li {

  padding: 20px 0;

}







ul li ul.dropdown-menu {

 display: none;

  justify-content: center;

  text-align: center;

  width: 100%;

  position: relative;

  background: none;

  box-shadow: none;

  border: none;

  padding: 0px; /* Odsazení pro dropdown menu */

}



ul li ul.dropdown-menu.open {

  display: block;

}



ul li:hover ul.dropdown-menu {

  display: none;

}



.dropdown-arrow i {

  transition: transform 0.3s ease;

  

}



.dropdown-arrow.rotate i {

  transform: rotate(180deg);

}



  ul li ul.dropdown-menu {

    display: none !important;

  }



  ul li ul.dropdown-menu.open {

    display: block !important;

    padding-left: 15px;

  }



  .dropdown-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

}





.cards-obsah p,

.text p,

.sluzby-galerka p,

.row,

.cards-obsah a  {

  font-size: 16px; 

}









.footer h6 {

    font-size: 16px; 

}



.footer p {

    font-size: 14px;

}



.footer-popis p {

    font-size: 12px;

   

}



.hero-obsah {

    padding-top: 12vh;

}



.sluzby-menu {

  grid-template-columns: none;

  gap: 10px;

}   



.gallery {

  grid-template-columns: repeat(3,1fr);

  gap: 16px;

}





.close {

  position: absolute;

  top: 90%;

  right: 48%;

  font-size: 40px;

  color: white;

  cursor: pointer;

}



.dropdown-arrow i {

  font-size: 30px;

}



.cards-obsah {

  

  grid-template-rows: 1.5fr 5.5fr 1fr;

}





}











@media (max-width: 768px) {

  .footer-obsah {

    grid-template-columns: repeat(2,1fr);

    gap: 24px;

    text-align: center;

  }



  .footer-popis {

    flex-direction: column;

    gap: 8px;

    align-items: center;

  }



  .card {

    grid-template-columns: repeat(2, 1fr); 

  }



  .hero-obsah {

    padding-top: 18vh;

}



  .hero h1 {

    font-size: 35px; 

    line-height: 35px;

   }



   .hero p {

    font-size: 18px;

   }

   

   .row {

     grid-template-columns: repeat(2, 1fr);

    

   }



   .row :nth-child(3) {

    grid-column: 1 / -1; /* třetí položka přes celý řádek */

}



.cards-obsah {

  

  grid-template-rows: 1.5fr 3.5fr 1fr;

}



}





@media (max-width: 575px) {

.container {

    padding: 0 16px;

}



  .hero-obsah {

    padding-top: 6vh;

}



.hero p {

  padding-top: 5vh;

}



.hero-button {

  margin-top: 4vh;

}



.card {

      grid-template-columns: repeat(1, 1fr);

      gap:30px

}



.footer-obsah {

    grid-template-columns: repeat(1,1fr);

    gap: 24px;

    text-align: center;

}



.row {

     grid-template-columns: repeat(1, 1fr);    

}



.gallery {

  grid-template-columns: repeat(2,1fr);

}



.cards-obsah {

  

  grid-template-rows: 1.5fr 2.5fr 1fr;

}



}



@media (max-width: 575px) and (min-height: 700px) {

    .hero-obsah {

    padding-top: 12vh;

}

}



@media (max-width: 575px) and (max-height: 600px) {

    .hero-obsah {

    padding-top: 4vh;

}



 .hero h1 {

    font-size: 30px; 

    line-height: 30px;

   }



   .hero p {

    font-size: 16px;

   }



  .hero-button {

    padding: 8px 16px;

  } 



  .main-nav-list {

    gap: 1px;

  }

}