/* Typography */
@font-face {
    font-family: 'Nixie One';
    src: url('../images/fonts/NixieOne-Regular.eot'); /* IE9 Compat Modes */
    src: url('../images/fonts/NixieOne-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../images/fonts/NixieOne-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../images/fonts/NixieOne-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('../images/fonts/NixieOne-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DINPro';
    src: url('../images/fonts/DINPro-Light.eot');
    src: url('../images/fonts/DINPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../images/fonts/DINPro-Light.woff2') format('woff2'),
        url('../images/fonts/DINPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-white: #fff;
    --color-dark: #1D1D1B; 
    --serif: 'Nixie One', 'Courier New', Courier, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    position: relative;
    height: 100vh;
    background-color: var(--color-dark);
    font-family: 'Nixie One', 'Courier New', Courier, monospace;
}
body {
    color: var(--color-white);
}
.header, .right-col, .right-col .lang, .social-media ul {
    display: flex;
    align-items: center;
}
.header {
    z-index: 999;
    position: relative;
    justify-content: space-between;
    padding: 35px 40px;
}
.logo {
    width: 280px;
}
a {
    text-decoration: none;
    color: var(--color-white); 
}
a:hover {
    text-decoration: underline;
}
.right-col {
    width: 70%;
    justify-content: flex-end;
    gap: 30px;
}
.right-col .lang {
    gap: 20px;
    font-family: 'DINPro', Arial, Helvetica, sans-serif;
}
.right-col h4 {
    font-size: 18px;
    line-height: 1;
}
.right-col h4::after {
    content: '';
    height: 20px;
    display: block;
    border-right: 1px solid var(--color-white);
    float: right;
    padding-right: 20px;
}
.social-media ul {
    gap: 10px;
}
.social-media ul li {
    list-style: none;
}
.social-media ul li a {
    transition: all .5 ease-in-out;
}
.social-media ul li:hover {
    transform: scale(0.9);
}
.social-media ul li svg {
    width: 20px;
}
.social-media ul #icon-mail {
    padding-left: 10px;
    width: 40px;
}

.carousel .swiper {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100vh;
}

/* Swiper */
.swiper {
    width: 100%;
    height: 100%;
} 
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
}

.swiper-slide img {
    display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
}
.swiper-slide h2 {
    font-size: 3vw;
    font-family: var(--serif);
    font-weight: 300;
}

.swiper-image-inner {
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, 0.2);
    background-blend-mode: overlay;
}

.swiper-image-one {
    background-image: url("../images/imatge-web-1.jpg");
}
.swiper-image-two {
    background-image: url("../images/imatge-web-2.jpg");
}
.swiper-image-three {
    background-image: url("../images/imatge-web-3.jpg");
}
.swiper-image-four {
    background-image: url("../images/imatge-web-4.jpg");
}
.swiper-image-five {
    background-image: url("../images/imatge-web-5.jpg");
}



.swiper-slide-active h2 {
    animation: fade-in 2s ease .5s both;
}
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.footer {
    z-index: 999;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}
.footer::before {
    content: '';
    width: 200px;
    height: 1px;
    background-color: var(--color-white);
    display: block;
    border-radius: 20px;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    top: -30px;
}

.footer h4 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 18px;
}

@media screen and (max-width:768px) {
    .header { padding: 40px 30px; }
    .logo { width: 40%; }
    .right-col { width: 60%; gap: 20px; }
    .right-col h4::after { padding-right: 10px;    height: 22px; }
    .right-col h4 { font-size: 18px; line-height: 18px; }
    .right-col .lang { margin-top: -4px; }

    .social-media ul li svg { width: 25px; }
    .social-media ul #icon-mail { width: 40px; }

    .swiper-slide h2 { font-size: 7vw; padding: 0 40px; }
}

@media screen and (max-width:527px) {
    .header { flex-direction: column-reverse; gap: 40px; padding: 30px; }
    .logo { width: 80%; }
    .right-col { width: 100%; justify-content: space-between; }
    .right-col h4 { line-height: 28px; }
    .right-col .lang h4:last-child::after { display: none;}
    .right-col h4::after { height: 20px; margin-top: 6px; }
    .right-col .lang { gap: 14px; }
}