* {
     box-sizing: border-box;
}

body {
     padding: 0;
     margin: 0;
}

:root {
     --padding-section-x: 12%;
     --padding-section-y: 5%;
}

.vn-section-padding {
     padding: 2% 10%;
}

.background-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
}

#vn-header {
     position: relative;
     height: 100dvh;
     width: 100%;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0) 41.6%, #000 87.43%);
     /* padding: 1% 8%; */


     .vn-bg-header {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: -1;
     }

     .vn-nav {
          position: relative;
          display: flex;
          justify-content: space-between;
          padding: 1% 8%;
          background-color: #000;

          .vn-urls-nav {
               display: flex;
               padding: 0;
               margin: 0;
               list-style-type: none;

               li {
                    color: #FFF;
                    text-align: center;
                    font-family: "DM Sans";
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-transform: capitalize;

                    display: flex;
                    padding: 10px;
                    justify-content: center;
                    align-items: center;
               }
          }
     }

     .vn-main {
          margin-top: -6%;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          z-index: 100;
          position: relative;

          h1 {
               text-align: center;
               font-family: "DM Sans";
               font-size: 56px;
               font-style: normal;
               font-weight: 600;
               line-height: 110%;
               font-variant: all-small-caps;
               letter-spacing: -1.68px;
               background: linear-gradient(180deg, #FFF 50.48%, rgba(255, 255, 255, 0.00) 100%);
               background-clip: text;
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               margin: 0;
          }

          h2 {
               color: #FFF;
               text-align: center;
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               font-variant: all-small-caps;
               letter-spacing: 0.36px;
               margin: 0;
          }

          button {
               display: inline-flex;
               padding: 14px 20px;
               justify-content: center;
               align-items: center;
               gap: 10px;
               border-radius: 30px;
               background: #FFF;
          }
     }


     .vn-footer-header {
          position: absolute;
          width: 100%;
          height: 96px;
          bottom: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);

          gap: 32px;


          h3 {
               color: #FFF;
               font-family: Montserrat;
               font-size: 12px;
               font-style: normal;
               font-weight: 600;
               line-height: normal;
               font-variant: all-small-caps;
               letter-spacing: 2.4px;
               margin: 0;
          }

          .vn-container-sponsor-bottom {
               display: flex;
               gap: 38px;
          }
     }

}

#vn-section-bootom-header {
     position: relative;
     width: 100%;
     height: 100dvh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #000;
     text-align: center;

     .container-vn-section-bootom-header {
          position: relative;
          padding: 2% 5%;

          h3 {
               color: #FFF;
               text-align: center;
               margin: 0;
               /* H5 */
               font-family: "DM Mono";
               font-size: 13px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               /* 16.9px */
               letter-spacing: 1.3px;
               text-transform: uppercase;
          }

          h2 {
               color: #FFF;
               text-align: center;
               margin: 0;
               /* H1 */
               font-family: "DM Sans";
               font-size: 56px;
               font-style: normal;
               font-weight: 400;
               line-height: 110%;
               /* 61.6px */
               letter-spacing: -1.68px;

          }

          p {
               color: #FFF;
               text-align: center;
               margin: 0;
               /* P2 */
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               /* 28.8px */
               letter-spacing: 0.36px;
          }
     }
}

#vn-section-binzel {
     position: relative;
     padding: 2% 5%;
     display: flex;
     justify-content: center;
     align-items: center;

     .vn-bg-back-section-one {
          position: relative;
          border-radius: 10px;
          /* position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1; */
          z-index: -1;
     }

     .vn-container-binzel {
          position: absolute;
          width: fit-content;
          top: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
     }

     .vn-info-binzel {
          color: #FFF;
          text-align: center;

          /* P2 */
          font-family: "DM Sans";
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 160%;
          /* 28.8px */
          letter-spacing: 0.36px;
     }

     .vn-container-stats-binzel {
          position: relative;
          display: flex;
          justify-content: center;
          gap: 32px;

          .vn-item-stat-binzel {
               width: 216px;
               padding: 10px 16px;
               border-top: 1px solid #FFF;

               h5 {
                    color: #FFF;
                    text-align: center;
                    font-family: "DM Sans";
                    font-size: 36px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    /* 43.2px */
                    font-variant: all-small-caps;
                    letter-spacing: -0.72px;
                    margin: 0;
               }

               p {
                    color: #FFF;
                    text-align: center;
                    margin: 0;
                    /* P3 */
                    font-family: "DM Sans";
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 160%;
                    /* 25.6px */
                    letter-spacing: 0.32px;
               }
          }
     }


}



footer {
     margin-top: 380px;
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr 0.25fr;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
     padding: 0 var(--padding-section-x);

     >:nth-child(1) {
          grid-area: 1 / 1 / 2 / 3;

          .container-icons {
               list-style: none;
               display: flex;
               gap: 1rem;

               li {
                    cursor: pointer;
               }
          }

          p {
               color: #828282;
               font-size: 21px;
               font-style: normal;
               font-weight: 500;
               line-height: 140%;
          }
     }

     >:nth-child(2) {
          grid-area: 1 / 3 / 2 / 4;

          ul {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: flex-end;
               gap: 8px;
               padding: 0;
               text-decoration: none;
               list-style-type: none;
          }

          a {
               color: #828282;
               text-align: right;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 20px;
               text-decoration: none;
          }

     }

     >:nth-child(3) {
          grid-area: 1 / 4 / 2 / 5;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-end;
          gap: 8px;



          h2 {
               margin: 0;
               color: #828282;
               text-align: right;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 28px;
          }

          address {
               display: flex;
               flex-direction: column;
               align-items: flex-end;
               gap: 8px;

               p {
                    margin: 0;
                    color: #828282;
                    text-align: right;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 28px;
               }

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

               a:visited {
                    text-decoration: none;
                    color: #828282;
               }
          }
     }

     >:nth-child(4) {
          grid-area: 2 / 1 / 3 / 5;
          display: flex;
          justify-content: space-between;

          p {
               color: #828282;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 20px;
          }
     }
}

.vn-footer {
     margin-top: 0;
     padding-top: 20px;
     background-color: #1E1E1E;

     &> :nth-child(3) {
          & address {
               p {
                    color: #FFF;
                    font-family: "DM Sans";
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 140%;
               }
          }
     }

     &> :nth-child(2) {

          a {
               color: #FFF;
               font-family: "DM Sans";
               font-size: 21px;
               font-style: normal;
               font-weight: 500;
               line-height: 140%;
          }
     }

     &> :nth-child(1) {
          p {
               color: #FFF;
               font-family: "DM Sans";
               font-size: 21px;
               font-style: normal;
               font-weight: 500;
               line-height: 140%;
          }
     }
}