/*!
Theme Name: Theme
Theme URI: http://underscores.me/
Author: SocialUp!
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: 
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/



/* Global
--------------------------------------------- */


:root {
    
    --first-font: 'Sora', sans-serif;
    --blue: rgba(0, 113, 183, 1);
    --blue-transparent:  rgba(0, 113, 183, 0.9);
    --white:  rgba(255, 255, 255, 1);
    --black:  rgba(0, 0, 0, 1);
    --lighter-gray: rgba(242, 242, 242, 1);
    --logo-color: rgba(183, 209, 226, 1);
}

.site-main{
    overflow-x: hidden;
}

.site-footer{
    overflow-y: hidden;
}

.page-template-default .entry-content{
    padding: 3rem 0;
}

body{
font-family: var(--first-font);
background: var(--white);
color: var(--font-black);
}

b, strong{
    font-weight: 900;
}

section{
    position: relative;
}

a{
    text-decoration: none;
}


h1{
    color: var(--font-black);
    font-weight: 900;
    font-size: 5rem;
    margin: 0;
    
}


.page-template h1{
    margin-top: 4rem;
}

h2{
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--font-black);
}

h2:after{
    content: "";
    width: 6rem;
    height: 0.9rem;
    background: var(--blue);
    display: block;
    margin: -0.9rem 0px 2rem -10px;

}

h4{
    font-size: 1.3rem;
    font-weight: 900;
}

p{
    line-height: 1.6rem;
    font-weight: 300;
}

.container, .row{
    height: 100%;
    position: relative;
}

blockquote{
    font-family: var(--first-font);
    font-weight: 500;
    border-left: 0.5rem solid var(--blue);
    padding-left: 1.2rem;
    font-size: 1.3rem;
    font-style: italic;

}

.post, .page{
    margin-bottom: -1rem;
}

.btn{
    background-color: var(--blue);
    border-radius: 2rem;
    -moz-border-radius: 2rem;
    -webkit-border-radius: 2rem;
    color: var(--white);
    transition: background .3s ease-in-out;
    font-weight: 900;
    padding: 1rem 2.5rem;
    text-transform: uppercase;
}


.btn-white{
    background-color: var(--white);
    color: var(--blue);
}


.box-shadow{
        -webkit-box-shadow: 0px 0px 40px -27px rgb(119, 119, 119);
    -moz-box-shadow: 0px 0px 40px -27px rgba(119, 119, 119, 1);
    box-shadow: 0px 0px 40px -27px rgb(119, 119, 119);
}


a:hover, a:focus, a:active{
    color: var(--blue);
    -webkit-transition: color 0.5s ease-out;
      -moz-transition: color 0.5s ease-out;
      -o-transition: color 0.5s ease-out;
      transition: color 0.5s ease-out;

}

a, a:visited{
    color:var(--black);

}

.btn:hover{
    background: var(--logo-color);
    -webkit-transition: background 0.7s ease-out;
      -moz-transition: background 0.7s ease-out;
      -o-transition: background 0.7s ease-out;
      transition: background 0.7s ease-out;
          color: var(--white);
         -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
}

/* Header
--------------------------------------------- */


header{
    position: fixed;
    width: 100%;
    z-index: 9;
    padding: 1.2rem 0;
}

.site-header.sticky{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 100;
    background-color: var(--blue-transparent);
    will-change: background-color;
    transition: background-color .3s ease-in-out;
}


.site-header .site-header-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.site-header .site-header-row .site-branding, .site-header .site-header-row .main-navigation  {
       width: auto;
}

.site-header .site-header-row .site-branding img{
    width: 5.5rem;
}

.site-header .main-navigation ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-header .main-navigation ul li{
   
}

.site-header .main-navigation ul li a{
    color: var(--white);
    font-weight: 400;
    padding: 1rem 1.5rem;
    display: block;
}

.site-header .main-navigation ul li.button a{
    color: var(--white);
    font-weight: 900;
}


.site-header .main-navigation .contact{
    margin-left: 1.6rem;
}
.site-header .main-navigation .contact:before{
    
    content: "";
    height: 1.2rem;
    width: 1.2rem;
    background-size: 1.2rem 1.2rem;
    background-image: url('assets/img/top-contact-arrow.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 1rem;
    left: -0.6rem;
}


.justify{
    text-align: justify;
}

/*  Main Page - Hero
--------------------------------------------- */


section#hero{
    height: 38rem;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
    background-position: center center;

}

section#hero .hero-text{
    display: flex;
    position: relative;
    justify-content: center;
    height: 94%;
    flex-direction: column;
    color: var(--white);

}

section#hero .hero-text p.above-header{
    font-size: 1.5rem;
}


section#hero .hero-text p.under-header{
    font-size: 1.8rem;
    margin: 1rem 0rem;
    font-weight: 900;
}



section#hero .custom-block {
    border: 0.7rem solid var(--white);
    border-radius: 100%;
    position: absolute;
    z-index: 2;
    bottom: -40px;
    right: -60px;
    width: 300px;
    padding: 0rem 1rem;
    height: 300px;
    text-align: center;
    display: flex;
}


section#hero .custom-block-image {
    border: 0.7rem solid var(--white);
    border-radius: 100%;
    position: absolute;
    top: -60px;
    right: 20px;
    left: 0;
    width: 120px;
    height: 120px;
    margin: auto;
    object-fit: cover;
}

section#hero .custom-block-text{
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 900;
}

/*  Main Page - About
--------------------------------------------- */


section#about{
    padding: 5rem 0 10rem 0;

}


section#about .shape-1{
    position: absolute;
    width: 79rem;
    right: -635px;
    top: -12rem;
    z-index: -1;
}

section#about .about-image img{
    border-radius: 2rem;
    width: 100%;
    padding: 0px;
    object-fit: cover;
}


/*  Main Page - Reviews
--------------------------------------------- */
section#reviews{
     padding: 4rem 0 4rem 0;
 }

section#reviews .row, section#reviews .container{
    position: static;
}

section#reviews h2 span{
    font-size: 2rem;
    display: block;
    margin-left: -1rem;
}



/*  Main Page - Kids
--------------------------------------------- */

section#kids{
   
    background-image: url('assets/img/bg-kids.jpg');
    background-repeat: no-repeat;
    color: var(--white);
    padding: 9rem;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);

}

section#kids h4{
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
}



/*  Main Page - Services
--------------------------------------------- */
section#services{
        padding: 4rem 0 0 0;
}

section#services .services{
    padding: 0 7rem 7rem 7rem;
}

section#services .services-list{
    position: relative;
}

section#services h2{
    margin-left: 1rem;
    text-align: center;
    margin-bottom: 3rem;
}

section#services h2 span{
    font-size: 2rem;
    display: block;
    margin-left: -1rem;
}

section#services h2:after{
  display: none;
}


section#services .services-text{
    width: 25rem;
    font-size: 1.2rem;
}

section#services ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, 1fr);
    display: grid;

}

section#services ul li{
    margin: 0.7rem 0 0 2.5rem;
    position: relative;

}

section#services ul li:before{
    content: '';
    position: absolute;
       width: 0.5rem;
       height: 0.5rem;
       -moz-border-radius: 1rem;
       -webkit-border-radius: 1rem;
       border-radius: 1rem;
       background-color: var(--blue);
       left: -1.8rem;
    top: 0.4rem;
       
}


section#services .services-text-2{
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 2rem;
    margin-bottom: 2rem;
}

section#services ul.services-ul-2 {
    grid-template-columns: repeat(1, 1fr);
    display: grid;

}

section#services .services img{
    clip-path: polygon(0 0, 100% 16%, 76% 88%, 0% 100%);
    height: 50vh;
    object-fit: cover;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45vw;

}

section#services .row, section#services .container {
    position: static;
}



section .services .services-list-grid-item {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin: 10px 0px;
    border-radius: 2rem;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: var(--blue);
    color: var(--white);
    height: 14rem;
}


section .services .services-list--header{
    margin-bottom: 1.3rem;
}

section .services .btn{
font-size: 0.8rem;
}


section .shape-2{
    position: absolute;
    width: 72rem;
    left: -662px;
    top: 1rem;
    z-index: -1;
}

/* Map
--------------------------------------------- */
section#map{
    padding: 10rem 0 0 0;
}

section#map p{
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Footer
--------------------------------------------- */

footer{
    position: relative;
    text-align: center;
}

footer .contact{
    padding: 6rem 0rem;
}

footer h2{
    margin-bottom: 4rem;
}
footer h2:after{
    display: none;
}

footer p, footer a{
    color: var(--black);
    font-size: 1rem;
    margin: 0.4rem 0;
}

footer h5{
        margin: 0rem 0rem 1.5rem 0rem;
        text-transform: uppercase;
        font-weight: 900;
}

footer img{
    width: 1.5rem;
    margin: 0rem 0.4rem;
}


footer .copy{
    padding: 1rem 2rem;
    text-align: right;
}

footer .copy img{
   
    width: 5rem;
    

}


footer .shape-3{
    position: absolute;
    width: 57rem;
    left: -22rem;
    top: 7rem;
    z-index: -1;
}


/* Contact Form 7
--------------------------------------------- */
.wpcf7-form{
        padding: 0 7rem 1rem;
}
.wpcf7-form label{
    width: 100%;
}

.wpcf7-form input[type="text"], 
.wpcf7-form input[type="email"], 
.wpcf7-form input[type="url"], 
.wpcf7-form input[type="password"], 
.wpcf7-form input[type="search"], 
.wpcf7-form input[type="number"], 
.wpcf7-form input[type="tel"], 
.wpcf7-form textarea {
    color: var(--black);
    width: 100%;
    border-radius: 5rem;
    border: 0.15rem solid var(--blue);
    background: transparent;
    margin: 0.7rem;
    padding: 0.9rem 2.4rem;
}

.wpcf7-form textarea {
    border-radius: 1.4rem;
}

.wpcf7-text:focus, 
.wpcf7-textarea:focus {
    outline: 0;
    outline-offset: 0;
}
div.wpcf7-mail-sent-ok {
    border: 0;
    background: #5471de;
    color: #fff;
    padding: 2rem;
}
div.wpcf7-acceptance-missing,
div.wpcf7-validation-errors {
    border: 0;
    background: #f9443b;
    color: #fff;
    padding: 2rem;
}
span.wpcf7-not-valid-tip {
    color: #f9443b;
    text-align: center;
}
/* 
** Button Styles 
*/
.wpcf7-form .submit-btn {
    background-color: var(--blue);
    border-radius: 2rem;
    -moz-border-radius: 2rem;
    -webkit-border-radius: 2rem;
    color: var(--white);
    transition: background .3s ease-in-out;
    font-weight: 900;
    padding: 1rem;
    width: 7rem;
}


.wpcf7-form .submit-btn:hover {
    cursor: pointer;
}

.wpcf7-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--black);
  font-size: 1rem;
 
}
.wpcf7-form ::-moz-placeholder { /* Firefox 19+ */
  color: var(--black);
  font-size: 1rem;
 
}
.wpcf7-form :-ms-input-placeholder { /* IE 10+ */
  color: var(--black);
  font-size: 1rem;
 
}
.wpcf7-form :-moz-placeholder { /* Firefox 18- */
  color: var(--black);
  font-size: 1rem;
 
}

.wpcf7-form .wpcf7-list-item{
    text-align: center;
    display: block;
}

.wpcf7-form .form-wrapper input.form-acceptance {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wpcf7-form .form-wrapper .wpcf7-list-item-label {
    font-size: 1rem
    color: var(--black);
    position: relative;
}

.wpcf7-form .form-wrapper .acceptance-fieldset .wpcf7-list-item-label:before {
    content: '';
    display: inline-block;
    vertical-align: text-top;
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    top: 0px;
    left: 0;
    background-color: var(--blue);
    position: absolute;
    left: -31px;
}

.wpcf7-form .form-wrapper .acceptance-fieldset input:checked+.wpcf7-list-item-label:after {
    opacity: 1;
    position: absolute;
    left: -1.7rem;
    top: 0.25rem;
    background: var(--white);
    width: 0.8rem;
    height: 0.8rem;
}

.wpcf7-form .form-actions{
    margin: 1rem 0;
    text-align: center;
}


.wpcf7-spinner{
    display: block;
}

.wpcf7 .wpcf7-submit:disabled{
    background: var(--blue);
    cursor: not-allowed;
  pointer-events: all !important;
}

/* 404
--------------------------------------------- */

.error-404{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--dark-blue);
}

.error-404 .page-content .button{
    margin: 2rem 0 0 0;
    background: var(--white);
    color: var(--font-black);
}

.error-404 .page-content p{
    color: var(--white);
    font-size: 4rem;
    text-align: center;
}

/* Page Template Default

--------------------------------------------- */

.privacy-policy header{
    background: var(--dark-blue);
    position: static;
}

.privacy-policy .site-main{
    padding: 1rem 0;
}


/* Single Page

--------------------------------------------- */

.single-offer .shape-1{
    position: absolute;
    width: 44rem;
    right: -339px;
    top: -22rem;
    z-index: -1;
}

.single-offer .site-main{
    overflow: unset;
}


.hero-image {
    position: relative;
    min-height: 350px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.single-offer-content{
    padding: 6rem 0 6rem 0;
}


.single-offer-sidebar-link{
    display: flex;
    padding: 1rem 1rem;
    border-bottom: 0.1rem solid var(--lighter-gray); 
    font-size: 1.2rem;
}

.single-offer-sidebar{
   position: -webkit-sticky;
    position: sticky;
   top: 7rem;
  align-self: flex-start
}


.single-offer-sidebar-link:hover{
    background: var(--lighter-gray);
    border-right: 0.9rem solid var(--blue);
     -webkit-transition: background 0.7s ease-out;
      -moz-transition: background 0.7s ease-out;
      -o-transition: background 0.7s ease-out;
      transition: background 0.7s ease-out;
}

.single-offer-sidebar-link.active{
    background: var(--lighter-gray);
    border-right: 0.9rem solid var(--blue);
}

.single-offer-text{
    padding: 0rem 0rem 0rem 8rem;
}

.single-offer-text-header{
    margin-bottom: 4rem;
}

table th{
    text-transform: uppercase;
    font-size: 1.2rem;
}

table tr{
    padding: 1rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

table thead tr:first-child{
    background: var(--logo-color);
}

table tr:nth-child(even){
    background: var(--lighter-gray);
}

table tr td:nth-child(n+1){
    width: 62%;
}

table tr td:nth-child(n+2){
    width: 35%;
    text-align: right;
}

/* Pricelist

--------------------------------------------- */

.pricelist{
    padding: 6rem 0 2rem 0;
}

.pricelist-row {
    padding: 0rem 0rem 4rem 0rem;
}

.pricelist .shape-1{
        position: absolute;
    width: 60rem;
    right: -367px;
    top: -24rem;
    z-index: -1;
}

/* Contact

--------------------------------------------- */

.google-map {
     filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(99%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
  border-radius: 2rem;
  padding: 0px;
}

.contact{
    padding: 6rem 0 2rem 0;
    text-align: center;
}


.contact h2:after{
    display: none;
}


.contact p{

    margin: 0.4rem 0;
}

.contact img {
    width: 1.5rem;
    margin: 0rem 0.4rem;
}

.contact h5{
        margin-top: 4rem;
}

.contact .contact-box{
    padding: 2rem 0rem 0rem 0rem;
    font-size: 2rem;
    text-align: center;
}

.contact .contact-box p{
    margin: 1.2rem 0;
}

.contact .contact-box a{
    color: var(--black);
}

.contact .shape-1{
        position: absolute;
    width: 60rem;
    right: -367px;
    top: -24rem;
    z-index: -1;
}


/* Metamorfoza */

.metamorfozy {
    padding: 4rem 0;
    background: #f8f9fa;
}

.metamorfozy-item {
    margin-bottom: 4rem;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.metamorfozy-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #333;
    font-weight: 600;
}

/* Before/After Slider */
.before-after-slider {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 400px;
    cursor: grab;
}

.slider-container:active {
    cursor: grabbing;
}

.before-image-container,
.after-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.before-image-container img,
.after-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.after-image-container {
    clip-path: inset(0 50% 0 0);
}

.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #fff;
    transform: translateX(-50%);
    z-index: 10;
    cursor: ew-resize;
    will-change: left, transform;
    transition: none !important;
}

.slider-line {
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    color: #666;
}

.slider-button svg {
    width: 16px;
    height: 16px;
}

.image-label {
    position: absolute;
    bottom: 15px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
}

.before-label {
    left: 15px;
    background: rgba(231, 76, 60, 0.9);
}

.after-label {
    right: 15px;
    background: rgba(39, 174, 96, 0.9);
}

.metamorfozy-description {
    padding: 2rem;
}

.metamorfozy-description p {
    margin-bottom: 1.5rem;
}

.metamorfozy-description h3,
.metamorfozy-description h4 {
    color: #333;
    margin-bottom: 1rem;
}