/*
Theme Name: VRHL Content & Creatie 2025
Theme URI: http://vrhl.nl
Author: Afdeling Web
Author URI: http://vrhl.nl/web
Description: Dit thema hebben wij zelf gemaakt. Was best leuk!
Version: 1.0.2
License: Hij is van ons. Punt.
Text Domain: vrhl
*/


:root {
  --orange: #f76840;
  --lightorange: #f4e4dc;
  --black: #1d1d1d;
  --white: #f4f4f4;
  --border-radius:2vw;
}


[data-aos=blur] {
  opacity:0;
  filter:blur(50px); 
  padding-left:60px;
}

[data-aos=blur].aos-animate {
  opacity:1;
  filter:blur(0px);
  padding-left:0px;
}

.wp-block-image img {width:100%; height:auto;}


.wp-block-embed__wrapper {
 position: relative;
 top: 0;
 left: 0;
 width: 101%;
 height: auto;
 aspect-ratio: 16 / 9;
 z-index: 0;
 overflow: hidden;
 border-radius:var(--border-radius);
}

.wp-block-embed__wrapper iframe {
  width: 100%;
  height:auto;
  aspect-ratio: 16 / 9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow:hidden;
}

#content a {
  color:var(--orange);
  font-weight:bold;
}

body {font-size:18px; min-height:200vh; overflow-x:hidden; font-family:'CircularXXWeb-book'; 

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.admin-bar {
  padding-top: 32px; /* Standaardhoogte van de admin bar */
}


.dark {background-color:var(--black);}
.light {background-color:var(--white);}
.lightorange {background-color:var(--lightorange);}

footer {background-color:var(--white); padding-top:10vh; padding-bottom:10vh;}
footer a {color:var(--black); text-decoration: none;}

input[type=email] {
  background-color:var(--white); 
  padding:14px 70px 14px 30px; 
  border-radius:300px; 
  color:var(--black);
  max-width:250px;
  border:1px solid #ccc;
}

input[type=email]:focus {
  border:1px solid #ccc;
  box-shadow:none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: var(--black);
  box-shadow: none;
  outline: 0 none;
}



main {transition: 0.5s cubic-bezier(0.83, 0, 0.17, 1) 0s; position: relative;}
.move {margin-left:-20px;}

.container {max-width:1480px; }
.container-fluid {overflow-x:hidden; overflow-y:visible;}

@font-face {
  font-family: "CircularXXWeb-Book";
  src: url("assets/fonts/CircularXXWeb-Book.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Book";
  src: url("assets/fonts/CircularXXWeb-Book.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-BookItalic";
  src: url("assets/fonts/CircularXXWeb-BookItalic.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-BookItalic";
  src: url("assets/fonts/CircularXXWeb-BookItalic.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-Bold";
  src: url("assets/fonts/CircularXXWeb-Bold.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Bold";
  src: url("assets/fonts/CircularXXWeb-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-BoldItalic";
  src: url("assets/fonts/CircularXXWeb-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-BoldItalic";
  src: url("assets/fonts/CircularXXWeb-BoldItalic.woff2") format("woff2");
}

.container-1800 {max-width:1800px !important;}

.swiper-slide {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.logo {width:130px; left:20px;}

.swiper-slide {
  overflow-x: visible;
}

#hamburger {
  top: 25px;
  right:20px;
  width: 70px;
  height: 70px;
  position: fixed;
  z-index:99999999999;
  transition:0.3s;
  background-image:url('assets/images/hamburger.svg');
}


#hamburger span{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height:4px;
  opacity:1;
  background-color:#ffffff;
  width:40%;
  border-radius:10px;
  transition:0.3s;
  transform: rotate(0deg);
}

#hamburger:hover{
  background-image:url('assets/images/hamburger.svg');
}

#hamburger span:first-child {
  top:40%;
}

#hamburger span:nth-child(2) {
  top:50%;
}

#hamburger span:nth-child(3) {
  top:60%;
}

#hamburger:hover span:first-child {
  transform: rotate(45deg);
  width:30%;
  height:6px;
}

#hamburger:hover span:nth-child(3) {
  transform: rotate(-45deg);
  width:30%;
  height:6px;
  top:55%;
}

#hamburger:hover span:nth-child(2) {
  opacity:0;
}
.hamburger.active{background-image:url('assets/images/hamburger-white.svg') !important; transform: rotate(45deg)!important;}
.hamburger.active:hover{background-image:url('assets/images/hamburger-white.svg') !important; transform: rotate(45deg)!important;}

.hamburger.active span:first-child {
  transform: rotate(90deg)!important;
  width:50%!important;
  height:6px!important;
  top:45% !important;
  background: rgba(247, 104, 46, 1) !important;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(0deg) !important;
  width:50% !important;
  top:45% !important;
  height:6px !important;
  background: rgba(247, 104, 46, 1) !important;
}

.hamburger.active span:nth-child(2) {
  opacity:0 !important;
}


.hamburger.active:hover span:nth-child(3) {
  transform: rotate(45deg) !important;
  width:50% !important;
  top:45% !important;
  height:6px !important;
  background: rgba(247, 104, 46, 1) !important;
}

.hamburger.active:hover span:nth-child(1) {
  transform: rotate(135deg) !important;
  width:50% !important;
  top:45% !important;
  height:6px !important;
  background: rgba(247, 104, 46, 1) !important;
}

.hamburger.active:hover span:nth-child(2) {
  opacity:0 !important;
}


.bg {
  position: absolute;
  width:100%;
  max-width:1500px;
  height:auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity:1;
  transform:scale(1);
  z-index:-1;
}

.bg-lightorange {background-color:var(--lightorange);}

.bg-footer {
  position: absolute;
  width:100%;
  max-width:1500px;
  height:auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity:1;
  transform:scale(1);
  z-index:-1;
}

#fullscreenmenu {
  position: fixed;
  top: 0px;
  right: -100vw;
  height:100vh;
  width:100vw;
  z-index:999;
  overflow:hidden;
  transition: 0.5s cubic-bezier(0.83, 0, 0.17, 1) 0s;
  background: rgba( 0, 0, 0, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 20px );
  transition-delay:0.4s;
}

#fullscreenmenu.active {
  position: fixed;
  height:100vh;
  width:100vw;
  z-index:9999;
  top:0px;
  right:0px;
  background: rgba( 247, 104, 64, 1 );
}

.menu:hover a {
  opacity: 0.3;
  transition:0.3s;
  filter:blur(1px);
}

.menu:hover a:hover {
  opacity: 1;
  transition:0.3s;
  filter:blur(0px);
}

.menu {flex-direction: column;   padding:0px;}

.menu a {
  color: var(--white);
  display:block;
  font-weight:bold;
  font-family: "CircularXXWeb-Bold";
  text-decoration: none;
  transition: all 1500ms cubic-bezier(1.000, 0.010, 0.000, 0.995); /* custom */
  transition-timing-function: cubic-bezier(1.000, 0.010, 0.000, 0.995); /* custom */

}

.menu li a::after {
  width:0%;
  height:2px;
  background-color:var(--white);
  content:'';
  position: absolute;
  bottom:0px;
  left:0px;
  transition:0.3s;
}

.menu li a:hover::after {
  width:100%;
} 

#menu-top-menu {  list-style-type: none; padding:0px;}
#menu-top-menu li {padding:0px; margin:0px; transition:0.3s; position: relative;}
#menu-top-menu li a {font-size:90px; 
  line-height:95px; 
  font-family: "CircularXXWeb-Book";
}




#menu-top-menu li:hover {padding-left:5px; margin:0px;}

h2 {
  font-size:60px; line-height:70px;
  font-family:'CircularXXWeb-bold';
  padding-bottom:20px;
}

h3 {
  color:#F76840; font-size:35px; line-height:40px;
  font-family:'CircularXXWeb-bold';
  margin-top:30px;
  font-size:30px;
}

h4 {
  font-size:35px; line-height:40px;
  font-family:'CircularXXWeb-bold';
}

p {
  font-size:22px; line-height:36px; opacity:1; padding-bottom:1px; letter-spacing:0px; font-family:'CircularXXWeb-book';  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.client-logo {
 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 filter: grayscale(100%);
 mix-blend-mode: multiply; !important;
}

.client-logo:hover {
 -webkit-filter: grayscale(0%) !important; /* Safari 6.0 - 9.0 */
 filter: grayscale(0%) !important;
 mix-blend-mode: multiply; !important;
}

clients {
  text-align: center;
  border: 1px solid #dddddd;
  display: table;
  height: 100%;
  color: red !important;
  transition:0.3s;
  transform: scale(1);
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  min-height: 245px;
}

.clients:hover {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}



.clients img {
  max-width: 240px;
  margin-top: 50px;
  margin-bottom: 50px;
  display: table-cell;
  vertical-align: middle;
  margin-left:auto;
  margin-right:auto;
  mix-blend-mode: darken;
}

.clients img:hover {
  max-width: 240px;

}

#main {padding-top:50px;}

#money {  font-size:13vw;
 color:var(--black); display:inline-block; width:210vw; font-family:'CircularXXWeb-bold';
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: var(--orange);
}

.orange {color:#F76840;}
.white {color:#ffffff;}
.border-radius {border-radius:var(--border-radius);} 

.btn-dark {background-color:#7A1605 !important; border:1px solid #7A1605;}

.btn-next a {
  background-color:var(--orange); 
  padding:14px 70px 14px 30px; 
  border-radius:300px; 
  color:var(--black) !important;
  font-weight:bold;
  transition:0.5s;
  position:relative;
  overflow:hidden !important;
  text-decoration:none;
}

.btn-next a::before {
  position: absolute;
  left:-30px;
  top:0px;
  height:100%;
  width:30px;
  display:block;
  content:'';
  background-image:url('assets/images/arrow-black.svg');
  background-size:80%;
  background-repeat:no-repeat;
  background-position:center center;
  transition:0.5s;
  opacity:0;
}

.btn-next a:hover {
  background-color:var(--orange); 
  padding:14px 30px 14px 70px; 
  border-radius:300px; 
  transition:0.5s;
  position:relative;
  overflow:hidden;
}

.btn-next a:hover::before {
  left:15px;
  opacity:1;
}

.btn-next a:hover::after {
  right:-30px;
}

.btn-next a::after {
  position: absolute;
  right:15px;
  top:0px;
  height:100%;
  width:30px;
  display:block;
  content:'';
  background-image:url('assets/images/arrow-black.svg');
  background-size:80%;
  background-repeat:no-repeat;
  background-position:center center;
  transition:0.5s;
}


.btn {
  background-color:var(--orange); 
  padding:14px 70px 14px 30px; 
  border-radius:300px; 
  color:var(--black) !important;
  font-weight:bold;
  transition:0.5s;
  position:relative;
  overflow:hidden;
}



.btn:hover {
  background-color:var(--orange); 
  padding:14px 30px 14px 70px; 
  border-radius:300px; 
  transition:0.5s;
  position:relative;
  overflow:hidden;
}

.btn::before {
  position: absolute;
  left:-30px;
  top:0px;
  height:100%;
  width:30px;
  display:block;
  content:'';
  background-image:url('assets/images/arrow-black.svg');
  background-size:80%;
  background-repeat:no-repeat;
  background-position:center center;
  transition:0.5s;
  opacity:0;
}

.btn:hover::before {
  left:15px;
  opacity:1;
}

.btn:hover::after {
  right:-30px;
}

.btn::after {
  position: absolute;
  right:15px;
  top:0px;
  height:100%;
  width:30px;
  display:block;
  content:'';
  background-image:url('assets/images/arrow-black.svg');
  background-size:80%;
  background-repeat:no-repeat;
  background-position:center center;
  transition:0.5s;
}

.arrow-before::before {
  background-image:url('assets/images/arrow-orange.svg');
  background-size:80%;
  background-repeat:no-repeat;
  background-position:center bottom;
  height:20px;
  margin-right:10px;
  width:25px;
  display:inline-block;
  content:'';
}

.arrow-before {
  padding-left:0px;
  margin-top:30px;
  display:block;
  font-size:18px;
  color:var(--white);
  text-decoration:none;
  transition:0.3s;
}

.arrow-before:hover {margin-left:20px; color:var(--white); opacity:0.9;}


.vimeo-wrapper {
 position: relative;
 top: 0;
 left: 0;
 width: 101%;
 height: auto;
 aspect-ratio: 16 / 9;
 z-index: 0;
 pointer-events: none;
 overflow: hidden;
}
.vimeo-wrapper iframe {
 width: 100%;
 height:auto;
 aspect-ratio: 16 / 9;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 overflow:hidden;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius:var(--border-radius);
}


.min-h-100 {min-height:100vh;}
.min-h-80 {min-height:80vh;}
.min-h-60 {min-height:60vh;}
.min-h-70 {min-height:70vh;}
.min-h-40 {min-height:40vh;}
/* - - - - - A O S - - - - - */
[data-aos=showmethemoney] {
  transform: scale(2);
  opacity: 0;
}

[data-aos=showmethemoney].aos-animate {
  transform: scale(1);
  opacity: 2;
}
.img-fluid {width:100%;}


.container-max-width {
  overflow-x:hidden;
  width: 100%;
}

@media screen and (min-width: 600px) {

  .container-max-width {
    overflow-x:hidden;
    width: calc(100% - 8vw);
  }

}


html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.prev {
  background-image:url('assets/images/prev.svg');
  height:60px;
  width:60px;
  background-size:cover;
  margin-right:5px;
}

.next {
  background-image:url('assets/images/next.svg');
  height:60px;
  width:60px;
  background-size:cover;

}

.prev-black {
  background-image:url('assets/images/prev-black.svg');
  height:60px;
  width:60px;
  background-size:cover;
  margin-right:5px;
  opacity:0.5;
}

.next-black {
  background-image:url('assets/images/next-black.svg');
  height:60px;
  width:60px;
  background-size:cover;
  opacity:0.5;
}

.next-black:hover {opacity:1;}
.prev-black:hover {opacity:1;}



.project-thumb {
  border-radius:var(--border-radius);
  overflow:hidden;
  position: relative;
  width:100%;
  height:40vh;
  background-size:cover;
  background-position: center center;
  background-repeat:no-repeat;
  z-index:2;
  transition:0.3s;
}

.project-thumb:hover {
  transform:rotate(1deg);
}

.project-thumb a {position: absolute; left:0px; top:0px; height:100%; width:100%;}

.swiper-slide .project-shadow {
  border-radius:var(--border-radius);
  overflow:hidden;
  position: relative;
  width:100%;
  margin-top:-20px;
  height:40px;
  opacity:0;
  background-size:cover;
  background-position: center bottom;
  background-repeat:no-repeat;
  transform:rotate(180deg);
  filter: blur(0px);
  transition:0.3s;
}

.swiper-slide-active .project-shadow {
  border-radius:var(--border-radius);
  overflow:hidden;
  position: relative;
  width:100%;
  margin-top:-20px;
  height:40px;
  opacity:0.6;
  background-size:cover;
  background-position: center bottom;
  background-repeat:no-repeat;
  transform:rotate(180deg);
  filter: blur(20px);
}




.project-thumb img {
  position: absolute;
  left:0px;
  top:0px;
  height:100%;
  width:100%;
  object-fit: cover;
}



.gradient-right {
  position: absolute;
  right:0px;
  top:0px;
  width:10vw;
  background: rgb(36,19,15);
  background: linear-gradient(90deg, rgba(36,19,15,0) 0%, rgba(36,19,15,1) 100%);
  height:100%;
  z-index:1;
  filter: blur(50px);
}

#project-swiper .swiper-slide {
  font-size: 18px;
  min-height:50vh;
  opacity:0.5;
  transition:1s;
  color:#ffffff;
}

#project-swiper .swiper-slide h4 {
  color:var(--white);
  opacity:0.2;
  transition:1s;
  margin-top:10px;
} 

#project-swiper .swiper-slide a {text-decoration:none;}
#news-swiper .swiper-slide a {text-decoration:none; color:var(--black);}

#project-swiper .swiper-slide span {
  opacity:0;
  transition:0.3s;
  font-size:25px;
  margin-top:20px;
  display:block;
} 

#project-swiper .swiper-slide-active h4 {
  opacity:1;
} 

#project-swiper .swiper-slide-active span {
  opacity:1;
} 

#project-swiper  .swiper-slide-active {opacity:1;  }


#news .swiper-slide {
  font-size: 18px;
  min-height:50vh;
  opacity:0.5;
  transition:1s;
  color:#000000;
}

#news .swiper-slide h4 {
  color:#000000;
  opacity:0.2;
  transition:1s;
  margin-top:10px;

} 

#news .swiper-slide span {
  opacity:0;
  transition:0.3s;
  font-size:18px;
  margin-top:20px;
  display:block;
} 

#news .swiper-slide-active h4 {
  opacity:1;
} 

#news .swiper-slide-active span {
  opacity:1;
} 

#news .swiper-slide-active {opacity:1;}

#team-swiper {background-color:var(--white);}

#team-swiper .swiper-slide div {
  text-align: center;
  font-size: 18px;
  min-height:500px;
  background-size:cover;
  background-position: center center;
  border-radius:var(--border-radius);
  transition:0.3s;
}

#team-swiper .swiper-slide-active div {
  transform:rotate(5deg);
}

#team-swiper .swiper-slide-next div {
  transform:scale( 0.9);
}

#team-swiper .swiper-slide-prev div {
  transform:scale( 0.9);
}

#team-swiper .swiper-slide {
  text-align:center;
}

#team-swiper::part(container) {
  overflow: visible;
}

#team-swiper .swiper-slide img {
  padding-top:0px;
}


#team-swiper .swiper-slide h3 {
  color:var(--black);
  opacity:0;
  margin-top:40px;
  transition:0.3s;

} 

#team-swiper .swiper-slide p {
  color:var(--black);
  opacity:0;
  font-size:16px;
  transition:0.7s;
} 

#team-swiper .swiper-slide {}

#team-swiper .swiper-slide-active {}

#team-swiper .swiper-slide-active h3 {
  opacity:1;
  margin-top:40px;
} 

#team-swiper .swiper-slide-active p {
  opacity:1;
} 

#team-swiper .swiper-slide-active img {
  opacity:1;
  padding-top:0px;
} 

.swiper {
  overflow: visible;
}

#service {
  background-color:#F7F3F3;
}

.service h3 {
  color:var(--black);
  font-size:36px;
}

.service a {
  position: absolute;
  left:50px;
  bottom:30px;
  width:40%;
  font-size:18px;
  color:var(--black) !important;
}

#team-swiper .swiper-slide-active {opacity:1; }

#team-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:30px;
}
#team-swiper .swiper-slide img {
  transition:1s;
  padding-top:0px;
}

#team-swiper .swiper-slide-next img  {
  padding-top:30px;
}

#team-swiper .swiper-slide-prev img  {
  padding-top:30px;
}

#logo-vrhl-top {
  position: absolute;
  left:20px;
  top:10px;
  height:70px;
  width:200px;
  display:block;
  background-image:url('assets/images/logo-vrhl.svg');
  background-size:contain;
  background-position: left center;
  background-repeat:no-repeat;
  z-index:9999;
}

#nav-top {position: absolute; right:120px;
  top:18px;}

  #nav {
    list-style-type: none;
    position: relative;
    z-index:99;
    mix-blend-mode: difference;
  }

  #nav li {
    display:inline-block;

  }

  .profile-picture {
    display:block;
    width:80%;
    height:auto;
    aspect-ratio: 4/5;
    border-radius:var(--border-radius);
    background-size:cover;
    background-position: center center;
    transform:rotate(5deg);
  }

  .vrhl-collega {
    height:500px;
    background-size:cover;
    background-position: center center;
    position: relative;
    border-radius:var(--border-radius);
    overflow:hidden;
    margin-top:30px;
    justify-content: flex-end; /* Aligns H2 to the right */
    align-items: flex-end; /* Aligns P to the bottom */
    padding: 20px; /* Optional for spacing */
  }

@media only screen and (min-width: 990px) {

  .even {margin-top:100px;}
  .even {margin-top:-100px;}

}

  .vrhl-collega .rotate{
    display:block;
    color:var(--white);
    text-decoration:none;
    width:100%;
    position: absolute;
    right: 0;
    top: 0%;
    transform: rotate(-90deg) translateY(-42%);
    transform-origin: right center;
    z-index:99 !important;
  }

  .vrhl-collega a {position: absolute; left:0px; top:0px; height:100%; width:100%; z-index:3;}

  .vrhl-collega p{
    position: absolute;
    bottom:20px;
    right:20px;
    width:60%;
    display:block;
    text-align:right;
    color:var(--white);
    z-index:2;
    font-size:14px;
    line-height:18px;
  }

  .vrhl-collega .black-gradient {
    position: absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:70%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); 
    z-index:0;
  }

  .sticky-top {top:200px;}


  #nav:hover li a {
    opacity: 0.3;
    transition:0.3s;
  }

  #nav:hover li a:hover {
    opacity: 1;
    transition:0.3s;
  }


  #nav li a{
    text-decoration:none;
    padding:25px 10px;
    display:block;
    font-size:22px;
    transition:0.3;
    font-weight:500;
    color:#ffffff;

  }

  #nav li a:hover{
    color:#ffffff;
  }

  #news {
    background-color: #F7F3F3;
  }

  .breadcrumb-content {opacity:0.4; color:var(--black);}
  .breadcrumb-content a {opacity:0.4; color:var(--black); text-decoration: none;}



  .social-btn {
    display:inline-block;
    width:25px;
    height:25px;
    margin-right:5px;
    margin-top:10px;
    background-size:contain;
    background-position: center center;
    background-repeat:no-repeat;
    overflow:hidden;
    transition:0.3s;
  }

  .social-white-btn {
    display:inline-block;
    width:40px;
    height:40px;
    margin-right:10px;
    margin-top:30px;
    background-size:contain;
    background-position: center center;
    background-repeat:no-repeat;
    overflow:hidden;
    transition:0.3s;
  }


  .equal {
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
}

.service-content {
  min-height:300px;
}

.service {
  overflow:hidden;
}
.service-img {
  position: absolute;
  left:0px;
  height:0px;
  height:100%;
  width:100%;
  background-size:cover;
  background-position: center center;
  min-height:300px;
}


  #intro h1 {
    font-size: clamp(52px, 5vw, 130px);
    line-height:clamp(52px, 5vw, 130px);
    font-family: "CircularXXWeb-Bold";
    letter-spacing:-3px;
  }

  #intro span {
    font-family: "CircularXXWeb-Bold";
    color:var(--orange);
    font-size: clamp(20px, 4vw, 30px);
    line-height:clamp(20px, 4vw, 30px);
    margin-bottom:30px;
    display:block;
  }

  .facebook {background-image:url('assets/images/facebook.svg');}
  .vimeo {background-image:url('assets/images/vimeo.svg');}
  .tiktok {background-image:url('assets/images/tiktok.svg');}
  .instagram {background-image:url('assets/images/instagram.svg');}
  .linkedin {background-image:url('assets/images/linkedin.svg');}

  .facebook-white {background-image:url('assets/images/facebook-white.svg');}
  .vimeo-white {background-image:url('assets/images/vimeo-white.svg');}
  .tiktok-white {background-image:url('assets/images/tiktok-white.svg');}
  .instagram-white {background-image:url('assets/images/instagram-white.svg');}
  .linkedin-white {background-image:url('assets/images/linkedin-white.svg');}