/* breadcrumb */
/* PAGE TITLE SECTION */
.page-title {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0;
    z-index: 1;
    overflow: hidden;
}

/* DARK OVERLAY */
.page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0.75)
    );
    z-index: -1;
}

/* CONTENT ABOVE OVERLAY */
.page-title .auto-container {
    position: relative;
    z-index: 2;
    text-align: center;
}


/* BREADCRUMB */
.page-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
}





/* SPACING BETWEEN ITEMS */


/* service rotator */

.service-rotator {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-rotator li {
    display: inline-flex;
}

/* MAIN BUTTON */
.service-rotator a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 22px;
    min-height: 42px;

    background: transparent !important;
    color: #fff;

    border-radius: 50px;
    border: none !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;

    white-space: nowrap; /* 🔥 prevents text breaking */
    
    box-shadow: none !important ;

    transition: all 0.3s ease;
}

/* HOVER */

.service-rotator a:hover {
    
    color: #C94A2E !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}


/* OPTIONAL: SMOOTH APPEAR */
.service-rotator li {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* responsive */

@media (max-width: 768px) {
    .banner-section.dark-style .content-box h1,
    .banner-section .content-box h1,
    .page-title h2, .service-hero-content h1{
        font-size: 40px !important;
    } 

    .sec-title h2, .cta-section h2,
    .testimonial-block h2,
    .about-us-section-three h2,
    .modern-info h2,
    .lower-box h1,
    .terms-header h2{
        font-size: 30px !important;
    }
}

@media (max-width: 426px) {
     .banner-section.dark-style .content-box h1,
     .banner-section .content-box h1,
     .page-title h2{
        font-size: 35px !important;
        line-height: 35px !important;
     }

     .sec-title h2, .cta-section h2,
    .testimonial-block h2,
    .about-us-section-three h2,
    .service-text h3,
    .modern-info h2,
    .service-hero-content h1,
    .lower-box h1,
    .blog-single .lower-content h3,
    .terms-header h2{
        font-size: 25px !important;
        line-height: 35px !important;
    }

    .feature-block-two h4{
        font-size: 20px !important;
    }
}

@media (max-width: 376px) {
    .banner-section.dark-style .content-box h1,
     .banner-section .content-box h1,
     .page-title h2{
        font-size: 30px !important;
     }


     .banner-section .text,
     .cta-section .text,
     .feature-block-two h4,
     .testimonial-block .text{
        font-size: 18px !important;
     }

     .sec-title h2, .cta-section h2,
    .testimonial-block h2,
    .about-us-section-three h2,
    .service-text h3,
    .modern-info h2,
    .tabs-content .content h3,
    .service-hero-content h1,
    .project-block h2,
    .lower-box h1,
    .blog-single .lower-content h3,
    .terms-header h2,
    .terms-card h3{
        font-size: 22px !important;
    }
}

@media (max-width: 320px) {
    .banner-section.dark-style .content-box h1,
     .banner-section .content-box h1,
     .page-title h2{
        font-size: 25px !important;
     }

    .banner-section .text,
     .cta-section .text,
     .feature-block-two h4,
     .testimonial-block .text,
     .about-us-section-three h4,
     .faq-question h3{
        font-size: 16px !important;
     }

     .sec-title h2, .cta-section h2,
    .testimonial-block h2,
    .about-us-section-three h2,
    .service-text h3,
    .modern-info h2,
    .tabs-content .content h3,
    .service-hero-content h1,
    .blog-single .lower-content h3,
    .terms-card h3{
        font-size: 20px !important;
    }

    p, .text{
        font-size: 14px !important;
    }

    .service-block-one h4,
    .service-block-two .inner-box .content h4,
    .project-block h2{
        font-size: 22px !important;
    }

    .footer-bottom .copyright .text{
        font-size: 12px !important;
    }

    .content1 h3,
    .team-block-one h4,
    .service-text h3{
        font-size: 18px !important;
    }
}