.services{
    background: transparent;
    position:relative;
}

.services::after{
    content:"";
    display:block;
    justify-self:center;
    width:100%;
    height: 1px;
    background:linear-gradient(
        90deg,
        transparent,
        #ffc400,
        transparent
    );
}

.services::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0,0,0, 0.6) 30%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.9) 100%
    );

    pointer-events: none;
}

.services-container {
    height: 99.9vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-evenly;
    align-items: center;
    padding-right: 2rem;
    padding-left: 1rem;
    padding-top: 5rem;
    position: relative;
    z-index: 2;
}

@media (min-width:768px) {
  .services-container { 
    padding-right: 0;
    padding-left: 0;
    padding-top: 6rem;
  }
}

.video-bg-services {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    box-sizing: border-box;
    padding-bottom: 1px;
}

.services-leyend{
    display:block;
    margin:1rem 0rem;
    color:#c5a100;
    font-family:'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight:600;
    line-height:1.05;
    letter-spacing:.5px;
    text-align:center;
    justify-self:left;
    text-shadow: 1px 1px 2px rgb(255, 0, 0);
}

@media (min-width:768px) and (max-width:1919px) {
    .services-leyend{
        width:80%;
        font-size:4rem;
        text-align:center;
    }
}

@media (min-width:1920px) {
    .services-leyend{
        width:70%;
        font-size:7rem;
        text-align:center;
    }
}

.services-description-container{
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-items: left;
    justify-self:center;
    text-align:center;
    margin-top:1rem;
}

@media (min-width:768px) and (max-width:1919px) {
    .services-description-container{
        width:80%;
        margin-left: 5rem;
    }
}

@media (min-width:1920px) {
    .services-description-container{
        width:70%;
    }
}

.services-description {
    margin:0;
    color:#afafaf;
    font-family:'Barlow', sans-serif;
    border:1px solid rgba(212, 175, 55, 0);
    border-left: none;
    border-radius: 0.5rem;
    background:rgba(0, 0, 0, 0.568);
    padding: 0.5rem 1rem;
    font-size:1.2rem;
    text-align: justify;
    line-height: 1.2;
    hyphens: auto;
    word-break: normal;
    overflow-wrap: break-word;
}

@media (min-width:768px) and (max-width:1919px) {
    .services-description,
    .services-more{
        max-width:70%;
    }
}

@media (min-width:1920px) {
    .services-description,
    .services-more{
        width:100%;
        font-size:2.5rem;
    }
}