@charset "utf-8";
/* CSS Document */
* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: #ffffff;
            background-size: cover;
            color: #000000;
        }

        a {
            text-decoration: none;
            color: #000000;
            transition: color 0.3s;
        }

        a:hover {
            color: #502c04;
        }

        /* Wrapper to control width */
        .wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
			color: #ffffff;
            border-radius: 10px;
        }

        /* Navbar */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #502c04;
			color: #ffffff;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        nav .logo {
            font-size: 1.5em;
            font-weight: bold;
            color: #ffffff;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }

        nav ul li a {
            padding: 5px 10px;
            border-radius: 5px;
			color: #ffffff;
        }

        nav ul li a:hover {
            background-color: #ffffff;
            color: #502c04;
        }

        /* Header */
        header {
            position: relative;
            height: 300px;
			width: 100%;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            overflow: hidden;
            align-items: center;
            justify-content: center;
            color: #000000;
            text-shadow: 2px 2px 8px #000;
        }

		.header-img {
			position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
		}
		

        .header-text {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .header-text h1 {
            font-size: 3em;
            color: #fff;
        }

        

        /* Main layout */
        main {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        main .content { 
            flex: 3;
            background-color: #80471c;
            padding: 20px;
            border-radius: 10px;
			color: #ffffff;
        }

        main aside {
            flex: 1;
            background-color: #502c04;
            padding: 20px;
            border-radius: 10px;
			color: #ffffff;
        }

        section {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #502c04;
			color: ffffff;
            border-radius: 10px;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 15px;
            background-color: #502c04;
			color: #ffffff;
            border-radius: 8px;
        }
	
		.lower-img {
		display: block;  
		position: absolute;
		}
		.coffee {
		width: 100%;
		background-size: cover;
		height: 200px;
		}
		.lower-section {
		height: 250px;
		}
		.making-coffee {
		width: 100%;
		height: 200px;
		}
		.side-img {
		height: 250px;
			
		}
		
		.w3-center {
		justify-content: center;
		align-items: center;
		text-align: center;
		}
		.mySlides {
		justify-content: center;
		align-items: center;
		align-content: center;
		margin-left: 11em;
		padding: 0;
		Display:None;
		}
		.w3-content {
		justify-content: center;
		align-items: center;
		align-content: center;
		margin-left: 11em;
		padding: 0;
		}

        /* Responsive */
        @media (max-width: 768px) {
            main {
                flex-direction: column;
            }

            nav ul {
            gap: 1px;
        }

            .header-text {
                text-align: center;
            }
        }