/*
Theme Name: Winnica Złota
Author: hokito
Version: 1.0
*/

html {
  scroll-behavior: smooth;
}



  *{
      box-sizing: border-box;
  }
body {
    margin: 0;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    color:#1D1D1B;
    background-color: #F9F7F1;
    letter-spacing: -1px;
}

header {
    width: 100%;
    display: block;
    padding: 30px 0;
    position: absolute;
    z-index: 99999;
}

container {
    max-width: 1320px;
    margin: 0 auto;
    display: block;
    padding: 0 20px;
}

div#striptop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    max-width: 200px;
}

nav ul {
    list-style-type: none;
    display: flex;
    gap: 0 40px;
    padding-left: 0;
    align-items: center;
}

a { 
    color: inherit;
    text-decoration: none;
}

ul li a{
  font-size: 18px;
  color:#fff;
} 

.hero-banner {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 20px;
    max-width:1280px;
    margin:0 auto;
}

.hero-btn {
    display: inline-block;
    padding: 19px 47px;
    background: rgb(255 255 255 / 24%);
    color: #fff;
    text-decoration: none;
    margin-top: 40px;
    font-size: 18px;
    color: #fff;
    border-radius: 70px;
    border: 1px solid #fff;
}

.hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
20deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.hero-content h1 {
    font-size: 88px;
    font-weight: 300;
}

p.hero-slogan {
    font-size: 58px;
    font-weight: 300;
}

span.second-word {
    font-family: "Lora", serif;
    font-style: italic;
    font-size: 58px;
}

section#nasze-wina {
    width: 100%;
    float: left;
}

.header-and-text {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 50px 0;
    margin-top: 60px;
}

.header-and-text .header {
    width: 30%;
    float: left;
    font-weight: 300;
    font-size: 52px;
}

.header-and-text .text {
    width: 66.6%;
    float: left;
    font-size: 17px;
}

.our-vines {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 60px 0;
    margin-top: 30px;
}

.our-vines .vino-card {
    width: 100%;
    display: flex;
    align-items: center;
}

.vino-image {
    width: calc(50% - 30px);
    height: 450px;
    margin-right: 30px;
    float: left;
}

.vino-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vino-details {
    float: left;
    width: calc(50% - 30px);
    margin-left: 30px;
}

h3.vino-title {
    font-size: 30px;
    font-weight: 300;
}

p.vino-grape {
    font-family: 'Lora';
    font-size: 20px;
    font-style: italic;
}

p.vino-description {
    font-size: 17px;
    margin-top: 20px;
    letter-spacing: 0;
}


.gallery {
    float: left;
    width: 100%;
    margin: -113px 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px
}

.gallery .image {
    width: calc(50% - 13px);
    overflow: hidden;
    height: 430px
}

.gallery .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s
}

.gallery .image:hover img {
    transform: scale(1.05)
}


p.header-gallery {
    font-size: 240px;
    font-weight: 300;
    color: #E0DED7;
    text-align: center;
    width: 100%;
    margin-top: -20px;
}

section#galeria {
    margin: 80px 0 50px;
    float: left;
    width: 100%;
    padding-top: 0px;
    text-align: center;
}

#galeria container {
    border-top: 1px solid #E5E0D2;
}


p.header-gallery {position: relative;z-index: -1;letter-spacing: -11px;}





.lb-data .lb-close,.lb-nav {
    position: absolute
}

#lightbox {
    position: fixed;
    top: 80px!important
}

.lightbox .lb-image {
    border: none!important;
    height: auto!important;
    width: auto!important;
    max-width: 70vw!important;
    margin: 0 15vw!important;
    max-height: 80vh!important
}

.lb-nav a.lb-next,.lb-nav a.lb-prev {
    opacity: 1!important;
    z-index: 9999!important;
    position: absolute!important;
    top: calc(50% - 10px)!important;
    background: url(/wp-content/uploads/2026/01/next-white.png) center/cover no-repeat!important;
    width: 35px!important;
    height: 35px!important;
    opacity: .7!important
}

.lb-nav {
    left: 0;
    width: 100%
}

.lb-outerContainer {
    height: calc(100vh - 160px)!important;
    width: auto!important;
    background: 0 0!important
}

.lb-container {
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

span.lb-number {
    display: none!important
}

.lb-data .lb-close {
    top: -50px;
    right: 50px
}

.lb-nav a.lb-next {
    right: 55px!important
}

.lb-nav a.lb-prev {
    left: 55px!important;
    transform: rotate(180deg)
}

.lb-nav a.lb-next:hover,.lb-nav a.lb-prev:hover {
    opacity: 1!important
}

.lb-loader {
    display: none!important
}





button#loadMoreGallery {
    color: #C09100;
    border: 1px solid #C09100;
    border-radius: 70px;
    background: none;
    font-size: 18px;
    font-family: 'Jost';
    padding: 19px 45px;
    cursor:pointer;
    margin-top: 20px;
}



header.fix {
    position: fixed;
    background: rgb(192 145 0 / 95%);
    padding: 10px;
    z-index: 999999;
}

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

.about .header-and-text .text {
    width: 55%;
    margin-left: 80px;
}

.image-and-video {
    float: left;
    width: 100%;
    display: flex;
    align-items: end;
}

.image-and-video .im {
    position: absolute;
}


.about .row {
    width: 100%;
    float: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 100px 0;
}

.about .row .im {
    width: 30%;
    height: 575px;
}

.about .row .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about .row .text {
    width: 55%;
    float: left;
    margin-left: 80px;
}

.row h2 {
    font-size: 52px;
    font-weight: 300;
}

.row .text p {
    font-size: 17px;
    margin-top: 20px;
    /* line-height: 25px; */
}

.about .second.row {
    margin: 0;
    justify-content: space-between;
}

.about .row.second .text {
    margin-left: 50px;
    width: calc(50% - 120px);
    margin-right: 70px;
}

.about .row.second .im {
    width: calc(50% - 60px);
    margin-right: 40px;
    margin-left: 20px;
}

.quote {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px 0;
    float: left;
    flex-wrap: wrap;
    border-bottom: 1px solid #E5E0D2;
    padding-bottom: 100px;
}

.quote-icon {
    width: 100%;
    text-align: center;
}

.quote-text {width: 100%;text-align: center;font-size: 52px;font-weight: 300;margin-top: 20px;letter-spacing: -1px;}

.ob-sw {
    position: relative;
    margin-left: calc((100vw - 1300px) / 2 + 24px);
    padding-right: 0;
}


.boxes {
    cursor: grab;
    margin: 50px 0 0px;
    width: 100%;
}


.in-ss .image {
    height: 460px;
}

.in-ss .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.odmiany .header-and-text {
    margin-top: 0;
    padding-top: 0;
}
section {
    width: 100%;
    float: left;
}.in-ss .name {
    font-size: 30px;
    font-weight: 300;
    margin: 25px 0 0;
}

.in-ss p.desc {
    font-size: 17px;
    margin-top: 20px;
    letter-spacing: 0;;
}

#nasze-wina .header-and-text {
    border-top: 1px solid #E5E0D2;
    margin-top: 100px;
    padding-top: 100px;
}


p {
    letter-spacing: 0;
}

.quote-text p {
    letter-spacing: -1px;
}
.swiper-wrapper {
    height: auto !important;
}
video#heroVideo {
    width: 100%;
    height: 100%;
}

.left-and-right {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #FFFCF4;
}

.left-and-right div.left {width: 50%;padding: 20px 70px 20px 100px;}

.left-and-right div.image {
    width: 50%;
    float: left;
}

.left-and-right div.image .im {
    width: calc(100% - 10px);
    height: 400px;
    margin-left: 10px;
}

.left-and-right div.image .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buy h3 {
    font-size: 53px;
    font-weight: 300;
    letter-spacing: 0;
}

.buy p.text {
    font-size: 17px;
    margin-top: 20px;
}
section#gdzie-kupic {
    padding-top: 50px;
}


.video-wrapper {
    position: relative;
    height: 500px;
    float: right;
    position: relative;
    margin-left: calc(30% + 80px);
    width: 66.6%;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* tylko wizualne ukrycie */
.video-overlay.hidden {
    opacity: 0;
}


#nasze-wina .header-and-text {
    margin-top: 0;
}

section#odmiany {
    padding-bottom: 100px;
    padding-top: 100px;
}

.quote {
    margin-bottom: 0;
}

section {
    scroll-margin-top: -35px;
}

section#kontakt {
    /* width: 100%; */
    /* float: left; */
}

#kontakt container {
    position: relative;
    margin-right: calc((100vw - 1345px) / 2 + 24px);
    padding-right: 0;
    max-width: unset;
    padding: 0;
}

#kontakt .left-and-right .im {
    padding-left: 0;
    margin-left: 0;
    height: 800px;
}

#kontakt .image {
    width: calc(50vw - 110px);
    margin-right: 70px;
}

#kontakt .left-and-right {
    background: none;
    padding: 100px 0;
}

#kontakt .left-and-right .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#kontakt .right h3 {
    font-size: 52px;
    font-weight: 300;
}

.contact-data {
    display: flex;
    gap: 20px 50px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.contact-data p {
    font-size: 30px;
    font-s\: ;
    font-weight: 300;
    border-bottom: 1px solid #C09100;
    padding-bottom: 5px;
}

input, textarea {
    border: 1px solid #D2CBB7;
    background: none;
    color: #1D1D1B;
    font-size: 16px;
    width: 100%;
    padding: 13px;
    font-family: 'Jost';
}

#kontakt .right {
    /* width: calc(50% - 125px); */
    flex: 1;


}

.form {
    margin-top: 30px;
}

textarea {
    height: 180px;
}
input::placeholder, textarea::placeholder{
    color: #1D1D1B;
    font-size: 16px;
    font-family: 'Jost';

}

span.wpcf7-list-item {
    margin: 0;
    cursor: pointer;
}

input[type="checkbox"] {
    float: left;
    width: auto;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
}

span.wpcf7-form-control-wrap {
}

span.wpcf7-form-control.wpcf7-acceptance {
    margin: 20px 0;
    float: left;
    width: 100%;
}

input.wpcf7-form-control.wpcf7-submit {
    color: #C09100;
    border: 1px solid #C09100;
    border-radius: 70px;
    background: none;
    font-size: 18px;
    font-family: 'Jost';
    padding: 19px 45px;
    cursor: pointer;
    margin-top: 20px;
    width: auto;
}

span.wpcf7-form-control.wpcf7-acceptance span.wpcf7-list-item-label {
    cursor: pointer;
}

.wpcf7-response-output {
    padding: 20px 20px !important;
    font-size: 15px;
    letter-spacing: 0;
}

footer {
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

footer .left {
    float: left;
    /* display: flex; */
    /* align-items: center; */
}

.logo-and-sm {
    display: flex;
    gap: 0 60px;
    align-items: center;
}

footer .right {
    float: right;
}

footer .pp {margin-top: 40px;letter-spacing: 0;}

footer .sm a {border-radius: 100%;width: 50px;height: 50px;border: 1px solid #C09100;float: left;display: flex;justify-content: center;align-items: center;background: rgb(192 145 0 / 10%);margin-right: 20px;}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    margin-top: 21px;
}

footer .pp a {
    color: rgb(29 29 27 / 50%);
}

.footer-menu ul {
    width: 100%;
    display: flex;
    gap: 0 40px;
}

.footer-menu ul li {
    float: left;
}

.footer-menu ul li a {
    color: #1D1D1B;
    font-size: 18px;
}

footer .contact-data p {
    font-size: 20px;
}

footer .contact-data {
    justify-content: end;
    margin-top: 50px;
}

#kontakt .left-and-right {
    padding-bottom: 70px;
}

section.header-pp {
    height: 25vw;
    min-height: 400px;
    max-height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
}

.header-pp h1 {
    color: #fff;
    width: 100%;
    font-size: 68px;
    font-weight: 300;
    margin-top: 60px;
}

.header-pp container {
}

section.header-pp container {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.content-pp {
    margin: 50px 0;
    float: left;
}

.content-pp container {
    max-width: 1050px;
}

.content-pp container p {
    margin: 25px 0;
}

ul li a:after,
footer .pp a:after{
    width: 0%;
    position: absolute;
    left: 0;
    content: '';
    background: #c09100;
    transition: 0.5s;
    height: 1px;
    bottom: -1px;
}

ul li a,
footer .pp a{
    position: relative;
}

ul li a:hover:after,
footer .pp a:hover:after{
    width: 100%;
}

nav ul li a:after {
    background: #fff;
}

footer .sm a {
    transition: 0.5s;
}

footer .sm a:hover {
    background: transparent;
}


button#loadMoreGallery,
.hero-btn{
    transition: 0.5s;
}

button#loadMoreGallery:hover,
.hero-btn:hover{
    background: rgb(192 145 0 / 10%);
}

ul li.fb a:after {
    display: none;
}

li.fb a {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(217 217 217 / 32%);
    margin-right: 20px;
    transition: 0.5s;
}

li.fb a:hover {
    background: none;
}


#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #C09100;
    border: 2px solid #C09100
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:last-of-type) {
    border: 2px solid #C09100;
    background: #fff;
    color: #C09100
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-color: #C09100;
    color: #C09100
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
    color: #C09100
}

#CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background: #C09100
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color: #C09100!important;
    border-color: #C09100!important
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #C09100!important;
    border-color: #C09100!important
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:last-of-type) {
    background: #fff;
    border-color: #C09100;
    color: #C09100
}

button#CybotCookiebotDialogBodyButtonDecline {
    background: #fff!important;
    color: #C09100!important;
    border-color: #C09100!important
}

button#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    color: #fff!important
}


.hero-content {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

.hero-content h1, .hero-content p {
    width: 100%;
}

section.hero-banner {
    min-height: 650px;
    max-height: 1500px;
}

.odmiany .header-and-text .header {
    width: 100%;
}



.ham.cur {
    width: 35px;
    margin-top: 0;
    right: 20px;
    display: none;
    position: absolute;
    top: 35px
}

.ham.cur span {
    background: #fff
}

.ham:hover span:first-child {
    width: 25%
}

.ham:hover span:nth-child(2) {
    width: 50%
}

.ham:hover span:nth-child(3) {
    width: 75%
}

.ham span{
    width: 100%;
    float: right;
    width: 100%;
    height: 1px;
    margin: 4px 0;
    transition: .5s;
    clear: both
}

.ham span {
    margin: 4px 0;
    transition: .5s;
    clear: both
}

.ham span:nth-child(3) {
    margin-bottom: 0;
    width: 100%
}



 .content-pp container {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding: 0px 20px 60px;
    font-family: system-ui, Arial, sans-serif;
    line-height: 1.7;
    color: #333;
    font-size: 18px;
}

/* Nagłówki */
 .content-pp container h1,
 .content-pp container h2,
 .content-pp container h3 {
    margin-top: 40px;
    margin-bottom: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: #111;
}

 .content-pp container h1 {
    font-size: 28px;
}

 .content-pp container h2 {
    font-size: 22px;
}

 .content-pp container h3 {
    font-size: 18px;
}


 .content-pp container div {
    margin-bottom: 20px;
    margin-top: 20px;
}

 .content-pp container strong,
 .content-pp container b {
    font-weight: 700;
    font-size:28px
}

 .content-pp container em,
 .content-pp container i {
    font-style: italic;
}

 .content-pp container a {
    color: #8B6B2E;
    text-decoration: underline;
    transition: 0.2s;
}

 .content-pp container a:hover {
    opacity: 0.7;
}

 .content-pp container div {
    word-break: break-word;
}

@media (max-width: 768px) {

     .content-pp container {
        padding: 40px 18px;
        font-size: 15px;
    }

     .content-pp container h1 {
        font-size: 24px;
    }
.content-pp container {
    padding-top: 0;
}

section.content-pp {
    margin-top: 20px;
}

.content-pp container {
    font-size: 18px;
}
}







@media all and (max-width:1400px){
    .ob-sw {
    margin-left: 20px;
}


#kontakt container {
    margin-right: 20px;
}
}


@media all and (max-width:960px){
.hero-content h1 {
    font-size: 70px;
}

p.hero-slogan {
    font-size: 45px;
}

span.second-word {
    font-size: 42px;
}

.about .row .text {
    margin-left: 30px;
    width: calc(60% - 30px);
}

.about .row .im {
    width: 40%;
}

.about .row.second .text {
    margin-left: 0;
    margin-right: 30px;
    width: calc(50% - 30px);
}

.quote-text {
    font-size: 40px;
}

.odmiany .header-and-text .header {
    width: 100%;
}

.vines .header-and-text .text {
    margin-left: 110px;
}

.vino-image {
    margin-right: 10px;
    width: calc(50% - 10px);
}

.vino-details {
    width: calc(50% - 10px);
    margin-left: 10px;
}

p.header-gallery {
    font-size: 150px;
}

.gallery {
    margin-top: -70px;
}

.left-and-right div.left {
    padding: 50px 20px;
}
#kontakt .left-and-right div.image .im {
    display: none;
}
#kontakt container{
    margin-right:0;
}
#kontakt .right {
    width: 100%;
    margin: 0 20px;
    flex:unset;
}
.left {
    width: 100%;
}

.logo-and-sm {
    width: 380px;
}

footer .pp {
    width: calc(100% - 380px);
    float: right;
    margin-top: 0;
    text-align: right;
}
footer .left {
     display: flex; 
    align-items: center;
}
nav ul {
    gap: 0 30px;
}
}

@media all and (max-width:768px){
    .footer-menu {
    margin-top: 60px;
    width: 100%;
}

footer .right {
    width: 100%;
}

footer .contact-data {
    justify-content: start;
}

footer .pp {
    display: none;
}

.header-and-text .header {
    width: 100%;
}

.header-and-text {
    flex-wrap: wrap;
}

.about .header-and-text .text {
    width: 100%;
    margin: 20px 0;
}

.header-and-text {
    padding-top: 30px;
    margin-top: 30px;
    padding-bottom: 30px;
}

.header-and-text .header {
    font-size: 45px;
}

.image-and-video .im {
    display: none;
}

.video-wrapper {
    width: 100%;
    margin: 0;
}

.about .row.second .im {
    margin-right: 0;
    width: calc(50% - 20px);
}

.row h2 {
    font-size: 45px;
}

.quote-text {
    font-size: 35px;
}

.in-ss .name {
    font-size: 27px;
}

section#odmiany {
    padding: 60px 0;
}

.header-and-text {
}

#nasze-wina .header-and-text {
    padding-top: 60px;
}

.vines .header-and-text .text {
    margin-left: 0;
    width: 100%;
}

.vino-image {
    width: 100%;
    margin: 0;
}

.our-vines .vino-card {flex-wrap: wrap;}

.vino-details {
    width: 100%;
    margin: 30px 0 0;
    border-bottom: 1px solid #f3e3bd;
    padding-bottom: 50px;
}

section#galeria {
    margin: 20px 0 0;
    padding-top: 0;
}

#galeria container {
    border: 0;
}

p.header-gallery {
    font-size: 100px;
    letter-spacing: -4px;
}

.gallery {
    margin-top: -50px;
}

.buy .left-and-right div.left {
    width: 100%;
}

.buy .left-and-right div.image {
    width: 100%;
}

.buy .left-and-right div.image .im {
    margin: 0;
    width: 100%;
}
.buy h3,
#kontakt .right h3 {
    font-size: 45px;
}
.in-ss .image {
    height: 350px;
}

.gallery .image {
    height: 350px;
}

li.fb {
    display: none;
}

.ham.cur {
        display:block
    }

    nav {
        position: absolute;
        top: 90px;
        z-index: 999999;
        width: 200px;
        right: 20px;
        display: none;
        background: rgb(192 145 0 / 10%);
        height: calc(100vh - 120px);
        min-height: 280px;
        padding-bottom: 20px;
    }

    header nav li {
        width: calc(100% - 40px);
        margin: 0 20px 15px;
        text-align: right;
    }

    header nav ul {
        width: 100%;
        flex-wrap: wrap;
        margin: 20px 0 0;
        height: 100%;
    }

    header nav li a,header nav li a:hover {
        color: #fff
    }

    header nav li a span {
        color: #fff;
        background: #fff
    }

nav {
    transition: 0.5s;
}

nav.show {
    right: 20px;
}

nav {
    right: -300px;
}

body {
    overflow-x: hidden;
}

    .header-pp h1 {font-size: 50px;}
}


@media all and (max-width:600px){

.gallery .image {
    height: 300px;
} 

.hero-content h1 {
    font-size: 60px;
}

.footer-menu ul li {
    width: 100%;
}

.footer-menu ul {
    flex-wrap: wrap;
    text-align: left;
    gap: 10px 0;
}

footer .left {
    justify-content: start;
    flex-wrap: wrap;
}

.logo-and-sm {
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
}

.logo-and-sm .logo {
    width: 100%;
    text-align: left;
    margin-bottom: 50px;
}

.footer-menu {
    margin-top: 35px;
}

footer .contact-data {
    flex-wrap: wrap;
}

footer .contact-data p {
    width: 100%;
    text-align: left;
    border: 0;
}

footer .contact-data p a {
    border-bottom: 1px solid #C09100;
}

nav {
    background: rgb(155 136 78 / 99%);
}
    footer .pp {
        display: block;
        text-align: left;
        width: 100%;
        margin-top: 50px;
    }
}
@media all and (max-width:500px){

.gallery .image {
    height: 300px;
} 
.gallery .image {
    width: 100%;
}
.about .row.second .text {
    width: 100%;
    margin: 0;
}

.about .row.second .im {
    width: 100%;
    margin: 50px 0;
}

.quote {
    margin-top: 50px;
    padding-bottom: 60px;
}


.about .row .im {
    width: 100%;
    margin-top: 30px;
}

.about .row .text {
    width: 100%;
    margin: 0;
}

.first.row {
    flex-direction: column-reverse;
    margin: 50px 0;
}
.hero-content h1 {
    font-size: 50px;
}

p.hero-slogan {
    font-size: 38px;
}

span.second-word {
    font-size: 38px;
}
}