:root {
    --primary-blue: #010ed0;
    --deep-blue: #000763;
    --accent-light: #e6e8ff;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Hero Section with Moving Gradient */
.hero-premium {
    background: linear-gradient(-45deg, #8c8fbe, #000763, #656796, #00053d);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    padding: 120px 0;
    color: white;
    clip-path: ellipse(150% 100% at 50% 0%);
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Floating Animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

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

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

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: 0.4s all;
}

.service-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    height: 100%;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover {
    transform: scale(1.03);
    border-color: var(--primary-blue);
    box-shadow: 0 20px 40px rgba(1, 14, 208, 0.1);
}

.icon-circle {
    width: 70px;
    height: 70px;
    background: var(--accent-light);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
    margin-bottom: 25px;
}

/* Use Case Grid */
.use-case-box {
    background: #ffffff;
    border-radius: 15px;
    padding: 25px;
    border-bottom: 5px solid transparent;
    transition: 0.3s;
}

.use-case-box:hover {
    border-bottom: 5px solid var(--primary-blue);
    background: var(--accent-light);
}

/* Accordion Customization */
.accordion-button:not(.collapsed) {
    background-color: var(--primary-blue);
    color: white;
}

.section-title h2 {
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title h2::after {
    content: "";
    width: 50%;
    height: 4px;
    background: var(--primary-blue);
    position: absolute;
    bottom: 0;
    left: 25%;
}

/* Light & Clean FAQ Styling */

.faq-nav-column {
    /* Pure white background with a very subtle right border */
    background: #ffffff;
    border-right: 1px solid #f0f0f0;
}

.faq-content-panel {
    /* Very light grey/blue tint to separate from the nav */
    background: #77bafd;
    color: #000763;
    min-height: 450px;
    border-radius: 0 15px 15px 0;
}

.faq-scroll-wrapper {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
}

.faq-scroll-wrapper::-webkit-scrollbar {
    width: 5px;
}

.faq-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    /* Subtle scrollbar */
    border-radius: 10px;
}

.faq-nav-column .nav-link {
    color: #555555;
    /* Soft dark grey for readability */
    text-align: left;
    font-weight: 500;
    padding: 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    transition: all 0.3s ease;
}

.faq-nav-column .nav-link:hover {
    background-color: #fcfcfc;
    color: #2e38c7;
    /* Brand color on hover */
}

.faq-nav-column .nav-link.active {
    background: #ffffff !important;
    color: #2e38c7 !important;
    /* Active text in brand color */
    font-weight: 700;
    border-left: 4px solid #2e38c7;
    /* Indicator line */
    padding-left: 20px;
}

.faq-num {
    color: #a2d2ff;
    /* Soft pastel blue from previous cards */
    font-weight: 700;
    margin-right: 10px;
}

/* Mobile handling */
@media (max-width: 991px) {
    .faq-nav-column {
        background: #ffffff;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .faq-scroll-wrapper {
        max-height: 300px;
    }

    .faq-content-panel {
        border-radius: 0 0 15px 15px;
    }
}

/* Main Section Container */
.faq-animate-bg {
    position: relative;
    background-color: #f8fbff;
    /* Base light blue */
    overflow: hidden;
    z-index: 1;
    padding: 100px 0;
    /* Space for waves to show above and below the card */
    border-radius: 20px;
}

/* Moving Waves (Inspired by image_ef8830.png) */
.faq-animate-bg::before,
.faq-animate-bg::after {
    content: "";
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    z-index: -1;
    pointer-events: none;
}

/* Top Wave - Fast Blue Lines */
.faq-animate-bg::before {
    top: -20%;
    /* Positioned above the card */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='300' viewBox='0 0 800 300'%3E%3Cpath d='M0,100 Q200,0 400,100 T800,100' fill='none' stroke='rgba(0, 123, 255, 0.35)' stroke-width='3'/%3E%3Cpath d='M0,110 Q200,10 400,110 T800,110' fill='none' stroke='rgba(0, 123, 255, 0.15)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 50% 100%;
    animation: waveFast 5s linear infinite;
}

/* Bottom Wave - Fast Blue Lines */
.faq-animate-bg::after {
    bottom: -20%;
    /* Positioned below the card */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='300' viewBox='0 0 800 300'%3E%3Cpath d='M0,200 Q200,300 400,200 T800,200' fill='none' stroke='rgba(0, 123, 255, 0.25)' stroke-width='3'/%3E%3Cpath d='M0,210 Q200,310 400,210 T800,210' fill='none' stroke='rgba(0, 123, 255, 0.1)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60% 100%;
    animation: waveFast 7s linear infinite reverse;
}

@keyframes waveFast {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* The Central White Card */
.faq-content-panel .tab-content {
    background: #ffffff;
    border: 1px solid rgba(0, 123, 255, 0.1);
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    /* Keeps text above background waves */
}

/* Icon Styling */
.faq-icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7ff;
    border-radius: 16px;
    color: #007bff;
    font-size: 24px;
    margin-bottom: 25px;
}

/* Clean Transition for Tabs */
.tab-pane.fade {
    transition:
        opacity 0.3s ease-out,
        transform 0.3s ease-out;
    transform: translateY(10px);
}

.tab-pane.fade.show {
    transform: translateY(0);
}

/* Section Main Style */
.why-choose-section {
    background: #080b1a;
    /* Deep Navy Night */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.text-brand-gradient {
    background: linear-gradient(90deg, #00d2ff, #7000ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Icon Square Style */
.icon-sq {
    width: 45px;
    height: 45px;
    background: rgba(var(--primary-color1-opc), 0.15);
    border: 1px solid var(--primary-color1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color4);
    flex-shrink: 0;
}

/* Right Side Visual Logic */
.feature-visual-wrapper {
    position: relative;
    width: 400px;
    height: 400px;
}

.central-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle,
        rgba(112, 0, 255, 0.2) 0%,
        transparent 70%
    );
    filter: blur(40px);
}

.main-award-hex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 220px;
    background: linear-gradient(135deg, #7000ff, #00d2ff);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    padding: 5px;
}

.hex-inner {
    width: 100%;
    height: 100%;
    background: #080b1a;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Cards Animation */
.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 5;
    animation: floatUpDown 4s infinite alternate ease-in-out;
}

.card-1 {
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.card-2 {
    top: 20%;
    right: -20px;
    animation-delay: 1s;
}

.card-3 {
    bottom: 5%;
    left: 10%;
    animation-delay: 2s;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-20px) rotate(5deg);
    }
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .feature-visual-wrapper {
        transform: scale(0.8);
        margin-top: 50px;
    }
}

/* use cases */

/* Card Container */
.main-case-card {
    background: #ffffff;
    border: 1px solid rgba(0, 114, 255, 0.05);
    border-radius: 30px;
    z-index: 1;
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(90deg, #0072ff, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animated Shapes Container */
.bg-animated-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: blur(60px);
    /* Creates the soft liquid/wave effect */
    opacity: 0.5;
}

.shape {
    position: absolute;
    border-radius: 50%;
}

/* Semicircle / Circle 1 */
.shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(0, 114, 255, 0.2);
    top: -100px;
    left: -50px;
    animation: moveFlow 8s infinite alternate ease-in-out;
}

/* Semicircle / Circle 2 */
.shape-2 {
    width: 250px;
    height: 250px;
    background: rgba(160, 32, 240, 0.15);
    bottom: -50px;
    right: -50px;
    animation: moveFlow 12s infinite alternate-reverse ease-in-out;
}

/* Small Transforming Dot */
.shape-3 {
    width: 150px;
    height: 150px;
    background: rgba(0, 198, 255, 0.2);
    top: 40%;
    left: 30%;
    animation: pulseTransform 6s infinite ease-in-out;
}

/* Keyframes for Automatic Movement */
@keyframes moveFlow {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(30px, 50px) scale(1.2) rotate(45deg);
    }

    100% {
        transform: translate(-20px, 20px) scale(0.9) rotate(-15deg);
    }
}

@keyframes pulseTransform {
    0%,
    100% {
        transform: scale(1);
        border-radius: 50%;
    }

    50% {
        transform: scale(1.5);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        /* Liquid shape change */
    }
}

/* Card Container */
.small-case-card {
    background: #ffffff;
    border-radius: 16px;
    height: auto;
    /* Height strictly based on content */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

/* Icon Box Base */
.case-icon-box {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.2rem;
}

/* Individual Icon Colors (Cleaner than inline styles) */
.icon-ecommerce {
    background: #eef5ff;
    color: #0072ff;
}

.icon-realestate {
    background: #f0fff4;
    color: #28a745;
}

.icon-fintech {
    background: #fff5f5;
    color: #dc3545;
}

.icon-healthcare {
    background: #fdf2ff;
    color: #a020f0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .small-case-card {
        margin-bottom: 10px;
    }
}

/* CTA Styling */
/* CTA Main Styling */
.cta-advanced-section {
    background: var(--title-color2);
    /* Base Dark Blue */
    min-height: 500px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    /* Optional: adds rounded corners if inside a container */
    margin: 20px 0;
}

/* Animation Wrapper */
.cta-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Ball Styling & Floating Logic */
.moving-ball {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.5;
    animation: bounce-and-move 15s infinite alternate ease-in-out;
}

/* Ball 1: Large Blue */
.ball-primary {
    width: 300px;
    height: 300px;
    background: var(--primary-color1);
    top: -50px;
    left: -50px;
    animation-duration: 20s;
}

/* Ball 2: Lime Green (Bouncing) */
.ball-secondary {
    width: 200px;
    height: 200px;
    background: var(--primary-color4);
    bottom: 10%;
    right: 15%;
    animation-delay: -5s;
    animation-duration: 12s;
}

/* Ball 3: Purple/Violet */
.ball-accent {
    width: 150px;
    height: 150px;
    background: var(--primary-color3);
    top: 40%;
    left: 50%;
    animation-duration: 18s;
    animation-delay: -2s;
}

/* Animation Keyframes */
@keyframes bounce-and-move {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(100px, 50px) scale(1.2) rotate(120deg);
    }

    66% {
        transform: translate(-50px, 150px) scale(0.8) rotate(240deg);
    }

    100% {
        transform: translate(50px, -50px) scale(1.1) rotate(360deg);
    }
}

/* Button Styling */
.btn-main-cta {
    padding: 18px 45px;
    background: var(--white-color);
    color: var(--title-color2) !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.15rem;
    display: inline-block;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-main-cta:hover {
    transform: translateY(-8px);
    background: var(--primary-color4);
    /* Lime accent on hover */
    box-shadow: 0 15px 40px rgba(var(--primary-color4-opc), 0.4);
}

/* Responsiveness */
@media (max-width: 768px) {
    .moving-ball {
        width: 100px;
        height: 100px;
    }

    .display-4 {
        font-size: 2rem;
    }
}

/* Use case styling */
/* Main Card Styling */
.main-case-card {
    background: #ffffff;
    border-radius: 35px;
    border: 1px solid #f0f0f0;
}

.case-img-wrapper {
    position: relative;
    margin-top: 20px;
}

.floating-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.8rem;
    color: #0072ff;
}

/* Small Grid Cards */
.small-case-card {
    background: #ffffff;
    border-radius: 25px;
    border: 1px solid #f3f3f3;
    transition: all 0.3s ease;
}

.small-case-card:hover {
    transform: translateY(-8px);
    border-color: #0072ff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05) !important;
}

.case-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .main-case-card {
        margin-bottom: 20px;
    }
}