/*
Theme Name: My Awesome Theme
Theme URI: https://www.myawesometheme.com
Author: John Doe
Author URI: https://www.johndoe.com
Description: My Awesome Theme is a responsive, modern, and feature-rich WordPress theme designed for all kinds of websites. It comes with a custom homepage layout, multiple widget areas, and full compatibility with popular plugins.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: my-awesome-theme
Tags: responsive, modern, custom-background, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

:root {
    --light: #FBFBFB;
    --blue: #00A0C8;
    --dark: #041124;
}

@media only screen and (max-width: 768px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    color: #041124; 
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--blue);
}
footer a {
color: var(--dark);
}
a:hover {
color: var(--dark);
}
footer a:hover {
    color: var(--blue);
}

p,li {
    line-height: 1.5;
}

ul {
    padding-left: 1rem;
}

.hour {
    color: var(--blue);
    font-size: 1.75rem;
}
#logo {
    transition: all ease-in-out 0.3s;
}
#logo:hover {
    scale: 1.1;
}
h1, h2 {
    font-size: 3rem;
    position: relative;
    padding-bottom: 1rem;
    font-family: "Bebas Neue", sans-serif;
    margin-top: 0; 
}
h1, .choose h2, .choose-p h2 {
    opacity: 0;
}
.hero h1 {
    text-shadow: 1px 1px 15px rgba(4, 17, 36, 0.4);
    
}
h1.visible, .choose h2.visible, .choose-p h2.visible {
    animation: hello 1s ease-in-out forwards;
    transform: translateX(-20px);
      opacity: 0;
      animation-delay: 0.3s;
}
.page h1 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.transition-p {
    animation: hello 1s ease-in-out forwards;
    transform: translateX(-20px);
      opacity: 0;
      animation-delay: 0.6s;
}
.hero .wp-block-buttons {
    animation: hello 1s ease-in-out forwards;
    transform: translateX(-20px);
      opacity: 0;
      animation-delay: 0.9s;
}

@keyframes hello{
    0% {
        opacity: 0;
    }
    100% {

        opacity: 1;
        transform: translateX(0);
    }

}
.page-titlet p {
    margin: 0;
}

h3 {
    font-size: 2rem;
    font-family: "Bebas Neue", sans-serif;
    position: relative;
}
.button, input[type=submit],.wp-block-button__link {
    display: inline-block;
    padding: 15px 25px;
    color: #fff!important;
    background-color: var(--dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.3rem;
    border-radius: 4px;
}

.button:hover, input[type=submit]:hover, .wp-block-button__link:hover {
    background-color: hsl(0, 0%, 0%, 0);
   outline: 2px solid var(--dark);
   outline-offset: 1px;
    color: var(--dark)!important;
}
.hero .wp-block-button__link:hover {
    outline: 2px solid var(--light)!important;
    outline-offset: 1px;
    color: var(--light)!important;
}

.full-wide {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-bottom: 0;
}
/***/
#hamburger {
    display: none;
}
.hero {
    background-image: url("img/heropic.webp");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    color: #fff;
}
.hero .wp-block-group__inner-container {
    padding: 120px 60px;
}

.choose, .choose-p {
    padding: 140px 60px 60px 60px;
    background-color: var(--light);
    position: relative;
}
.choose h2::before, .choose-p h2::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 200px;
    display: block;
    width: 250px;
    border: 0.5px solid var(--dark);
}

.choose::before {
    content: "";
    position: absolute;
  right: 0px;
  bottom: 0px;
    display: block;
    width: 200px;
    border: 0.5px solid var(--dark);
}
.choose-p::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 200px;
    border: 0.5px solid var(--dark);
}

.card {
    background-color: var(--light);
    border-right: 1px solid var(--dark);
}

.h3-line::before {
    content: "";
    position: absolute;
    bottom: 0px;
    display: block;
    width: 250px;
    border: 0.5px solid var(--dark);
}
.card-2 {
    background-color: var(--light);
    border-left: 1px solid var(--dark);
    padding-left: 40px;
}
.services .wp-block-column img {
    min-width: 100%;
}
.services .wp-block-column figure {
    margin-bottom: 0;
}
.helyszinek {
    background-color: var(--light);
    padding: 120px 60px;
}
.helyszinek::before {
    content: "";
    position: absolute;
  right: 0px;
  top: 0px;
    display: block;
    width: 200px;
    border: 0.5px solid var(--dark);
}
body .helyszin-pic {
    display: block;
    column-count: 4;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.helyszin-pic img {

}
.helyszinek .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


.wp-element-caption sub {
    color: var(--light);
    text-shadow: 0px 4px 4px rgba(0,0,0,0.25);
    font-size: 32px;
    font-family: "Bebas Neue", sans-serif;
}
.wp-element-caption {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.contact-form {
    background: url("img/hatterprofence-2.webp");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 40px;
}
.contact-panel {
background-color: var(--light);
max-width: 800px;
padding: 90px 150px;
align-content: center;
text-align: center;
margin: 0 auto;
box-shadow: 0px 4px 15px rgba(0,0,0,0.15);
}

input[type=text], 
input[type=tel],
input[type=email], textarea, select {
background-color: #fff;
border: 2px solid #F5F5F5;
padding: 0.5rem;
border-radius: 10px;
margin-bottom: 1rem;
width: 100%;
color: var(--dark);
outline: none;
font-family: "Montserrat", sans-serif;
font-size: inherit;
}
.wpcf7-spinner {
    width: 100%;
}
.wpcf7-submit:hover {
  border: none;
  outline-offset: 0;
}
.oszlop-o {
    display: flex;
 justify-content: center;
}
.oszlop {
    background-color: var(--light);
    border-top: 1px solid var(--dark);
    padding: 60px 0 20px 60px;
    max-width: 500px;
}
.oszlop h2 {
    font-size: 2rem;
}
.page-titlet {
    margin-top: 120px;
    margin-left: 60px;
    }
.page-pic img {
    height: 100%;
    }

.page-template-page-aloldal h1 {
margin: 30px 0;
}
.page-template-page-aloldal h2 {
    font-size: 2.5rem;
    padding-bottom: 0;
    padding-top: 15px;
}

footer figure {
margin-top: 32.171px;
transition: all ease-in-out 0.3s;
}
footer figure:hover {
    scale: 1.1;
}
footer {
    border-top: solid 1px rgba(4, 17,36, 0.5);
}
footer li {
    list-style: none ;
    padding-bottom: 15px;
}
footer p {
    font-family: "Bebas Neue", sans-serif;
}
footer .widget:last-of-type {
    width: 100%;
}
footer ul {
    padding-left: 0;
}



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

    #hamburger {
        display: block;
    }
  
    .choose h2::before, .choose-p h2::before {
        width: 120px;
    }
    .choose h2, .choose-p h2 {
        font-size: 2.3rem;
    }
    .service-text {
        padding: 0 20px 20px 20px;
    }
  
    .card-2 {
        padding-left: 0;
    }
    .wp-block-spacer {
        height: 30px!important;
    }
    .choose, .choose-p, .helyszinek {
      padding: 60px 40px;
    }
    .hero .wp-block-group__inner-container{
        padding: 90px 40px;
    }
    .hero h1, h2{
        padding-bottom: 0;
    }
    body .helyszin-pic {
        column-count: 2;
    }
    body .helyszin-pic figure {
        margin-bottom: 10px!important;
    }
    .contact-panel {
        padding: 40px;
    }
    h3 {
        font-size: 1.5rem;
    }
    .icons p {
    font-size: 13px;
    }
    :where(.wp-block-columns.is-layout-flex) {
        gap: 1.5em;
    }
    
}
@media only screen  and (max-width: 768px) {
    .order-change {
        order: 2;
    }
    .page-titlet {
        margin-top: -200px;
        margin-left: 40px;
        color: var(--light);
        text-shadow: 1px 1px 15px rgba(4, 17, 36, 0.6);
        }
        .page-pic img {
            height: 100%;
        }
}

@media only screen  and (max-width: 480px) {
    #logo svg {
        max-width: 180px;
    }
    .order-change {
        order: 2;
    }
    .hero {
        max-height: 400px;
        min-height: 400px;
        background-position-x: -70px;
    }
    .hero .wp-block-group__inner-container {
        padding: 80px 20px;
    }
    .choose, .choose-p, .helyszinek {
        padding: 60px 20px;
      }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    .wp-element-caption sub {
        font-size: 2rem;
    }
    .contact-panel {
        padding: 20px;
    }
    .contact-form {
        padding: 40px 10px;
    }
  
    body .helyszin-pic {
        column-count: 1;
    }
    .page-titlet {
        margin-top: -140px;
        margin-left: 20px;
        }
        .page-pic img {
            height: 100%;
        }
    .oszlop {
        padding: 40px 15px 20px 15px;
    }
    :where(.wp-block-columns.is-layout-flex) {
        gap: 0.5em;
    }
}