@charset "UTF-8";

/*
Theme Name: DJ Sax and Beat
Theme URI: https://machalahubert.pl
Author: HM
Author URI: https://machalahubert.pl
Requires at least: 6.6.1
Tested up to: 6.6.2
Requires PHP: 8.2
Version: 1.0.1
Slug: djsaxandbeat-theme
License: GNU General Public License v2 or later
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper sapien lacus, id vestibulum libero malesuada eu. Vestibulum eget elit nec lorem rhoncus blandit nec sit amet justo. Ut suscipit viverra hendrerit. Quisque tincidunt placerat efficitur. Maecenas vitae ultrices risus. Aliquam sit amet risus quis purus mollis ultricies. Nam condimentum nisl quam, sed lacinia enim dignissim et. Proin quis efficitur massa. Integer maximus accumsan urna sed luctus. Maecenas eget imperdiet magna, in hendrerit neque. 
*/

:root {
	--white-color: #FFF;
	--black-color: #0B1629;
    --purple-color: #330840;
    --dark-pink-color: #72156C;
    --pink-color: #B12398;
    --light-second-pink-color: #C14FAD;
    --light-pink-color: #F590E0;
    --gold-color: #D0BB20;
    --yellow-color: #FFF380;
	--transition-default: .3s;
    --slow-transition: .5s;
    --fast-transition: .3s;
    --padding-horizontal: 15px;
	--font-family-default: "Poppins", sans-serif;
    --font-family-heading: 'BebasNeue', sans-serif;
	--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
	--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

button,
.wpcf7-submit { all: unset; }
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

@font-face {
	font-family: 'Font_Awesome_Brands';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("assets/fonts/fontawesome/fa-brands-400.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-brands-400.ttf") format("truetype");
}

@font-face {
	font-family: 'Font_Awesome_Thin';
	font-style: normal;
	font-weight: 100;
	font-display: block;
	src: url("assets/fonts/fontawesome/fa-thin-100.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-thin-100.ttf") format("truetype");
}

@font-face {
	font-family: 'Font_Awesome_Light';
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url("assets/fonts/fontawesome/fa-light-300.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-light-300.ttf") format("truetype"); 
}

@font-face {
	font-family: 'Font_Awesome_Regular';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("assets/fonts/fontawesome/fa-regular-400.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-regular-400.ttf") format("truetype");
}

@font-face {
	font-family: 'Font_Awesome_Solid';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("assets/fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-solid-900.ttf") format("truetype");
}

@font-face {
	font-family: 'Font_Awesome_Duetone';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("assets/fonts/fontawesome/fa-duotone-900.woff2") format("woff2"), url("assets/fonts/fontawesome/fa-duotone-900.ttf") format("truetype");
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'BebasNeue';
    src: url('assets/fonts/bebasneue/BebasNeue-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

*, *:after, *:before { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { font-family: var(--font-family-default); margin: 0; padding: 0; }

.content-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 var(--padding-horizontal); }

i.ico::before { font-style: normal!important; }
.ico-phone::before { content: '\f095'; font-family: 'Font_Awesome_Light'; }
.ico-fb::before { content: '\f39e'; font-family: 'Font_Awesome_Brands'; }
.ico-ig::before { content: '\f16d'; font-family: 'Font_Awesome_Brands'; }
.ico-tiktok::before { content: '\e07b'; font-family: 'Font_Awesome_Brands'; }
.ico-yt::before { content: '\f167'; font-family: 'Font_Awesome_Brands'; }

.star-ico:not(.active):before { content: '\f005'; font-family: 'Font_Awesome_Light'; }
.star-ico.active:before { content: '\f005'; font-family: 'Font_Awesome_Solid'; }


h2.generic-title { color: var(--white-color); font-family: var(--font-family-heading); font-size: 65px; position: relative; display: inline-block; font-weight: 400; margin-top: 0; line-height: 1.1; padding-bottom: 15px; }
h2.generic-title::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 80%; border-bottom: 5px solid var(--yellow-color);
    -webkit-box-shadow: 0px 0px 24px 1px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 24px 1px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 24px 1px rgba(255, 255, 255, 1);
}

section.pink-bg { background: var(--pink-color); }
section.dark-pink-bg { background: var(--dark-pink-color); }
section.purple-bg { background: var(--purple-color); }

.generic-button,
.wpcf7-submit { font-family: var(--font-family-heading); font-weight: 400; font-size: 30px; padding: 15px 35px; color: var(--white-color); text-decoration: none; transition: var(--transition-default); cursor: pointer; }
.generic-button.color { 
    border: 3px solid;
    border-image-slice: 1;
    border-width: 3px;
    border-image-source: linear-gradient(to left, var(--yellow-color), var(--light-pink-color));
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.generic-button.color::after { content: ''; width: 100%; height: 100%; background: linear-gradient(to left, var(--yellow-color), var(--light-pink-color)); position: absolute; top: 0; left: 0; transition: var(--transition-default); z-index: -1; transform: translateX(100%); }
.generic-button.color:hover { color: var(--black-color); }
.generic-button.color:hover::after { transform: translateX(0); }


.generic-button.white, .wpcf7-submit { border: 3px solid var(--white-color); }
.generic-button.white:hover, .wpcf7-submit:hover { color: var(--black-color); background: var(--white-color); }


/********************
*
*   Header
*
********************/

header { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; transition: var(--transition-default); }
header.admin-margin-top { top: 32px; }
@media only screen and (max-width: 782px) { header.admin-margin-top { top: 46px; } }

header.scroll { background: var(--black-color); box-shadow: 0 4px 30px rgba(255,243,128, 0.1);  }

.above-header-content { display: flex; justify-content: end; align-items: center; padding-top: 10px; }
.above-header-content a.ico-phone { color: var(--white-color); text-decoration: none; transition: var(--transition-default); }
.above-header-content a.ico-phone::before { margin-right: 10px; }
.above-header-content a:hover { color: var(--yellow-color); }

header .content-container { max-width: unset; padding-left: 50px; padding-right: 50px; }

.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo-container a { text-decoration: none; }
.logo-container h1 { color: var(--white-color); font-weight: 500; font-size: 42px; margin: 0; }

.social-media-container { display: flex; justify-content: end; align-items: center; gap: 15px; }
.social-media-container a { 
    display: flex; justify-content: center; align-items: center; 
    background: var(--pink-color); color: var(--white-color); border-radius: 50%; font-size: 18px; text-decoration: none; 
    width: 32px; height: 32px; transition: var(--transition-default);
}
.social-media-container a:hover { background: var(--light-second-pink-color); }

/* .social-media-container a::before { margin-top: -2px; } */


@media only screen and (min-width: 1061px) {

    .nav-toggle-container { display: none; }
    ul.primary-menu { display: flex; gap: 25px; list-style-type: none; margin: 0; padding: 0; font-family: var(--font-family-heading); }
    ul.primary-menu li { margin: 0; padding: 0; text-align: center; }
    ul.primary-menu li a { color: var(--white-color); text-decoration: none; display: inline-block; text-align: center; font-size: 28px; position: relative; padding: 10px 0; transition: var(--fast-transition); line-height: 1; }

    ul.primary-menu li a::after { 
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; 
        border-bottom: 2px solid;
        border-image-slice: 1;
        border-width: 2px;
        border-image-source: linear-gradient(to left, var(--yellow-color), var(--light-pink-color)); 
        width: 0; transition: var(--fast-transition); 
    }
    ul.primary-menu li a:hover::after { width: 100%; }
}

@media only screen and (max-width: 1250px) {
    .logo-container h1 { font-size: 36px; }
    ul.primary-menu li a { font-size: 24px; }
    header .content-container { padding-left: var(--padding-horizontal); padding-right: var(--padding-horizontal); }
}

@media only screen and (max-width: 1060px) {

    header .social-media-container { margin-left: auto; }
    .header-content { gap: 25px; }

    /* Nav hamburger START */
    .nav-toggle-container { display: flex; align-items: center; justify-content: center; height: 25px; gap: 15px; cursor: pointer; transition: var(--slow-transition); }
    .nav-toggle { display: flex; flex-direction: column; justify-content: space-around; height: 25px; width: 30px; }
    .nav-toggle .bar { height: 3px; width: 100%; background-color: var(--white-color); transition: all var(--fast-transition) ease-in-out; }
    .nav-toggle-container.active .nav-toggle { justify-content: space-between; height: 25px; width: 25px; }
    .nav-toggle-container.active .nav-toggle .bar:nth-of-type(1) { transform: rotate(45deg); transform-origin: top left; width: 33px; }
    .nav-toggle-container.active .nav-toggle .bar:nth-of-type(2) { transform-origin: center; width: 0; }
    .nav-toggle-container.active .nav-toggle .bar:nth-of-type(3) { transform: rotate(-45deg); transform-origin: bottom left; width: 33px; }
    .nav-toggle-container > span { font-weight: 700; transition: var(--fast-transition); color: var(--white-color); }

    body.primary-menu-open .main-site-header { position: absolute; top: 0; left: 0; }
    body.primary-menu-open .logo-container { position: relative; z-index: 2; }
    body.primary-menu-open .nav-toggle-container { position: relative; z-index: 2; }
    body.primary-menu-open .social-media-container { position: relative; z-index: 2; }
    body.primary-menu-open .above-header-content { position: relative; z-index: 2; }



    body.primary-menu-open .nav-toggle .bar { background-color: var(--white-color); }
    body.primary-menu-open .nav-toggle-container > span { color: var(--white-color); }
    /* Nav hamburger END */

    /* Menu START */
    .primary-menu-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--black-color); transition: var(--slow-transition); z-index: 0; }
    body:not(.primary-menu-open) .primary-menu-container { pointer-events: none; scale: 0; }
    body.primary-menu-open .primary-menu-container { scale: 1; }

    ul.primary-menu { list-style-type: none; padding-left: 0; display: flex; flex-direction: column; gap: 25px; }
    ul.primary-menu li { margin: 0; padding: 0; text-align: center; }
    ul.primary-menu li a { color: var(--white-color); text-decoration: none; display: inline-block; text-align: center; font-size: 32px; position: relative; padding-bottom: 10px; transition: var(--fast-transition); line-height: 1; }
    ul.primary-menu li a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; border-bottom: 3px solid var(--white-color); width: 0; transition: var(--fast-transition); }
    ul.primary-menu li a:hover::after { width: 100%; }
    /* Menu END */

}

@media only screen and (max-width: 530px) {
    header .social-media-container { display: none }
}

@media only screen and (max-width: 340px) {
    .logo-container h1 { font-size: 28px; }
}


/********************
*
*   Hero
*
********************/

#hero { 
    width: 100%; 
    height: 100vh; 
    background-color: var(--black-color); 
    background-image: url('assets/images/hero_bg.png'); 
    background-position: 0% 100%; 
    background-size: contain; 
    background-repeat: no-repeat;
    position: relative;
}

#hero .content-container { display: flex; flex-direction: column; justify-content: center; align-items: end; height: 100%; }

#hero h1 { color: var(--white-color); font-size: 155px; font-family: var(--font-family-heading); margin: 0; font-weight: 400; }
#hero h1 sub, #hero h1 sup { color: var(--light-pink-color); }
#hero h2 { color: var(--white-color); font-size: 100px; font-family: var(--font-family-heading); margin: 0; font-weight: 400; line-height: 1; text-align: right; }
#hero .generic-button { margin-top: 50px; }

#hero h3.sub-heading { position: absolute; bottom: 5px; left: 0; right: 0; margin: 0 auto; text-align: center; font-size: 45px; font-family: var(--font-family-heading); color: var(--yellow-color); letter-spacing: 15px; font-weight: 400; }


@media only screen and (max-width: 750px) {
    #hero { max-height: 700px; }
    #hero h1 { font-size: 100px; }
    #hero h2 { font-size: 65px; }
    #hero h3.sub-heading { font-size: 30px; letter-spacing: 10px; }
}

@media only screen and (max-width: 480px) {
    #hero { max-height: 550px; background-size: cover; background-position: -60px 100%; }
    #hero .content-container { background: rgba(0,0,0,.55); }
    #hero h1 { font-size: 65px; }
    #hero h2 { font-size: 45px; }
    #hero h3.sub-heading { font-size: 25px; letter-spacing: 5px; }
    #hero .generic-button { font-size: 24px; margin-top: 25px; }
}


/********************
*
*   Nasza misja
*
********************/

#nasza-misja { padding: 50px 0 100px 0; background: var(--purple-color); background-image: url('assets/images/smoke_bg.png'); background-position: bottom; background-size: cover; background-repeat: no-repeat;  }
#nasza-misja .title-container { text-align: center; }
#nasza-misja p { color: var(--gold-color); font-size: 18px; text-align: center; font-weight: 300; }
#nasza-misja p strong { font-weight: 700; }


/********************
*
*   Sections generic
*
********************/

#poznaj-nas,
#co-w-pakiecie,
#faq,
#dodatkowo,
#zadowolenie-klienta,
#opinie,
#galeria,
#cennik { padding: 50px 0; }


/********************
*
*   Poznaj nas
*
********************/

#poznaj-nas .content-container { position: relative; }
#poznaj-nas .title-container { position: absolute; left: -10%; top: 35%; transform: rotate(-90deg); height: 150px; }
#poznaj-nas .title-container h2 { font-size: 120px; }


#poznaj-nas .boxes-container { width: 100%; display: flex; justify-content: end; gap: 50px; }

.poznaj-nas-box { text-align: center; }

.przemek-box { margin-top: -100px; }
.radek-box { margin-bottom: -100px; }

.poznaj-nas-box img { max-width: 285px; height: auto; width: 100%; object-fit: cover; object-position: center; }

.poznaj-nas-box--content { background: var(--yellow-color); text-align: center; padding: 25px; margin-top: -7px; }
.poznaj-nas-box--content h3 { color: var(--black-color); font-size: 26px; font-weight: 400; margin: 0; }
.poznaj-nas-box--content p {  color: var(--black-color); font-size: 18px; font-weight: 300; margin: 0; }
.poznaj-nas-box--content a { color: var(--dark-pink-color); font-size: 24px; text-transform: uppercase; display: inline-block; margin-top: 25px; text-decoration: none; position: relative; transition: var(--transition-default); }
.poznaj-nas-box--content a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 0; border-bottom: 1px solid var(--dark-pink-color); margin: 0 auto; transition: var(--transition-default); }
.poznaj-nas-box--content a:hover { color: var(--pink-color); }
.poznaj-nas-box--content a:hover::after { width: 80%; }


@media only screen and (max-width: 1010px) {
    #poznaj-nas .title-container { left: -5%; }
    #poznaj-nas .title-container h2 { font-size: 82px; }

    .poznaj-nas-box img { max-width: 200px; }
    .poznaj-nas-box--content { padding: 15px; }
    .poznaj-nas-box--content h3 { font-size: 22px; }
    .poznaj-nas-box--content p { font-size: 16px; }
    .poznaj-nas-box--content a { font-size: 20px; }
}

@media only screen and (max-width: 780px) {
    #poznaj-nas .title-container { transform: none; position: static; text-align: center; }
    .przemek-box, .radek-box { margin: 0; }
    #poznaj-nas .boxes-container { justify-content: center; margin-top: 25px; }
}

@media only screen and (max-width: 480px) {
    #poznaj-nas .boxes-container { flex-direction: column; }
    .poznaj-nas-box--content { max-width: 300px; margin-left: auto; margin-right: auto; }
}

@media only screen and (max-width: 340px) {
    #poznaj-nas .title-container h2 { font-size: 65px; }
}


/********************
*
*   Co w pakiecie
*
********************/

#co-w-pakiecie .title-container h2::after { right: unset; }

.item-offer-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 25px; }

.item-offer { display: flex; gap: 10px; max-width: 560px; width: 100%; }
.item-offer--number span {  color: var(--yellow-color); font-size: 92px; font-weight: 500; line-height: 1; font-family: Arial; }
.item-offer--content h3 {  color: var(--yellow-color); font-size: 52px; font-weight: 700; margin: 0; line-height: 1; font-family: var(--font-family-heading) }
.item-offer--content p { color: var(--white-color); font-size: 14px; font-weight: 300; }
.item-offer--content span.price {  color: var(--yellow-color); font-size: 28px; font-weight: 500; margin: 0; line-height: 1; }
.item-offer--image img { width: 100%; height: auto; min-width: 200px; object-fit: cover; object-position: center; }

/* dodatkowo */
#dodatkowo .title-container { display: flex; justify-content: space-between; align-items: center; }
#dodatkowo .title-container h2::after { right: unset; }

@media only screen and (max-width: 1100px) {
    .item-offer-container { grid-template-columns: 1fr; }
    .item-offer { margin: 0 auto; }

    #co-w-pakiecie .title-container { text-align: center; }
    #co-w-pakiecie .title-container h2::after { right: 0; }

    #dodatkowo .title-container { flex-direction: column; justify-content: center; align-items: center; }
    #dodatkowo .title-container h2::after { right: 0; }
    #dodatkowo .title-container a { margin-bottom: 50px; }
}

@media only screen and (max-width: 550px) {
    .item-offer--content h3 { font-size: 38px; }
}

@media only screen and (max-width: 480px) {
    .item-offer { flex-direction: column; }

    .item-offer--image,
    .item-offer--content h3,
    .item-offer--content { text-align: center; }

    .item-offer--content p { text-align: justify; }

    .item-offer--image img { min-width: unset; max-width: 250px; margin: 0 auto; }

    .item-offer--number { display: none; }
}



/********************
*
*   FAQ
*
********************/

#faq .title-container { text-align: center; }



/********************
*
*   Zadowolenie klienta - tytuł
*
********************/

#zadowolenie-klienta .title-container { text-align: center; }
#zadowolenie-klienta .title-container h2 { margin: 0; padding: 0; }
#zadowolenie-klienta .title-container h2::after { display: none; }

/********************
*
*   Opinie - slider
*
********************/

.rate-container { padding: 0 50px; }

.owl-carousel .owl-nav.disabled { display: block!important; }
.opinie-karuzela { padding: 0 25px; margin-top: 25px; }
.owl-prev { position: absolute; left: 5px; top: 0; bottom: 0; margin-top: 0; margin-bottom: 0; transition: var(--transition-default); }
.owl-prev:before { content: '\f053'; font-family: 'Font_Awesome_Light'; color: var(--yellow-color); font-size: 32px; }
.owl-prev span, .owl-next span { display: none; }
.owl-next { position: absolute; right: 5px; top: 0; bottom: 0; margin-top: 0; margin-bottom: 0; transition: var(--transition-default); }
.owl-next:before { content: '\f054'; font-family: 'Font_Awesome_Light'; color: var(--yellow-color); font-size: 32px; }
.owl-carousel .owl-item img { display: unset!important; width: 160px!important; }

.owl-prev:active,
.owl-next:active { transform: scale(.8); }

.rate-box { padding: 10px; }

.rate-box--header { display: flex; gap: 10px; }
.rate-box--header--avatar span { width: 55px; height: 55px; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; background: var(--yellow-color); color: var(--black-color); font-size: 36px; font-family: var(--font-family-heading); padding-top: 5px; }
.rate-box--header--info--name { font-size: 18px; font-weight: 700; color: var(--white-color); }
.rate-box--header--info--stars-container { font-size: 18px; color: var(--yellow-color); display: flex; gap: 5px; }

.rate-box--content { font-size: 14px; color: var(--white-color); text-align: left; overflow-y: scroll; height: 125px; margin: 15px 0; }
.rate-box--content p { margin: 0; }

.rate-box--source { text-align: center; }
.rate-box--source img { width: 160px; height: 75px; object-fit: contain; object-position: center; }

@media only screen and (max-width: 420px) {
    .rate-box--header--avatar span { width: 45px; height: 45px; font-size: 30px; }
    .rate-box--header--info--name { font-size: 16px; }
    .rate-box--header--info--stars-container { font-size: 16px; }
    .rate-box--content { font-size: 12px; height: 100px; }
    .rate-box--source img { width: 120px; height: 60px; }
}

/********************
*
*   Galeria
*
********************/

#galeria .title-container { text-align: center; }
#galeria .button-container { text-align: center; }

.gallery-container { margin-bottom: 100px; }
.foogallery.fg-dark .fg-item-inner { background: var(--white-color)!important; border-color: var(--white-color)!important; }


/********************
*
*   Cennik
*
********************/

#cennik .title-container { text-align: center; }
#cennik .subtitle { color: var(--white-color); text-align: center; }

.cennik-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px; margin-top: 100px; }
.cennik-grid--item h3 {  color: var(--yellow-color); font-size: 32px; font-weight: 700; margin: 0; line-height: 1; font-family: var(--font-family-heading) }
.cennik-grid--item p { color: var(--white-color); font-size: 14px; font-weight: 300; margin: 25px 0; }
.cennik-grid--item span.price {  color: var(--yellow-color); font-size: 28px; font-weight: 500; margin: 0; line-height: 1; }
.cennik-grid--item ul { padding-left: 15px; }
.cennik-grid--item ul li { color: var(--white-color); font-size: 14px; font-weight: 600; }

@media only screen and (max-width: 690px) {
    .cennik-grid { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 430px) {
    .cennik-grid { grid-template-columns: 1fr; margin-top: 50px; }
    .cennik-grid--item { border-top: 1px solid var(--dark-pink-color); padding-top: 50px; }
}


/********************
*
*   Default page
*
********************/

#page-banner { 
    width: 100%; 
    height: 400px; 
    background-color: var(--black-color); 
    background-image: url('assets/images/hero_bg.png'); 
    background-position: 0% 100%; 
    background-size: contain; 
    background-repeat: no-repeat;
}

#page-banner .content-container { display: flex; flex-direction: column; justify-content: end; align-items: start; height: 100%; padding-bottom: 15px; }
#page-banner h1 { color: var(--white-color); font-size: 52px; font-family: var(--font-family-heading); margin: 0; font-weight: 400; line-height: 1.1; }

#default-content { background: var(--purple-color); color: var(--white-color); padding: 50px 0; }

#default-content .content-container h2 { color: var(--white-color); font-family: var(--font-family-heading); font-size: 35px; position: relative; display: inline-block; font-weight: 400; margin-top: 25px; margin-bottom: 0; line-height: 1.1; padding-bottom: 15px; }
#default-content .content-container h2::after { content: ''; position: absolute; bottom: 0; left: 0; margin: 0 auto; width: 80%; border-bottom: 5px solid var(--yellow-color);
    -webkit-box-shadow: 0px 0px 24px 1px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 24px 1px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 24px 1px rgba(255, 255, 255, 1);
}

#default-content .content-container h2:first-child { margin-top: 0; }
#default-content .content-container p:last-child { margin-bottom: 0; }

@media only screen and (max-width: 850px) {
    #page-banner {  height: 300px }
}

@media only screen and (max-width: 350px) {
    #page-banner { background-size: cover }
}


/********************
*
*   Above footer
*
********************/

#above-footer { padding: 50px 0; background-color: var(--black-color); }
#above-footer .title-container h2::after { right: unset; }

#above-footer .content-container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
#above-footer .content-container .right-side { grid-column: span 2; }
#above-footer .content-container .right-side-container { display: grid; grid-template-columns: 1fr 1fr; }

#above-footer .content-container .right-side-contact-info { display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 20px; }
#above-footer .content-container .right-side-contact-info .social-media-container { justify-content: start; margin-bottom: 25px; }

.right-side-contact-info a.contact-item { color: var(--white-color); text-decoration: none; font-size: 22px; display: flex; gap: 10px; align-items: center; transition: var(--transition-default) }
.right-side-contact-info a.contact-item:hover { color: var(--yellow-color); }
.right-side-contact-info a.phone-item::before {  content: '\f095'; font-family: 'Font_Awesome_Light'; }
.right-side-contact-info a.email-item::before {  content: '\f0e0'; font-family: 'Font_Awesome_Light'; }

#above-footer .content-container .right-side-contact-form { padding: 0 25px 25px 25px; border-left: 3px solid #172234; }
#above-footer .content-container .right-side-contact-form label { color: var(--white-color); font-size: 12px; }
#above-footer .content-container .right-side-contact-form input:not([type=submit]),
#above-footer .content-container .right-side-contact-form textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 10px;
    background: #454E5D;
    color: var(--white-color);
    border: 0;
    font-family: var(--font-family-default);
    font-size: 14px;
    border: 1px solid #454E5D;
}

#above-footer .content-container .right-side-contact-form input:not([type=submit]):focus-visible,
#above-footer .content-container .right-side-contact-form textarea:focus-visible {
    outline: 0;
    border: 1px solid var(--white-color);
}

.wpcf7-submit { padding: 5px 15px; font-size: 24px; }
.wpcf7-response-output { color: var(--white-color) }


ul.footer-menu {  display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 10px; list-style-type: none; margin: 0; padding: 0; }
ul.footer-menu li a {  color: var(--white-color); text-decoration: none; font-size: 22px; transition: var(--transition-default); }
ul.footer-menu li a:hover { color: var(--yellow-color); }


@media only screen and (max-width: 880px) {
    #above-footer h2.generic-title { font-size: 45px; }

    #above-footer .content-container { grid-template-columns: 1fr 1fr; }
    #above-footer .content-container .right-side { grid-column: span 1; }

    #above-footer .content-container .right-side-container { grid-template-columns: 1fr; }
    #above-footer .content-container .right-side-contact-info { padding-bottom: 25px; }
    #above-footer .content-container .right-side-contact-form { padding: 25px 0 0 0; border-left: 0; border-top: 3px solid #172234; }
}

@media only screen and (max-width: 680px) {
    #above-footer .content-container { grid-template-columns: 1fr; gap: 50px; }
    #above-footer .title-container { text-align: center; }
    #above-footer .title-container h2::after { right: 0; }
    ul.footer-menu,
    #above-footer .content-container .right-side-contact-info { align-items: center; }
}


/********************
*
*   Footer
*
********************/

footer { background-color: var(--purple-color); padding: 5px 0; }

footer .content-container { display: flex; justify-content: space-between; padding: 0 75px; max-width: 1350px; }
footer .content-container p { color: var(--white-color); font-size: 12px; }
footer .content-container p a { text-decoration: none; color: var(--white-color); transition: var(--transition-default); }
footer .content-container p a:hover { color: var(--yellow-color); }
footer .content-container .right-side p a { font-weight: bold; }

@media only screen and (max-width: 650px) {
    footer .content-container { flex-direction: column; padding: 5px 5px 40px 5px; }
    footer .content-container p { text-align: center; margin: 0; }
}


/********************
*
*   Scroll to top
*
********************/

#scroll-to-top { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 50px; height: 50px; 
    position: fixed; 
    bottom: 10px; right: 10px; 
    background: var(--pink-color); 
    border-radius: 50px; 
    text-decoration: none; 
    color: var(--white-color); 
    opacity: 0; 
    transition: var(--transition-default); 
    z-index: 99999; 
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

#scroll-to-top::before {
    content: '\f077';
    font-family: 'Font_Awesome_Light';
    font-size: 24px;
}

#scroll-to-top:not(.show) { 
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
}

#scroll-to-top.show { 
    opacity: .5; 
    transform: translateY(0); 
}

#scroll-to-top:hover { 
    opacity: 1; 
}