/* Reszponzív design */


@media (max-width: 1150px) {
    .gallery-categories-nav {
        max-width: 800px;
        width:90%;
        text-align: center;
        margin: auto;
        justify-content: space-evenly;
    }

}

@media (max-width: 1000px) {

    .gallery-categories-nav {
            justify-content: space-evenly;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;

    }

}

@media (max-width: 850px) {
    .wine-modal-header {
/*        outline: solid 1px red;*/
        padding: 1.6rem 1rem;
        line-height: 30px;
    }
}

@media (max-width: 768px) {

        /*#region Navbar*/

        .nav-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            background: url("../images/csillanas-1.png") no-repeat center top;
            background-color: var(--bg-color);
            width: 100%;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            padding: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
            border-top: 2px solid rgba(255, 252, 197, 0.2);
        }

            .nav-menu.active {
                max-height: 500px;
                opacity: 1;
                padding: 1.5rem 0;
            }

            .nav-menu li {
                opacity: 0;
                transform: translateY(-10px);
                animation: slideDown 0.3s ease forwards;
            }

            .nav-menu.active li:nth-child(1) {
                animation-delay: 0.1s;
            }

            .nav-menu.active li:nth-child(2) {
                animation-delay: 0.15s;
            }

            .nav-menu.active li:nth-child(3) {
                animation-delay: 0.2s;
            }

            .nav-menu.active li:nth-child(4) {
                animation-delay: 0.25s;
            }

        @keyframes slideDown {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hamburger {
            display: flex;
            z-index: 1001;
        }

            .hamburger.active span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }

            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }

        /*#endregion Navbar*/




        .page-title {
            text-align: center;
        }

        header {
            position: relative;
        }

        .hero {
            padding: 5rem 1rem;
            min-height: 400px;
        }

        .hero-content h2 {
            font-size: 2rem;
        }

        .hero-subtitle {
            font-size: 1.2rem;
        }

        .page-title {
            font-size: 2rem;
        }


    .wines-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 2rem;
    }

        .wines-grid,
        .gallery-grid {
            /*            grid-template-columns: 1fr;*/
        }


        .gallery-categories-nav a {
            padding: 12px 30px;
            margin-top: 10px;
        }

        /*#region Wine Modal*/


    .wine-modal-content {
        overflow-y: scroll;

    }


        .wine-modal.active {
            padding: 20px;
        }

        .wine-modal-content {
            width: 100%;
            max-height: 95vh;
        }

        .wine-modal-close {
            top: -40px;
            right: 10px;
            width: 40px;
            height: 40px;
            font-size: 30px;
        }

        .wine-modal-nav {
            width: 40px;
            height: 40px;
            font-size: 30px;
            top: auto;
            bottom: -50px;
            transform: none;
        }

        .wine-modal-prev {
            left: 20%;
        }

        .wine-modal-next {
            right: 20%;
            left: auto;
        }

        .wine-modal-nav:hover {
            transform: scale(1.1);
        }

        .wine-modal-body {
            flex-direction: column;
        }

        .wine-modal-image-container {
            flex: 0 0 auto;
            max-height: 40vh;
        }

            .wine-modal-image-container img {
                max-height: 35vh;
            }

        .wine-modal-header {
            padding: 1rem 1rem;
            /*        outline: solid 3px red;*/
        }


            .wine-modal-header h2 {
                font-size: 1.5rem;
            }

        .wine-modal-info {
            padding: 1.5rem;
        }

        /*#endregion Wine Modal*/

        /*Input field*/

        .contact-content {
            grid-template-columns: 1fr;
        }

        .contact-info {
            text-align: center;
        }

        .contact-info,
        .contact-form {
            width: 100%;
            text-align: center;
        }

            .contact-form::before {
            }

        /*Footer*/

        .social-row {
            display: block;
        }


        .social-text, .social-icons {
            width: 100%;
            margin-bottom: 20px;
        }
    }

@media (max-width: 590px) {

        .image-main {
            float: none;
            width: 100%;
            margin: 0 0 1rem 0;
        }

        .gallery-grid {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        }

        .footer-grid {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            grid-template-columns: 100%;
            text-align: center;
        }

        /*
    .footer-section:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(to right, transparent, var(--yellow), transparent);

    }*/

        .footer-section h3 {
            margin-top: 1.5rem;
        }
    }

@media (max-width: 400px) {

    .borkostolok {
        font-size: 27px;
    }

    .main-info-box {
        text-align: left;
        padding: 1rem .7rem;
    }

        .main-info-box h1 {
            font-size: 24px;
        }

        .main-info-box p {
            line-height: 1.8rem !important;
        }


    hr {
        margin: 25px 0 25px 0;
    }

    .szolok-title {
        margin: 10px 0;
    }

    .page-title {
        font-size: 1.7rem;
    }

    .wine-info-box {
        padding: 1rem;
    }


    .grape-card h3 {
        font-size: 1.5rem;
        padding: 12px;
    }

    .wine-content {
        height: 90px;
    }

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


    .wine-modal-subtitle:first-child {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    .wine-modal-subtitle:nth-child(2) {
        font-size: 1.1rem;
        font-weight: 400;
        margin-bottom: 1rem;
    }

    .wine-modal-image-container {
        display: none;
    }

    .wine-modal-info {
        padding: .5rem;
    }

        .wine-modal-row span:last-child,
        .wine-modal-info span {
            font-size: 14px;
        }

    .wine-modal-subtitle span {
        font-size: 1.7rem;
    }

    .wine-modal-row {
        line-height: 1.1;
    }

    .wine-modal-footer-info p {
        margin-bottom: 0;
    }



    .wines-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }


    .grape-varieties {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }


    .gallery-categories-nav a {
        padding: 8px 20px;
        font-size: 17px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: .5rem;
    }
}