.elementor-5872 .elementor-element.elementor-element-aecff23{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5872 .elementor-element.elementor-element-0f05194{--display:flex;--min-height:631px;}.elementor-5872 .elementor-element.elementor-element-34251e6{--display:flex;}.elementor-5872 .elementor-element.elementor-element-34251e6:not(.elementor-motion-effects-element-type-background), .elementor-5872 .elementor-element.elementor-element-34251e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2E4441;}.elementor-5872 .elementor-element.elementor-element-a089555{--display:grid;--min-height:600px;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:stretch;--align-items:stretch;}.elementor-5872 .elementor-element.elementor-element-3545ea9 > .elementor-widget-container{background-color:#2E4441;padding:0px 0px 0px 0px;}.elementor-5872 .elementor-element.elementor-element-3545ea9.elementor-element{--align-self:flex-end;}.elementor-5872 .elementor-element.elementor-element-3545ea9{z-index:3;text-align:left;font-family:"Roboto", Sans-serif;font-weight:400;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5872 .elementor-element.elementor-element-24f994a > .elementor-widget-container{background-color:#D8DDE300;margin:0px 0px 0px 0px;padding:18px 18px 18px 18px;}.elementor-5872 .elementor-element.elementor-element-24f994a{grid-column:span 1;top:0px;}body:not(.rtl) .elementor-5872 .elementor-element.elementor-element-24f994a{left:0px;}body.rtl .elementor-5872 .elementor-element.elementor-element-24f994a{right:0px;}.elementor-5872 .elementor-element.elementor-element-04e3c3f{--display:flex;}@media(max-width:1200px){.elementor-5872 .elementor-element.elementor-element-a089555{--grid-auto-flow:row;}}@media(max-width:1024px){.elementor-5872 .elementor-element.elementor-element-a089555{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-5872 .elementor-element.elementor-element-0f05194{--min-height:412px;}.elementor-5872 .elementor-element.elementor-element-a089555{--min-height:155px;--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for text-editor, class: .elementor-element-3545ea9 */.left_col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Keeps content at the bottom */
    align-self: stretch; /* Makes the column take full height */
    height: 100%; /* Ensures it takes the full grid height */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-24f994a *//* Ensure the spinner container is responsive */
.zodiac-container {
    position: relative;
    width: 100%; /* Full width for responsiveness */
    max-width: 600px; /* Prevents it from getting too large */
    height: auto;
    aspect-ratio: 1/1; /* Keeps the container square */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Zodiac Spinner (Rotating Image) */
.zodiac-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    transform-origin: center;
    animation: spin 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform;
}

/* Zodiac Matches Overlay (Ensures Numbers Stay in Place) */
.zodiac-matches {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 3;
}

/* Responsive Adjustments for Smaller Screens */
@media screen and (max-width: 768px) {
    .zodiac-container {
        max-width: 90vw; /* Limits to 90% of viewport width */
        height: auto;
    }

    .zodiac-spinner {
        max-width: 90vw; /* Ensures proportional scaling */
        max-height: 90vw;
    }
}

/* Smooth Rotation Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); } /* 3 full spins */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a089555 */.elementor-container {
    overflow: hidden; /* Prevents any content from bleeding out */
}
@media (max-width: 767px) { /* Target mobile screens */
    .left_col { 
        width: 30% !important; /* Adjust to a narrower width */
    }

    .center_col {
        width: 40% !important; /* Balance center image */
    }

    .right_col {
        width: 30% !important; /* Keep the right column proportional */
    }
}
@media (max-width: 767px) { /* Mobile screens */
    .your-grid-container { 
        display: grid;
        grid-template-columns: 1fr; /* Stack everything in one column */
        justify-items: center; /* Ensures center alignment */
        text-align: center;
    }

    .center-column {
        width: 100% !important; /* Ensures full responsiveness */
        display: flex;
        justify-content: center; /* Keep it centered */
        align-items: center;
    }

    .zodiac-spinner {
        width: 80vw !important; /* Adjust to fit mobile screens */
        max-width: 300px !important; /* Prevent oversizing */
        height: auto !important;
        transform-origin: center center !important; /* Prevents wobble */
    }
}/* End custom CSS */