* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: #f8f1e5;

    color: #333;

    line-height: 1.6;

    margin: 0;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



header {

    background-color: #8b4513;

    color: #fff;

    padding: 20px 0;

    text-align: center;

}



header h1 {

    font-size: 36px;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 10px;

}



nav ul {

    list-style: none;

}



nav ul li {

    display: inline;

    margin-right: 20px;

}



nav ul li a {

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    transition: color 0.3s ease;

}



nav ul li a:hover {

    color: #f5f5f5;

}



#banner {

    background-image: url('tunisian-coffee-banner.jpg');

    background-size: cover;

    background-position: center;

    color: #fff;

    padding: 100px 0;

    text-align: center;

}



#banner h2 {

    font-size: 48px;

    margin-bottom: 20px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



#banner p {

    font-size: 20px;

    margin-bottom: 20px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



#menu {

    padding: 80px 0;

    background-color: #fff;

    text-align: center;

}



#menu h2 {

    font-size: 36px;

    margin-bottom: 20px;

    color: #8b4513;

    text-transform: uppercase;

    letter-spacing: 2px;

}



#about {

    background-color: #f8f1e5;

    padding: 80px 0;

    text-align: center;

}



#about h2 {

    font-size: 36px;

    margin-bottom: 20px;

    color: #8b4513;

    text-transform: uppercase;

    letter-spacing: 2px;

}



#about p {

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 20px;

}



.contact-info {

    margin-top: 50px;

    text-align: center;

}



.contact-info p {

    font-size: 18px;

    margin-bottom: 20px;

}



iframe {

    margin-top: 50px;

    border: none;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    border-radius: 10px;

}



.facebook-icon {

    position: fixed;

    bottom: 10px;

    right: 10px;

}



.facebook-icon img {

    width: 50px;

    height: auto;

}



#language-selection {

    position: absolute;

    top: 20px;

    right: 20px;

}



#language-btn {

    background-color: #8b4513;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



#language-btn::after {

    content: '▼';

    position: absolute;

    top: 50%;

    right: 10px;

    transform: translateY(-50%);

    pointer-events: none;

}



#language-options {

    position: absolute;

    top: calc(100% + 5px);

    right: 0;

    background-color: #fff;

    border: 1px solid #8b4513;

    border-radius: 5px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    padding: 10px;

    visibility: hidden;

    opacity: 0;

    transition: visibility 0.3s, opacity 0.3s;

}



#language-options.active {

    visibility: visible;

    opacity: 1;

}



#language-options button {

    display: block;

    width: 100%;

    background-color: transparent;

    border: none;

    padding: 5px 0;

    cursor: pointer;

}



#language-options button:hover {

    background-color: #f8f1e5;

}