/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars */
    margin: 0;
    padding: 0;
  }
  
  /* Base styles for the div class */
  .div {
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    display: grid;
    grid-template-columns: 300px 1fr 350px;
    position: relative;
    overflow: hidden;
    background-color: #f9f1ea;
  }
  
  /* 4K UHD (3840×2160) */
  @media screen and (min-width: 2560px) {
    .div {
      grid-template-columns: 400px 1fr 450px;
    }
  }
  
  /* QHD (2560×1440) */
  @media screen and (min-width: 1921px) and (max-width: 2559px) {
    .div {
      grid-template-columns: 350px 1fr 400px;
    }
  }
  
  /* Full HD (1920×1080) */
  @media screen and (min-width: 1681px) and (max-width: 1920px) {
    .div {
      grid-template-columns: 300px 1fr 350px;
    }
  }
  
  /* 1680×1050 */
  @media screen and (min-width: 1601px) and (max-width: 1680px) {
    .div {
      grid-template-columns: 280px 1fr 330px;
    }
  }
  
  /* 1600×900 */
  @media screen and (min-width: 1441px) and (max-width: 1600px) {
    .div {
      grid-template-columns: 260px 1fr 320px;
    }
  }
  
  /* 1440×900 */
  @media screen and (min-width: 1367px) and (max-width: 1440px) {
    .div {
      grid-template-columns: 250px 1fr 300px;
    }
  }
  
  /* 1366×768 */
  @media screen and (min-width: 1281px) and (max-width: 1366px) {
    .div {
      grid-template-columns: 240px 1fr 280px;
    }
  }
  
  /* 1280×1024 and 1280×800 */
  @media screen and (min-width: 1025px) and (max-width: 1280px) {
    .div {
      grid-template-columns: 220px 1fr 260px;
    }
  }
  
  /* 1024×768 */
  @media screen and (max-width: 1024px) {
    .div {
      grid-template-columns: 200px 1fr 240px;
    }
  }
  
  /* Tablet Breakpoint */
  @media screen and (max-width: 768px) {
    .div {
      grid-template-columns: 1fr;
      height: 100%;
      overflow-y: auto; /* Allow scrolling on mobile */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
  }
  
  /* Column content styles */
  .div > * {
    height: 100%;
   /* overflow-y: auto; */
    scrollbar-width: thin;
    scrollbar-color: #99582a #f9f1ea;
  }
  
  /* Custom scrollbar styling */
  .div > *::-webkit-scrollbar {
    width: 6px;
  }
  
  .div > *::-webkit-scrollbar-track {
    background: #f9f1ea;
  }
  
  .div > *::-webkit-scrollbar-thumb {
    background-color: #99582a;
    border-radius: 3px;
  }
  
  /* Fix for iOS viewport height */
  @supports (-webkit-touch-callout: none) {
    .div {
      height: -webkit-fill-available;
    }
  }
  
  /* Fix for potential scrollbar issues in different browsers */
  @-moz-document url-prefix() {
    .div {
      width: 100vw;
      height: 100vh;
    }
  }
  
  /* Edge and IE fixes */
  @supports (-ms-ime-align: auto) {
    .div {
      height: 100vh;
    }
  }
  
  /* Ensure content doesn't overflow */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }
  
  /* Container for each section */
  .feed,
  .frame-15,
  .overlap,
  .overlap-group {
    height: 100%;
    overflow-y: auto;
    background: white;
    border-radius: 10px;
    margin: 0;
    padding: 0;
  }
  
  /* Navbar fixes */
  .frame-13 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  
  /* Mobile bottom navigation */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: white;
  }
  
  /* Content adjustments for fixed navbar */
  @media screen and (max-width: 768px) {
    .div {
      padding-top: 80px; /* Height of navbar */
      padding-bottom: 60px; /* Height of bottom nav */
      height: 100vh;
    }
    
    /* Ensure smooth scrolling on mobile */
    .div > * {
      -webkit-overflow-scrolling: touch;
    }
  }
  
  /* Ensure no horizontal scrolling */
  .home-potters-clay {
    width: 100%;
    overflow-x: hidden;
  }