html, body{
    font-family: 'Poppins', sans-serif;
}
body > section > div.hero-head > a:hover{background-color: transparent!important}
body > section > div.hero-head > a, body > section > div.hero-head > a:hover{cursor:default!important;}

#header-banner{
	height:35vh;
    display: flex;
	background-image: url('../images/banner-header-1.jpg');
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    flex-direction: column;
    justify-content: space-between;
}

#nav{
    position: relative;
    top: 5vh;
    height: 10vh;
    border-radius: 15px;
    display: inline-flex;
    box-shadow: 0 0 5px 0 ;
    backdrop-filter: blur(5px);
}

#nav ul{
    background: rgba(221, 231, 220, .8);
    border: solid 1px #F0FDE9;
    border-radius: 15px;
    text-shadow: 1px 1px 1px #d1d1d1;
}

.active{
    background: linear-gradient(90deg, rgba(168,255,120,1) 0%, rgba(120,255,214,1) 100%);
    border-radius: 15px;
    filter: blur(22px);
}

#nav ul li{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    position: relative;
    font-weight: bold!important
}
#nav ul li span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#nav ul li div{
    padding: 3vh 3vw;
}

.gradientbtn{
    background: linear-gradient(270deg, rgba(168,255,120,1) 0%, rgba(120,255,214,1) 100%);
    border: none;
}

#uneideebox{
    position:relative;
    margin-top: 5vh;
}

.grdbtn{
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
}

.grdbtnc{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#presentation-div{margin-top: 10vh;height: 60vh;}

#vous-etes>.container>.columns{justify-content: space-around;}

#vous-etes>.container>.columns>.column{
    display: flex;
    height:12.5vh;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    box-shadow: #656565bb 7px 7px 10px 0px;
}

#particulier{background-image: url('../images/particulier.png')}
#entreprise{background-image: url('../images/entreprise.png')}
#autre{background-image: url('../images/autre.png')}

.row-sb{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.row-fe{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.gradient-text{
    background: -webkit-linear-gradient(90deg, rgba(168,255,120,1) 0%, rgba(120,255,214,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.boxshadow{
    box-shadow: #656565bb 4px 4px 5px 0px;
}

.pack-card{
    border-radius: 10px;
    box-shadow: #656565bb 7px 7px 10px 0px;
}

.anim-card{
    border-radius: 25px;
    box-shadow: #656565bb 7px 7px 10px 0px;
    background: white;
}

.has-background-fade{
    background: linear-gradient(90deg, rgba(168,255,120,1) 0%, rgba(120,255,214,1) 100%)
}

footer{
    background: linear-gradient(90deg, rgba(168,255,120,1) 0%, rgba(120,255,214,1) 100%);
}

#tab-nav{
    display: inline-flex;
    padding:1vh 1vw;
    align-items: center;
    border-radius: 5vh;
    box-shadow: #656565bb 5px 5px 10px 0px;
}

.tab-btn{
    padding: 1.5vh 1.5vw;
    margin-right: .5vw;
    border-radius: 5vh;
}

.tab-btn:hover:not(.btn-active){background-color: #d1d1d155}

.tab-btn:last-child{
    margin-right: 0px;
}

.btn-active{
    background: linear-gradient(270deg, rgba(168,255,120,1) 0%, rgba(120,255,214,1) 100%);
}

#contact-form-content>#status{
    display: flex;
    justify-content: space-around;
    margin-bottom: 5vh;
}

#contact-form-content>.columns{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0!important;
}

.input, .select{
    margin: 2vh 0;
}

.select, select{width: 100%;}

input, select, textarea {
  background-color : #f0f0f0!important;
  color: black; 
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black!important;
  opacity: 0.6; /* Firefox */
}

.br-25{border-radius:25%}

.br-20{border-radius:20%}

@media only screen and (max-width:768px){
    #presentation-div{
        height: auto;
        margin-bottom: 2rem;
    }
    #vous-etes, #nos-packs, #presentation-div, .anim-card, #contact-card{
        margin-left:2rem;
        margin-right:2rem;
    }
}

@media only screen and (max-width:1023px){
    .row-sb, .row-fe{
        flex-direction: column;
    }

    .row-fe a{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .pack-card{padding: 0 2rem!important;}

    #contact-card{padding: 0!important}
    
    .textarea:not([rows]){min-height:12em;}

    #status{display: block!important}
    
    #contact-form-cols{
        flex-direction: column;
    }
}