/* SECTION HERO */ 

.hero-banner {
    background-image: url('../imagenes/fnd.png');
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
    position: relative;

    display: flex;
    align-items: center;
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: -1;
    }

   & > div {
    display: flex;
    align-items: center;
    gap: 100px;
   }

   .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;

    h1 {
        width: 90%;
        font-size: 60px;
        text-transform: uppercase;
        letter-spacing: -1px;
        line-height: 1.1;
        font-weight: 800;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
        color: var(--color-ligth);


        span {
            color: var(--color-primary);
        }

    }
     p {
        font-size: 18px;
        line-height: 1.5;
        color: var(--color-ligth);

     }

     .container-button {
        margin-top: 40px;
        align-self: flex-start;
     }
   }

   .container-images {
    flex: 1 ;
    position: relative;
    margin-top: 50px;

    .main-image {
        width: 100%;
        height: 100% ;
        object-fit: cover;
        border-radius: 999px;
    }

    .img-banner-1,
    .img-banner-2 {
        position: absolute;
        width: 170px;
        height: 170px;
        object-fit: cover;
        border-radius: 999px;
        border: 7px solid var(--color-ligth);
    }

    .img-banner-1{
        bottom: 19% ;
        left: -12%;
        transform: translateY(-50%);
    }

    .img-banner-2 {
        top: 25%;
        right: 8%;
        transform: translateY(-50%) translateX(50%);
    }
   }

   @media(max-width: 992px) {
    height: auto;
    padding-top: 140px;

     & > div {
        flex-direction: column;
        gap: 30px;
     }

     .content {
       h1 {
        font-size: 50px;
       }
       
       p{
        font-size: 18px;

       }

       .container-button {
        margin-top: 20px;
       }
     }

     .container-images {
        margin-top: 0;

        .main-image {
            height: 100%;
        }

        .img-banner-1, .img-banner-2{
            width: 140px;
            height: 140px;
        }

        .img-banner-1 {
            left: -10%;
        }

        .img-banner-2 {
            right: 5%;
            top: 20%;
        }
     }

   }

   @media(max-width: 768px) {
     .content {
       h1 {
        font-size: 30px;
       }
       
       p{
        font-size: 16px;

       }

      
     }

     .container-images {
       padding: 0 20px;

        .main-image {
            height: 600px;
        }

        .img-banner-1, .img-banner-2{
            width: 100px;
            height: 100px;
            border-width: 4px;
        }

        .img-banner-1 {
            bottom: 10%;
            left:-2%;
            transform: translateY(-50%);
        }

        .img-banner-2 {
            right: 10%;
            top: 25%;
            transform: translateY(-50%) translateX(50%);

        }
     }

   }
}

/*ABOUT SECTION */

.section-about {
    & > div {
        display: flex;
        gap: 120px ;
        align-items: center;
    }

    .container-image {
        flex: 1;
        position: relative;

        .main-image {
            width: 100%; 
            height: 100%;
            object-fit: cover;
            border-radius: 999px;
        }

        .alt-image {
            position: absolute;
            bottom: 12%;
            left: -22%;
            width: 170px;
            height: 170px;
            object-fit: cover;
            border-radius: 999px;
            border: 7px solid var(--color-ligth);
        }

        .card-info {
            border-radius: 15px;
            background-color: var(--color-primary);
            position: absolute;
            top: 20%;
            right: -20%;
            width: 170px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px;

            i {
                color: var(--color-ligth);
                font-size: 26px;
            }

            h3 {
                color: var(--color-ligth);
                font-size: 18px;
                font-weight: 700;
            }
        }
    }

    .content {
        flex: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;

        p {
            font-size: 18px;
            line-height: 1.4;
            
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 30px 0;

            li {
                list-style:none ;
                display: flex;
                gap: 10px;
                align-items: center;

                i {
                    font-size: 18px; 
                    color: #333;
                    background-color: var(--color-primary);
                    padding: 5px;
                    border-radius: 999px;

                }

                span {
                    font-size: 18px;
                }
         
            }
     }

     .container-buttons{
        display: flex;
        gap: 20px;
        align-items: center;
     }
   }

    @media (max-width: 992px) {
     & > div {
          flex-direction: column;
          gap: 40px;
     }
    
     .container-image {
        order: 1;

        .main-image {
            height: 600px;
            width: 100%;
        }

        .alt-image {
            width: 140px;
            height: 140px;
            left: -18%;
        }

        .card-info {
            padding: 15px;
            
            h3 {
                font-size: 16px;
            }
        }
     }
       .content {
        order: -1;
        ul {
            li {
                span {
                    font-size: 16px;
                }
            }
        }
       }
    }

    @media(max-width: 768px) {
        .container-image{
            padding: 0 20px;

            .main-image {
                height: 100%;
            }

            .alt-image {
                width: 100px;
                height: 100px;
                left: 2%;
                bottom:5% ;
                border-width: 4px;
            }

            .card-info {
                top: 10%;
                right: 0;
            }
        }

        .content {
            p {
                font-size: 16px;
            }
        }
    }
}  

/*MAIN DISHES */

.section-main-dishes {
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;

        h2 {
            text-align: center;
            width: 70%;
        }

        .container-dishes {
            display: grid;
            grid-template-columns: repeat(4, 1fr );
            gap: 20px;
            margin: 50px 0 ;
        }

        .container-dish {
            padding: 15px;
            display: flex;
            flex-direction: column;

            img {
                width: 70%;
                margin-bottom: 20px;
                border-radius: 999px;
                align-self: center;
            }

            .dish-info{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;

                h3 {
                    color: var(--color-ligth);
                    font-size: 22px;

                }

                p {
                    text-align: center;
                    line-height: 1.4;
                    font-size: 18px;
                }
            }
        }

        .dish-link {
            color: var(--color-ligth);
            font-size: 18px;

            a {
               text-decoration: underline;
               color: var(--color-primary);
                transition: color .3s;

                &:hover {
                    color: var(--color-ligth);
                }
            }
        }
    }

    @media(max-width: 992px) {
        .content {
            .container-dishes {
                grid-template-columns: repeat(2, 1fr );
                margin:20px 0;
            }

            .container-dish {
                img {
                    width: 160px;
                    height:160px;
                }

                .dish-info {
                    h3 {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    @media (max-width: 768px) {
        .content {
            .container-dishes {
                grid-template-columns: 1fr;
                gap: 0;
                margin: 0;
            }

            .container-dish {
                img {
                    width:120px;
                    height: 120px;
                }

                .dish-info {
                    h3 {
                        font-size: 18px;
                    }

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