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

@font-face {
    font-family: 'NeueHaasDisplay-Roman';
    src: url('../fonts/NeueHaasDisplay-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

body{  font-family: 'NeueHaasDisplay-Roman'; } 

header.header {
    background-color: rgba(63, 63, 63, 0.31);
    width: 95%;
    margin: 0 auto;
    position: fixed;
    top: 5%;
    z-index: 999999;
    left: 3%;
    border-radius: 10px;
}

a[href*="#"] {
    opacity: 1;
    pointer-events: auto;
}

nav#mobile-menu {
    top: 3rem;
    border-radius: 0px 0px 10px 10px;
    padding: 1rem 0;
}

.btn__contact {
    background: white;
    color: rgba(0, 0, 0, 1);
    border-radius: 70px;
    padding: 0.5px 2rem;
    margin: 0 2rem;
    transition: all .5s ease;
    cursor: pointer;
}

.btn__contact:hover {
    background-color: rgba(163, 163, 163, 1);
}

.bg__footer {
    background-image: url(../img/contraportada_1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.line_01{
    position: absolute;
    width: 1px;
    background-color: black;
    top: 0;
    right: 35%;
    z-index: 0;
    height: 10vh;
}

.line_02{
    position: absolute;
    width: 1px;
    background-color: black;
    bottom: 0;
    right: 35%;
    z-index: 0;
    height: 10vh;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.video-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.background-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

video::-webkit-media-controls {
  display: none !important;
}

/* Small screens (mobile phones, portrait view) */
@media (min-width: 640px) {
    /* Styles for small screens (sm) */
}

/* Medium screens (tablets, landscape view) */
@media (min-width: 768px) {
    /* Styles for medium screens (md) */
}

/* Large screens (desktops) */
@media (min-width: 1024px) {
    /* Styles for large screens (lg) */
}

/* Extra large screens (large desktops) */
@media (min-width: 1280px) {
    /* Styles for extra large screens (xl) */
    .bg__footer {
        background-image: url(../img/contraportada_1.jpg);
        background-position: 100% 90%;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    
}

/* 2XL screens (very large desktops, large monitors) */
@media (min-width: 1536px) {
    /* Styles for 2XL screens (2xl) */
}