:root {
    --default-background: linear-gradient(90deg, rgba(237, 134, 56, 1) 50%, rgba(230, 98, 0, 1) 100%);
    --main-background: linear-gradient(90deg, rgb(254 243 238) 50%, rgb(254 243 238) 100%);
    --footer-height: 100px;
    --social-text-color: rgba(230, 98, 0, 1);
    --va-text-color: rgb(255, 255, 255);
    --tagline-animation: slideRight 2s, fadeIn 1s;
    --footer-background: linear-gradient(to right, #175765 0%, #346C69 51%, #57856D 100%);
    --footer-background-rpl: linear-gradient(to right, #ed8638 0%, #e8904d 51%, #efc397 100%);
    --footer-background-pr: linear-gradient(to right, #975db0 0%, #9C51BB 51%, #BF97DE 100%);
    --footer-background-p1: linear-gradient(to right, #15858D 0%, #009CA6 51%, #3CD2D5 100%);
    /* --footer-background-xx: linear-gradient(to right, #184591 0%, #387CAE 51%, #4B9EC0 100%); */
}

html,
body {
    background: var(--main-background);
}

.footer-container {
    background: var(--footer-background);
}

.footer-container-rpl {
    background: var(--footer-background-rpl);
}

.footer-container-pr {
    background: var(--footer-background-pr);
}

.footer-container-p1 {
    background: var(--footer-background-p1);
}

#social-dropdown .dropdown-item:focus {
    background: var(--default-background) !important;
    color: white;
}

#social-dropdown .dropdown-menu {
    /* min-width:200px; */
    width: auto;
}

.social-box {
    display: none;
    opacity: 0;
    position: relative;
}

.social-box.active {
    display: block;
    opacity: 1;
    animation: fadeIn 1s, slideUp .5s;
}

.logos img {
    height: 40px;
}

.social-icon {
    color: var(--social-text-color);
}

#tagline {
    transition: all 1s;
    position: relative;
    animation: var(--tagline-animation);
}

#btn-section {
    transition: all 1s;
    position: relative;
    animation: var(--tagline-animation);
    transform: translateY(-7px);
}

@keyframes slideRight {
    from {
        right: 40px;
    }

    to {
        right: 0px;
    }
}

@keyframes slideLeft {
    from {
        left: 40px;
    }

    to {
        left: 0px;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dimIn {
    from {
        opacity: 0.8;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        bottom: -15px;
    }

    to {
        bottom: 0px;
    }
}

@media screen and (max-width: 1024px) {
    .logos img {
        height: 30px;
        max-width: 50%;
    }
}