body {
   font-family: 'Jost', sans-serif;
}

h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;
}

h4  {
  font-weight: 400;
}

p {
  font-weight: 400;
}

main {
  position: relative;
}
/* ================================ */
/* SECTION GENERAL STYLES */
/* ================================ */

:root {
  --grey: #292929;
  --blue: #00b0eb;
  --orange: #F7431E;;
}

/* LAYOUT */

.section-content {
  padding: 100px 0;
}


/* BUTTONS */
.cta-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  gap: 20px;
}

.cta {
  padding: 0.8rem 1.5rem;
  display: block;
  font-size: 0.9rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  min-width: 250px;
}

.cta-orange {
  background: var(--orange);
  color: #fff;
  background: linear-gradient(60deg, var(--blue) 0%, var(--orange) 100%);
 background-size: 600%; 
  background-position: 100% 0; 
  transition: 0.3s ease-in-out;
}

.cta-orange:hover {
  background-size: 100%;
}

.cta-outline {
  border: 1px solid #000;
  color: #000;
  transition: 0.3s ease-in-out;
}

.cta-outline:hover {
  background:#00b0eb79;
}

.cta-outline-white {
  border: 1px solid #fff;
  color: #fff;
  transition: 0.3s ease-in-out;
}

.cta-outline-white:hover {
  background: #ffffff45;
}

/* TEXT TELEMENTS */


.section-title h2 {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 600;
}

.section-title h2:after {
  position: absolute;
  content: '';
  display: block;
  width: 100px;
  height: 1px;
  background: #000;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 15px;
}



/* ================================ */
/* SECTION NAV*/
/* ================================ */
.navbar {
  height: 100px;
  background-color: var(--grey);
  transition: box-shadow 0.5s ease-in-out;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar.scrolled {
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.5);
  position: fixed;
}

.navbar-brand {
  height: 60px;
}

.navbar-nav {
  width: 80%;
  justify-content: end;
  gap: 30px;
}

.navbar-nav .menu-item a {
  text-transform: uppercase;
  font-weight: 600;
  transition: color 0.3s ease-in-out;
}

.navbar-nav .menu-item a:hover {
  color: #4cc9f2;
}


.navbar-nav .current_page_item a {
  color: var(--blue);
}


/* TOGGLER */
.navbar-toggler {
  background-color: #fff;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.navbar-toggler:hover {
  background-color: #4cc9f2;
}


.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  position: relative;
  background: none;
}

.line {
  display: inline;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  background: #000; 
  transition: all 0.3s ease;
}

.line1 { top: 20%; }
.line2 { top: 50%; }
.line3 { top: 80%; }

/* Active state when toggled */
.navbar-toggler.clicked .line1 {
  transform: translateX(-50%) translateY(9px) rotate(45deg);
  transform-origin: center;
}

.navbar-toggler.clicked .line2 {
  opacity: 0;
}

.navbar-toggler.clicked .line3 {
  transform: translateX(-50%) translateY(-9px) rotate(-45deg);
  transform-origin: center;
}




/* =================================================== */
/* PAGE HOME*/
/* =================================================== */
/* ================================ */
/* SECTION HERO*/
/* ================================ */

.container-hero {
  background: #292929;;
  min-height: 500px;
  padding: 200px 0 10% 20%;
}

.hero-content {
  position: relative;
  display: flex;
  justify-content: right;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  z-index: 1;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.15);
}


.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Balack box text box */

.hero-text-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: -30px;
  left: -5%;
  width: 50%;
  min-height: 60%;
  padding: min(10%, 80px);
  padding-top: 12rem;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
}

.hero-title {
  position: absolute ;
  top: -20px;
  left: -10%;
  width: 100%;
  z-index: 3;

}

.hero-title h1 {
  text-shadow: 0 5px 8px  rgba(0, 0, 0, 0.5);
}

.hero-title  span {
  margin-left: 20%;
}
/* ================================ */
/* SECTION SERVICES*/
/* ================================ */

.row-services {
  margin-top: min(10%, 200px);
}

.service-title h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 30px;
}

.service-title:after {
  content: '';
  display: block;
  width: 150px;
  height: 1px;
  background: #000;
}

.service-content {
  margin-top: 30px;
}

.service-content li {
  margin-bottom: 0.5rem;
}

.row-services .cta-wrapper {
  align-items: flex-start;
}

.service-images {
  display: flex; 
  max-height: 600px;
  padding-inline: 10%;

}
.service-image {
  max-width: 50%;
  aspect-ratio:  1/1;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.service-images img {
  object-fit: cover;
  width: 100%;
  height: 100%;

}

.first-image {
  z-index: 1;
  transform: scale(1.2);
  transition: 2s;
  transition-timing-function: cubic-bezier(0.172, 0.628, 0.131, 0.949);
}

.second-image {
  z-index: 0;
  transition: 2s;
  transition-timing-function: cubic-bezier(0.172, 0.628, 0.131, 0.949);
}
#first-image {
  transform: translateX(25%) scale(1.2);
}
#second-image {
  transform: translateX(35%);
}
#third-image {
  transform: translateX(-25%) scale(1.2);
}
#fourth-image {
  transform: translateX(-35%);
}

/* ANIMATIONS */

.animate-image-scale {
  transform: translateX(0) scale(1.2) !important;
}

.animate-image {
  transform: translateX(0) !important;
}
/* ================================ */
/* SECTION ABOUT*/
/* ================================ */

.section-dark {
  background: #292929;
  color: #fff;
  padding: 5% 0
}

.section-dark .section-title h2:after {
  background: #fff;
}

.shifted-content {
  padding: 100px 20% 0 0;
}

.dark-image-wrapper {
  position: relative;
  width: 100%;
  height: 50dvh;
  z-index: 1;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.15);
}

.dark-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Balack box text box */

.dark-text-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -10%;
  min-width: 60%;
  max-width: 90%;
  padding: min(10%, 80px);
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* ================================ */
/* SECTION GALLERY*/
/* ================================ */

.vp-portfolio__items-style-emerge.vp-portfolio__items-show-caption-always .vp-portfolio__item-caption {
  background: #00b0ebcd !important;
}

/* =================================================== */
/* PAGE SUB*/
/* =================================================== */
/* ================================ */
/* SECTION HERO*/
/* ================================ */


.container-subpage {
  background: var(--grey);
  padding: 200px 0 10% 20%;
}

.subpage-title {
  color: #fff;
}

.subpage-image-wrapper {
  position: relative;
  width: 100%;
  height: 350px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.15);
  max-height: 400px;
}

.subpage-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, rgba(255, 85, 23, 0.80) 0%, rgba(23, 150, 255, 0.80) 100%);
mix-blend-mode: overlay;
}

.subpage-text-box {
  position: absolute;
  top: 50%;
  transform: translate(-15%, -50%);
  left: -10%;
  min-width: 60%;
  max-width: 90%;
  padding: min(10%, 40px) min(10%, 80px);
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: 2s;
  transition-timing-function: cubic-bezier(0.172, 0.628, 0.131, 0.949);
}

.subpage-title  h1 {
  font-size: 4rem ;
}

.animate-subpage {
  transform: translate(0, -50%) !important;
}

/* =================================================== */
/* SECTION SERVICES*/
/* =================================================== */

/* Hedaer for theserivces */
.services-title-wrapper {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 250px
}

.services-container {
  margin-top: 8%;
}

.services-row {
  margin-top: 150px;
}

.services-title-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -50px;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px min(10%, 80px);
  color: #fff;
  text-wrap: nowrap;
}

.services-title-box  h2 {
  font-size: 2rem;
}

/* Services content */
.services-content {
  display: flex;
  flex-direction: column;
  padding-inline: 10%;
  width: 100%;
  }

.service-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

.service-more {
  position: relative;
}

.service-more:after {
  content: 'Kliknij, aby zobaczyć więcej';
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 300;
  border-radius: 5px;
  position: absolute;
  top: 60px;
  left: 0;
}
/* Addtiioal info visible after pressing an arrow */
.service-more-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  bottom: -15px;
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease-in-out;
  width: 35px; 
  height: 35px;
  z-index: 10;
}

.service-more-arrow:hover {
  transform: translateX(-50%) rotate(-15deg); /* Combine both transforms */
  cursor: pointer;
}
.services-more-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
} 

.services-more-container {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 25px;
  width: 90%;
  margin: 0 auto;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out; 
  margin-bottom: 20px;
  list-style: circle;
  margin-bottom: 0;
  font-size: 0.9rem;
  padding: 10% 10% 10% 15%;
  margin-bottom: 20px;
}

.show-more {
  height: auto;
}


/* =================================================== */
/* PAGE CONTACT*/
/* =================================================== */

#contact {
 padding: 5% 0;
 margin-top: -15%;
}

/* =================================================== */
/* SECTION FORM*/
/* =================================================== */

.contact-form {
  display: flex;
  justify-content: center;
  max-width: 400px;
  margin-top: 40px;
}

.form-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="number"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  font-size: 1rem;
  color: #fff;
  transition: background 0.2s ease-in-out;
}

.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, .contact-form input[type="number"]:focus,
.contact-form textarea:focus {
  outline: none;
  background: #ffffff10;
}

.form-acceptances {
  margin-top: 20px;
  font-size: 0.9rem;
}

.form-marketing,
.form-hidden {
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
}

.form-marketing p {
  position: relative;
}

.form-more {
  position: absolute;
  left: 15px;
  bottom: -0.4rem;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;
}

.form-more:hover {
  cursor: pointer;
  color: var(--blue);
}


.form-hidden {
  height: 0;
  padding-inline: 5%;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  margin-top: 40px;
}

.wpcf7-list-item {
  position: relative;
}

.wpcf7-list-item input {
  position: absolute;
  left: -25px;
  top: 0.4rem
}

.wpcf7-list-item label {
  cursor: pointer;
}


.submit-wrapper {
  display: flex;
  justify-content: center;
}

.asterisk {
  text-align: center;
  font-size: 0.9rem;
}

/* =================================================== */
/* SECTION MAP*/
/* =================================================== */

#map {
  padding-top: 0;
}

.map-wrapper {
  width: 100%;
  height: 500px;
  margin-top: min(5%, 50px);
}

.map-wrapper iframe {
  filter: grayscale(50%);
  box-shadow: 0 15px 50px 0 rgba(0, 0, 0, 0.5);
}

/* =================================================== */
/* SECTION FOOTER*/
/* =================================================== */

.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding: 10px;
}

footer a {
  transition: color 0.3s ease-in-out;
}

footer a:hover {
  color: var(--blue);
}




 /*PAGE MEDIA QUERIES*/
/* ========================================================= */
/* ========================================================= */
/* ========================================================= */
/* ========================================================= */

@media (max-width: 992px) {

  /* NAVBAR */
  /* EXPANDED MENU */
.navbar-collapse {
  background-color: var(--grey);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-shadow: 0 30px 40px rgba(0, 0, 0, 0.2);
} 

.navbar-nav {
  width: 100%;
  text-align: center;
  padding: 20px;
}

  /* HOME PAGE */

  .hero-content {
    height: 50dvh;
  }

  .hero-image {
    height: 100%;
  }
  .hero-text-box {
    width: 90%;
    padding-top: 10rem;
  }

  .hero-title h1 {
    font-size: 2rem;
  }

  /* SERVICES */
  .service-title, .service-content {
    padding-inline: min(10%, 200px);
  }
  .row-services {
    margin-bottom: 80px;
  }
  .row-services .cta-wrapper {
    align-items: center;
  }
  .service-images {
    margin-top: 80px;
  }
  #uslugi-spawalnicze {
    flex-direction: column-reverse;
  }
}

@media (max-width: 768px) {
  .services-content {
    grid-template-columns: repeat(1, 1fr);
  }

  .dark-image-wrapper {
    height: 100dvh;
  }

  footer h5,
  footer p,
  footer a,
  footer li {
    text-align: center;
  }

  footer .col-md-3 {
    margin-top: 30px;
  }
}

@media (max-width: 568px) {
  .container-hero {
    min-height: 500px;
    padding: 150px 5% 10% 5%;
  }

  .hero-content {
    height: calc(50dvh + 3rem);
  }

  .hero-text-box {
    width: 100%;
    left: 0;
  }
  .hero-title {
    left: 10%;
  }

  .hero-title span {
    display: block;
    margin-left: 0;;
    margin-top: 20px;
  }

  /* SECTION ABOUT */
  .shifted-content {
    padding: 100px 5% 5% 5%;
  }

  .dark-text-box {
   right: unset;
   left: 50%;
   transform: translateX(-50%);
   top: -10%;
   width: 90%;
   min-width: unset;
   max-width: unset;
   padding: 20px;
  }

  /* PAGE SUB */
  .services-title-box h2 {
    font-size: 1.5rem;
  }

  .section-title h2 {
    font-size: 2rem;
  }

  .contact-form {
    padding-inline: 5%;
  }

}