@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Monoton&family=Righteous&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Monoton&family=Righteous&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agbalumo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aladin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');

*{
  margin: 0;
  padding: 0;
}

body{
    max-width: 100%;   
}

.addpagefunctions{   
    height: 3.5rem;
    overflow: hidden;
    width: 100%;
    border: 1px solid transparent;
    border-bottom: 12px;
    position: relative;
    top: -0.66rem;
    background-image: linear-gradient(orange,white);

    } 
    .filter-large {
      display: flex;
      gap: 30px;
      align-items: end;
      flex-wrap: wrap;
    }

.dark .addpagefunctions{
  color: #ffffff;
}


#idbtn{
    background-image: linear-gradient(rgb(249, 131, 14),rgb(216, 127, 2));
    color: rgb(255, 255, 255);
    border: 0.1px solid white;
}

@media (min-width: 2200px) {
    .slider-container{
        top: 1.9rem;
    }
    .filter-large {
      gap: 20px;
    }
    .filter-large > * {
      min-width: 220px;
      font-size: 23px;
    }
.headerh1 h1{
    font-size: 62px;
      }
  }

  @media (max-width: 1000px) {
   
   #dropdownbutton{
    height: 2.3rem;
    top: 0.2rem;
    position: relative;
    background-color: rgba(227, 175, 7, 0.336);
    color: #ffffff;
     border: 0px;
    font-size: 17px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border-radius: 0;
   }
   
    .filter-small .dropdown-menu {
        padding: 20px;
        width: 100%;

        background-color: rgba(0, 16, 11, 0.712);
        z-index: 1055; /* Increase z-index above other elements */
        position: relative; /* Make sure it is positioned above */
      }
      .addpagefunctions{
        overflow: visible; 
        height: 2.3rem;
        position: relative;
      }
     .headerh1 h1{
         position: relative;
         top: -1rem;
     }   

    .filter-small .dropdown-menu input,
    .filter-small .dropdown-menu select {
      margin-bottom: 10px;
    }
  }
  
  @media (max-width: 999px) {
    .filtercetogy {
      display: flex; /* Flex layout on small screens */
      flex-direction: column; /* Stack the form fields vertically */
      gap: 20px; /* Add spacing between elements */
    }
  
    .filtercetogy .form-control,
    .filtercetogy .form-select {
      width: 100%; /* Ensure input fields and selects are full-width */
      margin-bottom: 10px; /* Spacing between form fields */
    }
  
    .filtercetogy .btn {
      width: 100%; /* Ensure buttons are full-width */
      margin-bottom: 10px; /* Spacing between buttons */
    }
  }
  
  @media (max-width: 992px) {
   .slider-container{
        top: -0.84rem;
    }
     .addpagefunctions{
        top: -1rem;
      }
   
  }

/* On small screens, stack elements */
@media (max-width: 768px) {
    .filter-group {
        flex-direction: column;
        align-items: stretch; /* Make elements take full width */
    }

    .filter-group input,
    .filter-group select,
    .filter-group button {
        width: 100%;
    }
}
.headerh1{
    color: #030303c4;
    font-size: 32px;
      font-family: "Kanit", sans-serif;
    font-weight: 300;
    top: 1.5rem;
    position: relative;
    z-index: 0;
    text-align: center;   
}

.headerh2{
    color: #030303c4;
    font-size: 32px;
    font-family: "DM Serif Text", serif;
    font-weight: 50;
    top: 1rem;
    position: relative;
    z-index: 0;
    text-align: center;   
}

.pagination{
    position: relative;
    top: 3rem;
    left: 10%;
    width: 80%;
    z-index: 0;
}