*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;  
} 
input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}
:root {
    --step--2: clamp(0.52rem, calc(0.48rem + 0.21vw), 0.64rem);
    --step--1: clamp(0.63rem, calc(0.56rem + 0.30vw), 0.80rem);
    --step-0: clamp(0.75rem, calc(0.66rem + 0.43vw), 1.00rem);
    --step-1: clamp(0.90rem, calc(0.78rem + 0.61vw), 1.25rem);
    --step-2: clamp(1.08rem, calc(0.91rem + 0.84vw), 1.56rem);
    --step-3: clamp(1.30rem, calc(1.07rem + 1.14vw), 1.95rem);
    --step-4: clamp(1.56rem, calc(1.25rem + 1.54vw), 2.44rem);
    --step-5: clamp(1.87rem, calc(1.45rem + 2.06vw), 3.05rem);
    --step-6: clamp(2.24rem, calc(1.69rem + 2.74vw), 3.82rem);
    --step-7: clamp(2.69rem, calc(1.96rem + 3.62vw), 4.77rem);
    --step-8: clamp(3.23rem, calc(2.27rem + 4.76vw), 5.96rem);
  }
  :root {
    --stap--2: clamp(0.22rem, calc(0.05rem + 0.85vw), 0.65rem);
    --stap--1: clamp(0.26rem, calc(0.06rem + 1.02vw), 0.78rem);
    --stap-0: clamp(0.31rem, calc(0.07rem + 1.22vw), 0.94rem);
    --stap-1: clamp(0.38rem, calc(0.08rem + 1.46vw), 1.13rem);
    --stap-2: clamp(0.45rem, calc(0.10rem + 1.76vw), 1.35rem);
    --stap-3: clamp(0.54rem, calc(0.12rem + 2.11vw), 1.62rem);
    --stap-4: clamp(0.65rem, calc(0.14rem + 2.53vw), 1.94rem);
    --stap-5: clamp(0.78rem, calc(0.17rem + 3.03vw), 2.33rem);
    --stap-6: clamp(0.93rem, calc(0.20rem + 3.64vw), 2.80rem);
    --stap-7: clamp(1.12rem, calc(0.25rem + 4.37vw), 3.36rem);
    --stap-8: clamp(1.34rem, calc(0.29rem + 5.24vw), 4.03rem);
  }
  :root {
    --space-3xs: clamp(0.69rem, calc(0.39rem + 1.46vw), 5rem);
    --space-2xs: clamp(1.44rem, calc(0.90rem + 2.68vw), 2.81rem);
    --space-xs: clamp(2.13rem, calc(1.30rem + 4.15vw), 4.25rem);
    --space-s: clamp(2.81rem, calc(1.71rem + 5.49vw), 5.63rem);
    --space-m: clamp(8.44rem, calc(2.62rem + 8.17vw), 4.25rem);
    --space-l: clamp(5.63rem, calc(3.43rem + 10.98vw), 11.25rem);
    --space-xl: clamp(8.44rem, calc(5.14rem + 16.46vw), 16.88rem);
    --space-2xl: clamp(11.25rem, calc(6.86rem + 21.95vw), 22.50rem);
    --space-3xl: clamp(16.88rem, calc(10.29rem + 32.93vw), 33.75rem);
  }
.header{
    min-height: max(500px, 100vh);
    width: 100%;
    background-image: linear-gradient(rgba(245,245,245,0.8),rgba(245,245,245,0.7), rgba(245,245,245,0.4)),url(Afbeeldingen/Draaiwiel.webp);
    background-position: center;
    background-size: cover;
    position: relative;
    justify-content: center;
    overflow: hidden;
}

nav{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    transition: 0.8s ease;
    width: 100%;
    height: 20%;
    justify-items: center;
}
html, body {
    overflow-x: hidden;
  }
  body {
    position: relative
  }




/*-------------------header-links-----------------*/
.header-links{
    grid-column: 1/2;
    transition: 0.5s;
}
.header-links ul{
    background: rgba(245,245,245, 0);
    width: 100%;
    z-index: 0;
}
.header-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
}    
.header-links ul li a{
    color: #334046;
    text-decoration: none;
    font-size: var(--step-0);
    font-weight: 500;
    transition: 0.5s;
}
.header-links ul li a::after{
    content: '';
    width: 0%;
    height: 1.6px;
    background: #334046;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.header-links ul li a:hover::after{
    width: 100%;
}
.contactlink{
    display: none;
}


/*--------------header-image---------------*/
.header-image{
    grid-column: 2/3;
    grid-row: 1/2;
    z-index: 1;
}
.logo{
    max-width: 128px;
    max-height: auto;
    object-fit: cover;
    transition: 0.5s;
}

/*-------------header-buttons-----------*/
.header-buttons{
    grid-column: 3/4;
    margin-left: 200px;
}
.header-buttons a{
    text-decoration: none;
}
.header-buttonsc{
    grid-column: 3/4;
    margin-left: 300px;
}
.header-buttonsc a{
    text-decoration: none;
}  

.merkknoppen{
    list-style: none;
    padding: 4px 15px;
    border: 3px solid #334046;
    border-radius: 10px;
    background: #334046;
    color: white;
    transition: 0.5s;
    text-decoration: none;
} 
.merkknoppen2{
    list-style: none;
    padding: 4px 30px;
    border: 3px solid #F1807E;
    border-radius: 10px;
    background: #F1807E;
    color: white;
    transition: 0.5s;
    text-decoration: none;
    font-size: 1.1em;
}   
.contact{
    border: 3px solid #F1807E;
    border-radius: 10px;
    padding: 2.5px 10px;
    text-decoration: none;
    color: white;
    background: #F1807E;
    z-index: 2;
    transition: 0.5s;
    text-align: center;
    font-weight: 600;
}

.contact:hover,.contact:focus{
    border: 3px solid #334046;
    background: #f5f5f5;
    color: #334046;
    transition: 0.5s;
}
.merkknoppen:hover,.merkknoppen2:hover, #facebook:hover{
    background: #f5f5f5;
    color: #334046;
    transition: 0.5s;
    font-weight: bold;
    border: 3px solid #334046;
 }
#facebook{
    background: #334046;
    border: 3px solid #334046;
}

@media(max-width: 1950px)
{   
    #navhome{
        margin-right: 0;
    }
    .header-buttons, .header-buttonsc{
        display: none;
    }
    .contactlink{
        display: inline-block;
}
    nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;        
    }
    .header-image{
        padding-left: 2rem;
    }
    .header-title{
        padding-left: 2rem;
    }
    .header-links{
        padding-right: 2rem;
    }
}
/*-------------header-title-------------*/
.header-title{
    grid-column: 2/3;
    grid-row: 1/2;
    z-index: 1;
    text-align: center;
    color: #334046;
    font-size: var(--step-5);
    font-weight: bold;
    transition: 0.5s;

}

.text-box{
    width: 100%;
    height: 50vh;
    color: #334046;
    display: grid;
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    /*------center text-box in header------*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
}
@media(max-width: 1450px)
{
    .text-box{
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        grid-row-gap: 30px;
    }
}
.text-box h1{
    padding-top: 2rem;
    grid-column: 2/3;
    grid-row: 1/2;
    font-size:var(--step-5);
}
.text-box p{
    grid-column: 2/3;
    grid-row: 2/3;
    font-size: 15px;
    color:  #334046;
    padding-inline: 2rem;
    font-weight: 500;
}

.hero-btn{
    grid-column: 2/3;
    grid-row: 3/4;
    display: inline-block;
    text-decoration: none;
    color: #334046;
    border: 1px solid #334046;
    padding: 12px 34px;
    font-size: 20px;
    background: transparent;
    position: relative;
    border-radius: 5px;
    transition: 0.5s ease-in-out;
    margin-bottom: 100px;
    font-weight: 500;
}
  
.hero-btn:hover, .hero-btn:focus{               
    background: #F1807E;
    color: white;
    border-radius: 10px;
    border: 1px solid #F1807E; 
}


nav .fa-solid{
    display: none ;
}
@media(max-height: 500px){
    .sticky{
        z-index: 4;
    }
}

@media(max-width: 1050px){
.contactlink{
    display: block;
}
.contact{
    display: none;
}
.center{
    padding-top: 25px;
    }
.header-links ul li a{
    font-size: var(--step-0);
    }
.header-links ul li{
        display: block;
    }
.header-links ul li a:hover::after{
    width: 0%;
    }
    .header-links{
        position: absolute;
        top: 0;
        right: -60vw;
        height: 100vh;
        padding-top: 4rem;
        width: 40vw;
        padding-left: rem;
        background-color: #f5f5f5;
        text-align: left;
        padding-right: 2rem;
        padding-left: 2rem;
        box-shadow: 5px 0px 10px rgba(0,0,0,0.2);
        z-index: 3;
        transition: 0.5s;
    }
    nav .fa-xmark{
        color: #334046;
        display: block;
        font-size: var(--step-3);
        margin-bottom: 2rem;
    }
    nav .fa-bars{
        display: block;
        color: #334046;
        font-size: var(--step-3);
        padding-right: 2rem;
    }
    

    
   .nav-links ul{
        padding: 30px;
    }
    .nav-links ul li:hover::after{
    width: 0%;
    }
    
nav .fa-brands{
        display: none;
    }
}
/*---------------sticky-----------------*/
.sticky{
    position: fixed;
    padding-top: 30px;
    padding-bottom: 30px;
    top: 0;
    height: var(--step-7);
    width: 100%;
    background-image: linear-gradient(rgba(245,245,245,0.8),rgba(245,245,245,1)),url(Afbeeldingen/Draaiwiel.webp);
    background-position: center;
    background-size: cover;
    transition: 1s;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    box-shadow: 0px 5px 0px rgba(0,0,0, 0.2);
    z-index: 4;
}
/*-------------about-------------*/
.about-header{
    text-align: center;
    padding-top: 50px;
    height: 25vh;
    width: 100%;
    background-image: linear-gradient(rgba(245,245,245,0.8),rgba(245,245,245,1)),url(Afbeeldingen/Draaiwiel.webp);
    background-position: center;
    background-size: cover;
    z-index: 2;
    position: relative;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    box-shadow: 0px 5px 0px rgba(0,0,0, 0.2);
    opacity: 1;
}
@media(max-width: 800px){
    .about-header{
        height: 15vh;
    }
}
@media(max-width: 500px){
    .about-header{
        height: 10vh;
    }
}

.header-title a{
    text-decoration: none;
    color: #334046;
}
.header-title:hover, .header-title:focus{
    opacity: 0.8;
}
h2{
    font-size: var(--step-5);
    color: #334046;
}

.grid-container{
    display: grid;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
    grid-template-columns: 50% 290px 290px;
    justify-content: center;
    margin-top: 10rem;
    transform: translate(0, -5rem);
}
@media (min-width: 600px){
    .grid-item-1{
    background-color: #f5f5f5;
    border-radius: 10px;
    padding-top: 10px;
    padding: 20px 40px;
    box-shadow: 5px 5px 5px rgba(0,0,0, 0.2);
    transition: 0.5s;
    }

.grid-item-1:hover, .grid-item-1:focus{
    box-shadow: 10px 10px 10px rgba(0,0,0, 0.2);
    transition: 0.5s;
}
}
@media (max-width: 1300px){
    .grid-container{
        display: flex;
        justify-content: center;
        justify-items: center;
    }
    .grid-item-1{
        margin-inline: 2rem;
        text-align: center;
    }
    .grid-item-2{
        display: none;
    }
    .grid-item-3{
        display: none;
    }
    .grid-item-4{
        display: none;
    }

}
@media (max-width: 400px){
    .grid-container{
        display: flex;
        justify-content: center;
        justify-items: center;
    }
    .grid-item-1{
        margin-inline: 2rem;
        text-align: center;
    }

}

.grid-item-1{
    grid-column: 1/2;
    grid-row: 1/3;
    margin-right: 50px;
}
.grid-item-2{
    grid-column: 2/4;
    grid-row: 1/2;
}
.grid-item-3{
    grid-column: 2/3;
    grid-row: 2/3;
}
.gird-item-4{
    grid-column: 3/4;
    grid-row: 2/3;
}

.noorw{
    border-radius: 5px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    filter: grayscale(50%);
}
.noorwe{
    border-radius: 5px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    filter: grayscale(30%);
}
.img1{
    width: 100%;
    max-width: 700px;
    height: auto;
}
.img2{
    width: 100%;
    max-width: 340px;
    height: auto;
}
.img3{
    width: 100%;
    max-width: 340px;
    height: auto;
}

/*------------Our Team-------------*/

.row{
    display: grid;
    justify-content: center;
    justify-items: center; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));      
    text-align: center;
    padding-inline: var(--space-m);
}
.profiel{
    border-radius: 50%;
    margin-top: 75px;
    margin-bottom: 30px;
    transition: 0.5s;
    width: 100%;
    max-width: 800px;
    height: auto;   
}
.profiel:hover, .profiel:focus{
    transform: scale(1.05);
    filter: brightness(102%);
    box-shadow: 5px 10px 40px rgba(0,0,0,0.8);
}
.ourteam-col{
    flex: 1;
    margin: 0 var(--space-3xs);
    text-align: center;
    transition: 0.5s;
    margin-bottom: 100px;
}
.ourteam-col p{
    padding-inline: auto;
    padding-top: 1rem;
    font-size: var(--step-0);
}
.ourteam-col p1{
    font-size: var(--step-0);
    font-style: italic;
    text-align: center;
}
.ourteam-col h3{
    text-align: center;
}
@media (max-width: 1069px){
    .row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        align-items: center;
        padding-inline: 0;
    }
.ourteam-col p{
        margin-bottom: 0;
        padding-inline: 4em;
    }
    .profiel{
        margin-top: 0px;
        max-width: 600px;
    }
#floris{
    margin-top: 50px;
}
}
@media(min-width: 750px) and (max-width: 1069px){
    .ourteam-col p{
        margin-bottom: 0;
        padding-inline: 8em;
    }

}
@media (max-width: 600px){
    .ourteam-col h3, .ourteam-col p{
        padding-inline: 2em;
    }
    .profiel:hover, .profiel:focus{
        transform: scale(1);
        filter: brightness(102%);
        box-shadow: 5px 10px 40px rgba(0,0,0,0.8);
    }
}

/*------------Our Services-------------*/

.ourservices-container{
    display: grid;
    justify-content: center;
    justify-items: center; 
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));      
    text-align: center;
    width: 100%;
    background-color: #E4D6FF;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.ourservices-container2{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    justify-content: center;
    justify-items: center;       
    text-align: center;
    width: 100%;
    background-color: #E2F4F3;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.serviceimg1{
    max-width: 800px;
    height: auto;
    width: 90%;
    border-radius: 100px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    border-top-right-radius: 0px;
}
.serviceimg2{
    max-width: 800px;
    height: auto;
    width: 90%;
    border-radius: 100px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    border-top-left-radius: 0px;
    grid-column: 2/3;
    grid-row: 1/2;
}
.ourservices-head{
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    font-size: var(--step-1);
    font-weight: 400;
}
.ourservices-foot{
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    font-size: var(--step-0);
    margin-inline: 6rem;
    font-style: italic;
}
@media(max-width: 1300px){
    .ourservices-foot{
        margin-inline: 2rem;
    }
}
.ourservices-col1{
    flex: 1;
    margin: 0 3rem;
    text-align: center;
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
}
.ourservices-col1 p{
    padding-inline: 3rem;
    padding-top: 1rem;
    font-size: var(--step-0);
    font-weight: 400;
}
.ourservices-col1 h3{
    font-size: var(--step-3);
    font-weight: 400;
}
.ourservices-col2{
    flex: 1;
    margin: 0 3rem;
    text-align: center;
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    grid-column: 1/2;
    grid-row: 1/2;
}
.ourservices-col2 p{
    padding-inline: 3rem;
    padding-top: 1rem;
    font-size: var(--step-0);
    font-weight: 400;
}
.ourservices-col2 h3{
    font-size: var(--step-3);
    font-weight: 400;
}
@media (max-width: 999px){
    .serviceimg2{
        max-width: 600px;
    }
    .serviceimg1{
        max-width: 600px;
    }
    .ourservices-container2{
        display: block;
    }
    .ourservices-container{
        display: block;
    }
}
@media(max-width: 400px){
    .ourservices-col1{
        margin-right: 0rem;
        margin-left: 0rem;
    }
    .ourservices-col2{
        margin-right: 0rem;
        margin-left: 0rem;
    }
}
/*------------Our projects-------------*/
.projectimg1, .projectimg2{
    max-height: 800px;
    width: auto;
    width: 90%;
    border-radius: 50px;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    border-top-right-radius: 0px;
    transition: 0.5s;
}
.projectimg2{
    border-radius: 50px;
    border-top-left-radius: 0px;
}

.projectimg1:hover, .projectimg2:hover{
    transform: scale(1.05);
    box-shadow: 5px 10px 40px rgba(0,0,0,0.8);
    border-radius: 20px;
}
.projectcontainer1{
    background-color: #f5f5f5;
    align-items: center;
}
.projectcontainer1 a{
    text-decoration: none;
    color: #334046;
}
.projectcontainer1 h3{
    font-size: var(--step-5);
    font-weight: 400;
    padding-top: 1rem;
}
   
/*------------Contact-------------*/
summary{
    display: flex;
    align-items: center;
    /*place container in center*/
    margin: 0 auto;
    font-size: 1.3em;
    font-weight: 400;
    margin-top: 1rem;
    padding-bottom: 0;
    text-align: left;
    background-color: #ebebeb;
    color: #999999;
    border-radius: 15px;
    transition: 0.5s;
    padding: 0.5em;
    width: 60%;
    padding-inline: 1rem;
}
form a{
    color: #334046;
    text-decoration: none;
}
.fa-plus{
    margin-right: 0.5rem;
    margin-top: 3px;
    font-size: 1em;
    color: #999999;
    transition: 0.2s;
    opacity: 0.5;
    margin-left: auto;
}
summary:hover .fa-plus{
    opacity: 1;
}


details p {
background-color: #ebebeb;
margin-top: 1rem;
padding: 1.5em 1em;
width: 80%;
margin-inline: 6%;
border-radius: 25px;
font-size: 1.1em;
transition: 0.5s;
color: #334046;
border-bottom: solid 5px #334046;
}
.contact-header{  
        text-align: center;
        padding-top: 3rem;
        height: max(100vh, 1000px);
        width: 100%;
        background-image: linear-gradient(rgba(245,245,245,0.8),rgba(245,245,245,1)),url(Afbeeldingen/Draaiwiel.webp);
        background-position: center;
        background-size: cover;
        z-index: 2;
        position: relative;
        box-shadow: 0px 5px 0px rgba(0,0,0, 0.2);
        opacity: 1; 

}
@media(max-width: 1400px){
    .contact-header{
        padding-top: 0;
    }
}
.contact-head{
    background-color: #f5f5f5;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
}
#title-Tag-Line {
    font-size: 20px;
  }
  .form {
    background: #fff;
    box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
    border-radius: 5px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    border-top: 10px solid #334046;
  }
  ::-webkit-input-placeholder {
    font-size: 1.3em;
    color: #999999;
 }
  
  .title{
    display: block;
    margin: 10px auto 5px;
    width: 300px;
    color: #334046;
  }
  
  .pageTitle{
    font-size: var(--step-4);
    font-weight: bold;
  }
  .secondaryTitle{
    color: grey;
    font-size: var(--step-0);
  }
  
  .name {
    background-color: #ebebeb;
    color: #334046;
    border-radius: 25px;
    transition: ease 0.5s;
  }
  .name:hover, .name:focus {
    border-bottom: 5px solid #334046;
  }
  .phonenumber {
    background-color: #ebebeb;
    color: #334046;
    border-radius: 25px;
    height: 2em;
    transition: ease 0.5s;
  }
  .phonenumber:hover, .phonenumber:focus, summary:hover {
    border-bottom: 5px solid #334046;

  }
  
  .email {
    background-color: #ebebeb;
    height: 2em;
    transition: ease 0.5s;
  }
  
  .email:hover, .email:focus{
    border-bottom: 5px solid #334046;
  }
  
  .message {
    background-color: #ebebeb;
    overflow: hidden;
    height: 10rem;
  }
  
  .message:hover, .message:focus {
    border-bottom: 5px solid #334046;
    height: 12em;
    transition: ease 0.5s;
  }
  
  .formEntry {
    display: block;
    margin: 30px auto;
    min-width: 300px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    transition: all 0.5s ease 0s;
  }
  .country{
    background-color: #ebebeb;
    width: 325px;
    color: #334046;
  }
    .country:hover, .country:focus {
        border-bottom: 5px solid #334046;
        transition: ease 0.5s;
    }
  
  .submit {
    width: 200px;
    color: white;
    background-color: #334046;
    font-size: 20px;
  }                 
  
  .submit:hover, .submit:focus {
    box-shadow: 15px 15px 15px 5px rgba(78, 72, 77, 0.219);
    transform: translateY(-3px);
    width: 300px;
    border: 5px solid #334046;
    border-radius: 0%;
  }
  @media (max-width: 540px){
    .form{
        max-width: 350px;
    }
    .formEntry{
        min-width: 250px;
    }
  }
    @media (max-width: 400px){
        .form{
            max-width: 300px;
        }
        .formEntry{
            min-width: 200px;
        }
    }

/*--------------terms & conditions--------------*/
.terms{
    text-align: center;
    width: 60%;
    margin: 0 auto;
    padding: 3rem;
    margin-bottom: 5rem;
}
.terms h1{
    font-size: var(--step-6);
    color: #334046;
}
.terms h2{
    margin: 1rem;
    font-size: var(--step-4);
}
/*--------------footer-------------*/
.footer{
    height: 25%;
    width: 100%;
    position: relative;
    background-image: linear-gradient(rgba(245,245,245,1),rgba(245,245,245,0.9),rgba(245,245,245,1)),url(Afbeeldingen/achtergrond\ footer.webp);
    background-position: center;
    background-size: 30%; 
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
    box-shadow: 0px 0px 5px rgba(0,0,0, 0.2);
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 1em;  
}    
.footer-item-1{
    font-size: var(--step--1);
    color: #999999;
    margin-bottom: 10px;
}

.footer-item-2{
    font-size: var(--step-3);
    color:#334046;
    margin-bottom: 10px;
}

.footer-item-3{
    display: none;
}
.footer-item-4{
    font-size: var(--step-5);
    color: #f5f5f5;
    background: #F1807E;
    padding: 8px 30px;
    border-radius: 500px;
    margin-top: 20px;
    transition: 0.5s;
    text-decoration: none;
}
.footer-item-5{
    display: none;
}
.footer-item-6{
    margin-top: 30px;
}

.footer-item-6 a{
    text-decoration: none;
    font-size: 20px;
    color: #334046;
    padding-inline: 10px;
}

.footer-item-6 a:hover{
    color: #999999;
}
.footer-item-8{
    margin-top: 30px;
    margin-bottom: 10px;
    width: 100%;
    height: 1px;
    background-color: #334046;
    opacity: 0.5;
    display: none;

}
.footer-item-7{
    font-size: var(--step--1);
    color: #999999;
    padding-bottom: 10px;
}
@media(max-width:475px){
    .footer-item-7{
        font-size: 7px;
    }
}
@media(max-width:400px){
    .footer-item-7{
        font-size: 6px;
    }
}
.footer-item-4:hover, .footer-item-4:focus{   
    background: rgba(241, 128, 126, 0.8);
    transition: 0.5s;
}