:root{
    --red: #f60e0e;
    --red2: #ca0b0b;
    --black: hsl(273, 89%, 45%);  
    --white: #fff;
    --taupe: #BEB4B1;
    --yellow: #eeff00;
    --background: url('./images/achtergrondneon.png');
    --blurground: url('./images/image.png');
    --logo: url('./images/1000005191.png')
 }
 
 *{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
 }
 
 .poppins-regular {
     font-family: "Poppins", sans-serif;
     font-weight: 400;
     font-style: normal;
   }
   
   .poppins-bold {
     font-family: "Poppins", sans-serif;
     font-weight: 700;
     font-style: normal;
   }
   
 
 .navigatiebar{
     background: var(--black);
     height: 60px;
     padding: 0.5rem calc((100vw - 1200px)/ 2);
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
 }
 
 .navigatiebar__logo {
     color: var(--white);
     text-decoration: none;
     padding-left: 1rem;
     font-size: 1.5rem;
 }
 
 .navigatiebar__logo2 {
     color: var(--white);
     text-decoration: none;
 }
 
 .trimsalon_img {
     padding-top: 15px;
     padding-bottom: 5px;
     padding-right: 10px;
     height: 90px;
 }
 
 
 .navigatiebar__link {
     color: var(--white);
     text-decoration: none;
     padding: 0rem 0.5rem;
     font-weight: bold;
    cursor: pointer;
    transition: text-shadow 0.3s ease-in-out, color 0.3s;
 }
 
 .navigatiebar__link:hover {
    text-shadow: 
      0 0 5px #fff,      /* 1. Een felle witte rand direct om de letters */
      0 0 10px #FF0000,  /* 2. Een rode gloed dichtbij */
      0 0 20px #FF0000,  /* 3. Iets wijdere rode gloed */
      0 0 40px #8A2BE2,  /* 4. Paarse gloed verder weg */
      0 0 80px #8A2BE2;  /* 5. Brede paarse waas */
      
    /* Optioneel: kleur van de tekst zelf iets aanpassen */
    color: #ffe6ff; 
 }
 
 @media screen and (max-width: 768px) {
     body.active {
         overflow-y: hidden;
         overflow-x: hidden;
     }
 
     .navigatiebar__link {
         display: flex;
         align-items: center;
         justify-content: center;
         
     }
 
     .navigatiebar__menu {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: repeat(8, 80px);
         position: absolute;
         width: 100%;
         top: -1000px;
     }
 
 
     .navigatiebar__menu.active {
         top: 100%;
         opacity: 1;
         z-index: 99;
         height: 100vh;
         font-size: 1.5rem;
         background: var(--black);
     }
 
 .navigatiebar__toggle .bar {
     width: 25px;
     height: 3px;
     margin: 5px auto;
     transition: all 0.3s ease-in-out;
     background: var(--white);
     display: block;
     cursor: pointer;
 }
 
 #mobile-menu {
     position: absolute;
     top: 15%;
     right: 5%;
     transform: translate(5%, 20%);
 }
 
 #mobile-menu.is-active .bar:nth-child(2) {
     opacity: 0;
 }
 
 #mobile-menu.is-active .bar:nth-child(1) {
     transform: translateY(8px) rotate(45deg); 
 }
 
 #mobile-menu.is-active .bar:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg); 
 }
 }
 /*Hero section */
 .hero {
     height: 100vh;
     padding: 0.5rem calc((100vw - 1200px)/ 2);
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }
    
 .hero__content {
     color: var(--white);
     padding: 3rem 1rem;
     line-height: 1;
     text-align: center;
     align-items: center;
 }
 
 .hero__content h1 {
     font-size: clamp(2rem, 6vw, 5rem);
     text-transform: uppercase;
     margin-bottom: 0.5rem;
     text-align: center;
     align-items: center;
 }
 .hero__content p {
     font-size: clamp(1rem, 4vw, 2.5rem);
     margin-bottom: 3rem;
     opacity: 50%;
     text-align: center;
     align-items: center;
 
 }
 
 .hero__content1 {
     color: var(--white);
     padding: 3rem 1rem;
     line-height: 1;
 }
 
 .hero__content1 h1 {
     font-size: clamp(3rem, 8vw, 7rem);
     text-transform: uppercase;
     margin-bottom: 0.5rem;
 }
 .hero__content1 p {
     margin-bottom: 1.5rem;
     font-size: clamp(1rem, 5vw, 1.2rem);
 
 }
 
 .button {
     padding: 1rem 3rem;
     border: none;
     background: var(--red);
     color: var(--white);
     font-size: 1rem;
     cursor: pointer;
     outline: none;
     transition: 0.3s ease;
     text-decoration: none;
     border-radius: 4px;
     text-align: center;
     align-items: center;
     align-content: center;
     align-self: center;
     
     
 
 }
 
 .button:hover {
     background: var(--black);
     opacity: 50%;
 }
 
 /*services section*/
 .services {
     
     padding: 0.5rem calc((100vw - 1200px)/ 2);
     display: flex;
     justify-content: flex-start;
     align-items: center;
     text-align: center;
 
 }
 
     .services__container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         padding: rem;
     }
 
 .services__img{
     width: 100%;
     padding: 2 rem;
     padding-top: 0rem;
 
 }
 
 .topline {
     color: var(--red);
     text-transform: bold;
     margin-bottom: 0.5rem;
 }
 
 .services__heading {
     color: var(--white);
     margin-bottom: 1rem;
     font-size: clamp(2rem, 6vw, 3rem);
 }
 
 .services__features {
     list-style: none;
 }
 
 .services__feature {
     color: var(--white);
     margin-bottom: 1.5rem;
     font-size: clamp(1rem, 5vw, 1.2rem);
 }
 
 .fa-circle-check{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-scissors {
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-money-bill{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-paw{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-house{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-info{
    margin-right: 0.5rem;
    color: var(--red);
}

 .fa-person{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-dog{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-phone{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-square-phone{
    margin-right: 0.5rem;
    color: var(--black);
}

 .fa-envelope{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-camera-retro{
     margin-right: 0.5rem;
     color: var(--red);
 }
 
 .fa-facebook{
     margin-right: 0.5rem;
     color: rgba(1, 101, 225);
     font-size: 2.0rem;
 }
 
 .fa-instagram{
    margin-right: 0.5rem;
    color: var(--black);
    font-size: 2.0rem;
}

 .fa-square-instagram{
    margin-right: 0.5rem;
    color: rgb(225, 1, 161);
    font-size: 2.0rem;
}

.fa-window-restore{ 
    margin-right: 0.5rem;
     color: var(--red);
}

.fa-laptop-code{ 
    margin-right: 0.5rem;
     color: var(--red);
}

.fa-desktop{ 
    margin-right: 0.5rem;
     color: var(--red);
}
 
 @media screen and (max-width: 768px) {
     .services__container {
         grid-template-columns: 1fr;
     }
 }
 
 /*Team section*/
 .team {
     padding: 4rem calc((100vw - 1100px)/2);
 }
 
 
 .team__wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(auto, 350px);
 }
 
 .team__card {
     margin: 1rem;
     border-radius: 10px;
     position: relative;
 }
 
 .text__text {
     padding: 1rem;
     align-items: center;
     text-align: center;
 
 }
 
 .text__text h1 {
     margin-bottom: 1 rem;
     font-size: 3rem;
     text-align: center;
 
 
 }
 
 .team__desc {
     font-size: clamp(1rem, 3vw, 1.3rem);
     line-height: 1.4;
 }
 
 .team__card p {
     position: absolute;
     bottom: 30px;
     color: var(--white);
     left: 25px;
     font-size: 3rem;
     transition: 0.3s ease-in-out;
 }
 
 .team__card p:hover {
 color: var(--red);
 }
 
 
 .team__img {
     width: 100%;
     height: 100%;
     border-radius: 10px;
 }
 
 .team__text:nth-child(1){
     grid-row: 1/3;
     grid-column: 1/2;
 }
 
 .text__text:nth-child(2) {
     grid-row: 5/6;
     grid-column: 1/2;
 }
 
 .team__card:nth-child(3) {
     grid-row: 1/3;
     grid-column: 2/3;
 }
 
 .team__card:nth-child(4) {
     grid-row: 3/5;
     grid-column: 2/3;
 }
 
 .team__card:nth-child(5) {
     grid-row: 3/6;
     grid-column: 1/2;
 }
 
 .team__card:nth-child(6) {
     grid-row: 4/6;
     grid-column: 2/3;
 }
 
 
 
 .services2 {
     background: linear-gradient(to right, rgba(0,0,0, 0.4), rgba(0,0,0, 0.1)), var(--blurground);
     background-position: center;
     background-size: cover;
     padding: 0.5rem calc((100vw - 1200px)/ 2);
     display: flex;
     justify-content: flex-start;
     align-items: center;
 
 }
 
     .services__container2 {
         
         padding: rem;
     }
 
 .services__img2{
    width: 100%;
    padding: 2rem;
    padding-top: 4rem;
    display: flex;
     justify-content: flex-start;
     align-items: center;
 
 }
 
 .topline2 {
     color: var(--red);
     text-transform: bold;
     margin-bottom: 0.5rem;
 }
 
 .services__heading2 {
     color: var(--white);
     margin-bottom: 1rem;
     font-size: clamp(2rem, 6vw, 3rem);
     align-items: center;
     text-align: center;
 
 }
 
 .services__features2 {
     list-style: none;
 }
 
 .services__feature2 {
     color: var(--white);
     margin-bottom: 1.5rem;
     font-size: clamp(1rem, 5vw, 1.2rem);
     align-items: center;
     text-align: center;
 
 }
 
 @media screen and (max-width: 900px) {
     .services__container2 {
         grid-template-columns: 1fr;
     }
 }
 
 /*Footer section*/
 .footer {
     padding: 5rem calc((100vw - 1100px) / 2);
     color: var(--white);
     background: var(--red);
     text-align: center;
     align-items: center;
 
 }
 
 .footer__desc {
     padding: 0 2 rem;
     text-align: center;
     align-items: center;
 
 
 }
 
 .footer_desc h1 {
     margin-bottom: 2rem;
     color: var(--red);
     font-size: 1.5rem;
     text-align: center;
     align-items: center;
 
 }
 
 .footer__desc p {
     margin-bottom: 1rem;
     text-align: center;
     align-items: center;
 }
 
 #phone {
     font-weight: bold;
     font-size: 1.2rem;
     text-align: center;
     align-items: center;
	 font-size: 14px;
 
 }
 
 .footer__wrapper {
     text-align: center;
     align-items: center;
 
 }
 
 .footer__links {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 1rem rem;
 }
 
 .footer__title {
     font-size: 14px;
     margin-bottom: 16px;
     text-align: center;
     align-items: center;
 
 }
 
 .footer__link {
     text-decoration: none;
     color: rgb(242, 242, 242);
     font-size: 14px;
     margin-bottom: 0.5rem;
     transition: 0.3s ease-in-out;
     text-align: center;
     align-items: center;
     font-weight: bold;
     cursor: pointer;
     transition: text-shadow 0.3s ease-in-out, color 0.3s;
 }
 
 .footer__link:hover {
     color: var(--red);
     text-shadow: 
      0 0 5px #fff,      /* 1. Een felle witte rand direct om de letters */
      0 0 10px #ff00ee,  /* 2. Een rode gloed dichtbij */
      0 0 20px #FF00ee,  /* 3. Iets wijdere rode gloed */
      0 0 40px #8A2BE2,  /* 4. Paarse gloed verder weg */
      0 0 80px #8A2BE2;  /* 5. Brede paarse waas */
      
    /* Optioneel: kleur van de tekst zelf iets aanpassen */
 }
 
 @media screen and (max-width: 820px) {
     .footer__wrapper {
         grid-template-columns: 1fr;
     }
 
 }
 
 @media screen and (max-width: 400px) {
     .footer_desc {
         padding: 1rem;
     }
 
     .footer__links {
         padding: 1rem;
     }
 }
 
 /*Team2 section*/
 .team2 {
     padding: 4rem calc((100vw - 1100px)/2);
 }
 
 
 .team__wrapper2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(auto, 350px);
 }
 
 .team__card2 {
     margin: 1rem;
     border-radius: 10px;
     position: relative;
 }
 
 .text__text2 {
     padding: 1rem;
     text-align: center;
 
 }
 
 .text__text2 h1 {
     margin-bottom: 1 rem;
     font-size: 3rem;
     text-align: center;
 
 
 }
 
 .team__desc2 {
     font-size: clamp(1rem, 3vw, 1.3rem);
     line-height: 1.4;
 }
 
 .team__card2 p {
     position: absolute;
     bottom: 30px;
     color: var(--white);
     left: 25px;
     font-size: 2rem;
     transition: 0.3s ease-in-out;
 }
 
 
 
 
 .team__img2 {
     width: 100%;
     height: 100%;
     border-radius: 10px;
 }
 
 
 .copyright {
     padding: 0.3em 1em;
     background-color: var(--red);
     
   }
  .copyright p {
     color: var(--white);
     font-size: 0.9em;
     text-align: center;
     align-items: center;
   }
 
   .copyright h1 {
 
     text-align: center;
     align-items: center;
     transition: 0.3s ease-in-out;
     text-decoration: none;
     color: var(--white);
     font-size: 14px;
     text-align: center;
     align-items: center;
   }
 
   .copyright h1:hover {
     color: var(--yellow);
   }
 
   .team__wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(auto, 350px);
 }
 .navigatiebar__link2 {
     color: var(--white);
     text-decoration: none;
     transition: 0.3s ease-in-out;
 }
 
 .copyright2 {
     background-color: var(--red);
     
   }
 
   .copyright2 p {
     color: var(--white);
     font-size: 0.9em;
     text-align: center;
     align-items: center;
   }
 
   .copyright2 h1 {
 
     text-align: center;
     align-items: center;
     transition: 0.3s ease-in-out;
     text-decoration: none;
     color: var(--white);
     font-size: 14px;
     text-align: center;
     align-items: center;
   }
 
   .copyright2 h1:hover {
     color: var(--yellow);
   }
 
   .services3 {
    background-color: #000000; /* Zwarte achtergrond */
        background-image: 
            /* Paarse gloed linksboven */
            radial-gradient(circle at top left, rgba(138, 43, 226, 0.7) 0%, transparent 50%),
            /* Rode gloed rechtsonder */
            radial-gradient(circle at bottom right, rgba(255, 0, 0, 0.7) 0%, transparent 50%);
        background-repeat: no-repeat;
        background-attachment: fixed;
    padding: 0.5rem calc((100vw - 1200px)/ 2);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-left: 0.5fr;
    padding-right: 0.5fr;

}

    .services__container3 {
        padding: rem;
    }

.services__img3{
    width: 100%;
    padding: 2 rem;
    padding-top: 0rem;

}

.topline {
    color: var(--red);
    text-transform: bold;
    margin-bottom: 0.5rem;
}

.services__heading3 {
    color: var(--white);
    margin-bottom: 1rem;
    font-size: clamp(2rem, 6vw, 3rem);
}

.services__features3 {
    list-style: none;
}

.services__feature3 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: clamp(1rem, 5vw, 1.2rem);
}

/* ==============================
   NIEUWE CSS: DIRECT INSCHUIVEN
   ============================== */

/* Stap 1: Definieer de animatie zelf (van rechts naar links) */
@keyframes slideFromRight {
    0% {
        transform: translateX(100%); /* Start 100% naar rechts */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* Eindig op de plek */
        opacity: 1;
    }
}


.slide-on-load {
    /* De animatie duurt 1 seconde, is vloeiend en wacht 0.2s voor het starten */
    animation: slideFromRight 1s ease-out 0.2s forwards;
    
    /* Zorg dat de elementen onzichtbaar zijn voordat de animatie start */
    opacity: 0; 
}




/* De elementen wachten hier totdat JS de 'slide-in' klasse toevoegt */
.slide-in-init {
    opacity: 0; 
    transform: translateX(100%); 
}

.slide-in {
    opacity: 1; 
    transform: translateX(0); 
    transition: 
        transform 0.8s ease-out, 
        opacity 0.8s ease-out;
}

.gradient-text {
    /* 1. Reset de 'brute' stijl (belangrijk!) */
    font-family: 'Poppins', sans-serif !important; /* Terug naar strakke letters */
    letter-spacing: normal !important;
    text-shadow: none !important;
    background-color: transparent !important;
    cursor: default;
    transition: all 0.6s ease;

    /* 2. De Styling */
    font-size: clamp(3rem, 8vw, 6rem); /* Responsive grootte */
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    
    /* 3. De Magie: Bewegend kleurverloop */
    background: linear-gradient(
        to right, 
        #ff0000 0%,   /* Rood */
        #ff00cc 25%,  /* Hot Pink */
        #8A2BE2 50%,  /* Diep Paars */
        #ff00cc 75%,  /* Hot Pink */
        #ff0000 100%  /* Terug naar Rood */
    );
    background-size: 200% auto; /* Zorgt dat de animatie ruimte heeft om te bewegen */
    
    /* 4. Zorg dat de kleur IN de tekst zit */
    color: #fff; /* Fallback kleur */
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important; /* Dit maakt de letters 'open' voor de achtergrond */
    
    /* 5. Glow & Animatie */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 15px rgba(255, 0, 80, 0.4));
    
    animation: shine-flow 4s linear infinite;
}

/* De animatie die de kleuren laat stromen */
@keyframes shine-flow {
    to {
        background-position: 200% center;
    }
}

/* --- HOVER EFFECT --- */
.gradient-text:hover {
    /* Iets feller en groter als je hovert */
    filter: drop-shadow(0 0 25px rgba(255, 0, 80, 0.8));
    transform: scale(1.02); 
    transition: all 0.3s ease;
    
    /* Reset eventuele gekke glitch effecten van de vorige keer */
    animation: shine-flow 4s linear infinite; 
}

.btn-gradient {
    position: relative;
    display: inline-block; /* Nodig voor transform */
    padding: 18px 45px;
    
    /* De kleuren magie: we zetten ze 3x achter elkaar voor de animatie */
    background: linear-gradient(90deg, #8A2BE2, #FF0000, #8A2BE2);
    background-size: 200%; /* Maakt de achtergrond 2x zo breed */
    
    color: white;
    text-decoration: none;
    text-transform: uppercase; /* Hoofdletters staan krachtiger */
    letter-spacing: 2px; /* Ruimte tussen letters voor 'luxe' gevoel */
    font-weight: 900;
    font-size: 18px;
    border-radius: 50px; /* Mooie ronde 'pil' vorm */
    border: none;
    cursor: pointer;
    overflow: hidden; /* Zorgt dat de lichtflits binnen de knop blijft */
    
    /* De basis gloed */
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); 
    transition: all 0.6s ease; /* Soepele overgang */
    z-index: 1;
}

/* De lichtflits (shine) laag */
.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start buiten beeld links */
    width: 100%;
    height: 100%;
    /* Een schuine witte streep */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transition: 0.5s; /* Snelheid van de flits */
    z-index: -1; /* Achter de tekst */
}

/* --- HET HOVER EFFECT --- */
.btn-gradient:hover {
    /* 1. De achtergrond verschuift (bewegende kleuren) */
    background-position: right center; 
    
    /* 2. De knop wordt groter */
    transform: scale(1.1) !important;
    
    /* 3. De gloed wordt intenser en roder */
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
}

/* De lichtflits schiet naar rechts als je hovert */
.btn-gradient:hover::before {
    left: 100%; 
}

.fade-in {
    opacity: 0; /* BELANGRIJK: Begin onzichtbaar */
    animation: tekst-opkomen 1.2s ease-out forwards; /* 'forwards' zorgt dat hij zichtbaar blijft na afloop */
}

/* De animatie definities */
@keyframes tekst-opkomen {
    from {
        opacity: 0;
        transform: translateY(30px); /* Start 30 pixels lager */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Eindigt op originele plek */
    }
}