@font-face {
  font-family: "Courgette";
  src: url("../fonts/Courgette-Regular.ttf");
}

@font-face {
  font-family: "NotoSerifGeorgian";
  src: url("../fonts/NotoSerifGeorgian-variablefont_wght.ttf");
}

:root {
  --main-font: "NotoSerifGeorgian", cursive;
  --secondary-font: "Courgette", cursive;
}
 
 #logo {
             font-family: var(--secondary-font);
            font-size: 48px;
            color: #a0629b;
            font-weight: normal;
        }

welcome-section {
    text-align: center;
    margin-top: 50px;
    font-family: var(--main-font);
    font-size: medium;
     color: rgb(71, 54, 69);
}

.highlights {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    align-items: center;
    height: 300px;
    text-align: center;
    font-family: var(--secondary-font);
}
p {
    font-family: var(--main-font);
    padding:10px
}

.card {
    width: 300px;
    height: 210px;
    background-color: rgb(232, 215, 228);
}
section {
    text-align: center;
    margin-top: 50px;
    font-family: var(--main-font);
    font-size: medium;
    color: rgb(71, 54, 69);
}
mark {
    background-color: #f7e1f0;
    padding: 2px 4px;
    border-radius: 4px;
}
.why-choose-us {
    text-align: center;
    margin-top: 40px;
    font-family: var(--main-font);

& ol {
    display: inline-block;   
    text-align: left;        
    padding-left: 20px;      
}

& li {
    margin-bottom: 7px;
}
}
footer {
    text-align: center;
    margin-top: 100px;
    font-family: sans-serif;
    font-size: 12px;
    color: rgb(51, 49, 49);
    padding: 10px 0;
}

/* ===== Menu Page Layout ===== */

.coffee, .desserts {
    display: flex;           
    flex-wrap: wrap;         
    gap: 40px;               
    justify-content: center; 
    margin-top: 30px;       
}

.menu-item {
    width: 300px;                
    text-align: center;          
    font-family: var(--main-font);
    border-radius: 10px;         
    padding: 10px;               
    background-color: #f7f0f7;   
    box-sizing: border-box;   
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);   
}


.menu-item img {
    width: 100%;               
    border-radius: 10px;       
    object-fit: cover;         
    margin-bottom: 10px;       
}

.menu-item h3 {
    margin: 5px 0;             
}

.menu-item p {
    font-size: 0.9rem;         
    margin-bottom: 5px;        
}

strong {
    color: #603a50;            
}