@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Macondo&display=swap');
:root {
     --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Macondo', cursive;
    --primary-color: #000000; /* Navbar/footer background */
    --secondary-color: #996515; /* Golden brown */
    --text-light: #ffffff;
    --accent-color: #ffc107; /* Yellow */
    --bg-color: #ffffff;
    --highlight-color-light: #f3a67f; 
}
     /*Global resets*/
* {
-webkit-box-sizing: border-box;
        box-sizing: border-box;
 margin: 0; 
 padding: 0; 
}

html, body { 
    max-width: 100%;
     overflow-x: hidden; 
     font-family: var(--primary-font);
     background-color: var(--bg-color);
     color: var(--primary-color); 
     line-height: 1.6; 
     min-height:100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; 
      -webkit-box-orient: vertical; 
      -webkit-box-direction: normal; 
          -ms-flex-direction: column; 
              flex-direction: column; 
      scroll-behavior: smooth;
    }
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}
h1, h2, h3 { 
    font-family: var(--secondary-font);
     color: var(--secondary-color); 
     text-transform: uppercase; 
    }
/* Section styling */ 
section { 
    padding: 3rem 1rem; 
    scroll-margin-top: 60px; 
}
section h2 { 
    font-size: 2rem;
     text-align: center; 
     margin-bottom: 2rem; 
    }
/* Navbar Styling */ 
.navbar, #navbar { 
    background-color: var(--primary-color);
     position: fixed;
      top: 0; 
      width: 100%; 
      z-index: 1000; 
      padding: 0.5rem 1rem; 
    }
    .navbar {
        padding: 0.5rem 1rem;
        min-height: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
.navbar-brand { 
    font-size: 1.3rem;
     color: var(--text-light); 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     gap: 0.5rem;
    }
.navbar-nav .nav-link { 
    font-size: 0.95rem; 
    color: var(--text-light);
     padding: 0.5rem 0.75rem;
     }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { 
    color: var(--accent-color); 
}
/*Hero section */
 #hero img { 
    max-width: 100%;
     height: auto; 
    }
#hero .lead {
     font-family: var(--secondary-font);
     text-align: center; 
    }
/* Recipe section */ 
#recipes .card { 
    margin-bottom: 1.5rem;
 }
#recipes .card-footer { 
    font-weight: bold;
     color: var(--highlight-color-light);
      background-color: transparent; 
    }
/* Ingredients section */ 
#ingredients .table {
     font-size: 0.8rem; 
    }
.download-button { 
    display: block; 
    margin: 1rem auto;
     text-align: center;
     }
/* Contact form */ 
#contact-us { 
background-color: transparent;
 padding: 3rem 1rem; 
}
#contact-us h2 { 
    font-size: 2rem; 
    margin-bottom: 1.5rem;
 text-align: center;
  color: var(--secondary-color); 
}
#contact-us form {
     max-width: 600px;
      margin: auto; 
    }
form label {
     font-weight: 600; 
    }
form input, form textarea { 
    width: 100%;
     padding: 0.75rem;
      margin-bottom: 1rem;
       border: 1px solid #ccc; 
       border-radius: 4px; 
       font-family: var(--primary-font);
     }
form input:focus, form textarea:focus {
     outline: none;
      border-color: var(--accent-color);
     }
form button {
     background-color: var(--accent-color);
      border: none;
       color: #000;
        padding: 0.75rem 2rem;
         border-radius: 4px; 
         font-weight: bold; 
         cursor: pointer;
         }
form button:hover { 
    background-color: #e0a800; 
}
#success { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: column; 
            flex-direction: column;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center; 
     -webkit-box-align: center; 
         -ms-flex-align: center; 
             align-items: center;
      height: 100vh; 
    }
/*  Footer */
 footer { 
    background-color: var(--primary-color);
     color: var(--text-light);
      text-align: center;
       padding: 20px 0;
        -ms-flex-negative: 0;
            flex-shrink: 0; 
    }
/*Custom buttons*/
 .custom-button-filled { 
    border: 2px solid var(--highlight-color-light); 
    background-color: var(--highlight-color-light); 
    color: white; 
}
.custom-button-filled:hover { 
    border: 2px solid var(--secondary-color);
     background-color: var(--secondary-color);
      color: white; 
    }
.custom-button-outline { 
    border: 3px solid var(--highlight-color-light);
     padding: 7px 25px;
      color: var(--highlight-color-light); 
    }
/*Media queries*/
 @media (max-width: 768px) { 
    .navbar-brand { font-size: 1.1rem; 
    }
.navbar-nav .nav-link { 
    font-size: 0.9rem; 
}
section { 
    padding: 2rem 1rem; 
}
section h2 { 
    font-size: 1.5rem;
 }
#hero .lead, #hero h1, #hero p { 
    text-align: center;
 } 
}

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}