/* --- o nas ---*/
#about_us{
    display: flex;
	flex-direction: column;
	gap: 0;
	align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
	text-indent: 2rem;
}
#about_us article p{
	text-align: justify;
	padding: 2rem;
	padding-right: 5vw;
	padding-left: 5vw;
	line-height: 1.5;
	text-wrap: balance;
}
#about_us img{
	margin: 2rem;
	min-width: 33.3vw;
	max-width: 90%;
	pointer-events: auto;
}
@media only screen and (max-width: 644px) {
	#about_us article p{
		font-size: 0.8rem;
	}
}
/* --- /o nas ---*/
/* --- o nas i kwalifikacje - galeria ---*/
.smallgallery{
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
	gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.smallgallery img{
    /* 226x320 lub 320x226 */
    max-height: 226px;
    max-width: 226px;
    pointer-events: auto;
    border: solid 2px black;
}
.smallgallery img:hover{
    border: solid 2px var(--primary-color);
}
/* --- /o nas i kwalifikacje - galeria ---*/
/* --- kwalifikacje ---*/
#qualifications{
    margin-top: 4rem;
    margin-bottom: 4rem;
}
#qualifications_title_img{
    background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/qualifications.jpg");
}
/* --- /kwalifikacje ---*/
/* --- modal - podgląd dyplomów i certyfikatów ---*/
.img_view_modal_background{
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
    pointer-events: auto;
    flex-direction: row;
    gap: 0;
    align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
    display: flex;
}
.img_view_modal{
    z-index: 11;
    max-width: 95vw;
    max-height: 95vh;
}
/* --- /modal - podgląd dyplomów i certyfikatów ---*/
/* --- oferty --- */
.offer_title_container {
    width: 100%;
    height: 55vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.offer_title_container .offer_title_text{
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 6.5rem;
    max-width: 1024px;
}
#offer_title_1{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/mechanika.jpg");}
#offer_title_2{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/wulkanizacja.jpg");}
#offer_title_3{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/elektryka.jpg");}
#offer_title_4{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/klimatyzacja.jpeg");}
#offer_title_5{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/podwozie.jpg");}
#offer_title_6{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/hak.jpg");}
#offer_title_7{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/olej.jpg");}
#offer_title_8{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/adas.jpg");}
#offer_title_9{ background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 80%, rgba(255, 255, 255, 1) 100%),url("../resources/images/wtryskiwacze.jpg");}

.offer_details_container{
    margin-top: 5rem;
    margin-bottom: 5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    font-size: 1rem;
    line-height: 1.5;
    display: grid;
    gap: 3rem;
    grid-template-rows: auto;
    grid-template-columns: 3fr 1fr;
}
.offer_details_container .offer_details h1{
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.offer_details_container .offer_details h2{
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.5rem;
    text-transform: uppercase;
}
.offer_details_container .offer_details h3{
    font-weight: bold;
    font-size: 1.2rem;
}
.offer_details_container .offer_details article{
    text-align: justify;
    word-break: break-word;
}
#mechanics_offer_listing{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
#electricians_offer_listing{
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;
    column-gap: 5rem;
    text-align: left;
}
.offer_details_container .offer_details_side_contact_info{
    background-color: var(--secondary-color);
    border: solid 1px var(--primary-color);
    border-radius: 5px;
    padding: 2rem;
    height: fit-content;
    pointer-events: auto;
    user-select: text;
}
.offer_details_container .offer_details_side_contact_info aside h2{
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}
.offer_details_container .offer_details_side_contact_info aside h3{
    font-weight: bold;
    font-size: 1rem;
}
.offer_details_lower_info{
    max-width: 1024px;
    background-color: var(--primary-color);
    border: solid 1px var(--primary-color);
    border-radius: 5px;
    padding: 1.5rem;
    display: grid;
    gap: 1.5rem;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    margin-top: 2rem;
    font-size: 1rem;
    filter: drop-shadow(0px 2px 5px var(--primary-color));
}
.offer_details_lower_info div section{
    color: white;
    text-align: center;
}
.offer_details_lower_info div section img{
    height: 3rem;
    width: 3rem;
    filter: invert(1);
    margin-bottom: 1rem;
}
.offer_details_lower_info div section h2{
    font-weight: bold;
    font-size: 1rem;
}
.offer_details_lower_info div section article{
    word-break: break-word;
}
@media only screen and (max-width: 1169px) {
    .offer_title_container .offer_title_text, .offer_details_container, .offer_details_lower_info{
        margin-left: 2rem;
        margin-right: 2rem;
        max-width: none;
    }
}
@media only screen and (max-width: 879px) {
    .offer_details_container{
        font-size: 0.8rem;
        display: flex;
        gap: 1.5rem;
        flex-direction: column;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .offer_details_container .offer_details_side_contact_info aside h2{
        font-size: 0.9rem;
    }
    .offer_details_container .offer_details_side_contact_info aside h3{
        font-size: 0.8rem;
    }
    .offer_details_container .offer_details h2{
        font-size: 1.3rem;
    }
    .offer_details_container .offer_details h3{
        font-size: 1rem;
    }
    .offer_details_lower_info{
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}
@media only screen and (max-width: 641px){
    .offer_details_lower_info{
        font-size: 0.8;
        padding: 1rem;
        display: flex;
        gap: 1rem;
        flex-direction: column;
    }
    .offer_title_container .offer_title_text{
        font-size: 2rem;
        padding-top: 4.5rem;
    }
    .offer_title_container {
        height: 45vh;
    }
    #electricians_offer_listing{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}
@media only screen and (max-width: 329px){
     .offer_title_container .offer_title_text{
        font-size: 1.5rem;
        padding-top: 2.5rem;
    }
    .offer_details_lower_info div section img{
        height: 2rem;
        width: 2rem;
        margin-bottom: 1rem;
    }
    .offer_title_container .offer_title_text, .offer_details_container, .offer_details_lower_info{
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .offer_title_container {
        height: 25vh;
    }
}
/* --- /oferty --- */
/* --- galeria --- */
#gallery_header{
    text-align: center;
    font-size: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
}
.gallery_container_title{
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}
#gallery_main_container{
    max-width: 95vw;
    margin-top: 2.5vw;
    margin-bottom: 2.5vw;
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
    user-select: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
	justify-items: center;
    align-content: center;
    justify-content: center;
}
#gallery_main_container > div{
    width: 100%;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
}
#gallery_TikTok_ribbon{
    max-width: 780px; 
    min-width: 32px;
    background-color: var(--secondary-color);
    border: solid 1px var(--primary-color);
    border-radius: 5px;
}
#gallery_YouTube_ribbon {
    max-width: 1720px;
    display: flex;
    flex-direction: row wrap;
    gap: 1rem;
    overflow-x: auto;
    align-items: center;
	justify-items: center;
    align-content: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border: solid 1px var(--primary-color);
    border-radius: 5px;
}
#gallery_YouTube_ribbon iframe {
  width: 200px;
  height: 356px; /* 9:16 Shorts-style */
  border-radius: 12px;
  border: none;
  flex-shrink: 0;
}
.yt-thumb {
  position: relative;
  width: 200px;
  height: 356px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-btn {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.43a8 8 0 0 0-5.6-5.6C55.69.67 34 .67 34 .67s-21.69 0-26.92 1.16a8 8 0 0 0-5.6 5.6A83 83 0 0 0 .67 24a83 83 0 0 0 .81 16.57 8 8 0 0 0 5.6 5.6C12.31 47.33 34 47.33 34 47.33s21.69 0 26.92-1.16a8 8 0 0 0 5.6-5.6A83 83 0 0 0 67.33 24a83 83 0 0 0-.81-16.57Z' fill='%23000' opacity='.6'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}
/* ---  /galeria --- */