.elementor-12836 .elementor-element.elementor-element-ab81c3e{--display:flex;--min-height:0px;}.elementor-12836 .elementor-element.elementor-element-19074e2{width:100%;max-width:100%;}.elementor-12836 .elementor-element.elementor-element-19074e2 > .elementor-widget-container{margin:0px 0px 0px 0px;}@media(max-width:767px){.elementor-12836 .elementor-element.elementor-element-19074e2 > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-19074e2 */body {
            font-family: "Century Gothic";
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden; /* Prevent scroll for subtle background effect */
            position: relative; /* Needed for ::before and ::after positioning */
        }

        /* Primary background layer (image_0addc5.png) */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover; /* Ensure it covers the area */
            background-position: top left; /* Starting position for animation */
            opacity: 0.7; /* Adjusted opacity for layered effect */
            animation: moveBackgroundPrimary 30s linear infinite; /* Specific animation for primary */
            z-index: 1; /* Layering order */
        }

        /* Sub background moving layer (sds.webp) */
        body::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://costbook.ph/wp-content/uploads/2025/06/QSI-Cover-Image-C-scaled.webp') no-repeat; /* New image, no-repeat */
            background-size: cover; /* Ensure it covers the area */
            background-position: bottom right; /* Starting position for animation */
            opacity: 0.2; /* Subtle opacity for overlay effect */
            animation: moveBackgroundSecondary 120s linear infinite reverse; /* Different animation and reverse */
            z-index: 2; /* Layering order, slightly above primary but below card */
        }

        @keyframes moveBackgroundPrimary {
            from { background-position: 0% 0%; }
            to { background-position: 100% 100%; }
        }

        @keyframes moveBackgroundSecondary {
            from { background-position: 100% 0%; }
            to { background-position: 0% 100%; }
        }
        
        .qs-wrapper {
          display: inline-block;
          position: relative;
        }
        
        
        .card {
            backdrop-filter: blur(10px); /* Frosted glass effect */
            background-color: #FBFBFB;
            /*background-color: rgba(255, 255, 255, 0.15);  Semi-transparent white */
            border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Stronger shadow */
            border-radius: 15px;
            padding: 1.5rem; /* Increased padding */
            width: 100%;
            max-width: 600px;
            animation: fadeInScale 0.8s ease-out forwards;
            position: relative; /* For z-index */
            z-index: 10; /* Ensure card is above background effects */
            transform-origin: center;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .blue-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /* Gradient overlay with transparency */
          background: linear-gradient(
            to right,
            rgba(59, 130, 246, 0.4),  /* blue-500 at 40% */
            rgba(37, 99, 235, 0.4)    /* blue-700 at 40% */
          );
          z-index: 3;           /* Above bg images but below your content */
          pointer-events: none; /* Clicks pass through */
        }/* End custom CSS */