.elementor-kit-1571{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-ff5ea03:#000DB1;--e-global-color-f4d5058:#FFFFFF;--e-global-color-51c02d4:#61CE7000;--e-global-color-e187ade:#000000;--e-global-color-3a3991c:#3866EC;--e-global-color-3d70ba2:#020527;--e-global-color-d902bae:#CFCFCF;--e-global-color-ff15d11:#099EBD;--e-global-color-c8b4b5a:#1040CE;--e-global-color-761e333:#888888;--e-global-color-f02b78d:#8A0083;--e-global-color-9b979d5:#2D3748;--e-global-color-06ef1dd:#4A5568;--e-global-color-5e4a787:#2D3748;--e-global-color-de5ee78:#2358DE;--e-global-color-b811dc8:#98BBFA;--e-global-color-49b6e5b:#EBEBEB;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-44b3bd4-font-family:"Lexend";--e-global-typography-44b3bd4-font-weight:500;}.elementor-kit-1571 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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 *//* Parent Container - Only positioning */
#AcheivementCard {
    position: relative;
}

/* Vertical Gradient Bar */
#AcheivementCard::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(to bottom, 
        #ff6b6b 0%, 
        #4ecdc4 33%, 
        #45b7d1 66%, 
        #96ceb4 100%);
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 1;
}

/* Container Positioning Only */
#StudentContainer, #CenterContainer, #StationaryContainer {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    margin: 20px 0;
    width: 100%;
}

/* Row 1: Card1-Icon1-Counter1 */
#StudentContainer {
    justify-content: space-between;
}

/* Row 2: Counter2-Icon2-Card2 */
#CenterContainer {
    justify-content: space-between;
}

/* Row 3: Card3-Icon3-Counter3 */
#StationaryContainer {
    justify-content: space-between;
}

/* Icons stick to center bar */
#Icon-student, #Icon-center, #Icon-stationary {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* Left side elements */
#LearnersCard, #Counter-center, #StationaryCard {
    flex: 0 0 auto;
    margin-right: 60px;
}

/* Right side elements */
#Counter-student, #CentersCard, #Counter-stationary {
    flex: 0 0 auto;
    margin-left: 60px;
}

/* Responsive positioning */
@media (max-width: 768px) {
    #StudentContainer, #CenterContainer, #StationaryContainer {
        flex-direction: row;
        justify-content: space-between;
        gap: 15px;
    }
    
    #Icon-student, #Icon-center, #Icon-stationary {
        position: static;
        transform: none;
        order: 1;
    }
    
    #Counter-student, #Counter-center, #Counter-stationary {
        order: 2;
    }
    
    #LearnersCard, #CentersCard, #StationaryCard {
        order: 3;
    }
    
    #LearnersCard, #Counter-center, #StationaryCard {
        margin-right: 0;
    }
    
    #Counter-student, #CentersCard, #Counter-stationary {
        margin-left: 0;
    }
    
    #AcheivementCard::before {
        display: none;
    }
}








/* Floating Balloons and Shapes for Acheivement container */
#Acheivement {
    position: relative;
    overflow: hidden;
    background: linear-gradient(-45deg, rgba(219, 234, 254, 0.3), rgba(191, 219, 254, 0.3), rgba(147, 197, 253, 0.3), rgba(196, 181, 253, 0.3));
    background-size: 400% 400%;
    animation: lightGradientShift 10s ease infinite;
}

.floating-balloon, .floating-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Balloon Styles - Better Distribution */

/* Balloon Styles - Wide Distribution */
.balloon-1 {
    top: 8%;
    left: 3%;
    animation: float1 6s ease-in-out infinite;
}

.balloon-2 {
    top: 70%;
    right: 2%;
    animation: float2 8s ease-in-out infinite;
}

.balloon-3 {
    top: 35%;
    left: 85%;
    animation: float3 7s ease-in-out infinite;
}

.balloon-body {
    width: 40px;
    height: 55px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.balloon-1 .balloon-body {
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
}

.balloon-2 .balloon-body {
    background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}

.balloon-3 .balloon-body {
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
}

.balloon-string {
    width: 2px;
    height: 30px;
    background: rgba(107, 114, 128, 0.6);
    margin: 0 auto;
}

/* Shape Styles - Spread Across Container */
.shape-circle {
    width: 35px;
    height: 35px;
    background: linear-gradient(45deg, #93c5fd, #3b82f6);
    border-radius: 50%;
    top: 15%;
    left: 75%;
    animation: float1 5s ease-in-out infinite reverse;
}

.shape-square {
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #7dd3fc, #0ea5e9);
    transform: rotate(45deg);
    top: 85%;
    left: 20%;
    animation: float2 9s ease-in-out infinite;
}

.shape-triangle {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #a78bfa;
    top: 40%;
    left: 5%;
    animation: float3 6s ease-in-out infinite;
}

.shape-diamond {
    width: 25px;
    height: 25px;
    background: linear-gradient(45deg, #bfdbfe, #60a5fa);
    transform: rotate(45deg);
    top: 60%;
    right: 15%;
    animation: float1 7s ease-in-out infinite;
}

.shape-star {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 7px solid #c4b5fd;
    position: relative;
    top: 10%;
    right: 10%;
    animation: float2 8s ease-in-out infinite;
}

.shape-star:before {
    content: '';
    position: absolute;
    left: -10px;
    top: -5px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 7px solid #c4b5fd;
}

/* Floating Animations */
@keyframes float1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes float3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(8deg); }
}








/* Animated Gradient Backgrounds */
@keyframes lightGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#StudentContainer {
    background: linear-gradient(45deg, rgba(147, 197, 253, 0.2), rgba(59, 130, 246, 0.2));
    background-size: 200% 200%;
    animation: gradientMove 6s ease infinite;
}

#CenterContainer {
    background: linear-gradient(-45deg, rgba(125, 211, 252, 0.2), rgba(14, 165, 233, 0.2));
    background-size: 200% 200%;
    animation: gradientMove 7s ease infinite reverse;
}

#StationaryContainer {
    background: linear-gradient(45deg, rgba(196, 181, 253, 0.2), rgba(99, 102, 241, 0.2));
    background-size: 200% 200%;
    animation: gradientMove 5s ease infinite;
}

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








/* Icon Rotation Animations */
#Icon-student, #Icon-center, #Icon-stationary {
    animation: rotateY 3s linear infinite;
}

/* Y-axis 360 degree rotation */
@keyframes rotateY {
    0% { transform: translateX(-50%) rotateY(0deg); }
    100% { transform: translateX(-50%) rotateY(360deg); }
}

/* Different timing for each icon (optional) */
#Icon-student {
    animation: rotateY 3s linear infinite;
}

#Icon-center {
    animation: rotateY 3.5s linear infinite;
}

#Icon-stationary {
    animation: rotateY 2.5s linear infinite;
}/* End custom CSS */