@font-face {
  font-family: arizona;
  src: url(./assets/fonts/fonnts.com-ABCArizonaFlareVariable-Trial.ttf);
}

@font-face {
  font-family: "gilroy-m";
  src: url(assets/fonts/Gilroy-Medium.woff2);
}

@font-face {
  font-family: "gilroy-r";
  src: url(assets/fonts/Gilroy-Regular.woff2);
}

@font-face {
  font-family: Inter;
  src: url(assets/fonts/Inter.woff2);
}

@-webkit-keyframes scrolling {
  from {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  to {
    -webkit-transform: translateX(calc(-90% + 16px));
            transform: translateX(calc(-90% + 16px));
  }
}

@keyframes scrolling {
  from {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  to {
    -webkit-transform: translateX(calc(-90% + 16px));
            transform: translateX(calc(-90% + 16px));
  }
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: arizona;
}

html,
body {
  height: 100vh;
  width: 100vw;
}


body {
  background-color: white;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

#main {
  position: relative;
}

#loader {
  height: 100vh;
  width: 100vw;
  background-color: #272829;
  position: fixed;
  z-index: 999999;
  overflow: hidden;
}

#loader img {
  height: 60vmin;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  
}
#loader #overlay {
  overflow: hidden;
  height: 0;
  width: 0;
  background-color: #000;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#nav {
  height: 10%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 3%;
  position: fixed;
  top: 0%;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.3);
}

#logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  /* width: 14 */
}

#nav #logo h1 span {
  font-family: Inter;
  font-size: 3.9vh;
}

#nav h3[data-scroll-to]{
  cursor:pointer;
}
#nav #logo h1 {
  margin-left: 8%;
  font-family: Inter;
  text-transform: uppercase;
  font-size: 2vh;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}

#nav img {
  height: 8vh;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

#nav-2 {
  height: 100%;
  width: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-family: gilroy-r;
}

#option1,
#option2,
#option3 {
  height: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 0.9vw;
  font-weight: 300;
}

#option1 {
  width: 40%;
}

#option2 {
  width: 10%;
  padding: 0 1%;
  font-size: 1vw;
}

#option3 {
  width: 35%;
}

#option3 i {
  font-size: 1vw;
}

#nav button {
  font-size: 1vmax;
  padding: 12px 20px;
  margin-left: 15px;
  border: black solid 1px;
  border-radius: 20px;
  background-color: #5c452c;
  color: white;
  cursor: pointer;
  -webkit-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

/* #nav button:hover {
  background-color: white;
  color: black;
} */

#nav button:hover div{
  scale: 2;
}
#nav button:hover h3{
  opacity: 1;
  -webkit-transition: all ease-in .6s;
  -o-transition: all ease-in .6s;
  transition: all ease-in .6s;

}
#nav button div{
  height: 100%;
  width: 100%;
  background-color: #25D366;
  position: absolute;
  bottom: -40%;
  left: 0;
  border-radius:50%;
  scale: 0;
  -webkit-transition: all ease .8s;
  -o-transition: all ease .8s;
  transition: all ease .8s;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
#nav button h3{
  height: 100%;
  width: 100%;
  /* background-color: red; */
  position: absolute;
  top: 25%;
  left: 0;
  text-align: center;
  font-size: 1vmax;
  /* padding: 8px 14px; */
  opacity: 0;
}


/* Mobile Responsive */
@media (max-width:600px) {

        #loader img {
          height: 20vh;
        }
        #loader #overlay {
          height: 20vh;
          width: 20vh;
        }


        #logo {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          height: 50%;
          /* width: 14 */
        }

        #nav #logo h1 span {
          font-family: Inter;
          font-size: 3vh;
        }

        #nav h3[data-scroll-to]{
          cursor:pointer;
        }
        #nav #logo h1 {
          margin-left: 10%;
          font-family: Inter;
          text-transform: uppercase;
          font-size: 1.5vh;
          font-weight: 400;
          letter-spacing: 0;
          text-align: center;
        }

        #nav img {
          height: 7vh;
          width: auto;
          -o-object-fit: cover;
             object-fit: cover;
        }

        #nav-2 {
          height: 100%;
          width: 30%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          font-family: gilroy-r;
        }

        #option1,
        #option2,
        #option3 {
          height: 80%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          font-size: 0.9vw;
          font-weight: 300;
        }

        #option1 {
          width: 40%;
          display: none;
        }

        #option2 {
          width: 10%;
          padding: 0 1%;
          font-size: 1vw;
          display: none;

        }

        #option3 {
          width: 35%;
          display: none;

        }

        #option3 i {
          font-size: 1vw;
        }

        #nav button {
          padding: 12px 14px;
          font-size: 1.6vh;
        }

        #nav button h3{
         font-size: 1.6vh;
        }

}
#page1 {
  height: 100vh;
  width: 100vw;
  background: url(./assets/images/hero-background.jpg);
  background-size: cover;
  overflow: hidden;
  position: relative;
}

#page1 #content {
  height: 40vh;
  width: 40vw;
  position: absolute;
  top: 25%;
  left: 14%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#page1 h1 {
  font-size: 5vmax;
  font-weight: 400;
  color: #433224;
  top: 25%;
  left: 10%;
  width: 30vw;
  font-family: "gilroy-r";
}
#page1 p {
  font-size: 1.4vw;
  font-weight: 300;
  color: #433224;
  width: 25vw;
  line-height: 1.5vw;
  font-family: "gilroy-r";
  margin-top: 10%;
}
@media (max-width:600px) {
      #page1 {
        height: 100vh;
        width: 100vw;
        background-size: cover;
        background-position: 45%   ;
        overflow: hidden;
        position: relative;
      }

      #page1 #content {
        height: 40vh;
        width: 50vw;
        position: absolute;
        top: 25%;
        left: 8%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }

      #page1 h1 {
        width: 90%;

      }
      #page1 p {
        font-size: 2.2vh;

        width: 100%;
        line-height: 2.4vh;

      }
}

#page2 {
  min-height: 100vh;
  width: 100vw;
  background-color: white;
  padding-top: 20vh;
  margin-bottom: 12vh;
}

#page2 #center {
  min-height: 144vh;
  width: 90vw;
  background-color: rgb(240, 240, 240);
  border-radius: 10px;
  position: relative;
  margin-left: 5vw;
  padding-bottom: 12vh;
}

#page2 #center > h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: 400;
  padding-top: 4vw;
}

#page2 #center .box {
  height: 26vw;
  width: 27vw;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-left: 2.35%;
  margin-top: 4%;
}

#background {
  top: 50%;
  height: 50%;
  width: 100%;
  position: absolute;
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(transparent),
    color-stop(rgba(0, 0, 0, 0.491)),
    to(rgba(0, 0, 0, 0.947))
  );
  background: -o-linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.491),
    rgba(0, 0, 0, 0.947)
  );
  background: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.491),
    rgba(0, 0, 0, 0.947)
  );
  opacity: 0;
  -webkit-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}

#page2 #center .box img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.box h3 {
  position: absolute;
  bottom: 20%;
  margin: 0 3%;
  color: white;
  font-weight: 400;
  font-size: 1.4vw;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.box p {
  height: 10%;
  position: absolute;
  bottom: 6%;
  margin: 0 3%;
  color: white;
  font-weight: 400;
  font-size: 1vw;
  text-transform: capitalize;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.box i {
  position: absolute;
  top: 4%;
  right: 4%;
  font-size: 2vw;
  font-weight: 100;
  padding: 5px;
  border-radius: 50%;
  background-color: #fff;
  scale: 0.8;
  z-index: 2;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.box:hover img {
  scale: 1.09;
}

.box:hover h3 {
  opacity: 1;
}

.box:hover p {
  opacity: 1;
}
.box:hover i {
  scale: 0.9;
}

.box:hover #background{
  opacity: 1;
}

#page2 #center .rectangle {
  height: 50vw;
  width: 85.5vw;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-top: 2%;
  margin-left: 2.35%;
}

#page2 #center .rectangle img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.rectangle h3 {
  position: absolute;
  bottom: 5%;
  margin: 0 3%;
  color: white;
  font-weight: 400;
  font-size: 1.4vw;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.rectangle i {
  position: absolute;
  top: 4%;
  right: 4%;
  font-size: 2vw;
  font-weight: 100;
  padding: 5px;
  border-radius: 50%;
  background-color: #fff;
  scale: 0.8;
  z-index: 2;
  -webkit-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.rectangle:hover img {
  scale: 1.05;
}

.rectangle:hover i {
  scale: 0.9;
}

.rectangle:hover h3 {
  opacity: 1;
}

.rectangle:hover #background {
  opacity: 1;
}
.rectangle:hover p {
  opacity: 1;
}

@media (max-width:600px) {
       #page2 {
        min-height: 100vh;
        width: 100vw;
        background-color: white;
        padding-top: 10vh;
        margin-bottom: 6vh;
      }

      #page2 #center {
        min-height: 144vh;
        width: 90vw;
        background-color: rgb(240, 240, 240);
        border-radius: 10px;
        position: relative;
        margin-left: 5vw;
        padding-bottom: 12vh;
      }

      #page2 #center > h3 {
        text-align: center;
        text-transform: uppercase;
        font-size: 2.5vh;
        font-weight: 400;
        padding-top: 4vw;
      }

      #page2 #center .box {
        height: 70vw;
        width: 70vw;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin: 0 auto;
        margin-top: 4%;
      }

      #page2 #center .box img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        -webkit-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        transition: all ease 0.3s;
      }

      .box h3 {
        font-size: 2vh;

      }

      .box p {
        font-size: 1.5vh;
      }

      .box i {
        font-size: 4vh;
      }

      #page2 #center .rectangle {
        height: 60vh;
        width: 70vw;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin: 0 auto;
        margin-top: 4%;
      }




      .rectangle h3 {
        font-size: 2vh;

      }

      .rectangle p {
        font-size: 1.5vh;
      }

      .rectangle i {
        font-size: 4vh;
      }

}

#achivements {
  height: 75vh;
  width: 90%;
  background-color: #171717;
  margin: 0 auto;
  border-radius: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  overflow: hidden;
}

#achivements video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width:600px) {
    #achivements {
      height: 30vh;
      width: 90%;
      background-color: #171717;
      margin: 0 auto;
      border-radius: 13px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
      overflow: hidden;
    }

    #achivements video {
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
}

#page3 {
  height: 150vh;
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 7vh;
  padding-top: 5vh;
}

#page3 h2 {
  font-size: 4vh;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;

}

#page3 > button {
  font-size: 0.8vw;
  padding: 12px 24px;
  border: black solid 1px;
  border-radius: 7px;
  background-color: black;
  color: white;
  cursor: pointer;
  -webkit-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  font-weight: 500;
}

#page3 button:hover {
  background-color: white;
  color: black;
}

#Gallery {
  height: 125vh;
  width: 94vw;
  /* padding-left: .66%; */
  overflow: hidden;
}

.photo h1 {
  color: white;
  font-size: 4vh;
  text-transform: uppercase;
  text-align: center;
  width: 50%;
}
.photo {
  height: 30vw;
  width: 30vw;
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin: -4px -2px;
  border: none;
  outline: solid rgba(255, 255, 255, 0.418) 1px;
}

.photo img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.photo #bg {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.445);
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.photo #bg i {
  color: white;
  font-size: 2.5vh;
}
.photo:hover #bg {
  opacity: 1;
}

@media (max-width:600px) {
      #page3 {
        height: auto;
        width: 100vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 10vh;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-top: 7vh;
        padding-top: 5vh;
      }

      #page3 h2 {
        font-size: 4vh;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
      }

      #page3 button:hover {
        background-color: white;
        color: black;
      }

      #Gallery {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: 94vw;
        margin-left: 3vw;
        padding-left: 2vw;
        overflow: hidden;
      }

      .photo h1 {
        color: white;
        font-size: 2vh;
        text-transform: uppercase;
        text-align: center;
        width: 50%;
      }
      .photo {
        height: 45vw;
        width: 45vw;
        position: relative;
        cursor: pointer;
        display: inline-block;
        margin: -3px -2px;
        border: none;
        outline: solid rgba(255, 255, 255, 0.418) 1px;
      }


}



#footer {
  height: 50vh;
  width: 100%;
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8vh;
}

#foot1 {
  height: 100%;
  width: 20%;
  padding-left: 2%;
  padding-top: 2%;
  color: white;
  position: relative;
}
#foot1 img {
  height: 12vh;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-filter: invert(1);
          filter: invert(1);
}

#foot1 #social-media {
  height: 3 0%;
  width: 80%;
  margin: 5vh 0;
}

#foot1 #social-media i {
  font-size: 16px;
  color: white;
}

#foot1 #foot-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#foot-logo h1 span {
  font-size: 3.9vh;
  font-family: Inter;

}

#foot-logo h1 {
  margin-left: 18%;
  font-family: Inter;
  text-transform: uppercase;
  font-size: 2vh;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  scale: 1.5;
}
#social-media h4 {
  font-family: Inter;
  font-size: 2.2vh;
  font-weight: 400;
}

#social-media h4:nth-child(2) {
  text-decoration: underline;
}
#foot1 p {
  font-size: 0.8vw;
  margin-top: 4vh;
  line-height: 13px;
}

#foot2 {
  height: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: white;
  padding-top: 3vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* justify-content: center; */
}

#foot2 .hyperlink {
  height: 100%;
  /* width: 33%; */
}

#foot2 .hyperlink h3 {
  font-size: 1.8vh;
  text-transform: uppercase;
  background: white;
  color: black;
  padding: 5px 12px;
  border-radius: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 2vh;
}

#foot2 .hyperlink h5 {
  font-size: 2vh;
  margin-bottom: 1vh;
}

#foot3 {
  height: 100%;
  width: 35%;
  padding-top: 3vw;
  color: white;
}

#foot3 .hyperlink h3 {
  font-size: 1.4vh;
  text-transform: uppercase;
  background: white;
  color: black;
  padding: 5px 12px;
  border-radius: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 2vh;
}

#foot3 .hyperlink h5 {
  font-size: 1.6vh;
  margin-bottom: 1vh;
}

#foot3 img {
  height: 12vh;
  width: 12vh;
  -o-object-fit: cover;
     object-fit: cover;
}

#foot3 > :nth-child(2) {
  margin-left: 67%;
}

iframe {
  height: 100%;
  width: 100%;
  -webkit-filter: opacity(0);
          filter: opacity(0);
  -webkit-transition: -webkit-filter ease .4s;
  transition: -webkit-filter ease .4s;
  -o-transition: filter ease .4s;
  transition: filter ease .4s;
  transition: filter ease .4s, -webkit-filter ease .4s;
}

#map {
  height: 85%;
  width: 40%;
  margin: 3vh;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

#map:hover iframe{
    -webkit-filter: opacity(1);
            filter: opacity(1);
}

#map .drag-area {
    height: 99%;
    width: 99%;
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 16px 24px;
    min-width: 320px;
    min-height: 80px;
    border: 2px dashed #7a7a7a81;
    border-radius: 22px; /* curved corners */
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-size: 16px;
    text-transform: lowercase;
    letter-spacing: 0.4px;
    background-color: #797b823b;
    color: #fff;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;
    cursor: -webkit-grab;
    cursor: grab;
}

.drag-area i{
    font-size: 6vh;
    position: absolute;
    top: 30%;
}

@media (max-width:600px) {
    #footer {
      height: unset;
      min-height: 80vh;
      width: 100%;
      background: black;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-top: 8vh;
    }
    
    #foot1 {
      height: 100%;
      width: 100%;
      padding-left: 2%;
      padding-top: 2%;
      color: white;
      padding: 2vh;
      
    }
    #foot1 img {
      height: 12vh;
      width: auto;
      -o-object-fit: contain;
         object-fit: contain;
      -webkit-filter: invert(1);
              filter: invert(1);
    }

    

    #foot-logo h1 span {
      font-size: 3vh;
      font-family: Inter;

    }

    #foot-logo h1 {
      margin-left: 18%;
      font-family: Inter;
      text-transform: uppercase;
      font-size: 1.5vh;
      font-weight: 400;
      letter-spacing: 0;
      text-align: center;
      scale: 1.5;
    }
    #social-media h4 {
      font-family: Inter;
      font-size: 2.2vh;
      font-weight: 400;
    }

    #social-media h4:nth-child(2) {
      text-decoration: underline;
    }
    #foot1 p {
      font-size: 1vh;
      margin-top: 4vh;
      line-height: 13px;
    }

    #foot2 {
      height:-webkit-fit-content;
      height:-moz-fit-content;
      height:fit-content;
      width: 100%;
      color: white;
      padding-top: 3vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 2vh;
      /* justify-content: center; */
    }

    #foot2 .hyperlink {
      height: 100%;
      /* width: 33%; */
    }


   

    iframe {
      height: 100%;
      width: 100%;
      -webkit-filter: opacity(1);
              filter: opacity(1);
      -webkit-transition: -webkit-filter ease .4s;
      transition: -webkit-filter ease .4s;
      -o-transition: filter ease .4s;
      transition: filter ease .4s;
      transition: filter ease .4s, -webkit-filter ease .4s;
    }

    #map {
      height: 30vh;
      width: 90%;
      margin: 3vh;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
    }

    #map:hover iframe{
        -webkit-filter: opacity(1);
                filter: opacity(1);
    }

    #map .drag-area {
        height: 99%;
        width: 99%;
        position: absolute;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 16px 24px;
        min-width: 320px;
        min-height: 80px;
        border: 2px dashed #7a7a7a81;
        border-radius: 22px; /* curved corners */
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-size: 16px;
        text-transform: lowercase;
        letter-spacing: 0.4px;
        background-color: #797b823b;
        color: #fff;

        -webkit-user-select: none;

           -moz-user-select: none;

            -ms-user-select: none;

                user-select: none;
        cursor: -webkit-grab;
        cursor: grab;
    }

    .drag-area i{
        font-size: 6vh;
        position: absolute;
        top: 30%;
    }
}