/* Sidebar styles */
    .sidebar {
      height: 100%;
      width: 250px;
      position: fixed;
      top: 0;
      left: -250px;
      background-color: #426A5A;
      overflow-x: hidden;
      transition: 0.3s;
      padding-top: 60px;
      box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    }

    .sidebar.open {
      left: 0;
    }

    .sidebar a {
      padding: 10px 20px;
      text-decoration: none;
      font-size: 18px;
      font-family: Exile;
      color: #A4C2A5;
      background-color:#426A5A;
      display: block;
      transition: 0.2s;
    }

    .sidebar a:hover {
      background-color: #A4C2A5;
      color:#426A5A;
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 30px;
      color: #fff;
      background: none;
      border: none;
      cursor: pointer;
    }

    /* Rounded menu button */
    .open-btn {
      font-size: 20px;
      cursor: pointer;
      background-color: #426A5A;
      color: #A4C2A5;
      font-family: Exile;
      padding: 10px 20px;
      border: none;
      border-radius: 50px;
      margin: 10px;
      transition: background-color 0.3s;
    }

    .open-btn:hover {
      background-color: #D282A6;
    }
    .Title {
        font-family: Fascinate;
        text-align: center;
        color: #4A4A48;
        font-size: 42px;
    }
    
    .paragraph1 {
        font-family: Lexend;
        text-align: center;
        color: #4A4A48;
        font-size: 20px;
    }
    
    .paragraph2 {
        font-family: Lexend;
        text-align: left;
        color: #4A4A48;
        font-size: 20px;
    }
    
    .paragraph3{
        font-family: Lexend;
        text-align: right;
        color: #4A4A48;
        font-size: 20px;
    }
    
    .paragraphbold {
        font-family: Lexend;
        text-align: center;
        color: #4A4A48;
        font-size: 20px;
        font-style: strong;
    }
    
    .heading {
        font-family: Lexend;
        text-align: left;
        color: #4A4A48;
        font-size: 25px;
    }
    
    .heading1 {
        font-family: Lexend;
        text-align: right;
        color: #4A4A48;
        font-size: 25px;
    }
    
    .homepagetitle {
        color: #D282A6;
        font-family: Fascinate;
        text-align: center;
        font-size: 42px;
    }
    
      .homepageparagraph {
        font-family: Lexend;
        text-align: center;
        color: #D282A6;
        font-size: 20px;
    }
    .html {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .ceramicsbody {
     background-image: url('background.png');
     background-repeat: no-repeat;
     background-size: cover;
     margin: 0;
     background-position: center;
     background-attachment: fixed;
     }
     .homebody {
     background-image: url('16b09a85-1316-4532-b97a-07f89bea5af7.png');
     background-repeat: repeat;
     background-size: cover;
     margin: 0;
     background-position: center;
     background-attachment: fixed;
     }
@media (max-width: 1024px) {
  .container {
    padding: 20px;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.5rem;
  }
}
    .paragraph {
        font-family: Lexend;
        color: #4A4A48;
        font-size: 20px;
    }