@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
    *,
    *::after,
    *::before{
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :active,
    :hover,
    :focus{
        outline: 0 !important;
        outline-offset: 0;
    }

    a,
    a:hover{
        text-decoration: none;
    }

    a:hover{
        color: white !important;
    }

    ul,
    ol{
        margin: 0;
        padding: 0;
    }

    :root{
        --primary-color:rgb(186, 44, 68);
        --secondary-color:blue;
        --third-color:orange;
        --white-color:#fff;
        --text-color:rgb(54, 52, 52);
        --text-gray:gray;
        --black-color:black;
        --primary-font:'Roboto',sans-serif;
        --secondary-font:'Quicksand', sans-serif;
    }

    html{
        scroll-behavior: smooth;
    }

    body{
        font-family: var(--primary-font);
        font-size: 100%;
        font-weight: 400;
    }

    ::-webkit-scrollbar{
        width: 0.1rem;
    }
    ::-webkit-scrollbar-track{
        background: var(--white-color);
    }
    ::-webkit-scrollbar-thumb{
        background: var(--primary-color);
    }
    .scrolling-navbar {
        transition: background-color 0.3s ease;
    }

    .scrolling-navbar.scrolled {
        background-color: rgb(186, 44, 68);
    }

    h1{
        font-size: 45px;
        font-weight: 900;
        margin-bottom: 3rem;
        color: var(--primary-color);
        opacity: 0;
        animation: slideRight 1s ease forwards;
        animation-delay: .7s;
    }
    h2{
        font-size: 1.8rem;
        font-weight: 700;
        text-transform: capitalize;
        font-family: var(--secondary-font);
        color: rgb(186, 44, 68);
        line-height: 2rem;
        opacity: 0;
        animation: slideLeft 1s ease forwards;
        animation-delay: .7s;
    }

    h4{
        color: var(--secondary-color);
        font-family: var(--secondary-font);
        text-transform: capitalize;
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 0.5rem;
        opacity: 0;
        animation: slideBottom 1s ease forwards;
        animation-delay: .7s;
    }

    h5{
        color: var(--primary-color);
        font-family: var(--secondary-font);
        text-transform: capitalize;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        opacity: 0;
        animation: slideTop 1s ease forwards;
        animation-delay: .7s;
    }

    p{
        font-size: 1rem;
        color: var(--white-color);
        font-weight: 400;
        line-height: 1.75rem;
        letter-spacing: 1px;
        opacity: 0;
        animation: slideLeft 1s ease forwards;
        animation-delay: .7s;
    }

    .main-btn{
        display: inline-block;
        padding: 0.625rem 1.875rem;
        line-height: 1.5625rem;
        background-color: var(--primary-color);
        border: 0.1875rem solid var(--primary-color);
        color: var(--white-color);
        font-size: 0.9375rem;
        font-weight: 600;
        text-transform: capitalize;
        box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
        --webkit-transition: all .4s ease-out 0s;
        -o-transition: all .4s ease-out 0s;
        -moz-transition: all .4s ease-out 0s;
        transition: all .4s ease-out 0s;
        opacity: 0;
        animation: slideTop 1s ease forwards;
        animation-delay: .7s;
    }

    .white-btn{
        display: inline-block;
        padding: 0.625rem 1.875rem;
        line-height: 1.5625rem;
        background-color: var(--white-color);
        border: 0.1875rem solid var(--white-color);
        color: var(--primary-color);
        font-size: 0.9375rem;
        font-weight: 600;
        text-transform: capitalize;
        box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
        --webkit-transition: all .4s ease-out 0s;
        -o-transition: all .4s ease-out 0s;
        -moz-transition: all .4s ease-out 0s;
        transition: all .4s ease-out 0s;
        opacity: 0;
        animation: slideTop 1s ease forwards;
        animation-delay: .7s;
    }

    .main-btn:hover{
        background-color: transparent;
        color: var(--primary-color);
        border-color: var(--primary-color);
    }
    .white-btn:hover{
        background-color: transparent;
        color: var(--white-color);
        border-color: var(--white-color);
    }
    .wrapper{
        padding-top: 8.25rem;
        padding-bottom: 8.25rem;
    }
    .text-content{
        width: 70%;
        margin: auto;
    }


    .counter-section h2,
    .testimonial-section h2,
    .book-food-text h2{
        color: var(--white-color);
    }

    .navigation-wrap{
        position: fixed;
        width: 100%;
        left: 0;
        z-index: 1000;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .navigation-wrap .nav-item{
        padding: 0 0.625rem;
        transition: all 200ms linear;
    }

    .navbar-toggler:focus{
        outline: unset;
        border: unset;
        box-shadow: none;
    }    

    .nav-link{
        font-size: 0.9375rem;
        font-weight: 600;
        text-transform: capitalize;
        color: rgb(186, 44, 68);
        letter-spacing: 1px;
        opacity: 0;
        animation: slideTop 1s ease forwards;
        animation-delay: .7s;
    }
    .navigation-wrap .main-btn{
        padding: 0.3125rem 1.4375rem;
        box-shadow: none;
        margin-left: 0.625rem;
    }
    .navigation-wrap.scroll-on {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 0.125rem 1.75rem 0 rgba(0, 0, 0, 0.09);
      }

    .top-banner{
        width: 100%;
        background: url('../img/background/banner4.jpg') no-repeat center;
        background-size: cover;
        padding: 10.875rem 0 9.375rem;
        height: 100%;
    }

    .counter-section{
        background-color: var(--primary-color);
        padding: 2.5rem 0;
    }
    .counter-section p{
        color: var(--white-color);
        text-transform: uppercase;
    }

    #counter{
        background-color: var(--primary-color);
        height: 150px;
    }

    h2{
        color: var(--white-color);
    }

    .about-section{
        background-color: var(--white-color);
    }
    .about-section .card,
    .about-section .card img{
        border-radius: 0.625rem;
    }
    .about-section .text-sec{
        padding-left: 2rem;
    }

    .image1{
        transition: 0.3s ease-in-out;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
        opacity: 0;
        animation: slideLeft 1s ease forwards;
        animation-delay: .7s;
    }
    .image1:hover{
        transform: scale(1.1);
    }

    .smoothie-type{
        padding-top: 3.25rem;
    }

    .smoothie-type ul li{
        font-size: 1rem;
        color: var(--text-color);
        line-height: 32px;
        position: relative;
        margin-left: 30px;
        opacity: 0;
        animation: slideLeft 1s ease forwards;
        animation-delay: .7s;
    }

    .smoothie-type ul li::before{
        position: absolute;
        left: -2.1875rem;
        color: var(--primary-color);
        font-size: 1.25rem;
        font-family: "Font Awesome 5 Free";
        content: "\f00c";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
    }

    .story-container{
        width: 100%;
        height: 23.125rem;
        background: url('../img/banner_i.png') no-repeat center;
        background-attachment: fixed;
        background-size: cover;
        padding-top: 100px;
        text-align: center;
        opacity: 0;
        animation: slideRight 1s ease forwards;
        animation-delay: .7s;
    }
    .story-container h2{
        color: var(--primary-color);
        opacity: 0;
        animation: slideBottom 1s ease forwards;
        animation-delay: .7s;
    }

    .card-img-top{
        height: 510px;
    }

    h4{
        color:rgb(186, 44, 68);
    }

    .explore-smoothies .card{
        border: none;
        background-color: transparent;
        border-radius: 20%;
    }
    .explore-smoothies .card img{
        border-radius: 2%;
        object-fit: cover;
    }

    .explore-smoothies .card span{
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        padding-bottom: 1rem;
        border-bottom: 1px solid #eae8e8;
    }

    .explore-smoothies .card span del{
        color: var(--text-gray);
        margin-left: 0.5rem;
    }

    #testinomial{
        background-color: var(--primary-color);
    }

    #testinomial .carousel-item{
        margin-top: 3rem;
        padding: 10rem 3.125rem;
        background-color: var(--white-color);
        border-radius: 0.9375rem;
        text-align: center;
    }

    #testinomial .carousel-caption {
        text-align: center;
    }

    #testinomial .carousel-item .carousel-caption p{
        font-size: 1.3125rem;
        line-height: 2.0625rem;
        padding: 0 11% 0.625rem;
        color: gray;
    }

    #testinomial .carousel-caption img{
        max-width: 8rem;
        padding: 0.3125rem;
        height: 100px;
    }
   
    #testinomial .carousel-indicators{
        bottom: -2.8125rem;
        transform: translateX(-50%);
        left: 35%;
    }
    #testinomial .carousel-indicators button{
        width: 15px;
        height: 15px;
        outline: none;
        border-radius: 50%;
        border: none;
        margin-right: 1rem;
        opacity: 0.2;
    }
    
    #testinomial .carousel-indicators button.active{
        opacity: 1;
    }
    
    .faq h4 span{
        font-size: 1.875rem;
        margin-right: .3125rem;
    }

    .book-food{
        width: 100%;
        background: url('../img/s.jpg') no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        padding: 5.375rem 0;
    }


    .newsletter{
        width: 55%;
        margin: 0 auto;
    }
    .newsletter .form-control{
        height: 3.225rem;
        padding: 0 1.25rem;
        font-size: 0.875rem;
        width: 100%;
        border: none;
        border-radius: 0;
        background: transparent;
        border: 0.1875rem solid var(--text-gray);
        color: var(--black-color);
        font-weight: 700;
    }

    .newsletter .form-control:hover,
    .newsletter .form-control:focus{
        box-shadow: none;
        border-color: var(--primary-color);
    }

    #footer{
        background: var(--primary-color);
    }
    #footer .footer-link{
        font-size: 1rem;
        color: var(--white-color);
        padding: 0 1.875rem;
    }

    #footer .footer-link a:hover{
        color: var(--white-color) !important;
    }

    @keyframes slideRight{
        0%{
            transform: translateX(-100px);
            opacity: 0;
        }
        100%{
            transform: translateX(0px);
            opacity: 1;
        }
    }
    
    @keyframes slideTop{
        0%{
            transform: translateY(-100px);
            opacity: 0;
        }
        100%{
            transform: translateY(0px);
            opacity: 1;
        }
    }
    
    @keyframes slideBottom{
        0%{
            transform: translateY(-100px);
            opacity: 0;
        }
        100%{
            transform: translateY(0px);
            opacity: 1;
        }
    }
    
    @keyframes slideLeft{
        0%{
            transform: translateY(100px);
            opacity: 0;
        }
        100%{
            transform: translateY(0px);
            opacity: 1;
        }
    }