/**************************************************************************/
/********************************* VARIABLES ******************************/
/**************************************************************************/
:root {
    --webheads-color-primary: #bc1f23;
    --webheads-color-secondary: #cb0500;
    --webheads-color-midGradient: #a60a0a;
    --webheads-inline-padding: 6.5rem;
    --webheads-background-color: #161616;
    --webheads-boxshadow: black 3px 3px 2px;
    --webheads-dropshadow: drop-shadow(2px 2px 2px black);
    --webheads-element-background-color: #2c2c2c;
}
/* #7e0606; */
/*------------------------------------------------------------------------*/

/**************************************************************************/
/****************************** RESET/GLOBAL ******************************/
/**************************************************************************/
body, h1, h2, h3, h4, a, ul, li, p, button { all: unset; color: white; }
html *, body * { font-family: 'Source Sans Pro', sans-serif; }
body { background: var(--webheads-background-color);  }
p, li { line-height: 1.5; font-size: 1.15rem; }
h1, h2, h3, p, img { display: block; } 
h1, h2, h3, h4, span { font-family: 'Tektur'; }
a { cursor: pointer; display: inline; }

.no-shadow { filter: none !important; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--webheads-element-background-color); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); }

/* ALGEMENE VOORWAARDEN | PRIVACYVERKLARING */
main { padding-inline: var(--webheads-inline-padding); margin-top: 14rem; padding-bottom: 6rem; }
main h3 { font-size: 1.5rem; font-weight: bold; text-transform: uppercase; margin-top: 2rem; }
main a { text-decoration: underline; }
main a:hover { color: var(--webheads-color-primary); }

.hidden { display: none; }

.reveal_bottom { position: relative; transform: translateY(-30px); opacity: 0; transition: .8s all ease; }
.reveal_bottom.active { transform: translateY(0); opacity: 1; }
.reveal_left { position: relative; transform: translateX(-100px); opacity: 0; transition: .8s all ease; }
.reveal_left.active { transform: translateX(0); opacity: 1; }
.reveal_right { position: relative; transform: translateX(100px); opacity: 0; transition: .8s all ease; }
.reveal_right.active { transform: translateX(0); opacity: 1; }
.reveal { opacity: 0; opacity: 0; transition: .8s all ease; }
.reveal.active { opacity: 1; }

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

/**************************************************************************/
/****************************** NAVIGATION ********************************/
/**************************************************************************/
nav { width: 100%; display: flex; position: fixed; z-index: 9999; padding-bottom: 8rem; background: linear-gradient(180deg, var(--webheads-background-color), var(--webheads-background-color), transparent); }
nav .logo { position: relative; left: 3rem; }
nav .logo img { position: relative; width: 4rem; z-index: +1; transition: all .3s ease-in-out; }
nav .logo span { position: absolute; z-index: +1; overflow: hidden; width: 25rem; left: 4.2rem; top: 1.5rem; font-size: 5.5rem; font-weight: bold; text-transform: uppercase; transition: all .3s ease-in-out; }
nav .menu { display: flex; flex-wrap: wrap; margin-left: auto; padding-right: 3rem; margin-top: auto; gap: 2rem; transition: all .3s ease-in-out;  }
nav .menu a { font-family: 'Tektur'; font-size: 1.5rem; font-weight: bold; text-transform: uppercase; transition: all .3s ease-in-out; }
nav .menu a:hover { color: var(--webheads-color-primary); }

nav.scrolled { background: var(--webheads-background-color); padding-bottom: 0; box-shadow: black 0px 4px 2px; }
nav.scrolled .logo span { font-size: 4.5rem; top: .8rem; left: 3.2rem; width: 0; }
nav.scrolled .logo img { width: 3rem; }
nav.scrolled .menu { padding-bottom: 1.5rem; padding-right: 4.7rem; }
nav.scrolled a:last-child { transition: all .3s ease-in-out; }
nav.scrolled a:last-child.hide { opacity: 0; pointer-events: none; font-size: 0rem; padding: 0; margin: 0;  }
nav.scrolled a:last-child.hideComplete { /*position: absolute;*/ } 
nav.scrolled a:last-child.show { opacity: 1; }

.mobile-menu { position: absolute; width: 100%; height: 100vh; }

.mobile-menu .menu-up {
  transition: all .5s ease;
  transition-delay: .3s; 
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('/wp-content/uploads/2025/09/Webheads_mobilemenu_bg2-scaled.jpg');
  background-size: cover;

  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
  filter: brightness(.5);
  /*background-image: linear-gradient(to top left, transparent 50%, var(--webheads-background-color) 50%);*/
  transform: translateX(-100%);
}
.mobile-menu.active .menu-up { transform: translateX(0); transition: all .5s ease-in-out; }

.mobile-menu .menu-down {
  transition: all .5s ease;
  transition-delay: .3s; 
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('/wp-content/uploads/2025/09/Webheads_mobilemenu_bg2-scaled.jpg');
  background-size: cover;

  clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%);
  filter: brightness(.5);
  /*background-image: linear-gradient(to top left, var(--webheads-background-color)  50%, transparent 50%);*/
  transform: translateX(100%);
}
.mobile-menu.active .menu-down { transform: translateX(0); transition: all .5s ease-in-out; }
.mobile-nav { position: relative; padding-inline: var(--webheads-inline-padding); padding-top: 28vh; }

.mobile-menu .mobile-nav a { display: block; transform: translateX(-200px); text-align: center; font-size: 1.5rem; margin-block: 1rem; padding-block: 1rem; opacity: 0; transition: all .3s ease-in-out; transition-delay: 0s; background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; }

.mobile-menu.active .mobile-nav a:nth-child(1) { transform: translate(0); transition-delay: 0; }
.mobile-menu.active .mobile-nav a:nth-child(2) { transform: translate(0); transition-delay: .5s; }
.mobile-menu.active .mobile-nav a:nth-child(3) { transform: translate(0); transition-delay: .6s; }
.mobile-menu.active .mobile-nav a:nth-child(4) { transform: translate(0); transition-delay: .7s; }
.mobile-menu.active .mobile-nav a:nth-child(5) { transform: translate(0); transition-delay: .8s; }

.mobile-menu.active .mobile-nav a { opacity: 1; transition-delay: .5s; }

.contact-toggle { position: relative; background: var(--webheads-element-background-color); width: 3rem; height: 8.5rem; position: fixed; top: 50%; transform: translate(-4.8rem, -50%); z-index: 99; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; align-content: center; box-shadow: black -2px 2px 2px; transition: all .3s ease-in-out; }
.contact-toggle:hover { cursor: pointer;  }
.contact-toggle:hover h2 { color: var(--webheads-color-primary); }
.contact-toggle h2 { transform: rotate(-90deg); font-size: 1.3rem; font-weight: bold; text-transform: uppercase; width: fit-content; position: relative; left: -1.1rem; transition: all .3s ease-in-out; }

.company-info { position: fixed; top: 50%; right: 0; z-index: 9999; background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; width: 33.6rem; padding: 2rem; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: space-between; transform: translate(40.6rem, -50%); transition: all .3s ease-in-out;  }
.company-info.scrolled { transform: translate(37.6rem, -50%); }
.company-info.active { transform: translate(0, -50%); }
.company-info .form { width: 100%; margin-bottom: 1rem; border-bottom: 2px solid white; height: 35rem; }
.company-info .form input, .company-info .form textarea { border-radius: .5rem !important; background: #1c1c1c !important; }
.company-info .form input::placeholder, .company-info .form textarea::placeholder { color: white !important; }
.company-info .form input:focus, .company-info .form textarea:focus { border-color: var(--webheads-color-primary) !important; box-shadow: 0 0 0 1px var(--webheads-color-primary), 0px 1px 2px rgba(0, 0, 0, 0.15) !important; }
div.wpforms-container-full .wpforms-form label.wpforms-error, div.wpforms-container-full .wpforms-form em.wpforms-error { position: absolute !important; top: -1.2rem; }
.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field { padding: 1.1rem 0 !important; }
.company-info .form .wpforms-submit { background-color: var(--webheads-color-primary) !important; float: right; margin-bottom: 2rem; }
.company-info .form .wpforms-submit:after { border-color: var(--webheads-color-primary) !important; }
.company-info .form h2 { font-size: 2rem; font-weight: bold; text-transform: uppercase; }
.company-info .form h2 span { color: var(--webheads-color-primary); }
.company-info .email, .company-info .tel { display: flex; height: fit-content; }
.email img { width: 1.8rem; }
.tel img { width: 1.5rem; }
.email p a, .tel p a { font-family: 'Tektur'; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; margin-left: 0.5rem; }

/*NAVIGATION TOGGLE*/
#navToggle {
  display: none;
  position: absolute;
  top: 5.5rem;
  right: 4.4rem;
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s;
  width: 32px;
  height: 24px;
  transform: translateY(-50%) rotate(0deg);
}
nav.scrolled #navToggle { top: 3rem; }
  #navToggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: white;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.3s;}
    #navToggle span:nth-child(1) {
      top: 0px;
      transform-origin: left center; }
      .open#navToggle span:nth-child(1) {
        transform: rotate(45deg);
        top: -1px;
        left: 5px; }
    #navToggle span:nth-child(2) {
      top: 10px;
      transform-origin: left center; }
      .open#navToggle span:nth-child(2) {
        width: 0%;
        opacity: 0; }
    #navToggle span:nth-child(3) {
      top: 20px;
      transform-origin: left center; }
      .open#navToggle span:nth-child(3) {
        transform: rotate(-45deg);
        top: 22px;
        left: 5px; }
/*------------------------------------------------------------------------*/

/**************************************************************************/
/********************************** HOME **********************************/
/**************************************************************************/
.header video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.gradient-row { position: absolute; bottom: 0; left: 0; width: 100%; height: 3rem; background: linear-gradient(180deg, transparent, var(--webheads-background-color)); }
.header { position: relative; display: flex; flex-wrap: wrap; min-height: 80vh; margin-top: 5rem; padding-inline: var(--webheads-inline-padding); align-content: center; }
.header img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.6); }
.welcome { position: relative; z-index: +1; margin-left: auto; margin-top: 6rem;  /*margin-block: auto;*/ }
.welcome-card { background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; width: 37rem; height: 16rem; padding: 2rem; }
.welcome h1 { font-size: 2.5rem; font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; }
.welcome span { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); -webkit-background-clip: text; background-clip: text; color: white; transition: all .3s ease-in-out; }
.welcome span.highlight { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome p strong { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.info { position: absolute; display: inline; right: 0; bottom: -4rem; background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; padding: 0.6rem; padding-inline: 1.4rem; font-family: 'Tektur'; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; transition: all .3s ease-in-out; }
.info:hover { cursor: pointer; color: var(--webheads-color-primary); }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; }
/*------------------------------------------------------------------------*/

/**************************************************************************/
/******************************* DIENSTEN *********************************/
/**************************************************************************/
.services { position: relative; background: var(--webheads-background-color); padding-top: 6rem; padding-bottom: 8rem; padding-inline: var(--webheads-inline-padding); }
.services .bar { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); width: 10rem; height: .3em; margin-inline: auto; margin-block: 1rem; border-radius: .5rem; box-shadow: var(--webheads-boxshadow); position: relative; z-index: +1; }
.services > h2 { font-size: 2.5rem; text-align: center; font-weight: bold; text-transform: uppercase; filter: var(--webheads-dropshadow); }
.services h2 span { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.services p { text-align: center; font-style: italic; font-size: 1.3rem; margin-top: 2rem; position: relative; z-index: +1; filter: var(--webheads-dropshadow); }
.services-container { position: relative; z-index: +1; display: flex; justify-content: center; flex-wrap: wrap; gap: 7rem; padding-top: 2rem; }

.services .service-card .img { height: 18rem; width: 100%; overflow: hidden; border-top-left-radius: .5rem; border-top-right-radius: .5rem; transition: all .3s ease-in-out;  }
.services .service-card img { width: 100%; height: 100%; object-fit: cover; transition: all .3s ease-in-out; }
.services .service-card h2 { font-size: 1.5rem; font-weight: bold; text-transform: uppercase; margin-inline: auto; text-align: center; padding-inline: 1rem; }

.services .service-card { background: transparent; border-radius: .5rem; width: 25rem; height: 25rem; filter: var(--webheads-dropshadow); transition: all .6s ease-in-out; scale: 0; }
.services .service-card:hover { cursor: pointer; scale: 1.03; }
.services .service-card:hover .img { filter: none; }
/*.services .service-card:hover img { scale: 1.05; }*/
.card {
    --card-bg-color: var(--webheads-element-background-color);
    --border-radius: .5rem;
    background: var(--webheads-element-background-color);
    width: 300px;
    height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
  }
  
.card_inner {
  --border-size: 5px;
  width: calc(100% - var(--border-size));
  height: calc(100% - var(--border-size));
  background: var(--webheads-element-background-color);
  position: absolute;
  border-radius: var(--border-radius);
  display: flex;
  flex-wrap: wrap;
}

.card_inner:hover::before {
  --width: 50%;
  --height: 135%;
  width: var(--width);
  height: var(--height);
  top: calc(50% - var(--height) / 2);
  left: calc(50% - var(--width) / 2);
  content: "";
  position: absolute;
  background: linear-gradient(
    130deg,
    var(--webheads-color-primary),
    var(--webheads-color-secondary)
  );
  z-index: -1;
  filter: blur(20px);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.gradient-row-services { position: relative; top: 0; left: 0; width: 100%; min-height: 60rem; background: linear-gradient(180deg, var(--webheads-background-color), var(--webheads-background-color), transparent, var(--webheads-background-color)); }
.bg-bottom { position: absolute; bottom: 12rem; left: 0; width: 100%; min-height: 60rem; background-image: url('/wp-content/uploads/2025/09/Webheads_services_bg-upscaled-scaled.jpg'); background-position: bottom center; background-size: cover; }






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

/**************************************************************************/
/****************************** PORTFOLIO *********************************/
/**************************************************************************/
.portfolio { background: var(--webheads-background-color); /*padding-inline: var(--webheads-inline-padding);*/ }
.portfolio .bar { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); width: 10rem; height: .3em; margin-inline: auto; margin-block: 1rem; border-radius: .5rem; box-shadow: var(--webheads-boxshadow); }
.portfolio h2 { font-size: 2.5rem; text-align: center; font-weight: bold; text-transform: uppercase; filter: var(--webheads-dropshadow); padding-inline: var(--webheads-inline-padding); }
.portfolio h2 span { background: linear-gradient(180deg, var(--webheads-color-primary), var(--webheads-color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portfolio > p { text-align: center; font-style: italic; font-size: 1.3rem; margin-top: 2rem; padding-bottom: 1rem; filter: var(--webheads-dropshadow); padding-inline: var(--webheads-inline-padding); }
.portfolio-items { max-width: 2000px; width: 100%; overflow: hidden; padding: 0; margin: 0; padding-block: 5rem; }
.portfolio-item { display: block; overflow: hidden; height: 300px; border: 4px solid transparent; list-style: none; float: left; box-sizing: border-box; filter: brightness(.5); transition: filter .3s ease-in-out; }
.portfolio-item:hover { cursor: pointer; filter: none; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: all .3s ease-in-out; }
.portfolio-item:hover img { scale: 1.05; filter: none; }
.portfolio a { display: inline; }
.portfolio-items { position: relative; display: block; margin-block: 1rem; padding-top: 0 !important; }
.portfolio-item { position: relative; }
.portfolio-item span { position: absolute; left: -2.5rem; top: 50%; text-transform: uppercase; z-index: 99; background: var(--webheads-color-primary); border-radius: .5rem; padding-block: .2rem; padding-inline: .5rem; transform: rotate(270deg);  }
/* different sizes */
.full { width: 100%; }
.two-third { width: 66.666%; }
.half { width: 50%; }
.third { width: 33.333%; }
.quarter { width: 25%; }
/* extra classes */
.double-height { height: 600px; }
.float-right { float: right; }

@media all and (max-width: 900px) {
    .half,
    .responsive-half.responsive-half { width: 66.666%; }
    .quarter { width: 33.333%; }
}
  
@media all and (max-width: 600px) {
    .portfolio-item.portfolio-item { width: 50%; height: 300px; }
}
  
@media all and (max-width: 400px) {
    .portfolio-item.portfolio-item { width: 100%; }
}
/*------------------------------------------------------------------------*/

/**************************************************************************/
/******************************* OVER ONS *********************************/
/**************************************************************************/
.about-us { display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 2rem; padding-bottom: 8rem; padding-inline: var(--webheads-inline-padding); overflow: hidden; }
.about-us div { width: 45%; }
.about-us p { margin-block: 1rem; }
.about-img { align-content: center; } 
.about-img img { width: 80%; height: auto; margin-inline: auto; transition: all .3s ease-in-out;  }
.about-text h2 { font-size: 2rem; font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; }
.about-text a { color: var(--webheads-color-primary); font-weight: bold; text-decoration: underline; }
.about-img a:hover img { scale: 1.03; }
/*------------------------------------------------------------------------*/

/**************************************************************************/
/*************************** BACK TO TOP BUTTON ***************************/
/**************************************************************************/
#buttonTop, #buttonTop:active {
  display: inline-block;
  background: var(--webheads-element-background-color);
  box-shadow: var(--webheads-boxshadow);
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: .5rem;
  position: fixed;
  bottom: 33px;
  right: 30px;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  align-content: center;
}
#buttonTop svg { width: 1.5rem; height: 1.5rem; display: block; margin-inline: auto; transform: rotate(-90deg); }
#buttonTop svg path { fill: white; transition: all 0.3s ease-in-out; }
#buttonTop:hover { cursor: pointer;  color: var(--webheads-color-primary); }
#buttonTop:hover svg path { fill: var(--webheads-color-primary); }
#buttonTop.show { opacity: 1; visibility: visible; }
/*------------------------------------------------------------------------*/

/**************************************************************************/
/******************************** FOOTER **********************************/
/**************************************************************************/
footer { position: relative; width: 100%; height: 50vh; align-content: end; }
footer img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.7); }
.gradient-overlay { position: absolute; top: 0; background: linear-gradient(180deg, var(--webheads-background-color), transparent, var(--webheads-background-color)); width: 100%; height: 100%;  }
.footer-inner { position: relative; z-index: +1; padding-inline: var(--webheads-inline-padding); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between;  }
.inner-left, .inner-right {  width: 45%;  align-content: center; margin-inline: auto; font-size: 1.3rem; }
.inner-left > div , .inner-right > div { width: fit-content; margin-inline: auto; filter: var(--webheads-dropshadow); }
.inner-left h2 strong , .inner-right h2 strong { font-family: 'Tektur' !important; font-size: 1.5rem;  }
.inner-left p a { display: inline; }
.inner-left p a:hover { color: var(--webheads-color-primary); }
.footer-bottom { width: 100%; height: fit-content; margin-bottom: 2rem; margin-top: 4rem; padding-top: 2rem; display: flex; justify-content: space-between; border-top: 1px solid white; filter: var(--webheads-dropshadow); }
.footer-bottom .privacy { display: flex; gap: 2rem; width: 33%; margin-block: auto; }
.footer-bottom .copyright { margin-block: auto; width: 33%; text-align: end; }
.inner-socials { width: 33%; }
.socials { display: flex;  column-gap: 15px; justify-content: center; }
.facebook svg { padding: .5rem; }
.facebook path, .linkedin path { transition: all 0.3s ease-in-out; }
.facebook:hover path { fill: var(--webheads-color-primary); }
.facebook, .linkedin  {
    display: block;
    background: var(--webheads-element-background-color);
    box-shadow: var(--webheads-boxshadow);
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: .5rem;
}
/*------------------------------------------------------------------------*/

/**************************************************************************/
/******************************** MODAL ***********************************/
/**************************************************************************/
.medewerker .foto:hover, .medewerker .socials h2 { cursor: pointer; }
/* * 1. Modal Overlay Styles (The backdrop that covers the screen) 
 * We set this to cover the viewport and position it above everything else.
 */
#medewerker-modal {
    position: fixed; /* Stays in place relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 9999;
    display: none;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* * 2. Modal Content Styles (The actual box with the person's info) 
 */
.modal-content {
    display: flex;
    justify-content: space-between;
    background-color: var(--webheads-element-background-color);
    margin: 10% auto;
    border-radius: 1rem;
    max-width: 57rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-content #modal-image { width: 48%; object-fit: cover; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; }
.modal-content .modal-info { display: flex; flex-wrap: wrap; width: 48%; padding: 30px; }
#modal-title { font-weight: bold; font-size: 1.5rem; }
#modal-bio { margin-block: auto; }
#modal-role { color: var(--webheads-color-primary); font-size: 1.2rem; font-weight: bold; width: 100%; }
#modal-bio p { margin-top: 15px; font-size: 1rem; margin-bottom: 15px; }
#modal-contact-info { display: flex; gap: 15px; justify-content: end; width: 100%; margin-top: auto; }
/* * 3. Close Button Styles 
 */
.close-button {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-button:hover,
.close-button:focus {
    color: var(--webheads-color-primary);
    text-decoration: none;
    cursor: pointer;
}

/* * 4. Optional: Prevent scrolling on the main page when modal is open 
 */



@media screen and (max-width: 1278px) {  
  #navToggle { display: block; }
  .menu { display: none !important; }
  .about-us div  { width: 100%; margin-top: 2rem; }
} 

@media screen and (max-width: 1050px) {  
  .welcome-card { width: fit-content; height: fit-content; }
  .bg-bottom { bottom: 69rem; }
  .footer-top { flex-wrap: wrap; }
  footer { padding-bottom: 5rem; }
  nav .logo span { font-size: 4.5rem; top: .8rem; left: 3.2rem; }
  nav .logo img { width: 3rem; }
  #navToggle { top: 4rem; }
  .footer-inner { padding-top: 4rem; }
  .about-us { padding-top: 0; }
  .modal-content { display: block; }
  .modal-content #modal-image { width: 100%; height: 25rem; border-top-left-radius: unset; border-bottom-left-radius: unset; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
  .modal-content .modal-info { width: unset; }
}

@media screen and (max-width: 900px) {  
  .footer-top > div { width: 100%; text-align: center; }
  .inner-right { margin-top: 2rem; }
}

@media screen and (max-width: 615px) {
  :root {
    --webheads-inline-padding: 2rem;
  }
  nav .logo { left: 2rem; }
  #navToggle { right: 2rem; }
  .company-info { width: fit-content; transform: translate(0, 110%); top: unset; bottom: 0; border-bottom-left-radius: 0; border-top-right-radius: .5rem; padding-top: 0; }
  .company-info .form { height: unset; }
  .company-info.scrolled { transform: translate(0, 100%); }
  .contact-toggle { transform: translate(-50%, 0); left: 50%; top: -2.9rem; width: 8.5rem; height: 3rem; border-bottom-left-radius: 0; border-top-right-radius: .5rem; box-shadow: black 2px -1px 2px; }
  .contact-toggle h2 { transform: none; left: unset; margin-inline: auto; }
  .company-info.active { transform: translate(0, 0); }
  .header { height: 100vh; }
  .welcome { margin-top: -4rem; }
  .footer-bottom { flex-wrap: wrap; justify-content: center; padding-bottom: 3rem; }
  .copyright { margin-top: 2rem; margin-inline: auto; }
  .company-info .email {  margin-bottom: 1rem; }
  .company-info .email, .company-info .tel { margin-inline: auto; }
  div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-layout):not(.wpforms-field-repeater) { overflow-x: unset !important; }
  nav.scrolled .logo span { font-size: 3.5rem; left: 2.8rem;  }
  nav .logo img { width: 2rem; }
  nav .logo span { left: 2.2rem; top: 1rem; font-size: 2.5rem; width: 11rem; }
  #navToggle { top: 2.5rem; }
  nav.scrolled .logo img { width: 2.5rem; }
  nav.scrolled #navToggle { top: 2.35rem; }
}  


@media screen and (max-width: 575px) {  
  .about-img img { height: auto; width: 100%; }
  nav { padding-bottom: 6rem; }
  .services .service-card { height: 18rem; }
  .services .service-card .img { height: 12rem; }
  .services-container { gap: 2rem; }
  .bg-bottom { bottom: 30rem; }
}



@media screen and (max-width: 475px) {  
  .welcome-card { background: none; box-shadow: none; padding: 0; }
  .welcome-card > h1 { background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; padding: 2rem; margin-bottom: 1.5rem; font-size: 1.5rem; }
  .welcome-card > p { background: var(--webheads-element-background-color); box-shadow: var(--webheads-boxshadow); border-radius: .5rem; padding: 2rem; }
  .portfolio .portfolio-items > .portfolio-item:nth-last-child(-n+5) { display: none; }
}

@media screen and (max-width: 330px) {  
  .header-single h2 { font-size: 1.5rem; }
  nav .logo span { font-size: 2rem; top: 1.5rem; }
}