.elementor-9377 .elementor-element.elementor-element-8aeedcd{--display:flex;--min-height:40vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9377 .elementor-element.elementor-element-8aeedcd::before, .elementor-9377 .elementor-element.elementor-element-8aeedcd > .elementor-background-video-container::before, .elementor-9377 .elementor-element.elementor-element-8aeedcd > .e-con-inner > .elementor-background-video-container::before, .elementor-9377 .elementor-element.elementor-element-8aeedcd > .elementor-background-slideshow::before, .elementor-9377 .elementor-element.elementor-element-8aeedcd > .e-con-inner > .elementor-background-slideshow::before, .elementor-9377 .elementor-element.elementor-element-8aeedcd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://sanctusworldschool.com/wp-content/uploads/2025/09/0S3A8486.jpg");--background-overlay:'';background-position:center center;background-size:cover;}.elementor-9377 .elementor-element.elementor-element-8aeedcd::before{filter:brightness( 50% ) contrast( 100% ) saturate( 50% ) blur( 0px ) hue-rotate( 0deg );}.elementor-9377 .elementor-element.elementor-element-72f25be .elementor-heading-title{font-family:"Bebas Neue", Sans-serif;font-size:14vw;font-weight:700;letter-spacing:1px;color:#F4AB4B;}.elementor-9377 .elementor-element.elementor-element-8e647b0{--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-9377 .elementor-element.elementor-element-c85262a{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-9377 .elementor-element.elementor-element-c85262a:after{content:"0.66";}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__thumbnail__link{width:100%;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__meta-data span + span:before{content:"•";}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__card{border-radius:12px;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__text{margin-top:20px;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__card .elementor-post__badge{margin:20px;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__title, .elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__title a{color:#F4AB4B;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__excerpt p{color:#FFFFFF;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__read-more{color:var( --e-global-color-ce1effd );}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-9377 .elementor-element.elementor-element-c85262a .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-9377 .elementor-element.elementor-element-c85262a .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-9377 .elementor-element.elementor-element-c85262a .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-9377 .elementor-element.elementor-element-c85262a .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-9377 .elementor-element.elementor-element-c607f34{--display:flex;}@media(max-width:1024px){.elementor-9377 .elementor-element.elementor-element-72f25be{text-align:center;}.elementor-9377 .elementor-element.elementor-element-72f25be .elementor-heading-title{font-size:18vw;}}@media(max-width:767px){.elementor-9377 .elementor-element.elementor-element-8aeedcd{--min-height:30vh;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9377 .elementor-element.elementor-element-72f25be{text-align:center;}.elementor-9377 .elementor-element.elementor-element-72f25be .elementor-heading-title{font-size:20vw;letter-spacing:1px;word-spacing:-10px;}.elementor-9377 .elementor-element.elementor-element-8e647b0{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-9377 .elementor-element.elementor-element-c85262a:after{content:"0.5";}.elementor-9377 .elementor-element.elementor-element-c85262a .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS *//* Elementor Layered Card Hover Effects - Container Method */

    /* Main wrapper for each blog card */
    .blog-card-wrapper {
        position: relative !important;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* First shadow layer - deepest layer with dramatic depth */
    .card-shadow-layer-1 {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #23275f !important;
        border: 2px solid #f4ab4b !important;
        border-radius: 12px !important;
        z-index: 1 !important;
        transform: translate(0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0.5;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    /* Second shadow layer - middle layer with uniform spacing */
    .card-shadow-layer-2 {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #23275f !important;
        border: 2px solid #f4ab4b !important;
        border-radius: 12px !important;
        z-index: 2 !important;
        transform: translate(0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0.75;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* Base layer - main card with content (top layer) */
    .card-base-layer {
        position: relative !important;
        z-index: 3 !important;
        background: #23275f !important;
        border: 2px solid #f4ab4b !important;
        border-radius: 12px !important;
        transform: translate(0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 1.5rem;
        overflow: hidden;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    }

    /* Hover animations for perfectly uniform 8px spacing between layers */
    .blog-card-wrapper:hover .card-shadow-layer-1 {
        transform: translate(16px, 16px);
        opacity: 1;
    }

    .blog-card-wrapper:hover .card-shadow-layer-2 {
        transform: translate(8px, 8px);
        opacity: 1;
    }

    .blog-card-wrapper:hover .card-base-layer {
        transform: translate(0px, 0px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }

    /* Content styling within base layer */
    .card-base-layer .elementor-heading-title,
    .card-base-layer .elementor-heading-title a {
        color: #f4ab4b !important;
        margin-bottom: 1rem;
        text-decoration: none;
    }

    .card-base-layer .elementor-heading-title a:hover {
        color: #ffffff !important;
    }

    .card-base-layer .elementor-text-editor,
    .card-base-layer .elementor-text-editor p {
        color: #ffffff !important;
        margin-bottom: 1.5rem;
    }

    .card-base-layer .elementor-button-wrapper .elementor-button {
        background: transparent !important;
        color: #f4ab4b !important;
        border: 1px solid #f4ab4b !important;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .card-base-layer .elementor-button-wrapper .elementor-button:hover {
        background: #f4ab4b !important;
        color: #23275f !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(244, 171, 75, 0.3);
    }

    /* Image styling */
    .card-base-layer .elementor-image img {
        width: 100%;
        height: auto;
        border-radius: 8px 8px 0 0;
        margin-bottom: 1rem;
    }

    /* Meta information styling */
    .card-base-layer .elementor-post-info {
        color: #ffffff !important;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .card-base-layer .elementor-post-info a {
        color: #f4ab4b !important;
        text-decoration: none;
    }

    .card-base-layer .elementor-post-info a:hover {
        color: #ffffff !important;
    }

    /* Category badge styling */
    .card-base-layer .elementor-post-info__terms-list {
        display: inline-block;
        background: #f4ab4b !important;
        color: #23275f !important;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .blog-card-wrapper:hover .card-base-layer .elementor-post-info__terms-list {
        background: #ffffff !important;
        color: #23275f !important;
        transform: translateY(-2px);
    }

    /* Ensure containers have proper spacing */
    .elementor-posts-container,
    .elementor-widget-posts {
        padding: 30px !important;
        overflow: visible !important;
    }

    /* Grid layout adjustments */
    .elementor-posts .elementor-post {
        margin-bottom: 0 !important;
        /* Remove default margins since we're using wrapper margins */
    }

    /* Mobile responsiveness for dramatic 3-layer effect */
    @media (max-width: 768px) {
        .blog-card-wrapper {
            margin-bottom: 2rem;
        }

        .blog-card-wrapper:hover .card-shadow-layer-1 {
            transform: translate(10px, 10px);
        }

        .blog-card-wrapper:hover .card-shadow-layer-2 {
            transform: translate(5px, 5px);
        }

        .blog-card-wrapper:hover .card-base-layer {
            transform: translate(0px, 0px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
        }

        .card-base-layer {
            padding: 1rem;
        }

        .elementor-posts-container,
        .elementor-widget-posts {
            padding: 20px !important;
        }
    }/* End custom CSS */