* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #EFE9DA;
  color: #0c0c0c;
  display: flex;
  flex-direction: column;
}



header {
  background: #800000;
  color: #fff;
  padding: 15px 20px;
}


.nav-brand {
  display: flex;
  align-items: center;
}


.logo-text {
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
}


nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
 /* margin: auto; */
}



nav a {
  color: #fff;
  text-decoration: none;
  
}

nav a:hover {
  color: #FEBE10;
}

.nav-icons {
  display: flex;
  align-items: center;  /* corrected "right" to "center" */
  gap: 15px; /* this is the desired spacing */
}



.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}




/* ========== FULLSCREEN MOBILE MENU ========== */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  background-color: #800000;
  flex-direction: column;
  padding-top: 80px;
  padding-left: 20px;
  gap: 20px;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 1000;
  display: flex; /* always flex, we just hide it using transform */
}

.menu.show {
  transform: translateX(0);
}

/* Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Lock scroll when menu is active */
body.lock-scroll {
  overflow: hidden;
}




main {
  flex: 1;
}

footer {
  background-color: #800000;
  color: #fff;
  text-align: center;
  padding: 20px;
}


/****** This is the row that contains the text and images *************/
.container-for-row.home {
  width: 100%;
  margin: 0px auto 0 auto; /* 0px of space above the row */
}


.row.home {
  text-align: center;
  background: #e4d5b7;
}


.col-2.home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.col-2.home.text.main {
  padding: 60px 40px;
}



.title {
  font-size: 2rem; /* mobile default */
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 1.1rem; /* mobile default */
  margin-bottom: 35px;
  color: #000;
  text-align: center;
}

.btn {
  background-color: #800000;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
}


.nav-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* global spacing between all icons */
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

/* Optional: make sure mobile menu icon is never squeezed */
.mobile-menu-toggle {
  cursor: pointer;
}


/*************************** Start of 768px media queries ************************/

@media (min-width: 768px) {


  .mobile-menu-toggle {
    margin-left: 10px; /* extra space from the cart icon */
  }


.mobile-menu-toggle {
  display: none;
}


.menu {
    position: static;
    transform: none;
    height: auto;
    width: auto;
    flex-direction: row;
    padding: 0;
    gap: 10px;
    background-color: transparent;
    display: flex;
  }

  .menu-overlay {
    display: none;
  }



    nav a {
      
      margin: 0 10px;
      transition: color 0.3s ease;
    }


    .menu a i {
      margin-left: 0;
      font-size: 1.1rem;
    }


    body {
      display: flex;
      flex-direction: column;
    }


    .row.home {
      display: flex;
      align-items: stretch; /* <-- NEW: stretches both columns to same height */
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0; /* remove padding so image goes edge to edge */
      /*min-height: 350px; /* <-- you can tweak this */
    }


    .col-2.home {
      flex-basis: 50%;
      min-width: 300px;
    }


    .col-2.home.text.main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      
    }
    
    .btn-wrapper {
      text-align: left;
   }


    .btn:hover {
      background: #660000; /* or #5a0000 for more contrast */
      color: #FEBE10;
    }



    .btn:focus {
      outline: 2px solid #FEBE10;
      outline-offset: 2px;
    }


    .title {
        font-size: 3.5vw;
        text-align: left;
      }

      .subtitle {
        font-size: 1.6vw;
        text-align: left;
      }


    .btn {
      
      transition: background 0.3s ease;

    }


} /*********************** End of 768px media queries *******************/


/**********************Start of 1024px media queries *****************/

@media (min-width: 1024px) {


      .col-2.home.text.main {
         /* max-width: 500px; */
          margin: 0 auto;
      }


}


@media (max-width: 1018px) {
  


  .mobile-menu-toggle {
    display: block;
  }

  .nav-icons {
    display: flex;
    gap: 15px;  /* ✅ match desktop spacing */
  }



  nav {
    
    padding-left: 0px;
    padding-right: 10px;
  }

  .nav-brand {
    margin-right: auto;
  }

  .nav-right {
    margin-left: 0;
  }

  /* Hide icons from .menu on mobile to avoid duplicates */
  .menu a i.fa-heart,
  .menu a i.fa-shopping-cart {
    display: none;
  }
}



/********************* End of 1024px media queries ************************/
  



  @media (min-width: 1019px) {
  .nav-icons {
    gap: 0px; /* or even 6px if you want them tighter */
  }
}




@media (max-width: 1030px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    background-color: #800000;
    flex-direction: column;
    padding-top: 80px;
    padding-left: 20px;
    gap: 20px;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: 1000;
    display: flex; /* Always flex so transform works */
  }

  .menu.show {
    transform: translateX(0);
  }

  .mobile-menu-toggle {
    display: block;
  }


  .nav-icons {
    gap: 15px; /* Increase spacing between icons */
  }

  .mobile-menu-toggle {
    margin-left: 10px; /* Adds space specifically between cart and menu icon */
  }


  
}