.button-wrapper {
    display: flex;
}

.button-wrapper.left {
    align-items: start;
}

.button-wrapper.center {
    align-items: center;
}

.button-wrapper.right {
    align-items: end;
}

@media (max-width: 768px) {
    .button-wrapper.mobile-left {
        align-items: start;
    }
    .button-wrapper.mobile-center {
        align-items: center;
    }
    .home .button-wrapper.mobile-center { 
        justify-content: center;
    }
    .button-wrapper.mobile-right {
        align-items: end;
    }
}

#mobile-menu .button,
#main-header .button {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    background-color: #2671FF;
    height: 48px;
    line-height: 48px;
    padding: 0 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: 0.2s ease-in-out;
    min-width: 176px;
}

.button {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    background-color: #FF8F24;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: 0.2s ease-in-out;
}

.button-white {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    color: #2671FF;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: 0.2s ease-in-out;
}

.button.size-smaller {
    font-weight: 700;
    min-width: auto;
}

.button.size-1 {
    height: 48px;
    line-height: 48px;
}

.button.size-2 {
    height: 56px;
    line-height: 56px;
    padding: 0 36px;
    font-size: 18px;
    border-radius: 10px;
}

.button.size-3 {
    height: 56px;
    line-height: 56px;
    padding: 0 58px;
    font-size: 18px;
    border-radius: 10px;
}

.button-white:hover {
    background-color: #256DF5;
    color: #fff;
    box-shadow: 8px 11px 30px rgba(38, 113, 255, 0.31);
    transition: 0.2s ease-in-out;
}

#main-header .button:hover {
    background-color: #256DF5;
    box-shadow: 8px 11px 30px rgba(38, 113, 255, 0.31);
    transition: 0.2s ease-in-out;
}

.button:hover {
    background-color: #FF8F24;
    box-shadow: 8px 11px 30px rgba(255, 143, 36, 0.31);
    transition: box-shadow 0.15s ease-in-out;
}

span.right-arrow-link,
a.right-arrow-link,
.right-arrow-link a {
    position: relative;
    padding: 0;
    color: #2671FF;
}

span.right-arrow-link:after,
a.right-arrow-link:after,
.right-arrow-link a:after {
    content: "";
    display: block;
    display: inline-block;
    width: 16px;
    height: 13px;
    background-image: url(../../img/icons/ic_go.svg);
    background-position: center center;
    background-repeat: no-repeat;
    margin: -8px 0 0 5px;
    transform: translateX(0px);
    transition: transform 0.2s ease-in-out;
    position: relative;
    top: 2px;
}

span.right-arrow-link--dark:after,
a.right-arrow-link--dark:after,
.right-arrow-link--dark a:after {
    background-image: url(../../img/right-arrow-dark.svg);
    margin-left: 14px;
}

span.right-arrow-link:hover:after,
a.right-arrow-link:hover:after,
.right-arrow-link a:hover:after {
    transform: translateX(10px);
    transition: transform 0.2s ease-in-out;
}

span.left-arrow-link,
a.left-arrow-link,
.left-arrow-link a {
    position: relative;
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.03em;
    color: #2671FF;
}

span.left-arrow-link:before,
a.left-arrow-link:before,
.left-arrow-link a:before {
    content: "";
    display: block;
    display: inline-block;
    width: 16px;
    height: 13px;
    background-image: url(../../img/icons/ic_go.svg);
    background-position: center center;
    background-repeat: no-repeat;
    margin: -8px 5px 0 5px;
    /* transform: translateX(0px); */
    transform: translateX(0px) rotate(-180deg);
    transition: transform 0.2s ease-in-out;
}

span.left-arrow-link:hover:before,
a.left-arrow-link:hover:before,
.left-arrow-link a:hover:before {
    /* transform: rotate(-180deg); */
    transform: translateX(-10px) rotate(-180deg);
    transition: transform 0.2s ease-in-out;
}

.button-outline {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    color: #fff;
    border: 1px solid #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: 0.2s ease-in-out;
}

.button-outline-blue {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    color: #2671FF;
    border: 1px solid #2671FF;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: 0.2s ease-in-out;
}

.button-outline-blue.size-2,
.button-outline.size-2 {
    height: 56px;
    line-height: 56px;
    padding: 0 24px;
    font-size: 18px;
    border-radius: 10px;
}

.button-outline:hover {
    background: rgba(255, 255, 255, 1);
    color: #2671FF;
    transition: 0.2s ease-in-out;
}

.button-outline-blue:hover {
    background: #2671FF;
    color: #fff;
    transition: 0.2s ease-in-out;
}

.button-orange {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    background-color: #FF8F24;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: box-shadow 0.15s ease-in-out;
    min-width: 192px;
}

.button-orange:hover {
    background-color: #FF8F24;
    box-shadow: 8px 11px 30px rgba(255, 143, 36, 0.31);
    transition: box-shadow 0.15s ease-in-out;
}

.button-orange.size-2 {
    height: 56px;
    line-height: 56px;
    padding: 0 24px;
    font-size: 18px;
    border-radius: 10px;
}

.button-blue {
    display: flex;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    background-color: #2671FF;
    height: 40px;
    line-height: 40px;
    padding: 0 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    opacity: 1;
    transition: box-shadow 0.15s ease-in-out;
    min-width: 192px;
}

.button-blue:hover {
    background-color: #2671FF;
    box-shadow: 8px 11px 30px rgba(38, 113, 255, 0.31);
    transition: box-shadow 0.15s ease-in-out;
}

.button-blue.size-2 {
    height: 56px;
    line-height: 56px;
    padding: 0 24px;
    font-size: 18px;
    border-radius: 10px;
}

.button-aws {
    width: 240px;
    height: 54px;
    margin: 0 24px 0 0;
    border-radius: 10px;
}

.button-aws:hover {
    background-color: #0A2144;
    border-color: #0A2144;
    transition: all 0.15s ease-in-out;
}

.button-aws:hover .button-aws-svg__border {
    stroke: #0A2144;
    fill: #0A2144
}

@media (max-width: 768px) {
    .button-orange {
        min-width: auto;
        font-weight: normal;
        height: 48px;
        line-height: 48px;
    }
    .button-blue.size-2,
    .button-orange.size-2 {
        height: 48px;
        line-height: 48px;
        padding: 0 24px;
        font-size: 16px;
        border-radius: 10px;
        font-weight: bold;
    }
    .button-aws {
        background-color: #0A2144;
    }
    .button-aws .button-aws-svg__border {
        stroke: #0A2144;
        fill: #0A2144
    }
}