/* --------------------- section 1 text-header--------------------- */

 .section1 {
     width: 100vw;
     height: calc(85vh);

     display: flex;
     align-content: center;
     align-items: center;

     animation-name: header;
     animation-duration: 2s;

     position: fixed;
     z-index: 1;
     top: 0px;
 }



 .section1 h1 {
     text-align: center;
     font-weight: normal;
     width: 100%;
 }


 /* --------------------- section 2 lijn info header--------------------- */
 .section2 {
     width: 80vw;
     margin: 0 auto;
     aspect-ratio: 16/9;

     position: relative;
     z-index: 2;
     margin-top: calc(85vh - 120px);

     animation-name: header-foto;
     animation-duration: 2s;
     background-color: white;

     padding-bottom: 150px;
 }

 .section2 img {
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 50px;
     aspect-ratio: 16/9;
 }

 .section2 video {
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 50px;
     aspect-ratio: 16/9;
 }

 /* --------------------- section services--------------------- */

 .section.services {
     margin: 0 auto;
     width: 80vw;
     padding-top: 150px;
     padding-bottom: 150px;
     background-color: white;
     position: relative;
     z-index: 2;
 }

 .section.services .container {
     display: grid;
     gap: 200px;
     grid-template-columns: auto 2fr;
 }

 .service1 {
     border: 1px solid red;
 }

 .number {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
 }

 .column {
     columns: 2;
     font-size: 0.9em !important;
     margin-top: 50px;
     gap: 30px;
 }

 .circle {
     background-color: black;
     width: 10px;
     height: 10px;
     color: black;
     border-radius: 50%;
 }

 .title {
     font-size: 36px;
     font-weight: bold;
 }

 .content.services {
     font-size: 18px;
     line-height: 1.5;
     display: flex;
     flex-direction: column;
     gap: 75px;
 }

 .divider {
     border-top: 1px solid black;
     margin: 20px 0;
 }

 .divider.top {
     border-top: 1px solid black;
     margin: 20px 0;
     padding-bottom: 50px;
 }

 .section.services .title h2 {
     font-size: 1em;
     letter-spacing: 0.05px;
 }

 .service-content {
     display: grid;
     gap: 50px;
     grid-template-columns: 1fr 2fr;
 }

 .content.foto h2 {
     position: sticky;
     top: 100px;

     font-size: 3em;

 }

 /* --------------------- section 3 foto-header--------------------- */

 .section3 {
     position: relative;
     z-index: 3;
     padding-bottom: 15vh;
     background-color: white;
 }

 .section3 p {
     font-size: 2em;
     font-weight: 200;
     line-height: 1.5em;

     color: black;

     width: 70vw;
     margin-left: 15vw;
 }



 .ticker-wrapper.overlay.padding-medium {
     background-color: #121212 !important;
     color: white;
     position: relative;
     z-index: 3;
 }

 /* --------------------- section cases--------------------- */
 .section.cases {
     width: 100vw;

     position: relative;
     z-index: 2;

     padding: 350px 0px 50px 0px;
 }

 .section.cases .container {
     width: 80vw;
     margin: 0 auto;
     aspect-ratio: 16/9;
 }

 .section.cases img {
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 50px;
     aspect-ratio: 16/9;
 }

 .section.cases video {
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 50px;
     aspect-ratio: 16/9;
 }

 /* --------------------- section 4 --------------------- */

 .section4 {
     position: relative;
     background-color: #121212 !important;
     padding-bottom: 250px;
     width: 100%;
     z-index: 3;
 }

 .section4 p {
     font-weight: 200;
 }

 #my_port {
     width: calc(100% - 120px);
     margin-left: 120px;
 }

 #counter {
     position: -webkit-sticky;
     position: sticky;
     font-size: 6em;
     font-weight: 200;
     top: 250px;
     width: 100%;
     /*   display:block; */
     color: white;
 }

 #counter {
     display: flex;
     align-items: center;
 }

 #top_num {
     padding-right: 30px;
 }

 #bottom_num_zero {
     color: rgba(255, 255, 255, 0.4);
 }

 #bottom_num {
     color: rgba(255, 255, 255, 0.4);
 }

 .port_item {
     padding-bottom: 50px;
     padding-top: 50px;
     font-size: 2em;
     opacity: 0.5;
     color: white;
 }

 .port_item:first-child {
     padding-top: 0px;
 }

 .port_item:last-child {
     padding-bottom: 0px;
 }


 .section4 p:before {
     background-color: white;
     content: "";
     display: inline-block;
     height: 2px;
     position: relative;
     vertical-align: middle;
     width: 100px;
 }

 .section4 p:before {
     right: 0.5em;
     margin-left: -100px;
 }

 .hidden {
     display: none;
 }

 .visible {
     display: block;
 }

 .active {
     opacity: 1;
 }

 .counter-container {
     display: grid;
     grid-template-columns: 3fr 7fr;
     width: 80vw;
     margin-left: 10vw;
 }


 /* ---------------------  Queries --------------------- */


 @media screen and (max-width: 1050px) {

     .content.foto h2 {
         position: sticky;
         top: 100px;

         font-size: 2em;
     }

     .section.services .container {
         gap: 150px;
     }
 }


 @media screen and (max-width: 850px) {

     .content.foto {
         display: none;
     }

     .section.services .container {
         gap: 0px;
     }

     .section.cases {
         padding: 200px 0px 50px 0px;
     }
 }



 @media screen and (max-width: 550px) {

     .service-content {
         display: grid;
         gap: 50px;
         grid-template-columns: 1fr;
     }
 }