body {
    margin: 0;
    min-height: 100vh;
    max-width: 100vw;
    background-color: var(--white);
    overflow: hidden; /* Hide scrollbars */
}

/* BOX */
.box{
    /* z-index: 1; */
    color: var(--black);
    margin-top: 4vh;
    margin-bottom: 10vh;
    margin-left: 20vw;
    margin-right: 20vw;
}
.small-box{
    background-color: var(--white);
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 5vw;
    padding-right: 5vw;
}
.gap-box{
    background-color: none;
    opacity: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
    grid-template-areas:
      "a b c d e"
}
.connect-box-left{
    grid-area: b;
    background-color: var(--white);
    margin-left: 2vw;
    margin-right: 2vw;
    padding-top: 5vh;
}
.connect-box-right{
    grid-area: d;
    background-color: var(--white);
    margin-left: 2vw;
    margin-right: 2vw;
    padding-top: 5vh;
}

.text-box{
    color: var(--black);
}
.nopadding {
padding-top: 0rem;
padding-bottom: 0rem;
padding-left: 0rem;
padding-right: 0rem;
}

          
/* MEDIA */
#bgimg {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--black);
    width: 100vw;
    height: 100vh;
    
    /* position: relative; */
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("BG-Normal.png");
    background-position: top;
    opacity: 100%;  
    transition: 0.5s;
  }

.about-image{
    max-width : 100%;
    height: auto;
    transition: 0.5s;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 10vw;
    padding-right: 10vw;
}


/* flip box */
.grid-passion{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    transition: 0.5s;
    justify-content: center;
}
.grid-quarter{
    gap: 0rem;
    padding: 0rem;
    transition: 0.5s;
}
        .passion-img{
            max-width : 75%;
            border-radius: 2rem;
            transition: 0.5s;
            border: solid var(--light-4);
        }
        
.flip-box {
    justify-content: center;
    justify-items: center;
    padding-top: 2rem;
    padding-bottom: 10rem;
  }
  
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-box-front {
    color: #323232;
  }
  
  .flip-box-back {
    transform: rotateY(180deg);
  }
  


   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */


 /* Media Queries (small)*/
 
 @media screen and (max-width: 800px) {


    #bgimg {
        background-image: url("BG-Small.png");
      }


      .small-hidden {
        display: none;
      }

/* BOX */
.box{
    margin-left: 7vw;
    margin-right: 7vw;
}
.small-box{
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 7.5vw;
    padding-right: 7.5vw;
}
.text-box{
}

.about-image{
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 0vw;
    padding-right: 0vw;
}

/* flip box */
.grid-passion{
    grid-template-columns: 1fr 1fr;
    gap: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
}
.grid-quarter{
    gap: 0rem;
    padding-bottom: 8rem;
    transition: 0.5s;
}
        .passion-img{
            max-width : 50%;
            border-radius: 1rem;
        }
        
.flip-box {
    padding-top: 0rem;
    padding-bottom: 3rem;
  }

}


 /* Media Queries (medium)*/
 @media (min-width: 500px) and (max-width: 1079px) {

    #bgimg {
        background-image: url("BG-Medium.png");
      }

/* BOX */
.box{
    margin-left: 10vw;
    margin-right: 10vw;
}
.small-box{
    padding-left: 5vw;
    padding-right: 5vw;
}
.text-box{
}


/* flip box */
.grid-passion{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: var(--light-5);
}
.grid-quarter{
    gap: 0rem;
    padding-bottom: 10rem;
    transition: 0.5s;
}
        .passion-img{
            max-width : 75%;
            border-radius: 2rem;
        }
        
.flip-box {
    padding-top: 2rem;
    padding-bottom: 5rem;
  }

 }


/* Media Queries (large)*/
 
@media screen and (min-width: 1400px) {


/* BOX */
.box{
    margin-left: 17.5vw;
    margin-right: 17.5vw;
}
.small-box{
    padding-left: 7.5vw;
    padding-right: 7.5vw;
}
.text-box{
}


    #bgimg {
        background-image: url("BG-Large.png");
      }


.about-image{
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 10vw;
    padding-right: 10vw;
}

}