h2{
    text-align: center;
    margin-bottom: 5%;
    }
    
    .maincontent {
      max-width: 100%;
      margin: 0 auto;
      padding: 0;
      border: none;
      margin-top: 100px;
    }
    
    .portfolio-section {
    max-width: 95%;
    width: 100%;
    padding-block: 40px;
    margin-inline: auto;
    }
    
    /* -------------------------
        box gallery component
      -------------------------- */
    
      
      .gallery-wrapper {
      width: 95%;
      margin: 10px auto;
      padding: 40px 0px;
      text-align: center;
      }
        
        
        .box-gallery {
          display: flex;
          flex-wrap: wrap;
          padding: 0;
          width: 78%;
          position: relative;
          margin: auto;
    gap: 15px;
        }
        .box-gallery h3 {
          position: absolute;
          top: -70px;
          width: 100%;
          text-align: center;
        }
        .box-gallery .box-gallery-item {
          position: relative;
    flex: 0 1 17em;
          height: 300px;
          margin-inline: auto;
          overflow: hidden;
          transition: all 0.2s ease-in-out;
          border-radius: 5px;
      color: #0079c0;
      text-decoration: none;
        }
        .box-gallery .box-gallery-item i {
          position: absolute;
          bottom: 40%;
          left: 50%;
          margin: 0 0 -28px -28px;
          font-size: 2em !important;
          border-radius: 50%;
          padding: 10px;
          background: var(--accent-color);
          color: #fff;
          opacity: 0;
          transition: all 0.25s;
        }
    .box-gallery .box-gallery-item:last-of-type {
        margin-inline: 0;
    }
    
    
    .gallery-caption {
    color: #000000;
    text-decoration: none;
    }
      
      
        .box-gallery .box-gallery-item:hover {
          filter: drop-shadow(4px 4px 6px gray);
          transform: scale(1.05);
        }
        .box-gallery .box-gallery-item:hover i {
          bottom: 50%;
          opacity: 1;
        }
        .box-gallery .box-gallery-item:hover figure {
          opacity: 0.6;
        }
        .box-gallery .box-gallery-item figure {
          width: 100%;
          height: 88%;
          background-position: center center;
          background-repeat: no-repeat;
          -o-object-fit: cover;
             object-fit: cover;
          -o-object-position: center;
             object-position: center;
          background-size: cover;
        }
        .box-gallery .box-gallery-item figure:hover {
          filter: drop-shadow(4px 4px 6px gray);
          transform: scale(1.05);
        }/*# sourceMappingURL=Untitled-1.css.map */
      
      @media (max-width: 630px) {
        .box-gallery .box-gallery-item {
      max-width: 92%;
      width: 100%;
      height: fit-content;
      }
        .box-gallery .box-gallery-item figure {
      height: 360px;
      }
      }
    
    
    
    
    .project-gallery-wrapper {
      max-width: 1260px;
      margin-inline: auto;
      text-align: center;
    }
    
    
    .gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-block: 20px;
    }
    
    .project-image {
      position: relative;
      text-decoration: none;
      color: var(--accent-color);
      font-weight: 500;
      background-color: #ffffff;
    }
    
    .project-image img {
    max-width: 400px;
    width: 100%;
    }
    
    .project-image .material-symbols-outlined {
      position: absolute;
      top: 30%;
      left: 42%;
      font-size: 3em;
      opacity: 0;
    }
    
    .project-image p {
      position: absolute;
      top: 50%;
      left: 25%;
      font-size: 1.4em;
      opacity: 0;
      margin-bottom: 15px;
    }
    
    .img-stack:hover .project-image img{
      opacity: .22;
    }
    
    .project-image:hover p,
    .project-image:hover .material-symbols-outlined {
      opacity: 1;
      color: var(--accent-color);
    }
    
    .gallery-back-btn .material-symbols-outlined{
    vertical-align: middle;
    }
    
    
    .img-stack{
    width:300px;
    height: 220px;
    margin:0 auto;
    margin-top:2%;
    position: relative;
    }
    
    .img-stack a{
    width:288px;
    height:200px;
    position:absolute;
    display:block;
    border-radius:2px;
    box-shadow:0 0 10px rgba(0,0,0,.3);
    transition:margin .5s;
    -webkit-transition:margin .5s;
    }
    
    .img-stack img{
    width:288px;
    max-height:100%;
    }
    
    .img-stack a:first-of-type{
    margin-top:-5px;
    margin-left:-20px;
    z-index:2;
    transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    }
    
    .img-stack a:nth-of-type(2){
    margin-top:-5px;
    margin-left:-10px;
    z-index:1;
    }
    
    .img-stack a:last-of-type{
    transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    }