html::-webkit-scrollbar{
  display: none;
}
html {
  scroll-behavior: smooth;
  width: 100vw;
}
body {
  font-family: Verdana, Tahoma, sans-serif, sans-serif;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*background-image: url(bgtop1.png), url(htmlss\ bg2.png), url(Untitled-.png);*/
  /*background-image: url(htmlsstop1.png), url(htmlssbottom1.png), url(htmlss\ mid.png);*/
  /* background-image: url(htmlss\ bg2_BW.png), url(htmlssbottom2.png), url(bgmisd.png); */
  background-position: top center, bottom center, center;
  /* background-size: auto; */
  /* background-repeat: no-repeat, no-repeat, no-repeat; */
  background-color: #fff8f0;

  /* background-image: linear-gradient(to top, #e9e9e9, #ffffff); */
}
footer p{
margin: auto;
}
.footerlink {
  color: #282936;
  transition: 0.5s ease;
  text-decoration: none;
  font-weight: bold;
  margin-inline: 10px;
}
.footerlink:hover {
  color: #800000;
  transition: 0.5s ease;
}
/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
header {
  background-color: #ffd89e;
  box-shadow: 0.3em 0.3em 0.7em #00000050;
  margin-bottom: 20px;
}
/* Style the links inside the navigation bar */
.topnav a {
  display: block;
  color: #4A403A;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.2rem;
  transition: 1s ease;
  border-radius: 15px;
  font-weight: bold;
}
/* .sticky {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #ffd89e;
  box-shadow: 0.3em 0.3em 0.7em #00000050;
}
.sticky + .content {
  padding-top: 60px;
} */


/* Add an active class to highlight the current page */
.activepg {
  background-color: #FFC069;

}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icona {
  display: none;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover {
  background-color: #FFC069;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav a{
    display: none;
  }
header {
  margin-bottom: 6px;
}

  .topnav a.icona {
    float: right;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    
  
  }
  .topnav.responsive a.icona {
    position: absolute;
    right: 0;
    top: 0;
  }


  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }

  body .contact-blocks {
    margin: 0;
  }

  h1,
  h2 {
    text-align: center;
  }

  form {
    width: 100%;
    text-align: center;
  }

  .topnav.responsive {
    display: block;
    background-color: #ffd89e;
  }


  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .logo img {
    height: 90%;
    width: 90%;
    max-height: 100px;
    object-fit: contain;

  }
  .RecaptchaContainer,
  .FileContainer {
    justify-content: center;
    text-align: center;

  }
  .cardgroup .card {
    width: 100vw;
    margin-inline: 0;
  }
  .cardv form {
    width: 100%;
  }
  .cardgroup {
    padding-inline: 0;
    
  }
  /* .cardgroup .card {
    width: 100vw;
    margin-inline: 0;
  } */

  .sendbtnarea {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .learn-more {
    display: flex;
    margin: auto;
    margin-bottom: 10px;
  }

  form input,
  textarea {
    text-align: center;
  }
  .g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;

  }
  #scroll-up-btn {
    width: 30px;
    height: 35px;
  }
}

main h1 {
  text-align: center;
}

main section {
  margin-bottom: 30px;
}

main section h2 {
  margin-bottom: 10px;

}

main section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.intro {
  color: #636363;

  margin-top: 20px;
  background-color: white;
  border-radius: 0.4em;
  box-shadow: #b8b8b8 1px 1px 20px 1px;
  padding: 3%;
  transition: 0.5s ease;
  border: solid 1px #d1d1d1;
}

.intro:hover {
  border: solid 1px #444444;
}


footer {
  background-color: #ffc163;
  bottom: 0;
  text-align: center;
  margin-top: auto;
  padding-block: 20px;
  font-size: 1rem;
  font-family: inherit;

}

footer span {
  display: inline-flex;
  padding: 5px;
}

.logo {
  padding-top: 20px;
  text-align: center;
  mix-blend-mode: multiply;
}


.logo img {
  height: 100px;

}










/* Changes width of elements on smaller screens */
@media screen and (max-width: 800px) {




}

.cardgroup {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  margin: auto;
  max-width: 1200px;

  height: auto;

  position: relative;

  transition: 0.5s ease-out;

}

.cardgroup .card {
  
  margin-inline: 5px;
  flex-grow: 1;
  width: 200px;
  height: auto;
  margin-top: 0;
}

.divider {
  height: 2px;
  background: linear-gradient(90deg, #800000, #ffd493);
  margin-top: 40px;
}
.indexbody {
  max-width: 1200px;
  margin: auto;
}
.card {
  max-width: 1200px;
  height: auto;
  background: rgb(255, 255, 255);
  border-radius: 0.4em;
  box-shadow: 0.3em 0.3em 0.7em #00000015;
  transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: rgb(250, 250, 250) 0.2em solid;

  padding: 1.8rem;
  padding-inline: 5%;
  position: relative;

  transition: 0.5s ease-out;
  overflow: visible;
  display: block;
  margin: 20px auto;


}

.card-details h2 {
  color: #444444;
  font-size: 1.3rem;
}

.card-button {
  transform: translate(-50%, 125%);
  width: 30%;
  min-width: 200px;
  border-radius: 1rem;
  border: none;
  background-color: #FFC069;
  color: #4A403A;
  font-size: 1rem;
  padding: .5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.3s ease-out;
}

.text-body,
li {
  color: rgb(134, 134, 134);
}
.text-body a, li a{
  text-decoration:underline ;
  color: #282936;
  transition: 0.5s;
}
.text-body a:hover, li a:hover{
color: #cf9d52;
transition: 0.5s;
}
/*Text*/
.text-title {
  font-size: 1.5em;
  font-weight: bold;
}

/*Hover*/
.card:hover {
  border-color: #ffd493;
  background-color: #ffffff;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
}

/*tehtud tööd*/
.card-details h2 {
  border-top: #ffd493 solid 2px;
  font-weight: bold;
  margin-top: 50px;
  padding-top: 10px;
}

















/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
  box-shadow: 0.3em 0.3em 0.7em #00000015;
}

/* Hide the images by default */
.mySlides {
  display: none;
}


/* Caption text */
.text {
  color: #636363;
  font-size: 1rem;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #444444;
  font-size: 0.8rem;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 1s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

/* Fading animation
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1
  }
} */

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}

th,
td {
  padding: 8px;
  border: 1px solid #dddddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}



/*Hinnakiri*/
.pricelist-section {
  margin: 50px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
}



/*kontaktivorm*/
form {
  width: 900px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
}

input[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.lisainfo {
  width: 100%;
  height: 100%;
}

.lisainfoosad {
  margin-block: 3%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 2px;
}

.Lisainfo-Sec {
  display: block;
  text-align: center;

}

.Lisainfo-Sec img {
  display: block;

  margin: auto;
  height: 60px;
}

.Lisainfo-Sec a {
  display: block;
}

.sectiongradient {
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);
  padding: 20px;
}







/*Tehtud tööde grid*/

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 5px;

}

.grid-item {
  position: relative;

}

.grid-image {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: 0.5s ease-out;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.grid-image:hover {
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.40);
}

.expanded-image {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
  backdrop-filter: blur(5px);
}

.expanded-image-content {
  max-width: 80%;
  max-height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 100%;
  box-shadow: 0px 0px 23px 1px #000000b0;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}

.image-counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 1.2rem;
}


/*Contact page blocks*/
.contact-blocks {
  justify-content: center;
  overflow: hidden;
  flex-wrap: wrap;
  display: flex;
  max-width: 1200px;
  margin: auto;
  color: #444444;
  height: auto;
  position: relative;
  transition: 0.5s ease-out;
}

.cardv {

  background: rgb(255, 255, 255);
  border-radius: 0.4em;
  box-shadow: 0.3em 0.3em 0.7em #00000015;
  transition: border 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: rgb(250, 250, 250) 0.2em solid;

  overflow: hidden;
  color: black;
  opacity: 90%;
  margin: 5px;
  flex-grow: 1;
  height: auto;
  margin-top: 0;
}

.contact-blocks .cardv {
  padding: 10px;
}

.contact-info {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: black;
  height: 100%;
}

.cardv img {
  width: 200px;
}

.cardv a {
  display: block;
  text-decoration: none;
  color: black;
}



.cardv:hover {
  border: #ffd493 0.2em solid;
}

.item {
  display: flex;
  align-items: center;
  margin: 10px 20px;
}

.card button {
  cursor: pointer;
}

.icon {
  margin-right: 10px;
  font-size: 24px;
  max-height: 30px;
  max-width: 35px;
}

form .formmsg {
  display: none;
  color: #444444;
  transition: .5s ease;
  text-align: center;
  line-height: 50px;
  margin-left: 10px;
}

.sendbtnarea {
  display: flex;
  flex-wrap: wrap;
}

.item a:hover {
  color: #cf9d52;
  transition: 0.5s ease;
}

.info {
  text-align: center;
}

.googlemaps {
  display: flex;
  margin: auto;
  justify-content: center;
}

/*sets the styling for contact page top elements */
.top {
  min-height: 420px;
}

/*Set styling for contact form */
label {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 0;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 1rem;
  color: #333;
  border: 2px solid #333;
  background-color: #ffffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

textarea {
  height: 150px;
}

input:hover,
textarea:hover {

  transition: 0.5s ease;
}

form button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;

}

form button.learn-more {
  width: 12rem;
  height: auto;
  margin-bottom: 10px;
}

form button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}

form button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}

form button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

form button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.29rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

form button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

form button:hover .circle {
  width: 100%;
}

form button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}

form button:hover .button-text {
  color: #fff;
}

form button.learn-more:hover .circle {
  background: #58d15c;
}

form input {
  border-style: none;
  padding: 0px;
  margin-top: 5px;
}

.g-recaptcha {
  width: 303px; 
}


::file-selector-button {
  color: #333;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.5s ease;
  border-radius: 5px;
}

::file-selector-button:hover {
  background-color: #b8b8b8;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  padding-top: 60px;
  backdrop-filter: blur(5px);
}


/* The Close Button */
.close {
  position: absolute;
  top: 0;
  right: 10px;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: rgb(85, 85, 85);
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.cardmodal {
  background: rgb(255, 255, 255);
  border-radius: 0.4em;
  box-shadow: 0.3em 0.3em 0.7em rgb(71, 71, 71);
  transition: border 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: rgb(250, 250, 250) 0.2em solid;
  display: flex;
  margin: auto;
  overflow: hidden;
  max-width: 600px;
  position: relative;

}

.cardmodal:hover {
  border: #ffd493 0.2em solid;
}

#scroll-up-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 101;
  opacity: 0;
  transition: opacity 1s ease;
  background-color: #717171;
  color: #fff;
  cursor: pointer;
  opacity: 50%;

  border-radius: 20%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 3;
  border: #004dff;
}
#scroll-up-btn.show {
  opacity: 1;
}
#scroll-up-btn:hover {
  transform: scale(1.1);
}

#scroll-up-btn:active {
  background-color: #FFC069;
}