/* main styling  */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        background-color: #e3dac9;
    }

    ul {
        list-style-type: none;
    }

    a {
        text-decoration: none;
        color: white;
    }

    button {
        cursor: pointer;
        border: none;
    }

    .container {
        width: 90vw;
        margin: 0 auto;
    }

    header {
        margin-top: 50px !important;
        background-image: url(images/hero.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 80vh;
        position: relative;
    }


    /* start nav  */
    nav {
        display: flex;
        justify-content: space-between;
        padding: 30px 80px;
        color: white;
    }

    nav>ul {
        display: flex;
        width: 50%;
        align-items: center;
        justify-content: space-between;
    }

    nav img {
        width: 30px;
    }

    nav li {
        margin-right: 20px;
        transition: all 0.2s;

        &:hover {
            filter: drop-shadow(0px 0px 5px white);
            transform: translateY(-5px);
        }
    }

    nav button {
        background: none;
    }

    .burger_menu {
        display: none;
    }

    .nav_actions {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    /* end nav  */

    /* start hero section  */
    .hero_section {
        color: white;
        font-size: 25px;
        line-height: 50px;
        position: absolute;
        top: 30%;
        left: 10%;
        height: 50%;

        padding: auto 0;
    }


    .hero_section button {
        margin-top: 30px;
        width: 7em;
        border-radius: 20px;
        height: 2em;
        font-size: 20px;

    }

    /* end hero section  */

    /* start category bar section  */
    .category_bar {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 80px;
        height: 10vh;
        margin: 60px 0px;
        font-size: 18px;
    }

    .category_bar figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        & img {
            width: 60%;
        }
    }

    /* end category bar section  */




    /* start menu section */
    .menu_section {
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 100px;
        padding: 80px;
    }

    .coffee_section,
    .dessert_section {
        & h2 {
            text-align: center;
            margin-bottom: 30px;
            text-transform: capitalize;
        }
    }

    .carousel_container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .prv_btn,
    .next_btn {
        border-radius: 50%;

        & img {
            width: 30px;
        }
    }

    .product_image {
        width: 250px;
        border-radius: 12px;
    }

    .product_image_container {
        position: relative;
    }

    .heart_icon {
        width: 25px;
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
    }


    .product_card_container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .product_card {
        background-color: #e3dac9;
        width: 270px;
        border-radius: 12px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .card_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
    }

    .order_btn {
        width: 7em;
        height: 2em;
        border-radius: 5px;
        background-color: #392d23;
        color: white;
    }

    /* end menu section */

    /* start check out section   */
    .check_out {
        height: 40vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0px;
        font-size: 25px;
        overflow: hidden;
    }

    .check_out>div button {
        margin-top: 20px;
        width: 16em;
        height: 3em;
        border-radius: 20px;
        background-color: #392d23;
        color: white;

    }

    .check_out>figure {
        width: 25%;
        transform: scale(1.2);
    }

    .check_out img {
        width: 100%;
    }

    #hand_image {
        transform: translateX(-80px);
    }

    #coffee_image {
        transform: translateX(80px);
    }

    /* end check out section   */

    /* start testimonials section  */
    .testimonials_section {
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 60px 100px;
        color: #392d23;
    }

    .testimonials_section>.title {
        margin-bottom: 30px;
    }

    .testimonials_section>.subtitle {
        font-family: 'Dancing Script', cursive;
        font-size: 1.5rem;
    }


    .testimonials_card_container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40%;
    }

    .testimonial_card {
        width: 30%;
        background-color: #e3dac9;
        border-radius: 12px;
        padding: 10px;
        width: 95%;
        margin: 0px 15px;
    }

    .customer_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 10px;
    }

    .customer_info>figure {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: center;
    }

    .customer_info img {

        width: 60px;
        height: 100%;
        border-radius: 60%;
    }

    .testimonials_card_container>li:nth-last-of-type(2) {
        transform: scale(1.1);
        margin: 15px;
    }


    .customer_comment {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .customer_comment.expanded {
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .see_more_btn {
        background: none;
        border: none;
        color: #80644e;
        cursor: pointer;
        font-size: 0.9rem;
        padding: 0;
        margin-top: 5px;
        font-weight: bold;
        text-decoration: underline;
    }

    .slider {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
        cursor: pointer;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #80644e;
    }

    .slider>span:nth-last-of-type(2) {
        background-color: #392d23;
    }

    /* end testimonials section  */


    /* start newsletter section  */
    .newsletter_section {
        height: 40vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .newsletter_side_img_container {
        width: 20%;
        height: 100%;
        position: relative;
    }

    .newsletter_side_img_container img {
        width: 100%;
        height: 100%;
    }

    /* newsletter content */
    .newsletter_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #392d23;
        width: 50%;
    }

    .newsletter_content form {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 100%;
        margin-top: 20px;
    }

    .newsletter_content>form fieldset {
        display: flex;
        align-items: center;
        gap: 5px;
        background-color: white;
        width: 50%;
        border: none;
        padding: 8px 15px;
        border-radius: 20px;
    }

    .newsletter_content>form input {
        border: none;
        outline: none;
    }

    .newsletter_content>form img {
        width: 20px;
    }

    .newsletter_content>form button {
        width: 20%;
        padding: 15px 15px;
        border-radius: 20px;
        background-color: #392d23;
        color: white;
    }

    /* end newsletter section  */


    /* start footer  */
    footer {
        padding: 50px 80px;
        background-color: #392d23;
        color: white;
        display: flex;
        justify-content: space-around;
        gap: 20px;
        margin-bottom: 50px !important;
    }

    .footer_list {
        font-size: 12px;
    }

    .footer_list>li {
        margin-top: 20px;
        font-size: 11px;

    }

    .footer_social_media_icons {
        display: flex;
        gap: 15px;
        margin-top: 20px;
    }

    /* end footer  */


    /* start media queries */

    /* Tablet Devices (max-width: 1024px) */
    @media screen and (max-width: 1024px) {
        .container {
            width: 95vw;
        }

        /* nav responsive */
        nav {
            padding: 30px 20px;
        }

        nav>ul {
            width: 60%;
        }

        /* hero section responsive */
        header {
            height: 60vh;
        }

        .hero_section {
            top: 25%;
            left: 8%;
        }

        /* category bar responsive */
        .category_bar {
            gap: 40px;
        }

        /* menu section responsive */
        .menu_section {
            padding: 50px;
            gap: 50px;
        }

        /* newsletter responsive */
        .newsletter_section {
            height: 25vh;
        }

        .newsletter_content {
            width: 70%;
        }

        /* footer responsive */
        footer {
            padding: 50px 20px;
        }
    }

    /* Mobile Devices (max-width: 768px) */
    @media screen and (max-width: 768px) {

        /* nav responsive */
        nav {
            flex-direction: row;
            /* reset to row for header */
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .burger_menu {
            display: block;
        }

        .burger_menu img {
            width: 30px;
        }

        nav>ul {
            display: none;
            /* hidden by default */
            flex-direction: column;
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            gap: 30px;
            background-color: rgba(0, 0, 0, 0.9);
            padding: 20px;
            z-index: 100;
            border-radius: 0 0 10px 10px;
        }

        nav>ul.active {
            display: flex;
        }

        nav li {
            margin-right: 0;
        }

        /* hero section responsive */
        header {
            height: 50vh;
            background-position: center;

        }

        .hero_section {
            position: absolute;
            top: 10%;
            left: 1%;
            padding: 50px 20px;
            text-align: center;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero_section h1 {
            font-size: 2rem;
            line-height: normal;
        }

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

        /* category bar responsive */
        .category_bar {
            height: auto;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
            font-size: 14px;
        }

        .category_bar figure img {
            width: 40px;
        }

        /* menu section responsive */
        .menu_section {
            padding: 30px 10px;
            gap: 20px;
        }

        .carousel_container {
            position: relative;
        }

        .product_card {
            width: 200px;
        }

        .product_image_container {
            width: 100%;
        }

        .product_image {
            width: 100%;
        }

        .prv_btn,
        .next_btn {
            display: none;
        }

        /* check out section responsive */
        .check_out {
            height: 30vh;
            flex-direction: column;
            padding: 20px 0;
            text-align: center;
            gap: 10px;
            position: relative;
            justify-content: center;
        }

        .check_out>figure {
            width: 30%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #hand_image {
            left: -30px;
            transform: translateY(-50%) rotate(-10deg);
        }

        #coffee_image {
            right: -30px;
            transform: translateY(-50%) rotate(10deg);
        }

        .check_out_content {
            z-index: 10;
        }

        .check_out_content h2 {
            font-size: 1.5rem;
        }

        /* testimonials section responsive */
        .testimonials_section {
            padding: 40px 20px;
        }

        .testimonials_card_container {
            flex-direction: column;
            height: auto;
            gap: 20px;
        }

        .testimonial_card {
            width: 100%;
            margin: 0;
        }

        .testimonials_card_container>li:nth-last-of-type(2) {
            transform: scale(1);
            margin: 0;
        }

        /* newsletter section responsive */
        .newsletter_section {
            height: auto;
            flex-direction: column;
            padding: 40px 0;
        }

        .newsletter_side_img_container {
            display: none;
        }

        .newsletter_content {
            width: 90%;
        }

        .newsletter_content form {
            flex-direction: column;
        }

        .newsletter_content>form fieldset {
            width: 100%;
        }

        .newsletter_content>form button {
            width: 50%;
        }

        /* footer responsive */
        footer {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            text-align: left;
            padding: 40px 20px;
            gap: 20px;
        }

        .footer_list {
            width: 45%;
        }

        footer>h2 {
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }

        .footer_social_media_icons {
            justify-content: center;
        }
    }

    /* end media queries */