:root {
            /* Core colors */
            --footer-cloud-color: #ff6900;
            --footer-text-color: #ffffff;
            --footer-link-color: #ffffff;
            /* Accent / brand */
            --footer-accent-color: #50bacd;
            --footer-logo-bg: #50bacd;
            /* Social icons */
            --footer-social-bg: #ffffff;
            --footer-social-icon: #ff6900;
        }
        
        
        body.page-id-6756, body.page-id-7340 {
          --footer-cloud-color: #50bacd;   /* blue cloud */
          --footer-accent-color: #008fa5;
          --footer-social-icon: #008fa5;
          --footer-logo-bg: #E4592B;
        }
        
        .footer-social a {
            width: 34px;
            height: 34px;
            background: var(--footer-social-bg);
            color: var(--footer-social-icon);
            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            text-decoration: none;
            font-size: 14px;
        }

        /* SVG specific */
        .footer-social a svg {
            width: 14px;
            height: 14px;
            fill: var(--footer-social-icon);
        }


        .main-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #333;
            text-align: center;
        }

        /* ===============================
        FOOTER
        ================================ */
        /* FOOTER */
        .footer {
            font-family: 'Montserrat', Arial, Helvetica, sans-serif;
            position: relative;
            width: 100%;
            height: 500px;
            /* cloud height */
            overflow: hidden;
            background: transparent;
            /* IMPORTANT */
            color: var(--footer-text-color);
        }

        /* CLOUD */
        .footer-cloud {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        .footer-cloud svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Cloud color */
        .footer-cloud .cloud-path {
            fill: var(--footer-cloud-color);
        }


        /* ===============================
        FOOTER CONTENT
        ================================ */

        .footer-inner {
            position: relative;
            z-index: 2;

            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px 70px;

            height: 90%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            transform: translateY(20px);
        }


        /* LOGO */
        .footer-logo {
            justify-content: center;
            background: var(--footer-logo-bg);
            color: var(--footer-text-color);
            border-radius: 22px;
            font-weight: 700;
            font-size: 14px;
            white-space: nowrap;
            margin-bottom: -15px;
        }

        .footer-logo span {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
        }

        /* NAV */
        .footer-nav {
            display: flex;
            gap: 30px;
        }

        .footer-nav a {
            color: var(--footer-link-color);
            text-decoration: none;
            font-size: 13px;
            letter-spacing: 0.5px;
        }

        .footer-nav a:hover {
            opacity: 0.85;
        }

        /* SOCIAL */
        .footer-social {
            display: flex;
            gap: 12px;
        }

        .footer-social a {
            width: 34px;
            height: 34px;
            background: var(--footer-social-bg);
            color: var(--footer-social-icon);
            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 14px;
            text-decoration: none;
        }


        .footer-social a svg path {
            fill: var(--footer-social-icon) !important;
        }

        /* ===============================
        RESPONSIVE
        ================================ */
        /* ===============================
        RESPONSIVE – MOBILE FOOTER
        ================================ */
        @media (max-width: 1021px) {

            .footer-inner {
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                height: 105%;
                gap: 30px;
                font-size: 56px;
                transform: none;
                text-align: center;
            }

            .footer-logo {
                background: none;
                /* match your reference image */
                padding: 0;
                font-size: 36px;
            }

            .footer-logo span {
                font-size: 13px;
                margin-top: 6px;
                opacity: 0.9;
            }

            .footer-social {
                margin-top: 6px;
            }

            .footer-nav {
                flex-direction: column;
                gap: 10px;
                margin-top: 10px;
            }

            .footer-nav a {
                font-size: 16px;
                letter-spacing: 1px;
            }

            .footer {
                position: relative;
                background: linear-gradient(to bottom,
                        #ffffff 0%,
                        #ffffff 20%,
                        var(--footer-cloud-color) 35%,
                        var(--footer-cloud-color) 100%);
                overflow: hidden;
            }

            .footer-cloud {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                height: 180px;
                background: var(--wg-blue);
                overflow: hidden;
                pointer-events: none;
                z-index: 1;
            }

            .footer-cloud svg {
                width: 100%;
                height: 100%;
                display: block;
            }

            .footer-inner {
                position: relative;
                z-index: 2;
                padding-top: 180px;
                /* same as cloud height */
            }

            .footer-cloud {
                margin-top: -1px;
            }




















            .footer-social {
                order: 2;
            }

            .footer-nav {
                order: 3;
            }

            .footer-logo svg {
                height: 70px;
                width: auto;
                margin-right: 60px;
            }

            .footer-logo svg .logo-detail {
                display: none;
            }

        }