:root{
    --red: #250a00;
    --black: hsl(31, 89%, 45%);  
    --white: #fff;
    --taupe: #BEB4B1;
    --yellow: #eeff00;
    --background: url('./images/wmremove-transformed.jpeg');
    --blurground: url('./images/image.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;
     transition: 0.3s ease-in-out;
 }
 
 .navigatiebar__link:hover {
     color: var(--red);
 }
 
 @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 {
     background: linear-gradient(to right, rgba(0,0,0, 0.4), rgba(0,0,0, 0.1)), var(--background);
     height: 100vh;
     background-position: center;
     background-size: cover;
     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 {
     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;
     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(0.5rem, 6vw, 3rem);
	 margin-left: 0.5rem
     margin-right: 0.5rem
 }
 
 .services__features {
     list-style: none;
 }
 
 .services__feature {
     color: var(--white);
     margin-bottom: 1.5rem;
     font-size: clamp(0.5rem, 5vw, 1.0rem);
	 margin-left: 0.5rem
     margin-right: 0.5rem
 }
 
 .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-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-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;
 }
 
 
 
 @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;
 
 }
 
 .topline2 {
     color: var(--red);
     text-transform: bold;
     margin-bottom: 0.5rem;
 }
 
 .services__heading2 {
     color: var(--white);
     margin-bottom: 1rem;
     font-size: clamp(0.5rem, 6vw, 3rem);
     align-items: center;
     text-align: center;
	 margin-left: 0.5rem
     margin-right: 0.5rem
 
 }
 
 .services__features2 {
     list-style: none;
 }
 
 .services__feature2 {
     color: var(--white);
     margin-bottom: 1.5rem;
     font-size: clamp(0.5rem, 5vw, 1.0rem);
     align-items: center;
     text-align: center;
	 margin-left: 0.5rem
     margin-right: 0.5rem
 
 }
 
 @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(--black);
     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: 0.8rem;
     text-align: center;
     align-items: center;
 
 }
 
 .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;
 
 }
 
 .footer__link:hover {
     color: var(--red);
 }
 
 @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: 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;
    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(0.5rem, 6vw, 3rem);
	margin-left: 0.5rem
    margin-right: 0.5rem
}

.services__features3 {
    list-style: none;
}

.services__feature3 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: clamp(0.5rem, 5vw, 1.0rem);
	margin-left: 0.5rem
    margin-right: 0.5rem
}