/*!
Theme Name: sicht data
Theme URI: https://sichtdata.nl
Author: Niek Houkes
Author URI: https://scoredigital.nl
Description: Custom WordPress thema voor Sicht Data.
Version: 28.01.2025
/*

/****************** LENIS ****************/

html.lenis, html.lenis body {
   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-smooth iframe {
   pointer-events: none;
}


/****** ALGEMEEN *******/
html, body {
  overflow-x: hidden;
}

body {
	-webkit-font-smoothing: antialiased;
  background: #fffbfa;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'barlow-semibold';
}

p, a, span, ul, li {
  font-family: 'epilogue-regular';
}


h1 {
  font-size: 50px;
}

h2 {
  font-size: 40px;
  line-height: 1.1;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
  margin-bottom: 20px;
}

p {
  font-size: 14px!important;
  color: rgba(0,0,0,0.8);
  font-weight: 300;
}

a {
  text-decoration: none;
  font-weight: 300;
}

img {
  max-width: 100%;
}

/* NAVIGATIE */
.top-bar {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 7px;
	background: #0d274a;
	width: 100%;
	z-index: 9999999;
}

#navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 999;
	padding: 40px;
}
 
#navbar a {
	font-family: 'epilogue-regular';
   transition: 0.3s;
   font-size: 14px;
   color: #0d274a;
	cursor: pointer!important;
	text-decoration: none;
}

.logo {
   flex: 1;
   position: absolute;
	 top: 30px;
   left: 30px;
   transition: 0.3s!important;
}
 
.logo img {
	width: 180px;
}

.logo:hover {
   transform: translateY(-3px);
}


.nav-cta {
   position: fixed;
	 top: 45px;
   right: 40px;
   transition: 0.3s!important;
   z-index: 9999999;
   background: #ec2345;
   color: white;
   padding: 14px 28px;
   border-radius: 100px;
   cursor: pointer;
   display: flex;
   font-weight: 500;
   line-height: 1.6;
}
 

.nav-cta:hover {
   transform: translateY(-3px);
	background: #d21f3c;
}

.plusje {
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease;
  top: -2px;
  margin-left: 12px;
}

.plusje.rotated {
  transform: rotate(45deg);
}

.streepje-h, .streepje-v {
  width: 12px;
  height: 2px;
  background-color: white;
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform-origin: center; 
}

.streepje-h {
  transform: translate(-50%, -50%) rotate(0deg); 
}

.streepje-v {
  transform: translate(-50%, -50%) rotate(90deg);
}


#gform_submit_button_1 {
  background: #0d274a;
  color: white;
  border: none;
  height: 50px;
  width: 100%;
}









.desktop-menu {
   display: flex;
   align-items: center;
   margin: 20px 0px
}
 
.page-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   text-align: center;
   position: absolute;
	top: 60px;
   left: 50%;
   transform: translate(-50%);
}
 
.page-links li {
   margin-left: 16px;
   margin-right: 16px;
	transition: 0.3s;
}

.page-links li:hover {
	transform: translateY(-3px);
}


#nav-button {
	position: absolute;
	right: 0px;
	z-index: 2;
	right: 50px;
	padding-top: 50px;
	z-index: 999!important;
	transition: 0.3s;
}

#nav-button:hover {
	transform: translateY(-3px)!important;
}

.btn-2 {
	position: relative;
  padding: 18px 24px;
  background: #232425;
  color: #fffbfb;
  font-size: 19px;
  border-radius: 50px;
  transition: 0.3s;
	z-index: 999!important;
}

.btn-2:hover  {
	background: #000;

}

.btn-2 img {
	width: 19px;
	margin-left: 5px;
}
 .mobile-menu {
   display: none;
 }
 
 .navbar-toggle {
   display: none;
   cursor: pointer;
   position: absolute;
   right: 25px;
 }
 
 .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   background-color: #0d274a;
   margin-bottom: 4px;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 .navbar-toggle.active .icon-bar:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
 }
 
 .navbar-toggle.active .icon-bar:nth-child(2) {
   opacity: 0;
 }
 
 .navbar-toggle.active .icon-bar:nth-child(3) {
   transform: translateY(-4px) rotate(-45deg);
 }
 
 .nav-links-mobile {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #f3f0f1;
   z-index: 999;
   padding: 0px 0px 0px 50px;
   box-sizing: border-box;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s linear; /* Overgang via opacity en visibility */
 
 }
 
 .nav-links-mobile.active {
   opacity: 1;
   visibility: visible;
    
 }
 
 .nav-links-mobile ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
 }
 






/***************** HOME **************/
.home {
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.home-tekst {
  max-width: 750px;
	display: block;
	margin: auto;
}

.home h1 {
	padding-top: 50px;
	font-size: 50px;
	line-height: 1.1;
	color: #0d274a;
	padding-bottom: 30px;
}

.home p {
	max-width: 450px;
	display: block;
	margin: auto;
}

.home span {
  font-family: 'barlow-semibold';
  color: #4bac4f;
}



.sicht img {
  height: 100%;
  width: 100%;
}










/* INTRO */
.intro {
	padding: 100px 0px;
}

.intro-tekst {
  max-width: 750px;
	display: block;
	margin: auto;
}

.intro h4 {
	color: #0d274a;
	text-align: center;
  line-height: 1.4;
}



/*************** OVER DE SOFTWARE **************/
.software {
  position: relative;
  padding: 100px 0px 0px;
  background: rgba(75,172,79,0.1);
}

.software h2 {
  max-width: 450px;
  color: #0d274a;
}

/* LOGO'S */ 
.logo-block {
	float: left;
	display: inline-block;
	width: 33%;
	text-align: center;
	padding: 30px 0;
	height: 150px;
}

.logo-block img {
	width: 110px;
}

.logo-block img {
	height: auto !important;
	vertical-align: middle;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	opacity: 0.66;
	transition: all 250ms ease-out;
	-webkit-transition: all 250ms ease-out;
}

.logo-block:hover img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
	filter: inherit;
	opacity: 1;
	transition: all 250ms ease-out;
	-webkit-transition: all 250ms ease-out;
}



/* TABS */
.tabs {
  position: relative;
  padding: 0px 0px 100px;
  background: rgba(75,172,79,0.1);
}

.tabs-inhoud {
  position: relative;
  height: 100%;
  background: white;
  padding: 75px;
}

.tab-buttons {
  background: rgba(13,39,74,0.05);
  display: inline-block;
  padding: 5px;
  border-radius: 100px;
  
}

.tab-buttons button {
  padding: 10px 30px;
  cursor: pointer;
  border: none;
  background: transparent;
  margin: 5px 5px;
}
.tab-buttons button.active {
  background: #0d274a!important;
  color: white;
  border-radius: 100px;
}

.tab-content {
  display: none;
  min-height: 325px;
}

.tab-content.active {
  display: block;
  padding: 50px 0px;
}


.tab-indicators {
  position: absolute;
  text-align: left;
 bottom: 50px;
}

.tab-indicators span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 1px;
  background: white;
  border: 1px solid #0d274a;
  border-radius: 50%;
  cursor: pointer;
}
.tab-indicators span.active {
  background: #0d274a;
}

.image-container {
  background: rgba(75,172,79,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-container img {
  width: 100%;
  height: 100%; /* Afbeelding even groot maken als container */
  object-fit: cover; /* Behoud aspect ratio en vul de container */
}


.tab-content ul {
  list-style: none;
  margin-left: -31px;
  line-height: 2;
}

.tab-content ul img {
  width: 20px;
  margin-right: 12px;
}

.tab-content ul li {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 300;
}










/* OVER DE MAKERS */
.over-de-makers {
  position: relative;
  background: #0d274a;
  padding: 100px 0px;
}

.over-de-makers h2 {
  max-width: 650px;
  display: block;
  margin: auto;
}

.over-de-makers-tekst {
  background: #fff;
  padding: 50px;
  min-height: 100%;
}

.over-de-makers h3 {
  line-height: 1.1;
  margin-bottom: 30px;
}

.over-de-makers-afbeelding {
  background-size: cover;
  background-position: center;
}

.tekst-blok {
  background: white;
  padding: 30px;

}


.groen {
  background: #4bac4f;
  color: #f3f0f1;
}

.groen p {
  color: #f3f0f1;
}





/* FAQ */
#FAQ {
  padding: 100px 0px;
}

@media (min-width:992px){
  #FAQ .accordion {
    width: 70%;
    display: block;
    margin: auto; 
  }                   
}

#FAQ h2 {
  text-align: center;
  color: #0d274a;
}

#FAQ  .accordion-button:not(.collapsed) {
 border: none!important;
 outline: none!important;
}

#FAQ  .collapsed {
 color: white;
}

#FAQ .accordion-item {
 margin: 10px 10px;
 border: none!important;
 outline: none!important;
 padding: 15px;
 background: #f3f0f1;
 color: #0d274a;
 font-family: 'epilogue-regular';
}

#FAQ .collapsing {
   outline: none!important;
}

#FAQ .accordion-button:focus {
 outline: none!important;
 box-shadow: none!important;
}

#FAQ  .accordion-button {
 color: #0d274a;
 outline: none;
 background: #f3f0f1!important;
 line-height: 1.6;
 font-size: 15px;
 font-family: 'epilogue-regular';
 padding-left: 25px;
 padding-right: 25px;
 font-weight: 300;
}

#FAQ  .accordion-body {
 color: black;
 padding: 20px 25px 30px;
 font-family: 'epilogue-regular';
 font-size: 14px;
 line-height: 1.8;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}








/********************* KOM IN CONTACT *********************/
.contact {
  position: relative;
  padding: 150px 0px;
}

.contact-tekst {
  max-width: 750px;
	display: block;
	margin: auto;
}

.contact h1 {
	padding-top: 50px;
	font-size: 50px;
	line-height: 1.1;
	color: #ec2345;
	padding-bottom: 10px;
}

.contact a {
  color: #ec2345;

}

.contactgegevens {
  padding-bottom: 100px;
}

@media (min-width: 768px){
  .contact .container {
    width: 45%;
  }
}

.gform_title {
  display: none;
}

#input_1_3, #input_1_5, #input_1_6, #input_1_7 {
  height: 40px;
  background: #f3f0f1;
  border: none;
  outline: none;
}

.gform_wrapper.gravity-theme .gfield_label {
  font-size: 14px!important;
  margin-bottom: 4px!important;
  font-weight: 400;
}

.gform_required_legend {
  display: none;
}







/********************* FOOTER *********************/
.footer-top {
  position: absolute;
	top: 0px;
	left: 0px;
	height: 12px;
	background: #457393;
	width: 100%;
}

footer {
  position: relative;
  background: #0d274a;
  padding: 0px;
  overflow: hidden;
}

footer .row {
  padding-top: 100px;
}

.footer-logo {
  max-width: 250px;
}

footer h2 {
  color: #fffbfa;
  padding-bottom: 10px;
}

footer ul {
  list-style: none;
  margin-left: -31px;
}

footer a {
  color: #fffbfa;
  transition: 0.3s ease-in-out;
}

footer a:hover {
  color: #c6c6c6;
}

.socials {
  display: flex;
}

.socials img {
  height: 33px;
  margin-right: 8px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.socials img:hover {
  transform: translateY(-4px);
}

.mini {
  display: flex;
  margin-bottom: 30px;
} 

.mini a {
  font-size: 12px;
  margin-right: 12px;
}


.footer-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  max-height: 85%;
  object-fit: cover;
}

footer h5 {
  color: white;
}


/* DISCLAIMER */
.disclaimer {
  padding: 150px 0px;
}

.disclaimer h1 {
  color: #0d274a;
}

@media (min-width: 768px){
  .disclaimer .container {
    width: 60%;
  }
}








/* OVERIGE */
@media (max-width: 991px){
  #desktop {
    display: none;
  }
}

@media (min-width: 992px){
  #mobiel {
    display: none;
  } 

  .tabs .col-lg-6 {
    margin: 0px;
    padding: 0px;
  }
}