* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body, html {
      height: 100%;
      /* overflow: hidden; */
      background: #F5F5F5;
    }

    .font-helvetica{
        font-family: Arial, Helvetica, sans-serif;
        font-size:11px;
    }

    .font-times{
      font-family: 'Times New Roman', Times, serif;
      font-size:12px;
    }

     a{
      color:#000;
      text-decoration: none;
    }

    .pt-20{
      margin-top:20px;
    }

    .mt-110{
      margin-top:110px;
    }

    .no-mb{
      margin-bottom:0;
    }

    .home{
      overflow:hidden;
    }

    .pt-05{
      padding-top: 5px;
    }


 /* Menu */
  header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    .nav-links a {
      text-decoration: none;
      color: rgba(0,0,0,0.4);
      padding: 0;
      margin: 0;
    }
    /* .menu a.active {
       color: #000;
    } */
    .nav-links a.active{
      border-color:transparent;
      color:#000;
    }

    .nav-links a::after {
      content: ",";
    }

    .nav-links a:last-child::after {
      content: ""; /* remove comma after last item */
    }

    .brand {
        font-family:;
        font-size: 11px;
    }

    .tagline {
      font-size: 11px;
      text-align: center;
      flex-grow: 1;
      color: #444;
    }

    /* .menu-buttons {
      display: flex;
      gap: 5px;
    }

    .menu-buttons a{
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 11px;
        color:rgba(0,0,0,0.9);
        text-decoration: none;
    }
    
    .menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 10px 20px;
      background:none;
      z-index: 1000;
    } */

    .slideshow-container {
      position: relative;
      width: 100%;
      height: 100%;
      /* margin:0 10px 10px 10px; */
    }
    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      /* display: flex;
      justify-content: center;
      align-items: center; */
      opacity: 0;
      transition: opacity 1s ease-in-out;
      z-index: 0;
    }
    .slide img {
      cursor: pointer;
    }
    .slide.active {
      opacity: 1;
      z-index: 1;
    }
    .slide1{
      width: 810px;
      height: 539px;
      bottom: 40px;
      right: 15px;
    }
     .slide2{
       width: 460px;
      height: 691px;
      bottom: 60px;
      left: 10px;
    }
    .slide3{
        width: 1660px;
        /* height: 80%; */
        top:0;
        left: 10px;
    }
    .slide img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .caption {
      position: fixed;
      bottom: 10px;
      left: 10px;
      color: rgba(0,0,0,0.9);
      font-size: 11px;
      z-index: 1001;
      display: flex;
      flex-direction: row;
      gap: 44px;
    }

    .image-caption {
      font-size: 11px;
      padding-top:2px;
    }

    /* Work */
    /* .grid {
      display: grid;
      grid-template-columns: 1fr 2fr 3fr; 
      gap: var(--gap);
      align-items: start;
    } */

    /* .card{
      --bs-body-bg: transparent;
      --bs-card-border-width: none;
    } */


    .slideshow {
      /*width: min(700px, 100%);
      aspect-ratio: 700 / 467; /* keep 700x467 proportion */
      position: relative;
      /* margin-left: auto;  */
      overflow: hidden;
      user-select: none;
      position: relative;
    }


    .slideshow img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: pointer; /* indicate click-to-next */
    }


    .caption-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;              /* stick to bottom of slideshow */
      display: flex;
      /* justify-content: space-between;
      align-items: center; */
      padding: 8px 12px;
      color: #fff;
      font-size: 11px;
    }

    hr.line{
      width: 98.6%;
      margin: auto;
      padding-bottom: 12px;
    }

    .category2{
      margin-top:-3px;
    }

    /* About */
    .about-background{
      background-color: #B6B4B4;
    }

    @media only screen and (max-width: 1440px) {
      /* .slide1{
        bottom: 35px;
        right: 10px;
      }

      .slide3 img{
        width:85.5%;
      } */
    }

    /* for index coming soon */
    .align-items{
      align-items: center;
    }
    @media only screen and (min-width: 1681px) {
      .slide1{
        left: 50.5%;
      }
      
      .slide3{
        width:99%;
      }
    }

    @media (min-width: 1440px) and (max-width: 1680px){
      .slide1{
        max-width: 48%;
        height: auto;
      }
    }

    @media (max-width: 1680px){
      .slide3{
        width:98.5%;
      }
    }

    @media only screen and (max-width: 1440px) {
      .slide1{
        max-width: 48%;
        height: auto;
      }
    }

    @media only screen and (max-width: 1024px) {
      .slide1{
        max-width:47.2%;
      }

      /* .slide3{
        width: 96.5%;
      } */

      .slide3 {
        width: 97.5%;
      }
    }

    @media only screen and (max-width: 767px) {
      .align-items{
        align-items: flex-start;
      }

      .slide1{
        max-width: 96.5%;
        bottom: 12vh;
        left:0;
        right:0;
        margin: auto;
      }

      .wlpt-05{
        padding-top: 5px;
      }

      .slide2 {
        bottom: 90px;
      }

      .slide3 {
        width: 97%;
      }
    }

    @media only screen and (max-width: 575px) {
      .slide1{
        max-width: 95.5%;
      }

      .slide2{
        /* height: 100%;
        bottom: 0vh; */
      }

      .slide3 {
        width: 96.5%;
      }
    }

    @media only screen and (max-width: 480px) {
      .slide2{
        height: auto;
        width: 95%;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 12vh;
      }
    }


    @media only screen and (max-width: 425px) {
       .slide1{
        max-width: 95%;
      }
    }