        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;  
        }
        .navbar-components{
            display: flex;
            width: 100%;
            overflow: hidden;
            padding: 10px;
            justify-content: space-between;
            align-items: center;
            background: #EEAECA;
            background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);

        }
        .navbar-list >ul{
            display: flex;
            gap: 120px;
            list-style-type: none;
            font-size: 20px;
        }
        a{
            text-decoration: none;
        }
        img{
            width: 50px;
            height: 50px;
        }
        button{
            border-radius:10px;
            width: 100px;
            padding: 10px;
            border: none;
            background-color: blue;
            color: white;
            cursor: pointer;
            font-size: 20px;
        }
        .carousel{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 650px;
            background-color: whitesmoke
        }
        .carousel-img >img{
            width: 500px;
            height: 500px;
            object-fit: contain;
        }
       
        h1{
            font-size: 50px;
            /* background-image: url(image/Latte1.jpg); */
            background-image: url(https://i.pinimg.com/736x/0b/f9/20/0bf92092fb05e6451e7d9e6c8275bb83.jpg);
           -webkit-background-clip: text;
            background-clip: text; 
            color: transparent;
            padding: 100px;    
        }
        p{
            text-align: center;
            font-size: 20px;
        }
        .coffee-menu {
            padding: 20px;
            background-color:#ffe4c432;
        }
        .coffee-menu h2 {
            text-align: center;
            font-size: 40px;
            margin-bottom: 30px;
            color: #333;
        }
        .menu-items {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 50px;
            margin-bottom: 50px;
        }
        .menu-item {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgb(202, 135, 238);
            width: 200px;
            padding: 20px;
            text-align: center;
        }
        .menu-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
        }
        .menu-item h3 {
            font-size: 20px;
            margin: 10px 0;
            color: #333;
        }
        .menu-item p {
            font-size: 16px;
            color: #666;
        }
        .footer {
            background: #f0f0f0;
            font-size: 20px;
            padding: 10px;
            text-align: center;
            /* width: 30 0%;  */
            padding: 70px 10px;
        }
        .footer a {
            color: #6c757d;
            margin: 0 10px;
            text-decoration: none;
        }
        .footer p a {
            padding-top: 20px;
            color: blue;
        }