*{
    
    scroll-behavior: smooth;
    transition-duration: 750ms;
}
.contact::after,
.overlay::after
{
    content: "";
    z-index: 1;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    background-color: rgba(0, 0, 0,0.3);
}
.home-hero.overlay::after{
    background-color: rgba(247, 246, 229,0.3);
}
.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;
}

.ultra-image{
    position: relative;
    z-index: 10;
    
}
.ultra-image::before{
    transition-duration: .35s;
    content: " ";
    display: none;
    z-index: 1;
    padding: 2em;
    width:5rem;
    height: 2rem;
    background-color: #00aeef;
    position: absolute;
    top:-1em;
    left:1em;
}
.ultra-image:hover::before{
    transition-duration: .35s;
    width:20rem;
    height: 10rem;
}
.ultra-image::after{
    display: none;
    transition-duration: .25s;
    content: " ";
    z-index: 1;
    padding: 2em;
    width:20rem;
    height: 10rem;
    position: absolute;
    bottom:-1em;
    right: 1em;
    background-color: #00aeef;
}
.ultra-image:hover::after{
    transition-duration: .25s;
    width:5rem;
    height: 2rem;
}
*{
    transition-duration: .5s;
}
.primary-btn{ 
    transition-duration: .5s
}
.primary-btn:hover{
    transition-duration: .5s;
    color: #00AEEF;
    background-color: #001242;
}
/* Add this to your CSS */
#query:focus {
    outline: none;
}