@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
img{
    max-width: 100%;
    max-height: auto;
}
.container-header{
    max-width: 1200px;
    height: auto;
    margin: auto;
}
.header{
    background: black;
    opacity: 0.8;
    padding-block: 10px;
}
.header-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 10px;

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

a{
    text-decoration: none;
    color: rgb(255,255,255);
    transition: color 0.3s ease-in-out;
}
.menu{
    display: flex;
    gap: 30px;

}
.menu-item{
    list-style: none;
    font-family: 'Times New Roman';
    font-size: 16px;
    font-weight: 500;
}
#check{
    display: none;
}
.icon{
    font-size: 32px;
    color: white;
    cursor: pointer;
    display: none;
}
.contact-info{
    display:flex;
    gap: 10px;
    font-family: serif;
    font-size: 20px;
    font-weight: 700;
}
.phone{
    max-width: 20px;
    max-height: 20px;
}
#hero{
    background-image: url(img/hero-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: rgb(255,255,255);
}
.menu-item a:hover{
    color:rgb(17, 121, 100);


}
.explore{
    font-family: 'Times New Roman';
    font-size: 18px;
    font-weight: 700;
    display: flex;
    flex: 270px;
    align-items: end;
}
.cayuga .lake{
    font-family: 'Times New Roman';
    font-size: 90px;
    line-height: 1;
    font-weight: 700;
    width: 75%;
    margin: auto;
    text-align: center;
}
.btns-hero{
    font-family: 'Times New Roman';
    font-size: 16px;
    font-weight: 700;
    display: flex;
    gap: 20px;
    flex: 270px;
    align-items: flex-start;
}
.btn{
    padding: 12px 20px;
    border: 2px solid white;
    border-width: 3px;
    border-radius: 26px;
}
.btns-hero .btn:hover{
    color: #000;
    background: #fff;
}

/* section visitors  */

.visitors-row{
    display: flex;
    /* gap: 50px; */
    margin-block: 50px;
}
.visitors-left{
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
}
.visitors-left .visitors-info{
    display: flex;
    flex-direction: column;
    font-family: "roboto";
    font-size: 24px;
    font-weight: 400;
    max-width: 70%;
    margin: 0 auto;
    text-align: justify;
}
.visitors-right{
    display: flex;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    margin-inline-end: 10px;
}
.visitors-right img{
    width: 100%;
}
/* section  wine  */
/* section contect-us */

.wine-row,.contect-row{
    display: flex;
    background: #000;
    padding-block: 25px;
    justify-content: space-around;

}
.wine-left,.contect-left{
    display: flex;
    flex: 2;
}
.wine-right,.contect-right{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.wine-left .wine-trail,.us{
    font-family: "Roboto";
    font-size: 20px;
    line-height: 35px;
    font-weight: 300;
    color: #ffffff;
    text-align: justify;
    margin-inline: 30px;
}
.learn-btn{
    font-family: 'Times New Roman';
    font-size: 16px;
    border: 2px solid white;
    padding: 12px 20px;
    border-radius: 26px;
    border-width: 3px;
    font-weight: 700;
    color: white;
}
.learn-btn:hover{
    color: #000;
    background: #fff;
}

/* section wineries  */

#wineries{
    background-image: url(img/wineries.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.wineries{
    display: flex;
    flex: 350px;
    align-items: end;
}
.wineries-row{
    padding-inline: 30px 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 50%;
    color: rgb(255,255,255);
}
.winer{
    font-family: 'Times New Roman';
    font-size: 55px;
    color: white;
}
.the{ 
    font-family: "Roboto";
    font-size: 20px;
    line-height: 32px;
    font-weight: 300;
}
.wineries-btn{
    display: flex;
    flex: 350px;
    align-items: self-start;
}

/* section event */
/* section plan  */

.event-row,.plan-row{
    display: flex;
    margin-block: 50px;
}
.event-left,.plan-right{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    gap: 20px;
}
.event-right,.plan-left{
    display: flex;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    margin-inline: 10px;
}
.event-right img{
    width: 100%;
}
.plan-left img{
    width: 100%;
}
.aside .event-info,.plan-info{
    font-family: "roboto";
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    text-align: justify;
}
.event-context,.plan-context{
    max-width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.top,.events-btn,.plan-btn{
    display: flex;
    justify-content: center;
}
.events,.plan,.trail{
    font-family: 'Times New Roman';
    font-size: 50px;
    text-align: center;
}
.more-btn{
    font-family: 'Times New Roman';
    font-size: 16px;
    border: 2px solid;
    padding: 12px 20px;
    border-radius: 26px;
    border-width: 3px;
    font-weight: 700;
    color: #000;
}
.more-btn:hover{
    color: #fff;
    background: #000;
}

/* section about  */

#about{
    background-image: url(img/about-cayuga-lake-wine-trail.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.about-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    color: rgb(255, 255, 255);
}
.about{
    display: flex;
    flex-basis: 207px;
    align-items: flex-end;
}
.personalized{
    font-family: "Roboto";
    font-size: 20px;
    line-height: 32px;
    font-weight: 300;
    width: 45%;
    margin: auto;
    text-align: justify;
}
.about-btn{
    display: flex;
    flex-basis: 207px;
    align-items: flex-start;
}

/* section ready  */
#ready{
position: relative;
}

.ready-background{
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.ready{
    display: flex;
    flex-direction: column;
}
.ready-context{
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 30%;
    margin: auto;
    align-items: center;
    justify-content: center;
    flex-basis: 650px;
}
.ready-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "Roboto";
    font-size: 20px;
    line-height: 32px;
    font-weight: 400;
    text-align: center;

}

/* section gallery */

.gallery-row{
    display: flex;
    justify-content: space-around;
    margin-block: 50px;
}
.gallery-img{
    border-radius: 20px;
    overflow: hidden;
}


/* section footer  */
.footer-row-top img{
    width: 150px;
}
footer{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 30px;
}
.footer-row-top{
    display: flex;
    justify-content: center;
}
.footer-row-bottom{
    display: flex;
}
.footer-items{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.footer-items a{
    color: #000;
    font-size: 18px;
}

.first-col,.second-col,.third-col,.fourth-col{
    display: flex;
    flex: 1;

}
.footer-heading{
    color: blue;
    font-size: 25px;
}
.third-col{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.map,.to-let{
    display: flex;
    gap: 20px;
    white-space: pre-line;
    align-items: center;
}
.fa-location-dot{
    color: rgb(0, 101, 179);
    font-size: 20px;
}
.btn-maps{
    color: black;
    border: 2px solid black;
    border-radius: 25px;
    padding: 12px 20px;
    border-width: 3px;
    font-weight: bold;
}
.btn-maps:hover{
    color: #fff;
    background: #000;
}
.email{
    display: flex;
}
.email input{
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding-left: 10px;
}
.btn-in{
    color: white!important;
    font-size: 20px !important;
    border: 2px solid black;
    padding: 12px 20px;
    border-radius: 0px 30px 30px 0;
    border-width: 1px;
    font-weight: bold;
    background-color: #005698;
}
.icons i{
    font-size: 25px;

}
.icons{
    display: flex;
    gap: 20px;
}


/* break point  */
@media (max-width:1400px){
    .wineries,.wineries-btn {
        flex: 316px;
    }
    .event-context, .plan-context {
        max-width: 80%;
    }
    .personalized {
        width: 60%;
    }
}
@media (max-width:1200px){
    .ready-context{
        max-width: 40%;
    }
    .gallery-img{
        flex: 1;
    }

}
@media (max-width:992px){
    .wineries, .wineries-btn {
        flex: 230px;
    }
    .personalized {
        width: 80%;
    }
    .ready-context {
        max-width: 55%;
    }
    .menu {
        gap: 10px;
    }
    .menu-item {
        font-size: 14px;
    }
    .cayuga .lake {
        font-size: 75px;
    }
    .events, .plan, .trail {
        font-size: 40px;
    }
}

@media (max-width:768px) {
    .contact-info{
        display: none;
    }
    .header-row{
        justify-content: flex-end;
        padding-inline-end: 15px;
    }
    .logo img {
        max-width: 50px;
    }
    .menu {
        gap: 30px;
    }
    .icon{
        display: inline-flex;
        position: absolute;
        left: 10px;
    }
    .search-bar{
        justify-items: center;
    }
    #check:checked~.icon #menu-icon{
        display: none;
    }
     .icon #close-icon{
        display: none;

    }
    #check:checked~.icon #close-icon{
        display: block;
    }

    .nav-bar{
        position: absolute;
        top: 74px;
        left: 0;
        width: 50%;
        height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        background-color: rgba(0, 0, 0,0.8 );
        box-shadow: 5px 0px 5px 1px rgba(0, 0, 0, 1);
        overflow: hidden;
        transition: .5s ease;
    }
    #check:checked~.nav-bar{
        height: 100%;
        width: 50%;
    }
    .nav-bar a{
        display: block;
        font-size: 20px;
        transform: translateY(-25px);
        opacity: 0;
        transition: .3s ease;
    }
    #check:checked~.nav-bar a{
        transform: translateY(0px);
        opacity: 1;
        transition-delay:calc(.15s * var(--i));
    }
    .cayuga .lake {
        font-size: 60px;
    }
    .menu{
        flex-direction: column;

    }
    .menu-item{
        font-size: 20px ;
    }
    .visitors-row{
        flex-direction: column;
        gap: 10px;
    }
    .wine-row,.contect-row{
        flex-direction: column;
        gap: 30px;
    }
    .wineries-row{
        max-width: 100%;
    }
    .wineries-btn,.wineries {
        flex: 60px;
        justify-content: center;
    }
    .event-context, .plan-context,.ready-context {
        max-width: 90%;
    }
    .event-row{
        flex-direction: column;
        gap: 10px;
    }
    .plan-row{
        flex-direction: column-reverse;
        gap: 10px;
    }
    .personalized {
        width: 80%;
        font-size: 16px;
    }

    .ready-background {
        opacity: 0.7;
    }
    .about,.about-btn{
        flex-basis: 70px;
    }
    .events, .plan, .trail {
        font-size: 30px;
    }
    .wine-row, .contect-row{
        flex-direction: column;
    }
    .gallery-row {
        /* gap: 10px; */
    }
    .gallery-row img{
        flex: 1;
    }
    .footer-row-bottom{
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 20px;
    }
    .map, .to-let {
        justify-content: center;
        text-align: justify;
    }
    .map{
    gap: 10px;
    }
    .icons{
        justify-content: center;
    }
}
@media (max-width:576px) {
    #check:checked~.nav-bar a{
        font-size: 16px;
    }
    .footer-heading {
        font-size: 22px;
    }
    .cayuga .lake {
        font-size: 40px;
    }
    .visitors-left .visitors-info {
        font-size: 20px;
    }
    .wine-left .wine-trail, .us{
        font-size: 18px;
    }
    .gallery-row{
    flex-direction: column;
    align-items: center;
    }
}

@media (max-width:500px){
    .explore {
        font-size: 12px;
    }
    .cayuga .lake {
        font-size: 30px;
    }
    .btns-hero {
        flex-direction: column;
        align-items: center;
    }
    .visitors-left .visitors-info {
        font-size: 16px;
    }
    .wine-left .wine-trail, .us {
        font-size: 16px;
    }
    .winer {
        font-size: 40px;
    }
    .the {
        font-size: 16px;
    }
    .events, .plan, .trail {
        font-size: 22px;
    }

}