.orchid-text{
    color: #8F55E0;
} 

.deep-focus-text{
    color: #201436;
}

.bg-orchid{
    background-color: #8F55E0;
}

.bg-mustanggo{
    background-color: #d1c3d4;
}

.bg-opac-white{
    background-color: #FFFFFF33;
}

.f-white{
    color: white !important;
}

.mustanggo-wrapper{
    margin: 64px 0;
}

.mustanggo-gradient {
    background-color: #ffffff;
    background: var(--Gradient-BG, linear-gradient(169deg, #FFF 2.5%, rgba(143, 85, 224, 0.40) 120.94%), #FFF);
    background-repeat: no-repeat; 
}

.orchid-btn{
    background-color: #8F55E0;
    padding: 5px;
    border-radius: 16px;
    color: white;
}

.orchid-btn:hover{
    background-color: #201436;
    color: white;
}

.white-btn{
    background-color: white;
    padding: 5px;
    border-radius: 16px;
    color: #201436 !important;
}

.nav-btn:hover{
    background-color: #D3AAE3;
}

.nav-btn-link{
    color: white !important;
}

.nav-btn-link:hover{
    color: black !important;
}

.nav-btn-link-alt{
    color: #201436 !important;
}

h1{
    color: #201436 !important;
}

.info-card {
  flex: 1 1 100%;
  height: 480px;
  overflow: hidden; 
}

.info-card img{
    width: 425px;
    object-fit: cover;
    object-position: top;
}

.eatery-card {
  flex: 1 1 calc(50% - 1rem);
}

.desktop-nav{
    display: none;
}

.img-fade{
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: top;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    -webkit-mask-mode: alpha; 
    -webkit-mask-repeat: no-repeat;
}

.navbar-toggler{
    display: none;
}

.nav-logo{
        margin: 0 auto;
    }

@media (min-width: 1200px) {
    .info-card{
        flex: 1 1 calc(50% - 1rem);
    }

    .eatery-card {
        flex: 1 1 calc(25% - 1rem);
    }

    .crop-container {
        width: 400px;
        height: 222px;
        overflow: hidden;     /* Hides everything outside bounds */
        position: relative;
    }

    .crop-container img {
        position: absolute;
        top: 128px;
        left: -104px;
        transform: scale(3.5);
    }

    .desktop-nav{
        display: block;
    }

    .mobile-nav{
        display: none;
    }

    .img-fade{
        mask-image: unset;
        -webkit-mask-image: unset;

        height: auto;
    }

    .navbar-toggler{
        display: block;
    }
}