.side-service-rotator {
  margin-top: 20px;
  position: relative;
  height: 32px;
  overflow: hidden;
}

.side-service-rotator__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.side-service-rotator__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #585858;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(14px);
  white-space: nowrap;
}

.side-service-rotator__item:hover {
  color: #2B7ECA;
}
.side-service-rotator__item {
  animation-fill-mode: both;
}

/* cada uno dura 40s total */
.side-service-rotator__item:nth-child(1) { animation: serviceFade 40s infinite 0s; }
.side-service-rotator__item:nth-child(2) { animation: serviceFade 40s infinite 4s; }
.side-service-rotator__item:nth-child(3) { animation: serviceFade 40s infinite 8s; }
.side-service-rotator__item:nth-child(4) { animation: serviceFade 40s infinite 12s; }
.side-service-rotator__item:nth-child(5) { animation: serviceFade 40s infinite 16s; }
.side-service-rotator__item:nth-child(6) { animation: serviceFade 40s infinite 20s; }
.side-service-rotator__item:nth-child(7) { animation: serviceFade 40s infinite 24s; }
.side-service-rotator__item:nth-child(8) { animation: serviceFade 40s infinite 28s; }
.side-service-rotator__item:nth-child(9) { animation: serviceFade 40s infinite 32s; }
.side-service-rotator__item:nth-child(10) { animation: serviceFade 40s infinite 36s; }

@keyframes serviceFade {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  4% {
    opacity: 1;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
    transform: translateY(0);
  }
  16% {
    opacity: 0;
    transform: translateY(-14px);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@media (max-width: 768px) {
    h1, .about-title{
        font-size: 40px !important;
    }

    .hero-content.content-2 .hero-sub-title{
        font-size: 25px;
    }

    .about-section-2 .about-content .about-title,
    .section-heading .section-title,
    .about-content .about-title,
    .blog-wrapper .tj-blog .tj-blog-title{
        font-size: 35px;
    }

    .about-content img{
        width: 195px;
        height: 83px;
    }

    .about-content{
        margin-top: 40px;
    }

    .blog-wrapper .tj-blog .blog-details-box{
        flex-direction: row;
    }
}

@media (max-width: 426px) {
    h1, .about-title{
        font-size: 35px !important;
    }

    .about-section-2 .about-content .about-title, .section-heading .section-title, .about-content,
    .about-content .about-title, .blog-wrapper .tj-blog .tj-blog-title{
        font-size: 30px;
    }

    .blog-wrapper .tj-blog .blog-details-box{
        flex-direction: column;
    }
    .header-right .header-logo img {
        width: 120px;
    }
}

@media (max-width: 376px) {
    .header-4 .top-bar .top-left-content ul{
        display: flex;
        flex-direction: column;
    }
    h1, .about-title{
        font-size: 30px !important;
    }

    .hero-content.content-2 .hero-sub-title{
        font-size: 20px;
    }

    .about-section-2 .about-content .about-title,
    .section-heading .section-title,
    .about-content .about-title,
    .blog-wrapper .tj-blog .tj-blog-title{
        font-size: 25px;
    }

    .team-item .team-content .team-member,
    .footer-area .footer-top .beauly-widget .widget-header-title{
        font-size: 20px;
    }

    .accordion-button{
        font-size: 18px !important;
    }
}

@media (max-width: 320px) {
    h1, .about-title{
        font-size: 25px !important;
    }

    .hero-content.content-2 .hero-sub-title,
    .about-section-2 .about-content .about-sub-title,
    .about-content .about-sub-title, .amenities-item-title a,
    .project-item-title a{
        font-size: 18px;
    }

    .about-section-2 .about-content .about-title, .section-heading .section-title,
    .about-content .about-title, .blog-wrapper .tj-blog .tj-blog-title,
    .blog-wrapper .tj-blog .tj-blog-title{
        font-size: 20px;
    }

    .section-heading p,.plan-content ul li h3,
    .accordion-button, .blog-wrapper .tj-blog .blog-details-box .blog-details-list li{
        font-size: 16px !important;
    }

    .team-item .team-content .team-member, .footer-area .footer-top
     .beauly-widget .widget-header-title,
     .blog-wrapper .tj-blog blockquote span{
        font-size: 18px;
     }

     .project-item .project-content .project-list li span{
        font-size: 14px;
     }

}