.elementor-2154 .elementor-element.elementor-element-cbee33e{--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;}.elementor-2154 .elementor-element.elementor-element-1063c19{--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;}.elementor-2154 .elementor-element.elementor-element-5c5574a{--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;}.elementor-2154 .elementor-element.elementor-element-6541670{--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;}.elementor-2154 .elementor-element.elementor-element-4812ac5{--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-269e125 *//* =============================================
   ASTRODEFINED HERO SECTION - CSS FOR WORDPRESS
   
   HOW TO USE:
   Copy ALL of this CSS and paste it in:
   WordPress → Appearance → Customize → Additional CSS
   ============================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============ BASE STYLES ============ */
.astro-hero * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.astro-hero {
    font-family: 'Poppins', sans-serif;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.astro-hero h1,
.astro-hero h2,
.astro-hero h3,
.astro-hero h4 {
    font-family: 'Playfair Display', serif;
}

/* ============ HERO GRADIENT BACKGROUND ============ */
.hero-gradient {
    background: linear-gradient(135deg, #FFFEF9 0%, #FFF9E6 25%, #FFF3D1 50%, #FFECC2 75%, #FFE4A8 100%);
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ============ MESH OVERLAY ============ */
.mesh-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(253, 224, 71, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(251, 146, 60, 0.1) 0%, transparent 40%);
    animation: meshMove 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes meshMove {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(2deg);
    }
}

/* ============ FLOATING ORBS ============ */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: floatOrb 8s ease-in-out infinite;
    pointer-events: none;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(249, 115, 22, 0.2));
    top: -100px;
    right: -100px;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(253, 224, 71, 0.25), rgba(251, 191, 36, 0.2));
    bottom: -50px;
    left: -50px;
    animation-delay: -4s;
}

.orb-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(253, 186, 116, 0.15));
    top: 50%;
    left: 50%;
    animation-delay: -2s;
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.05);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

/* ============ STARS CONTAINER ============ */
.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* ============ STARS ============ */
.star {
    position: absolute;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

.star-silver {
    background: radial-gradient(circle, #FFFFFF 0%, #D1D5DB 50%, #9CA3AF 100%);
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.7);
}

.star-white {
    background: radial-gradient(circle, #FFFFFF 0%, #F3F4F6 60%, #E5E7EB 100%);
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.8);
}

.star-bright {
    background: radial-gradient(circle, #FFFFFF 0%, #FEFEFE 100%);
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.9), 0 0 20px 6px rgba(255, 255, 255, 0.5);
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* ============ SHOOTING STARS - PURE SILVER HEAD ============ */
.shooting-star-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Shooting Star Head - Pure Silver Round Ball */
.shooting-star {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
            #FFFFFF 0%,
            #E8E8E8 30%,
            #C0C0C0 60%,
            #A8A8A8 100%);
    opacity: 0;
    z-index: 10;
}

/* Single Tail - Extends up-left (opposite to down-right movement) */
.shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 2px;
    background: linear-gradient(to left,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(220, 220, 220, 0.6) 30%,
            rgba(180, 180, 180, 0.3) 60%,
            transparent 100%);
    transform: translate(-100%, -50%);
    z-index: -1;
}

.shooting-star-1 {
    top: 8%;
    left: 15%;
    animation: shootStar 15s ease-out infinite !important;
    animation-delay: 0s;
}

.shooting-star-2 {
    top: 20%;
    left: 55%;
    animation: shootStar 18s ease-out infinite !important;
    animation-delay: 4s;
}

.shooting-star-3 {
    top: 12%;
    left: 35%;
    animation: shootStar 16s ease-out infinite !important;
    animation-delay: 8s;
}

.shooting-star-4 {
    top: 30%;
    left: 5%;
    animation: shootStar 20s ease-out infinite !important;
    animation-delay: 3s;
}

.shooting-star-5 {
    top: 5%;
    left: 70%;
    animation: shootStar 17s ease-out infinite !important;
    animation-delay: 10s;
}

.shooting-star-6 {
    top: 25%;
    left: 25%;
    animation: shootStar 19s ease-out infinite !important;
    animation-delay: 6s;
}

@keyframes shootStar {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(35deg);
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 1;
        transform: translate(300px, 180px) rotate(35deg);
    }

    45%,
    100% {
        opacity: 0;
        transform: translate(350px, 210px) rotate(35deg);
    }
}

/* ============ GALAXIES ============ */
.galaxy-container {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.galaxy-container svg {
    width: 100%;
    height: 100%;
}

.galaxy-1 {
    width: 320px;
    height: 320px;
    top: 3%;
    right: 8%;
    animation: galaxyFloat1 45s ease-in-out infinite;
    opacity: 0.75;
}

.galaxy-1 svg {
    animation: galaxySpin1 120s linear infinite;
}

.galaxy-2 {
    width: 260px;
    height: 260px;
    bottom: 8%;
    left: 5%;
    animation: galaxyFloat2 50s ease-in-out infinite;
    opacity: 0.65;
}

.galaxy-2 svg {
    animation: galaxySpin2 150s linear infinite reverse;
}

.galaxy-3 {
    width: 180px;
    height: 180px;
    top: 35%;
    left: 3%;
    animation: galaxyFloat3 40s ease-in-out infinite;
    opacity: 0.55;
}

.galaxy-3 svg {
    animation: galaxySpin1 100s linear infinite;
}

.galaxy-4 {
    width: 200px;
    height: 200px;
    bottom: 20%;
    right: 3%;
    animation: galaxyFloat4 55s ease-in-out infinite;
    opacity: 0.6;
}

.galaxy-4 svg {
    animation: galaxySpin2 130s linear infinite;
}

.galaxy-5 {
    width: 150px;
    height: 150px;
    top: 15%;
    left: 12%;
    animation: galaxyFloat5 35s ease-in-out infinite;
    opacity: 0.5;
}

.galaxy-5 svg {
    animation: galaxySpin1 90s linear infinite reverse;
}

@keyframes galaxySpin1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes galaxySpin2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes galaxyFloat1 {

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

    25% {
        transform: translate(-15px, 20px);
    }

    50% {
        transform: translate(10px, 35px);
    }

    75% {
        transform: translate(20px, 10px);
    }
}

@keyframes galaxyFloat2 {

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

    33% {
        transform: translate(25px, -15px);
    }

    66% {
        transform: translate(-10px, -25px);
    }
}

@keyframes galaxyFloat3 {

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

    50% {
        transform: translate(20px, 30px);
    }
}

@keyframes galaxyFloat4 {

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

    25% {
        transform: translate(-20px, -10px);
    }

    75% {
        transform: translate(15px, -20px);
    }
}

@keyframes galaxyFloat5 {

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

    40% {
        transform: translate(15px, 25px);
    }

    80% {
        transform: translate(-10px, 15px);
    }
}

/* ============ GLASSMORPHISM ============ */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.1);
}

/* ============ GRADIENT TEXT ============ */
.gradient-text {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 25%, #FBBF24 50%, #F59E0B 75%, #DC2626 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ============ FLOATING ANIMATION ============ */
.float {
    animation: float 6s ease-in-out infinite;
}

.float-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes float {

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

    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}

/* ============ SUN GLOW ============ */
.sun-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(249, 115, 22, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}

/* ============ BACKGROUND ORBITS ============ */
.bg-orbit {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.bg-orbit-1 {
    width: 700px;
    height: 700px;
    border: 2px dashed rgba(251, 191, 36, 0.15);
    transform: translate(-50%, -50%);
    animation: bgOrbitSpin 60s linear infinite;
}

.bg-orbit-2 {
    width: 500px;
    height: 500px;
    border: 1px solid rgba(249, 115, 22, 0.1);
    transform: translate(-50%, -50%);
    animation: bgOrbitSpin 40s linear infinite reverse;
}

@keyframes bgOrbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============ GEOMETRIC SHAPES ============ */
.geo-shape {
    position: absolute;
    opacity: 0.1;
    animation: geoFloat 12s ease-in-out infinite;
    pointer-events: none;
}

.geo-shape-1 {
    width: 6rem;
    height: 6rem;
    border: 2px solid #FDBA74;
    transform: rotate(45deg);
    top: 20%;
    left: 10%;
}

.geo-shape-2 {
    width: 4rem;
    height: 4rem;
    border: 2px solid #FDE68A;
    border-radius: 50%;
    bottom: 25%;
    right: 15%;
    animation-delay: -4s;
}

.geo-shape-3 {
    width: 5rem;
    height: 5rem;
    border: 2px solid #FEF08A;
    top: 60%;
    left: 5%;
    animation-delay: -8s;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@keyframes geoFloat {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
        opacity: 0.1;
    }

    50% {
        transform: rotate(180deg) translateY(-30px);
        opacity: 0.15;
    }
}

/* ============ FLOATING ZODIAC SYMBOLS ============ */
.zodiac-symbols {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.zodiac-symbol {
    position: absolute;
    font-size: 2rem;
    opacity: 0.15;
    animation: zodiacFloat 15s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.3));
}

.zodiac-symbol:nth-child(1) {
    top: 8%;
    left: 5%;
    animation-delay: 0s;
}

.zodiac-symbol:nth-child(2) {
    top: 15%;
    right: 8%;
    animation-delay: -2s;
}

.zodiac-symbol:nth-child(3) {
    top: 45%;
    left: 3%;
    animation-delay: -4s;
}

.zodiac-symbol:nth-child(4) {
    bottom: 20%;
    right: 5%;
    animation-delay: -6s;
}

.zodiac-symbol:nth-child(5) {
    bottom: 35%;
    left: 8%;
    animation-delay: -8s;
}

.zodiac-symbol:nth-child(6) {
    top: 25%;
    left: 15%;
    animation-delay: -10s;
}

@keyframes zodiacFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.12;
    }

    25% {
        transform: translateY(-15px) rotate(10deg) scale(1.1);
        opacity: 0.2;
    }

    50% {
        transform: translateY(-5px) rotate(-5deg) scale(1);
        opacity: 0.15;
    }

    75% {
        transform: translateY(-20px) rotate(5deg) scale(1.05);
        opacity: 0.18;
    }
}

/* ============ AURORA / NORTHERN LIGHTS EFFECT ============ */
.aurora-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.aurora {
    position: absolute;
    width: 200%;
    height: 100%;
    left: -50%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(251, 191, 36, 0.03) 20%,
            rgba(249, 115, 22, 0.05) 40%,
            rgba(251, 146, 60, 0.04) 60%,
            transparent 100%);
    filter: blur(40px);
    animation: auroraWave 12s ease-in-out infinite;
}

.aurora:nth-child(2) {
    animation-delay: -4s;
    opacity: 0.7;
}

.aurora:nth-child(3) {
    animation-delay: -8s;
    opacity: 0.5;
}

@keyframes auroraWave {

    0%,
    100% {
        transform: translateX(-10%) skewX(-5deg) scaleY(1);
    }

    50% {
        transform: translateX(10%) skewX(5deg) scaleY(1.2);
    }
}

/* ============ GLOWING PARTICLES ============ */
.glow-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
}

.glow-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(251, 191, 36, 0.8) 40%, transparent 70%);
    box-shadow:
        0 0 10px rgba(251, 191, 36, 0.6),
        0 0 20px rgba(249, 115, 22, 0.4),
        0 0 30px rgba(251, 191, 36, 0.2);
    animation: glowPulse 4s ease-in-out infinite;
}

.glow-particle:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.glow-particle:nth-child(2) {
    top: 30%;
    right: 25%;
    animation-delay: -1s;
}

.glow-particle:nth-child(3) {
    top: 50%;
    left: 10%;
    animation-delay: -2s;
}

.glow-particle:nth-child(4) {
    bottom: 25%;
    right: 15%;
    animation-delay: -3s;
}

.glow-particle:nth-child(5) {
    bottom: 40%;
    left: 30%;
    animation-delay: -0.5s;
}

.glow-particle:nth-child(6) {
    top: 20%;
    right: 10%;
    animation-delay: -1.5s;
}

.glow-particle:nth-child(7) {
    bottom: 15%;
    left: 50%;
    animation-delay: -2.5s;
}

.glow-particle:nth-child(8) {
    top: 65%;
    right: 35%;
    animation-delay: -3.5s;
}

@keyframes glowPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
        box-shadow:
            0 0 10px rgba(251, 191, 36, 0.6),
            0 0 20px rgba(249, 115, 22, 0.4);
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
        box-shadow:
            0 0 15px rgba(251, 191, 36, 0.8),
            0 0 30px rgba(249, 115, 22, 0.6),
            0 0 45px rgba(251, 191, 36, 0.3);
    }
}

/* ============ CONSTELLATION LINES ============ */
.constellation-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.15;
}

.constellation-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
    transform-origin: left center;
    animation: constellationFade 8s ease-in-out infinite;
}

.constellation-line:nth-child(1) {
    top: 15%;
    left: 10%;
    width: 120px;
    transform: rotate(25deg);
    animation-delay: 0s;
}

.constellation-line:nth-child(2) {
    top: 25%;
    right: 20%;
    width: 80px;
    transform: rotate(-15deg);
    animation-delay: -2s;
}

.constellation-line:nth-child(3) {
    top: 40%;
    left: 5%;
    width: 100px;
    transform: rotate(45deg);
    animation-delay: -4s;
}

.constellation-line:nth-child(4) {
    bottom: 30%;
    right: 10%;
    width: 150px;
    transform: rotate(-30deg);
    animation-delay: -6s;
}

@keyframes constellationFade {

    0%,
    100% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ============ MAGIC SPARKLE CURSOR TRAIL ============ */
.sparkle-effect {
    position: absolute;
    pointer-events: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #FBBF24 50%, transparent 100%);
    animation: sparkleOut 0.8s ease-out forwards;
}

@keyframes sparkleOut {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============ LAYOUT ============ */
.hero-container {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8rem 1.5rem;
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero-content {
    text-align: center;
}

@media (min-width: 1024px) {
    .hero-content {
        text-align: left;
    }
}

/* ============ BADGE - PREMIUM STYLING ============ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    margin-bottom: 2rem;
    border: 1px solid rgba(249, 115, 22, 0.2);
    animation: badgeReveal 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(-10px);
}

@keyframes badgeReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #F97316;
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.badge-text {
    color: #92400E;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.badge-emoji {
    font-size: 1rem;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }
}

.badge-shine {
    position: relative;
    overflow: hidden;
}

.badge-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transform: rotate(45deg);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* ============ HEADINGS - PREMIUM TYPOGRAPHY ============ */
.hero-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    animation: headingReveal 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes headingReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .hero-heading {
        font-size: 4rem;
        letter-spacing: -0.03em;
    }
}

@media (min-width: 1024px) {
    .hero-heading {
        font-size: 4.75rem;
    }
}

.hero-heading-gradient {
    display: block;
    margin-top: 0.25rem;
    position: relative;
    background: linear-gradient(135deg, #EA580C 0%, #F97316 30%, #FBBF24 60%, #F59E0B 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 4s ease-in-out infinite, headingReveal 1s ease-out 0.2s forwards;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.hero-heading-gradient:hover {
    transform: scale(1.02);
}

.fancy-font {
    font-family: 'Cinzel Decorative', 'Playfair Display', Georgia, serif;
    font-weight: 900;
    letter-spacing: 0.04em;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% center;
    }

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

.hero-subheading {
    font-size: 1.125rem;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.8;
    letter-spacing: 0.01em;
    margin-bottom: 2.5rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    animation: subheadingReveal 1s ease-out 0.4s forwards;
    opacity: 0;
    transform: translateY(15px);
}

@keyframes subheadingReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .hero-subheading {
        font-size: 1.2rem;
        line-height: 1.85;
    }
}

@media (min-width: 1024px) {
    .hero-subheading {
        margin-left: 0;
        margin-right: 0;
        font-size: 1.25rem;
    }
}

/* ============ BUTTONS ============ */
.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .hero-buttons {
        justify-content: flex-start;
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(to right, #F97316, #F59E0B, #EAB308);
    color: white;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
}

.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

.btn-arrow {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.btn-glow {
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.btn-glow:hover {
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: white;
}

.play-icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #FED7AA, #FDE68A);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #EA580C;
}

/* ============ TRUST INDICATORS ============ */
.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .trust-indicators {
        justify-content: flex-start;
    }
}

.avatar-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.avatars {
    display: flex;
}

.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    margin-left: -0.5rem;
}

.avatar:first-child {
    margin-left: 0;
}

.avatar-1 {
    background: linear-gradient(to bottom right, #FB923C, #F59E0B);
}

.avatar-2 {
    background: linear-gradient(to bottom right, #FACC15, #FB923C);
}

.avatar-3 {
    background: linear-gradient(to bottom right, #F59E0B, #FACC15);
}

.avatar-4 {
    background: linear-gradient(to bottom right, #F97316, #EF4444);
}

.rating-text {
    font-size: 0.875rem;
    color: #4B5563;
}

.rating-text strong {
    font-weight: 600;
    color: #1F2937;
}

.divider {
    height: 2rem;
    width: 1px;
    background-color: #D1D5DB;
    display: none;
}

@media (min-width: 640px) {
    .divider {
        display: block;
    }
}

.accuracy-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #4B5563;
}

.check-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #22C55E;
}

/* ============ VISUAL SECTION - UPDATED ============ */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    padding: 5rem;
}

@media (min-width: 1024px) {
    .hero-visual {
        display: flex;
    }
}

.visual-container {
    position: relative;
    width: 450px;
    height: 450px;
}

/* ============ ORBIT RINGS ============ */
.orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(251, 191, 36, 0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbit-1 {
    width: 120px;
    height: 120px;
    animation: orbitSpin 10s linear infinite;
}

.orbit-2 {
    width: 160px;
    height: 160px;
    border-style: dashed;
    animation: orbitSpin 14s linear infinite reverse;
}

.orbit-3 {
    width: 200px;
    height: 200px;
    animation: orbitSpin 18s linear infinite;
}

.orbit-4 {
    width: 240px;
    height: 240px;
    border-style: dashed;
    animation: orbitSpin 22s linear infinite reverse;
}

.orbit-5 {
    width: 280px;
    height: 280px;
    animation: orbitSpin 26s linear infinite;
    border-color: rgba(251, 191, 36, 0.25);
}

.orbit-6 {
    width: 320px;
    height: 320px;
    border-style: dashed;
    animation: orbitSpin 30s linear infinite reverse;
    border-color: rgba(249, 115, 22, 0.2);
}

.orbit-7 {
    width: 360px;
    height: 360px;
    animation: orbitSpin 34s linear infinite;
    border-color: rgba(139, 92, 246, 0.25);
}

.orbit-8 {
    width: 400px;
    height: 400px;
    border-style: dashed;
    animation: orbitSpin 38s linear infinite reverse;
    border-color: rgba(194, 65, 12, 0.2);
}

@keyframes orbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============ REALISTIC BURNING SUN ============ */
.sun-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFF7ED 0%, #FEF08A 15%, #FBBF24 30%, #F97316 50%, #EA580C 70%, #DC2626 100%);
    box-shadow:
        0 0 20px rgba(255, 255, 200, 0.9),
        0 0 40px rgba(251, 191, 36, 0.8),
        0 0 60px rgba(249, 115, 22, 0.7),
        0 0 80px rgba(239, 68, 68, 0.5),
        0 0 100px rgba(220, 38, 38, 0.4),
        0 0 120px rgba(251, 191, 36, 0.3),
        inset -8px -8px 20px rgba(220, 38, 38, 0.6),
        inset 5px 5px 15px rgba(254, 252, 232, 0.9);
    animation: sunBurn 2s ease-in-out infinite;
    z-index: 20;
    overflow: visible;
}

.sun-center::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(254, 240, 138, 0.7) 30%, transparent 70%);
    animation: sunCoreFlicker 0.5s ease-in-out infinite alternate;
}

.sun-center::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(251, 191, 36, 0.6) 20deg,
            transparent 40deg,
            rgba(249, 115, 22, 0.5) 80deg,
            transparent 100deg,
            rgba(239, 68, 68, 0.4) 140deg,
            transparent 160deg,
            rgba(251, 191, 36, 0.5) 200deg,
            transparent 220deg,
            rgba(249, 115, 22, 0.6) 260deg,
            transparent 280deg,
            rgba(239, 68, 68, 0.5) 320deg,
            transparent 340deg,
            rgba(251, 191, 36, 0.6) 360deg);
    animation: sunFlameRotate 8s linear infinite;
    filter: blur(3px);
}

.sun-surface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 30% 40% at 25% 25%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse 25% 30% at 70% 35%, rgba(255, 255, 200, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 35% 35% at 45% 65%, rgba(255, 200, 100, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 20% 25% at 75% 70%, rgba(255, 150, 50, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 15% 20% at 30% 75%, rgba(255, 100, 50, 0.5) 0%, transparent 50%);
    animation: sunSurfaceBurn 3s ease-in-out infinite;
}

.sun-corona {
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 30%, rgba(249, 115, 22, 0.2) 50%, transparent 70%);
    animation: coronaPulse 2s ease-in-out infinite;
    pointer-events: none;
    display: none;
    /* Hidden on all devices */
}

.sun-corona::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 35px;
    background: linear-gradient(to top, rgba(249, 115, 22, 0.8), rgba(251, 191, 36, 0.6), rgba(254, 240, 138, 0.4), transparent);
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    filter: blur(2px);
    animation: solarFlare1 3s ease-in-out infinite;
    transform-origin: bottom center;
}

.sun-corona::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    width: 10px;
    height: 28px;
    background: linear-gradient(to top, rgba(239, 68, 68, 0.7), rgba(249, 115, 22, 0.5), rgba(251, 191, 36, 0.3), transparent);
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    filter: blur(2px);
    animation: solarFlare2 4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes sunBurn {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 20px rgba(255, 255, 200, 0.9),
            0 0 40px rgba(251, 191, 36, 0.8),
            0 0 60px rgba(249, 115, 22, 0.7),
            0 0 80px rgba(239, 68, 68, 0.5),
            0 0 100px rgba(220, 38, 38, 0.4),
            0 0 120px rgba(251, 191, 36, 0.3),
            inset -8px -8px 20px rgba(220, 38, 38, 0.6),
            inset 5px 5px 15px rgba(254, 252, 232, 0.9);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow:
            0 0 25px rgba(255, 255, 200, 1),
            0 0 50px rgba(251, 191, 36, 0.9),
            0 0 75px rgba(249, 115, 22, 0.8),
            0 0 100px rgba(239, 68, 68, 0.6),
            0 0 130px rgba(220, 38, 38, 0.5),
            0 0 160px rgba(251, 191, 36, 0.4),
            inset -8px -8px 25px rgba(220, 38, 38, 0.7),
            inset 5px 5px 20px rgba(254, 252, 232, 1);
    }
}

@keyframes sunCoreFlicker {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes sunFlameRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sunSurfaceBurn {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: rotate(5deg) scale(1.02);
        opacity: 0.9;
    }

    50% {
        transform: rotate(0deg) scale(1.05);
        opacity: 1;
    }

    75% {
        transform: rotate(-5deg) scale(1.02);
        opacity: 0.9;
    }
}

@keyframes coronaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}

@keyframes solarFlare1 {

    0%,
    100% {
        height: 35px;
        opacity: 0.7;
    }

    50% {
        height: 50px;
        opacity: 1;
    }
}

@keyframes solarFlare2 {

    0%,
    100% {
        height: 28px;
        opacity: 0.6;
    }

    30% {
        height: 20px;
        opacity: 0.4;
    }

    70% {
        height: 40px;
        opacity: 0.9;
    }
}

.sun-flare {
    position: absolute;
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    filter: blur(1px);
    pointer-events: none;
    z-index: 21;
    display: none;
    /* Hidden on all devices */
}

.sun-flare-1 {
    top: -20px;
    left: 20%;
    width: 8px;
    height: 25px;
    background: linear-gradient(to top, rgba(251, 191, 36, 0.9), rgba(254, 240, 138, 0.6), transparent);
    animation: flareWave1 2.5s ease-in-out infinite;
    transform-origin: bottom center;
}

.sun-flare-2 {
    top: 10%;
    right: -15px;
    width: 20px;
    height: 7px;
    background: linear-gradient(to right, rgba(249, 115, 22, 0.9), rgba(251, 191, 36, 0.6), transparent);
    border-radius: 20% 80% 80% 20% / 50% 50% 50% 50%;
    animation: flareWave2 3s ease-in-out infinite;
    transform-origin: left center;
}

.sun-flare-3 {
    bottom: -18px;
    right: 25%;
    width: 10px;
    height: 22px;
    background: linear-gradient(to bottom, rgba(239, 68, 68, 0.8), rgba(249, 115, 22, 0.5), transparent);
    border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
    animation: flareWave3 2s ease-in-out infinite;
    transform-origin: top center;
}

.sun-flare-4 {
    top: 30%;
    left: -12px;
    width: 18px;
    height: 6px;
    background: linear-gradient(to left, rgba(251, 191, 36, 0.9), rgba(254, 240, 138, 0.5), transparent);
    border-radius: 80% 20% 20% 80% / 50% 50% 50% 50%;
    animation: flareWave4 3.5s ease-in-out infinite;
    transform-origin: right center;
}

@keyframes flareWave1 {

    0%,
    100% {
        height: 25px;
        opacity: 0.8;
        transform: scaleX(1) rotate(-5deg);
    }

    50% {
        height: 38px;
        opacity: 1;
        transform: scaleX(1.2) rotate(5deg);
    }
}

@keyframes flareWave2 {

    0%,
    100% {
        width: 20px;
        opacity: 0.7;
        transform: scaleY(1) rotate(10deg);
    }

    50% {
        width: 32px;
        opacity: 1;
        transform: scaleY(1.3) rotate(-5deg);
    }
}

@keyframes flareWave3 {

    0%,
    100% {
        height: 22px;
        opacity: 0.75;
        transform: scaleX(1) rotate(8deg);
    }

    50% {
        height: 30px;
        opacity: 1;
        transform: scaleX(1.15) rotate(-8deg);
    }
}

@keyframes flareWave4 {

    0%,
    100% {
        width: 18px;
        opacity: 0.7;
        transform: scaleY(1) rotate(-8deg);
    }

    50% {
        width: 28px;
        opacity: 0.95;
        transform: scaleY(1.25) rotate(8deg);
    }
}

/* ============ PLANET BASE STYLES ============ */
.planet {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    cursor: pointer;
    transition: transform 0.3s ease, z-index 0.3s ease;
    overflow: visible;
}

.planet:hover {
    transform: scale(1.6) !important;
    z-index: 100;
}

.planet-highlight {
    position: absolute;
    top: 10%;
    left: 15%;
    width: 30%;
    height: 25%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ============ 1. REALISTIC MOON ============ */
.planet-moon {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 35% 35%, #FAFAFA 0%, #E5E7EB 25%, #D1D5DB 50%, #9CA3AF 80%, #6B7280 100%);
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.95),
        0 0 40px rgba(255, 255, 255, 0.6),
        inset -4px -4px 10px rgba(75, 85, 99, 0.5),
        inset 3px 3px 6px rgba(255, 255, 255, 0.9);
    animation: orbitMoon 8s linear infinite;
}

.moon-craters {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(107, 114, 128, 0.7) 0%, transparent 18%),
        radial-gradient(circle at 65% 35%, rgba(107, 114, 128, 0.6) 0%, transparent 14%),
        radial-gradient(circle at 45% 60%, rgba(107, 114, 128, 0.5) 0%, transparent 22%),
        radial-gradient(circle at 78% 68%, rgba(107, 114, 128, 0.6) 0%, transparent 12%),
        radial-gradient(circle at 18% 52%, rgba(107, 114, 128, 0.4) 0%, transparent 16%),
        radial-gradient(circle at 58% 18%, rgba(107, 114, 128, 0.5) 0%, transparent 10%),
        radial-gradient(circle at 35% 78%, rgba(107, 114, 128, 0.45) 0%, transparent 15%);
}

/* ============ 2. REALISTIC MERCURY ============ */
.planet-mercury {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 30% 30%, #B8B8B8 0%, #8B8B8B 30%, #6B6B6B 60%, #4A4A4A 100%);
    box-shadow:
        0 0 12px rgba(139, 139, 139, 0.6),
        inset -3px -3px 8px rgba(40, 40, 40, 0.6),
        inset 2px 2px 4px rgba(180, 180, 180, 0.6);
    animation: orbitMercury 10s linear infinite;
}

.mercury-surface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 22% 28%, rgba(60, 60, 60, 0.8) 0%, transparent 18%),
        radial-gradient(circle at 52% 45%, rgba(60, 60, 60, 0.6) 0%, transparent 14%),
        radial-gradient(circle at 72% 22%, rgba(60, 60, 60, 0.7) 0%, transparent 12%),
        radial-gradient(circle at 38% 68%, rgba(60, 60, 60, 0.5) 0%, transparent 16%),
        radial-gradient(circle at 82% 62%, rgba(60, 60, 60, 0.6) 0%, transparent 10%);
}

/* ============ 3. REALISTIC VENUS ============ */
.planet-venus {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 35% 35%, #FEF9C3 0%, #FDE68A 25%, #FBBF24 50%, #D97706 80%, #B45309 100%);
    box-shadow:
        0 0 25px rgba(251, 191, 36, 0.7),
        0 0 50px rgba(251, 191, 36, 0.4),
        inset -5px -5px 12px rgba(180, 83, 9, 0.5),
        inset 3px 3px 6px rgba(254, 249, 195, 0.8);
    animation: orbitVenus 12s linear infinite;
}

.venus-atmosphere {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 90% 50% at 50% 30%, rgba(254, 243, 199, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 70% 40% at 50% 60%, rgba(253, 224, 71, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 80% 45% at 40% 45%, rgba(251, 191, 36, 0.3) 0%, transparent 50%);
    animation: venusAtmosphere 20s linear infinite;
    pointer-events: none;
}

@keyframes venusAtmosphere {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitVenus {
    from {
        transform: rotate(60deg) translateX(80px) rotate(-60deg);
    }

    to {
        transform: rotate(420deg) translateX(80px) rotate(-420deg);
    }
}

/* ============ 4. REALISTIC EARTH (UPDATED - BLUE OCEANS) ============ */
.planet-earth {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #3B82F6 0%, #2563EB 30%, #1E40AF 60%, #1E3A8A 100%);
    box-shadow:
        inset -6px -6px 15px rgba(30, 58, 138, 0.7),
        inset 4px 4px 10px rgba(147, 197, 253, 0.5),
        0 0 20px 5px rgba(59, 130, 246, 0.6),
        0 0 40px 10px rgba(37, 99, 235, 0.4),
        0 0 60px 15px rgba(30, 64, 175, 0.25);
    animation: orbitEarth 16s linear infinite;
    overflow: visible;
}

.earth-continents {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 22% 28% at 18% 28%, #10B981 0%, #059669 45%, transparent 70%),
        radial-gradient(ellipse 18% 24% at 22% 58%, #34D399 0%, #10B981 40%, transparent 65%),
        radial-gradient(ellipse 12% 14% at 48% 22%, #10B981 0%, #059669 50%, transparent 70%),
        radial-gradient(ellipse 18% 32% at 52% 48%, #F59E0B 0%, #D97706 30%, #10B981 50%, transparent 75%),
        radial-gradient(ellipse 32% 28% at 72% 28%, #10B981 0%, #059669 35%, transparent 65%),
        radial-gradient(ellipse 14% 12% at 78% 62%, #F59E0B 0%, #D97706 40%, transparent 70%),
        radial-gradient(ellipse 70% 18% at 50% 92%, #F1F5F9 0%, #E2E8F0 55%, transparent 85%),
        radial-gradient(ellipse 55% 14% at 50% 8%, #F8FAFC 0%, #E2E8F0 65%, transparent 90%);
    animation: earthRotate 15s linear infinite;
}

.earth-clouds {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 40% 22% at 18% 26%, rgba(255, 255, 255, 0.75) 0%, transparent 60%),
        radial-gradient(ellipse 32% 18% at 60% 20%, rgba(255, 255, 255, 0.65) 0%, transparent 55%),
        radial-gradient(ellipse 38% 26% at 75% 44%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
        radial-gradient(ellipse 48% 22% at 40% 70%, rgba(255, 255, 255, 0.7) 0%, transparent 60%),
        radial-gradient(ellipse 28% 18% at 85% 74%, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 30% 15% at 10% 58%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
        radial-gradient(ellipse 25% 15% at 28% 48%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
    animation: cloudRotate 30s linear infinite reverse;
    pointer-events: none;
}

.earth-atmosphere {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 55%, rgba(96, 165, 250, 0.15) 75%, rgba(59, 130, 246, 0.35) 92%, transparent 100%);
    pointer-events: none;
}

.earth-moon-orbit {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moonOrbitContainer 5s linear infinite;
}

.earth-moon {
    position: absolute;
    width: 9px;
    height: 9px;
    background: radial-gradient(circle at 35% 35%, #FAFAFA 0%, #E0E0E0 35%, #BDBDBD 65%, #9E9E9E 100%);
    border-radius: 50%;
    box-shadow:
        inset -2px -2px 4px rgba(0, 0, 0, 0.35),
        0 0 10px rgba(255, 255, 255, 0.95),
        0 0 20px rgba(255, 255, 255, 0.6);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.earth-moon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 28%, rgba(100, 100, 100, 0.5) 0%, transparent 28%),
        radial-gradient(circle at 62% 48%, rgba(100, 100, 100, 0.4) 0%, transparent 22%),
        radial-gradient(circle at 42% 72%, rgba(100, 100, 100, 0.45) 0%, transparent 25%);
}

@keyframes earthRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes cloudRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes moonOrbitContainer {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbitEarth {
    from {
        transform: rotate(90deg) translateX(100px) rotate(-90deg);
    }

    to {
        transform: rotate(450deg) translateX(100px) rotate(-450deg);
    }
}

/* ============ 5. REALISTIC MARS ============ */
.planet-mars {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 35% 35%, #FCA5A5 0%, #EF4444 30%, #DC2626 60%, #991B1B 90%, #7F1D1D 100%);
    box-shadow:
        0 0 18px rgba(239, 68, 68, 0.7),
        0 0 35px rgba(239, 68, 68, 0.4),
        inset -5px -5px 12px rgba(127, 29, 29, 0.6),
        inset 3px 3px 6px rgba(252, 165, 165, 0.5);
    animation: orbitMars 18s linear infinite;
}

.mars-surface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 35% 25% at 28% 32%, rgba(154, 52, 18, 0.6) 0%, transparent 55%),
        radial-gradient(ellipse 30% 20% at 62% 42%, rgba(154, 52, 18, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 25% 30% at 42% 62%, rgba(180, 83, 9, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 40% 25% at 72% 28%, rgba(154, 52, 18, 0.4) 0%, transparent 55%);
}

.mars-polar-cap {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 28%;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
}

/* ============ 6. REALISTIC JUPITER ============ */
.planet-jupiter {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle at 35% 35%, #FEF3C7 0%, #FDE68A 20%, #FBBF24 45%, #D97706 75%, #92400E 100%);
    box-shadow:
        0 0 25px rgba(245, 158, 11, 0.6),
        0 0 50px rgba(245, 158, 11, 0.35),
        inset -8px -8px 20px rgba(120, 53, 15, 0.5),
        inset 4px 4px 10px rgba(254, 243, 199, 0.6);
    animation: orbitJupiter 22s linear infinite;
    overflow: hidden;
}

.jupiter-bands {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 50%, transparent 100%),
        repeating-linear-gradient(180deg,
            rgba(254, 243, 199, 0.4) 0px,
            rgba(254, 243, 199, 0.4) 3px,
            rgba(253, 224, 71, 0.5) 3px,
            rgba(253, 224, 71, 0.5) 5px,
            rgba(217, 119, 6, 0.4) 5px,
            rgba(217, 119, 6, 0.4) 8px,
            rgba(251, 191, 36, 0.45) 8px,
            rgba(251, 191, 36, 0.45) 11px,
            rgba(180, 83, 9, 0.5) 11px,
            rgba(180, 83, 9, 0.5) 14px);
    animation: jupiterBands 80s linear infinite;
}

.jupiter-spot {
    position: absolute;
    width: 10px;
    height: 7px;
    background: radial-gradient(ellipse, #DC2626 0%, #B91C1C 40%, #991B1B 70%, transparent 100%);
    border-radius: 50%;
    top: 58%;
    left: 22%;
    box-shadow: 0 0 4px rgba(220, 38, 38, 0.6);
}

@keyframes jupiterBands {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 150px 0;
    }
}

/* ============ 7. REALISTIC SATURN ============ */
.planet-saturn {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 35% 35%, #FEF3C7 0%, #FDE68A 25%, #D97706 60%, #92400E 90%, #78350F 100%);
    box-shadow:
        0 0 22px rgba(217, 119, 6, 0.6),
        inset -6px -6px 15px rgba(120, 53, 15, 0.5),
        inset 3px 3px 8px rgba(254, 243, 199, 0.6);
    animation: orbitSaturn 26s linear infinite;
    overflow: visible;
}

.saturn-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(180deg,
            rgba(254, 243, 199, 0.5) 0%,
            rgba(253, 224, 71, 0.4) 20%,
            rgba(217, 119, 6, 0.35) 40%,
            rgba(251, 191, 36, 0.45) 60%,
            rgba(217, 119, 6, 0.35) 80%,
            rgba(146, 64, 14, 0.5) 100%);
}

.saturn-rings {
    position: absolute;
    width: 70px;
    height: 22px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(72deg);
    pointer-events: none;
}

.saturn-rings .ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
    left: 50%;
    top: 50%;
}

.saturn-rings .ring-1 {
    width: 58px;
    height: 58px;
    border-width: 4px;
    border-color: rgba(253, 224, 71, 0.6);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(251, 191, 36, 0.4);
}

.saturn-rings .ring-2 {
    width: 66px;
    height: 66px;
    border-width: 3px;
    border-color: rgba(251, 191, 36, 0.5);
    transform: translate(-50%, -50%);
}

.saturn-rings .ring-3 {
    width: 72px;
    height: 72px;
    border-width: 2px;
    border-color: rgba(217, 119, 6, 0.4);
    transform: translate(-50%, -50%);
}

/* ============ 8. REALISTIC RAHU (Shadow Planet) ============ */
.planet-rahu {
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 40% 40%, #818CF8 0%, #6366F1 25%, #4338CA 50%, #312E81 80%, #1E1B4B 100%);
    box-shadow:
        0 0 30px rgba(99, 102, 241, 0.8),
        0 0 60px rgba(67, 56, 202, 0.5),
        inset -5px -5px 14px rgba(30, 27, 75, 0.7),
        inset 3px 3px 8px rgba(165, 180, 252, 0.5);
    animation: orbitRahu 30s linear infinite;
    overflow: visible;
}

.rahu-core {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 45% 35% at 30% 28%, rgba(165, 180, 252, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 35% 45% at 62% 52%, rgba(129, 140, 248, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 42% 72%, rgba(165, 180, 252, 0.45) 0%, transparent 55%);
}

.rahu-aura {
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(67, 56, 202, 0.25) 45%, transparent 75%);
    animation: rahuPulse 3.5s ease-in-out infinite;
    pointer-events: none;
}

.rahu-glow {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 60%);
    animation: rahuGlow 5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes rahuPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.45;
    }
}

@keyframes rahuGlow {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.9;
    }
}

/* ============ 9. REALISTIC KETU (Comet-like) ============ */
.planet-ketu {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 40% 40%, #FDBA74 0%, #FB923C 25%, #EA580C 50%, #9A3412 80%, #7C2D12 100%);
    box-shadow:
        0 0 28px rgba(234, 88, 12, 0.75),
        0 0 55px rgba(194, 65, 12, 0.5),
        inset -5px -5px 14px rgba(124, 45, 18, 0.6),
        inset 3px 3px 8px rgba(253, 186, 116, 0.5);
    animation: orbitKetu 34s linear infinite;
    overflow: visible;
}

.ketu-core {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 40% 30% at 32% 32%, rgba(253, 186, 116, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 30% 40% at 58% 55%, rgba(251, 146, 60, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 35% 25% at 38% 72%, rgba(253, 186, 116, 0.45) 0%, transparent 55%);
}

.ketu-tail {
    position: absolute;
    width: 45px;
    height: 10px;
    top: 50%;
    right: -38px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.7), rgba(251, 146, 60, 0.5), rgba(253, 186, 116, 0.3), transparent);
    border-radius: 0 15px 15px 0;
    animation: ketuTail 2.5s ease-in-out infinite;
    pointer-events: none;
}

.ketu-particles {
    position: absolute;
    width: 60px;
    height: 20px;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 20% 30%, rgba(251, 146, 60, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 40% 70%, rgba(251, 146, 60, 0.4) 0%, transparent 35%),
        radial-gradient(circle at 60% 40%, rgba(253, 186, 116, 0.35) 0%, transparent 30%),
        radial-gradient(circle at 80% 60%, rgba(253, 186, 116, 0.3) 0%, transparent 25%);
    animation: ketuParticles 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ketuTail {

    0%,
    100% {
        opacity: 0.85;
        transform: translateY(-50%) scaleX(1);
    }

    50% {
        opacity: 0.55;
        transform: translateY(-50%) scaleX(1.25);
    }
}

@keyframes ketuParticles {

    0%,
    100% {
        opacity: 0.7;
        transform: translateY(-50%) translateX(0);
    }

    50% {
        opacity: 0.4;
        transform: translateY(-50%) translateX(8px);
    }
}

/* ============ PLANET ORBIT ANIMATIONS ============ */
@keyframes orbitMoon {
    from {
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(60px) rotate(-360deg);
    }
}

@keyframes orbitMercury {
    from {
        transform: rotate(45deg) translateX(80px) rotate(-45deg);
    }

    to {
        transform: rotate(405deg) translateX(80px) rotate(-405deg);
    }
}

@keyframes orbitMars {
    from {
        transform: rotate(135deg) translateX(120px) rotate(-135deg);
    }

    to {
        transform: rotate(495deg) translateX(120px) rotate(-495deg);
    }
}

@keyframes orbitJupiter {
    from {
        transform: rotate(180deg) translateX(140px) rotate(-180deg);
    }

    to {
        transform: rotate(540deg) translateX(140px) rotate(-540deg);
    }
}

@keyframes orbitSaturn {
    from {
        transform: rotate(225deg) translateX(160px) rotate(-225deg);
    }

    to {
        transform: rotate(585deg) translateX(160px) rotate(-585deg);
    }
}

@keyframes orbitRahu {
    from {
        transform: rotate(270deg) translateX(180px) rotate(-270deg);
    }

    to {
        transform: rotate(630deg) translateX(180px) rotate(-630deg);
    }
}

@keyframes orbitKetu {
    from {
        transform: rotate(315deg) translateX(200px) rotate(-315deg);
    }

    to {
        transform: rotate(675deg) translateX(200px) rotate(-675deg);
    }
}

/* ============ PLANET LABELS ============ */
.planet-label {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 600;
    color: #78350F;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 10px;
    border-radius: 8px;
    top: 100%;
    margin-top: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 200;
}

.planet:hover .planet-label {
    opacity: 1;
}

/* ============ FLOATING CARDS - POSITIONED RELATIVE TO hero-visual ============ */
.floating-card {
    position: absolute;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 25;
}

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

.floating-card-bottom-left {
    bottom: 0;
    left: 0;
}

.floating-card-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 0.75rem;
    animation-delay: -2s;
}

.floating-card-left {
    top: 35%;
    left: 0;
    padding: 0.75rem;
    animation-delay: -4s;
}

.card-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    position: relative;
    flex-shrink: 0;
}

.card-icon-soulmate {
    background: linear-gradient(to bottom right, #EC4899, #DB2777, #BE185D);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.card-icon-soulmate::before {
    content: '❤';
    font-size: 1.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    10%,
    30% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    20%,
    40% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.card-icon-childbirth {
    background: linear-gradient(to bottom right, #8B5CF6, #7C3AED, #6D28D9);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.card-icon-childbirth::before {
    content: '👶';
    font-size: 1.3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-title {
    font-weight: 600;
    color: #1F2937;
    font-size: 0.875rem;
    white-space: nowrap;
}

.card-subtitle {
    font-size: 0.75rem;
    color: #6B7280;
    white-space: nowrap;
}

.mini-card-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mini-card-emoji {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    display: block;
}

.mini-card-text {
    font-size: 0.75rem;
    color: #4B5563;
    font-weight: 500;
    white-space: nowrap;
}

.floating-card-right .mini-card-emoji {
    animation: financePulse 2s ease-in-out infinite;
}

@keyframes financePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.floating-card-left .mini-card-emoji {
    animation: careerRotate 3s ease-in-out infinite;
}

@keyframes careerRotate {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(10deg) scale(1.05);
    }
}

@media (max-width: 1024px) {
    .hero-visual {
        padding: 3rem;
    }
}

/* ============ SCROLL INDICATOR ============ */
.scroll-indicator-wrapper {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.scroll-indicator {
    animation: bounce 2.5s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

    60% {
        transform: translateX(-50%) translateY(-8px);
    }
}

.scroll-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.scroll-text {
    font-size: 0.875rem;
    color: #6B7280;
    font-weight: 500;
}

.scroll-mouse {
    width: 1.5rem;
    height: 2.5rem;
    border: 2px solid #FB923C;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
}

.scroll-dot {
    width: 0.375rem;
    height: 0.75rem;
    background: linear-gradient(to bottom, #F97316, #F59E0B);
    border-radius: 9999px;
    animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {

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

    50% {
        opacity: 0.5;
        transform: translateY(4px);
    }
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* ============ TABLET LANDSCAPE (1024px and below) ============ */
@media (max-width: 1024px) {
    .hero-gradient {
        overflow: visible !important;
    }

    .hero-container {
        padding: 6rem 1.5rem;
    }

    .hero-grid {
        gap: 3rem;
        grid-template-columns: 1fr;
    }

    /* Show visual section but optimize for mobile */
    .hero-visual {
        display: flex !important;
        min-height: 400px;
        padding: 2rem;
        order: 2;
        overflow: visible !important;
    }

    .visual-container {
        width: 350px;
        height: 350px;
    }

    /* Center content on tablets */
    .hero-content {
        text-align: center;
        max-width: 100%;
        order: 1;
    }

    .hero-heading {
        font-size: 3rem;
    }

    .hero-subheading {
        font-size: 1.125rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .trust-indicators {
        justify-content: center;
    }

    /* Scale down planets and orbits for tablet */
    .orbit-1 {
        width: 100px;
        height: 100px;
    }

    .orbit-2 {
        width: 130px;
        height: 130px;
    }

    .orbit-3 {
        width: 160px;
        height: 160px;
    }

    .orbit-4 {
        width: 190px;
        height: 190px;
    }

    .orbit-5 {
        width: 220px;
        height: 220px;
    }

    .orbit-6 {
        width: 250px;
        height: 250px;
    }

    .orbit-7 {
        width: 280px;
        height: 280px;
    }

    .orbit-8 {
        width: 310px;
        height: 310px;
    }

    .sun-center {
        width: 60px;
        height: 60px;
    }

    .planet-moon {
        width: 16px;
        height: 16px;
    }

    .planet-mercury {
        width: 13px;
        height: 13px;
    }

    .planet-venus {
        width: 19px;
        height: 19px;
    }

    .planet-earth {
        width: 24px;
        height: 24px;
    }

    .planet-mars {
        width: 18px;
        height: 18px;
    }

    .planet-jupiter {
        width: 30px;
        height: 30px;
    }

    .planet-saturn {
        width: 26px;
        height: 26px;
    }

    .planet-rahu {
        width: 22px;
        height: 22px;
    }

    .planet-ketu {
        width: 20px;
        height: 20px;
    }

    /* Hide floating cards on tablet */
    .floating-card {
        display: none;
    }
}

/* ============ TABLET ORBIT FIX ============ */
@media (max-width: 1024px) {
    .trust-indicators {
        justify-content: center;
    }

    /* Scale down planets and orbits for tablet */
    .orbit-1 {
        width: 100px;
        height: 100px;
    }

    .orbit-2 {
        width: 130px;
        height: 130px;
    }

    .orbit-3 {
        width: 160px;
        height: 160px;
    }

    .orbit-4 {
        width: 190px;
        height: 190px;
    }

    .orbit-5 {
        width: 220px;
        height: 220px;
    }

    .orbit-6 {
        width: 250px;
        height: 250px;
    }

    .orbit-7 {
        width: 280px;
        height: 280px;
    }

    .orbit-8 {
        width: 310px;
        height: 310px;
    }

    .sun-center {
        width: 60px;
        height: 60px;
    }

    .planet-moon {
        width: 16px;
        height: 16px;
    }

    .planet-mercury {
        width: 13px;
        height: 13px;
    }

    .planet-venus {
        width: 19px;
        height: 19px;
    }

    .planet-earth {
        width: 24px;
        height: 24px;
    }

    .planet-mars {
        width: 18px;
        height: 18px;
    }

    .planet-jupiter {
        width: 30px;
        height: 30px;
    }

    .planet-saturn {
        width: 26px;
        height: 26px;
    }

    .planet-rahu {
        width: 22px;
        height: 22px;
    }


    .planet-ketu {
        width: 20px;
        height: 20px;
    }
}


/* ============ TABLET PORTRAIT (768px and below) ============ */
@media (max-width: 768px) {
    .hero-gradient {
        min-height: auto;
        padding: 3rem 0;
        overflow: visible !important;
    }

    .hero-container {
        padding: 4rem 1.25rem;
    }

    .hero-heading {
        font-size: 2.5rem;
        line-height: 1.15;
        margin-bottom: 1.25rem;
    }

    .hero-subheading {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        max-width: 100%;
        padding: 0 0.5rem;
    }

    /* Optimize badge for mobile */
    .hero-badge {
        padding: 0.5rem 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.8rem;
    }

    .badge-text {
        font-size: 0.8rem;
    }

    .badge-emoji {
        font-size: 1rem;
    }

    /* Stack buttons vertically on tablets */
    .hero-buttons {
        flex-direction: column;
        gap: 0.875rem;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }

    /* Optimize trust indicators */
    .trust-indicators {
        gap: 1.5rem;
        margin-top: 2.5rem;
        flex-direction: column;
    }

    .divider {
        display: none !important;
    }

    /* Reduce background effects for performance */
    .orb {
        filter: blur(40px);
    }

    .orb-1 {
        width: 300px;
        height: 300px;
    }

    .orb-2 {
        width: 250px;
        height: 250px;
    }

    .orb-3 {
        width: 150px;
        height: 150px;
    }

    /* Optimize galaxies for mobile */
    .galaxy-1 {
        width: 200px;
        height: 200px;
        opacity: 0.5;
    }

    .galaxy-2 {
        width: 160px;
        height: 160px;
        opacity: 0.45;
    }

    .galaxy-3,
    .galaxy-4,
    .galaxy-5 {
        display: none;
    }

    /* Reduce shooting stars */
    .shooting-star-4,
    .shooting-star-5,
    .shooting-star-6 {
        display: none;
    }

    /* Optimize scroll indicator - center on mobile */
    .scroll-indicator-wrapper.scroll-indicator {
        bottom: 1.5rem;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .scroll-text {
        font-size: 0.8rem;
    }

    .scroll-mouse {
        width: 1.25rem;
        height: 2rem;
    }

    /* Hide floating cards on mobile for cleaner display */
    .floating-card {
        display: none !important;
    }

    .floating-card-top-right {
        top: -10px;
        right: -10px;
    }

    .floating-card-bottom-left {
        bottom: -10px;
        left: -10px;
    }

    .floating-card-right {
        top: 40%;
        right: -15px;
        padding: 0.625rem;
    }

    .floating-card-left {
        top: 25%;
        left: -15px;
        padding: 0.625rem;
    }

    .card-icon {
        width: 2rem;
        height: 2rem;
    }

    .card-icon-soulmate::before,
    .card-icon-childbirth::before {
        font-size: 1.1rem;
    }

    .card-title {
        font-size: 0.8125rem;
    }

    .card-subtitle {
        font-size: 0.7rem;
    }

    .mini-card-emoji {
        font-size: 1.25rem;
    }

    .mini-card-text {
        font-size: 0.7rem;
    }

    /* Further scale down solar system for mobile */
    .hero-visual {
        min-height: 400px;
        padding: 1.5rem;
        overflow: visible !important;
    }

    .visual-container {
        width: 340px;
        height: 340px;
    }

    .orbit-1 {
        width: 60px;
        height: 60px;
    }

    .orbit-2 {
        width: 85px;
        height: 85px;
    }

    .orbit-3 {
        width: 110px;
        height: 110px;
    }

    .orbit-4 {
        width: 135px;
        height: 135px;
    }

    .orbit-5 {
        width: 165px;
        height: 165px;
    }

    .orbit-6 {
        width: 195px;
        height: 195px;
    }

    .orbit-7 {
        width: 225px;
        height: 225px;
    }

    .orbit-8 {
        width: 260px;
        height: 260px;
    }

    .sun-center {
        width: 50px;
        height: 50px;
    }

    /* Hide sun rays/flares on mobile */
    .sun-flare,
    .sun-corona {
        display: none !important;
    }

    .planet-moon {
        width: 14px;
        height: 14px;
    }

    .planet-mercury {
        width: 11px;
        height: 11px;
    }

    .planet-venus {
        width: 16px;
        height: 16px;
    }

    .planet-earth {
        width: 20px;
        height: 20px;
    }

    .planet-mars {
        width: 15px;
        height: 15px;
    }

    .planet-jupiter {
        width: 25px;
        height: 25px;
    }

    .planet-saturn {
        width: 22px;
        height: 22px;
    }

    .planet-rahu {
        width: 18px;
        height: 18px;
    }

    .planet-ketu {
        width: 17px;
        height: 17px;
    }

    /* Mobile orbit animations with smaller distances */
    .planet-moon {
        animation: orbitMoonMobile 8s linear infinite !important;
    }

    .planet-mercury {
        animation: orbitMercuryMobile 10s linear infinite !important;
    }

    .planet-venus {
        animation: orbitVenusMobile 12s linear infinite !important;
    }

    .planet-earth {
        animation: orbitEarthMobile 16s linear infinite !important;
    }

    .planet-mars {
        animation: orbitMarsMobile 18s linear infinite !important;
    }

    .planet-jupiter {
        animation: orbitJupiterMobile 22s linear infinite !important;
    }

    .planet-saturn {
        animation: orbitSaturnMobile 26s linear infinite !important;
    }

    .planet-rahu {
        animation: orbitRahuMobile 30s linear infinite !important;
    }

    .planet-ketu {
        animation: orbitKetuMobile 34s linear infinite !important;
    }
}

/* Mobile Planet Orbit Keyframes */
@keyframes orbitMoonMobile {
    from {
        transform: rotate(0deg) translateX(30px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(30px) rotate(-360deg);
    }
}

@keyframes orbitMercuryMobile {
    from {
        transform: rotate(45deg) translateX(42px) rotate(-45deg);
    }

    to {
        transform: rotate(405deg) translateX(42px) rotate(-405deg);
    }
}

@keyframes orbitVenusMobile {
    from {
        transform: rotate(60deg) translateX(55px) rotate(-60deg);
    }

    to {
        transform: rotate(420deg) translateX(55px) rotate(-420deg);
    }
}

@keyframes orbitEarthMobile {
    from {
        transform: rotate(90deg) translateX(68px) rotate(-90deg);
    }

    to {
        transform: rotate(450deg) translateX(68px) rotate(-450deg);
    }
}

@keyframes orbitMarsMobile {
    from {
        transform: rotate(135deg) translateX(82px) rotate(-135deg);
    }

    to {
        transform: rotate(495deg) translateX(82px) rotate(-495deg);
    }
}

@keyframes orbitJupiterMobile {
    from {
        transform: rotate(180deg) translateX(98px) rotate(-180deg);
    }

    to {
        transform: rotate(540deg) translateX(98px) rotate(-540deg);
    }
}

@keyframes orbitSaturnMobile {
    from {
        transform: rotate(225deg) translateX(112px) rotate(-225deg);
    }

    to {
        transform: rotate(585deg) translateX(112px) rotate(-585deg);
    }
}

@keyframes orbitRahuMobile {
    from {
        transform: rotate(270deg) translateX(125px) rotate(-270deg);
    }

    to {
        transform: rotate(630deg) translateX(125px) rotate(-630deg);
    }
}

@keyframes orbitKetuMobile {
    from {
        transform: rotate(315deg) translateX(130px) rotate(-315deg);
    }

    to {
        transform: rotate(675deg) translateX(130px) rotate(-675deg);
    }
}

/* ============ MOBILE LANDSCAPE (640px and below) ============ */
@media (max-width: 640px) {
    .hero-container {
        padding: 3rem 1rem;
    }

    .hero-heading {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero-heading-gradient {
        display: inline;
        margin-top: 0;
    }

    .hero-subheading {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-bottom: 1.75rem;
        padding: 0;
    }

    .hero-badge {
        padding: 0.5rem 0.875rem;
        margin-bottom: 1.25rem;
    }

    .badge-text {
        font-size: 0.75rem;
    }

    .badge-dot {
        width: 0.375rem;
        height: 0.375rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }

    .btn-arrow {
        width: 1rem;
        height: 1rem;
    }

    .play-icon-wrapper {
        width: 2rem;
        height: 2rem;
    }

    .play-icon {
        width: 1rem;
        height: 1rem;
    }

    /* Optimize avatars */
    .avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
        margin-left: -0.375rem;
    }

    .rating-text,
    .accuracy-badge {
        font-size: 0.8125rem;
    }

    .check-icon {
        width: 1rem;
        height: 1rem;
    }

    .trust-indicators {
        gap: 1.25rem;
        margin-top: 2rem;
    }

    /* Further reduce background effects */
    .sun-glow {
        width: 300px;
        height: 300px;
    }

    .bg-orbit-1 {
        width: 500px;
        height: 500px;
    }

    .bg-orbit-2 {
        width: 350px;
        height: 350px;
    }

    .geo-shape-2,
    .geo-shape-3 {
        display: none;
    }
}

/* ============ MOBILE PORTRAIT (480px and below) ============ */
@media (max-width: 480px) {
    .hero-gradient {
        padding: 2rem 0;
    }

    .hero-container {
        padding: 2.5rem 0.875rem;
    }

    .hero-heading {
        font-size: 1.75rem;
        line-height: 1.25;
    }

    .hero-subheading {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .hero-badge {
        padding: 0.4rem 0.75rem;
        margin-bottom: 1rem;
        gap: 0.375rem;
    }

    .badge-text {
        font-size: 0.7rem;
    }

    .badge-emoji {
        font-size: 0.875rem;
    }

    .hero-buttons {
        gap: 0.75rem;
        max-width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.6875rem 1.25rem;
        font-size: 0.875rem;
        gap: 0.5rem;
    }

    .btn-arrow {
        width: 0.875rem;
        height: 0.875rem;
    }

    .play-icon-wrapper {
        width: 1.75rem;
        height: 1.75rem;
    }

    .play-icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    /* Compact trust indicators */
    .trust-indicators {
        gap: 1rem;
        margin-top: 1.75rem;
    }

    .avatar {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.7rem;
        border-width: 1.5px;
    }

    .rating-text,
    .accuracy-badge {
        font-size: 0.75rem;
    }

    .check-icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    /* Minimize background effects for performance */
    .orb-1 {
        width: 200px;
        height: 200px;
        filter: blur(30px);
    }

    .orb-2 {
        width: 150px;
        height: 150px;
        filter: blur(30px);
    }

    .orb-3 {
        display: none;
    }

    .galaxy-1 {
        width: 150px;
        height: 150px;
        opacity: 0.4;
    }

    .galaxy-2 {
        width: 120px;
        height: 120px;
        opacity: 0.35;
    }

    .shooting-star-2,
    .shooting-star-3 {
        display: none;
    }

    .bg-orbit-1,
    .bg-orbit-2 {
        display: none;
    }

    .geo-shape-1 {
        width: 4rem;
        height: 4rem;
    }

    .sun-glow {
        width: 250px;
        height: 250px;
    }

    /* Optimize scroll indicator */
    .scroll-indicator-wrapper {
        bottom: 1rem;
    }

    .scroll-text {
        font-size: 0.75rem;
    }

    .scroll-mouse {
        width: 1rem;
        height: 1.75rem;
        border-width: 1.5px;
    }

    .scroll-dot {
        width: 0.3rem;
        height: 0.6rem;
    }

    /* Compact solar system for small mobile */
    .hero-visual {
        min-height: 300px;
        padding: 1rem;
        overflow: visible !important;
    }

    .visual-container {
        width: 240px;
        height: 240px;
    }

    .orbit-1 {
        width: 65px;
        height: 65px;
    }

    .orbit-2 {
        width: 85px;
        height: 85px;
    }

    .orbit-3 {
        width: 105px;
        height: 105px;
    }

    .orbit-4 {
        width: 125px;
        height: 125px;
    }

    .orbit-5 {
        width: 145px;
        height: 145px;
    }

    .orbit-6 {
        width: 165px;
        height: 165px;
    }

    .orbit-7 {
        width: 185px;
        height: 185px;
    }

    .orbit-8 {
        width: 205px;
        height: 205px;
    }

    .sun-center {
        width: 40px;
        height: 40px;
    }

    .planet-moon {
        width: 12px;
        height: 12px;
    }

    .planet-mercury {
        width: 10px;
        height: 10px;
    }

    .planet-venus {
        width: 14px;
        height: 14px;
    }

    .planet-earth {
        width: 17px;
        height: 17px;
    }

    .planet-mars {
        width: 13px;
        height: 13px;
    }

    .planet-jupiter {
        width: 22px;
        height: 22px;
    }

    .planet-saturn {
        width: 19px;
        height: 19px;
    }

    .planet-rahu {
        width: 16px;
        height: 16px;
    }

    .planet-ketu {
        width: 15px;
        height: 15px;
    }

    /* Smaller floating cards for mobile */
    .floating-card {
        padding: 0.625rem;
        border-radius: 0.625rem;
    }

    .card-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .card-icon-soulmate::before,
    .card-icon-childbirth::before {
        font-size: 1rem;
    }

    .card-title {
        font-size: 0.75rem;
    }

    .card-subtitle {
        font-size: 0.65rem;
    }

    .mini-card-emoji {
        font-size: 1.125rem;
    }

    .mini-card-text {
        font-size: 0.65rem;
    }
}

/* ============ SMALL MOBILE (360px and below) ============ */
@media (max-width: 360px) {
    .hero-container {
        padding: 2rem 0.75rem;
    }

    .hero-heading {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .hero-subheading {
        font-size: 0.8125rem;
        margin-bottom: 1.25rem;
    }

    .hero-badge {
        padding: 0.375rem 0.625rem;
        margin-bottom: 0.875rem;
    }

    .badge-text {
        font-size: 0.65rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .trust-indicators {
        margin-top: 1.5rem;
        gap: 0.875rem;
    }

    .avatar {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.65rem;
    }

    .rating-text,
    .accuracy-badge {
        font-size: 0.7rem;
    }

    /* Minimal background effects */
    .orb-1 {
        width: 150px;
        height: 150px;
    }

    .orb-2 {
        width: 100px;
        height: 100px;
    }

    .galaxy-1,
    .galaxy-2 {
        display: none;
    }

    .shooting-star-1 {
        display: none;
    }

    /* Extra small solar system */
    .visual-container {
        width: 200px;
        height: 200px;
    }

    .orbit-1 {
        width: 55px;
        height: 55px;
    }

    .orbit-2 {
        width: 70px;
        height: 70px;
    }

    .orbit-3 {
        width: 85px;
        height: 85px;
    }

    .orbit-4 {
        width: 100px;
        height: 100px;
    }

    .orbit-5 {
        width: 115px;
        height: 115px;
    }

    .orbit-6 {
        width: 130px;
        height: 130px;
    }

    .orbit-7 {
        width: 145px;
        height: 145px;
    }

    .orbit-8 {
        width: 160px;
        height: 160px;
    }

    .sun-center {
        width: 35px;
        height: 35px;
    }

    .planet-moon {
        width: 10px;
        height: 10px;
    }

    .planet-mercury {
        width: 9px;
        height: 9px;
    }

    .planet-venus {
        width: 12px;
        height: 12px;
    }

    .planet-earth {
        width: 15px;
        height: 15px;
    }

    .planet-mars {
        width: 11px;
        height: 11px;
    }

    .planet-jupiter {
        width: 19px;
        height: 19px;
    }

    .planet-saturn {
        width: 17px;
        height: 17px;
    }

    .planet-rahu {
        width: 14px;
        height: 14px;
    }

    .planet-ketu {
        width: 13px;
        height: 13px;
    }

    /* Extra small floating cards */
    .floating-card {
        padding: 0.5rem;
    }

    .card-content {
        gap: 0.5rem;
    }

    .card-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .card-icon-soulmate::before,
    .card-icon-childbirth::before {
        font-size: 0.875rem;
    }

    .card-title {
        font-size: 0.7rem;
    }

    .card-subtitle {
        font-size: 0.6rem;
    }

    .mini-card-emoji {
        font-size: 1rem;
    }

    .mini-card-text {
        font-size: 0.6rem;
    }
}

/* ============ PERFORMANCE OPTIMIZATIONS FOR MOBILE ============ */
@media (max-width: 768px) {

    /* Reduce animation complexity on mobile */
    .mesh-overlay {
        animation: none;
        transform: scale(1);
    }

    /* Simplify floating animations */
    @keyframes floatOrb {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }

        50% {
            transform: translate(10px, -10px) scale(1);
        }
    }

    /* Reduce galaxy animations */
    .galaxy-container svg {
        animation-duration: 180s !important;
    }

    /* Disable some complex animations on very small screens */
    @media (max-width: 480px) {
        .orb {
            animation: none;
        }

        .galaxy-1,
        .galaxy-2 {
            animation: none;
        }

        .geo-shape {
            animation: none;
        }

        .sun-glow {
            animation: none;
        }
    }
}

/* ============ LANDSCAPE ORIENTATION OPTIMIZATION ============ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-gradient {
        min-height: auto;
    }

    .hero-container {
        padding: 2rem 1rem;
    }

    .hero-heading {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .hero-subheading {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .hero-badge {
        margin-bottom: 0.75rem;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 0.75rem;
    }

    .trust-indicators {
        margin-top: 1.5rem;
        flex-direction: row;
        gap: 1rem;
    }

    .divider {
        display: block !important;
    }

    .scroll-indicator-wrapper {
        display: none;
    }
}

/* ============ TOUCH DEVICE OPTIMIZATIONS ============ */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets */
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
    }

    width: 145px;
    height: 145px;
}

/* ============ SOLAR SYSTEM MOBILE SIZES ============ */
@media (max-width: 768px) {
    .orbit-7 {
        width: 145px;
        height: 145px;
    }

    .orbit-8 {
        width: 160px;
        height: 160px;
    }

    .sun-center {
        width: 35px;
        height: 35px;
    }

    .planet-moon {
        width: 10px;
        height: 10px;
    }

    .planet-mercury {
        width: 9px;
        height: 9px;
    }

    .planet-venus {
        width: 12px;
        height: 12px;
    }

    .planet-earth {
        width: 15px;
        height: 15px;
    }

    .planet-mars {
        width: 11px;
        height: 11px;
    }

    .planet-jupiter {
        width: 19px;
        height: 19px;
    }

    .planet-saturn {
        width: 17px;
        height: 17px;
    }

    .planet-rahu {
        width: 14px;
        height: 14px;
    }

    .planet-ketu {
        width: 13px;
        height: 13px;
    }

    /* Extra small floating cards */
    .floating-card {
        padding: 0.5rem;
    }

    .card-content {
        gap: 0.5rem;
    }

    .card-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .card-icon-soulmate::before,
    .card-icon-childbirth::before {
        font-size: 0.875rem;
    }

    .card-title {
        font-size: 0.7rem;
    }

    .card-subtitle {
        font-size: 0.6rem;
    }

    .mini-card-emoji {
        font-size: 1rem;
    }

    .mini-card-text {
        font-size: 0.6rem;
    }
}

/* ============ PERFORMANCE OPTIMIZATIONS FOR MOBILE ============ */
@media (max-width: 768px) {

    /* Reduce animation complexity on mobile */
    .mesh-overlay {
        animation: none;
        transform: scale(1);
    }

    /* Simplify floating animations */
    @keyframes floatOrb {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }

        50% {
            transform: translate(10px, -10px) scale(1);
        }
    }

    /* Reduce galaxy animations */
    .galaxy-container svg {
        animation-duration: 180s !important;
    }

    /* Disable some complex animations on very small screens */
    @media (max-width: 480px) {
        .orb {
            animation: none;
        }

        .galaxy-1,
        .galaxy-2 {
            animation: none;
        }

        .geo-shape {
            animation: none;
        }

        .sun-glow {
            animation: none;
        }
    }
}

/* ============ LANDSCAPE ORIENTATION OPTIMIZATION ============ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-gradient {
        min-height: auto;
    }

    .hero-container {
        padding: 2rem 1rem;
    }

    .hero-heading {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .hero-subheading {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .hero-badge {
        margin-bottom: 0.75rem;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 0.75rem;
    }

    .trust-indicators {
        margin-top: 1.5rem;
        flex-direction: row;
        gap: 1rem;
    }

    .divider {
        display: block !important;
    }

    .scroll-indicator-wrapper {
        display: none;
    }
}

/* ============ TOUCH DEVICE OPTIMIZATIONS ============ */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets */
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
    }
}

/* ============================================
   ANDROID/MOBILE GPU ACCELERATION FIX
   Forces hardware rendering to fix lag
   ============================================ */

.planet,
.orbit,
.star,
.shooting-star,
.orb,
.galaxy-container,
.sun-center,
.cloud,
.aurora-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* Smoother animations for Android */
.planet,
.orbit {
    will-change: transform;
}

/* =====================================================
   FINAL ANDROID SMOOTHNESS FIX
   (Keeps ORIGINAL animation speeds)
   ===================================================== */

@media (max-width: 768px),
(prefers-reduced-motion: reduce) {

    /* 🚫 IMPORTANT: Do NOT override animation-duration */

    /* Promote heavy animated layers to GPU */
    .orb,
    .aurora,
    .mesh-overlay,
    .sun-center,
    .sun-glow,
    .galaxy-container,
    .galaxy-container svg,
    .bg-orbit,
    .orbit,
    .planet,
    .star,
    .glow-particle,
    .constellation-line {
        will-change: transform, opacity;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Reduce GPU-expensive blur slightly (keeps same look) */
    .orb {
        filter: blur(45px);
        /* was 60px */
    }

    .aurora {
        filter: blur(30px);
        /* was 40px */
    }

    /* Reduce repaint cost of shadows (no visual loss) */
    .sun-center {
        contain: paint;
    }

    /* Prevent layout + paint thrashing */
    .astro-hero,
    .hero-gradient,
    .hero-container {
        contain: layout paint style;
    }

}

/* Global GPU stability (safe for all devices) */
.orb,
.aurora,
.sun-center,
.galaxy-container svg,
.bg-orbit,
.orbit {
    transform: translateZ(0);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-13b5084 *//* ============================================
   SERVICES SECTION CSS - PREMIUM MODERN DESIGN
   ASTRODEFINED
   
   HOW TO USE:
   Copy ALL of this CSS and paste it in:
   WordPress → Appearance → Customize → Additional CSS
   (Add AFTER the hero section CSS)
   ============================================ */

/* ============ SERVICES SECTION BASE ============ */
.services-section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -20px;
    /* Increased overlap to close visible gap */
    padding-top: calc(8rem + 20px);
    /* Adjust padding to maintain spacing */
    background: linear-gradient(180deg,
            #FFE4A8 0%,
            #FFF3D1 20%,
            #FFFEF9 40%,
            #FFFFFF 60%,
            #FFFEF9 100%);
    padding-bottom: 8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    overflow: hidden;
}

/* Premium Mesh Gradient Overlay */
.services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 100% 80% at 10% 20%, rgba(251, 191, 36, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse 80% 60% at 90% 80%, rgba(249, 115, 22, 0.12) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(251, 146, 60, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* Decorative Floating Particles */
.services-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 10% 15%, rgba(249, 115, 22, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 25% 45%, rgba(251, 191, 36, 0.5), transparent),
        radial-gradient(2px 2px at 40% 25%, rgba(251, 146, 60, 0.35), transparent),
        radial-gradient(1px 1px at 55% 75%, rgba(249, 115, 22, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 70% 35%, rgba(251, 191, 36, 0.45), transparent),
        radial-gradient(2px 2px at 85% 65%, rgba(251, 146, 60, 0.3), transparent),
        radial-gradient(1px 1px at 95% 20%, rgba(249, 115, 22, 0.4), transparent);
    animation: floatParticles 20s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

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

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

/* Premium Floating Orbs */
.services-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
}

.services-bg-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 70%);
    top: -20%;
    left: -20%;
    animation: floatOrbPremium 25s ease-in-out infinite;
}

.services-bg-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 146, 60, 0.12) 0%, transparent 70%);
    bottom: -15%;
    right: -15%;
    animation: floatOrbPremium 30s ease-in-out infinite reverse;
}

.services-bg-orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.1) 0%, transparent 70%);
    top: 40%;
    left: 60%;
    animation: pulseOrbPremium 10s ease-in-out infinite;
}

@keyframes floatOrbPremium {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translate(80px, -50px) scale(1.15);
        opacity: 1;
    }

    50% {
        transform: translate(40px, -80px) scale(1.05);
        opacity: 0.9;
    }

    75% {
        transform: translate(-30px, -40px) scale(1.1);
        opacity: 1;
    }
}

@keyframes pulseOrbPremium {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.4);
    }
}

/* ============ FLOATING PARTICLES ============ */
.services-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.s-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.9) 0%, rgba(249, 115, 22, 0.5) 50%, transparent 100%);
    border-radius: 50%;
    animation: floatServiceParticle 18s ease-in-out infinite;
    transition: transform 0.4s ease;
}

.s-particle:nth-child(1) {
    left: 3%;
    top: 10%;
    animation-delay: 0s;
    animation-duration: 15s;
}

.s-particle:nth-child(2) {
    left: 12%;
    top: 40%;
    animation-delay: 1.5s;
    animation-duration: 20s;
}

.s-particle:nth-child(3) {
    left: 22%;
    top: 70%;
    animation-delay: 3s;
    animation-duration: 14s;
}

.s-particle:nth-child(4) {
    left: 35%;
    top: 20%;
    animation-delay: 0.5s;
    animation-duration: 22s;
}

.s-particle:nth-child(5) {
    left: 48%;
    top: 55%;
    animation-delay: 2.5s;
    animation-duration: 17s;
}

.s-particle:nth-child(6) {
    left: 58%;
    top: 15%;
    animation-delay: 4s;
    animation-duration: 19s;
}

.s-particle:nth-child(7) {
    left: 68%;
    top: 45%;
    animation-delay: 1s;
    animation-duration: 16s;
}

.s-particle:nth-child(8) {
    left: 78%;
    top: 75%;
    animation-delay: 3.5s;
    animation-duration: 21s;
}

.s-particle:nth-child(9) {
    left: 88%;
    top: 30%;
    animation-delay: 2s;
    animation-duration: 18s;
}

.s-particle:nth-child(10) {
    left: 95%;
    top: 60%;
    animation-delay: 4.5s;
    animation-duration: 13s;
}

.s-particle:nth-child(11) {
    left: 7%;
    top: 85%;
    animation-delay: 1.2s;
    animation-duration: 23s;
}

.s-particle:nth-child(12) {
    left: 42%;
    top: 90%;
    animation-delay: 2.8s;
    animation-duration: 15s;
}

@keyframes floatServiceParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.4;
    }

    25% {
        transform: translateY(-50px) translateX(25px) scale(1.4);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-25px) translateX(-20px) scale(0.8);
        opacity: 0.5;
    }

    75% {
        transform: translateY(-70px) translateX(15px) scale(1.2);
        opacity: 0.8;
    }
}

/* ============ MOVING CLOUDS ============ */
.services-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.cloud {
    position: absolute;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(254, 243, 199, 0.4) 100%);
    border-radius: 100px;
    filter: blur(2px);
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

/* Cloud 1 - Large */
.cloud-1 {
    width: 200px;
    height: 60px;
    top: 30px;
    left: -200px;
    animation: moveCloud 35s linear infinite;
    opacity: 0.8;
}

.cloud-1::before {
    width: 80px;
    height: 80px;
    top: -40px;
    left: 30px;
}

.cloud-1::after {
    width: 60px;
    height: 60px;
    top: -30px;
    left: 90px;
}

/* Cloud 2 - Medium */
.cloud-2 {
    width: 150px;
    height: 45px;
    top: 80px;
    left: -150px;
    animation: moveCloud 45s linear infinite;
    animation-delay: -10s;
    opacity: 0.6;
}

.cloud-2::before {
    width: 60px;
    height: 60px;
    top: -30px;
    left: 20px;
}

.cloud-2::after {
    width: 45px;
    height: 45px;
    top: -20px;
    left: 70px;
}

/* Cloud 3 - Small */
.cloud-3 {
    width: 120px;
    height: 35px;
    top: 50px;
    left: -120px;
    animation: moveCloud 55s linear infinite;
    animation-delay: -25s;
    opacity: 0.5;
}

.cloud-3::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 15px;
}

.cloud-3::after {
    width: 40px;
    height: 40px;
    top: -18px;
    left: 55px;
}

/* Cloud 4 - Large Low */
.cloud-4 {
    width: 180px;
    height: 55px;
    top: 120px;
    left: -180px;
    animation: moveCloud 40s linear infinite;
    animation-delay: -15s;
    opacity: 0.7;
}

.cloud-4::before {
    width: 70px;
    height: 70px;
    top: -35px;
    left: 25px;
}

.cloud-4::after {
    width: 55px;
    height: 55px;
    top: -25px;
    left: 85px;
}

/* Cloud 5 - Tiny */
.cloud-5 {
    width: 100px;
    height: 30px;
    top: 160px;
    left: -100px;
    animation: moveCloud 50s linear infinite;
    animation-delay: -30s;
    opacity: 0.4;
}

.cloud-5::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 12px;
}

.cloud-5::after {
    width: 35px;
    height: 35px;
    top: -15px;
    left: 45px;
}

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

    100% {
        transform: translateX(calc(100vw + 300px));
    }
}

/* ============ SHOOTING STARS ============ */
.shooting-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
}

.shooting-star {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #FFFFFF 0%, #E8E8E8 40%, #C0C0C0 100%);
    border-radius: 50%;
    box-shadow:
        0 0 6px 2px rgba(255, 255, 255, 0.9),
        0 0 12px 4px rgba(192, 192, 192, 0.6),
        0 0 20px 6px rgba(135, 206, 235, 0.4);
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(192, 192, 192, 0.7) 15%,
            rgba(135, 206, 235, 0.5) 35%,
            rgba(176, 196, 222, 0.3) 55%,
            rgba(200, 200, 200, 0.1) 80%,
            transparent 100%);
    border-radius: 2px;
}

/* Shooting Star 1 */
.shooting-star-1 {
    top: 10%;
    left: 10%;
    animation: shootingStarFall 6s ease-in infinite;
    animation-delay: 0s;
}

/* Shooting Star 2 */
.shooting-star-2 {
    top: 20%;
    left: 50%;
    animation: shootingStarFall 8s ease-in infinite;
    animation-delay: 2s;
}

/* Shooting Star 3 */
.shooting-star-3 {
    top: 35%;
    left: 30%;
    animation: shootingStarFall 7s ease-in infinite;
    animation-delay: 4s;
}

/* Shooting Star 4 */
.shooting-star-4 {
    top: 50%;
    left: 70%;
    animation: shootingStarFall 9s ease-in infinite;
    animation-delay: 1s;
}

@keyframes shootingStarFall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(215deg);
    }

    3% {
        opacity: 1;
    }

    10% {
        opacity: 1;
        transform: translate(300px, 300px) rotate(215deg);
    }

    12% {
        opacity: 0;
        transform: translate(350px, 350px) rotate(215deg);
    }

    100% {
        opacity: 0;
        transform: translate(350px, 350px) rotate(215deg);
    }
}

/* ============ CONTAINER ============ */
.services-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
}

/* ============ SECTION HEADER - PREMIUM ============ */
.services-header {
    text-align: center;
    margin-bottom: 5rem;
}

/* Animated Badge */
.services-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 243, 199, 0.8) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 9999px;
    margin-bottom: 2rem;
    box-shadow:
        0 4px 20px rgba(251, 191, 36, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.services-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shineEffect 4s ease-in-out infinite;
}

@keyframes shineEffect {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

.services-badge-icon {
    font-size: 1.25rem;
    animation: starPulse 2s ease-in-out infinite;
}

@keyframes starPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5));
    }

    50% {
        transform: scale(1.15) rotate(10deg);
        filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
    }
}

.services-badge-text {
    color: #B45309;
    font-weight: 800;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* Title with Premium Styling */
.services-title {
    font-size: 3rem;
    font-weight: 900;
    color: #1F2937;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.services-title-gradient {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 25%, #FB923C 50%, #FBBF24 75%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradientFlow 4s ease-in-out infinite;
    display: inline-block;
    position: relative;
}

.services-title-gradient::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #F97316, #FBBF24, #F97316, transparent);
    border-radius: 2px;
    opacity: 0.6;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 200% center;
    }
}

.services-subtitle {
    font-size: 1.25rem;
    color: #4B5563;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 400;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.25rem;
    }
}

/* ============ SERVICES GRID ============ */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    perspective: 1000px;
}

@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* ============ SERVICE CARD - ENHANCED GLASSMORPHISM ============ */
.service-card {
    position: relative;
    /* Enhanced Glassmorphism - More Transparent & Frosted */
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(254, 243, 199, 0.25) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2rem;
    padding: 2.5rem;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(249, 115, 22, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

/* Animated Gradient Border */
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(251, 191, 36, 0.5) 0%,
            rgba(249, 115, 22, 0.5) 25%,
            rgba(251, 146, 60, 0.5) 50%,
            rgba(251, 191, 36, 0.5) 75%,
            rgba(249, 115, 22, 0.5) 100%);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: borderRotate 6s linear infinite;
}

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

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

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

/* Top Accent Bar */
.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 3px;
    background: linear-gradient(90deg, transparent, #F97316, #FBBF24, #F97316, transparent);
    border-radius: 0 0 4px 4px;
    opacity: 0.8;
    transition: all 0.4s ease;
    transform: scaleX(0.6);
}

/* Shine Effect */
.service-card .service-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-15deg);
    animation: cardShine 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes cardShine {
    0% {
        left: -100%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    30% {
        left: 100%;
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

.service-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.65) 50%,
            rgba(254, 243, 199, 0.35) 100%);
    box-shadow:
        0 20px 50px rgba(249, 115, 22, 0.18),
        0 12px 30px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(251, 191, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: rgba(251, 191, 36, 0.5);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Featured Card - Premium Glassmorphism */
.service-card-featured {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(254, 243, 199, 0.5) 50%,
            rgba(254, 215, 170, 0.35) 100%);
    backdrop-filter: blur(35px) saturate(200%);
    -webkit-backdrop-filter: blur(35px) saturate(200%);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow:
        0 12px 45px rgba(251, 191, 36, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.06),
        0 0 30px rgba(249, 115, 22, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.service-card-featured::before {
    opacity: 0.6;
}

.service-card-featured::after {
    opacity: 0.8;
    transform: scaleX(0.6);
}

/* Card Glow Effect */
.service-card-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.service-card:hover .service-card-glow {
    opacity: 1;
    transform: scale(1.3);
}

/* ============ SERVICE ICON - PREMIUM ============ */
.service-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Multi-Layer Glow */
.service-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 1.75rem;
    background: inherit;
    filter: blur(20px);
    opacity: 0.5;
    z-index: -1;
    transition: all 0.5s ease;
}

.service-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.6rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
    pointer-events: none;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(-5deg);
}

.service-card:hover .service-icon::before {
    inset: -12px;
    filter: blur(30px);
    opacity: 0.7;
}

.service-icon-emoji {
    font-size: 2.5rem;
    z-index: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    transition: transform 0.5s ease;
}

.service-card:hover .service-icon-emoji {
    transform: scale(1.1);
}

/* Premium Icon Gradients */
.service-icon-soulmate {
    background: linear-gradient(135deg, #FDA4AF 0%, #FB7185 40%, #F43F5E 100%);
    box-shadow: 0 12px 30px rgba(244, 63, 94, 0.35);
}

.service-icon-career {
    background: linear-gradient(135deg, #FDE68A 0%, #FBBF24 40%, #F59E0B 100%);
    box-shadow: 0 12px 30px rgba(251, 191, 36, 0.35);
}

.service-icon-finance {
    background: linear-gradient(135deg, #86EFAC 0%, #4ADE80 40%, #22C55E 100%);
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.35);
}

.service-icon-childbirth {
    background: linear-gradient(135deg, #FDBA74 0%, #FB923C 40%, #F97316 100%);
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.35);
}

.service-icon-kundli {
    background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 40%, #8B5CF6 100%);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.35);
}

.service-icon-vastu {
    background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 40%, #FB923C 100%);
    box-shadow: 0 12px 30px rgba(251, 146, 60, 0.35);
}

/* ============ CARD CONTENT ============ */
.service-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 1rem;
    transition: all 0.4s ease;
    letter-spacing: -0.01em;
}

.service-card:hover .service-card-title {
    color: #C2410C;
    transform: translateX(4px);
}

.service-card-description {
    font-size: 1rem;
    color: #6B7280;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

/* Premium Features List */
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: #4B5563;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(251, 191, 36, 0.1);
    transition: all 0.3s ease;
}

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

.service-card:hover .service-features li {
    transform: translateX(5px);
}

.feature-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}

/* Premium Card Button */
.service-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 2rem;
    background: linear-gradient(135deg, #F97316 0%, #FB923C 40%, #FBBF24 100%);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 10px 30px rgba(249, 115, 22, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.service-card-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.6s ease;
}

.service-card-btn:hover::before {
    left: 100%;
}

.service-card-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(249, 115, 22, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.service-card-btn .btn-arrow {
    transition: transform 0.4s ease;
    font-size: 1.25rem;
}

.service-card-btn:hover .btn-arrow {
    transform: translateX(8px);
}

/* ============ BOTTOM CTA - PREMIUM ============ */
.services-cta {
    text-align: center;
    margin-top: 6rem;
    padding-top: 4rem;
    position: relative;
}

.services-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), rgba(249, 115, 22, 0.5), rgba(251, 191, 36, 0.5), transparent);
}

.services-cta::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #F97316, #FBBF24);
    border-radius: 2px;
}

.services-cta-text {
    font-size: 1.375rem;
    color: #4B5563;
    margin-bottom: 2rem;
    font-weight: 500;
}

.services-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.375rem 3rem;
    background: linear-gradient(135deg, #1F2937 0%, #374151 50%, #1F2937 100%);
    background-size: 200% auto;
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow:
        0 10px 35px rgba(31, 41, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.services-cta-btn::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    z-index: -1;
}

.services-cta-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.7s ease;
}

.services-cta-btn:hover::after {
    left: 100%;
}

.services-cta-btn:hover {
    transform: translateY(-5px) scale(1.03);
    background-position: right center;
    box-shadow:
        0 20px 50px rgba(31, 41, 55, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ============ MOBILE RESPONSIVE STYLES ============ */

@media (max-width: 768px) {
    .services-section {
        padding: 5rem 1rem;
    }

    .services-header {
        margin-bottom: 3.5rem;
        text-align: center;
    }

    .services-title {
        text-align: center;
    }

    .services-title-gradient {
        display: block;
    }

    .services-title {
        font-size: 2.25rem;
    }

    .services-subtitle {
        font-size: 1.0625rem;
    }

    .service-card {
        padding: 2rem;
        border-radius: 1.5rem;
    }

    .service-icon {
        width: 4rem;
        height: 4rem;
    }

    .service-icon-emoji {
        font-size: 2rem;
    }

    .services-cta {
        margin-top: 4rem;
        padding-top: 3rem;
    }

    .services-bg-orb {
        opacity: 0.3;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: 3.5rem 1rem;
    }

    .services-title {
        font-size: 1.875rem;
    }

    .services-subtitle {
        font-size: 1rem;
    }

    .services-badge {
        padding: 0.625rem 1.25rem;
    }

    .services-badge-text {
        font-size: 0.6875rem;
    }

    .service-card {
        padding: 1.5rem;
    }

    .service-card-title {
        font-size: 1.25rem;
    }

    .service-card-description {
        font-size: 0.9375rem;
    }

    .service-features li {
        font-size: 0.875rem;
    }

    .service-card-btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    .services-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
    }
}

@media (max-width: 360px) {
    .services-title {
        font-size: 1.625rem;
    }

    .service-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .service-icon-emoji {
        font-size: 1.75rem;
    }

    .service-card {
        padding: 1.25rem;
    }
}

/* ============ TOUCH DEVICE OPTIMIZATIONS ============ */
@media (hover: none) and (pointer: coarse) {
    .service-card:hover {
        transform: translateY(-8px);
    }

    .service-card-glow,
    .service-mouse-glow {
        display: none;
    }

    .service-card-btn {
        min-height: 52px;
    }

    .services-cta-btn {
        min-height: 56px;
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ MOUSE GLOW EFFECT ============ */
.service-mouse-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, rgba(249, 115, 22, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    z-index: 0;
    filter: blur(30px);
}

/* ============ SCROLL ANIMATIONS ============ */
.service-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.service-animate.service-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered delays based on index */
.service-card[data-index="1"] {
    transition-delay: 0s;
}

.service-card[data-index="2"] {
    transition-delay: 0.12s;
}

.service-card[data-index="3"] {
    transition-delay: 0.24s;
}

.service-card[data-index="4"] {
    transition-delay: 0.36s;
}

.service-card[data-index="5"] {
    transition-delay: 0.48s;
}

.service-card[data-index="6"] {
    transition-delay: 0.6s;
}

/* ============ CTA ANIMATION ============ */
.services-cta-btn {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}

.services-cta-btn.cta-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ ICON ANIMATION ENHANCEMENT ============ */
.service-icon {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ============================================
   MOBILE HORIZONTAL SCROLL FOR SERVICES
   ============================================ */

/* Mobile: Horizontal Scrolling Cards */
@media (max-width: 767px) {
    .services-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1.5rem !important;
        padding: 1rem 1.5rem !important;
        margin: 0 -1.5rem !important;
        width: calc(100% + 3rem) !important;
    }

    .service-card {
        flex: 0 0 85% !important;
        min-width: 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Custom scrollbar for horizontal scroll */
    .services-grid::-webkit-scrollbar {
        height: 8px !important;
    }

    .services-grid::-webkit-scrollbar-track {
        background: rgba(251, 191, 36, 0.1) !important;
        border-radius: 10px !important;
    }

    .services-grid::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #FB923C, #F97316) !important;
        border-radius: 10px !important;
    }

    .services-grid::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, #F97316, #EA580C) !important;
    }
}

/* ============================================
   ANDROID/MOBILE GPU ACCELERATION FIX
   ============================================ */
.service-card,
.s-particle,
.cloud,
.shooting-star,
.services-bg-orb {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0d69597 *//* ============================================
   HOW IT WORKS SECTION CSS - ASTRODEFINED
   
   HOW TO USE:
   Copy ALL of this CSS and paste it in:
   WordPress → Appearance → Customize → Additional CSS
   ============================================ */

/* ============ SECTION BASE ============ */
.how-it-works-section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -20px;
    padding-top: calc(6rem + 20px);
    background: linear-gradient(180deg,
            #FFE4A8 0%,
            #FFF3D1 25%,
            #FFFEF9 50%,
            #FFF9E6 75%,
            #FFFEF9 100%);
    padding-bottom: 6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    overflow: hidden;
}

/* Mesh Overlay */
.how-it-works-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 30% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 70% 80%, rgba(249, 115, 22, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* Background Orbs */
.hiw-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
}

.hiw-bg-orb-1 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    top: -10%;
    left: -10%;
    animation: floatOrbHIW 25s ease-in-out infinite;
}

.hiw-bg-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, transparent 70%);
    bottom: 10%;
    right: -5%;
    animation: floatOrbHIW 30s ease-in-out infinite reverse;
}

@keyframes floatOrbHIW {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, -30px) scale(1.1);
    }
}

/* ============ FLOATING PARTICLES ============ */
.hiw-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hiw-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.8) 0%, rgba(249, 115, 22, 0.4) 50%, transparent 100%);
    border-radius: 50%;
    animation: floatParticle 15s ease-in-out infinite;
}

.hiw-particle:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.hiw-particle:nth-child(2) {
    left: 25%;
    top: 60%;
    animation-delay: 2s;
    animation-duration: 18s;
}

.hiw-particle:nth-child(3) {
    left: 40%;
    top: 30%;
    animation-delay: 4s;
    animation-duration: 14s;
}

.hiw-particle:nth-child(4) {
    left: 55%;
    top: 70%;
    animation-delay: 1s;
    animation-duration: 20s;
}

.hiw-particle:nth-child(5) {
    left: 70%;
    top: 25%;
    animation-delay: 3s;
    animation-duration: 16s;
}

.hiw-particle:nth-child(6) {
    left: 85%;
    top: 55%;
    animation-delay: 5s;
    animation-duration: 13s;
}

.hiw-particle:nth-child(7) {
    left: 15%;
    top: 80%;
    animation-delay: 2.5s;
    animation-duration: 17s;
}

.hiw-particle:nth-child(8) {
    left: 90%;
    top: 15%;
    animation-delay: 3.5s;
    animation-duration: 19s;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-40px) translateX(20px) scale(1.2);
        opacity: 1;
    }

    50% {
        transform: translateY(-20px) translateX(-15px) scale(0.8);
        opacity: 0.4;
    }

    75% {
        transform: translateY(-60px) translateX(10px) scale(1.1);
        opacity: 0.8;
    }
}

/* ============ CONTAINER ============ */
.hiw-container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
}

/* ============ BADGE ============ */
.hiw-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 243, 199, 0.8) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
    position: relative;
    overflow: hidden;
}

.hiw-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: badgeShineHIW 3s ease-in-out infinite;
}

@keyframes badgeShineHIW {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

.hiw-badge-icon {
    font-size: 1.125rem;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(15deg);
    }
}

.hiw-badge-text {
    color: #B45309;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ============ HEADER ============ */
.hiw-header {
    text-align: center;
    margin-bottom: 4rem;
}

.hiw-title {
    font-size: 2.75rem;
    font-weight: 900;
    color: #1F2937;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.hiw-title-gradient {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hiw-subtitle {
    font-size: 1.125rem;
    color: #4B5563;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .hiw-title {
        font-size: 3.25rem;
    }
}

@media (min-width: 1024px) {
    .hiw-title {
        font-size: 3.5rem;
    }
}

/* ============ STEPS GRID ============ */
.hiw-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 5rem;
}

@media (min-width: 768px) {
    .hiw-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ============ STEP CARD ============ */
.hiw-step {
    text-align: center;
    padding: 2.5rem 1.5rem;
    position: relative;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 50%,
            rgba(254, 243, 199, 0.4) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1.75rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
}

/* Animated top border */
.hiw-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #F97316, #FBBF24, #FB923C, #F97316);
    background-size: 300% 100%;
    animation: stepBorderGlow 3s ease-in-out infinite;
}

@keyframes stepBorderGlow {

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

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

/* Shine sweep effect */
.hiw-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.hiw-step:hover::after {
    left: 150%;
}

.hiw-step:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 25px 50px rgba(249, 115, 22, 0.15),
        0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(251, 191, 36, 0.5);
}

/* Step Icon - Enhanced */
.hiw-step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.75rem;
    background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FBBF24 100%);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 15px 40px rgba(249, 115, 22, 0.35),
        inset 0 -3px 0 rgba(0, 0, 0, 0.1),
        inset 0 3px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

/* Pulsing ring around icon */
.hiw-step-icon::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 1.5rem;
    border: 2px solid rgba(249, 115, 22, 0.3);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.2;
    }
}

.hiw-step-icon svg {
    width: 36px;
    height: 36px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.hiw-step:hover .hiw-step-icon {
    transform: translateY(-8px) scale(1.1) rotate(-5deg);
    box-shadow: 0 20px 50px rgba(249, 115, 22, 0.45);
}

/* Step Number & Progress Bar - Enhanced */
.hiw-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.step-num {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    color: white;
    font-weight: 900;
    font-size: 1.125rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 20px rgba(249, 115, 22, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    position: relative;
    animation: numGlow 2s ease-in-out infinite;
}

@keyframes numGlow {

    0%,
    100% {
        box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
    }

    50% {
        box-shadow: 0 6px 30px rgba(249, 115, 22, 0.6);
    }
}

.step-progress {
    flex: 1;
    max-width: 130px;
    height: 10px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.step-progress-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #F97316 0%, #FB923C 50%, #FBBF24 100%);
    border-radius: 5px;
    animation: progressFlow 2.5s ease-in-out infinite;
    background-size: 200% 100%;
}

@keyframes progressFlow {
    0% {
        background-position: 100% 0;
    }

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

/* Step Content - Enhanced */
.hiw-step-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 0.875rem;
    letter-spacing: -0.01em;
}

.hiw-step-description {
    font-size: 0.9375rem;
    color: #6B7280;
    line-height: 1.75;
    max-width: 300px;
    margin: 0 auto;
}

/* ============ WHY CHOOSE SECTION ============ */
.why-choose-section {
    padding-top: 4rem;
    border-top: 1px solid rgba(251, 191, 36, 0.2);
}

.why-choose-header {
    text-align: center;
    margin-bottom: 3rem;
}

.why-choose-title {
    font-size: 2.25rem;
    font-weight: 900;
    color: #1F2937;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.why-choose-title-gradient {
    background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-choose-subtitle {
    font-size: 1rem;
    color: #6B7280;
    max-width: 450px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .why-choose-title {
        font-size: 2.5rem;
    }
}

/* ============ WHY CHOOSE GRID ============ */
.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* ============ WHY CHOOSE ITEM ============ */
.why-choose-item {
    text-align: center;
    padding: 2.25rem 1.5rem;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(254, 243, 199, 0.4) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1.5rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    position: relative;
    overflow: hidden;
}

/* Top gradient line */
.why-choose-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F97316, #FBBF24, #F97316);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: itemBorderGlow 2s ease-in-out infinite;
}

@keyframes itemBorderGlow {

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

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

/* Shine sweep effect */
.why-choose-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.why-choose-item:hover::after {
    left: 150%;
}

.why-choose-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 20px 45px rgba(249, 115, 22, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(251, 191, 36, 0.5);
}

.why-choose-item:hover::before {
    opacity: 1;
}

/* Why Choose Icons - Enhanced */
.why-choose-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FBBF24 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 12px 30px rgba(249, 115, 22, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

/* Pulsing ring */
.why-choose-icon::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 2px solid rgba(249, 115, 22, 0.3);
    animation: whyIconPulse 2s ease-in-out infinite;
}

@keyframes whyIconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

.why-choose-icon svg {
    width: 30px;
    height: 30px;
    color: white;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.why-choose-item:hover .why-choose-icon {
    transform: scale(1.15) rotate(-8deg);
    box-shadow: 0 18px 40px rgba(249, 115, 22, 0.45);
}

/* Different icon colors for variety */
.why-choose-icon-1 {
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
}

.why-choose-icon-2 {
    background: linear-gradient(135deg, #EA580C 0%, #FB923C 100%);
}

.why-choose-icon-3 {
    background: linear-gradient(135deg, #FB923C 0%, #FBBF24 100%);
}

.why-choose-icon-4 {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.why-choose-item-title {
    font-size: 1.1875rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 0.625rem;
    letter-spacing: -0.01em;
}

.why-choose-item-description {
    font-size: 0.9rem;
    color: #6B7280;
    line-height: 1.7;
}

/* ============ MOBILE RESPONSIVE ============ */

@media (max-width: 768px) {
    .how-it-works-section {
        padding: 4rem 1rem;
    }

    .hiw-title {
        font-size: 2.25rem;
    }

    .hiw-subtitle {
        font-size: 1rem;
    }

    .hiw-step-icon {
        width: 60px;
        height: 60px;
    }

    .hiw-step-icon svg {
        width: 28px;
        height: 28px;
    }

    .hiw-steps {
        margin-bottom: 3.5rem;
    }

    .why-choose-title {
        font-size: 2rem;
    }

    .hiw-bg-orb {
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    .how-it-works-section {
        padding: 3rem 1rem;
    }

    .hiw-title {
        font-size: 1.875rem;
    }

    .why-choose-title {
        font-size: 1.625rem;
    }

    .hiw-step {
        padding: 1.5rem 1rem;
    }

    .why-choose-item {
        padding: 1.5rem 1rem;
    }

    .step-progress {
        max-width: 80px;
    }
}

@media (max-width: 360px) {
    .hiw-title {
        font-size: 1.625rem;
    }

    .why-choose-title {
        font-size: 1.5rem;
    }

    .hiw-step-icon {
        width: 55px;
        height: 55px;
    }

    .why-choose-icon {
        width: 50px;
        height: 50px;
    }
}

/* ============ TOUCH DEVICE OPTIMIZATIONS ============ */
@media (hover: none) and (pointer: coarse) {

    .hiw-step:hover .hiw-step-icon,
    .why-choose-item:hover .why-choose-icon {
        transform: none;
    }

    .why-choose-item:hover {
        transform: translateY(-4px);
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ GLOW EFFECT (follows mouse) ============ */
.hiw-step-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    z-index: 0;
    filter: blur(30px);
}

/* ============ CONNECTING LINES ============ */
.hiw-connector-line {
    display: none;
}

@media (min-width: 768px) {
    .hiw-connector-line {
        display: flex;
        align-items: center;
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        z-index: 0;
    }

    .connector-dot {
        width: 16px;
        height: 16px;
        background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
        flex-shrink: 0;
        animation: pulseConnector 2s ease-in-out infinite;
    }

    .connector-dot-2 {
        animation-delay: 1s;
    }

    .connector-line-inner {
        flex: 1;
        height: 3px;
        background: linear-gradient(90deg, #F97316, #FBBF24, #F97316);
        background-size: 200% 100%;
        animation: flowLine 3s linear infinite;
        margin: 0 -8px;
    }

    @keyframes pulseConnector {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
        }

        50% {
            transform: scale(1.2);
            box-shadow: 0 0 30px rgba(249, 115, 22, 0.8);
        }
    }

    @keyframes flowLine {
        0% {
            background-position: 200% 0;
        }

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

/* ============ SCROLL ANIMATIONS ============ */
.hiw-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.hiw-animate.hiw-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal for steps */
.hiw-step.hiw-animate[data-step="1"] {
    transition-delay: 0s;
}

.hiw-step.hiw-animate[data-step="2"] {
    transition-delay: 0.15s;
}

.hiw-step.hiw-animate[data-step="3"] {
    transition-delay: 0.3s;
}

/* ============ COUNT NUMBER ============ */
.count-number {
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* ============================================
   ANDROID/MOBILE GPU ACCELERATION FIX
   ============================================ */
.hiw-bg-orb,
.hiw-particle,
.hiw-badge::before,
.hiw-step::before,
.hiw-step-icon::before,
.why-choose-item::before,
.why-choose-icon::before {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* ============================================
   ANDROID/LOW-END MOBILE PERFORMANCE BOOST
   Aggressive optimization for 60fps
   ============================================ */
@media (max-width: 768px) {

    /* kill expensive glass blur */
    .hiw-step,
    .why-choose-item,
    .hiw-badge {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    }

    /* Remove expensive animations */
    .hiw-bg-orb,
    .why-choose-item::before,
    .hiw-step::after {
        animation: none !important;
        display: none !important;
    }

    /* Simplify particle rendering */
    .hiw-particle {
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}


/* ============================================
   HYPER-OPTIMIZATION FOR ANDROID LAGGING
   Removes ALL shadows and complex effects
   ============================================ */
@media (max-width: 768px) {

    /* 1. Remove ALL Card Shadows */
    .hiw-step,
    .why-choose-item {
        box-shadow: none !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        transform: none !important;
        transition: none !important;
    }

    /* 2. Remove Icon Shadows (Inset & Drop) */
    .hiw-step-icon,
    .why-choose-icon,
    .step-num {
        box-shadow: none !important;
        animation: none !important;
    }

    /* 3. Remove Pulsing Rings */
    .hiw-step-icon::before,
    .why-choose-icon::before {
        display: none !important;
        animation: none !important;
    }

    /* 4. Simplify Text Gradients (Paint cost) */
    .hiw-title-gradient,
    .why-choose-title-gradient,
    .count-number {
        background: none !important;
        -webkit-text-fill-color: #F97316 !important;
        color: #F97316 !important;
    }

    /* 5. Kill all pseudo-element animations */
    .hiw-step::before,
    .why-choose-item::before {
        animation: none !important;
        display: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2edd15b *//* ============================================
   TESTIMONIALS SECTION CSS - ASTRODEFINED
   
   HOW TO USE:
   Copy ALL of this CSS and paste it in:
   WordPress → Appearance → Customize → Additional CSS
   (Add AFTER the services section CSS)
   ============================================ */

/* ============ TESTIMONIALS SECTION BASE ============ */
.testimonials-section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -20px;
    /* Increased overlap to close visible gap */
    padding-top: calc(8rem + 20px);
    /* Adjust padding to maintain spacing */
    background: linear-gradient(180deg,
            #FFFEF9 0%,
            #FFF9E6 20%,
            #FFF3D1 50%,
            #FFECC2 80%,
            #FFE4A8 100%);
    padding-bottom: 8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    overflow: hidden;
}

/* Mesh Gradient Overlay */
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(249, 115, 22, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Floating Orbs */
.testimonials-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
}

.testimonials-bg-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    top: -15%;
    right: -10%;
    animation: floatOrbTestimonials 25s ease-in-out infinite;
}

.testimonials-bg-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, transparent 70%);
    bottom: -10%;
    left: -10%;
    animation: floatOrbTestimonials 30s ease-in-out infinite reverse;
}

@keyframes floatOrbTestimonials {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 1;
    }
}

/* ============ FLOATING PARTICLES ============ */
.testimonials-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.t-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.9) 0%, rgba(249, 115, 22, 0.5) 50%, transparent 100%);
    border-radius: 50%;
    animation: floatTestimonialParticle 20s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.t-particle:nth-child(1) {
    left: 5%;
    top: 15%;
    animation-delay: 0s;
    animation-duration: 18s;
}

.t-particle:nth-child(2) {
    left: 15%;
    top: 45%;
    animation-delay: 2s;
    animation-duration: 22s;
}

.t-particle:nth-child(3) {
    left: 25%;
    top: 75%;
    animation-delay: 4s;
    animation-duration: 16s;
}

.t-particle:nth-child(4) {
    left: 40%;
    top: 25%;
    animation-delay: 1s;
    animation-duration: 24s;
}

.t-particle:nth-child(5) {
    left: 55%;
    top: 60%;
    animation-delay: 3s;
    animation-duration: 19s;
}

.t-particle:nth-child(6) {
    left: 65%;
    top: 20%;
    animation-delay: 5s;
    animation-duration: 21s;
}

.t-particle:nth-child(7) {
    left: 75%;
    top: 50%;
    animation-delay: 2.5s;
    animation-duration: 17s;
}

.t-particle:nth-child(8) {
    left: 85%;
    top: 80%;
    animation-delay: 3.5s;
    animation-duration: 23s;
}

.t-particle:nth-child(9) {
    left: 92%;
    top: 35%;
    animation-delay: 1.5s;
    animation-duration: 20s;
}

.t-particle:nth-child(10) {
    left: 50%;
    top: 90%;
    animation-delay: 4.5s;
    animation-duration: 15s;
}

@keyframes floatTestimonialParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.5;
    }

    25% {
        transform: translateY(-30px) translateX(15px) scale(1.3);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-15px) translateX(-10px) scale(0.7);
        opacity: 0.4;
    }

    75% {
        transform: translateY(-45px) translateX(8px) scale(1.1);
        opacity: 0.7;
    }
}

/* Shooting Stars */
.testimonials-shooting-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.t-shooting-star {
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #FFFFFF 0%, #E8E8E8 40%, #C0C0C0 100%);
    border-radius: 50%;
    box-shadow:
        0 0 6px 2px rgba(255, 255, 255, 0.9),
        0 0 12px 4px rgba(192, 192, 192, 0.6);
    opacity: 0;
}

.t-shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(192, 192, 192, 0.6) 30%,
            rgba(135, 206, 235, 0.3) 60%,
            transparent 100%);
    border-radius: 2px;
}

.t-shooting-star-1 {
    top: 15%;
    left: 20%;
    animation: tShootingStar 7s ease-in infinite;
}

.t-shooting-star-2 {
    top: 40%;
    left: 60%;
    animation: tShootingStar 9s ease-in infinite;
    animation-delay: 3s;
}

.t-shooting-star-3 {
    top: 70%;
    left: 30%;
    animation: tShootingStar 8s ease-in infinite;
    animation-delay: 5s;
}

@keyframes tShootingStar {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(215deg);
    }

    3% {
        opacity: 1;
    }

    10% {
        opacity: 1;
        transform: translate(250px, 250px) rotate(215deg);
    }

    12% {
        opacity: 0;
        transform: translate(300px, 300px) rotate(215deg);
    }

    100% {
        opacity: 0;
        transform: translate(300px, 300px) rotate(215deg);
    }
}

/* ============ CONTAINER ============ */
.testimonials-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
}

/* ============ SECTION HEADER ============ */
.testimonials-header {
    text-align: center;
    margin-bottom: 4rem;
}

.testimonials-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 243, 199, 0.8) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 9999px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
    position: relative;
    overflow: hidden;
}

.testimonials-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badgeShine 4s ease-in-out infinite;
}

@keyframes badgeShine {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

.testimonials-badge-icon {
    font-size: 1.25rem;
    animation: starRotate 3s ease-in-out infinite;
}

@keyframes starRotate {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(15deg) scale(1.1);
    }
}

.testimonials-badge-text {
    color: #B45309;
    font-weight: 800;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.testimonials-title {
    font-size: 3rem;
    font-weight: 900;
    color: #1F2937;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.testimonials-title-gradient {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 25%, #FB923C 50%, #FBBF24 75%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradientFlow 4s ease-in-out infinite;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 200% center;
    }
}

.testimonials-subtitle {
    font-size: 1.25rem;
    color: #4B5563;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .testimonials-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .testimonials-title {
        font-size: 4rem;
    }
}

/* ============ TESTIMONIALS GRID ============ */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* ============ TESTIMONIAL CARD ============ */
.testimonial-card {
    position: relative;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.92) 50%,
            rgba(254, 243, 199, 0.5) 100%);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1.75rem;
    padding: 2rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Animated gradient border on hover */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #F97316, #FBBF24, #FB923C, #F97316);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {

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

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

/* Shine sweep effect */
.testimonial-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.testimonial-card:hover::after {
    left: 150%;
}

.testimonial-card:hover {
    transform: translateY(-12px) rotateX(2deg);
    box-shadow:
        0 30px 60px rgba(249, 115, 22, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 10px 20px rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.5);
}

.testimonial-card:hover::before {
    opacity: 1;
}

/* Featured Card */
.testimonial-card-featured {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(254, 243, 199, 0.6) 50%,
            rgba(254, 215, 170, 0.4) 100%);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow:
        0 10px 40px rgba(251, 191, 36, 0.2),
        0 5px 20px rgba(249, 115, 22, 0.1);
}

.testimonial-card-featured::before {
    opacity: 1;
}

/* Card Glow */
.testimonial-card-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, rgba(249, 115, 22, 0.15) 40%, transparent 70%);
    top: -100px;
    right: -100px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.6s ease;
    pointer-events: none;
    filter: blur(20px);
}

.testimonial-card:hover .testimonial-card-glow {
    opacity: 1;
    transform: scale(1.3) rotate(15deg);
}

/* Quote Icon */
.testimonial-quote-icon {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 50%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.2;
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-quote-icon {
    opacity: 0.35;
    transform: scale(1.1) rotate(-5deg);
}

/* Star Rating */
.testimonial-rating {
    display: block;
    margin-bottom: 1.25rem;
}

.testimonial-rating .stars {
    color: #FBBF24;
    font-size: 1.375rem;
    letter-spacing: 0.25em;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.6);
    display: inline-block;
}

/* Testimonial Text */
.testimonial-text {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Author Section */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(251, 191, 36, 0.2);
    position: relative;
}

.testimonial-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    padding: 3px;
    background: linear-gradient(135deg, #F97316, #FBBF24, #F59E0B);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
    transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-avatar {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
    border: 2px solid white;
}

.testimonial-author-info {
    flex: 1;
}

.testimonial-author-name {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #1F2937;
    margin: 0 0 0.3rem 0;
    letter-spacing: -0.01em;
}

.testimonial-author-service {
    font-size: 0.8125rem;
    color: #F97316;
    margin: 0;
    font-weight: 600;
}

/* Verified Badge */
.testimonial-verified {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.testimonial-verified::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: verifiedShine 3s ease-in-out infinite;
}

@keyframes verifiedShine {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

.testimonial-card:hover .testimonial-verified {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.45);
}

.verified-icon {
    color: white;
    font-weight: 700;
    font-size: 0.8125rem;
}

.verified-text {
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============ STATS BAR ============ */
.testimonials-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
    padding: 2rem 3rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(254, 243, 199, 0.6) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.1);
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.875rem;
    color: #6B7280;
    font-weight: 500;
    margin-top: 0.25rem;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.4), transparent);
}

/* ============ MOBILE RESPONSIVE ============ */

@media (max-width: 768px) {
    .testimonials-section {
        padding: 5rem 1rem;
    }

    .testimonials-header {
        margin-bottom: 3rem;
    }

    .testimonials-title {
        font-size: 2.25rem;
    }

    .testimonials-subtitle {
        font-size: 1rem;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonials-stats {
        gap: 1.5rem;
        padding: 1.5rem 2rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    .stat-divider {
        display: none;
    }

    .testimonials-bg-orb {
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    .testimonials-section {
        padding: 3.5rem 1rem;
    }

    .testimonials-title {
        font-size: 1.875rem;
    }

    .testimonials-badge {
        padding: 0.625rem 1.25rem;
    }

    .testimonial-card {
        padding: 1.25rem;
    }

    .testimonial-author {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .testimonial-verified {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .testimonials-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 360px) {
    .testimonials-title {
        font-size: 1.625rem;
    }

    .testimonial-avatar {
        width: 42px;
        height: 42px;
    }
}

/* ============ TOUCH DEVICE OPTIMIZATIONS ============ */
@media (hover: none) and (pointer: coarse) {
    .testimonial-card:hover {
        transform: translateY(-5px);
    }

    .testimonial-card-glow,
    .testimonial-mouse-glow {
        display: none;
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ MOUSE GLOW EFFECT ============ */
.testimonial-mouse-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, rgba(249, 115, 22, 0.15) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    z-index: 0;
    filter: blur(25px);
}

/* ============ SCROLL ANIMATIONS ============ */
.testimonial-animate {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.testimonial-animate.testimonial-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered delays based on index */
.testimonial-card[data-index="1"] {
    transition-delay: 0s;
}

.testimonial-card[data-index="2"] {
    transition-delay: 0.1s;
}

.testimonial-card[data-index="3"] {
    transition-delay: 0.2s;
}

.testimonial-card[data-index="4"] {
    transition-delay: 0.3s;
}

.testimonial-card[data-index="5"] {
    transition-delay: 0.4s;
}

.testimonial-card[data-index="6"] {
    transition-delay: 0.5s;
}

/* ============ STATS BAR ANIMATION ============ */
.testimonials-stats {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.testimonials-stats.stats-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ STAT COUNT STYLING ============ */
.stat-count {
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* ============================================
   MOBILE HORIZONTAL SCROLL
   ============================================ */

@media (max-width: 767px) {
    .testimonials-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1.5rem !important;
        padding: 1rem 1.5rem 2rem 1.5rem !important;
        margin: 0 -1.5rem !important;
        width: calc(100% + 3rem) !important;
    }

    .testimonial-card {
        flex: 0 0 85% !important;
        min-width: 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center !important;
        margin-bottom: 0 !important;
    }

    /* Custom scrollbar for horizontal scroll */
    .testimonials-grid::-webkit-scrollbar {
        height: 6px !important;
    }

    .testimonials-grid::-webkit-scrollbar-track {
        background: rgba(251, 191, 36, 0.1) !important;
        border-radius: 10px !important;
        margin: 0 1.5rem !important;
    }

    .testimonials-grid::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #FB923C, #F97316) !important;
        border-radius: 10px !important;
    }
}


/* ============================================
   ANDROID/MOBILE GPU ACCELERATION FIX
   ============================================ */
.testimonial-card,
.t-particle,
.t-shooting-star,
.testimonials-bg-orb {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aa1d7f6 *//* ============================================
   CONTACT SECTION CSS - ASTRODEFINED
   
   HOW TO USE:
   Copy ALL of this CSS and paste it in:
   WordPress → Appearance → Customize → Additional CSS
   ============================================ */

/* ============ SECTION BASE ============ */
.contact-section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: -20px;
    padding-top: calc(6rem + 20px);
    background: linear-gradient(180deg,
            #FEF3C7 0%,
            #FDE68A 30%,
            #FCD34D 70%,
            #FBBF24 100%);
    padding-bottom: 6rem;
    padding-left: 2rem;
    padding-right: 2rem;
    overflow: hidden;
    min-height: 100vh;
}

/* ============ BACKGROUND ORBS ============ */
.contact-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
}

.contact-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #F97316 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: orbFloat1 15s ease-in-out infinite;
}

.contact-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #FBBF24 0%, transparent 70%);
    bottom: -50px;
    left: -100px;
    animation: orbFloat2 18s ease-in-out infinite;
}

.contact-orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #FB923C 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbFloat3 20s ease-in-out infinite;
}

@keyframes orbFloat1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, 30px) scale(1.1);
    }
}

@keyframes orbFloat2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, -20px) scale(1.05);
    }
}

@keyframes orbFloat3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* ============ FLOATING PARTICLES ============ */
.contact-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.9) 0%, rgba(249, 115, 22, 0.5) 50%, transparent 100%);
    border-radius: 50%;
    animation: particleFloat 10s ease-in-out infinite;
    transition: transform 0.3s ease;
}

@keyframes particleFloat {

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

    50% {
        transform: translateY(-20px);
        opacity: 1;
    }
}

/* ============ CONTAINER ============ */
.contact-container {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: 0 auto;
}

/* ============ SECTION HEADER ============ */
.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.contact-badge-icon {
    font-size: 1rem;
}

.contact-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400E;
    letter-spacing: 0.05em;
}

.contact-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #1F2937;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.contact-title-gradient {
    background: linear-gradient(135deg, #F97316 0%, #DC2626 50%, #F97316 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {

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

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

.contact-subtitle {
    font-size: 1.125rem;
    color: #78350F;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============ CONTENT GRID ============ */
.contact-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .contact-content {
        grid-template-columns: 1fr 1.2fr;
        gap: 3rem;
    }
}

/* ============ INFO CARD ============ */
.contact-info-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-radius: 2rem;
    padding: 2.5rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 4px 15px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.contact-info-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-15deg);
    animation: cardShine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardShine {
    0% {
        left: -100%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    30% {
        left: 150%;
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}

/* ============ CONTACT METHODS ============ */
.contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.5) 0%, rgba(253, 230, 138, 0.3) 100%);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.contact-method:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.8) 0%, rgba(253, 230, 138, 0.5) 100%);
}

.contact-method-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.contact-method-details h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 0.25rem 0;
}

.contact-method-details p {
    font-size: 0.9rem;
    color: #78350F;
    margin: 0;
}

/* ============ DIVIDER ============ */
.contact-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
    margin: 1.5rem 0;
}

/* ============ PAYMENT SECTION ============ */
.payment-section {
    margin-bottom: 1.5rem;
}

.payment-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 1rem 0;
}

.payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.payment-icon {
    flex: 1;
    min-width: 70px;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400E;
    transition: all 0.3s ease;
}

.payment-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.3);
}

.payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);
    border-radius: 12px;
    border-left: 4px solid #F97316;
}

.notice-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.payment-notice p {
    font-size: 0.8rem;
    color: #78350F;
    margin: 0;
    line-height: 1.5;
}

.payment-notice strong {
    color: #DC2626;
}

/* ============ SOCIAL LINKS ============ */
.contact-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
}

.social-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.social-link:hover {
    transform: translateY(-5px) rotate(10deg);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

/* ============ FORM CARD ============ */
.contact-form-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 2rem;
    padding: 2.5rem;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.1),
        0 5px 20px rgba(251, 191, 36, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.contact-form-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-15deg);
    animation: cardShine 6s ease-in-out infinite;
    animation-delay: 2s;
    pointer-events: none;
}

.form-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1F2937;
    margin: 0 0 2rem 0;
    text-align: center;
}

/* ============ FORM ELEMENTS ============ */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group {
    position: relative;
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #78350F;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #1F2937;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9CA3AF;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #F97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
    background: #FFFFFF;
}

.form-group.focused label {
    color: #F97316;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F97316' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

/* ============ SUBMIT BUTTON ============ */
.contact-submit-btn {
    position: relative;
    width: 100%;
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #F97316 0%, #DC2626 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.4);
}

.contact-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(249, 115, 22, 0.5);
}

.contact-submit-btn:active {
    transform: translateY(-1px);
}

.contact-submit-btn.success {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.4);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.btn-icon {
    font-size: 1.25rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(180deg);
    }
}

/* ============ ANIMATIONS ============ */
.animate-ready {
    opacity: 0;
    transform: translateY(40px);
}

.animate-in {
    animation: slideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    .contact-section {
        padding: 4rem 1rem;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 1.75rem;
    }

    .contact-method {
        padding: 0.75rem;
    }

    .contact-method-icon {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }

    .payment-icons {
        gap: 0.5rem;
    }

    .payment-icon {
        min-width: 60px;
        padding: 0.5rem;
    }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ANDROID/MOBILE GPU ACCELERATION FIX
   ============================================ */
.contact-bg-orb,
.contact-particle,
.contact-info-shine,
.contact-form-shine {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* ============ ASTRODEFINED WPFORMS STYLING ============ 
   Apply this CSS to style the [wpforms] shortcode to match the custom design.
   ======================================================= */

/* Container */
.contact-form-card .wpforms-container {
    max-width: 100% !important;
    margin: 0 !important;
}

/* Hide WPForms Header/Title if present (optional, usually handled by shortcode settings) */
div.wpforms-container-full .wpforms-form .wpforms-title {
    display: none !important;
}

/* Input Fields & Textareas */
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select {
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    color: #1F2937 !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%) !important;
    border: 2px solid rgba(251, 191, 36, 0.3) !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    max-width: 100% !important;
}

/* Focus State */
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form select:focus {
    border-color: #F97316 !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15) !important;
    background: #FFFFFF !important;
}

/* Placeholder Text */
div.wpforms-container-full .wpforms-form ::placeholder {
    color: #9CA3AF !important;
    font-size: 0.95rem;
}

/* Labels */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #78350F !important;
    margin-bottom: 0.5rem !important;
    float: none !important;
}

/* Field Spacing */
div.wpforms-container-full .wpforms-form .wpforms-field {
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    clear: both !important;
}

/* Two Column Layout Support (Flexbox for robustness) */
div.wpforms-container-full .wpforms-form .wpforms-field-row {
    display: flex !important;
    gap: 1.25rem !important;
    width: 100% !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-row:before,
div.wpforms-container-full .wpforms-form .wpforms-field-row:after {
    display: none !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-one-half {
    width: 50% !important;
    float: none !important;
    margin: 0 !important;
    flex: 1 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    font-size: 0.8rem !important;
    color: #9CA3AF !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* Submit Button Container */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
    text-align: center !important;
}

/* Submit Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
    width: 100% !important;
    padding: 1.25rem 2rem !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #F97316 0%, #DC2626 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.4) !important;
    display: block !important;
    text-transform: none !important;
}

/* Submit Button Hover */
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 35px rgba(249, 115, 22, 0.5) !important;
    background: linear-gradient(135deg, #fb8332 0%, #e63636 100%) !important;
}

/* Submit Button Active */
div.wpforms-container-full .wpforms-form button[type=submit]:active {
    transform: translateY(-1px) !important;
}

/* Validation Errors */
div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: #DC2626 !important;
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-has-error input,
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-has-error textarea {
    border-color: #DC2626 !important;
    background: #FEF2F2 !important;
}

/* Success Message */
div.wpforms-container-full .wpforms-confirmation-container-full {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1px solid #10B981 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    color: #065F46 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1) !important;
}

/* Spinner Adjustments */
div.wpforms-container-full .wpforms-submit-container img.wpforms-submit-spinner {
    position: absolute !important;
    right: 1.5rem !important;
}

/* Responsive */
@media (max-width: 600px) {
    div.wpforms-container-full .wpforms-form .wpforms-one-half {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }
}/* End custom CSS */