body{
    margin:0;
    font-family:Italianno,sans-serif;
    background-color:rgb(66, 66, 66);
}

html{
    color:white;
}

header{
    background-color:rgba(0,0,0,0.8);
    margin:0 auto;
    position:fixed;
    width:100%;
    top:0;
    z-index:25;
    transition:.3s;
    transition-timing-function:ease-out;
}

.navbar{
    width:95%;
    margin:0 auto;
    display:flex;
    align-items:center;
}

.navbar h1{
    margin:0;
    padding:1rem 0;
}

.navbar h1::after{
    content:"☕"
}

.logo-text{
    width:auto;
}

.middle-nav{
    display:none;
    width:80%;
}

.middle-nav a{
    text-decoration:none;
    color:white;
}

.right-nav{
    margin-left:auto;
    display:block;
}

.navlink-menu-cont,.navlink-blog-cont,.navlink-shop-cont,.navlink-faq-cont,.navlink-contact-cont{
    display:none;
}

.navlink-about-cont{
    position:relative;
}

.navlink-container{
    width:70%;
    display:flex;
    justify-content:space-around;
    align-items:center;
}

.navlink-container .navlink{
    width:30%;
    text-align:center;
    letter-spacing:5px;
    font-size:1.2rem;
    font-weight:bolder;
    padding: 1rem 0;
    border-radius:.2rem;
    cursor:pointer;
}

.navlink-container .active{
    background-color:black;
    border:1px solid white;
}

.navlink-container .navlink:hover:not(.active){
    background-color:brown;
}


.navlink-dots{
    font-size:1rem;
    position:relative;
}

.responsive-menu{
    background-color:brown;
    position:absolute;
    left:0;
    right:0;
    border-radius:.2rem;
    display:none;
}

.responsive-menu a{
    display:block;
    padding: 1rem 0 !important;
    margin:.5rem;
    border-radius:.5rem;
}

.responsive-menu a:hover:not(.active){
    background-color:rgb(138, 61, 61);
}

.navlink-dot-menu{
    width:100%;
    font-size:1.2rem;
    background-color:transparent;
    border:none;
    cursor:pointer;
    color:white;
}

.navlink-dots:hover .responsive-menu{
    display:block;
}


.social-link-container{
    width:30%;
    display:flex;
    margin-left:auto;
    justify-content:space-evenly;
}

.social-link-container a{
    display:block;
    width:30%;
    text-align:center;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:.2rem;
}

.social-link-container a:hover{
    background-color:brown;
}

.bars-btn{
    background-color:rgb(194, 71, 71);
    border:none;
    padding:.3rem 1rem;
    font-size:1.5rem;
    border-radius:.5rem;
    color:white;
    cursor:pointer;
}

main{
    color:black;
}

#mobile-slide{
    position:fixed;
    top:0;
    right:0;
    z-index:30;
    color:white;
    width:0%;
    height:100%;
    transition-property:width;
    transition-duration:.5s;
    transition-timing-function:ease-in-out;
    background-image:url(https://images.unsplash.com/photo-1527964275784-5ce8ddab3d8e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fGNvZmZlZXxlbnwwfHwwfHx8MA%3D%3D)
}

.mobile-content{
    background-color:rgba(0,0,0,0.8);
    position:relative;
    height:100%;
    width:100%;
    top:0;
    padding-top:3rem;
    overflow-x:hidden;
    overflow-y:auto;
}

.mobile-content a{
    display:block;
    padding:.5rem .5rem;
    color:white;
    font-size:2rem;
    text-decoration-line:none;
    margin:.5rem auto 0;
    width:90%;
    border-radius:1rem;
    transition:.3s;
}

.mobile-content .current-link{
    background-color:brown;
    color:black;
}

.mobile-content a:hover:not(.current-link){
    background-color:rgba(0,0,0,1);
    text-indent:4rem;
}

.close-mobile-slide{
    background-color:transparent;
    border:none;
    color:white;
    position:absolute;
    top:1rem;
    font-size:1.5rem;
    transition:transform .2s;
    cursor:pointer;
}

.close-mobile-slide:hover{
    transform:rotateZ(180deg);
}

footer{
    background-image:url(https://media.istockphoto.com/id/2148453708/photo/coffee-shop-owner-talking-to-employee.webp?a=1&b=1&s=612x612&w=0&k=20&c=4AIbu-R5YbATL8EQrIg1dO-qUT92CnKecXcEVSim9NM=);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.footer-flex{
    width:95%;
    margin:0 auto;
}

.footer-div{
    background-color:rgba(0,0,0,0.8);
    padding-bottom:1rem;
}

.footer-flex{
    display:flex;
    flex-direction:column;
}

.footer-flex h2{
    margin:0;
    padding:1rem 0;
}

.title-underline-container{
    width:100%;
    background-color:black;
    height:.3rem;
    border-radius:2rem;
    margin-bottom:1rem;
}

.title-underline-content{
    width:20%;
    background-color:white;
    height:.2rem;
    border-radius:2rem;
}

.footer-flex-child a{
    text-decoration:none;
    font-size:1.5rem;
}

.footer-links a{
    display:block;
    color:white;
}

.fa-solid.fa-location-dot,.fa-solid.fa-envelope,.fa-solid.fa-phone,.fa-solid.fa-fax{
    background-color:white;
    padding:.7rem;
    border-radius:100%;
    margin:.1rem 0;
    color:brown;
}

.location-link:hover .fa-solid.fa-location-dot,
.envelope-link:hover .fa-solid.fa-envelope,
.cell-link:hover .fa-solid.fa-phone,
.fax-link:hover .fa-solid.fa-fax{
    background-color:brown;
    color:white
}

.news-links a{
    color:white;
}


.news-blog-flexer{
    display:flex;
    height:100px;
}


.news-blog-img-cont{
    width:30%;
    position:relative;

}

.news-blog-img-cont .link-icon{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    background-color:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
    border-radius:1rem;
    opacity:0;
}

.news-links a:hover .link-icon{
    opacity:1;
}

.news-blog-img-cont img{
    height:100%;
    width:100%;
    object-fit:cover;
    object-position:center center;
    border-radius:1rem;
}

.news-blog-text{
    padding:0 0 0 .5rem;
}

.news-blog-text h3{
    font-size:1.5rem;
    margin-bottom:.5rem;
}

.news-blog-text p{
    margin:0;
    font-size:1.3rem;
}

.news-blog-date{
    display:inline-block;
    text-indent:.5rem;
}

.shortcut-links {
    display:grid;
    grid-template-columns:50% 50%;
    gap:.2rem;
}

.shortcut-links a{
    color:white;
    transition:.5s;
}

.shortcut-links a:hover{
    transform:translateX(30px)
}

.working-hours-des h4{
    font-size:1.7rem;
    letter-spacing:2px;
    margin-bottom:.5rem;
}

.working-hours-flex{
    display:flex;
    border-bottom-style:dotted;
    border-bottom-color:white;
}

.working-time{
    margin-left:auto;
}

.working-hours-flex p{
    font-size:1.5rem;
    margin-bottom:.5rem;
}

.copyrights-container{
    background-color:rgb(121, 119, 119);
    padding:2rem 0;
}

.copyrights-flex{
    width:95%;
    margin:0 auto;
    display:flex;
}

.copyrights-flex p{
    margin:0;
    font-size:1.8rem;
}

.privacy-policy{
    margin-left:auto;
}

.slide-gallery-section{
    position:relative;
    z-index:18;
    height:100vh;
}

.first-viewport{
    height:100%;
}

.floating-viewport{
    padding:5rem 0;
}

.slides{
    position:relative;
    font-family:Italiana;
    color:white;
    display:none;
    height:100%;
    width:100%;
    z-index:15;
}

.slides img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.slide-des{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.slide-des div{
    background-color:rgb(88, 87, 87);
    border-radius:1rem;
    position:relative;
    width:50%;
    padding:2rem 1rem;
    margin-left:10%;
    box-sizing:border-box;
}

.slide-des-1 div{
    animation-name:slide1-animation;
    animation-duration:2s;
}

.slide-des-2 div{
    animation-name:slide2-animation;
    animation-duration:2s;
}

.slide-des-3 div{
    animation-name:slide-3-animation;
    animation-duration:2s;
}

.right-animations{
    align-items:flex-end;
}

.right-animations div{
    margin-left:0;
    margin-right:10%;
}

.slide-des-4 div{
    animation-name:slide-4-animation;
    animation-duration:2s;
}

.slide-des-5 div{
    animation-name:slide-5-animation;
    animation-duration:2s;
}


.items-cards-container{
    width:98%;
    margin:0 auto;
    display:grid;
    justify-content:space-around;
    grid-template-columns:90%;
    row-gap:2rem;
}

.item-card{
    border-radius:1rem;
    box-shadow:4px 6px 10px black;
    color:white;
    padding-bottom:2rem;
}

.item-card-des{
    text-align:center;
}


.item-card-des h2{
    padding-top:15rem;
    font-size:2.5rem;
    margin-bottom:0;
}

.item-card-des p{
    margin-top:0;
    font-size:2rem;
}

.item-card-des .deco-line{
    display:inline-block;

}

.item-card-des .deco-line{
    height:4px;
    width:25%;
    background-color:brown;
}

.item-card-btn-container{
    border:1px solid white;
    width:50%;
    margin:0 auto;
    text-align:left;
    position:relative;
    border-radius:1rem;
    overflow:hidden;
}

.item-card-des button{
    width:100%;
    margin:0 auto;
    padding:.8rem 0;
    cursor:pointer;
    border-radius:1rem;
    border:none;
    color:brown;
    background-color:white;
}

.item-card-des .flash-span{
    background-color:brown;
    width:0%;
    transition:.2s;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:1rem;
    overflow:hidden;
    text-align:center;
}

.item-card-des a{
    color:white;
    text-decoration:none;
}

.item-card-btn-container:hover .flash-span{
    color:red;
    width:100%;
}

.item-card{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    transition:.5s;

}

.item-card:hover{
    transform:rotateX(20deg);
    box-shadow:10px 15px 10px black;
}

.item-card-1{
    background-image:url(https://media.istockphoto.com/id/1467739359/photo/cup-of-coffee-with-smoke-and-coffee-beans-on-old-wooden-background.webp?a=1&b=1&s=612x612&w=0&k=20&c=4PdlSeLCTxVvPefrUtGupLeRWhi8y_knfDcRx4-2QXI=);
}

.item-card-2{
    background-image:url(https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNvZmZlZXxlbnwwfHwwfHx8MA%3D%3D)
}

.item-card-3{
    background-image:url(https://images.unsplash.com/photo-1557006021-b85faa2bc5e2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y2FwcHVjaW5vfGVufDB8fDB8fHww)
}

.item-card-4{
    background-image:url(https://images.unsplash.com/photo-1661529548674-8dae0330fe04?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8aG90JTIwY2hvY29sYXRlfGVufDB8fDB8fHww)
}

.store-message-content{
    width:98%;
    margin:0 auto;
    text-align:center;
    color:white;
    font-family:Italiana;
    padding-bottom:5rem;
}

.store-message-cup img{
    width:50%;
}

.membership-info h2{
    font-size:2rem;
}


.membership-info h3{
    font-size:1.5rem;
}

.membership-info .join-now-btn{
    padding:1rem 2rem;
    background-color:brown;
    border:none;
    color:white;
    cursor:pointer;
    border-radius:2rem;
    font-weight:bolder;
    animation-name:join-now-animation;
    animation-iteration-count:infinite;
    animation-duration:1s;
}

.unique-des-section{
    color:white;
    background-image:url(https://media.istockphoto.com/id/2128811807/photo/roasted-coffee-beans-with-filter-holder.webp?a=1&b=1&s=612x612&w=0&k=20&c=pt42Re5_MAe-lzhl0lCeyuxxfws3zxZuD0L0bJRmhQw=);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    padding:.5rem 0 5rem;
}

.unique-des-container{
    width:98%;
    margin:0 auto;
    font-family:Italiana;
}

.unique-secret h2{
    font-size:2rem;
}

.unique-secret p{
    font-size:1.2rem;
}

.unique-secret-flexer{
    display:flex;
    flex-direction:column;
    row-gap:2rem;
}


.unique-secret-image-cont img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:1rem;
    filter:blur(1px)
}

.unique-secret-image-cont{
    height:400px;
}

.unique-secret-points{
    display:grid;
}

.unique-flex-point{
    display:flex;
    align-items:center;
}

.unique-flex-left{
    width:30%;
}

.unique-flex-left img{
    width:100%;
    height:80px;
}

.unique-flex-right{
    width:70%;
}

.unique-flex-right h3{
    font-size:1.1rem;
    margin:0;
}
.unique-flex-right p{
    margin:.1rem;
}

.unique-secret{
    animation:unique-secret;
    animation-timeline:view();
    animation-range-start:cover;
    animation-range-end:contain;
}

.unique-image{
    animation:coffe-cup-anima linear forwards;
    animation-timeline:view();
    animation-range-start:cover;
    animation-range-end:contain;
}

.experience-section{
    padding:4rem 0;
    color:white;
    font-family:Italiana;
}

.experience-flexer{
    display:flex;
    flex-direction:column;
    width:98%;
    margin:0 auto;
    row-gap:10px;
}

.experience-flexer div{
    background-color:black;
    padding:0 1rem;
    box-sizing:border-box;
    transform:skewX(20deg);
    margin:0 auto;
    overflow:hidden;
    width:95%;
    opacity:0;
    animation:experience-animation linear forwards;
    animation-timing-function:ease-in;
    animation-delay:5s;
    animation-timeline:view();
    animation-range-start:cover;
    animation-range-end:contain;
}

.cookies-section{
    background-color:black;
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    color:white;
    font-family:sans-serif;
    z-index:20;
    padding-bottom:2rem;
    display:none;
    animation-name:cookies-section;
    animation-duration:2s;
}

.cookies-div{
    width:98%;
    margin:0 auto;
}

.cookies-section button{
    padding:.5rem 2rem;
    border:none;
    cursor:pointer;
    border-radius:2rem;
    color:white;
    font-weight:bolder;
}

#accept-cookies-btn{
    background-color:green;
}

#decline-cookies-btn{
    background-color:red;
}

@keyframes cookies-section{
    from{bottom:-100px}
    to{bottom:0}
}

@keyframes coffe-cup-anima{
    0%{opacity:0;transform:scale(.5,.5)}
    80%,100%{opacity:1;transform:scale(1,1)}
}

@keyframes unique-secret{
    0%{transform:translateY(200px);opacity:0}
    50%{opacity:.5}
    80%,100%{transform:translateY(0);opacity:1}
}

@keyframes slide1-animation{
    from{left:-100%;}
    to{left:0}
}

@keyframes experience-animation{
    0%{transform:skewX(-20deg);opacity:0;}
    50%{opacity:.5}
    100%{transform:skewX(0deg);opacity:1}
}

@keyframes slide2-animation{
    from{top:-50%}
    to{top:0}
}

@keyframes slide-3-animation{
    from{bottom:-50%}
    to{bottom:0}
}

@keyframes slide-4-animation{
    0%{opacity:0;transform:rotateX(180deg);}
    50%{opacity:1}
    100%{transform:rotateX(0deg)}
}

@keyframes slide-5-animation{
    from{transform:scale(.5,.5)}
    to{transform:scale(1,1)}
}

@keyframes join-now-animation{
    from{box-shadow:0px 0px 0px 0px transparent;transform:scale(.7,.7)}
    to{box-shadow:10px 5px 10px 5px rgb(41, 41, 41);transform:scale(1,1)}
}

@media screen and (min-width:580px){
 
    .items-cards-container{
        grid-template-columns:49% 49%;
    }

    .store-message-content img{
        width:15%;
    }

}

@media screen and (min-width:790px){


    .experience-flexer{
        flex-direction:row;
        row-gap:0;
        justify-content:space-between;
    }

    .experience-flexer div{
        width:20%;
    }

    .unique-secret-flexer{
        flex-direction:row;
        justify-content:space-between;
        row-gap:0;
    }

    .unique-secret-image-cont{
        width:40%;
    }
    .unique-secret-points{
        width:55%;
        grid-template-columns:49% 49%;
        justify-content:space-between;
    }
}

@media screen and (min-width:890px){


    
    .items-cards-container{
        grid-template-columns:24% 24% 24% 24%;
    }

    .store-message-content{
        padding:27rem 0 3rem 0;
        box-sizing:border-box;
    }

    .store-message-content img{
        width:20%;
    }

    .floating-viewport{
        position:absolute;
        width:100%;
        top:70%;
        z-index:18;
    }

    #mobile-slide{
        display:none;
    }

    .navlink-dots{
        display:block;
    }
    .middle-nav{
        display:flex;
    }
    .right-nav{
        display:none
    }
    .logo-text{
        width:20%;
    }
}

@media screen and (min-width:990px){

    .store-message-content img{
        width:10%;
    }

    .slide-des div{
        width:30%;
    }

    .navlink-menu-cont{
        display:block
    }
    .navlink-container .navlink{
        width:24%;
    }
    .responsive-menu .menu-link{
        display:none;
    }
    .footer-flex{
        flex-direction:row;
        justify-content:space-between;
    }
    .footer-flex-child{
        width:24%;
    }
}

@media screen and (min-width:1100px){




    .navlink-blog-cont{
        display:block;
    }
    .navlink-container .navlink{
        width:19%;
    }
    .responsive-menu .blog-link{
        display:none;
    }
}

@media screen and (min-width:1200px){

    .navlink-faq-cont{
        display:block;
    }
    .navlink-container .navlink{
        width:16%;
    }
    .responsive-menu .faq-link{
        display:none;
    }
}

@media screen and (min-width:1300px){

    .navlink-contact-cont{
        display:block;
    }
    .navlink-container .navlink-dots{
        display:none;
    }

}