/* 
Theme Name: Ausserfeld Oberentfelden 9
Author: Portalworks
Version: 1.0
*/

:root {
  --primary-col: #57bbe1;
  --text-col: #656767;
  --table-col: #000;
  --rented-flat: #b9b7b7;
  --main-font: "Montserrat", sans-serif;
  --secondary-font: "Inria Sans", sans-serif;
  --third-font: "Barlow", sans-serif;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Inria Sans";
  src: url("assets/fonts/InriaSans-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inria Sans";
  src: url("assets/fonts/InriaSans-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/Barlow-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/Barlow-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/Barlow-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--main-font);
}

h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--primary-col);
}

.mt-footer-info {
  margin-top: 48px;
}

.mb-footer-info {
  margin-bottom: 36px;
}

.section-padding {
  padding: 60px 0;
}

.rectangle {
  z-index: -1;
}

.grey-rectangle {
  top: -450px;
  left: -200px;
  height: 700px;
  width: auto;
}

.grey-links-rectangle {
  top: -25%;
  right: -30%;
  height: 700px;
  width: auto;
}

.blue-rectangle {
  top: 300px;
  right: -500px;
  height: 800px;
  width: auto;
}

.blue-footer-rectangle {
  top: -45%;
  right: -30%;
  height: 800px;
  width: auto;
}

/* HEADER */
.first-nav {
  padding: 35px 0;
}

.logo-wrapper {
  max-width: 200px;
  height: auto;
}

.logo-wrapper-fixed {
  max-width: 180px;
  height: auto;
}

.logo-wrapper img,
.logo-wrapper-fixed img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-wrapper img:hover,
.logo-wrapper-fixed img:hover {
	opacity: 0.6;
}

.contact-svg {
  width: 37px;
  height: 37px;
}

.contact-text {
  text-decoration: none;
  color: var(--text-col);
  font-size: 21px;
  font-weight: 500;
  margin-left: 20px;
  transition: color 0.15s ease-in-out;
}

.hero-slogan {
  width: auto;
  height: 500px;
  top: -20px;
  pointer-events: none;
}

.black-disturber-parallax {
  position: absolute;
  height: 760px;
  left: -395px;
  top: 25px;
}

.black-part-text-left {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: end;
  text-align: start;
  padding-right: 115px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
}

.black-part-text {
  position: absolute;
  inset: 0;
  padding-right: 27px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
}

.hero-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-container {
  width: 148px;
  height: 148px;
}

.scroll-container:hover {
  opacity: 0.6;
}

.scroll-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar-fixed-padding {
  padding: 20px;
  background-color: #fff;
}

.sticky-section {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 11;
}

.navbar-nav .nav-item .nav-link,
.contact-text-nav {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--primary-col);
  font-size: 21px;
  font-weight: 500;
  text-align: center;
}

.navbar-nav .nav-link.active {
  color: var(--primary-col);
}

.footer-link .menu-item {
  list-style: none;
  text-align: center;
}

.footer-link {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-col);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-top: 20px;
}

.footer-link:hover {
  color: var(--primary-col);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("../ausserfeld/assets/images/menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 22px;
  height: 22px;
}

/* TEXT BLOCK */

.text-content {
  font-family: var(--third-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-col);
  line-height: 1.5;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hypens: auto;
  hyphens: auto;
  margin-top: 58px;
}

.text-content a {
  color: var(--primary-col);
  text-decoration: none;
}

.section-title {
  font-size: 36px;
  line-height: 1.4;
  color: var(--primary-col);
  padding-right: 40px;
}

.big-text p {
  font-size: 32px;
  line-height: 0.8;
}

.margin-text {
  margin-top: 160px;
  margin-bottom: 64px;
}

.link-wrapper img {
  height: 100px;
  max-width: 100%;
}

.link-wrapper h2 {
  margin: 32px 0;
  color: var(--primary-col);
  text-transform: uppercase;
  font-size: 34px;
  font-weight: 700;
  font-family: var(--third-font);
}

/* PARALLAX IMAGE */
.parallax-img {
  width: 100%;
  height: 74vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.blue-container {
  background-color: #57bbe1;
  height: 100px;
  width: 100%;
}

/* SWIPER */

.image-wrapper {
  height: 95vh;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  background-color: #fff6;
  margin-inline: 3px;
  opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.swiper-pagination-bullet-active {
  background-color: #fff !important;
}

.swiper-pagination {
  margin-bottom: 40px;
}

.swiper-pagination .swiper-pagination-bullet:focus-visible {
  outline: none;
}

.swiper-button-next,
.swiper-button-prev {
  background-color: var(--primary-col);
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
  width: 35px;
  height: 35px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.swiper-button-next::after {
  background-image: url("assets/images/chevron-right.png");
}

.swiper-button-prev::after {
  background-image: url("assets/images/left-chevron.png");
}

/* FOOTER */
.footer-section .section-title {
  color: var(--text-col);
  font-weight: 400;
}

.footer-section span {
  color: var(--primary-col);
}

.company-img {
  max-width: 160px;
  height: auto;
}

.location-info {
  font-size: 18px;
  color: var(--text-col);
  line-height: 1.4;
  margin-top: 64px;
  font-weight: 500;
}

.location-info a {
  color: var(--text-col);
  text-decoration: none;
}

.info-btn {
  background-color: var(--primary-col);
  width: 140px;
  height: auto;
  padding: 12px 0;
}

.info-btn img {
  height: 20px;
  width: auto;
  object-fit: contain;
}

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9999;
  background-color: var(--primary-col);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  font-size: 24px;
}

.back-to-top img {
  height: 24px;
  width: auto;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ISOMETRY */
.flat-section {
	padding: 32px 0 72px;
}
.st0 {
  transition: all 1s ease;
  fill: white;
  stroke: var(--table-col);
  stroke-width: 5px;
  stroke-linecap: "round";
}

.st0:hover {
  fill: var(--primary-col);
}

.st0.highlighted {
  fill: var(--primary-col);
}

.st0.sold {
  stroke: #a9a9a9;
}

.st0.sold.highlighted {
  fill: var(--primary-col);
  stroke: #f1f1f1;
}

.cls-3 {
  fill: rgba(0, 0, 0, 0.8);
}

.tr {
  transition: all 1s ease;
  fill: #eef0f1;
  stroke: var(--table-col);
  stroke-width: 5px;
  stroke-linecap: "round";
}

.lift {
  transform: translateY(-1000px);
  -ms-transform: translate(0, -1000px);
}

.table-row-active.disable-when-sold,
.table-row-active,
.table-row-active .text-block-2.fa-icon {
  background: var(--primary-col) !important;
  color: white !important;
  -webkit-transition: background 0.5s;
  /* Safari */
  transition: background 0.5s;
}

.table thead tr th {
  background-color: var(--table-col);
  font-weight: 500;
  font-size: 16px;
  padding: 12px 8px;
  border-right: 1px solid #fff;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.table tbody tr td {
  text-align: center;
	color: var(--text-col);
	font-family: var(--third-font);
	padding: 8px;
	line-height: 1;
	border-bottom: 1px solid var(--table-col);
	font-weight: 500;
	transition: all 0.5s ease-in-out; 
}

.table tbody tr:hover td {
	background-color: var(--primary-col);
	color: #fff;
}

.table-filters {
	margin-bottom: 58px;
}

.filter-label {
	font-family: var(--third-font);
	font-weight: 700;
	font-size: 16px;
	color: var(--text-col);
	line-height: 1.2;
	margin-bottom: 5px;
}

.filter-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-color: var(--table-col);
	border-radius: 0;
	border: 1px solid #ccc;
	color: #fff;
	font-family: var(--third-font);
	font-size: 17px;
	font-weight: 500;
	padding: 8px 12px;
	line-height: 1.2;
}

.form-select:focus {
	border: var(--primary-col);
	box-shadow: none;
}

@media (max-width: 767px) {
  footer.section-padding {
    padding-bottom: 0;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: #f2f2f2;

    /* proširi na cijeli ekran */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 20px;
    margin-top: 20px;
  }

  .navbar.menu-open {
    padding-bottom: 0;
  }
}

@media (min-width: 576px) {
  .mt-footer-info {
    margin-top: 32px;
  }

  .mb-footer-info {
    margin-bottom: 64px;
  }

  .section-title {
    font-size: 46px;
  }

  .text-content {
    margin-top: 42px;
  }

  .info-btn {
    width: 240px;
  }

  .footer-section .section-title {
    font-size: 46px;
  }
}

@media (min-width: 768px) {
  .footer-section.section-padding {
    padding: 100px 0 104px;
  }

  .logo-wrapper {
    max-width: 300px;
  }

  .section-title {
    font-size: 54px;
  }

  /* FOOTER */
  .footer-section .section-title {
    font-size: 54px;
    padding-right: 15px;
  }
	.footer-link .menu-item {
  text-align: start;
}
}

@media (min-width: 992px) {
  .footer-section.section-padding {
    padding: 180px 0 184px;
  }

  .section-padding {
    padding: 180px 0;
  }

  .section-title {
    font-size: 56px;
  }

  .first-nav {
    padding: 58px 140px 58px 0;
  }

  .navbar-fixed-padding {
    padding: 30px;
  }

  .logo-wrapper {
    max-width: 230px;
  }

  .logo-wrapper-fixed {
    max-width: 240px;
  }

  .navbar-nav .nav-item .nav-link {
    margin-left: 20px;
    color: var(--text-col);
  }

  .navbar-nav .nav-item .nav-link:hover,
  .contact-text:hover {
    color: var(--primary-col);
  }

  /* FOOTER */
  .footer-section .section-title {
    padding-right: 40px;
  }
}

@media (min-width: 1200px) {
  .first-nav {
    padding-right: 120px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1124px;
  }
  .custom-container {
    max-width: 984px;
  }
  .custom-big-container {
    max-width: 1920px;
  }

  .first-nav {
    padding-right: 0;
  }
}