body {
    margin-top: 58px;
}

.btn-sy-primary{
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #59439B;
    --bs-btn-border-color: #59439B;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--sy-hover-bg);
    --bs-btn-hover-border-color: var(--sy-hover-bg);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--sy-active-bg);
    --bs-btn-active-border-color: var(--bs-white);
}

.nav-link {
    cursor: pointer;
  }

.bg-sy-secondary {
    background: #F7F7F7;
}

.center-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.speech-bubble {
    position: relative;
    background: #573DAC;
    border-radius: 10px;
    padding: 10px;
    color: white;
    margin: 20px;
}


.price-table{
    text-align: center;
}

.price-table td{
    background: #F7F7F7;
    border-bottom: 5px solid #fff;
    padding: 7px;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-top-color: #573DAC;
    border-bottom: 0;
    margin-left: -15px;
    margin-bottom: -15px;
}

.speech-bubble.bg-secondary:after {
    border-top-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important
}

.sy-hero-image {
    /*border-radius: 10px;*/
    /*box-shadow: RGBA(87, 61, 172, 0.50) 10px 10px 20px 0px;*/
    transform: perspective(1000px) rotateY(-25deg) rotateX(7deg);
    transition: transform 0.4s ease;
    width: 100%;
    will-change: transform;
}

/*
.sy-hero-image:hover {
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
}
*/


.mockup{
    position: absolute;
    height: 90%;
    top: 105px;
}

.text-body-sy-emphasis{
    --bs-text-opacity: 1;
    color: #583DAC !important;
}

.waves {
    position: relative;
    width: 100%;
    height: 16vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px
}

.container-wave{
    padding-top: 16vh;
}

.waves.waves-sm {
    height: 50px;
    min-height: 50px
}

.waves.no-animation .moving-waves>use {
    animation: none
}

.wave-rotate {
    transform: rotate(180deg)
}

.moving-waves>use {
    animation: f 40s cubic-bezier(.55,.5,.45,.5) infinite reverse
}

.moving-waves>use:first-child {
    animation-delay: -2s;
    animation-duration: 11s
}

.moving-waves>use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 13s
}

.moving-waves>use:nth-child(3) {
    animation-delay: -3s;
    animation-duration: 15s
}

.moving-waves>use:nth-child(4) {
    animation-delay: -4s;
    animation-duration: 20s
}

.moving-waves>use:nth-child(5) {
    animation-delay: -4s;
    animation-duration: 25s
}

.moving-waves>use:nth-child(6) {
    animation-delay: -3s;
    animation-duration: 30s
}

.placeholder-wave {
    mask-image: linear-gradient(130deg,#000 55%,rgba(0,0,0,.8) 75%,#000 95%);
    mask-size: 200% 100%;
    animation: e 2s linear infinite
}

@keyframes f {
    0% {
        transform: translate3d(-90px,0,0)
    }

    to {
        transform: translate3d(85px,0,0)
    }
}






.bg-gradient-sy-primary {
    background-image: linear-gradient(180deg,RGBA(107, 85, 177, 1.00),RGBA(55, 43, 90, 1.00))
}


.sy-page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 50%
}



@media (max-width: 767.98px) {
    .waves {
        height:80px;
        min-height: 80px
    }
}



@media (max-width: 575.98px) {

    .m-se-sm {
        margin-left: 20px;
        margin-right: 20px;
    }

    .p-se-sm {
        padding-left: 32px;
        padding-right: 32px;
    }
    .p-sm{
        padding: 32px;
    }
}


@media screen and (max-width: 767px) {


.nav-link-mobile {
    font-size: x-large;
}

.offcanvas-collapse {
    position: fixed;
    /*top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: RGBA(217, 212, 234, 1.00);
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
}
.offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
}
}