@font-face {
    font-family: 'poppinsregular';
    src: url('./Fonts/Poppins/poppins-regular-webfont.woff2') format('woff2'),
         url('./Fonts/Poppins/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'poppinsbold';
    src: url('./Fonts/Poppins/poppins-bold-webfont.woff2') format('woff2'),
         url('./Fonts/Poppins/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'poppinssemibold';
    src: url('./Fonts/Poppins/poppins-semibold-webfont.woff2') format('woff2'),
         url('./Fonts/Poppins/poppins-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
  body {
    font-family: poppinsregular;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    width: 1000px;
    margin: 0 auto;
    box-shadow: 0 0 20px #777777;
    user-select: none;
  }
  .phonenumber{
      text-decoration: none;
      color: #0095da;
  }

    header {
      background-color: #ffffff;
      color: #fff;
      padding: 10px 20px;
      height: 100px;
    }
    .hcolumn {
      flex: 1;
      margin: 0 auto;
      display: flex;
    }
    .hcontainer1 img{
      height: 100%;;
    }
    .hcontainer1{
      width: 100%;
      height: 100px;
      display: flex;
    }
    .hcontact{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .hcontact li{
      list-style-type: none;
      margin: 0 10px;
      font-size: 20px;
      color: #000000;
    }
    nav {
      display: flex;
      justify-content: center;
      background-color: #444;
      /*padding: 10px;*/
      font-size: 20px;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 20px;
      padding: 10px;
      font-family: poppinssemibold;
      display: block;
      transition: background-color 0.3s, color 0.3s;
    }
    nav a:hover {
      color: #ffffff;
      background-color: #a1a1a1;
      font-family: poppinssemibold;
    }
    nav a.active {
      color: #ffffff;
      background-color: #a1a1a1;
      font-family: poppinssemibold;
    }
    .hero {
      text-align: center;
      padding: 100px 20px;
      background-image: url('./Images/Index/banner-stage-podium.png');
      background-size: cover;
      background-position: center;
      color: #fff;
    }

    .hero h1 {
      font-family: poppinsbold;
      font-size: 40px;
      margin-bottom: 20px;
      color: #ffffff;
      text-shadow: #000000 0px 0px 20px;
      opacity: 1;
    }
    .hero p {
      font-family: poppinssemibold;
      font-size: 26px;
      color: #ffffff;
      text-shadow: #000000 0px 0px 20px;
    }
    .services {
      text-align: center;
      padding: 50px 20px;
      background-color: #fff;
    }
    .services h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .services p {
      font-size: 16px;
      color: #555;
      max-width: 600px;
      margin: 0 auto;
      margin-bottom: 20px;
      text-align: left;
    }
    .servicecontainer {
      display: flex;
    }
    .servicecolumn {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      border: none;
    }
    .servicecolumn img {
      width: 25%;
    }
    .aboutcolumn {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      border: none;
      text-align: left;
    }
    .aboutcolumn img {
      width: 85%;
      border-style: solid;
      border-width: 3px;
      border-color: #0095da;
      box-shadow: #0095da 0px 0px 3px;
    }
    .rentcolumn ul{
      margin-left: 8%;
      margin-right: 8%;
      text-align: left;
    }
    .rentcolumn h2{
      text-align: left;
      margin-left: 8%;
    }

    footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 20px;
    }
    .copyrightfooter {
      font-size: 14px;
      text-align: right;
      padding: 0.1%;
      color: #ffffff;
      background-color: #000000;
    }
    .copyrightfooter p{
      margin-right: 8px;
    }

    .collapsible {
      cursor: pointer;
      user-select: none;
      background-color: #ddd;
      padding: 30px;
      border-radius: 4px;
      margin-top: 8px;
      position: relative;
      overflow: hidden;
      font-size: 130%;
    }
    .collapsible-sales{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-AV-Equipment-Sales-Banner-2024.png');
      color: #ffffff;
    }
    .collapsible-video{
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./Images/Services/Podium-Service-Banner-Video.png');
      color: #ffffff;
    }
    .collapsible-stage-lighting{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Stage-Lighting.png');
      color: #ffffff;
    }
    .collapsible-drape{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Blue-Drape.png');
      color: #ffffff;
    }
    .collapsible-uplighting{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Uplighting-2.png');
      color: #ffffff;
    }
    .collapsible-audio{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Road-Case.png');
      color: #ffffff;
    }
    .collapsible-staging{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Staging.png');
      color: #ffffff;
    }
    .collapsible-installations{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Installations.png');
      color: #ffffff;
    }
    .collapsible-weekend-you-dj{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Weekend-You-DJ.png');
      color: #ffffff;
    }
    .collapsible-chez-lili{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Chez-Lili.png');
      color: #ffffff;
    }
    .collapsible-webcast-livestream{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-PTZ-Camera-Livestream-Webcast.jpg');
      color: #ffffff;
    }
    .collapsible-LED-Star-Drape{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-LED-Star-Drape.jpg');
      color: #ffffff;
    }
    .collapsible:after {
      content: '\002B';
      color: #ffffff;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    .collapsible.active:after {
          content: '\2212';
          color: #ffffff;
          font-weight: bold;
          float: right;
          margin-left: 5px;
      }
      .collapsible:hover {
          background-color: #ccc;
          transition: background-color 0.3s, color 0.3s;
      }
      .collapsible::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
        opacity: 0;
        transition: opacity 0.3s;
    }
    .collapsible:hover::before {
      opacity: 1;
    }

    .content {
      display: none;
      padding: 10px;
      margin-top: -4px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f9f9f9;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }

  .content ul{
      margin-left: 25%;
      text-align: left;
  }
  .content li{
    margin-left: -5%;
    margin-right: 20%;
  }
  .content img{
    width: 65%;
    border-style: solid;
    border-width: 3px;
    border-color: #0095da;
    box-shadow: #0095da 0px 0px 3px;
  }
  .service-contact-us-info li{
    font-size: larger;
    list-style: none;
    margin-right: 25%;
    margin-left: -16%;
  }
  .internal-link{
    text-decoration: none;
    color: #0095da;
  }

  .internal-link:hover{
      color: #0056b3;
      transition: color 0.2s ease-in-out;
  }
  .contact-us-info li{
    list-style-type: none;
    margin: 0 10px;
    font-size: 20px;
    color: #000000;
  }
  .review {
    border: 1px solid #0095da;
    padding: 1%;
    border-radius: 8px;
    margin-bottom: 1%;
    margin-right: 15%;
    margin-left: 15%;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 149, 218, 0.2);
    position: relative;
    text-align: left;

  }
  .review h2{
    font-size: 15px;
    margin-bottom: 1%;
    font-weight: lighter;
    margin-left: 10%;
    margin-right: 10%;
  }

  .blogcolumn {
    width: 30%;
    background-color: #fff;
    margin: 1%;
    padding: 1%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    cursor: pointer; /* Add pointer cursor for clickable effect */
}

.blogcolumn p{
  text-align: center;
  margin-top: 2%;
}

.blogcolumn img{
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: #0095da;
  box-shadow: #0095da 0px 0px 3px;
}

.blogcolumn:hover {
    transform: scale(1.05);
}

.blog-container {
  margin-left: 5%;
  margin-right: 5%;
  padding: 1%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.blog-content {
  line-height: 1.6;
}

.blog-content img{
  width: 70%;
  border-style: solid;
  border-width: 1px;
  border-color: #0095da;
  box-shadow: #0095da 0px 0px 3px;
  margin-left: 15%;
}

.blog-backbutton {
  display: inline-block;
  margin-top: 2%;
  margin-left: 2%;
  margin-bottom: 2%;
  padding: 1%;
  background-color: #444444;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.blog-backbutton:hover {
  background-color: #555555;
  transform: scale(1.05);
  cursor: pointer;
}

.service-button-container{
  display: inline-block;
  margin-top: 2%;
  margin-left: 2%;
  margin-bottom: 1%;
  padding: 1%;
  background-color: #444444;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.service-button-container p{
  color: #fff;
  margin-top: 2%;
}

.service-button-container:hover {
  background-color: #555555;
  transform: scale(1.05);
  cursor: pointer;
}

.service-page-button-container{
  margin-left: 20%;
  display: inline-block;
  margin-top: 2%;
  margin-bottom: 1%;
  padding: 1%;
  background-color: #444444;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.service-page-button-container p{
  color: #fff;
  margin-top: 2%;
}

.service-page-button-container:hover {
  background-color: #555555;
  transform: scale(1.05);
  cursor: pointer;
}

.service-page-container{
  display: flex;
  flex-direction: column;
}

.service-page-column{
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  border: none;
  text-align: left;
}

.service-page-column ul{
  text-align: left;
}

.service-page-column li{
  margin-left: 15%;
  margin-right: 20%;
}

.service-page-column h2{
  text-align: left;
  margin-left: 15%;

}

.service-page-column img{
  width: 70%;
  border-style: solid;
  border-width: 3px;
  border-color: #0095da;
  box-shadow: #0095da 0px 0px 3px;
  margin-left: 15%;
}

.equipment-ul {
  column-count: 4;
  column-gap: 1%;
  border: none;
}

.equipment-ul img {
  border: none;
  border-color: none;
  box-shadow: none;
}

.certscolumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.certs-header {
  width: 100%;
}

.logo-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.logo-cloud img {
  margin: 3%;
  width: 20%;
}



@media screen and (max-width:800px){
  body {
    font-family: poppinsregular;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 20px #777777;
    user-select: none;
  }
  .phonenumber{
      text-decoration: none;
      color: #0095da;
  }
  
    header {
      background-color: #ffffff;
      color: #fff;
      padding: 10px 20px;
      height: 50px;
    }
    .hcolumn {
      flex: 1;
      margin: 0 auto;
      display: flex;
    }
    .hcolumn img{
      height: 50%;
    }
    .hcontainer1{
      width: 100%;
      height: 100px;
      display: flex;
    }
    .hcontact{
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
    }
    .hcontact li{
      list-style-type: none;
      margin: 0 10px;
      font-size: 17px;
      color: #000000;
    }
    nav {
      display: flex;
      justify-content: center;
      background-color: #444;
      /*padding: 10px;*/
      font-size: 20px;
      flex-direction: column;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 20px;
      padding: 10px;
      font-family: poppinssemibold;
      display: block;
      transition: background-color 0.3s, color 0.3s;
    }
    nav a:hover {
      color: #ffffff;
      background-color: #a1a1a1;
      font-family: poppinssemibold;
    }
    nav a.active {
      color: #ffffff;
      background-color: #a1a1a1;
      font-family: poppinssemibold;
    }
    .hero {
      text-align: center;
      padding: 100px 20px;
      background-image: url('./Images/Index/banner-stage-podium.png');
      background-size: cover;
      background-position: center;
      color: #fff;
      max-width: 100%;
    }
  
    .hero h1 {
      font-family: poppinsbold;
      font-size: 30px;
      margin-bottom: 20px;
      color: #ffffff;
      text-shadow: #000000 0px 0px 20px;
      opacity: 1;
    }
    .hero p {
      font-family: poppinssemibold;
      font-size: 26px;
      color: #ffffff;
      text-shadow: #000000 0px 0px 20px;
    }
    .services {
      text-align: center;
      padding: 50px 20px;
      background-color: #fff;
    }
    .services h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .services p {
      font-size: 16px;
      color: #555;
      max-width: 600px;
      margin: 0 auto;
      margin-bottom: 20px;
      text-align: left;
    }
    .servicecontainer {
      display: flex;
      flex-direction: column;
      max-width: 100%;
    }
    .servicecolumn {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      border: none;
    }
    .servicecolumn img {
      width: 25%;
      max-width: 100%;
    }
    .aboutcolumn {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      border: none;
      text-align: left;
    }
    .aboutcolumn img {
      width: 85%;
      border-style: solid;
      border-width: 3px;
      border-color: #0095da;
      box-shadow: #0095da 0px 0px 3px;
    }
    .rentcolumn ul{
      margin-left: 8%;
      margin-right: 8%;
      text-align: left;
    }
    .rentcolumn h2{
      text-align: left;
      margin-left: 8%;
    }
  
    footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 20px;
    }
    .copyrightfooter {
      font-size: 14px;
      text-align: right;
      padding: 0.1%;
      color: #ffffff;
      background-color: #000000;
    }
    .copyrightfooter p{
      margin-right: 8px;
    }
  
    .collapsible {
      cursor: pointer;
      user-select: none;
      background-color: #ddd;
      padding: 30px;
      border-radius: 4px;
      margin-top: 8px;
      position: relative;
      overflow: hidden;
    }
    .collapsible-video{
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./Images/Services/Podium-Service-Banner-Video.png');
      color: #ffffff;
    }
    .collapsible-stage-lighting{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Stage-Lighting.png');
      color: #ffffff;
    }
    .collapsible-drape{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Blue-Drape.png');
      color: #ffffff;
    }
    .collapsible-uplighting{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Uplighting-2.png');
      color: #ffffff;
    }
    .collapsible-audio{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Road-Case.png');
      color: #ffffff;
    }
    .collapsible-staging{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./Images/Services/Podium-Service-Banner-Staging.png');
      color: #ffffff;
    }
    .collapsible-installations{
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Installations.png');
      color: #ffffff;
    }
    .collapsible-weekend-you-dj{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('./Images/Services/Podium-Service-Banner-Weekend-You-DJ.png');
      color: #ffffff;
    }
    .collapsible:after {
      content: '\002B';
      color: #ffffff;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    .collapsible.active:after {
          content: '\2212';
          color: #ffffff;
          font-weight: bold;
          float: right;
          margin-left: 5px;
      }
      .collapsible:hover {
          background-color: #ccc;
          transition: background-color 0.3s, color 0.3s;
      }
      .collapsible::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
        opacity: 0;
        transition: opacity 0.3s;
    }
    .collapsible:hover::before {
      opacity: 1;
    }
    .content {
      display: none;
      padding: 10px;
      margin-top: -4px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f9f9f9;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }  
  .content ul{
      margin-left: 25%;
      text-align: left;
  }
  .content li{
    margin-left: -35%;
  }
  .content img{
    width: 95%;
    border-style: solid;
    border-width: 3px;
    border-color: #0095da;
    box-shadow: #0095da 0px 0px 3px;
  }
  .service-contact-us-info li{
    font-size: larger;
    list-style: none;
    margin-left: -50%;
    margin-right: 2%;
  }

  .internal-link{
      text-decoration: none;
      color: #0095da;
  }

  .internal-link:hover{
      color: #0056b3;
      transition: color 0.2s ease-in-out;
  }
  .contact-us-info li{
      list-style-type: none;
      margin: 0 10px;
      font-size: 20px;
      color: #000000;
  }
  .review {
    border: 1px solid #0095da;
    padding: 1%;
    border-radius: 8px;
    margin-bottom: 4%;
    margin-right: 5%;
    margin-left: 5%;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 149, 218, 0.2);
    position: relative;
    text-align: left;

  }
  .review h2{
    font-size: 15px;
    margin-bottom: 1%;
    font-weight: lighter;
    margin-left: 5%;
    margin-right: 5%;
  }

  .blogcolumn {
    width: 100%;
    background-color: #fff;
    margin: 1%;
    padding: 1%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    cursor: pointer; /* Add pointer cursor for clickable effect */
}

.blogcolumn p{
  text-align: center;
  margin-top: 2%;
}

.blogcolumn:hover {
    transform: scale(1.05);
}

.blog-container {
  margin-left: 5%;
  margin-right: 5%;
  padding: 1%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.blog-content {
  line-height: 1.6;
}

.blog-backbutton {
  display: inline-block;
  margin-top: 2%;
  margin-left: 2%;
  margin-bottom: 2%;
  padding: 1%;
  background-color: #444444;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.service-button-container p{
  color: #fff;
  margin-top: 2%;
}

.blog-backbutton:hover {
  background-color: #555555;
  transform: scale(1.05);
  cursor: pointer;
}
.service-page-column li{
  margin-left: 2%;
}

.service-button-container:hover {
  background-color: #555555;
  transform: scale(1.05);
  cursor: pointer;
}

.service-page-button-container {
  margin-left: 4%;
}

.service-page-button-container p{
  color: #fff;
  margin-top: 2%;
  text-align: center;
}

.equipment-ul {
  column-count: 1;
  column-gap: 1%;
}


}