*{
    
    scroll-behavior: smooth;
    transition-duration: 750ms;
}
.icon-hexagon{
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.icon-hexagon:hover{
    
    clip-path: polygon(0 0, 75% 0%, 100% 50%, 100% 99%, 25% 100%, 0% 50%);
}
.contact::after,
.overlay::after,
footer::after{
    content: "";
    z-index: 1;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    background-color: rgba(249, 249, 249, 0.8);
}
.home-hero.overlay::after{
    background-color: rgba(247, 246, 229,0.2);
}
.contact::after{
    background-color: rgba(8, 95, 158,0.5);
}
.card{
    
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.card:hover,
.card:focus {
    transition-duration: .5s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.search-modal-appeared #showModalBtn{
    display:none;
}
.search-modal-appeared #navSearchBtn{
    display:block;
}
.search-modal-appeared input{
    animation: input-appears  750ms ease-in-out  1 ;
    width: 100%;
    display: block;
    transition-duration: 1s;
}
.search-modal-disappeared input{
    animation: input-disappears  750ms ease-in-out  1 ;
}

@keyframes input-appears {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
@keyframes input-disappears {
    0%{
        display: block;
        width: 100%;
    }
    100%{
        display: block;
        width: 0%;
    }
}