/*color-primary: #780A28;
color-secondary: #25390B;*/

* {
  box-sizing: border-box;
}

*:focus {
  box-shadow: none;
}

body, html {
  font-size: 16px;
  line-height: 150%;
  margin: 0;
  height: 100%;
  font-family: "Inter";
  background-color: #F4F1F1;
}

.telefon-link{
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}

h1{
  font-size: 55px;
  line-height: 60px;
}

h2{
  font-size: 48px;
  line-height: 120%;
}

h3{
  font-size: 22px;
  line-height: 120%;
  font-weight: 400;
}

ul{
  color:#000000;
}

html{
	scroll-behavior: smooth;
  overflow-x: hidden;
}

#backToTop {
  position: fixed;
  bottom: -60px;
  right: 30px;
  padding: 16px 16px;
  font-size: 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: bottom 0.5s ease;
}

#backToTop.seen{
  bottom: 30px;
  transition: bottom 0.5s ease;
  display: none;
} 

#backToTop:hover {
  background-color: #555;
}

#top-nav{
  position: fixed;
  top: 32px;
  width: 100%;
  z-index: 1000;
  height: 64px;
  text-align: right;
  background-color: transparent;
  transition: color 1s ease, top 1s ease, background-color 1s ease;
  display: flex;
  flex-direction: row;
}

#top-nav.fixed{
	position: fixed;
	top: 0;
	background-color: #EAE0E3;
	transition: color 1s ease, top 1s ease, background-color 1s ease;
}

#top-nav.fixed a{
	transition: color 0.3s ease, font-size 0.3s ease;
  color:#000000;
}

#top-nav.fixed a:hover{
	color:#780A28;
  font-size: 17px;
}

#top-nav .burger{
  height: 100%;
  width: 30px;
  position: absolute;
  right: 20px;
  display: none;
  background-color: transparent;
}

#top-nav .burger img{
  width: 100%;
}

.scrolled{
	background-color: yellow;
}

#top-nav .refs{
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 20px;
	margin-right: 40px;
}

#top-nav .refs a{
  cursor: pointer;
}

a{
  cursor: pointer;
}

p{
	color: #3B3B3B;
}

a {
  color: #780A28;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  transition: color 0.3s ease, font-size 0.3s ease;
  margin-top: 16px;
} 

#about{
  scroll-margin-top: 64px;
  height: auto;
}

a:hover {
  font-size: 18px;
  color: darken(#780A28, 3%);
}

img {
  max-width: 100%;
  display: flex;
}

.logo img{
  display: inline;
}

.container {
  max-width: 100%;/*1200px;*/
  margin: 0 auto;
  position: relative;
  /* padding: 0 20px; */
}

#about .container{
  position: relative;
  display: flex;
  flex-direction: row;
  height: auto;
}

.link-btn{
  color: #6E2020;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 24px;
}

#about .link-btn a {
  position: absolute;
  right: 0;
}

#about .section-head{
  margin: 0;
}

#wina{
  scroll-margin-top: 64px;
  padding-top: 40px;
  padding-bottom: 0;
}

#wina .section-head{
  display: flex;
  flex-direction: column;
}

#wina .section-title{
  margin: 0 auto;
}

#wina .section-title2{
  margin: 8px auto 20px auto;
}

#wina .button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18%;
  margin: 20px auto;
}

#oferta{
  scroll-margin-top: 64px;
}

#oferta .section-title{
  margin: 8px auto 20px auto;
}

#oferta .section-head{
  display: flex;
  flex-direction: column;
}

#oferta .section-head p{
  max-width: 720px;
  font-size: 18px;
  text-align: center;
  padding-bottom: 20px;
}

#features{
  scroll-margin-top: 64px;
}

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin: 0 16px;
}

.section-head-mid{
  display: flex;
  align-items: center;
  padding-top: 1.5rem;
  margin: 0;
}

#features .container{
  padding-left: 4rem;
  padding-right: 4rem;
}

#gallery{
  display: none;
  scroll-margin-top: 64px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}

#gallery .button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18%;
  margin: 20px auto;
}

.dolny-tekst-mobile{
  display: none;
}

#kontakt{
  padding-top: 50px;
  scroll-margin-top: 64px;
  margin-bottom: 40px;
}

#kontakt .section-head{
  margin-left: 80px;
}

#kontakt .section-data{
  display: flex;
  flex-direction: column;
  padding-right: 80px;
  padding-left: 80px;
  gap: 32px;
}

.data-gora{
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 100%;
}

.data-dol{
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.data-dol p{
  text-align: center;
}

#kontakt .formularz{
  width: 50%;
  position: relative;
}

#kontakt .mapa{
  width: 50%;
  position: relative;
}

#kontakt .mapa iframe{
  width: 100%;
  height: 450px;
  border-radius: 0;
}

#kontakt form{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

#kontakt form input{
  font-family: 'Inter';
  border: 1px solid #B0B0B0;
  height: 55px;
  padding-left: 10px;
  font-size: 16px;
  line-height: 150%;
  color: #7E7E7E;
}

#kontakt form textarea{
  font-family: Inter;
  font-size: 16px;
  line-height: 150%;
  color: #7E7E7E;
  border: 1px solid grey;
  height: 157px;
  resize: none;
  padding-left: 10px;
  padding-top: 10px;
}

#kontakt button{
  height: 44px;
  width: 25%;
}

.item {
  background-color: #ddd;
}

/* Style poszczególnych rozmiarów */
.tall {
  grid-row: span 4;
  grid-column: span 2;
}

.high{
  grid-row: span 3;
  grid-column: span 2;
}

.medium {
  grid-row: span 3;
  grid-column: span 3;
}

.small {
  grid-row: span 2;
  grid-column: span 3;
}

.main-splash {
  position:relative;
  display:flex;
  flex-direction: column;
  height: 100vh;
  background-image: url("bg-new.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  cursor: default;
  padding: 80px 40px;
}

#top-nav a {
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 8px;
  color: #f1f1f1;
}

#top-nav a:hover {
  font-size: 18px;
  color: white;
}

#top-nav a.active {
  font-weight: 500;
}

#top-nav .logo{
  width: 120px;
  position: absolute;
  left: 40px;
  top: 0;
}

#top-nav .logo img{
  width: 100%;
}

.page-intro {
  margin: auto;
  text-align: left;
}

.main-title {
  text-align: center;
  margin: 0px;
  font-family: "Newsreader";
  font-weight: 400;
  color: #F8F8F8;
  text-align: center;
}

.main-subtitle {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-family: "Inter";
  font-weight: 400;
  font-size: 22px;
  line-height: 40px;
  color: #F8F8F8;
  text-align: center;
}

.section-title {
  font-family: "Newsreader";
  font-weight: 400;
  color: #780A28;
  cursor: default;
  margin: 0;
}

.statement {
  background-image: url("korki.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 240px;
}

.state2{
  background-image: url("kieliszki.png");
}

.statement .ornament {
  font-size: 48px;
  font-weight: 500;
  text-align: center;
  color:#ffffff;
  font-family: "Newsreader";
}

.button {
  padding: 16px 24px;
  border: 2px solid currentColor;
  font-size: 20px;
  color: #780A28;
  background-color: transparent;
  text-align: center;
    display: flex;
    justify-content: center; /* poziomo */
    align-items: center;
    transition: color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

/* .button:hover { 
  background-color: #780A28; 
  border: 2px solid #780A28;
  color: white;
} */

.section-logo{
  width: 40%;
  max-height: 600px;
  display: flex;
  align-items: center; 
  background-color: #780A28;
}

.section-logo img{   
    max-height: 70%;
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;     
}

.section-text{
  align-items: center;
  width: 60%;
  max-width: 920px;
  padding: 120px 80px;
  display: block;
}

.carousel {
  display: flex;
  flex-wrap: wrap;
  /* align-items: flex-start; */
  /* justify-content: space-between; */
  /* gap: 16px 16px; */
  position: relative;
  height: 1600px;
}

.carousel-2 {
  display: flex;
  flex-wrap: wrap;
  /* align-items: flex-start; */
  /* justify-content: space-between; */
  /* gap: 16px 16px; */
  position: relative;
  height: 1100px;
}

.flip-wrapper{
  display: flex;
  flex-direction: row;
  width: 50%;
  align-items: center;
  justify-content: center;
  /* gap: 4px; */
  position: relative;
  /* padding: 8px 4px; */
  border-radius: 8px;

  /* width: 200px; */
  height: 33.333%;
  margin: 0;
  padding: 0;
  /* perspective: 1000px; efekt 3D */
  cursor: default;
}

.carousel-2 .flip-wrapper{
  height: 50%;
}

.flip-card {
  width: 100%;
  /* width: 200px; */
  height: 100%;
  /* perspective: 1000px; */
  overflow: hidden;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  position: relative;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* Usuwa szary prostokąt przy kliknięciu */
  -webkit-user-select: none;                /* Blokuje zaznaczanie tekstu na Safari */
  user-select: none;
}

@media(hover: none){
  .flip-card-inner.is-flipped{
    transform: rotateY(180deg);
  }

  .statement{
    background-attachment: scroll;
  }
}

@media(hover: hover){
.flip-wrapper:hover .flip-card-inner{
  transform: rotateY(180deg);
}
}

.button:hover { 
  background-color: #780A28; 
  border: 2px solid #780A28;
  color: white;
}


.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* pointer-events: none; */
  background: inherit;
}

.flip-card-front{
  z-index: 2;
  transform: rotateY(0deg) translateY(1px);
}

.card-white-1 p, .card-white-4 p, .card-red p{
  color: #EAE4D6;
}

.card-white-2 p, .card-white-3 p, .card-rose p{
  color: #780A28;
}

.flip-card-front .card-content {
  display: flex;
  align-items: center;
  gap: 8px;        
  padding: 0;
  height: 100%;
  justify-content: center; 
}

.flip-card-back .card-content {
  display: flex;
  align-items: center;
  gap: 0;        
  padding: 0 auto;
  height: 100%;
  justify-content: center; 
}

.flip-card-front .wine-bottle {
  height: 100%;    
  width: auto; 
  object-fit: contain;
}

.flip-card-back .wine-bottle {
  height: 100%;    
  width: auto; 
  object-fit: contain;
}

.wine-bottle{
  position: absolute;
  right: 2rem;
}

/* .back{
  right: auto;
  left: 2rem;
} */

.wine-info {
  text-align: left;
  width: 55%;
}

.drugi{
  background-color: #780A28;
  border-radius: 0;
}

.drugi-jasny{
  background-color: #EAE4D6;
  border-radius: 0;
}

.drugi .wine-info{
  width: 100%;
}

.drugi .wine-info h4{
  text-align: center;
}

.flip-card-back .wine-info{
  text-align: left;
  width: 60%;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.flip-card-back .wine-info-text{
  position: absolute;
  right: 0;
  width: 80%;
}

.flip-card-back .wine-photo{
  margin-right: 0;
  width: 40%;
}

.wine-photo{
  height: 100%;
  width: 45%;
  position: relative;
}

.wine-info h3{
  font-size: 40px;
  font-family: Newsreader;
  line-height: 120%;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.wine-info h4{
  font-size: 24px;
  line-height: 130%;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

.wine-info p{
  font-size: 20px;
  line-height: 130%;
}

.wine-info-text h3,
.wine-info-text h4,
.wine-info-text p {
  margin: 0.5rem 0;
}

.wine-info h3,
.wine-info h4,
.wine-info p {
  margin: 1rem 0;
}

.flip-card-back {
  transform: rotateY(180deg) translateZ(1px);
}

.card-white-4{
  background: #736B56;
  color: #EAE4D6;
}

.card-white-3{
  background: #EAE4D6;
  color: #780A28;
}

.card-white-2 {
  background: #EAE4D6;
  color: #780A28;
}

.card-white-1 {
  background: #736B56;
  color: #EAE4D6;
}

.card-red {
  background: #780A28;
  color: #EAE4D6;
}

.card-rose{
  background: #EDE0DC;
  color: #780A28;
}

.wine-badges {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.badge {
  font-size: 0.9rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* rocznik */
.badge--year {
  background: rgba(255, 255, 255, 0.35); 
  border: 1px solid rgba(0, 0, 0, 0.15); 
  color:#3B3B3B;
}

/* alkohol */
.badge--alcohol {
  background: rgba(255, 255, 255, 0.35); 
  border: 1px solid rgba(0, 0, 0, 0.15); 
  color:#3B3B3B;
}

/* sekcja OFERTA */

#oferta .container .section-head{
  justify-content: space-around;
  flex-direction: column;
  padding-bottom: 60px;
  padding-top: 60px;
}

#oferta .container{
  background-color: #EDECE7;
}

.section-introduction{
  margin-top: 20px;
  text-align: center;
  padding-right: 10%;
  padding-left: 10%;
}

.section-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: auto;
  padding: 0 40px;
}

.section-content{
  display: flex;
  flex-direction: column;
}

.section-content-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: auto;
  background-color: #FBF7F4;
  max-width: 1440px;
}

.section-content-bottom{
  display: none;
  height: 18.75rem;
}

.section-content-top .photo{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 25%;
  background-color:#6E2020;
  overflow: hidden;
}

.section-content-bottom .photo{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 50%;
  background-color:#6E2020;
  overflow: hidden;
}

.one{
  background-image: url("degustacje1.png");
}

.two{
  background-image: url("degustacje2.png");
}

.three{
  background-image: url("firmowe1.png");
}

.four{
  background-image: url("firmowe2.png");
}

.five{
  background-image: url("sezonowe1.png");
}

.six{
  background-image: url("sezonowe2.png");
}

.seven{
  background-image: url("panienski2.png");
}

.eight{
  background-image: url("panienski1.png");
}

.nine{
  background-image: url("sesje1.png");
}

.ten{
  background-image: url("sesje2.png");
}

.eleven{
  background-image: url("kamper1.png");
}

.twelve{
  background-image: url("kamper2.png");
}

.section-content .photo img{
  object-fit: cover;
  object-position: center;
  max-width: 200%;
}

.section-content .description{
  width: 50%;
  align-content: center;
  text-align: center;
  justify-items: center;
  padding-right: 50px;
  padding-left: 50px;
  height: 410px;
}

.section-content h3 {
  font-size: 24px;
  margin-bottom: 30px;
}

.section-content p {
  margin-bottom: 20px;
}

.section-content ul {
  list-style-type: disc;
  margin-bottom: 20px;
}

.section-content ul li {
  margin-bottom: 8px;
}

.section-outro{
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  height: 25%;
  padding-bottom: 50px;
  /* background-color: red; */
}

.section-outro .description{
  padding-left: 20%;
  padding-right: 20%;
  text-align: center;
}

.image-container {
  flex: 1;
  max-width: 40%;
  height: auto;
  padding: 20px;
  background-image: url("mgliste.png");
}

#dofinansowania{
  /* height: 500px; */
  width: 100%;
  margin-top: 40px;
  background-color: white;
}

#dofinansowania .container{
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 500px; */
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 40px;
}

.section-logos{
  display: flex;
  width: 100%;
  justify-content: center;
  padding-top: 40px;
}

.section-logos img{
  width: 70%;
}

#dofinansowania .section-text-dof{
  width: 100%;
}

.section-text-dof p1{
  font-weight: bold;
}

.mobilka{
  display: none;
}

.komp{
  display: flex;
}

footer{
  background-color:#780A28;
  height: 180px;
  display: flex;
  flex-direction: column;
}

.topfoot{
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: row;
}

.bottomfoot{
  width: 100%;
  height: 30%;
}

footer .dane{
  width: 50%;
  display: flex;
  flex-direction: row;
  line-height: 13px;
  align-items: center;
  justify-content: center;
}

footer .dane .logo{
  width: 100px;
  margin-top: 3rem;
}

footer .dane .tekst{
  width: 60%;
}

footer .dane .tekst .main{
  font-weight: bold;
}

footer p{
  color: #EAE4D6;
}

footer .dane p{
  margin-bottom: 8px;
  margin-top: 0;
}

footer .reserved{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  align-content: flex-end;
  margin-bottom: 18px;
}

footer .reserved p{
  color: #EAE4D6;
  font-size: 12px;
}

footer .socials{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
  gap: 20px;
  flex-wrap: wrap;
  align-content: flex-end;
  margin-left: auto;
  padding-right: 4%;
}

.ukryty{
  display: none !important;
}


#mobile-nav{
  font-family: 'Inter';
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #780A28;
  z-index: 10000;
  display: flex;
  flex-direction: column;

  transform: translateX(100%);

  transition: 0.4s ease-in-out;
}

#mobile-nav.active {
  transform: translateX(0); /* Wraca na ekran */
}

#mobile-nav .top{
  margin-top: 32px;
  height: 64px;
  display: flex;
  flex-direction: row;
  position: relative;
}

#mobile-nav .bottom{
  height: 40%;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  margin-left: 26px;
}

#mobile-nav .logo{
  width: 120px;
  position: absolute;
  left: 12px;
}

#mobile-nav .logo img{
  width: 100%;
}

#mobile-nav .burger{
  height: 100%;
  width: 30px;
  position: absolute;
  right: 20px;
  display: flex;
  background-color: transparent;
}

#mobile-nav .burger img{
  width: 100%;
}

#mobile-nav .refs{
  display: flex;
  flex-direction: column;
  gap: 35px;
}

#mobile-nav .refs a{
  font-size: 26px;
  color: white;
  font-weight: 400;
}

#closeBtn{
  background: none;
  border: none;
  padding: 0;
}

#burgerBtn{
  background: none;
  border: none;
  padding: 0;
}

.noscroll {
  overflow: hidden;
}

.plus-prawy{
  display: none;
  position: absolute;
  right: 15px;
  top: 15px;
}

.plus-lewy{
  display: none;
  position: absolute;
  left: 15px;
  top: 15px;
}

.minus-lewy{
  display: none;
  position: absolute;
  left: 15px;
  top: 15px;
}

.minus-prawy{
  display: none;
  position: absolute;
  right: 15px;
  top: 15px;
}

.rodo-container{
  display: none;
  flex-direction: row;
  gap: 0.3rem;
}

.checkbox{
  height: 1rem !important;
}

.polityka-prywatnosci{
  color: black;
  font-size: 10px;
  transition: none;
  line-height: 150%;
  font-weight: normal;
  text-decoration: underline;
}

.polityka-prywatnosci:hover{
  font-size: 10px;
}

.dane-osobowe{
  padding-bottom: 10px;
}

.dane-osobowe p{
  font-size: 10px;
  line-height: 150%;
}


/* Responsywność */

/*TABLET*/

@media (max-width: 1024px) {
  body, html {
    font-size: 16px;
    line-height: 20px;
  }

  h1{
    font-size: 60px;
    line-height: 66px;
  }
  
  h2{
    font-size: 40px;
    line-height: 44px;
  }

  h3{
    font-size: 32px;
    line-height: 36px;
  }

  a{
    font-size: 16px;
  }

  a:hover{
    font-size: 17px;
  }

  .button{
    font-size: 16px;
    padding: 12px;
  }
  .carousel{
    height: 1200px;
  }
  .carousel-2{
    height: 800px;
  }
  .wine-info h3{
    font-size: 25px;
  }
  .wine-info h4{
    font-size: 15px;
  }
  .statement{
    background-attachment: scroll;
  }
  .plus-prawy{
    display: block;
  }

  .plus-lewy{
    display: block;
  }

  .minus-prawy{
    display: block;
  }

  .minus-lewy{
    display: block;
  }

  .plus-mobile{
    display: none;
  }

  .plus-tablet{
    display: flex;
  }

  .minus-mobile{
    display: none;
  }

  .minus-tablet{
    display: flex;
  }

  .flip-wrapper{
    cursor: pointer;
  }
}

/*MOBILE*/

@media (max-width: 800px) {

  body, html {
    font-size: 14px;
    line-height: 20px;
  }

  .main-title{
    font-size: 40px;
    line-height: 110%;
  }

  .main-subtitle{
    font-size: 18px;
    line-height: 120%;
  }

  h1{
    font-size: 54px;
    line-height: 60px;
  }
  
  h2{
    font-size: 36px;
    line-height: 40px;
  }

  h3{
    font-size: 24px;
    line-height: 30px;
  }

  a{
    font-size: 14px;
  }

  a:hover{
    font-size: 15px;
  }

  .button{
    font-size: 14px;
  }

  .section-container {
    flex-direction: column;
    align-items: right;
    gap: 8px;
  }

  .section-content, .image-container {
    min-width: 100%;
    min-height: 100%;
  }

  #top-nav{
    position: absolute;
  }

  #top-nav .refs{
    display: none;
  }

  #top-nav .burger{
    display: flex;
  }

  #top-nav .logo{
    left: 12px;
  }

  #about .container .section-logo{
    display: none;
  }

  #about .section-text{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .carousel{
    height: 1800px;
  }

  .carousel-2{
    height: 1440px;
  }

  #wina .flip-wrapper{
    width: 100%;
    height: 20%;
  }

  #wina .carousel-2 .flip-wrapper{
    width: 100%;
    height: 25%;
  }

  #wina .button{
    width: 45%;
  }

  .wine-photo{
    margin-left: 0;
    width: 40%;
  }

  .wine-info{
    width: 60%;
  }

  img{
    /* max-width: 200%; */
  }

  .card-content h3{
    font-size: 30px;
  }

  .card-content h4{
    font-size: 15px;
  }

  .drugi{
    display: none;
  }

  .section-introduction{
    padding: 0;
  }

  .section-content-top .photo{
    display: none;
  }

  .section-content-bottom{
    display: flex;
  }

  .section-content .description{
    width: 100%;
    padding-left: 7%;
    padding-right: 7%;
    padding-bottom: 20px;
    padding-top: 15px;
    height: auto;
  }

  .section-content h3{
    font-size: 20px;
  }

  .section-outro .description{
    padding: 0;
  }

  .card-white-2 .wine-bottle{
    right: auto;
    left: 2rem;
  }

  .card-white-4, .card-red .wine-bottle{
    right: auto;
    left: 2rem;
  }

  .card-white-3{
    background-color: #736B56;
    color: #EAE4D6;
  }

  .card-white-3 p{
    color: #EAE4D6;
  }

  .card-white-4{
    background-color: #EAE4D6;
    color: #780A28;
  }

  .card-white-4 p{
    color: #780A28;
  }

  .card-white-2 .card-content{
    flex-direction: row-reverse;
  }

  .card-white-2 .wine-info{
    text-align: right;
  }

  .card-white-2 .wine-info .wine-info-text{
    right: auto;
    left: 0;
  }

  .card-white-4 .card-content{
    flex-direction: row-reverse;
  }

  .card-white-4 .wine-info{
    text-align: right;
  }

  .card-white-4 .wine-info .wine-info-text{
    right: auto;
    left: 0;
  }

  .card-red .card-content{
    flex-direction: row-reverse;
  }

  .card-red .wine-info{
    text-align: right;
  }

  .card-red .wine-info .wine-info-text{
    right: auto;
    left: 0;
  }

  #kontakt .section-data{
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 16px;
    padding-right: 16px;
  }  

  #kontakt .section-head{
    margin-left: 16px;
  }

  .data-gora{
    flex-direction: column;
  }

  #kontakt .formularz{
    width: 100%;
  }

  #kontakt .mapa{
    width: 100%;
  }

  #kontakt button{
    width: 100%;
    position: relative;
    bottom: auto;
  }

  .button{
    background-color: #780A28; 
    border: 2px solid #780A28;
    color: white;
  }

  .statement{
    background-attachment: scroll;
  }

  .topfoot{
    flex-direction: column;
  }

  footer .dane{
    width: 100%;
    height: 70%;
    justify-content: flex-start;
    padding-left: 2rem;
  }

  footer .socials{
    width: 100%;
    height: 30%;
    justify-content: center;
  }

  footer{
    height: 250px;
  }

  .bottomfoot{
    display: flex;
    align-items: center;
  }

  footer .reserved{
    margin-bottom: 0;
  }

  footer .dane .logo{
    width: 90px;
  }

  footer .dane .tekst{
    margin-top: 30px;
  }

  #wina .section-title2{
    font-size: 14px;
    line-height: 120%;
  }

  .wine-info h3{
    font-size: 24px;
    line-height: 120%;
  }

  .wine-info h4{
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 2px;
  }

  .wine-info p{
    font-size: 14px;
    line-height: 140%;
  }

  .wine-info-text h3{
    font-size: 24px;
    line-height: 120%;
  }

  .wine-info-text h4{
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 2px;
  }

  .wine-info-text p{
    font-size: 14px;
    line-height: 140%;
  }

  #oferta .description p{
    font-size: 14px;
    line-height: 150%;
  }

  #oferta .section-title{
    margin-bottom: 0;
  }

  #oferta .section-container{
    padding-left: 16px;
    padding-right: 16px;
  }

  #oferta .section-introduction{
    margin-top: 24px;
    margin-bottom: 24px;
  }

  #oferta .container .section-head{
    padding-bottom: 0;
  }

  .komp{
    display: none;
  }

  .mobilka{
    display: flex;
  }

  .section-logos{
    padding-top: 0;
  }

  .section-logos img{
    width: 100%;
  }

  #dofinansowania .container{
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    padding-top: 24px;
  }

  .minus-tablet{
    display: none;
  }

  .minus-mobile{
    display: flex;
  }

  .plus-tablet{
    display: none;
  }

  .plus-mobile{
    display: flex;
  }

  .dolny-tekst-mobile{
    display: block;
    text-align: center;
  }

  .dolny-tekst-mobile{
    text-align: center;
  }

  .data-dol{
    display: none;
  }
}

@media (max-width: 600px){
  .carousel{
    height: 1400px;
  }

  .carousel-2{
    height: 1120px;
  }

  /* .flip-card-inner.is-flipped{
  transform: rotateY(180deg);
  } */
}