.footer__btm .container, .dark .footer__inner, .footer__widget-4, .footer__btm {
    
    background-color: #000000;
}
.footer__logo {
    width: 234px !important;
}
.footer__widget{
    padding: 0px !important;
}
.worksList{
    display: flex !important;
    flex-direction: column;
}
.link-con-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* separa un poco el texto de la flecha */
    color: #ffffff;
    text-decoration: none;
    transition: color 0.15s ease;
    cursor: pointer !important;
  }
  
  .link-con-flecha .flecha-icono {
    width: 1em;
    height: 1em;
    color: inherit;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  
  .link-con-flecha:active {
    color: #ff5756;
  }
  
  .link-con-flecha:active .flecha-icono {
    transform: scale(0.9);
    color: #ff5756;
  }
.link-con-flecha:hover {
    color: #ff5756;
}  


#linkVodPlatform{
    cursor: pointer !important;
}  
#marketingDigitalIcon{
    position: relative;
    /* bottom: 0em; */
    right: 7px;
    /* transform: scale(0.9); */
    top: 2em;
}
#marketingWrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 992px;
    grid-gap: 33px;
}
#marketingLogoWrapper{
    height: 23em;
}
.h3Titles{
    font-size: 27px !important;
   
}
.h4Titles{
    font-size: 23px !important;
   
}

@media(min-width: 467px){
.footer__logo {
    width: 434px !important;
}
}
.fade-in-img {
    opacity: 0;
    transition: opacity 1.5s ease-in;
  }
  
.fade-in-img.loaded {
opacity: 1;
}
.development__area{
    margin-top: 6em;
}
#planningTitle{
    position: relative;
    bottom: 38px;
    font-size: 36px;
    margin-top: 2em;
}
#webDevIcon{
    transform: scale(1.2);
    position: relative;
    top: 33px;
    left: 7px;
}
#multimediaDevIcon{
    transform: scale(1.2);
    position: relative;
    top: 51px;
    left: 19px;
}
#open_offcanvas {
    position: relative;
    /* bottom: 11px; */
}
#claimHero{
    cursor: default;
}
#vodContainer{
    padding-top: 0px !important;
}
#vodLogoWrapper{
    
    height: 23em; 
}
#ottVodIcon{

    position: relative;
    bottom: 2em;
}
.header__area{
    background: black !important;
}
.service__text{
    max-width: 360px !important;
}
.service__title-wrapper{
    max-width: 275px !important;
}
.service__img-wrapper span {
    bottom: 300px !important;
}
.svgIconsWrapper{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}
.service__title-7:hover span {
    color: var(--primary);
  }
  
#cameraWrapper{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 50px;
    right: 39px;  
}
/* .service__item:hover .service__number  span,
.service__item:hover .service__title,
.service__item:hover .service__link p
{
    color: var(--primary);
} */
.service__list .active .service__number span,
.service__list .active .service__title,
.service__list .active .service__link p {
  color: var(--primary) !important;
}

.service__list .active .service__text p {
  color: var(--white) !important;
}
#webDev {
    top: 136px;
}
#mediaDev {
    top: 360px;
}
#marketingDig {
    top: 579px;
}
#ottVOD {
    top: 721px;
    right: 37px;
    max-width: 400px;
}

@media (max-width: 420px){
    #clientesContainer{
        display: flex;
        flex-direction: column;
        align-items: center;
        
        transform: scale(0.95);
    }
    #logoBekaMovilNavBar{
        
        top: 0px;
       
    }
    .svgIconsWrapper{
        flex-direction: column;
        transform: scale(0.8);
    }
    #cameraWrapper {
        bottom: 10px;
        right: 10px;
    }
}
#logoBekaMovilNavBar{
    display: none;
    width: 200px;
    transform: rotate(0deg)
}
#logo-rectangle {
    position: sticky; 
    height: 91px;
    width:  31px;
    top:   179px ;
    left: 35px;
}

.hero__sub-title{
   bottom: -130px;

}

.footer__logo{
    width:188px;
}

.service__top-text{
    margin-left: 1.5em;
}
@media(max-width: 1399px){
    #ottVOD{
        top: 829px;
        right: 37px;
        max-width: 363px;
    }
    #mediaLab{
        max-width: 363px;
    }
   
}
@media(max-width: 1919px){

    .service__area-7::before, .service__area-7::after{
        width: 0px;
    }

}
@media(max-width: 991px){
    #multimediaDevIcon {
        transform: scale(0.9);
        position: relative;
        top: 0px;
        left: -30px;
    }
    
}
@media(max-width: 768px){
    #webDevTitleBlock{
        position: relative;
        bottom: 14px;
    }
    #webDevIcon{
        
        left: 17px;
    }
   
    #planningTitle{
        position: relative;
        bottom: 38px;
        font-size: 33px;
        left: calc(var(--bs-gutter-x) * .5);
    }
    .development__area{
        margin-top: 7em;
        overflow: visible;
    }
}
@media (min-width: 1200px) {
    .footer__logo {
        left: 41px;
    }
    .development__area{
        margin-top: 2em;
    }
    .footer__widget{
        padding: 136px 0 0 0 !important;
    }
}
@media (min-width: 1400px) {
    .col-xxl-5 {
        margin-left: 00px;
    }
}

@media (max-width:1199px){
    .rectangle-logo{
        display:none;
    }
    
    .logo-secondary{
        display:none;
    }

}

@media (max-width: 1911px){
     #logo-rectangle{
        left: 16px
     }
}

@media (width:1280px) and (height:800px){
    #logo-rectangle {
        position: sticky; 
        height: 91px;
        width:  31px;
        top:   179px ;
        left: 16px;
    }
}

@media (width:768px) and (height:906px) {
    .hero__sub-title{
        bottom:-91px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .hero__content {
    padding-left: 60px;
    }
    .header__area{
        background: black !important;
    }
}
  .hero__content img {
    max-width: 80vw;
  }
  @media (min-width: 768px) {
    #serviciosTitle{
        width: 100%;
    }
    .hero__content img {
        max-width: 735px;
      }
      .service__top-text {
        margin-left: 3.5em;
        width: 100%;
    }
    #ottVodIcon{
        position: relative;
        bottom: 4em;
        right: 82px;
        transform: scale(0.9); 
    }
  }
  @media (max-width: 1199px) and (min-width: 992px){
    #open_offcanvas {
        position: relative;
        bottom: 11px;
    }

  }
  @media (max-width: 1199px){
    #logoBekaMovilNavBar{
        top: 0px !important;
    }
  }
  @media (min-width: 1200px) {
    #vodLogoWrapper{
        left: 30px;
        position: relative;
    }
    .brand__item{
        border-top: 0px;
        border-right: 0px;
    }
    .line::before, .line-3 {
        width: 0px;
    }
    .logoBekaMovilNavBar{
       transform: rotate(270deg);
       top:60px;
    }
    .brand__list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;    
    }

    .logoDesktop{
        transform: translate(180);
    }
    #desktopHeader{
        background-color: #0000;
    }
   
    main{
        padding-left: 52px;
    }
  }

  @media (min-width: 768px) {
    .hero__content a {
        display: inline-block;
        max-width: 100%; 
        font-weight: 400;
        font-size: 40px;
        line-height: 1.5;
        color: var(--white);
        padding-bottom: 15px;
        border-bottom: 1px solid var(--white);
        position: relative;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        overflow: hidden;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero__sub-title {
        font-size: 24px;
        bottom: -207px;
        right: 61px;
       
    }
}