.elementor-6 .elementor-element.elementor-element-313c821{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:10;}.elementor-6 .elementor-element.elementor-element-27c5637{--display:flex;}.elementor-6 .elementor-element.elementor-element-c66272a{width:100%;max-width:100%;}.elementor-6 .elementor-element.elementor-element-b0e8839{--display:flex;}.elementor-6 .elementor-element.elementor-element-a534de0{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6 .elementor-element.elementor-element-b126b02{width:100%;max-width:100%;}.elementor-6 .elementor-element.elementor-element-e9ddc74{--display:flex;}.elementor-6 .elementor-element.elementor-element-4373f1e{--display:flex;}.elementor-6 .elementor-element.elementor-element-e22eb97{--display:flex;}.elementor-6 .elementor-element.elementor-element-2d49c66{--display:flex;}.elementor-6 .elementor-element.elementor-element-fe2e2d8{--display:flex;}.elementor-6 .elementor-element.elementor-element-88f0286{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-bd4b085 */.video-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  position: relative;
  z-index: 5;
}

.glass-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 40px 30px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  color: #fff;
}

.gradient-text {
  background: linear-gradient(90deg, #3B82F6, #10B981, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.glass-box h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  font-weight: 400;
  opacity: 0.95;
}

.subtitle strong {
  color: #10B981;
  font-weight: 600;
}

.hero-form .input-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.hero-form input[type="email"] {
  padding: 14px 18px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  max-width: 300px;
  width: 100%;
}

.hero-form button {
  padding: 14px 22px;
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hero-form button:hover {
  background: linear-gradient(135deg, #2563EB, #7C3AED);
}

.trust-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.trust-box .stars {
  color: #FACC15;
  font-size: 1.2rem;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c66272a */.certified-section {
  background-color: #f9fafb;
  padding: 60px 20px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.section-header h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.gradient-text {
  background: linear-gradient(to right, #3B82F6, #10B981, #A855F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-size: 1.1rem;
  color: #444;
  max-width: 750px;
  margin: 0 auto 30px;
}

.logos-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin: 30px auto;
  max-width: 900px;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.partner-logos img {
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.partner-logos img:hover {
  transform: scale(1.05);
  filter: grayscale(0%);
}

/* Responsive */
@media (max-width: 768px) {
  .partner-logos img {
    height: 50px;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }

  .tagline {
    font-size: 1rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-40c06bf */body {
    font-family: 'Inter', sans-serif;
    background-color: #e0f7fa; /* A very light, calming blue page background */
}

/* Background color for the main content box - THIS IS THE CHANGE YOU NEED! */
.main-content-card {
    background-color: #f0f0f0; /* Changed to a very light gray for the main content card */
    /* You can change this to any solid color, e.g., #f9f9f9 or a specific brand color */

    /* Or, if your theme color is a gradient, you can use something like this instead: */
    /* background-image: linear-gradient(to bottom right, #YOUR_START_COLOR, #YOUR_END_COLOR); */
    /* Example gradient: background-image: linear-gradient(to bottom right, #e0f2f7, #c8e6c9); */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* A softer, more pronounced shadow */
    border-radius: 1.5rem; /* Slightly more rounded corners */
}

/* Hidden by default, will be shown by JS */
.content-section {
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease-in-out; /* Slower fade for content */
    background-color: #fcfdff; /* New: Very light blue-white background for content sections */
    padding: 2rem; /* Add some padding to the content section itself */
    border-radius: 1rem; /* Slightly rounded corners for the content section */
}

.content-section.active {
    display: block;
    opacity: 1;
}

/* Base styles for the entire nav-link tab */
.nav-link {
    padding: 0.9rem; /* Increased padding for better spacing */
    border-radius: 1.25rem; /* More rounded tabs */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    text-decoration: none; /* Ensure no default underline */
}

/* Hover state for the entire nav-link tab */
.nav-link:hover {
    background-color: #e6f7ff; /* Very light blue hover background */
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Soft shadow on hover */
}

/* Active state for the entire nav-link tab */
.nav-link.active {
    background-image: linear-gradient(to right, #f97316, #f43f5e); /* Vibrant Orange to Pink Gradient */
    color: #ffffff; /* White text for active */
    transform: translateY(-6px); /* Stronger lift for active */
    box-shadow: 0 15px 30px rgba(249, 115, 22, 0.3); /* Shadow matching gradient start color */
    border-bottom: none; /* Remove previous border */
}

.nav-link .icon-wrapper {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 1rem; /* Larger icon circles */
    background-color: rgba(255, 255, 255, 0.5); /* Slightly transparent white for icon background */
    border-radius: 50%; /* Ensure perfect circle */
}

/* Base icon background colors for non-active states */
/* These are Tailwind's default light colors, adjusted for rgba in HTML */
.icon-wrapper.bg-red-50 { background-color: rgba(254, 242, 242, 0.8); }
.icon-wrapper.bg-blue-50 { background-color: rgba(239, 246, 255, 0.8); }
.icon-wrapper.bg-green-50 { background-color: rgba(236, 253, 245, 0.8); }
.icon-wrapper.bg-yellow-50 { background-color: rgba(255, 251, 235, 0.8); }
.icon-wrapper.bg-purple-50 { background-color: rgba(245, 240, 255, 0.8); }
.icon-wrapper.bg-indigo-50 { background-color: rgba(238, 242, 255, 0.8); }

/* Hover states for icon backgrounds - slightly darker on hover */
.group-hover\:bg-red-100:hover { background-color: rgba(254, 226, 226, 0.9); }
.group-hover\:bg-blue-100:hover { background-color: rgba(191, 219, 254, 0.9); }
.group-hover\:bg-green-100:hover { background-color: rgba(209, 250, 229, 0.9); }
.group-hover\:bg-yellow-100:hover { background-color: rgba(253, 242, 219, 0.9); }
.group-hover\:bg-purple-100:hover { background-color: rgba(237, 212, 255, 0.9); }
.group-hover\:bg-indigo-100:hover { background-color: rgba(199, 210, 254, 0.9); }


/* Ensure icon background is transparent on active */
.nav-link.active .icon-wrapper {
    background-color: transparent !important;
}

/* Base icon colors (non-active) - made vibrant for distinction */
.nav-link:nth-child(1) .icon-wrapper svg { color: #dc2626; } /* Red */
.nav-link:nth-child(2) .icon-wrapper svg { color: #2563eb; } /* Blue */
.nav-link:nth-child(3) .icon-wrapper svg { color: #16a34a; } /* Green */
.nav-link:nth-child(4) .icon-wrapper svg { color: #d97706; } /* Yellow-Orange */
.nav-link:nth-child(5) .icon-wrapper svg { color: #9333ea; } /* Purple */
.nav-link:nth-child(6) .icon-wrapper svg { color: #4f46e5; } /* Indigo */

/* Active icon color - white on active gradient */
.nav-link.active .icon-wrapper svg {
    color: #ffffff !important;
}

.nav-link .text-sm, .nav-link .text-base { /* Target both sizes */
    transition: color 0.3s ease-in-out;
    color: #4a5568; /* Slightly darker gray for default text */
    font-weight: 500; /* Medium font weight */
}

/* Active text color and border */
.nav-link.active .text-sm, .nav-link.active .text-base { /* Target both sizes */
    color: #ffffff; /* White text on gradient */
    border-bottom: 2px solid #ffffff; /* White border on gradient */
    padding-bottom: 0.2rem; /* Slightly less padding for border */
}

/* Heading Colors */
h1 {
    color: #2d3748; /* Darker charcoal */
    font-weight: 800; /* Extra bold for main title */
}

h2 {
    color: #4a5568; /* Slightly lighter than h1 for sub-headings */
    font-weight: 600; /* Semi-bold */
}

h3 {
    color: #2d3748; /* Matches h1 for consistency with primary section title */
    font-weight: 800; /* Extra bold */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b126b02 *//* --- Keyframes for animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- General Styles --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f4f8;
    color: #333;
    margin: 0;
    padding: 40px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Section Header Styles --- */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 1.1rem;
    color: #4a5568;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Services Grid Styles --- */
.services-playful {
    padding: 80px 0;
}

.services-grid-playful {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 0;
    list-style-type: none;
}

.service-card-playful {
    background: linear-gradient(145deg, #A1C6FA, #C7B5E8);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #2c3e50;
}

.service-card-playful::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background-color: #407FF6;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s ease;
    z-index: -1;
}

.service-card-playful:hover::before {
    transform: scale(1.5);
}

.icon-playful {
    font-size: 3rem;
    color: #407FF6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.service-card-playful:hover .icon-playful {
    color: #fff;
}

.service-title-playful {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.service-card-playful:hover .service-title-playful {
    color: #fff;
}

.service-description-playful {
    font-size: 1rem;
    color: #5a677d;
    transition: color 0.3s ease;
}

.service-card-playful:hover .service-description-playful {
    color: #f7fafc;
}

/* --- WHY CHOOSE US SECTION (WITH ANIMATIONS AND IMAGE) --- */
.serp-about-section {
    padding: 80px 0;
    background-color: #f0f4f8;
}

.serp-about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

.serp-about-text {
    flex: 1 1 450px;
    padding: 20px;
    animation: slideInLeft 0.8s ease-out backwards;
}

.serp-about-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.serp-about-text .gradient-text {
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.serp-about-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #5a677d;
    margin-bottom: 30px;
}

.serp-usp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.serp-usp-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    animation: slideInRight 0.8s ease-out backwards;
}

.serp-usp-list .usp-icon {
    font-size: 1.2rem;
    color: #407FF6;
    flex-shrink: 0;
    padding-top: 5px;
}

.serp-usp-list .usp-details strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.serp-usp-list .usp-details p {
    font-size: 1rem;
    font-weight: 400;
    color: #5a677d;
    line-height: 1.5;
    margin: 0;
}

.serp-about-image-box {
    flex: 1 1 450px;
    min-height: 450px;
    border-radius: 15px;
    /* Use a new image link and gradient overlay */
    background: 
        linear-gradient(to bottom, rgba(64, 127, 246, 0.75), rgba(115, 74, 178, 0.75)),
        url('https://images.unsplash.com/photo-1549605658-0026e6d17734?q=80&w=2670&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    animation: slideInRight 0.8s ease-out backwards;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .serp-about-content {
        flex-direction: column;
    }
    .serp-about-image-box {
        min-height: 300px;
        animation: fadeIn 0.8s ease-out backwards;
    }
    .serp-about-text {
        animation: fadeIn 0.8s ease-out backwards;
    }
    .serp-usp-list li {
        animation: fadeIn 0.8s ease-out backwards;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5e224a0 *//*
 * SEO Process Section Styles and Animations
 * This CSS creates a clean, animated timeline layout for the provided HTML.
 * It uses a "fadeInUp" animation to make elements appear as the user scrolls.
 */

/*
 * Keyframes for the fadeInUp animation.
 * This makes elements fade in and slide up from a slightly lower position.
 */
@keyframes fadeInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Keyframes for the subtle pulsing effect on the markers */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(64, 127, 246, 0.4);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(64, 127, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(64, 127, 246, 0);
    }
}

/* Keyframes for the hover effect on the content box */
@keyframes glow {
    from { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }
    to { box-shadow: 0 10px 25px rgba(64, 127, 246, 0.2), 0 0 10px rgba(115, 74, 178, 0.1); }
}

/* Base section styling */
.seo-process-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #b8ceec, #d8c8f4);
}

.seo-process-section .section-header {
    margin-bottom: 60px;
    text-align: center;
}

.seo-process-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.seo-process-section .section-subtitle {
    font-size: 1.1rem;
    color: #5a677d;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.seo-process-section .gradient-text {
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Timeline Layout */
.process-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 50px;
    border-left: 2px solid #abcae8;
}

/* Styling for each individual process step */
.process-step {
    position: relative;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.7s ease-out forwards;
    transition: transform 0.3s ease;
}

/* Staggered animation for each step using a delay */
.process-step:nth-child(1) { animation-delay: 0.6s; }
.process-step:nth-child(2) { animation-delay: 0.8s; }
.process-step:nth-child(3) { animation-delay: 1.0s; }
.process-step:nth-child(4) { animation-delay: 1.2s; }
.process-step:nth-child(5) { animation-delay: 1.4s; }

/* Motion and hover effects on the steps */
.process-step:hover {
    transform: translateY(-5px);
}

.step-marker {
    width: 40px;
    height: 40px;
    background: linear-gradient(to bottom, #407FF6, #734AB2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    flex-shrink: 0;
    position: absolute;
    left: -70px;
    top: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: pulse 2s infinite ease-in-out;
}

.step-content {

    background: linear-gradient(135deg, #A1C6FA, #C7B5E8);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    transition: box-shadow 0.3s ease;
}

/* Hover effect on content box */
.process-step:hover .step-content {
    animation: glow 0.3s forwards;
}

.step-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 10px;
}

.step-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #5a677d;
    margin: 0;
}

/* Bonus Box */
.bonus-box {
    background: linear-gradient(135deg, #A1C6FA, #C7B5E8);
    color: #000000;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin-top: 60px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 1.6s forwards;
}

.bonus-box i {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.bonus-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .process-timeline {
        padding-left: 0;
        border-left: none;
    }
    .process-step {
        flex-direction: column;
        text-align: center;
        animation: fadeInUp 0.7s ease-out forwards;
    }
    .step-marker {
        position: static;
        margin: 0 auto 20px;
    }
    .process-step:nth-child(1),
    .process-step:nth-child(2),
    .process-step:nth-child(3),
    .process-step:nth-child(4),
    .process-step:nth-child(5) {
        animation-delay: 0.1s;
    }
    .bonus-box {
        animation-delay: 0.7s;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-be0d5a5 *//*
 * --- General Styles and Animations ---
 */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 40px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

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

/* Pulsing animation for the icon background */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(64, 127, 246, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(64, 127, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(64, 127, 246, 0); }
}

/* --- Industries Section --- */
.industries-section {
    padding: 80px 0;
    /* Updated background to white */
    background-color: #ffffff;
}

.industries-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.industries-section .section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.industries-section .section-header .gradient-text {
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Industries Grid Layout */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.industry-card {
    background: linear-gradient(145deg, #A1C6FA, #C7B5E8);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0;
    animation: fadeInUp 0.7s ease-out forwards;
}

.industry-card:nth-child(1) { animation-delay: 0.2s; }
.industry-card:nth-child(2) { animation-delay: 0.3s; }
.industry-card:nth-child(3) { animation-delay: 0.4s; }
.industry-card:nth-child(4) { animation-delay: 0.5s; }
.industry-card:nth-child(5) { animation-delay: 0.6s; }
.industry-card:nth-child(6) { animation-delay: 0.7s; }
.industry-card:nth-child(7) { animation-delay: 0.8s; }
.industry-card:nth-child(8) { animation-delay: 0.9s; }
/* ... you can continue this pattern for more items */

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(64, 127, 246, 0.2);
    background: linear-gradient(145deg, #407FF6, #734AB2);
    color: #ffffff;
}

.industry-card .icon-container {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    animation: pulse-ring 2s infinite ease-in-out;
}

.industry-card:hover .icon-container {
    transform: scale(1.1);
}

.industry-card .icon-container .icon {
    font-size: 2rem;
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.industry-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

/* Ensure the text color is readable on hover */
.industry-card:hover h3 {
    color: #ffffff;
}

@media (max-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-71e35b5 *//*
 * --- General Styles (essential for standalone display) ---
 */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f4f8; /* Light background for contrast */
    color: #333;
    margin: 0;
    padding: 40px 20px;
    overflow-x: hidden; /* Prevent horizontal scrollbar from animation */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Logo Slider Section --- */
.logo-slider-section {
    padding: 60px 0;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    overflow: hidden; /* Hide overflowing parts of the slider */
    position: relative;
}

.logo-slider-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 40px;
    text-align: center;
}

/* Gradient text effect for titles */
.logo-slider-section .gradient-text {
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Slider Core Styles */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Essential for infinite scroll */
}

.slider-track {
    display: flex;
    /* This calculation ensures the track is long enough for seamless looping */
    width: calc((180px + 20px) * 12 + 300px) * 2;
    animation: scroll-wave 45s linear infinite; /* Animates the track's position */
    padding: 20px 0; /* Vertical padding for logos */
}

.logo-slide {
    flex-shrink: 0; /* Prevent logos from shrinking */
    width: 180px; /* Fixed width for each logo container */
    height: 80px; /* Fixed height for each logo container */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px; /* Space between logos */
    position: relative;
}

.logo-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 1;
    /* Added a subtle transition for the box-shadow */
    transition: transform 0.3s ease, box-shadow 0.4s ease;
    border-radius: 8px; /* Slightly rounded corners for the images */
    background-color: transparent;
    box-shadow: none; /* Removed default shadow */
    filter: none; /* Removed the grayscale filter to keep colors */
}

.logo-slide img:hover {
    transform: translateY(-5px) scale(1.05); /* Lift and slightly enlarge on hover */
    /* UPDATED: Multiple shadows to simulate a gradient-like glow */
    box-shadow: 0 10px 20px -5px rgba(64, 127, 246, 0.4),
                0 15px 25px -10px rgba(115, 74, 178, 0.3);
}

/* Spacer for the gap between the two logo sets */
.spacer-gap {
    flex-shrink: 0;
    width: 300px; /* This creates the visible gap in the animation */
    height: 80px; /* Match logo height */
    margin: 0 10px;
    background-color: transparent; /* Ensure it's invisible */
}

/* Keyframes for infinite scroll with a subtle wave effect */
@keyframes scroll-wave {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-25%) translateY(-10px); }
    50% { transform: translateX(-50%) translateY(0); } /* Loop point */
    75% { transform: translateX(-75%) translateY(10px); }
    100% { transform: translateX(-100%) translateY(0); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .logo-slider-section h2 {
        font-size: 2rem;
    }
    .logo-slide {
        width: 150px; /* Smaller width on mobile */
        height: 70px;
        margin: 0 15px;
    }
    .spacer-gap {
        width: 200px; /* Adjust gap width for smaller screens */
    }
    .slider-track {
        animation-duration: 30s; /* Faster scroll on smaller screens */
        width: calc((150px + 30px) * 12 + 200px) * 2;
    }
}

@media (max-width: 480px) {
    .logo-slide {
        width: 120px;
        height: 60px;
        margin: 0 10px;
    }
    .spacer-gap {
        width: 150px; /* Further adjust gap width for very small screens */
    }
    .slider-track {
        animation-duration: 25s; /* Even faster scroll */
        width: calc((120px + 20px) * 12 + 150px) * 2;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-009f5ab *//* New animation for individual column entrance */
@keyframes slideInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Impact Marketing Section - Dynamic Overlay Cards Design --- */
.impact-marketing-section {
    padding: 80px 0;
    background-color: #f7faff; /* A very light, subtle background */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay (optional, can be removed if not desired) */
.impact-marketing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23f0f4f8" fill-opacity="0.5" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zm1 5v1H5zM0 0h1L6 6V5zm0 5h1v1H0z"/%3E%3C/g%3E%3C/svg%3E');
    opacity: 0.5;
    z-index: 0;
}


.impact-marketing-section .section-header {
    margin-bottom: 50px;
    position: relative; /* Bring header above any overlays */
    z-index: 1;
}

.impact-marketing-section .section-header h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.impact-marketing-section .section-header .gradient-text-impact {
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.impact-marketing-section .section-header p {
    font-size: 1.1rem;
    color: #5a677d;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.marketing-comparison-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between individual cards */
    max-width: 1100px; /* Optimized width for three cards with gaps */
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.marketing-column {
    flex: 1 1 300px; /* Allows columns to be flexible but ensures minimum width */
    color: #ffffff; /* Default text color for columns changed to white */
    background-color: #f8f9fc; /* This will be overridden by specific column styles below */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft shadow */
    display: flex;
    flex-direction: column;
    animation: slideInUp 0.8s ease-out forwards;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out; /* Smooth hover transition */
    overflow: hidden; /* Crucial for the sliding overlay */
    position: relative; /* For overlay positioning */
    border: 1px solid #e0e7ee; /* Subtle border for definition */
}

.marketing-column:hover {
    transform: translateY(-10px); /* Subtle lift on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Gradient Overlay that slides up on hover */
.marketing-column::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Initially covers the whole card */
    background: linear-gradient(to top, #407FF6, #734AB2); /* Your theme gradient */
    transform: translateY(100%); /* Start completely below the card */
    transition: transform 0.4s ease-out; /* Smooth slide-up transition */
    z-index: 0; /* Behind content */
    border-radius: 15px; /* Match card border-radius */
}

.marketing-column:hover::before {
    transform: translateY(0); /* Slide up to cover the card */
}

/* Specific delays for columns */
.seo-column {
    background-color: #2c3e50; /* Distinct background color for SEO column */
    animation-delay: 0.6s;
}

.ppc-column {
    background-color: #407FF6; /* Distinct background color for PPC column */
    animation-delay: 0.8s;
}

.smm-column {
    background-color: #734AB2; /* Distinct background color for SMM column */
    animation-delay: 1.0s;
}

/* Content within the card, ensuring it's above the overlay and changes color */
.column-header, .column-features {
    position: relative; /* Bring content above the ::before pseudo-element */
    z-index: 1;
    transition: color 0.4s ease-out; /* Smooth color change */
}

/* Text color for specific columns on normal state */
.seo-column .column-header,
.seo-column .column-features,
.ppc-column .column-header,
.ppc-column .column-features,
.smm-column .column-header,
.smm-column .column-features {
    color: #ffffff; /* Ensure text is white on colored backgrounds */
}

.marketing-column:hover .column-header,
.marketing-column:hover .column-features {
    color: #ffffff; /* Change text to white on hover (already white, but ensures consistency) */
}

.column-header {
    padding: 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Light border initially */
    text-align: center;
    transition: border-color 0.4s ease-out; /* Smooth border transition */
}
.marketing-column:hover .column-header {
    border-color: rgba(255, 255, 255, 0.2); /* White border on hover */
}

.column-header h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: inherit; /* Inherit color from parent */
    /* Remove gradient on text here, let it be solid and change on hover */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.column-header p {
    font-size: 1rem;
    color: inherit; /* Inherit color from parent */
    margin: 0;
    transition: color 0.4s ease-out;
}
.marketing-column:hover .column-header p {
    color: rgba(255, 255, 255, 0.85); /* Lighter white on hover */
}

.column-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.column-features li {
    padding: 18px 20px;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Light border initially */
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.4s ease-out;
    color: inherit; /* Inherit color from parent */
}

.marketing-column:hover .column-features li {
    background-color: rgba(255, 255, 255, 0.08); /* Subtle lightening on hover for contrast on dark backgrounds */
    border-color: rgba(255, 255, 255, 0.08); /* White border on hover */
}

.column-features li:last-child {
    border-bottom: none;
}

/* New Button Styling */
.column-footer {
    padding: 25px 20px 30px; /* Padding for the footer, more at bottom */
    text-align: center;
    position: relative;
    z-index: 1; /* Ensure footer is above overlay */
}

.marketing-button {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(to right, #407FF6, #734AB2); /* Your theme gradient */
    color: #ffffff; /* White text color */
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px; /* Fully rounded pills shape */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Added background to transition */
    border: none; /* No border needed with strong gradient */
}

.marketing-button:hover {
    transform: translateY(-3px); /* Lift button on hover */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    background: linear-gradient(to right, #734AB2, #407FF6); /* Reverse gradient on hover */
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    .marketing-comparison-table {
        gap: 20px;
    }
    .marketing-column {
        flex: 1 1 calc(50% - 20px); /* Two columns on smaller tablets */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }
    .marketing-column:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    }
}

@media (max-width: 768px) {
    .marketing-comparison-table {
        flex-direction: column; /* Stack columns vertically */
        gap: 25px;
        box-shadow: none; /* Remove table shadow, columns have their own */
    }
    .marketing-column {
        flex: 1 1 100%; /* Each column takes full width */
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }
    .marketing-column:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
    .column-header {
        padding: 25px 15px;
    }
    .column-header h3 {
        font-size: 1.6rem;
    }
    .column-features li {
        padding: 15px 15px;
        font-size: 0.95rem;
    }
    .impact-marketing-section .section-header h2 {
        font-size: 2.2rem;
    }
    .impact-marketing-section .section-header p {
        font-size: 1rem;
    }
    .marketing-button {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-54a9b0d *//*
 * --- General Styles and Animations ---
 */
/* These body and container styles are general. If your site already has these,
   you might want to remove or adjust them in your main stylesheet to avoid conflicts. */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f4f8;
    color: #333;
    margin: 0;
    padding: 40px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

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

/* --- Call-to-Action Section - NEW PRECISE ALIGNMENT DESIGN --- */
.cta-section-v4 {
    padding: 80px 20px;
    background: linear-gradient(135deg, #407FF6, #734AB2); /* Vibrant gradient background */
    color: #ffffff;
    border-radius: 20px;
    margin: 40px auto;
    max-width: 1100px; /* Adjusted max-width for overall section */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    animation: fadeInUp 1s ease-out forwards;
    overflow: hidden;
    position: relative;
}

/* Subtle pattern overlay */
.cta-section-v4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ffffff" fill-opacity="0.05" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zm1 5v1H5zM0 0h1L6 6V5zm0 5h1v1H0z"/%3E%3C/g%3E%3C/svg%3E');
    opacity: 0.8;
    z-index: 0;
}

.cta-main-content-v4 {
    position: relative; /* Bring content above overlay */
    z-index: 1;
    display: flex; /* Use Flexbox for robust layout */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center; /* Vertically align items in the flex container */
    justify-content: space-between; /* Space out columns */
    gap: 60px; /* Generous gap between columns */
    padding: 20px 0; /* Internal padding for wrapper */
}

.cta-text-content-v4 {
    flex: 1.5; /* Text content takes more space */
    min-width: 300px; /* Minimum width before wrapping */
    text-align: left; /* Text content always left-aligned */
}

.cta-section-v4 h2 {
    /* Responsive font size using clamp for better control, allowing wrap */
    font-size: clamp(2.2rem, 4vw, 2.7rem);
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    line-height: 1.2; /* Tighter line height for better multi-line appearance */
    /* REMOVED: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */
    display: flex; /* Use flex to align emoji and text within the H2 */
    align-items: center;
    justify-content: flex-start; /* Align H2 content to the left */
    gap: 15px; /* Space between emoji and text */
}

.cta-emoji-v4 {
    font-size: clamp(2.8rem, 4.5vw, 3.2rem); /* Responsive emoji size */
    flex-shrink: 0; /* Prevent emoji from shrinking */
}

.gradient-text-v4 {
    background: linear-gradient(to right, #ffffff, #a1c6fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-section-v4 p {
    font-size: 1.15rem; /* Slightly larger paragraph text */
    max-width: 100%; /* Ensure paragraph fits its column */
    margin: 0;
    line-height: 1.6;
    text-align: left; /* Explicitly left align paragraph text */
}

.cta-form-column-v4 {
    flex: 1; /* Form column takes remaining space */
    min-width: 300px; /* Minimum width for form column */
    display: flex; /* Use flex to control alignment of the form card */
    justify-content: flex-end; /* Push form card to the right within its column */
    align-items: center; /* Vertically center the form card if there's extra space */
}

/* Form Container Styling */
.cta-form-container-v4 {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 30px;
    max-width: 450px; /* Max width for the form card */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: left; /* Align form elements to the left within this container */
    width: 100%; /* Ensure it takes full width within its max-width */
}

.cta-form-container-v4 h3 {
    font-size: 1.7rem; /* Title inside form card */
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
    text-align: center; /* Center form title */
}

.cta-form-v4 .form-group-v4 {
    margin-bottom: 20px;
}

.cta-form-v4 input[type="text"],
.cta-form-v4 input[type="email"],
.cta-form-v4 input[type="tel"] {
    width: 100%;
    box-sizing: border-box; /* Crucial for consistent sizing */
    padding: 14px 15px;
    border: 1px solid #e0e7ee;
    border-radius: 10px;
    font-size: 1rem;
    color: #333;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Explicitly left align input text */
}

.cta-form-v4 input::placeholder {
    color: #999;
}

.cta-form-v4 input:focus {
    border-color: #407FF6;
    box-shadow: 0 0 0 4px rgba(64, 127, 246, 0.2);
}

.cta-submit-button-v4 {
    display: flex;
    align-items: center;
    justify-content: center; /* Center text and icon */
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(to right, #407FF6, #734AB2);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease;
    background-size: 200% auto;
}

.cta-submit-button-v4:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    background-position: right center;
}

.cta-button-icon-v4 {
    margin-left: 10px;
    font-size: 1.4rem;
}

#ctaFormMessageV4 {
    margin-top: 25px;
    font-size: 1rem;
    color: #4a5568;
    text-align: center; /* Center align the message */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .cta-main-content-v4 {
        flex-direction: column; /* Stack columns on smaller screens */
        gap: 40px;
        text-align: center; /* Center content when stacked */
    }
    .cta-text-content-v4 {
        text-align: center; /* Center text content when stacked */
    }
    .cta-section-v4 h2 {
        font-size: 2.4rem; /* Adjust font size for stacked layout */
        white-space: normal; /* ALLOW headline to wrap on smaller screens */
        overflow: visible; /* Ensure content is visible */
        text-overflow: clip; /* No ellipsis if content wraps */
        justify-content: center; /* Center emoji and text when stacked */
    }
    .cta-emoji-v4 {
        display: block; /* Stack emoji above text on smaller screens */
        margin: 0 auto 10px;
    }
    .cta-form-column-v4 {
        justify-content: center; /* Center the form card when stacked */
    }
}

@media (max-width: 768px) {
    .cta-section-v4 {
        padding: 60px 15px;
        border-radius: 15px;
    }
    .cta-section-v4 h2 {
        font-size: 2rem;
    }
    .cta-emoji-v4 {
        font-size: 2.8rem;
    }
    .cta-section-v4 p {
        font-size: 1rem;
    }
    .cta-form-container-v4 {
        padding: 25px;
    }
    .cta-form-container-v4 h3 {
        font-size: 1.5rem;
    }
    .cta-form-v4 input[type="text"],
    .cta-form-v4 input[type="email"],
    .cta-form-v4 input[type="tel"] {
        padding: 12px 10px;
    }
    .cta-submit-button-v4 {
        padding: 14px 20px;
        font-size: 1.1rem;
    }
    .cta-button-icon-v4 {
        font-size: 1.2rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e10df76 *//*
 * --- General Styles and Animations ---
 */
/* These body and container styles are general. If your site already has these,
   you might want to remove or adjust them in your main stylesheet to avoid conflicts. */
/* REMOVED: body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f4f8;
    color: #333;
    margin: 0;
    padding: 40px 20px;
} */

/* REMOVED: .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
} */

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

/* --- FAQ Section Styling --- */
/* All class names within this section are now prefixed with 'faq-reveal-'
   to prevent conflicts with existing site styles. */
.faq-reveal-section {
    padding: 80px 0;
    background-color: #ffffff; /* Clean white background */
}

.faq-reveal-section .faq-reveal-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-reveal-section .faq-reveal-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.faq-reveal-section .faq-reveal-header .gradient-text {
    background: linear-gradient(to right, #407FF6, #734AB2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* FAQ List Styling */
.faq-reveal-list {
    display: flex;
    flex-direction: column;
    gap: 1px; /* Very small gap for a seamless look */
    border-radius: 12px;
    overflow: hidden; /* Ensures rounded corners apply to the whole block */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Overall shadow for the FAQ block */
    border: 1px solid #e0e7ee; /* Subtle outer border */
}

.faq-reveal-item {
    background-color: #fff;
    opacity: 0;
    animation: fadeInUp 0.7s ease-out forwards;
    position: relative;
}

/* Staggered animation for each FAQ item */
.faq-reveal-item:nth-child(1) { animation-delay: 0.6s; }
.faq-reveal-item:nth-child(2) { animation-delay: 0.7s; }
.faq-reveal-item:nth-child(3) { animation-delay: 0.8s; }
.faq-reveal-item:nth-child(4) { animation-delay: 0.9s; }
.faq-reveal-item:nth-child(5) { animation-delay: 1.0s; }
.faq-reveal-item:nth-child(6) { animation-delay: 1.1s; }
.faq-reveal-item:nth-child(7) { animation-delay: 1.2s; }

.faq-reveal-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-bottom: 1px solid #eee; /* Separator line */
}

.faq-reveal-item:last-child .faq-reveal-question {
    border-bottom: none; /* No border for the last question */
}

.faq-reveal-question:hover {
    background-color: #f8faff;
    color: #407FF6;
}

.faq-reveal-item.active .faq-reveal-question {
    background-color: #f5f8fc; /* Active question background */
    color: #407FF6; /* Active question text color */
    border-bottom: 1px solid #e0e7ee; /* Keep border when active */
}

.faq-reveal-question i {
    font-size: 1.1rem;
    color: #5a677d;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-reveal-item.active .faq-reveal-question i {
    transform: rotate(180deg);
    color: #734AB2;
}

.faq-reveal-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 25px; /* Initial padding is 0 */
    color: #5a677d;
    font-size: 1rem;
    line-height: 1.7;
}

.faq-reveal-item.active .faq-reveal-answer {
    max-height: 300px; /* Adjust as needed for content length */
    padding: 15px 25px 25px; /* Padding when active */
}

/* Gradient line below active question */
.faq-reveal-item.active .faq-reveal-question::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(to right, #407FF6, #734AB2);
    margin-top: 15px; /* Space between question and line */
    border-radius: 50px;
    width: 50%; /* Shorter line for a subtle accent */
    margin-left: auto;
    margin-right: auto;
    transform: scaleX(0);
    animation: scaleXIn 0.5s ease-out forwards;
}

@keyframes scaleXIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .faq-reveal-section .faq-reveal-header h2 {
        font-size: 2rem;
    }
    .faq-reveal-question {
        font-size: 1rem;
        padding: 18px 20px;
    }
    .faq-reveal-answer {
        padding: 15px 20px 20px;
    }
    .faq-reveal-list {
        border-radius: 10px;
    }
}/* End custom CSS */