/* ============================================================
   page-theme.css
   Automated "Modern Mixed" Theme Engine
   Applies dynamic gradients and black text to all inner pages.
   ============================================================ */

/* 1. Global Text Normalization for Inner Page Content (Defaults to Black) */
/* Target specific section classes to avoid breaking Header/Footer */
.about-section-h1,
.feature-section,
.trans-otp-section,
.faq-section,
.why-choose-us-section,
.why-digiplus-section,
.ecommerce-growth-section,
.ivr-features-section,
.click2call-benefits-section,
.blog-section-h1,
.whatsapp-features-section,
.why-choose-inbox-section {
    color: #000000 !important;
}

.about-section-h1 h1,
.about-section-h1 h2,
.about-section-h1 h3,
.about-section-h1 h4,
.about-section-h1 h5,
.about-section-h1 h6,
.about-section-h1 p,
.about-section-h1 span,
.about-section-h1 li,
.about-section-h1 a,
.about-section-h1 .text,
.about-section-h1 .sub-title,
.feature-section h1,
.feature-section h2,
.feature-section h3,
.feature-section h4,
.feature-section h5,
.feature-section h6,
.feature-section p,
.feature-section span,
.feature-section li,
.feature-section a,
.feature-section .text,
.faq-section h1,
.faq-section h2,
.faq-section h3,
.faq-section h4,
.faq-section h5,
.faq-section h6,
.faq-section p,
.faq-section span,
.faq-section li,
.faq-section a,
.faq-section .text,
.why-choose-us-section h1,
.why-choose-us-section h2,
.why-choose-us-section h3,
.why-choose-us-section h4,
.why-choose-us-section h5,
.why-choose-us-section h6,
.why-choose-us-section p,
.why-choose-us-section span,
.why-choose-us-section li,
.why-choose-us-section a,
.why-choose-us-section .text,
.ecommerce-growth-section h1,
.ecommerce-growth-section h2,
.ecommerce-growth-section h3,
.ecommerce-growth-section h4,
.ecommerce-growth-section h5,
.ecommerce-growth-section h6,
.ecommerce-growth-section p,
.ecommerce-growth-section span,
.ecommerce-growth-section li,
.ecommerce-growth-section a,
.ecommerce-growth-section .text,
.career-openings-section h1,
.career-openings-section h2,
.career-openings-section h3,
.career-openings-section h4,
.career-openings-section h5,
.career-openings-section h6,
.career-openings-section p,
.career-openings-section span,
.career-openings-section li,
.career-openings-section a,
.career-openings-section .text {
    color: #000000 !important;
}

/* Ensure buttons and special UI elements keep their internal colors */
.theme-btn .btn-title,
.btn-request-demo .btn-title,
.ecommerce-nav-btn,
.sector-grid a span {
    color: inherit !important;
}

/* 2. Global Section Gradient Cycle (Targeting standard inner section class) */

/* (4n + 1): Peach/Mint Pastel Gradient */
.about-section-h1:nth-of-type(4n+1) {
    background: linear-gradient(135deg, #FFF4ED 0%, #F8FAFC 30%, #F9FAFB 60%, #EFF1F5 100%) !important;
}

/* (4n + 2): Midnight Blue (Dark Mode) */
.about-section-h1:nth-of-type(4n+2) {
    background: linear-gradient(135deg, #0D1644 0%, #1a2a3e 50%, #0f1923 100%) !important;
}

/* White text for dark sections */
.about-section-h1:nth-of-type(4n+2) h1,
.about-section-h1:nth-of-type(4n+2) h2,
.about-section-h1:nth-of-type(4n+2) h3,
.about-section-h1:nth-of-type(4n+2) h4,
.about-section-h1:nth-of-type(4n+2) h5,
.about-section-h1:nth-of-type(4n+2) h6,
.about-section-h1:nth-of-type(4n+2) p,
.about-section-h1:nth-of-type(4n+2) span,
.about-section-h1:nth-of-type(4n+2) li,
.about-section-h1:nth-of-type(4n+2) a,
.about-section-h1:nth-of-type(4n+2) .text,
.about-section-h1:nth-of-type(4n+2) .sub-title,
.career-hero-section h1,
.career-hero-section h2,
.career-hero-section h3,
.career-hero-section h4,
.career-hero-section h5,
.career-hero-section h6,
.career-hero-section p,
.career-hero-section span,
.career-hero-section li,
.career-hero-section a,
.career-hero-section .text {
    color: #ffffff !important;
}

/* Decorative glow for dark sections */
.about-section-h1:nth-of-type(4n+2)::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -15%;
    width: 55%;
    height: 180%;
    background: radial-gradient(ellipse at center, rgba(255, 170, 23, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.about-section-h1:nth-of-type(4n+2)::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(242, 139, 0, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* (4n + 3): Mint/Sage/Snow Gradient */
.about-section-h1:nth-of-type(4n+3) {
    background: linear-gradient(135deg, #EFF1F5 0%, #F7F8FA 30%, #F8FAFC 60%, #F9FAFB 100%) !important;
}

/* (4n + 4): Sage/Blue/Snow Gradient */
.about-section-h1:nth-of-type(4n+4) {
    background: linear-gradient(135deg, #F9FAFB 0%, #F8FAFC 35%, #F7F8FA 65%, #EFF1F5 100%) !important;
}

/* 3. Consistency for other special sections */
.feature-section,
.trans-otp-section,
.faq-section,
.why-choose-us-section,
.why-digiplus-section,
.ecommerce-growth-section,
.ivr-features-section,
.click2call-benefits-section,
.blog-section-h1,
.whatsapp-features-section,
.why-choose-inbox-section {
    background: linear-gradient(135deg, #EFF1F5 0%, #F7F8FA 30%, #F8FAFC 60%, #F9FAFB 100%) !important;
}

/* 4. Animation Utilities (Preserved) */
.pg-anim,
.pg-anim-left,
.pg-anim-right {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(.4, 0, .2, 1), transform 0.7s cubic-bezier(.4, 0, .2, 1);
}

.pg-anim {
    transform: translateY(40px);
}

.pg-anim-left {
    transform: translateX(-50px);
}

.pg-anim-right {
    transform: translateX(50px);
}

.pg-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

.pg-float {
    animation: pgFloat 4s ease-in-out infinite;
}

@keyframes pgFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* About Page Specific Overrides (to match approved plan) */
.about-mission-section {
    /* Changed to light gradient to support user request for black text */
    background: linear-gradient(135deg, #F9FAFB 0%, #F8FAFC 35%, #F7F8FA 65%, #EFF1F5 100%) !important;
    position: relative;
    overflow: hidden;
}

.about-mission-section h1,
.about-mission-section h2,
.about-mission-section h3,
.about-mission-section h4,
.about-mission-section h5,
.about-mission-section p,
.about-mission-section span,
.about-mission-section li,
.about-mission-section .about-mission-heading,
.about-mission-section .mission-stat-number,
.about-mission-section .feat-item,
.about-mission-section .mission-subtitle,
.about-mission-section .stat-item {
    color: #000000 !important;
}