@import "./homepage_style.css";
/* WorldClass */
.border {
  border: 3px solid var(--sveBlue);
}
.shadow {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.hover:hover {
  transition: all 0.8s ease ease-in-out;
  transform: scale(1.05);
  box-shadow: 8px 8px 12px 0 rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
a {
  text-decoration: none;
  color: inherit;
}
h1 {
  color: white;
  word-wrap: nowrap;
  font-size: 32px;
}
h2 {
  color: white;
  word-wrap: nowrap;
}
h5 {
  color: var(--sveBlue);
}
.bodyWrapper {
  position: relative;
  overflow-x: hidden;
}
.sve_h3 {
  color: var(--sveBlue);
  font-size: 21px;
}
/* InfoKontainer */
.kontaktContainer {
  height: auto;
  width: 270px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.textContainer {
  text-align: center;
  margin: 10px;
  color: white;
}

.kontaktInfoContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 10px;
  margin-top: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
.kontaktInfoContainer h5 {
  padding-bottom: 12px;
  padding-left: 10px;
}

.info {
  display: grid;
  grid-template-columns: 20px 60px 164px;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: white;
}
.personInfo {
  font-size: 12px;
  color: white;
  align-items: center;
  padding-left: 28px;
}
.info_italic {
  font-style: italic;
  color: white;
}
.fas {
  font-size: 16px;
  padding: 4px;
  color: black;
}
/* InfoKontainer END */
/* Usluge Container */
.uslugeContainer {
  width: 300px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.imgCover {
  width: 100%;
  height: 200px;
  background-size: cover;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Usluge Container END */
/* Show more */
#more_1 {
  display: none;
}
#more_2 {
  display: none;
}
#more_3 {
  display: none;
}
#more_4 {
  display: none;
}
/* MAP */

/*Footer*/
.footerWrapper {
  background-color: rgba(0, 160, 227, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footerContainer {
  height: 200px;
  width: 750px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footerContentWrapper {
  height: 140px;
  width: 260px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.infoWrapper {
  width: 250px;
  display: flex;
  padding: 10px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--trans-black);
}
.info_footer {
  display: flex;
  width: 60%;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  font-size: 12px;
  color: white;
}
.buttonWhite {
  background-color: transparent;
  color: white;
  border-color: white;
  border-radius: 8px;
  padding: 5px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 21px;
}
.buttonWhite:hover {
  box-shadow: 8px 8px 20px 8px rgba(0, 0, 0, 0.2);
}
.buttonblack {
  padding: 7px 9px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}
.buttonblack:hover {
  transform: scale(1.1);
  box-shadow: 8px 8px 20px 8px rgba(0, 0, 0, 0.2);
}

/*FooterEND*/
/* PICTURE AND TEXT */
.pictureTextContainer {
  width: 400px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: justify;
  color: white;
}
.pictureTextImage {
  height: auto;
  width: 100%;
  background-image: url(../images/autoOnDizalica.jpg);
  background-size: cover;
}
.images {
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
  height: auto;
}
.images_partneri {
  padding: 12px;
  padding-top: 0px;
  width: 100%;
  height: auto;
}

.FlexContainerColumn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.toggleContainer {
  display: none;
}

@media screen and (max-width: 1024px) {
  .gmap_canvas {
    display: flex;
    align-items: center;
  }
  .mapIframe {
    width: 80vw;
    height: calc(80vw * 0.66);
  }
  .iframe {
    width: 80vw;
    height: calc(80vw * 0.66);
  }
}
@media screen and (max-width: 768px) {
  .heroContainerAboutUs {
    align-items: center;
  }
  .pictureTextContainer {
    width: 80%;
    height: auto;
    position: relative;
  }

  .pictureTextImage {
    height: auto;
    width: 100%;
  }
  .uslugeContainer {
    width: 250px;
  }
  .footerContainer {
    height: auto;
    flex-direction: column;
    padding: 20px 2px;
    justify-content: space-between;
  }
}