:root {
    --wrap-w: 1440px;
    --cpw-white: #FFFFFF;
    --cpw-black: #000000;
    --cpw-orange: #FF8137;
    --cpw-yellow: #FFCD05;
    --cpw-grey: #455064;
    --cpw-dark-blue: #111F30;
    --cp-sm: 640px;
    --cp-md: 768px;
    --cp-lg: 1024px;
}

.cpw-section-wrap {
    max-width: var(--wrap-w);
    margin: 0 auto 4rem;
}

footer {
    padding: 0 !important;
}

.cpw-footer {
    font-family: "Inter",sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--cpw-grey);

    p {
        margin: 0;
    }

    .cpw-footer-content {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 2rem 0;
        gap: 1rem;
        margin-bottom: 0;

        > div {
            
            &:last-child {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                font-family: "Inter Tight", sans-serif;
                font-size: 1.125rem;
                font-weight: 600;
                color: var(--cpw-white);
                margin-bottom: 1rem;
            }

            h4 {
                font-family: "Inter Tight", sans-serif;
                font-size: 1.125rem;
                font-weight: 600;
                color: var(--cpw-white);
                margin-bottom: 1rem;
            }

            p {
                font-size: 1rem;
                font-weight: 400;
                color: var(--cpw-white);
                margin-bottom: 0.5rem;
                display: flex;
                align-items: flex-start;
            }

            span {
                display: inline-block;
                text-decoration: inherit;
           }

            .cpw-footer-icon {
                width: 17px;
                display: inline-block;
                margin: 2px 0.4rem 0 0;
                vertical-align: middle;
            }

            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            a {
                text-decoration: none;
                color: var(--cpw-white);
                display: inline-block;

                &:hover {
                    text-decoration: underline;
                    text-decoration-thickness: 1px;
                }
            }

            img {
                width: 100%;
                object-fit: contain;
                display: block;
            }
            
        }

    }

    .cpw-footer-copyright {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        margin-bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.10);

        > div:first-child {
            flex: 0 0 60%;
        }

        > div:last-child {
            flex: 0 0 40%;
            display: flex;
            gap: 2rem;
            justify-content: flex-end;
        }

        p {
            color: var(--cpw-white);
            font-size: 0.8125rem;

            a {
                color: var(--cpw-orange);
            }
        }
        
        a {
            text-decoration: none;
            color: var(--cpw-white);
            display: inline-block;
            font-size: 0.8125rem;

            &:hover {
                text-decoration: underline;
                text-decoration-thickness: 1px;
            }
        }
        
    }

}

/* Responsive */
@media (max-width: 1500px) {

    .cpw-footer {
        padding: 0 1rem !important; 
    }

}

@media (max-width: 900px) {
    
    .cpw-footer {

        .cpw-footer-content {
            display: flex;
            flex-direction: column;
            padding: 2rem 0;
            margin-bottom: 0;

            > div {
                flex: 0 0 33.333333%;

                &:first-child {
                    margin-bottom: 2rem;
                }

                &:nth-child(2) {
                    margin-bottom: 1rem;
                }

                &:last-child {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                h4 {
                    font-family: "Inter Tight", sans-serif;
                    font-size: 1.125rem;
                    font-weight: 600;
                    color: var(--cpw-white);
                    margin-bottom: 1rem;
                }

                p {
                    font-size: 1rem;
                    font-weight: 400;
                    color: var(--cpw-white);
                }

                .cpw-footer-icon {
                    width: 17px;
                    display: inline-block;
                    margin: 2px 0.4rem 0 0;
                    vertical-align: middle;
                }

                ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                a {
                    text-decoration: none;
                    color: var(--cpw-white);
                    display: inline-block;

                    &:hover {
                        text-decoration: underline;
                        text-decoration-thickness: 1px;
                    }
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    display: block;
                }
            }

        }

        .cpw-footer-copyright {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;

            > div {
                flex: 0 0 50%;

                &:first-child {
                    order: 2;
                }

                &:last-child {
                    order: 1;
                    gap: 1rem;
                }
            }
            
        }

    }

}