/*
Theme Name: MP Aluminium stolarka aluminiowa
Theme URI: https://mpaluminium.pl 
Description: Producent stolarki aluminiowej
Version: 1.0
Author: Anna Szymczak
Author URI: https://annaszymczak.com
Theme Name: mpaluminium
Text Domain: mpaluminium
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: stolarka aluminiowa, okna aluminiowe, drzwi aluminiowe, fasady, mp aluminium
*/
.xl-text {
  font-size: 75px;
}

.btn-outline-secondary {
  color: var(--bs-secondary);
}

.btn-outline-secondary:hover {
  color: #fff;
}


.navbar {
  transition: all 0.5s ease-in-out;
}

.navbar-sticky {
  background: #fff;
  opacity: 0.9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.details .decoration-star {
  left: -200px;
  width: 500px;
}

.details-2 .decoration-star {
  right: -200px;
  width: 500px;
}

.contact {
 background: linear-gradient(rgba(255, 254, 254, 0.6), rgba(255, 255, 255, 0.9)), url("images/header-background2.jpg") center center no-repeat;
 background-size: cover;
}

.to-top-btn {
  position: fixed;
  z-index: 20;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 5%;
  outline: none;
  background-color: #334873;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.to-top-btn:hover {
  background-color: #1d1d21;
}

.to-top-btn img {
  margin-bottom: 0.25rem;
  width: 18px;
}

.show {
  opacity: 1;
}

@media (max-width: 992px) {
  .xl-text {
    font-size: 50px;
  }
  .navbar .btn-outline-secondary {
    margin-top: 20px;
  }
  .header {
    margin-top: 0px !important;
    text-align: center;
  }
  .header .decoration-star {
    left: -100px;
    width: 250px;
  }
  .header .decoration-star-2 {
    right: -100px;
    width: 250px;
  }
  .header .image-container {
    margin-top: 30px;
  }
  .services .col-md-4 {
    border-bottom: 1px #ccc solid;
    margin: 10px 0;
  }
  .details-2 {
    margin-top: 20px !important;
  }
  .details-2 .decoration-star {
    top: 300px;
  }
  .descriptiontxt {
padding-top: 10px;
padding-bottom: 10px;
}
}
.description {
display: flex;
flex-direction: row;
justify-content:flex-end;
align-items: center;
align-content: end;
background-color:#334373;
min-height: fit-content;
}
.descriptiontxt
{
margin-right: auto;
background-color: #ffffff;
padding: 1em;
}
.rotated-div {
  transform: rotate(90deg);
  /* Dodatkowe style, np. kolor, padding */
  
  justify-content: center;
  text-align: center;
  align-content: center;
  text-transform:uppercase;
  color: #ffffff;
       }
.rotated-div a {
  text-decoration: none;
  color:#fff;
  letter-spacing: 1px;
  
}
.rotated-div a:hover {
  text-decoration: none;
  font-weight: 200;
  letter-spacing: 2px;
}

.left {
    position: relative;
    float: left;
    width: 50%;
  } 
.to-top-right {
    z-index: 1020;
  opacity: 0;
  border: none;
  outline: none;
  background-color: #334873;
  margin-top: 20px;
}
.midle {
  justify-content: end;
}
@media (max-width:320px) {
  .midle {
    justify-content: center;
    text-align: center;
  }
  .descriptiontxt{
padding: 15px;
}
.none {
  display: none;
}
}

@media (max-width:1080px) {
.none {
  display: none;
}
}
@media (max-width:768px) {
  .carousel-caption {
  position: relative;
  bottom: 0;
  left: 0;
  color: #000000;
  background: #cccccc;
  margin-bottom: 0;
  height: 20%;
  }
  .none {
  display: none;
}
}
@media (max-width:576px) {
  .carousel-caption {
  position: relative;
  bottom: 0;
  left: 0;
  color: #000000;
  background: #cccccc;
  margin-bottom: 0;
  height: 15%;
  }
.dom {
  width: 100vh;
}
  .none {
  display: none;
}
.description{
  width: 100%;
  height: auto;
}
.midle {
justify-content: center;
text-align: center;
}
}

.logo {
  position: fixed;
  top:10px;
  bottom: auto;
}

.entry-header {
  background-color: var(--bs-secondary) !important;
  display: flex;
  width: 100%;
        }
      
.entry-header-1 {
display: flex;
align-items: center;
justify-content:start;
width: 50%;
z-index: 999;
    }
.entry-header-1 h2 {
color:#fff;
text-transform: uppercase;
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
padding-left: 2rem;
    }
.entry-header-2 {
  background-color: var(--bs-secondary) !important;
	clip-path: polygon(10vw 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
  justify-content:end;
  display:flex;
  
}
@media (max-width:992px) {
  .entry-header {
  display: flex;
   flex-direction: column;
        }
  .entry-header-1 {
    width: 100%;
    padding: 1rem;
    font-size: 16px;
    padding-left: 1rem;
  }
   .entry-header-2 {
      clip-path: none;
      width: 100%;
    }

}
.submenu a {
   color: #ffffff;  
   border: solid 1px #ffffff;
   width:100%;
}

.card-tag {
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 0.75rem;
  color: #334873;
  padding: 5px 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@keyframes zoomInAnimation {
    0% {
        transform: scale(0); /* Początkowy rozmiar */
            }
    100% {
        transform: scale(1); /* Powiększony rozmiar */
    }
}
.dom {
    animation: zoomInAnimation both ;
    animation-timeline: view();
    animation-duration:2s; /* Czas trwania animacji */
    position:relative;
    z-index: 1;
       }

.okna {
animation: zoomInAnimation both;
animation-delay:3s;
animation-duration:1s;
animation-timeline: view();
animation-range: 10% 0%;
position: absolute;
top:25%;
left:55%;
height: 150px;
width: 150px;
border: solid 4px #334873;
z-index: 999;
padding-top: 50px;
justify-content: center;
text-align: center;
background: #ffffff;
opacity: 0.8;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.okna:hover {
  background: #334873;
  color: #ffffff;
  text-align: center;
  opacity: 1;
  }
.okna:hover a {
  color: #ffffff;
  }
.okna a {
 color: #ffffff;
 text-decoration: none;
 text-transform: uppercase;
}
.okna a:hover {
  color:#fff;
}

@media (max-width:1080px) {
  .okna {
height: 65px;
width: 65px;
font-size: 12px;
padding-top: 20px;
  }
}
.drzwi {
animation: zoomInAnimation both;
animation-timeline: view();
animation-delay:3s;
animation-duration:1s;
animation-range: 10% 0%;
position: absolute;
top:65%;
right:15%;
height: 150px;
width: 150px;
border: solid 4px #334873;
z-index: 9999;
padding-top: 50px;
justify-content: center;
text-align: center;
background: #ffffff;
opacity: 0.8;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.drzwi:hover {
  background: #334873;
  color: #ffffff;
  opacity: 1;
  }

.drzwi:hover a {
  color: #ffffff;
  }
.drzwi a {
 color: #ffffff;
 text-decoration: none;
 text-transform: uppercase;
}
.drzwi a:hover {
  color:#fff;
}

@media (max-width:1080px) {
  .drzwi {
height: 65px;
width: 65px;
font-size: 12px;
padding-top: 20px;
  }
}

.drzwi1 {
animation: zoomInAnimation both;
animation-timeline: view();
animation-delay:3s;
animation-duration:1s;
animation-range: 10% 0%;
position: absolute;
top:70%;
left:8%;
height: 150px;
width: 150px;
border: solid 4px #334873;
z-index: 9999;
padding-top: 50px;
justify-content: center;
text-align: center;
background: #ffffff;
opacity: 0.8;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.drzwi1:hover {
  background: #334873;
  color: #ffffff;
  
  opacity: 1;
  
}
.drzwi1:hover a {
  color: #ffffff;
  }
.drzwi1 a {
 color: #ffffff;
 text-decoration: none;
 text-transform: uppercase;
}
.drzwi1 a:hover {
  color:#fff;
}

@media (max-width:1080px) {
  .drzwi1 {
height: 65px;
width: 65px;
font-size: 12px;
padding-top: 20px;
  }
}

.fasady {
animation: zoomInAnimation both;
animation-timeline: view();
animation-delay:3s;
animation-duration:1s;
animation-range: 10% 0%;
position: absolute;
top:25%;
right:5%;
height: 150px;
width: 150px;
border: solid 4px #334873;
z-index: 9999;
padding-top: 50px;
justify-content: center;
text-align: center;
background: #ffffff;
opacity: 0.8;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.fasady:hover {
  background: #334873;
  color: #ffffff;
  opacity: 1;
 }
.fasady:hover a {
  color: #ffffff;
  }
.fasady a {
 color: #ffffff;
 text-decoration: none;
 text-transform: uppercase;
}
.fasady a:hover {
  color:#fff;
}

@media (max-width:1080px) {
  .fasady {
height: 65px;
width: 65px;
font-size: 12px;
padding-top: 20px;
  }
}

.systemy {
animation: zoomInAnimation both;
animation-timeline: view();
animation-delay:3s;
animation-range: 10% 0%;
position: absolute;
top:15%;
left:15%;
height: 150px;
width: 150px;
border: solid 4px #334873;
z-index: 9999;
padding-top: 50px;
justify-content: center;
text-align: center;
background: #ffffff;
opacity: 0.8;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.systemy:hover {
  background: #334873;
  color: #ffffff;
  opacity: 1;
  }
.systemy:hover a {
  color: #ffffff;
  }
.systemy a {
 color: #ffffff;
 text-decoration: none;
 text-transform: uppercase;
}
.systemy a:hover {
  color:#fff;
}

@media (max-width:1080px) {
  .systemy {
height: 65px;
width: 65px;
font-size: 12px;
padding-top: 20px;
  }
}

.new-row {
    display: flex; /* Użyj flexboxa do ułożenia wpisów w rzędzie */
    flex-wrap: wrap; /* Pozwala na zawijanie się wpisów do następnego rzędu */
    gap: 20px; /* Odstęp między wpisami */
    margin-bottom: 20px; /* Odstęp między rzędami */
}

.new-row article {
    flex: 0 0 calc(33.333% - 14px); /* 3 wpisy w rzędzie z uwzględnieniem odstępów */
    box-sizing: border-box; /* Uwzględnij padding i border w szerokości */
}

/* Odpowiednie dla urządzeń mobilnych */
@media (max-width: 768px) {
    .new-row article {
        flex: 0 0 calc(50% - 10px); /* 2 wpisy w rzędzie na średnich ekranach */
    }
}
.main-img { 
        max-width: 100%;
        height: auto;
    }
.card1:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.19);
  transition: box-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
  padding: 5px;
  margin: 8px;
}
.on-navbar.flex {
    justify-content: flex-end;
}
.on-navbar {
    margin: 0 -22px 0 0;
    padding:0;
}