@charset "UTF-8";

/*
Theme Name: DJ RedMax
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
Slug: djredmax
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: #FAF7F2;
	--black-color: #1F1F1F;
	--primary-color: #F5A623;
    --secondary-color: #f8c46c;
	--transition-default: .3s;
    --slow-transition: .5s;
    --fast-transition: .3s;
    --padding-horizontal: 15px;
	--font-family-default: "Montserrat", 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: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 {  }

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

header { position: sticky; top: 0; left: 0; z-index: 10; width: 100%; transition: var(--transition-default); background: var(--white-color); padding: 10px 0; }

header.admin-margin-top { top: 32px; }
@media only screen and (max-width: 782px) { header.admin-margin-top { top: 46px; } }

header.scroll { box-shadow: 0 4px 30px rgba(0,0,0, 0.3); }
/* header:not(.scroll) { margin: 25px 0; } */

.above-header-content { display: flex; justify-content: end; align-items: center; padding-top: 10px; }
.above-header-content a.ico-phone { color: var(--black-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(--primary-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; display: block; margin-bottom: -4px; }
.logo-container h1 { color: var(--black-color); font-weight: 500; font-size: 42px; margin: 0; }
.logo-container img { max-width: 150px; width: 100%; height: auto; display: inline-block; transition: var(--transition-default); }

header.scroll .logo-container img { max-width: 100px; }

.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(--primary-color); color: var(--white-color); border-radius: 50%; font-size: 24px; text-decoration: none; 
    width: 40px; height: 40px; transition: var(--transition-default);
}
.social-media-container a:hover { background: var(--secondary-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: 30px; list-style-type: none; margin: 0; padding: 0; font-family: var(--font-family-default); }
    ul.primary-menu li { margin: 0; padding: 0; text-align: center; }
    ul.primary-menu li a { color: var(--black-color); text-decoration: none; display: inline-block; text-align: center; font-size: 16px; position: relative; transition: var(--fast-transition); line-height: 1; text-transform: uppercase; padding: 10px 5px; font-weight: 500; }
    ul.primary-menu li.current-menu-item a { font-weight: 700; color: var(--primary-color); }

    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(--primary-color);
        width: 0; transition: var(--fast-transition); 
    }
    ul.primary-menu li a:hover::after,
    ul.primary-menu li.current-menu-item a::after { width: 100%; }
}

@media only screen and (max-width: 1250px) {
    ul.primary-menu li a { font-size: 14px; }
    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; }

    body.primary-menu-open header { position: fixed; }

    /* Nav hamburger START */
    .nav-toggle-container { display: flex; align-items: center; justify-content: center; height: 25px; gap: 15px; cursor: pointer; transition: var(--slow-transition); margin-right: 15px; }
    .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(--black-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(--black-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(--black-color); }
    body.primary-menu-open .nav-toggle-container > span { color: var(--black-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(--white-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(--black-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(--primary-color); width: 0; transition: var(--fast-transition); }
    ul.primary-menu li a:hover::after { width: 100%; }
    /* Menu END */

}

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

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

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

.hero-button {
    font-family: var(--font-family-default)!important;
    background: var(--primary-color)!important;
    color: var(--white-color)!important;
    font-weight: 600!important;
    border-radius: 10px!important;
    transition: var(--transition-default)!important;
}

.hero-button:hover { background: var(--secondary-color)!important; }

/********************
*
*   O Mnie
*
********************/

#o-mnie { padding: 75px 0; }
#o-mnie .content-container { display: grid; grid-template-columns: 1fr 1fr; }

#o-mnie .content-container h2 { font-weight: 500; font-size: 36px; color: var(--black-color); }
#o-mnie .content-container h2 span { position: relative; }
/* #o-mnie .content-container h2 span::after {  content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; border-bottom: 3px solid var(--primary-color); } */

#o-mnie .content-container h3 { color: var(--primary-color); font-size: 16px; font-weight: 600; }
#o-mnie .content-container img { width: 100%; max-width: 300px; height: auto; border-radius: 10px; }

#o-mnie .content-container .left-col { text-align: center; }
#o-mnie .content-container .right-col { display: flex; justify-content: center; align-items: center; }

@media only screen and (max-width: 770px) {
    #o-mnie .content-container { display: flex; flex-direction: column-reverse; }
    #o-mnie .content-container img { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; object-position: 0 -30px; }
}

@media only screen and (max-width: 530px) {
    #o-mnie .content-container h2 { font-size: 26px; }
}


/********************
*
*   Lead
*
********************/

#lead { background: var(--primary-color); padding: 15px; }
#lead h2 { color: var(--white-color); text-align: center; font-size: 32px; }
#lead h2 span { color: var(--black-color); }

@media only screen and (max-width: 940px) {
    #lead h2 span { display: block; text-align: center; }
}

@media only screen and (max-width: 530px) {
    #lead h2 { font-size: 26px; }
}

@media only screen and (max-width: 430px) {
    #lead h2 { font-size: 22px; }
}


#offers-grid .content-container { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0; }

.offer-el { height: 390px; }
.offer-el:has(:not(img)) { padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: start; }
.offer-el img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.offer-el h3 { text-transform: uppercase; margin-top: 0; }
.offer-el p { margin-bottom: 0; }

@media only screen and (max-width: 920px) {
    #offers-grid .content-container { grid-template-columns: 1fr 1fr; }
    #offers-grid .content-container .offer-el:last-child { grid-column: span 2; }
}

@media only screen and (max-width: 690px) {
    .offer-el { height: unset; }
    #offers-grid .content-container { grid-template-columns: 1fr; }
    #offers-grid .content-container .offer-el:last-child { grid-column: span 1; }
    .offer-el:has(img) { max-height: 400px; }
    .offer-el p { font-size: 14px; }
}

/********************
*
*   Contact button
*
********************/

#contact-button { background: var(--black-color); padding: 15px; position: relative; margin-bottom: 50px; }
#contact-button h2 { color: var(--white-color); text-align: center; font-size: 32px; margin-bottom: 30px; }
#contact-button h2 span { color: var(--primary-color); }

#contact-button .button-container { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -25px; text-align: center; }
#contact-button .button-container a {
    font-family: var(--font-family-default);
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    border-radius: 10px;
    transition: var(--transition-default);
    display: inline-block;
    text-decoration: none;
    padding: 10px 25px;
    font-size: 26px;
}

#contact-button .button-container a:hover { background: var(--secondary-color); }

@media only screen and (max-width: 700px) {
    #contact-button h2 span { display: block; text-align: center; }
}

@media only screen and (max-width: 450px) {
    #contact-button h2 { font-size: 24px; }
    #contact-button .button-container { bottom: -20px; }
    #contact-button .button-container a { font-size: 18px; }
}

/********************
*
*   Co gram
*
********************/

#co-gram { padding: 50px 0; }
#co-gram h2 { text-align: center; font-size: 42px; margin-bottom: 0; margin-top: 0; font-weight: 600; }
#co-gram h3 { text-align: center; font-size: 22px; color: var(--primary-color); margin-top: 10px; font-weight: 500; }

#co-gram .content-container { display: grid; grid-template-columns: 1fr 1fr; margin-top: 50px; gap: 50px; }

#co-gram .content-container .right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; }


@media only screen and (max-width: 1000px) {
    #co-gram .content-container .right-col { grid-template-columns: 1fr; gap: 0; }

}

@media only screen and (max-width: 800px) {
    #co-gram .content-container { grid-template-columns: 1fr; }
    #co-gram .content-container .right-col { grid-template-columns: 1fr 1fr; gap: 25px; }
}

@media only screen and (max-width: 550px) {
    #co-gram { padding-top: 25px; }
    #co-gram .content-container .right-col { grid-template-columns: 1fr; gap: 0; }

    #co-gram h2 { font-size: 36px; }
    #co-gram h3 { font-size: 18px; }
}

@media only screen and (max-width: 450px) {
    #co-gram .content-container { margin-top: 25px; }

    #co-gram h2 { font-size: 28px; }
    #co-gram h3 { font-size: 16px; }
}


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

#page-banner { 
    width: 100%; 
    height: 300px; 
    background-color: var(--black-color); 
    background-position: center; 
    background-size: cover; 
    background-repeat: no-repeat;
    position: relative;
}

#page-banner .page-banner-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6);
}

#page-banner .content-container { display: flex; flex-direction: column; justify-content: end; align-items: start; height: 100%; padding-bottom: 15px; position: relative; }
#page-banner h1 { color: var(--white-color); font-size: 52px; font-family: var(--font-family-default); margin: 0; font-weight: 400; line-height: 1.1; 
    text-shadow: 0px 0px 4px rgba(31, 31, 31, 1);
}

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

#default-content .content-container h2 { color: var(--black-color); font-family: var(--font-family-default); font-size: 35px; position: relative; display: inline-block; font-weight: 400; margin-top: 25px; margin-bottom: 15px; 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%; max-width: 100px; border-bottom: 3px solid var(--primary-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: 200px }
}

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

.foogallery-masonry { margin-top: 50px!important; }


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

#above-footer { padding: 50px 0; background-color: var(--black-color); }

#above-footer .generic-title { color: var(--white-color); margin-bottom: 45px; margin-top: 0; position: relative; display: inline-block; font-size: 24px; }
#above-footer .generic-title::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 50%; border-bottom: 3px solid var(--primary-color); }

#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: 18px; display: flex; gap: 10px; align-items: center; transition: var(--transition-default) }
.right-side-contact-info a.contact-item:hover { color: var(--primary-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'; }

.footer-logo-container { margin-top: 25px; }
.footer-logo-container img { max-width: 200px; width: 100%; height: auto;  }

#above-footer .content-container .right-side-contact-form { padding: 0 25px 25px 25px; border-left: 2px solid #eee; }
#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: #444;
    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(--primary-color);
}

.wpcf7-submit { padding: 10px 20px; font-size: 16px; background: var(--white-color); color: var(--black-color); cursor: pointer; transition: var(--transition-default); }
.wpcf7-submit:hover { background: var(--primary-color); color: var(--white-color); }


.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: 18px; transition: var(--transition-default); }
ul.footer-menu li a:hover,
ul.footer-menu li.current-menu-item a { color: var(--primary-color); }


@media only screen and (max-width: 880px) {
    #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: 2px solid #eee; }
}

@media only screen and (max-width: 680px) {
    #above-footer h2.generic-title { font-size: 20px; }
    
    #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; margin-left: auto; margin-right: auto; }
    ul.footer-menu,
    #above-footer .content-container .right-side-contact-info { align-items: center; }
}


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

footer { background-color: var(--white-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(--black-color); font-size: 12px; }
footer .content-container p a { text-decoration: none; color: var(--black-color); transition: var(--transition-default); }
footer .content-container p a:hover { color: var(--primary-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(--primary-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; 
}