.elementor-kit-442{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#0F0F0F;--e-global-color-accent:#61CE70;--e-global-color-5da5dd6:#D4EEFA;--e-global-typography-primary-font-family:"Comfortaa";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Comfortaa";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Comfortaa";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Comfortaa";--e-global-typography-accent-font-weight:500;background-image:url("https://m365recruit.com/wp-content/uploads/2025/09/404-Background-Image-1.png");}.elementor-kit-442 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:-4px;--container-default-padding-bottom:0px;--container-default-padding-left:19px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@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 *//* === ELEMENTOR COMPATIBILITY ==== */
.elementor-section.orbit-section-wrapper,
.elementor-section.orbit-section-wrapper .elementor-container,
.elementor-widget-html .orbit-wrapper,
.orbit-wrapper,
.orbit-container {
    background: none !important;
    background-color: transparent !important;
    overflow: visible !important;
}

/* === ELEMENTOR SECTION STYLES ==== */
.elementor-section.orbit-section-wrapper {
    margin: 0;
    padding: 0;
    overflow: visible !important;
}
.elementor-section.orbit-section-wrapper .elementor-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible !important;
}
.elementor-widget-html {
    overflow: visible !important;
}
.orbit-wrapper {
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--e-global-typography-text-font-family, Arial, sans-serif);
    background: transparent;
}
.orbit-container {
    position: relative;
    width: 771.244px;
    height: 875.214px;
    border-radius: 20px;
    overflow: visible;
    background: transparent;
}
/* Tablet Landscape */
@media (max-width: 1024px) and (min-width: 851px) {
    .orbit-container { transform: scale(0.85); transform-origin: center center; }
}

/* Tablet Portrait */
@media (max-width: 850px) and (min-width: 768px) {
    .orbit-container { transform: scale(0.75); transform-origin: center center; }
}

/* Large Mobile */
@media (max-width: 767px) and (min-width: 651px) {
    .orbit-container { transform: scale(0.65); transform-origin: center center; }
    .orbit-wrapper { padding: 30px 15px; }
}

/* Medium Mobile */
@media (max-width: 650px) and (min-width: 481px) {
    .orbit-container { transform: scale(0.55); transform-origin: center center; }
    .orbit-wrapper { padding: 25px 10px; }
    .profile-title { font-size: 10px; padding: 5px 10px 5px 24px; }
    .profile-title::before { width: 10px; height: 10px; left: 7px; }
}

/* Small Mobile */
@media (max-width: 480px) and (min-width: 376px) {
    .orbit-container { transform: scale(0.48); transform-origin: center center; }
    .orbit-wrapper { padding: 20px 10px; }
    .profile-title { font-size: 9px; padding: 4px 8px 4px 20px; }
    .profile-title::before { width: 8px; height: 8px; left: 6px; }
    .profile { border: 3px solid white; }
    .profile-badge { width: 22px; height: 22px; bottom: -3px; right: -3px; }
    .moving-orbit-ring.inner .dot-big { width: 32px; height: 32px; }
    .moving-orbit-ring.middle .dot-big { width: 32px; height: 32px; }
    .moving-orbit-ring.outer .dot-big { width: 32px; height: 32px; }
    .moving-orbit-ring.inner .dot-small { width: 10px; height: 10px; }
    .moving-orbit-ring.middle .dot-small { width: 12px; height: 12px; }
    .moving-orbit-ring.outer .dot-small { width: 14px; height: 14px; }
}

/* Extra Small Mobile */
@media (max-width: 375px) {
    .orbit-container { transform: scale(0.42); transform-origin: center center; }
    .orbit-wrapper { padding: 15px 5px; }
    .profile-title { font-size: 8px; padding: 4px 7px 4px 18px; }
    .profile-title::before { width: 7px; height: 7px; left: 5px; }
    .profile { border: 2px solid white; }
    .profile-badge { width: 20px; height: 20px; bottom: -2px; right: -2px; }
    .moving-orbit-ring.inner .dot-big { width: 28px; height: 28px; }
    .moving-orbit-ring.middle .dot-big { width: 28px; height: 28px; }
    .moving-orbit-ring.outer .dot-big { width: 28px; height: 28px; }
    .moving-orbit-ring.inner .dot-small { width: 8px; height: 8px; }
    .moving-orbit-ring.middle .dot-small { width: 10px; height: 10px; }
    .moving-orbit-ring.outer .dot-small { width: 12px; height: 12px; }
}

/* SVG Orbit Lines */
.svg-orbit-line {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.svg-orbit-line svg circle {
    stroke: #97DFF340 !important;  
}
.orbit-line.line-3 {
    width: 746.555px;
    height: 746.555px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
}
.orbit-line.line-3::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    outline: 2px solid #97DFF340 !important;
    pointer-events: none;
}

/* Center Logo */
.center-logo-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 162px;
    height: 162px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    pointer-events: none;
}
.logo-foreground-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fff 0%,
        rgba(255,255,255,0.57) 50%,
        rgba(255,255,255,0.06) 100%
    );
    z-index: 102;
    opacity: 0.5;
}
.bright-glow-circle {
    animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
    0%, 100% {
        box-shadow:
            0 0 40px 15px white,
            0 0 60px 25px rgba(255, 255, 255, 0.24),
            0 0 80px 35px rgba(255, 255, 255, 0.08);
    }
    50% {
        box-shadow:
            0 0 50px 20px white,
            0 0 70px 30px rgba(255, 255, 255, 0.24),
            0 0 90px 40px rgba(255, 255, 255, 0.08);
    }
}
.logo-grid-large {
    position: relative;
    width: 80%;
    height: 80%;
    object-fit: contain;
    z-index: 111;
    pointer-events: auto;
}

/* === PROFILES ARE STATIC ON THE ORBIT LINE === */
.profile-container {
    position: absolute;
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform-style: preserve-3d;
}

/* Profile styles */
.profile {
    position: relative;
    border-radius: 50% !important;
    overflow: visible;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
    background: white;
    width: 74px;
    height: 74px;
    padding: 4px;
    box-sizing: border-box;
}
.profile-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 66px !important;
    max-height: 66px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: white;
    object-fit: cover;
    display: block;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}
.profile-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 29px;
    height: 29px;
}

.profile-badge img {
    width: 100%;
    height: 100%;
}

/* === PROFILE TITLE STYLES (MATCHING IMAGE 1) === */
.profile-title {
    font-family: Inter, var(--e-global-typography-text-font-family, Arial, sans-serif);
    font-weight: 500;
    font-size: 10.5px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #333;
    white-space: nowrap;
    background: white;
    /* Padding creates space on the left for the dot and the gap */
    padding: 6px 12px 6px 28px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    overflow: visible;
}

/* Add ellipse marker */
.profile-title::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #05AFF2;
    background: transparent;
    opacity: 1;
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

/* Different colors for each profile */
.profile-container:nth-child(4) .profile-title::before { border-color: #05AFF2; } /* Power Automate Engineer - Blue */
.profile-container:nth-child(4) .profile-title { color: #05AFF2; }

.profile-container:nth-child(5) .profile-title::before { border-color: #9F550B; } /* Power Automate Engineer - Orange */
.profile-container:nth-child(5) .profile-title { color: #9F550B; }

.profile-container:nth-child(6) .profile-title::before { border-color: #84bf04; } /* SharePoint Developer - Green */
.profile-container:nth-child(6) .profile-title { color: #84bf04; }

.profile-container:nth-child(7) .profile-title::before { border-color: #f23e16; } /* Power BI Data Analyst - Red */
.profile-container:nth-child(7) .profile-title { color: #f23e16; }

.profile-container:nth-child(8) .profile-title::before { border-color: #9b59b6; } /* Identity Administrator - Purple */
.profile-container:nth-child(8) .profile-title { color: #9b59b6; }

.profile-container:nth-child(9) .profile-title::before { border-color: #e91e63; } /* Power Automate Engineer - Pink */
.profile-container:nth-child(9) .profile-title { color: #e91e63; }

.profile-container:nth-child(10) .profile-title::before { border-color: #05AFF2; } /* M365 Admin at 6 o'clock - Blue */
.profile-container:nth-child(10) .profile-title { color: #05AFF2; }

.profile-container:nth-child(11) .profile-title::before { border-color: #ff9800; } /* MS Lists Specialist - Amber */
.profile-container:nth-child(11) .profile-title { color: #ff9800; }

/* Add hover effect */
.profile-title:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Moving Orbit Rings */
.moving-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.moving-orbit-ring.paused-anim {
    animation-play-state: paused !important;
}
.moving-orbit-ring.inner {
    width: 419px;
    height: 419px;
}
.moving-orbit-ring.middle {
    width: 593px;
    height: 593px;
}
.moving-orbit-ring.outer {
    width: 746.555px;
    height: 746.555px;
    z-index: 3;
}

/* Orbit Dots */
.orbit-dot {
    position: absolute;
    top: 0;
    left: 50%;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.13);
    transition: all 0.3s ease;
}
.moving-orbit-ring.inner .dot-big {
    width: 40px;
    height: 40px;
    margin-top: -15px;
    margin-left: -15px;
}
.moving-orbit-ring.inner .dot-small {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
}
.moving-orbit-ring.middle .dot-big {
    width: 40px;
    height: 40px;
    margin-top: -17px;
    margin-left: -17px;
}
.moving-orbit-ring.middle .dot-small {
    width: 16.57px;
    height: 16.57px;
    margin-top: -6px;
    margin-left: -6px;
}
.moving-orbit-ring.outer .dot-big {
    width: 40px;
    height: 40px;
    margin-top: -19px;
    margin-left: -19px;
}
.moving-orbit-ring.outer .dot-small {
    width: 18px;
    height: 18px;
    margin-top: -12px;
    margin-left: -12px;
}

/* Dot Colors */
.dot-blue {
    background: linear-gradient(99.07deg, #99E2FF 17.36%, #05AFF2 90.24%);
    filter: drop-shadow(-14px 27px 34.2px rgba(9, 72, 86, 0.11));
}
.dot-orange {
    background: linear-gradient(26deg, #ffc299 16.97%, #f23e16 81.94%);
    filter: drop-shadow(-14px 27px 34.2px rgba(9, 72, 86, 0.11));
}
.dot-yellow {
    background: linear-gradient(99deg, #ffdb99 7.02%, #f29f05 79.72%);
    filter: drop-shadow(-14px 27px 34.2px rgba(9, 72, 86, 0.11));
}
.dot-green {
    background: linear-gradient(191deg, #dfff99 13.51%, #84bf04 78.01%);
    filter: drop-shadow(-14px 27px 34.2px rgba(9, 72, 86, 0.11));
}

/* Orbit Animations */
.moving-orbit-ring.inner.d1 { animation: orbitSpinCW 60s linear infinite; }
.moving-orbit-ring.inner.d2 { animation: orbitSpinCW 65s linear infinite; }
.moving-orbit-ring.inner.d3 { animation: orbitSpinCW 70s linear infinite; }
.moving-orbit-ring.inner.d4 { animation: orbitSpinCW 75s linear infinite; }

.moving-orbit-ring.middle.d1 { animation: orbitSpinACW 80s linear infinite; }
.moving-orbit-ring.middle.d2 { animation: orbitSpinACW 80s linear infinite; animation-delay: -20s; }
.moving-orbit-ring.middle.d3 { animation: orbitSpinACW 80s linear infinite; animation-delay: -40s; }
.moving-orbit-ring.middle.d4 { animation: orbitSpinACW 80s linear infinite; animation-delay: -60s; }

.moving-orbit-ring.outer.d1 { animation: orbitSpinCW 100s linear infinite; }
.moving-orbit-ring.outer.d4 { animation: orbitSpinCW 100s linear infinite; animation-delay: -50s; }

/* Dot Rotation Positions */
.orbit-dot.r0 { transform: translate(-50%, 0) rotate(0deg); }
.orbit-dot.r90 { transform: translate(-50%, 0) rotate(90deg); }
.orbit-dot.r180 { transform: translate(-50%, 0) rotate(180deg); }
.orbit-dot.r270 { transform: translate(-50%, 0) rotate(270deg); }

/* Keyframes for Orbit Spin */
@keyframes orbitSpinCW {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbitSpinACW {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}/* End custom CSS */