.elementor-kit-1741{--e-global-color-primary:#FAFAFA;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:lowercase;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:normal;--e-global-typography-secondary-text-transform:lowercase;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:normal;--e-global-typography-text-text-transform:lowercase;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-1741 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. The Container - The Universe */
.orbit-wrapper {
    position: relative;
    min-height: 1200px;
    width: 100%;
    overflow: visible; /* Changed from hidden to visible */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. The Center Planet (Your Image) */
.orbit-center {
    position: absolute;
    /* This forces the image to be dead center regardless of size */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: auto; 
    max-width: 250px;
}

/* 3. The Satellites (Your 5 items) */
.orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* CRITICAL: We fix the item size so they don't stretch */
    width: 120px; 
    height: auto;
    min-height: 80px;
    padding: 10px;
    
    /* CRITICAL: We pull the item back by half its size to center the pivot point */
    margin-left: -60px; 
    margin-top: -40px;
    
    z-index: 5;
    /* Optional: styling to make sure text/icons inside look good */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    animation: orbit-rotation 20s linear infinite;
}

/* 4. The Animation Loop */
@keyframes orbit-rotation {
    from {
        /* translateX(400px) is the Radius */
        transform: rotate(0deg) translateX(400px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(400px) rotate(-360deg);
    }
}

/* 5. Positioning the 6 Items (360 / 6 = 72deg delay steps) */
.orbit-item:nth-of-type(1) { animation-delay: 0s; }
.orbit-item:nth-of-type(2) { animation-delay: -3.5s; }
.orbit-item:nth-of-type(3) { animation-delay: -6.5s; }
.orbit-item:nth-of-type(4) { animation-delay: -9.5s; }
.orbit-item:nth-of-type(5) { animation-delay: -12.5s; }
.orbit-item:nth-of-type(6) { animation-delay: -16s; }

/* ============================================
   RESPONSIVE DESIGN - TABLET (768px and below)
   ============================================ */
@media (max-width: 768px) {
    .orbit-wrapper {
        min-height: 700px;
        padding: 50px 20px;
    }
    
    .orbit-center {
        max-width: 160px;
    }
    
    .orbit-item {
        width: 100px;
        min-height: 70px;
        padding: 8px;
        margin-left: -50px;
        margin-top: -35px;
        font-size: 13px;
    }
    
    /* Smaller orbit radius for tablets */
    @keyframes orbit-rotation {
        from {
            transform: rotate(0deg) translateX(240px) rotate(0deg);
        }
        to {
            transform: rotate(360deg) translateX(240px) rotate(-360deg);
        }
    }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE (480px and below)
   ============================================ */
@media (max-width: 480px) {
    .orbit-wrapper {
        min-height: 550px;
        padding: 40px 15px;
    }
    
    .orbit-center {
        max-width: 130px;
    }
    
    .orbit-item {
        width: 85px;
        min-height: 60px;
        padding: 6px;
        margin-left: -42px;
        margin-top: -30px;
        font-size: 11px;
    }
    
    /* Smaller orbit radius for mobile */
    @keyframes orbit-rotation {
        from {
            transform: rotate(0deg) translateX(165px) rotate(0deg);
        }
        to {
            transform: rotate(360deg) translateX(165px) rotate(-360deg);
        }
    }
}

/* ============================================
   RESPONSIVE DESIGN - SMALL MOBILE (380px and below)
   ============================================ */
@media (max-width: 380px) {
    .orbit-wrapper {
        min-height: 500px;
        padding: 35px 10px;
    }
    
    .orbit-center {
        max-width: 110px;
    }
    
    .orbit-item {
        width: 75px;
        min-height: 55px;
        padding: 5px;
        margin-left: -37px;
        margin-top: -27px;
        font-size: 10px;
    }
    
    /* Even smaller orbit radius for very small screens */
    @keyframes orbit-rotation {
        from {
            transform: rotate(0deg) translateX(140px) rotate(0deg);
        }
        to {
            transform: rotate(360deg) translateX(140px) rotate(-360deg);
        }
    }
}

/* ============================================
   EXTRA SMALL MOBILE (320px and below)
   ============================================ */
@media (max-width: 320px) {
    .orbit-wrapper {
        min-height: 450px;
        padding: 30px 5px;
    }
    
    .orbit-center {
        max-width: 95px;
    }
    
    .orbit-item {
        width: 65px;
        min-height: 50px;
        padding: 4px;
        margin-left: -32px;
        margin-top: -25px;
        font-size: 9px;
    }
    
    /* Smallest orbit radius */
    @keyframes orbit-rotation {
        from {
            transform: rotate(0deg) translateX(120px) rotate(0deg);
        }
        to {
            transform: rotate(360deg) translateX(120px) rotate(-360deg);
        }
    }
}/* End custom CSS */