/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.18.1766313077
Updated: 2025-12-21 10:31:17

*/
/* =========================
   ROOT VARIABLES (MERGED)
========================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  --primary-purple: #dc2626;
  --soft-purple: #f3f0ff;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  --footer-bg: #0f1116;
  --icon-bg: #1f2937;
  --text-white: #ffffff;
  --text-grey: #9ca3af;
}

/* =========================
   BASE
========================= */
body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text-dark);
  margin: 0;
	  font-size: 18px;
  line-height: 1.3;
}

h1, h2, h3, h4, h5, .navbar-brand {

  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: -0.5px; font-weight:700;
}

p{
  font-family: 'IBM Plex Sans', sans-serif;

}

ul li 
{
  font-family: 'IBM Plex Sans', sans-serif;
}
.blog-c p:first-child {
  color: #000;
  font-weight: 600;
}
/* =========================
   UTILITIES
========================= */
.bg-soft-purple { background-color: #f9f6ff; }
.text-muted { color: var(--text-muted) !important; }
input[type="submit"].btn-purple-round, input[type="submit"].btn-purple{    background: var(--primary-purple) !important;
    color: #fff;
    border-radius: 50px;
    padding: 10px 30px;}
a .feature-card p{color:var(--text-dark);}
/* =========================
   NAVBAR
========================= */
.navbar {
  background: rgba(0,0,0,0.2);
  padding: 10px 0;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

.navbar-brand {
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
}

/*.navbar .custom-logo-link img {
	width: 60px;
  filter: brightness(100);
}*/
.navbar .custom-logo-link img {
	width: 140px;
}

.navbar
.navbar-brand {
	display:none;
} 

.navbar #navpages li a {
	    color: #fff;
    padding: 8px 20px;
	text-decoration:none;
}

.navbar-toggler{
	background: #000;
    box-shadow: none;
}

.navbar-toggler:hover{
	background: #000;
    box-shadow: none;
}

.brand-icon { height: 32px; }

.nav-link {
  color: #fff !important;
  font-size: 0.95rem;
  padding: 8px 18px !important;
  border-radius: 50px;
}

/* CTA button */
.btn-consultation 
{
  background: #fff;
  color: var(--primary-purple);
  border-radius: 50px;
  padding: 5px 5px 5px 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.btn-icon-circle {
  width: 32px;
  height: 32px;
  background: var(--primary-purple);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   BUTTONS (DEDUPED)
========================= */
.btn-pill {
  border-radius: 50px;
  padding: 12px 35px;
  font-weight: 600;
}

.btn-white {
  background: #fff ;
  color: var(--primary-purple);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid #fff ;
}

.btn-outline-purple {
  background: transparent;
  color: var(--primary-purple) ;
  border: 2px solid var(--primary-purple) ;
}
.btn.btn-outline-purple{border: 2px solid var(--primary-purple) ;}
.btn.btn-outline-white {
  border: 2px solid #fff ;}
.btn-purple {
  background: var(--primary-purple);
  color: #fff;
  border-radius: 50px;
  padding: 10px 30px;
  border: none;
}
.btn{border: 2px solid transparent; font-weigt:600;}
.btn:hover{background:#fff; border: 2px solid var(--primary-purple) ; color: var(--primary-purple) ;}
.icon-box {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 1.2rem;
}
/* =========================
   HERO / TRANSFORMATION
========================= */
.cta-s{position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: url('https://librra.sunilsheokand.com/wp-content/themes/astra-child/images/bt.jpg') no-repeat center center; background-size: cover; mask-image: linear-gradient(to right, transparent, black);}
.cta-bg{background: linear-gradient(to right, #000, #999);}
.transformation-section {
  background: radial-gradient(circle at center top, #000000, #3b3b3b);
  min-height: 100vh;
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
      padding: 80px 0 0 0;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.hero-image-container {
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.tablet-image {
  max-width: 70%;
  border-radius: 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
}

/* SVG background */
.background-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.svg-line {
  fill: none;
  stroke: rgba(255,255,255,0.15);
  stroke-width: 0.5;
}

/* SVG animation */
.anim-group-1 { animation: sway 8s ease-in-out infinite alternate; }
.anim-group-2 { animation: sway 8s ease-in-out infinite alternate-reverse; }

@keyframes sway {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-20px) scale(1.05); }
}

/* =========================
   FEATURE CARDS
========================= */
.feature-card {
  background: #fff;
  border-radius: 15px;
  padding: 2rem;
  height: 100%;
  border: 1px solid #eee;
  transition: transform .3s;
}

.feature-card:hover { transform: translateY(-5px); }

.icon-box img { width: 60px; }

#services a, 
.inner-services a{
  text-decoration: none !important ;

}

#services h5,
.inner-services h5{
  color: #000;
}

/* =========================
   SUCCESS STORIES
========================= */
.gradient-bg {
  background: radial-gradient(circle at center top, #1f2937, #030712);
}

.success-card{
 
  background: rgba(0,0,0,0.8);
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  backdrop-filter: blur(5px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 30px 70px rgba(0,0,0,0.45);
  transition: transform .35s ease, box-shadow .35s ease;
}

.success-card:hover { transform: translateY(-5px); }
.card-subtitle {
    color: var(--primary-purple);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    display: block;
}
.card-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.metric-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .85rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}

/* =========================
   INSIGHTS
========================= */
.insight-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .3s;
  height: 100%;
}

.insight-card:hover { transform: translateY(-5px); }

.card-img-wrapper {
  height: 240px;
  overflow: hidden;
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   PODCAST
========================= */
.podcast-card {
  background: #fff;
  border: 1px solid var(--primary-purple);
  border-radius: 12px;
  padding: 15px;
  min-height: 290px;
  transition: transform .2s;
}

.podcast-card:hover { transform: translateY(-2px); }

.play-icon-circle {
  width: 35px;
  height: 35px;
  background: var(--primary-purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-triangle {
  width: 15px;
  height: 15px;
  stroke: #fff;
  stroke-width: 2;
  fill:none;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .hero-title { font-size: 2.5rem; }
  .tablet-image { max-width: 95%; }
}
/* =========================
   HERO SECTION – FIX PATCH
========================= */

/* Parent */
/*.transformation-section{
  background:
    radial-gradient(
      1200px 600px at 50% -200px,
      #5b4bf6 0%,
      #3a2fb3 55%,
      #190f76 100%
    );
  padding-bottom: 70px;
}*/

/* Badge */
.transformation-section .card-badge{
  background: rgba(255,255,255,0.14);
  padding: 6px 16px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}

/* Heading */
.transformation-section .hero-title{
  font-size: 3.8rem;
  line-height: 1.18;
  margin-top: 22px;
  margin-bottom: 34px;
}

/* Buttons */
.transformation-section .hero-buttons .btn{
  min-width: 220px;
  padding: 14px 36px;
  font-weight: 600;
}

/* Image */
.transformation-section .tablet-image{
  border-radius: 22px;
  box-shadow:
    0 40px 90px rgba(0,0,0,0.45),
    0 10px 25px rgba(0,0,0,0.25);
}
/* 1. Main Background Container */
        .animated-bg-container {
            position: relative;
            width: 100%;
            min-height: 100vh;
            overflow: hidden;
            z-index: 1;
        }
		.transformation-section{padding-bottom:50px;}
		.background-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        /* 3. Lines Styling */
        .svg-line {
            fill: none;
            stroke: rgba(255, 255, 255, 0.15); 
            stroke-width: 0.5;
            vector-effect: non-scaling-stroke;
        }

        /* 4. The Animation (Slight Swaying/Breathing) */
        .anim-group-1 {
            animation: sway 8s ease-in-out infinite alternate;
            transform-origin: center;
        }
        
        .anim-group-2 {
            animation: sway 8s ease-in-out infinite alternate-reverse;
            transform-origin: center;
        }

        @keyframes sway {
            0% {
                transform: translateY(0) scale(1);
            }
            100% {
                transform: translateY(-20px) scale(1.05);
            }
        }
		/* =========================
   SUCCESS STORIES – FIX PATCH
========================= */

 /* Specific Detail Page Styles */
        .case-detail-hero {
            min-height: 50vh;
            background:radial-gradient(circle at center top, #0a0a0a, #000000);
            padding: 140px 0 80px;
            color: #fff;
        }

        .case-detail-hero ol {
          margin: 0;

        }

        .single-podcast-desc ul {
    padding: 0;
    margin: 0;
    padding-left: 18px;
    margin-top: 20px;

        }

        .single-podcast-desc ul li { 
          margin: 8px 0;
        }

        .meta-info-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .section-title {
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--primary-purple);
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        .content-card {
            background: #fff;
            border-radius: 30px;
            padding: 50px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.03);
            margin-bottom: 40px;
        }

        .impact-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary-purple);
            line-height: 1;
        }

        .quote-section {
            background: var(--soft-purple);
            border-radius: 30px;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }

        .quote-icon {
            position: absolute;
            top: -20px;
            right: 20px;
            font-size: 10rem;
            color: var(--primary-purple);
            opacity: 0.05;
        }

        /* Modal Customization */
        .modal-content { border-radius: 30px; border: none; }
        .modal-header { background: var(--primary-purple); color: white; padding: 25px 40px; }

/* Parent section */
.success-stories-section{
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Section heading */
.success-stories-section h2{
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 12px;
}

.success-stories-section p{
  color: rgba(255,255,255,0.75);
  max-width: 620px;
  margin: 0 auto 60px;
}

/* Cards */


.success-card:hover{
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 40px 90px rgba(0,0,0,0.55);
}

/* Badge (SAAS / Manufacturing etc.) */
.success-card .card-badge{
  background: rgba(220, 38, 38, 0.12);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .08em;    margin-bottom: 1.5rem;
}

/* Metric tags */
.success-card .metric-tag{
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .85rem;
}

/* Read link */
.success-card a{
  color: var(--primary-purple);
  font-weight: 600;
  text-decoration: none;
}

.success-card a:hover{
  text-decoration: underline;
}
.success-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
    line-height: 1.4;
        color: #ffffff;
}
.ps{}
.category-badge {
    background-color: #f3f0ff;
    color: var(--primary-purple);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
}
.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
    line-height: 1.4;
}

.card-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s;
}
.card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.read-more-link {
    color: var(--primary-purple);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}
.img-rounded-custom {
    border-radius: 20px;
    object-fit: cover;
    width: 100%;
}

/* Footer Container */
.footer-desc {
    color: var(--text-grey);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 350px;
}
.footer-links a
 {
    color: var(--text-grey);
    text-decoration: none;
    transition: color 0.2s ease;
}
        .footer-section {
            background-color: var(--footer-bg);
            color: var(--text-white);
            padding-top: 80px;
            padding-bottom: 30px;
            font-size: 0.95rem;
        }

        /* Brand Heading */
        .footer-brand {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: white;
            letter-spacing: -0.5px;
        }

        /* Description Text */
        .footer-desc {
            color: var(--text-grey);
            line-height: 1.6;
            margin-bottom: 2rem;
            max-width: 350px; /* Limits width like the image */
        }

        /* Column Headings */
        .footer-heading {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: white;
        }

        /* Links */
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: var(--text-grey);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: white;
        }

        /* Social Icons */
        .social-icons-wrapper {
            display: flex;
            gap: 12px;
        }

        .social-btn {
            width: 40px;
            height: 40px;
            background-color: var(--icon-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-grey);
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1.1rem;
        }

        .social-btn:hover {
            background-color: white;
            color: var(--footer-bg);
            transform: translateY(-2px);
        }

        /* Bottom Bar */
        .footer-bottom {
            margin-top: 60px;
            padding-top: 30px;
            border-top: 1px solid #1f2937; /* Very subtle separator line */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            color: #6b7280; /* Darker grey for bottom text */
            font-size: 0.85rem;
        }

        .bottom-links a {
            color: #6b7280;
            text-decoration: none;
            margin-left: 20px;
            transition: color 0.2s;
        }
        
        .bottom-links a:hover {
            color: white;
        }

        /* Mobile responsiveness adjustments */
        @media (max-width: 768px) {
            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .bottom-links a {
                margin: 0 10px;
            }
        }
  /* REFINED CSS: Only specific overrides for this page */
       
        /* Banner Height Fix (50% of viewport) */
        .se-section {
            height: 50vh;
            min-height: 450px;
            display: flex;
            align-items: center;
            padding: 0; /* Removing extra padding to center content vertically */
        }

        .hero-content {
            margin-top: 60px; /* Offset for absolute navbar */
        }

        /* Services Grid Styling */
        .services-wrapper {
            padding: 100px 0;
            background-color: #f9f6ff;
        }

        /* Using your existing .feature-card and adding icon styling */
        .service-icon {
            width: 64px;
            height: 64px;
            background: var(--soft-purple);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
            color: var(--primary-purple);
            transition: 0.3s;
        }

        .feature-card:hover .service-icon {
            background: var(--primary-purple);
            color: #fff;
        }

        /* Adjusting for mobile */
        @media (max-width: 768px) {
            .transformation-section {
                height: auto;
                padding: 120px 0 60px;
            }
        }
         /* Sirf is page ke liye zaroori naye styles */
        .service-header-banner {
            height: 50vh;
            min-height: 400px;
            background: radial-gradient(circle at center top, #0a0a0a, #000000);
            display: flex;
            align-items: center;
            color: #fff;
            padding-top: 80px; /* Space for absolute navbar */
        }

        .service-main-content { padding: 80px 0; }

        .feature-list { list-style: none; padding: 0; }
        .feature-list li {
            padding: 10px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid #f0f0f0;
        }
        .feature-list i { color: var(--primary-purple); font-size: 1.2rem; }

        .image-placeholder-box {
            background: var(--soft-purple);
            border-radius: 24px;
            padding: 50px;
            text-align: center;
            border: 2px dashed rgba(91, 75, 246, 0.2);
        }

        .sidebar-sticky {
            position: sticky;
            top: 100px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 20px;
            padding: 25px;
        }

        #ast-scroll-top {
    background-color: var(--primary-purple);
    font-size: 16px;
    border-radius: 30px;
    padding-top: 12px;
    border: none;
}

/*=========== INNER PAGE HEADER CSS START ============*/
.inner-header-bg
{
            height: 50vh;
            min-height: 450px;
            background: radial-gradient(circle at center top, #0a0a0a, #000000);
            display: flex;
            align-items: center;
            color: #fff;
            padding-top: 80px;
            text-align: center;
}

/*=========== INNER PAGE HEADER CSS END ============*/

/*=========== SERVICES PAGE START ============*/

        /* Stats Section */
        .stat-card {
            border-left: 4px solid var(--primary-purple);
            padding-left: 20px;
        }

        /* Graphic/Workflow Section */
        .workflow-step {
            position: relative;
            padding: 30px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid #f0f0f0;
            height: 100%;
        }
        .step-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--soft-purple);
            position: absolute;
            top: 10px;
            right: 20px;
            line-height: 1;
        }

        /* Meaningful Vector Container */
        .graphic-container {
            background: var(--soft-purple);
            border-radius: 40px;
            padding: 60px;
            text-align: center;
        }

        /* Testimonial Section */
        .testimonial-box {
            background: white;
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        }

        /* Modal Styles */
        .modal-content { border-radius: 30px; border: none; }
        .modal-header { background: var(--primary-purple); color: white; padding: 25px 40px; }
        .modal-body { padding: 40px; }

/*=========== SERVICES PAGE END ============*/

.bh
{
  border-left: 5px solid var(--primary-purple);
  font-size:25px; padding:20px; font-style:italic; background:#f5f5f5;
}
 

@media only screen and (max-width: 767px) {
 .navbar #navbarNav #navpages{
	align-items: self-start !important;
	         margin-top: 20px;
}
	
	.navbar #navbarNav #navpages li {
		margin:8px 0;
		
	}
	
		.navbar
	{
		background:#000;
		 border-bottom: 2px solid #fff;
	}
	button:focus{background:var(--primary-purple) !important;}
	.btn-consultation {
    background: #fff;
    color: var(--primary-purple);
    border-radius: 50px;
    padding: 5px 5px 5px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: 158px;
    margin: 15px;
		       
}
	
}




/* === RILEGR BUILDER CSS === */

.rilegr-builder-wrapper {
    padding: 40px;
}

.rilegr-toolbar {
    background: #111;
    padding: 15px;
    margin-bottom: 20px;
}

.rilegr-toolbar select,
.rilegr-toolbar button {
    padding: 10px 15px;
    margin-right: 10px;
    border: none;
}

.rilegr-section {
    border: 2px dashed #ccc;
    padding: 20px;
    margin-bottom: 25px;
    background: #fafafa;
}

.rilegr-row {
    display: flex;
    gap: 15px;
}

.rilegr-col {
    flex: 1;
    border: 1px solid #ddd;
    padding: 15px;
    background: #fff;
}

.rilegr-col input,
.rilegr-col textarea {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
}

.rilegr-actions {
    margin-top: 10px;
}

.rilegr-actions button {
    margin-right: 10px;
    padding: 6px 12px;
}
.btn:focus-visible, button:focus {
    color: var(--bs-btn-hover-color);
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}