/* ===== GLOBAL AI BACKGROUND ===== */
body {
    background:
        radial-gradient(circle at 20% 20%, #29647b33, transparent 40%),
        radial-gradient(circle at 80% 80%, #78267133, transparent 40%),
        linear-gradient(135deg, #3b205a, #782671, #29647b);
    color: #fff;
}

/* ===== HERO OVERLAY (improves video contrast) ===== */
.td-hero-3-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3b205a99, #78267166, #29647b66);
    z-index: 1;
}

/* ===== BUTTONS (AI GRADIENT) ===== */
.td-btn {
    background: linear-gradient(135deg, #782671, #29647b);
    border: none;
    color: #fff !important;
    box-shadow: 0 0 15px #78267180;
    transition: 0.3s;
}

.td-btn:hover {
    background: linear-gradient(135deg, #30a6b3, #782671);
    box-shadow: 0 0 25px #30a6b380;
}

/* ===== COUNTDOWN SECTION ===== */
.td-countdown-area {
    background: linear-gradient(135deg, #3b205a, #782671);
}

.deal-counter li {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.05)
    ) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* border: 1px solid rgba(255, 255, 255, 0.8); */
    border: 1px solid #fff;
    border-radius: 12px;
}

/* ===== ABOUT SECTION ===== */
.td-about-area {
    background: linear-gradient(135deg, #3b205a, #29647b);
}

/* ===== COUNTER SECTION ===== */
.td-counter-area {
    background:
        radial-gradient(circle, #78267122, transparent),
        linear-gradient(135deg, #3b205a, #29647b);
}

/* ===== BANNER ===== */
.td-banner-area {
    position: relative;
}

.td-banner-area::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(135deg, #782671cc, #29647Bcc); */
}

/* ===== TEAM SECTION ===== */
.td-team-area {
    background: linear-gradient(135deg, #3b205a, #782671);
}

/* ===== CARDS (glassmorphism AI feel) ===== */
.td-team-item,
.td-blog-item,
.td-feature-3-wrap {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

/* ===== TESTIMONIAL ===== */
.td-testimonial-area {
    background: linear-gradient(135deg, #29647b, #3b205a);
}

/* ===== TEXT SLIDER ===== */
.td-text-slider-area {
    background: linear-gradient(90deg, #782671, #29647b);
}

.td-text-slider-item h3 {
    color: #fff !important;
}

/* ===== BRANDS ===== */
.td-brands-area {
    background: linear-gradient(135deg, #fff, #fff);
}

/* ===== FEATURE SECTION ===== */
.td-feature-area {
    background: linear-gradient(135deg, #29647b, #30a6b3);
}

/* ===== BLOG SECTION ===== */
.td-blog-area {
    position: relative;
}

.td-blog-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3b205add, #782671cc);
}

/* ===== SUBTLE GRID (AI TOUCH) ===== */

/* body::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(#ffffff08 1px, transparent 1px),
        linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
} */

.td-hero-3-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* VIDEO */
.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .td-hero-3-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        190deg,
        rgba(120, 38, 113, 0.85) 50%,
        rgba(120, 38, 113, 0.6) 70%,
        rgba(41, 100, 120, 0.6) 90%,
        rgba(41, 100, 120, 0.85) 100%
    );

    z-index: 1;
} */

.td-hero-3-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    background: linear-gradient(
        150deg,
        rgba(90, 20, 90, 0.1) 0%,
        rgba(40, 20, 70, 0.5) 30%,
        rgba(20, 60, 80, 0.1) 65%,

        rgba(40, 20, 70, 1) 100%
    );

    /*
    background: linear-gradient(
        245deg,
        rgba(59, 32, 90, 0.9) 0%,
        rgba(120, 38, 113, 0.85) 25%,
        rgba(41, 100, 123, 0.75) 65%,
        rgba(48, 166, 179, 0.65) 75%,
        rgba(59, 32, 90, 0.9) 100%
    ); */

    /* background: linear-gradient(
        245deg,
        rgba(59, 32, 90, 0.98) 0%,
        rgba(120, 38, 113, 0.95) 25%,
        rgba(41, 100, 123, 0.9) 65%,
        rgba(48, 166, 179, 0.85) 75%,
        rgba(59, 32, 90, 0.98) 100%
    ); */
}

/* 🔲 Black overlay (BEHIND TEXT, ABOVE BG) */
.td-hero-3-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--td-common-white);
}

.loader-img {
    width: 220px;
    height: auto;

    /* Center alignment (if needed) */
    display: block;
    margin: 0 auto;

    /* Smooth appearance */
    animation: loaderPulse 1.8s ease-in-out infinite;

    /* Optional polish */
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
}

/* Subtle professional animation */
@keyframes loaderPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.highlight-text {
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: 600;
    padding: 5px 12px;
    z-index: 1;
}

/* Gradient background strip */
.highlight-text::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 82%;
    z-index: -1;
    border-radius: 4px;

    /* AI Gradient */
    background: linear-gradient(135deg, #782671, #29647b, #30a6b3, #3b205a);

    /* optional glow effect */
    box-shadow: 0 0 10px rgba(48, 166, 179, 0.6);
}

/* AI Glass Panel */
.ai-glass-box {
    position: relative;
    padding: 50px;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}

/* Gradient + opacity layer */
.ai-glass-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 20px;

    /* AI Gradient */
    background: linear-gradient(
        135deg,
        rgba(120, 38, 113, 0.85),
        rgba(59, 32, 90, 0.85),
        rgba(41, 100, 123, 0.75),
        rgba(48, 166, 179, 0.65)
    );

    /* glass blur */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Optional glow edge */
.ai-glass-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: -1;

    box-shadow: 0 0 40px rgba(48, 166, 179, 0.25);
}

/* Add this to your stylesheet */
.td-blog-area.bg-custom-gradient {
    background: linear-gradient(
        135deg,
        #782671 0%,
        #3b205a 35%,
        #29647b 70%,
        #30a6b3 100%
    ) !important;
    background-size: cover;
    position: relative;
}

/* Optional: Add a subtle overlay to make the text pop */
.td-blog-area.bg-custom-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Darkens slightly for readability */
    pointer-events: none;
}

/* element start here */
.ai-lines-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Base image */
.ai-lines {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    opacity: 0.55;

    /* subtle glow */
    filter: drop-shadow(0 0 20px rgba(46, 196, 255, 0.4));

    /* floating motion */
    animation: floatMove 6s ease-in-out infinite;
}

/* Vertical slow movement */
@keyframes floatMove {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
    }
}

.ai-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Base style */
.ai-shape {
    position: absolute;
    width: 350px;
    opacity: 0.15;

    filter: drop-shadow(0 0 30px rgba(46, 196, 255, 0.3));
    animation: floatSlow 8s ease-in-out infinite;
}

/* LEFT SIDE */
.ai-left {
    top: -40px;
    left: -60px;

    transform: rotate(180deg); /* flip for variation */
}

/* RIGHT SIDE */
.ai-right {
    top: -40px;
    right: -60px;
}

/* Floating motion */
@keyframes floatSlow {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Mobile devices (screens up to 768px wide) */
@media (max-width: 768px) {
    .td-btn {
        display: block; /* make buttons stack vertically */
        width: 70%; /* optional: full-width buttons */
        margin-bottom: 15px; /* space between stacked buttons */
    }

    /* Remove right margin for mobile so it doesn’t push horizontally */
    .td-btn:last-child {
        margin-right: 0;
        margin-bottom: 0; /* no extra space after the last button */
    }
}

.section-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .section-bg {
        background-attachment: scroll; /* important fix */
    }
}

.td-testimonial-3-wrap {
    position: relative;
    overflow: hidden; /* important */
}

.hero-shape {
    position: absolute;
    right: -40%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 800px;
    /* opacity: 0.4; */
    pointer-events: none;
}

@media (max-width: 992px) {
    .hero-shape {
        width: 150%;
        right: -30%;
        /* opacity: 0.3; */
    }
}

@media (max-width: 768px) {
    .hero-shape {
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
        transform: none;
        /* opacity: 0.2; */
        margin-top: 20px;
    }
}

.for-padding-right {
    padding-right: 140px;
}

.td-banner-area {
    position: relative;
    overflow: hidden;
}

/* Overlay layer */
.td-banner-area .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5); /* adjust darkness here */

    z-index: 1;
}

/* Make content appear above overlay */
.td-banner-area .container {
    position: relative;
    z-index: 2;
}

.td-blog-content {
    min-height: 120px;
    max-height: 120px;
}
.card-box {
    max-height: 320px;
    min-height: 320px;
}

.logo {
    margin-left: 25px;
}