h1,h2,h3,h4,h5{
    font-family: 'Trajan Pro 3';
}

h1,h2{
    font-size:50px;
}



h3{
    font-size:30px;
}

p,a{
    font-family:'Montserrat'; 
    font-size: 18px;
}

.container{
    max-width: 1300px;
}

button{
    font-size: 20px;
}
body{
    background-color:#F1EEE7;
}


span{
    color: #DD5B17;
}

.generator-section{
    background-image: url(img/pierwsze.png);
    background-size: 100% 700px;;
      background-position: top center;
    background-repeat: no-repeat;
    
    color: white;
    margin-bottom: 125px;
}

.section-1{
    background-image: url();
    background-size:50% auto;
    background-position: top left;
    background-repeat: no-repeat;
    margin-bottom: 25px;
    height: auto;
}
.section-1 .container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Ustawienie zawartości kontenera na prawo od obrazu */
    height: auto;
}

.obiad{
    
   width: 100%;
}
.obiad img{
    width: 100%;
}

.section-x{
    height: 500px;
    padding-top: 100px;
    background-image: url(img/zupy.png);
   background-position: 90% 50%;   
    background-repeat: no-repeat;
    background-size:400px auto;
    position: relative;
}

.section-2{
    height: 555px;
    padding-top: 125px;
     background-image: url(img/dania.png);
   background-position: 3% 50%;   
    background-repeat: no-repeat;
    background-size:600px auto;
    position: relative;
    
}

.section-3{
    background-image: url(img/kluski-tlo.png);
  background-position: top right;   
    background-repeat: no-repeat;
    background-size:550px auto;
    position: relative;
    padding-top: 125px;
    padding-bottom: 125px;
}

.tekst1{
    padding-left: 15%;
    padding-right: ;
}




#generate-btn{
    background-color: #DD5B17;
    border-radius: 25px;
    border:none;
    font-size: 16px;
    font-weight: 600;    
    padding: 15px 20px 15px 20px;
    
    background: #DD5B17;
    border-radius: 25px;
    margin: 40px;

}


.delikatesy{
    background-color: #DD5B17;
    border-radius: 25px;
    border:none;
  margin: 0 auto;
    font-size: 16px;
    font-weight: 600;
   padding: 15px 20px 15px 20px;
    color: white;
    background: #DD5B17;
}

.delikatesy img{
    width: 24px;
    margin-left:5px;
}

.meal-title {
    font-weight:400;
    
    
    margin-bottom: 10px;
}

.main-course{
    color:white;
}

 .soup,.side-dish{
        color: white;
    }

#soup-link,#side-dish-link,#main-course-link{
    text-transform: uppercase;
}

.image-container {
    border-radius: 10%;
    background-color:white;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    text-align: center;
}


.image-container img{
     position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.logo{
    margin: 20px 0 40px 0;
    height: 56px;
}
.soup .image-container {
    width: 280px;
    height: 280px;
    
}

.soup{
    padding-right: 50px;
}
.side-dish{
    padding-left: 50px;
}

.main-course .image-container {
   
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
}

.side-dish .image-container {
    width: 280px;
    height: 280px;
    
}



.meal-box h5 {
    margin-top: 10px;
    text-decoration: none;
    color: black; /* Aby link miał taki sam kolor jak tekst */
    display: block;
}


.dania{
    display: none;
    width:100%;
    padding-right:20px; 
}


.obiad-t{
    padding: 0px 0px 0px 80px;
}


.obiad-t img{
    margin:10px;
}
.img1{
    height: 60px;
}

.zupy{
    display: none;
    background-color:#F1EEE7;
}

.zupy img{
    height:400px;
    float:right;
}

.card img{
    width: 100%;
}







#line{
    position: absolute;
     left: 50%;
    transform: translateX(-52%);
   height: 1000px;
    top: 0px;
   display: none;
}

.vector-1{
    position: absolute;
    height: 500px;
     left: 50%;
    transform: translateX(-52%);
    top:0;
}

.vector-2{
    position: absolute;
    height: 500px;
    left: 50%;
    transform: translateX(-52%);
    top:-1px;
}

.vector-3{
    position: absolute;
    height: 500px;
    left: 50%;
    transform: translateX(-52%);
    top:-59px;
}





.t-dania{
    padding-left: 100px;
}

.btn-link{
    font-size:20px;
    font-weight: 400;
    color: black;
    text-decoration: none;
    outline: none;
    border:none;
}

.btn-link:hover{
    color:  #DD5B17;;
    text-decoration: none;
    outline: none;
    border:none;
}


 .btn:focus, .btn:active {
            outline: none; /* Wyłączenie obramowania przy fokusie */
            text-decoration: none; /* Brak podkreślenia po kliknięciu */
            border:none;
     box-shadow: none;
        }

.btn-link:focus, .btn-link:active {
            outline: none; /* Wyłączenie obramowania przy fokusie */
            text-decoration: none; /* Brak podkreślenia po kliknięciu */
            border:none;
}
.underline {
            width: 180px;
            height: 2px;
            background-color: #333; /* Domyślny kolor */
            margin-top: 5px;
        }

        .underline.active {
            background-color: #e65100; /* Kolor po kliknięciu */
        }

.btn.active{
    color: #DD5B17;
}


.card{
    border-radius: 20px;
    overflow: hidden;
}


.kluski{
    width: 40vw;
    position: absolute;
   right: 0px;
    transform: translateX(50%);
}


.toggle-icon{
    width: 20px;
}


.card-item img{
    width: 100%;
}

.card-item h5{
    padding: 10px;
    text-transform: uppercase;
}

#toggle-products2-t,#toggle-products-t,#toggle-products3-t{
    color: black;
}

#toggle-products2-t:hover{
     color:  #DD5B17;
    text-decoration: none;
    outline: none;
    border:none;
}

#toggle-products-t:hover{
     color:  #DD5B17;
    text-decoration: none;
    outline: none;
    border:none;
}

#toggle-products3-t:hover{
    color:  #DD5B17;
    text-decoration: none;
    outline: none;
    border:none;
}

.card-item {
    border-radius: 25px;
    overflow: hidden;
    background-color: white;
    min-width: 250px;
   
}








.cards-row {
    padding-top: 100px;
}


.section-4{
    padding-bottom: 100px;
}

.section-5{
    background: #3A3533;
    padding: 50px;
    color: white;
    display: flex;
}




.slider-wrapper {
    overflow:visible;;
  
    margin: 0 00px 55px;
    width: 100%;
    position: relative;
    
}

.underline-orange{
    background:#DD5B17;
    width: 100px;
    height: 2px;
}

.slider-wrapper .swiper-pagination-bullet {
    background: green;
    height: 13px;
    width: 13px;
    opacity: 0.5;
}
.slider-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
}
.swiper-slide-button{
    color: transparent;
    padding: 0px;
    margin-top: -35px;
    
    transition: 0.2s ease;
    
}
.swiper-slide-button:after {
   color: transparent;
}

.swiper-button-next{
    position: absolute;
    color: red;
     width: 50px;
    position: absolute;
    right: -20px;
    top:-55px;
    
}

#swiper-buttons-1,#swiper-buttons-2{
    display: none;
    top:-25px;
}

#swiper-buttons1-1,#swiper-buttons1-2{
    display: none;
}

#swiper-buttons2-1,#swiper-buttons2-2{
    display: none;
    top:-25px;
}
.swiper-button-prev{
    color: transparent;
}

.swiper-button-next img{
   width: 50px;
    position: absolute;
    right: -23px;
    top:-70px;
}

.swiper-button-prev img{
     width: 50px;
    position: absolute;
    left: -23px;
    top:-70px;
}

.tekst-after{
    
}


@media (max-width: 1100px){
    h1,h2{
    font-size:40px;
}



h3{
    font-size:24px;
}

p,a{
    
    font-size: 16px;
}

button{
    font-size: 18px;
}
}


@media (max-width: 1200px){
    
    
    #line{
        z-index: -999
    }
    
    .vector-1,.vector-2,.vector-3{
        display: none;
    }
    
 .soup .image-container {
    width: 250px;
    height: 250px;
}

.main-course .image-container {
   
    width: 350px;
    height: 350px;
}

.side-dish .image-container {
    width: 250px;
    height: 250px;
}


    
    
}


.baner{
    display: block;
    width: 100%;
}

.baner-m{
    display: none;
}


@media (max-width: 768px) {
    .slider-wrapper {
        margin-bottom: 20px;;
    }
    .slider-wrapper .swiper-slide-button {
        display: none;
    }
    
    #swiper-buttons-1,#swiper-buttons-2{
    display: none !important;
}

#swiper-buttons1-1,#swiper-buttons1-2{
    display: none !important;
}

#swiper-buttons2-1,#swiper-buttons2-2{
    display: none !important;
}
    
    .baner-m{
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .baner{
        display: none;
        width: 60%;
    }
    
    
  .btn-link{
    font-size:16px;
     
    }
    .underline{
        width:160px;
    }
    
    .delikatesy{
        margin-top: 50px;
    }
    
    h1,h2{
    font-size:28px;
}



h3{
    font-size:18px;
}

p,a{
   
    font-size: 14px;
}
    #generate-btn,.delikatesy{
        margin: 0 0px 30px 0px;
        width: 100%;
    }

button{
    font-size: 16px;
    
    
}
    
    .logo{
        height: 32px;
    }
    
}



.section-x .col-md-6:first-child{
    padding-top: 50px;
}

.card-item p{
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.timeline{
    display:none;
}

.point,.point-first,.point-last{
    display: none
}

@media (max-width: 991px){
    
    .container-fluid{
        background-size:150% 650px;;
    }
    
    .logo{
        margin-top:10px;
        margin-bottom: 40px;
    }
    
    .section-x,.section-2,.section-3{
        padding: 50px;
        
    }
    
    .col-md-6,.col-lg-6{
        padding: 0;
    }
    .tekst1{
        padding: 0px;
    }
    
     .soup,.side-dish{
        color: black;
    }
    #line,.zupy,.dania{
        display: none;
    }
   
    
    .t-dania{
        padding: 0;
    }
    .section-3{
        background-image: none;
    }

    .meal-container .col-lg-4:first-child{
        order: 2;
        
        
          flex: 1 1 50%;
    }
    
    .meal-container .col-lg-4:nth-child(2){
        order:1; 
        float: ;
        color: black;
       margin: 0 auto;
    }
    
    
 

    .meal-container .col-lg-4:nth-child(3){
        order:2;
          flex: 1 1 50%;
         color: black;
    }
    
    .soup{
    padding-right: 0px;
}
.side-dish{
    padding-left: 0px;
}
    
    .soup .image-container {
    width: 35vw;
    height: 35vw;
   
}
   

.main-course .image-container {
    width: 75vw;
    height: 75vw;
    margin: 0 ;
}

.side-dish .image-container {
   width: 35vw;
    height: 35vw;
}
  
    
    
    
    .section-1{
        background-image: none;
        padding-left: 10px;
    }
    
    .obiad{
        
   
    position: relative;
    left: 50%;
    transform: translateX(-50%);

     display: block;  
    width: 100vw;
        padding-bottom: 30px;
    
    }
    .obiad-t{
        padding: 0;
    }
    

    
    section{
        position: relative;
    }
    
.line {
    position: absolute;
    left: 20px;  /* Środek kontenera (w poziomie) */
    top: 0;
    width: 2px;  /* Szerokość linii */
    height: 100%;  /* Wysokość na 100% kontenera */
    background-color: transparent;  /* Brak tła dla ciągłości */
    border-left: 2px dashed #000;  /* Przerywana linia */
}

/* Stylizacja kropki */
.point {
    display: block;
    position: absolute;
    left: 21px;  /* Kropka będzie na środku */
    top: 50%;  /* Kropka będzie w połowie wysokości */

    /* Zaokrąglenie kropki */
    transform: translate(-50%, -50%);  /* Wyrównanie kropki do środka */
    z-index: 5;
}
    .point-first{
        display: block;
                 position: absolute;
    left: 21px;  /* Kropka będzie na środku */
    top: 00%;  /* Kropka będzie w połowie wysokości */

    /* Zaokrąglenie kropki */
    transform: translate(-50%, -50%);  /* Wyrównanie kropki do środka */
    z-index: 5;
        
    }
    .point-last{
        display: block;
         position: absolute;
    left: 21px;  /* Kropka będzie na środku */
    top: 100%;  /* Kropka będzie w połowie wysokości */

    /* Zaokrąglenie kropki */
    transform: translate(-50%, -50%);  /* Wyrównanie kropki do środka */
    z-index: 6;
    }
    
    .section-3{
        padding-bottom: 0px;
        margin-bottom: 50px;
    }
}