header{
    display:flex;
     padding-top:20px;
     background: #1A1008;
     align-items:center;
     justify-content:space-between;
     padding:16px 40px;
}
nav{
  display: flex;
  justify-content:center;
    width:100%;
    gap:20px;
    font-size:18px;
        
}
a{
        text-decoration: none;
}
.nav-btn{
color:#FAF7F2 ;
font-family: 'Jost', sans-serif;
transition: transform 0.2s ease;
}

.nav-btn:hover{
    color:#D4B896;
     transform: scale(1.1);

}

body{
    margin:0;
    padding:0;
}
.logo{
font-family:var(--font-heading);
color:#FAF7F2 ;
font-size:20px;
font-weight:800;
white-space:nowrap;

}
:root{
    --font-heading:'Playfair Display', serif;
    --font-body:'Jost', sans-serif;

}
.main-btn{
    color:#1A1008;
    background-color:#FAF7F2;
    border-radius:10px;
    font-family: var(--font-body);
    transition: background-color 0.2s ease;
    text-align:center;
    white-space:nowrap;
    padding:10px;
}
.main-btn:hover{
    background-color:#D4B896;
    transform: scale(1.1);
    color:#1A1008; 
}
.hero{
    background-image:url('images/coffee-main.jpg');
    background-size:cover;
    background-position:70% center;
    background-repeat:no-repeat;
    min-height:100vh;
    position:relative;
   padding: 180px 60px;
   display:flex;
   flex-direction:column;
   justify-content:center;
  
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
h1{
    color: #FAF7F2;  
     font-family: 'Playfair Display', serif;
     font-size:56px;
     display:block;
     font-weight: 700;
      line-height:1.1;
      margin:0;
      padding-bottom:10px;

}
.description-s{
    color:#D4B896;
    font-family: 'Jost', sans-serif;
    line-height:1.7;
    font-weight:500;
    margin:0;
    font-size:18px;
    
}
.hero-btn{
    color:#1A1008;
    background-color:#FAF7F2;
    border-radius:10px;
    font-family: var(--font-body);
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-align:center;
    display:block;
    width:fit-content;
    margin:20px 0;
    padding:15px 30px;
    font-size:18px;
    
}
.hero-btn:hover{
    color:#D4B896;
     transform: scale(1.1);

}
.highlights{
    background-color:#FAF7F2;
    padding-left:60px;
    padding-right:60px;
    padding-bottom:70px;

}
.subtext{
    color:#B07B52;
    letter-spacing: 2px;
    font-family:'Jost', sans-serif;
    font-size:18px;
    padding-top:70px;
    padding-bottom:20px;

}
h2{
    font-family:'Playfair Display', serif;
    color:#1A1008;
    font-weight:500;
    font-size:45px;
}
.highlight-btn{
      color:#1A1008;
    border:2px solid #1A1008;
    border-radius:15px;
    font-family: var(--font-body);
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-align:center;
    display:block;
    padding:15px 30px;
    font-size:18px;
    max-width:250px;
    
}
.highlight-btn:hover{
    color:#D4B896;
     transform: scale(1.1);

}


.highlight-header{
    display:flex;
    justify-content:space-between;
}
.menu-boxes{
    display:flex;
    gap:20px;
    padding-top:50px;
   
}
.box img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:12px;
    display:block;
}
.box{
     background-color:#F0E8DC;
     padding-bottom:30px;
     border-radius:8px;
     padding:16px;
     flex:1;
     display:flex;
     flex-direction:column;
     transition: transform 0.2s ease;

}
.menu{
    font-family:'Jost', sans-serif;
    color:#1A1008;
    font-size:18px;
    font-weight:500;
}
.description{
font-family:'Jost', sans-serif;
color:#6B3F1F;
}
.price{
    font-family:'Jost', sans-serif;
    color:#B07B52;
    font-weight:500;
    font-size:15px;
    margin-top:auto;
    padding-top:10px;
}
.box:hover{
    transform: scale(1.1);
}
.visit-box{
    background-color:#2C1A0E;
    display:flex;
    justify-content:flex-start;
    align-items: flex-start;
    padding-top:80px;
   gap:60px;
    position:relative;
    overflow:hidden;
    padding-bottom:70px;

}
h3{
    font-family:'Playfair Display', serif;
    color:#FAF7F2;
    font-weight:300;
    font-size:45px;
}
.visit-btn{
       color:#FAF7F2;
    border:2px solid #FAF7F2;
    border-radius:15px;
    font-family: 'Jost', sans-serif;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-align:center;
    display:block;
    padding:15px 30px;
    font-size:18px;
    width:fit-content;
    
}
.visit-btn:hover{
    
     transform: scale(1.1);

}
.left{
    width:40%;
 display:flex;
 flex-direction:column;
 justify-content: center;
 gap:16px;
 padding:20px 60px;
 flex:0 0 auto;
 position:relative;
 z-index:2;
 align-items:flex-start;

}
.right{
    width:25%;
    display:flex;
    flex-direction: column;
    justify-content: center;;
    gap:16px;
    max-width:280px;
    flex:0 0 auto;
    position:relative;
    z-index:2;
    padding-top:15px;
}
.info-item{
    display:flex;
    align-items: center;
    gap:12px;
}
.info-item i{
    color:#D4B896;
    font-size:18px;
}
.address{
    font-family:'Jost', sans-serif;
    color:#D4B896;
    font-size:20px;
    margin:0;
}
.img-visit{
position:absolute;
top:0;
right:0;
height:100%;
width:60%;
object-fit:cover;
z-index:0;
}
.visit-box::before {
  content: '';
  position: absolute;     /* dark overlay on top of the image */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, #2C1A0E 40%, rgba(44,26,14,0.5) 100%);  /* solid dark on left, fading to transparent on right so image peeks through */
  z-index: 1;
}
.text-visit{
    color:#B07B52;
    letter-spacing: 2px;
    font-family:'Jost', sans-serif;
    font-size:18px;
  
}
footer{
    padding:50px;
    background-color:#2C1A0E;
    display:flex;
    justify-content:space-between;
    text-align:center;
}
.footer-txt{
    color:#FAF7F2;
     font-family:'Jost', sans-serif;
     margin:0 auto;
}
.menu-main-box{
    background-image:url('images/menu-main.jpg');
    background-size:cover;
    background-position:60% 70%;
    background-repeat:no-repeat;
    min-height:80vh;
    position:relative;
    padding:80px 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.menu-main-box::before{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(to right, #1A1008 45%, rgba(26, 16, 8, 0) 75%);
    z-index: 1;
}
.menu-main-box *{
    position:relative;
    z-index: 1;
}
.about-us-box{
    background-image:url('images/about-us-main.jpg');
    background-size:cover;
    background-position:80% 70%;
    background-repeat:no-repeat;
    min-height:80vh;
    position:relative;
    padding:80px 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.about-us-box::before{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(to right, #1A1008 45%, rgba(26, 16, 8, 0) 75%);
    z-index: 1;
}
.about-us-box *{
    position:relative;
    z-index: 1;

}

.item-name{
font-family:'Jost', sans-serif;
color:#1A1008;
font-size:18px;
font-weight: 500;
}
.menu{
    background-color:#FAF7F2;
    padding-left:60px;
    padding-right:60px;
}
.subdescription{
    font-family:'Jost', sans-serif;
    color:#6B3F1F;
    font-size:16px;
    line-height:1.5;
}
.price-item{
    color:#1A1008;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:15px;
    white-space:nowrap;
}
.item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid #F0E8DC;
}
.img-menu{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;
}
.item-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
   
}
.main-coffee{
   width:100%;
   height:250px;
   border-radius:8px;
    object-fit:cover;
    margin-top:20px;
    flex-shrink:0;
    

}
.coffee{
    display:flex;
    gap:80px;
    padding:60px 60px 0px 60px;
    align-items:flex-start;


}
.coffee-left{
    flex:1;
}
.coffee-right{
    margin-top:60px;
   padding:24px;
   width:480px;
   flex-shrink:0;
   border-radius: 12px;
   background-color:#F0E8DC;
   align-self:flex-start;
}
.add-on{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
}
.add-on-text{
    font-family:'Jost', sans-serif;
    color:#B07B52;  
    font-size:12px;
    font-weight:500;
    letter-spacing:0.15em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.add-on-subtext{
    font-family:'Jost', sans-serif;
    color:#6B3F1F;  
    font-size:14px;
    font-weight:500;
   
}
.add-on-price{
    font-family:'Jost', sans-serif;
    color:#6B3F1F;
    font-size:14px;
}
.treats-main{
    width:100%;
    height:450px;
    border-radius:12px;
    object-fit:cover;
  


}
.treats{
    display:flex;
    gap:250px;
    padding:0px 60px 60px 60px;
    align-items:flex-start;
    flex:1;


}
.treats-right{
    flex-shrink:0;
    width:600px;
    align-self:flex-start;
    margin-top:80px;
    flex:1;
}
.container{
    background-color:#7a716a;
    padding:60px;
    text-align:center;
   display:flex;
   justify-content: center;
}
.cont{
    font-family: 'Jost', sans-serif;
    font-size:25px;
    color:#FAF7F2;
    font-weight:500;
}
.container i{
    color:#FAF7F2;
    font-size:25px;
}
.desc{
    font-family:'Jost', sans-serif;
    color:#FAF7F2;
    font-size:25px;

}
.under-desc{
    font-family:'Jost', sans-serif;
    color:#D4B896;
    font-size:18px;
    padding-bottom:30px;
}
.about-us-text{
    padding-left:60px;
    max-width:40%;

}
.about{
   padding:12px 40px;

}

.second-box{
    background-color:#FAF7F2;
  padding-left:60px;
  padding-right:60px;
  display:flex;
  align-items:center;
  gap:60px;
  padding-top:80px;
  padding-bottom:80px;
}
.about-img{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:12px;
}
.left-about{
    flex:1;
   
    display:flex;
    flex-direction:column;
    gap:16px;
    justify-content: center;
}
.right-about{
   flex:1;
   display:flex;
   justify-content:center;
}

.values{
    background-color:#FAF7F2;
    display:flex;
    padding:60px;
    gap:40px;

}
.value-box{
    text-align:center;
    line-height: 1.5;
    flex:1;
}
.values i{
    color:#B07B52;
    font-size:35px;
    padding-bottom:10px;
}
.value-text{
    font-family:'Jost', sans-serif;
    color:#1A1008;
    font-size:25px;
    font-weight:500;
}
.description{
    font-family:'Jost', sans-serif;
    color:#6B3F1F;
    font-size:18px;
}
.welcome-section {
  display: flex;
  min-height: 400px;
  background-color: #2C1A0E;
}

.welcome-img {
  width: 50%;
  object-fit: cover;
  display: block;
}

.welcome-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px;
  gap: 24px;
}

.welcome-heading {
  font-family: 'Playfair Display', serif;
  color: #FAF7F2;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}

.welcome-btn {
  font-family: 'Jost', sans-serif;
  color: #1A1008;
  background-color: #FAF7F2;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.08em;
}
.welcome-btn:hover{
    background-color: #D4B896;
    transform: scale(1.1);
}
.visit-text{
    padding-left:60px;
    max-width:40%;

}
.visit-cont{
    background-image:url('images/about-us-main.jpg');
    background-size:cover;
    background-position:70% 50%;
    background-repeat:no-repeat;
    min-height:60vh;
    position:relative;
    padding:80px 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.visit-cont::before{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(to right, #1A1008 30%, rgba(26, 16, 8, 0) 75%);
    z-index: 1;
}
.visit-cont *{
    position:relative;
    z-index: 1;

}
.address-cont{
   padding-left:60px;
   padding-right:60px;
   background-color:#FAF7F2;
   padding-bottom:60px;
   display: flex;
   align-items:flex-start;
   gap:60px;

}
.find-us-text{
    font-family:'Playfair Display', serif;
    color:#1A1008;
    font-size:38px;
    font-weight:400;
    line-height:1.2;
    margin:0;
    padding-bottom:20px;
    max-width:35%;
}
.hours-text{
    font-family:'Jost', sans-serif;
    color:#1A1008;
    font-size:18px;
    font-weight:500;
    margin:0;
}
.hours{
    font-family:'Jost', sans-serif;
    color:#6B3F1F;
    font-size:16px;
    margin:0;
    font-weight:300;
}
.hours-item{
    line-height:1.5;
    display:flex;
    gap:20px;
    justify-content: space-between;
    padding:12px 0;
    border-bottom:1px solid #F0E8DC;
    
}
.left-address{
    flex:1;
    display:flex;
   flex-direction:column;
   gap:20px;
}
.right-hours{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:0;
    gap:20px;

}
.map{
    width:100%;
    height:450px;
    overflow:hidden;
}
.map iframe{
    width:100%;
    height:100%;
border:none;
display:block;
}
@media (max-width: 700px) {

  /* ============================================================
     HEADER — logo, 4 nav links, and a button all in one row will
     overflow badly under ~600px. Wrapping is the simple fix;
     a hamburger menu would look cleaner but needs JS — say the
     word if you want that built instead once you see how this
     looks.
     ============================================================ */
  header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
  }
  nav {
    gap: 14px;
    flex-wrap: wrap;
  }

  /* ============================================================
     HERO
     h1 at 56px plus 180px vertical padding is sized for a large
     desktop viewport — both need to come down substantially so
     the hero doesn't force scrolling through mostly empty padding
     before reaching any content.
     ============================================================ */
  .hero {
    padding: 100px 24px;
  }
  h1 {
    font-size: 34px;
  }
  .description-s {
    font-size: 16px;
   
  }

  /* ============================================================
     MENU HIGHLIGHTS
     ============================================================ */
  .highlights {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero h1, .hero .description-s {
    color: #1A1008; /* your dark brand brown, instead of white —
                        swapping to dark works here because the
                        mobile crop lands on the light, foamy part
                        of the latte art */
  }
  h2 {
    font-size: 30px;
  }
  .highlight-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* 4 boxes at flex:1 each would squeeze to under 100px wide on a
     phone — stacking is the standard fix for a card row like this,
     same pattern used throughout this conversation for every other
     site's card grids. */
  .menu-boxes {
    flex-direction: column;
  }

  /* ============================================================
     VISIT US
     Rebuilt as a plain stacked block — see the note above the
     code for why the desktop version (fixed %-widths + absolutely
     positioned background photo) can't just be scaled down.
     ============================================================ */
  .visit-box {
    flex-direction: column;
    padding: 50px 24px;
    gap: 32px;
  }
  .visit-box .left,
  .visit-box .right {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .img-visit {
    position: static;   /* drop out of the absolute-positioning trick
                            entirely, back into normal document flow */
    width: 100%;
    height: 220px;
    border-radius: 8px;
  }
  .visit-box::before {
    display: none; /* this gradient overlay was calibrated to fade
                        into the absolutely-positioned background
                        photo specifically — with the image now a
                        normal stacked block below the text instead
                        of behind it, the overlay has nothing
                        correct to sit on top of anymore */
  }
  h3 {
    font-size: 30px;
  }

  /* ============================================================
     FOOTER
     margin:0 auto on .footer-txt was fighting for center space
     against justify-content:space-between on a wide screen — on
     mobile, simplify to a clean stacked, centered footer instead.
     ============================================================ */
  footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 32px 24px;
  }
  .footer-txt {
    margin: 0;
  }

  .menu-main-box {
    padding: 70px 24px;
    min-height: 50vh;
  }
  .menu-main-box h1, .menu-main-box .description-s{
    color:#D4B896;
  }
  .menu-main-box::before {
    background: linear-gradient(to bottom, rgba(26,16,8,0.55), rgba(26,16,8,0.75));
  }

  .menu {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ============================================================
     COFFEE SECTION
     .coffee-right has a HARD-CODED width: 480px — that's not a
     max-width, it's a fixed width, so it will not shrink on its
     own and will force horizontal overflow on any screen under
     ~480px plus padding. This is the one override that matters
     most in this whole section.
     ============================================================ */
  .coffee {
    flex-direction: column;
    gap: 40px;
    padding: 50px 24px 0;
  }
  .coffee-right {
    width: 100%;       /* overrides the fixed 480px */
    margin-top: 0;
  }

  /* ============================================================
     MENU ITEM ROWS
     Keeping these as a row (icon-left, text-right) even on mobile —
     an 80px thumbnail still reads fine at phone width, and turning
     each into a stacked block would make a 6-10 item list feel very
     long. Just tightening the gap slightly.
     ============================================================ */
  .item {
    gap: 12px;
  }
  .img-menu {
    width: 64px;
    height: 64px;
  }

  /* ============================================================
     TREATS SECTION
     Two real problems here: gap:250px (meant to push a wide desktop
     photo far to the right of the list — utterly unworkable on a
     375px screen) and .treats-right's fixed width:600px, same
     category of bug as .coffee-right above.
     ============================================================ */
  .treats {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px 50px;
  }
  .treats-right {
    width: 100%;       /* overrides the fixed 600px */
    margin-top: 0;
  }
  .treats-main {
    height: 260px;      /* was 450px — a bit tall for a mobile-width
                            column at that fixed height */
  }

  /* ============================================================
     "MADE WITH LOVE" BAND
     ============================================================ */
  .container {
    padding: 40px 24px;
    flex-direction: column;
    gap: 12px;
  }
 


  /* ============================================================
     ABOUT HERO
     ============================================================ */
  .about-us-box {
    padding: 70px 24px;
    min-height: 50vh;
  }
  .about-us-box::before {
    background: linear-gradient(to bottom,  rgba(26,16,8,0.55), rgba(26,16,8,0.75));
  }
  .about-us-text {
    max-width: 100%;   /* was 40% */
    padding-left: 0;   /* the box itself already has 24px padding now */
  }
  .desc {
    font-size: 20px; /* was 25px */
  }
  .under-desc {
    font-size: 16px;
  }

  /* ============================================================
     "GOOD COFFEE. GOOD PEOPLE." SECTION
     ============================================================ */
  .second-box {
    flex-direction: column;
    padding: 50px 24px;
    gap: 32px;
  }
  h2 {
    font-size: 28px; /* was 45px */
  }
  .about-img {
    height: 100%; 
    width:100%;/* was a fixed 400px */
  }

  /* ============================================================
     VALUES ROW — 3 columns squeezed onto a phone screen would put
     each icon+heading+text under ~110px wide
     ============================================================ */
  .values {
    flex-direction: column;
    padding: 40px 24px;
    gap: 32px;
  }

  /* ============================================================
     "CAN'T WAIT TO WELCOME YOU" — 50/50 image+text split becomes
     stacked; image needs a real height once it's no longer
     constrained by sitting next to equal-height text
     ============================================================ */
  .welcome-section {
    flex-direction: column;
    min-height: auto;
  }
  .welcome-img {
    width: 100%;
    height: 240px;
  }
  .welcome-text {
    width: 100%;
    padding: 40px 24px;
  }
  .welcome-heading {
    font-size: 26px; /* was 38px */
  }

.container .cont,
.container .desc {
    font-size: 19px;
    text-align: center;
}

  /* ============================================================
     VISIT HERO
     Same horizontal-gradient issue as .menu-main-box / .about-us-box
     ============================================================ */
  .visit-cont {
    padding: 70px 24px;
    min-height: 40vh;
  }
  .visit-cont::before {
    background: linear-gradient(to bottom, rgba(26,16,8,0.55), rgba(26,16,8,0.75));
  }

  /* ============================================================
     FIND US / HOURS
     .find-us-text has the same max-width:35% issue as .about-us-text
     had — nowhere near enough room on a phone screen. The two
     columns (.left-address / .right-hours) also need to stack.
     ============================================================ */
  .address-cont {
    flex-direction: column;
    padding: 40px 24px;
    gap: 32px;
  }
  .find-us-text {
    max-width: 100%; /* was 35% */
  }

  /* ============================================================
     MAP
     Not broken, just tall relative to a narrow screen — trimming
     the height keeps it from eating most of the viewport.
     ============================================================ */
  .map {
    height: 300px; /* was fixed 450px */
  }

}