.download-buttons {
    .buttons {
        margin-top: 50px;

        @media screen and (max-width: 991px) {
            margin-top: 40px;
        }
        @media screen and (max-width: 576px) {
            margin-top: 30px;
        }
        .button-inner {
            position: relative;
            display: block;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
            overflow: hidden;
            padding: 40px 60px 50px;
            height: 100%;
            
            @media screen and (max-width: 1500px) {
                padding: 30px 50px 40px;
            }
            @media screen and (max-width: 768px) {
                padding: 30px 40px 40px;
            }
            @media screen and (max-width: 576px) {
                padding: 30px 30px 40px;
            }
            &:hover, &:focus-visible {
                &:after {
                    bottom: 45px;

                    @media screen and (max-width: 1500px) {
                        bottom: 35px;
                    }
                    @media screen and (max-width: 576px) {
                        bottom: 25px;
                    }
                }
            }
            &:after {
                content: '';
                position: absolute;
                bottom: 60px;
                right: 35px;
                width: 110px;
                height: 110px;
                background-image: url('../../../assets/svg/download.svg');
                background-size: cover;
                background-repeat: no-repeat;
                transition: .3s ease;

                @media screen and (max-width: 1500px) {
                    width: 90px;
                    height: 90px;
                    right: 25px;
                    bottom: 50px;
                }
                @media screen and (max-width: 576px) {
                    width: 50px;
                    height: 50px;
                    bottom: 40px;
                }
            }
            &.green-bg {
                &:hover, &:focus-visible {
                    background-color: #038437;
                    color: var(--color-white);
                }
            }
            &.purple-bg {
                &:hover, &:focus-visible {
                    background-color: #7F00BF;
                    color: var(--color-white);
                }
            }
            .button-icon {
                margin-bottom: 30px;

                @media screen and (max-width: 1500px) {
                    margin-bottom: 20px;
                }
                img {
                    width: auto;
                    height: 100px;

                    @media screen and (max-width: 1500px) {
                        height: 80px;
                    }
                    @media screen and (max-width: 576px) {
                        height: 60px;
                    }
                }
            }
            .button-content {
                width: calc(100% - 120px);

                @media screen and (max-width: 1500px) {
                    width: calc(100% - 90px);
                }
                @media screen and (max-width: 576px) {
                    width: calc(100% - 60px);
                }
                h3 {
                    margin-bottom: 0;
                }
                .subheading {
                    font-size: 3.2rem;
                    font-weight: 500;
                    line-height: 1.3;
                    margin-top: 15px;
                    margin-bottom: 0;

                    @media screen and (max-width: 1500px) {
                        font-size: 2.6rem;
                    }
                    @media screen and (max-width: 576px) {
                        font-size: 2.2rem;
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}