/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Afacad',serif;
    background-color: #F0D9C2;
    color: #fff;
    line-height: 1.6;
  }
  
  h2 {
    font-family: 'Afacad', serif;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }
  
  a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
  }
  
  a:hover {
    color: #d1b886;
  }
  
/* Main Grid Section */
.main-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 10px;
    height: 100vh;
    padding: 2rem;
  
    /* Define grid areas */
    grid-template-areas:
      "ramen ramen ramen ramen proof proof proof proof proof proof"
      "ramen ramen ramen ramen proof proof proof proof proof proof"
      "ramen ramen ramen ramen proof proof proof proof proof proof"
      "ramen ramen ramen ramen proof proof proof proof proof proof"
      "lefood lefood lefood lefood proof proof proof proof proof proof"
      "lefood lefood lefood lefood proof proof proof proof proof proof"
      "lefood lefood lefood lefood proof proof proof proof proof proof"
      "lefood lefood lefood lefood kompassion kompassion kompassion kompassion kompassion kompassion"
      "lefood lefood lefood lefood kompassion kompassion kompassion kompassion kompassion kompassion"
      "lefood lefood lefood lefood kompassion kompassion kompassion kompassion kompassion kompassion";
  }

  .read-more {
    font-size: clamp(18px, 2vw, 30px);  
    color: #fff;  
    text-decoration: none;  
    display: inline-block; 
    margin-top: 0; 
}

  .categories {          
    border-radius: 12px;      
    background-color: #6a6866; 
    margin: 2rem;   
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);          
  }
  
  .cat-grid{
    display: grid;
    gap: 10px;
    padding: 10px;
    grid-template-columns: repeat(5, 1fr);
  }
  
  .travel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  section {
    margin-bottom: 3rem;
  }
  

.card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.05);
}

.overlay {
    font-size: 1.5rem;
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding: 1rem;
    overflow: hidden;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.2);

  }
  
  .card:hover .overlay {
    opacity: 1;
  }
  
  .overlay h2,
  .overlay{
    font-size: clamp(25px, 3vw, 40px);
    margin: 0.5rem 0; 
  }

.overlay h3 {
  font-size: 1.5rem;
  text-align: center;
  position: absolute;
  padding: 10px;
  top: 0;                  
  left: 0;
  right: 0;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  
}


.main h1 {
    font-size: clamp(1.8em, 5vw, 2.5em);
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding-top: 20px;  
    margin-top: 90px;
}

.cat h6 {
    font-size: clamp(1.8em, 5vw, 2.5em);
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding-bottom: 20px;  
}



/* Assign grid-area names to specific cards */
.item1 {
    grid-area: ramen;
  }
  
  .item2 {
    grid-area: lefood;
  }
  
  .item3 {
    grid-area: proof;
  }
  
  .item4 {
    grid-area: kompassion;
  }
  

  .travel-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .travel-section {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  
  /* Background and Layout */
  .background-container {
    background: url('../IMAGES/hk.jpg') center/cover no-repeat;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  /* Left Section: Title */
  .travel-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 3rem;
  }
  
  .travel-title h1 {
    font-size: 4rem;
    line-height: 1.1;
    color: #fff;
    text-shadow: 2px 2px #2a2929;
  }
  
  /* Right Section: Travel Cards */
  .travel-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
  }
  
  .travel-card {
    position: relative;
    width: 80%;
    max-width: 450px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
  }
  
  .travel-card img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .travel-card:hover img {
    transform: scale(1.05);
  }
  
  .travel-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    color: #fff;
  }
  
  .travel-card-overlay h2 {
    font-size: 2rem;
    font-family: 'Afacad', serif;
  }
  
  .travel-card-overlay p {
    font-size: 1rem;
    font-family: 'Afacad', sans-serif;
  }
  

/* Responsive Design */
@media (max-width: 768px) {

    .background-container {
        grid-template-columns: 1fr;
      }

      .cat-grid {
        display: block;       /* Switch to block layout */
        padding: 0;
      }
    
      .cat-grid .card {
        margin-bottom: 1rem;  /* Space between cards */
        width: 100%;          /* Full width for each card */
      }

      .cat-grid {
        display: flex;           /* Switch to a flex layout */
        flex-direction: column;  /* Stack items vertically */
        padding: 0;
        gap: 0;                  /* Remove gaps between items */
      }
    
      .cat-grid .card {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #6a6866; /* Maintain background color */
        padding: 1rem;             /* Add padding for touch-friendly click areas */
        border-radius: 8px;
        margin-bottom: 0.5rem;     /* Add small spacing between items */
        cursor: pointer;
      }
    
      .cat-grid .card img {
        display: none;             /* Hide images */
      }
    
      .cat-grid .overlay {
        position: static;          /* Reset overlay positioning */
        text-shadow: none;         /* Remove text shadow for a cleaner look */
        font-size: 1.2rem;         /* Adjust font size for readability */
        color: #fff;               /* Ensure text color remains visible */
      }
    
      .cat-grid .card:hover {
        background-color: #555;    /* Add a hover effect for clickable options */
      }
    }
    
      .travel-title {
        justify-content: center;
        text-align: center;
        padding-left: 0;
        padding-top: 3rem;
      }
    
      .travel-title h1 {
        font-size: 2.5rem;
      }
    
      .travel-cards {
        padding: 1rem;
      }
    
      .travel-card-overlay h2 {
        font-size: 1.5rem;
      }
    
      .travel-card-overlay p {
        font-size: 0.875rem;
      }

@media (max-width: 568px) {
    .main-grid {
      grid-template-areas:
        "ramen"
        "proof"
        "lefood"
        "kompassion";
      grid-template-columns: 2fr;
      grid-template-rows: auto;
      transition: all 0.5s ease;
    }
}