@font-face {
    font-family: MazzardBlack;
    src: url(fonts/MazzardH-Black.otf);
}
@font-face {
    font-family: MazzardBlackItalic;
    src: url(fonts/MazzardH-BlackItalic.otf);
}
@font-face {
    font-family: MazzardSemiBold;
    src: url(fonts/MazzardH-SemiBold.otf);
}


body{
    background-image: url(src/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    padding-left: 10vw;
    padding-right: 6vw;

}
header{ 
    padding: 2vw 0vw;
}
.wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.contacts{
    font-size: 2vw;
    font-family: MazzardSemiBold;
    text-decoration: none !important;
    color: white !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw; 
}
.phone{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw; 
}
.email{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw; 
}
.logo{ 
    width: 28vw; 
    height: auto;    

}
.logo img{
    width: inherit; 
    height: inherit;    
}
a{
    text-decoration: inherit;
    color: inherit;
    transition: all .5s ease;   
}
a:hover{ 
    color: #210A7B; 
    opacity: 64%;
}
.message{
    text-align: right;
    color: white;
    font-family: MazzardSemiBold;
    font-style: normal;
    text-shadow: 0px 4px 4px rgba(33, 10, 123, 0.15);
    font-size: 5vw;
    margin-bottom: 2vh;
}
.content{
    padding-left: 40vw;
}
footer{
    padding-left: 47vw;
    display: flex;
    flex-direction: row;
    color: white;
    font-family: MazzardSemiBold;
    font-style: normal;
    font-size: 2vw;
    margin: 2vw 0vw; 
}
.location__message{
    padding-left: 1vw;
}

@media screen and 
       (max-device-width : 991px) or 
       (max-width: 991px)
    {
    body{
        background-color: #D2D2D2; 
        background-image: none;
        padding-left: 10vw;
        padding-right: 10vw; 
        position: relative;
    }
    .wrap{
        flex-direction: column;
    }
    .contacts{
        flex-direction: column;
        margin-bottom:  2vh;
        font-size: 2.5vh;
    }
    .logo{
        width: 40vh; 
    }
    .content{
        padding-left: 0;
    }
    .message{
        text-align: center;
        font-size: 5vh;
    }
    footer{
        margin: 3vh 0;  
        padding-left: 0;
        font-size: 3vh;
    }
}