/*
-------------------------------------------------------------------------
                          BODY RESET
-------------------------------------------------------------------------
*/

body { 
    font-size: 17px;
    line-height: 28px;
}

:root {     
    --alt-font: "Archivo", sans-serif; 
    --primary-font: "Archivo", sans-serif;
    --base-color:#4d4d4f;
    --dark-gray: #151515;
    --medium-gray:#626262;
}  



/*
-------------------------------------------------------------------------
                          LOGO
header .navbar-brand img {
max-height:150px!important;
}

-------------------------------------------------------------------------
*/


/*
-------------------------------------------------------------------------
                          HEADER
-------------------------------------------------------------------------
*/


header .container-fluid {
    padding-left: 4%;
    padding-right: 4%;
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
}



/*
-------------------------------------------------------------------------
                          TITLES
-------------------------------------------------------------------------
*/


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    letter-spacing: -1px;
}
h1, .h1 {
    font-size: 3.2rem;
    line-height: 3.2rem;
}
.h2, h2 {
    line-height: 3.2rem;
}
.h3, h3 {
    line-height: 2.8rem;
}
.h6, h6 {
    line-height: 2.2rem;
}


/* gradient background color */
.bg-gradient-misty-rose {
    background-image: linear-gradient(360deg, rgba(254, 243, 240, 0.5) 0%, #fff6f3 100%);
}
/* text gradient color */
.text-gradient-light-gray-white {
    background-image: linear-gradient(to bottom, #eaeaea, #efefef, #f7f7f7, #fafafa, #ffffff); 
} 

/* padding */
.pb-190px {
    padding-bottom: 190px;
}
/* bg sliding line */ 
.bg-sliding-line-dark-gray { 
    background-image: linear-gradient(135deg, transparent 45%, #464646 45%, #464646 55%, transparent 0);
    background-size: 5px 5px;
}

/* highlight separator */
.highlight-separator[data-shadow-animation] span,
.highlight-separator[data-shadow-animation] span img {
    height: 29px;
    z-index: -1;
}
.highlight-separator[data-shadow-animation] span {
    bottom: -13px;
}
/* height */
.h-430px {
    height: 430px !important;
}
/* position */
.bottom-minus-180px {
    bottom: -180px;
}
/* HTML video play */
.video-icon-medium .video-icon {
    width: 60px;
    height: 60px;
}
.video-icon-medium .video-icon .video-icon-sonar .video-icon-sonar-bfr {
    width: 110px;
    height: 110px;
}
/* blog button */
.categories-btn {
    font-size: 12px;
}
/* accordion style 02 */
.accordion-style-02 .accordion-item .accordion-header {
    padding: 24px 0;
}
.accordion-style-02 .accordion-item .accordion-body {
    padding-right: 35px;
}
/* review star */
.review-star-icon i {
    color: var(--base-color);
}
/* animation rotation */
.animation-rotation-slow {
    -webkit-animation: rotation 35s infinite linear;
}
/* list */
.list-style-02 li {
    align-items: center;
}
/* portfolio */
.portfolio-transform .portfolio-box .caption {
    box-shadow: none;
    padding: 10px 35px;
}
/* page title */
.page-title-extra-large h2 {
    font-size: 5rem;
    line-height: 5rem;
}
.page-title-extra-large h1 {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0px;
}
/* swiper */
.swiper-pagination-style-2 .swiper-pagination-bullet:first-child{
    margin-left: 0 !important;
}
.swiper-pagination-style-2 .swiper-pagination-bullet {
    margin: 0 10px !important;
}
/* footer */



/*
-------------------------------------------------------------------------
                          LINK
-------------------------------------------------------------------------
*/

a {
color: #151515!important;
-webkit-transition: 0.3s;
transition: 0.3s;
text-decoration: none;
}

/*
-------------------------------------------------------------------------
                          VARIOUS
-------------------------------------------------------------------------
*/

.cookie-fallback {
background: #f7ec13;
padding: 20px 15px 1px 15px;
margin: 20px 0;
text-align: center;
}

/*
-------------------------------------------------------------------------
                          FOOTER
-------------------------------------------------------------------------
*/

footer .footer-logo img {
max-height: 80px;
}
.footer-dark {
color: #FFFFFF;
}
footer a {
color: #FFFFFF!important;
}
.footer-dark p, .footer-dark a {
color: #FFFFFF;
}
.footer-dark a:hover {
color: #f7ec13!important;
}
.tp-scroll {
display: inline-block;
float: right;
width: 65px;
height: 65px;
background-color: #fff6f3;
text-align: center;
color: #000!important;
font-size: 18px;
line-height: 65px;
}



@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}



/*
-------------------------------------------------------------------------
                          LIST
-------------------------------------------------------------------------
*/

.list-style-04{
  padding-left: 0;       /* we bouwen zelf de inspringing */
  margin: 0;
}

.list-style-04 li{
  list-style: none;
  position: relative;
  padding-left: 22px;    /* ruimte voor het bullet */
  margin: 0 0 10px;
}

.list-style-04 li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;           /* uitlijning t.o.v. eerste tekstregel */
  width: 10px;
  height: 10px;
  background: #f7ec13;   
}


/*
-------------------------------------------------------------------------
                          BUTTON
-------------------------------------------------------------------------
*/

.btn {
font-family: var(--primary-font);
font-weight:500;
text-transform: inherit;
letter-spacing: 0px;
}
.btn.btn-link {
padding: 0 0 2px; 
}
.btn.btn-round-edge.btn-extra-large {
padding: 18px 40px 18px 40px;
font-size: 17px;
}
.btn.btn-round-edge.btn-large {
padding: 16px 55px 16px 38px;
font-size: 16px;
}

.btn.btn-transparent-tp-1 { 
background: #f7ec13; 
border-color: #f7ec13!important;
color: #000000!important;
}

.btn.btn-transparent-tp-1:hover, 
.btn.btn-transparent-tp-1:focus { 
background: transparent!important;
border-color: #f7ec13!important;
color: #000000!important;
}

.btn.btn-transparent-tp-2 { 
background: #1d402a; 
border-color: #1d402a!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-2:hover, 
.btn.btn-transparent-tp-2:focus { 
background: transparent!important;
border-color: #1d402a!important;
color: #1d402a!important;
}

.btn.btn-transparent-tp-3 { 
background: transparent!important;
border-color: #f7ec13!important;
color: #f7ec13!important;
}

.btn.btn-transparent-tp-3:hover, 
.btn.btn-transparent-tp-3:focus { 
background: #f7ec13!important;
border-color: #f7ec13!important;
color: #000000!important;
}

.btn.btn-transparent-tp-4 { 
background: transparent!important;
border-color: #1d402a!important;
color: #1d402a!important;
}

.btn.btn-transparent-tp-4:hover, 
.btn.btn-transparent-tp-4:focus { 
background: #1d402a!important;
border-color: #1d402a!important;
color: #FFFFFF!important;
}

.btn.btn-transparent-tp-5 { 
background: #f7ec13; 
border-color: #f7ec13!important;
color: #000000!important;
}

.btn.btn-transparent-tp-5:hover, 
.btn.btn-transparent-tp-5:focus { 
background: transparent!important;
border-color: #f7ec13!important;
color: #FFFFFF!important;
}



.text-link-border {
color: inherit; /* behoudt de tekstkleur van de omgeving of gebruik bv. #151515 */
text-decoration: none; /* verwijdert de standaard underline */
border-bottom: 2px solid currentColor; /* lijn in dezelfde kleur als de tekst */
padding-bottom: 2px; /* beetje ruimte zodat border niet tegen de tekst plakt */
transition: border-color 0.3s, color 0.3s;
}

.text-link-border:hover {
color: #1d402a; /* gewenste hoverkleur */
border-bottom-color: #f7ec13;
}

/*
-------------------------------------------------------------------------
                          BORDER
-------------------------------------------------------------------------
*/

.border-color-transparent-tp-1 {
  border-color: rgba(121, 158, 155, 0.3) !important;
}

.border-color-transparent-tp-2 {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.border-base-color {
border-color: #4d4d4f!important;
}

.border-color-tp-1 {
border-color: #799e9b!important;
}

/*
-------------------------------------------------------------------------
                          BACKGROUND
-------------------------------------------------------------------------
*/

.bg-tp-1 { 
background-color: #ded5cd;
}
.bg-tp-2 { 
background-color: #799e9b;
}
.bg-tp-3 { 
background-color: #fff6f3;
}

/*
-------------------------------------------------------------------------
                          COLORS
-------------------------------------------------------------------------
*/

.text-tp-1, 
.btn-link.text-tp-1,
a.text-tp-1-hover:hover{ 
color: #4d4d4f!important; 
color: rgba(77, 77, 79, 1); 
}
.text-tp-2 {
color: #799e9b; 
}
.text-tp-3 {
color: #fff6f3;
}
.text-tp-4 {
color: #f7ec13;
}

/*
-------------------------------------------------------------------------
                          VIP CODE
-------------------------------------------------------------------------
*/



/* VIP code op één regel */
.vip-code-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* beide inputs */
.vip-code-input{
  flex: 0 0 auto;
}

/* eerste kolom: 3 cijfers */
#vip-code-prefix{
  width: 90px;   /* kleiner */
}

/* tweede kolom: 5 cijfers */
#vip-code-suffix{
  width: 150px;
}


/* Placeholder: kleiner, heel lichtgrijs, zelfde font als de rest */
.vip-contact-card input::placeholder{
  font-size: 0.85em;          /* of bv 13px */
  color: #cfcfcf;             /* heel lichtgrijs */
  font-family: inherit;
  font-weight: inherit;
  opacity: 1;                 /* voorkomt “extra faded” in sommige browsers */
}

/* Safari/Chrome oudere varianten (optioneel, maar veilig) */
.vip-contact-card input::-webkit-input-placeholder{
  font-size: 0.85em;
  color: #cfcfcf;
  font-family: inherit;
  font-weight: inherit;
  opacity: 1;
}



/*
-------------------------------------------------------------------------
                      MEDIA
-------------------------------------------------------------------------
*/

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1270px;
    }
}
@media (max-width: 1900px) {
    .fs-275 {
        font-size: 14rem;
        line-height: 14rem;
    }
}
@media (max-width: 1600px) {
    header .container-fluid {
        padding-left: 2%;
        padding-right: 2%;
    }
    h1, .h1 {
        font-size: 4rem;
        line-height: 4rem;
    }
    .fs-275 {
        font-size: 12rem;
        line-height: 12rem;
    }
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding: 10px 10px;
    }
    .fs-275 {
        font-size: 9rem;
        line-height: 9rem;
    }
}
@media (max-width: 991px) {
    .fs-275 {
        font-size: 8rem;
        line-height: 8rem;
    }

  .show-menu .header-push-button .push-button span {
    background: var(--dark-gray)!important;
  }
  
/* Mobile menu close "X" (toggler in open state) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-line{
  background-color: #000 !important;
}

}


@media (max-width: 767px) { 
    .fs-275 {
        font-size: 4rem;
        line-height: 4rem;
    }
}
    
    
/* iPad (en vergelijkbare tablets) in landscape */
@media only screen
  and (orientation: landscape)
  and (min-width: 1024px)
  and (max-width: 1366px) {

  body.overflow-x-hidden {
    overflow-y: auto !important; /* herstel vertical scroll */
  }

  /* optioneel: als je ook ergens height:100% / 100vh gebruikt */
  html, body {
    height: auto;
  }
}