* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

@font-face {
    font-family: alata;
    src: url('../fonts/Alata/Alata-Regular.ttf');
}

@font-face {
    font-family: josefin_sans;
    src: url('../fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf');
}

/* header */
header {
    background-image: url(../images/desktop/image-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

nav {
    display: flex;
    justify-content: space-around;
    padding-top: 50px;
    gap: 70px;
}

.links {
    display: flex;
    gap: 20px;
}

a {
    font-family: alata;
    text-decoration: none;
    color: #fff;
    padding: 5px 15px;
    
}

a:hover {
    height: fit-content;
    color: #000;
    background-color: #fff;
    border-radius: 15px;
}
/* 
    slogen
*/
header .slogen_container {
    padding: 150px 0 100px 150px;
}

header .slogen_container .slogen_parent {
    border: 3px solid #fff;
    width: 50%;
}

.slogen_container .slogen_parent .slogen {
    font-family: josefin_sans;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    padding: 30px;
}

/* first article */
.firsta {
    padding: 150px;
    position: relative;
}

.firsta .vr_i img {
    height: 490px;
}

.firsta .vr_p div {
    width: 36%;
    background-color: #fff;
    padding: 100px;
    position: absolute;
    top: 47%;
    left: 47%;
}

.vr_p div h2 {
    text-transform: uppercase;
    font-family: josefin_sans;
    font-size: 35px;
    font-weight: 350;
    padding-bottom: 20px;
}

.vr_p div p {
    color: hsl(0, 0%, 55%);
    font-family: alata;
    font-size: 12px;
}

/* second article */
/* 
    bar
*/
.seconda .bar {
    display: flex;
    justify-content: space-between;
    padding: 50px 150px;
}

.seconda .bar h2 {
    text-transform: uppercase;
    font-family: josefin_sans;
    font-size: 35px;
    font-weight: 350;
}

.seconda .bar button {
    border: 2px solid hsl(0, 0%, 55%);
    background: none;
    text-transform: uppercase;
    font-family: alata;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 5px 20px 5px 20px;
}

/* 
    grid
*/
.seconda .desk_grid {
    padding: 50px 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.seconda .desk_grid div {
    padding-bottom: 50px;
    position: relative;
}

.desk_grid div h3 {
    color: #fff;
    text-transform: uppercase;
    font-family: josefin_sans;
    font-size: 30px;
    font-weight: 200;
    position: absolute;
    bottom: 90px;
    left: 40px;
    width: 170px;
}

/* footer */
footer {
    background-color: #000;
    padding: 50px 150px;
    display: flex;
    justify-content: space-between;
    font-family: alata;
}

.left .icon img {
    width: 130px;
    padding-bottom: 20px
}

.left .links a {
    font-size: 12px;
    color: hsl(0, 1%, 77%);
}

footer .right .contact {
    display: flex;
    justify-content: end;
    gap: 15px;
    padding-bottom: 20px
}

footer .right p {
    color: hsl(0, 0%, 41%);
    font-size: 14px;
}

@media (max-width: 375px) {

    header,
    .seconda .desk_grid {
        display: none;
    }

    header {
        display: block;
        background-image: url(../images/mobile/image-hero.jpg) !important;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* header nav {} */
}