.show {
    display: flex;
  }
  
  /* Landing Section */
  .LandingSection {
    background-image: 
      radial-gradient(#12113000, #12113054), 
      linear-gradient(to left top, #12113000, #12113081), 
      linear-gradient(90deg, #12113000, #121130cb), 
      url(../UI/Photos/Projects/LandingBg.png);
    padding: 50vh 10vw 0 10vw;
    position: relative;
    height: 50vh;
    color: #FFFF;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    background-position: 0px;
  }
  
  .LandingSection h2 {
    color: #FFB60C;
  }
  
  .LandingSection h3,
  .ProjectTiles-Tiles h3 {
    margin-top: 8px;
  }
  
  /* Heading */
  .Heading {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 30vw;
    text-align: right;
    height: fit-content;
  }

  .Heading h4 {
    font-weight: 400;
    margin-top: .5rem;
  }
  
  /* Filter - Desktop */
  .Filter-Desktop {
    position: absolute;
    bottom: 10%;
    left: 10%;
  }
  
  .Filter-Desktop-Inputs {
    display: flex;
    flex-direction: row;
    padding: 1vh 0 2vh 0;
    gap: 0.7vw;
  }
  
  .Filter-Desktop-Inputs-Location,
  .Filter-Desktop-Inputs-Specialty {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
  }
  
  .Filter-Desktop-Inputs-Location-dropdown,
  .Filter-Desktop-Inputs-Specialty-dropdown {
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit;
    background-color: white;
    border: 2px solid #FFB60C;
    color: #121130f4;
    font-size: 1.2rem;
    padding: 10%;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: center;

  }
  
  .Filter-Desktop-Inputs-Location-dropdown label,
  .Filter-Desktop-Inputs-Specialty-dropdown label {
    font-size: clamp(.6rem, 1.2vw, .9rem);
    gap: .2vw;
    display: flex;
    align-items: center;

  }
  

  
  /* Filter Buttons */
  .FilterButtons {
    width: fit-content;
    position: relative; 
    font-size: 1.2rem;
    font-weight: 400;
    color: white;
    border: 2px solid #FFB60C;
    display: flex;
    align-items: center;
    gap: 0.8vw;
    padding: clamp(3px, 4px, 6px) clamp(0.5em, 2vw, 2em);
  }
  
  .FilterButtons-ClearAll,
  .FilterButtonsMobile-ClearAll {
    color: white;
    font-weight: 400;
  }
  
  .FilterButtonsMobile-ClearAll {
    height: inherit;
    position: absolute;
    right: 10vw;
    z-index: 2;
  }

  .FilterButtons:hover span{
    color: #0d0c22 !important;
  } 
  .FilterButtons:hover{
    transition: all 0.3s ease-in-out;
    background-color: #FFB60C;
    color: #0d0c22 !important;

  }

   .FilterButtons-ClearAll:hover {
    color: #FFB60C;
   }

  /* Filter Selected Pills */
  .Filter-Desktop-Selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: 2.5vh;
    width: 50vw;
  }
  
  .selectedfilterpills {
    background-color: #FFB60C;
    width: fit-content;
    font-size: clamp(.8rem, 1vw, 1rem);
    font-weight: 400;
    color: #0d0c22;
    align-items: center;
    padding: 6px 12px 6px 12px;
    border-radius: 16px;
  }
  
  /* Filter - Mobile */
  .Filter-Mobile {
    display: none;
    width: 75vw;
    height: 6vh;
    padding: 0.5vh 5vw;
    border: 1px solid #FFB60C;
    border-radius: 5px;
    align-items: center;
  }
  
  .FilterCountMobile {
    background-color: #FFB60C;
    border-radius: 50px;
    padding: 5% 7%;
    margin-left: 1vw;
    color: #0d0c22;
  }
  
  /* Filter Mobile PopUp */
  .FitlerMobilePopUp {
    padding: 15vh 10vw 0 10vw;
    z-index: 5;
    width: 100vw;
    height: 100vh;
    position: fixed;
    box-sizing: border-box;
    background-color: white;
    color: #0d0c22 !important;
    flex-direction: column;
    display: none;
    gap: 2vh;
  }
  
  .FilterMobilePopUpCloseButton {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 5vh;
    left: 5vw;
  }
  
  .FilterMobilePopUpCloseButton span {
    color: #0d0c22 !important;
    font-size: clamp(1.5rem, 10vw, 5rem);
  }
  
  .FitlerMobilePopUp hr {
    border-top: 2px solid #f1efef;
    margin: 20px 0;
    width: 80vw;
  }
  
  .FilterMobilePopUp-SelectedFilters h2,
  .FilterMobilePopUp-Location h2,
  .FilterMobilePopUp-Specialty h2 {
    color: #0d0c22 !important;
    font-size: clamp(1.75rem, 1.5vw, 4rem);
    
  }
  
  .FilterMobilePopUp-SelectedFilters {
    display: flex;
    gap: 2vh;
    flex-direction: column;
  }

  .FilterMobilePopUp-Location {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    width: 100%;
  }
  
  .FilterMobilePopUp-Location-Selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
  }

  .FilterMobilePopUp-Location-SelectorsButton{
    width: fit-content;
    font-size: clamp(1em, 0.8vw, 1.5rem);
    font-weight: 500;
    color: #0d0c22;
    border: 2px solid #0d0c22;
    padding: clamp(2px, 3px, 4px) clamp(1em, 2.25vw, 2em);
    border-radius: 26px;
    align-items: center;
  }

  .FilterMobilePopUp-Location-SelectorsButton.selected {
    background-color: #FFB60C;
    color: #0d0c22;
    border: #0d0c22 2.5px solid;
  }
  
  .FilterMobilePopUp-Specialty-Checkboxes {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    margin-top: 2vh;
    font-weight: 400 ;
  }

  .FilterMobilePopUp-Specialty-Checkboxes label {
    display: flex;
    align-items: center;
    gap: 1vw;
  }

  .FilterMobilePopUpFilters-SelectedFilters-Pills {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    flex-direction: row;
    min-height: 5vh;
  }
  
  /* Filter Titles */
  .Filter-Title,
  .Filter-Title-Mobile {
    display: flex;
    gap: 0.5vw;
    align-items: center;
  }
  
  .Filter-Title h2,
  .ProjectTiles-Tiles h2 {
    font-size: clamp(2.5rem, 2vw, 4rem) !important;
    color: white;
  }
  
  .Filter-Title-Mobile h2 {
    font-size: clamp(1.25rem, 1vw, 2rem) !important;
    color: white;
  }
  
  .Filter-Title span,
  .Filter-Title-Mobile span {
    font-size: clamp(1.5rem, 2vw, 3rem) !important;
  }
  
  /* Project Tiles */
  .ProjectsSection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 7.5vh 10vw 20vh;
  }
  

  
  .ProjectsSection-Cards-img {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    border-radius: 10px;
  }

  .ProjectsSection-Cards-Info p {
    margin: 0.25rem 0 0 0;
  }
  .ProjectsSection-Cards-Info-Name {
    font-weight: 500;
    margin: 0;
  }
  

  /* CheckBox */


  .DesktopCheckBox {
    box-sizing: border-box;
    width: clamp(15px, 1.4vw, 20px);
    height: clamp(15px, 1.4vw, 20px);
    border: 2px solid #121130f4;
    background: none;
    accent-color: #FFB60C;
    display: inline-block;
  }


  .MobileCheckBox {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid #121130f4;
    background: none;
    accent-color: #FFB60C;
    display: inline-block;
  }
  
  /* Media Queries */
  @media (max-width: 650px) {
    .LandingSection {
      display: flex;
      flex-direction: column;
      gap: 5vh;
      padding: 20vh 10vw 10vh 10vw;
      align-items: center;
      justify-content: center;
    }
  
    .Heading {
      position: static;
      text-align: center;
      flex: auto;
      max-height: fit-content;
      width: 60vw;
    }
  
    .Filter-Desktop-Inputs,
    .Filter-Title {
      display: none;
    }
  
    .Filter-Mobile {
      display: flex;
    }

    .selectedfilterpills {
        background-color: #FFB60C;
        width: fit-content;
        font-size: 1rem;
        height: 2rem;
        font-weight: 500;
        color: #0d0c22;
        align-items: center;
        padding: clamp(2px, 3px, 4px) clamp(1em, 2.25vw, 2em);
        border-radius: 26px;
        transition: all 0.3s ease-in-out;

      }

      .Filter-Desktop-Selected {
        display: none;
      }
      
  }
  
  @media (max-width: 949px) {
    /* Add styles here if needed */
  }
  
  @media (min-width: 949px) {
    /* Add styles here if needed */
  }
  