.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-30 .elementor-element.elementor-element-387f1b1{--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-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-30 .elementor-element.elementor-element-957e32a{--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-30 .elementor-element.elementor-element-1e91b15{--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-30 .elementor-element.elementor-element-ba0fca5{--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-30 .elementor-element.elementor-element-6ca27c9{margin:-14px -14px calc(var(--kit-widget-spacing, 0px) + -14px) -14px;padding:-16px -16px -16px -16px;}.elementor-30 .elementor-element.elementor-element-6ca27c9.elementor-element{--align-self:stretch;}.elementor-30 .elementor-element.elementor-element-18b6f93{--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-30 .elementor-element.elementor-element-4618b8f{margin:-11px -11px calc(var(--kit-widget-spacing, 0px) + -11px) -11px;padding:-56px -56px -56px -56px;}.elementor-30 .elementor-element.elementor-element-4618b8f.elementor-element{--align-self:stretch;}.elementor-30 .elementor-element.elementor-element-2ca84b5{--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-30 .elementor-element.elementor-element-8ef4b6e{margin:-11px -11px calc(var(--kit-widget-spacing, 0px) + -11px) -11px;padding:-3px -3px -3px -3px;}.elementor-30 .elementor-element.elementor-element-8ef4b6e.elementor-element{--align-self:stretch;--order:-99999 /* order start hack */;}.elementor-30 .elementor-element.elementor-element-f82eeef{--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-30 .elementor-element.elementor-element-289f866{--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-30 .elementor-element.elementor-element-0e7139c{--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-30 .elementor-element.elementor-element-e07c3ce{--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-30 .elementor-element.elementor-element-d930de8{margin:-30px -30px calc(var(--kit-widget-spacing, 0px) + -30px) -30px;padding:-301px -301px -301px -301px;}.elementor-30 .elementor-element.elementor-element-d930de8.elementor-element{--align-self:stretch;}.elementor-30 .elementor-element.elementor-element-4a9cf97{margin:-29px -29px calc(var(--kit-widget-spacing, 0px) + -29px) -29px;padding:-260px -260px -260px -260px;}.elementor-30 .elementor-element.elementor-element-4a9cf97.elementor-element{--align-self:stretch;}.elementor-30 .elementor-element.elementor-element-32ec85f{margin:-20px -20px calc(var(--kit-widget-spacing, 0px) + -20px) -20px;}.elementor-30 .elementor-element.elementor-element-dcfdf6c{--display:flex;}.elementor-30 .elementor-element.elementor-element-35f70b3{--display:flex;}.elementor-widget-spacer .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-spacer .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-30 .elementor-element.elementor-element-8f57b2d{--spacer-size:50px;}.elementor-30 .elementor-element.elementor-element-e309bd4{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-30 .elementor-element.elementor-element-0fc7fd5{--display:flex;}.elementor-widget-heading .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-30 .elementor-element.elementor-element-c84dcba{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-30 .elementor-element.elementor-element-e309bd4{--grid-auto-flow:row;}.elementor-30 .elementor-element.elementor-element-c84dcba{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-30 .elementor-element.elementor-element-e309bd4{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-30 .elementor-element.elementor-element-c84dcba{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-cdf35ca *//* --- HERO SOLAR SYSTEM ANIMATION --- */

/* Wrapper to center and scale the whole system */
.solar-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensure enough space */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Slight tilt for a 3D effect */
    transform: perspective(1000px) rotateX(20deg) scale(0.9);
    transform-style: preserve-3d;
}

/* The Central Sun (GJ) */
.gj-sun {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--accent-gold);
    /* A fiery gradient for the sun */
    background: radial-gradient(circle at 30% 30%, #fff, var(--accent-gold));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-dark);
    z-index: 20;
    /* Intense glowing effect */
    box-shadow: 
        0 0 20px var(--accent-gold),
        0 0 60px rgba(255, 202, 88, 0.6),
        inset -5px -5px 20px rgba(0,0,0,0.2);
    /* Subtle pulsing animation */
    animation: sun-pulse 4s ease-in-out infinite alternate;
     transform: rotateX(-20deg); /* Counteract wrapper tilt to keep text flat */
}

/* Orbit Paths (The faint rings) */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    /* Center the rings */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

/* The container holding the planet (rotates around the ring) */
.planet-rotator {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-left: -50%; /* Centers the pivot point */
    animation: orbit-spin linear infinite;
    transform-style: preserve-3d;
}

/* The actual Planet bubble with text */
.planet-service {
    position: absolute;
    top: -25px; /* Offset by half planet height to sit on ring line */
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-dark);
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
    /* Counter-rotation to keep text upright while orbiting */
    animation: orbit-counter-spin linear infinite;
    border: 2px solid var(--accent-gold);
}

/* --- Specific Orbit Configurations (Size, Speed, Color) --- */

/* Orbit 1: SEO (Closest, Fastest) */
.ring-1 { width: 160px; height: 160px; }
.ring-1 .planet-rotator { animation-duration: 8s; }
.ring-1 .planet-service { animation-duration: 8s; background: #4FC3F7; color: var(--primary-dark); border: none;}

/* Orbit 2: Ads (Medium distance, reverse direction) */
.ring-2 { width: 240px; height: 240px; }
.ring-2 .planet-rotator { animation-duration: 12s; animation-direction: reverse; }
.ring-2 .planet-service { animation-duration: 12s; animation-direction: reverse; background: #FFCA58; border: none;}

/* Orbit 3: SMM (Farther) */
.ring-3 { width: 320px; height: 320px; }
.ring-3 .planet-rotator { animation-duration: 18s; }
.ring-3 .planet-service { animation-duration: 18s; background: #EF5350; color: white; border: none;}

/* Orbit 4: Web & Content (Farthest, slowest, two planets on one ring) */
.ring-4 { width: 420px; height: 420px; border-color: rgba(255,255,255,0.05); }
.ring-4 .planet-rotator { animation-duration: 28s; animation-direction: reverse; }
.ring-4 .planet-service { animation-duration: 28s; animation-direction: reverse; background: #66BB6A; border: none;}
/* Second planet on ring 4 needs a delay to be on the other side */
.planet-rotator.delayed { animation-delay: -14s; }
.planet-service.delayed { animation-delay: -14s; background: #AB47BC; color: white; }


/* --- Keyframe Animations --- */

/* Spins the rotator around the sun */
@keyframes orbit-spin {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

/* Counter-spins the planet itself so text stays readable */
@keyframes orbit-counter-spin {
    from { transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); }
    to { transform: rotateX(-20deg) rotateY(0deg) rotateZ(-360deg); }
}

/* Subtle sun pulsing */
@keyframes sun-pulse {
    from { transform: rotateX(-20deg) scale(1); filter: brightness(1); }
    to { transform: rotateX(-20deg) scale(1.05); filter: brightness(1.1); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3d28ab4 *//* --- INTRO SECTION UPDATES --- */

/* 1. The Off-White Content Box */
.intro-content-box {
    background-color: #F9F9F9; /* Off-white */
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* 2. New Graphic: "Building Strategy" Animation */
.strategy-builder {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 10px;
    transform: rotate(45deg);
}

.strategy-block {
    width: 60px;
    height: 60px;
    background: var(--primary-dark);
    border-radius: 8px;
    box-shadow: -5px 5px 0 var(--accent-gold);
    animation: build-up 3s ease-in-out infinite;
    position: relative;
}

/* Individual Block Animations */
.strategy-block:nth-child(1) { animation-delay: 0s; }
.strategy-block:nth-child(2) { animation-delay: 0.5s; background: white; border: 2px solid var(--primary-dark); }
.strategy-block:nth-child(3) { animation-delay: 1s; background: var(--accent-gold); box-shadow: -5px 5px 0 var(--primary-dark); }
.strategy-block:nth-child(4) { animation-delay: 1.5s; }

@keyframes build-up {
    0%, 100% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(-10px, -10px); opacity: 0.8; }
}

/* Mobile Fix for the Box */
@media (max-width: 768px) {
    .intro-content-box {
        padding: 25px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-14992d0 *//* --- COMPACT ZIGZAG LAYOUT --- */
.zigzag-wrapper.compact {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
}

.zigzag-item {
    display: flex;
    align-items: center;
    gap: 50px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

/* Hover Effect: Pop up + Gold Left Border */
.zigzag-wrapper.compact .zigzag-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(37, 4, 68, 0.1);
    border-left-color: var(--accent-gold);
}

.zigzag-content { flex: 1.2; }

/* Visual Side */
.zigzag-visual {
    flex: 0.5;
    height: 140px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e6e6e6 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Even Items (Reverse Layout) */
.zigzag-item:nth-child(even) {
    flex-direction: row-reverse;
    background: var(--primary-dark);
    color: #ffffff;
}
.zigzag-item:nth-child(even) .zigzag-visual {
    background: rgba(255,255,255,0.05);
}
.zigzag-item:nth-child(even) h3 { color: var(--accent-gold); }
.zigzag-item:nth-child(even) p { color: rgba(255,255,255,0.9); }

/* --- HOVER REVEAL EFFECT --- */
/* Hide text by default */
.zigzag-wrapper.compact .zigzag-content p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(-10px);
}

/* Show text on hover */
.zigzag-wrapper.compact .zigzag-item:hover .zigzag-content p {
    max-height: 200px;
    opacity: 1;
    margin-top: 10px;
    transform: translateY(0);
}

/* Heading Cursor */
.zigzag-wrapper.compact .zigzag-content h3 {
    margin-bottom: 0;
    cursor: pointer;
}

/* --- GRAPHICS FOR ICONS --- */

/* 1. Transparency Eye */
.eye-visual {
    width: 60px; height: 60px;
    border: 4px solid var(--accent-gold);
    border-radius: 75% 15%;
    transform: rotate(45deg) scale(0.85);
    display: flex; align-items: center; justify-content: center;
}
.eye-pupil {
    width: 20px; height: 20px;
    background: var(--primary-dark);
    border-radius: 50%;
}

/* 2. Rotating Globe Ring */
.globe-ring {
    width: 70px; height: 70px;
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: spin-slow 10s linear infinite;
    transform: scale(0.85);
}
.pin-static {
    width: 15px; height: 25px;
    background: var(--accent-gold);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    margin-top: -5px;
}
@keyframes spin-slow { to { transform: rotate(360deg) scale(0.85); } }

/* 3. Speed Arrows */
.speed-arrows {
    display: flex; flex-direction: column; gap: 4px;
    transform: rotate(-90deg) scale(0.85);
}
.arrow-v {
    width: 20px; height: 20px;
    border-top: 5px solid var(--accent-gold);
    border-right: 5px solid var(--accent-gold);
    transform: rotate(45deg);
}
.arrow-v:nth-child(2) { opacity: 0.6; }
.arrow-v:nth-child(3) { opacity: 0.3; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .zigzag-item, .zigzag-item:nth-child(even) {
        flex-direction: column !important;
        text-align: center;
        gap: 20px;
    }
    .zigzag-visual { width: 100%; height: 120px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e433795 *//* --- SUCCESS WAVE SECTION (Reference Image Style) --- */

.success-wave-container {
    position: relative;
    max-width: 1100px;
    margin: 60px auto 40px auto;
    padding: 40px 0;
}

/* The Dashed Line Connector (Background) */
.success-wave-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 2px;
    border-top: 3px dashed #dcdcdc; /* Dashed grey line */
    z-index: 0;
    transform: translateY(-50%) rotate(-2deg); /* Slight tilt to match wave */
}

.success-grid {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.success-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px 20px;
    width: 22%; /* Fits 4 items */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Soft shadow like reference */
    transition: transform 0.3s ease;
    position: relative;
}

.success-card:hover {
    transform: translateY(-10px) scale(1.02) !important; /* Lift on hover */
    box-shadow: 0 20px 40px rgba(37, 4, 68, 0.15);
}

/* Big Number Styling (01, 02...) */
.sc-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--accent-gold); 
    opacity: 0.25; /* Light transparency like the image */
    line-height: 1;
    margin-bottom: 10px;
    font-family: sans-serif; /* Ensures clean geometric numbers */
}

.success-card h3 {
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

.success-card p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0;
    line-height: 1.5;
}

/* --- THE WAVE PATTERN (Positioning) --- */

/* Card 01: Low */
.success-card:nth-child(1) {
    margin-top: 60px;
}

/* Card 02: High + Tilted (Like reference) */
.success-card:nth-child(2) {
    margin-top: 0px;
    transform: rotate(3deg); /* Slight tilt */
}

/* Card 03: Low */
.success-card:nth-child(3) {
    margin-top: 80px;
}

/* Card 04: High */
.success-card:nth-child(4) {
    margin-top: 20px;
}


/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .success-grid {
        flex-direction: column;
        gap: 30px;
    }

    .success-card {
        width: 100%;
        margin-top: 0 !important; /* Reset wave margins */
        transform: none !important; /* Reset tilt */
    }

    /* Hide dashed line on mobile */
    .success-wave-container::before {
        display: none;
    }
}/* End custom CSS */