.bg-sm-primary {
    background: rgb(200, 16, 46);
}

@media (min-width: 768px) {
    .bg-sm-primary {
        background: inherit;
    }
}

.mobile-hero-cover {
    background-image: url('../img/banner.jpg');
    background-size: cover;
    height: 25vh;
}

@media (min-width: 992px) {
    #hero-section {
        background-image: url('../img/banner2.jpg');
        background-size: cover;
        height: 60vh;
    }
}

@media (min-width: 576px) {

    .diagonal,
    .description {
        -webkit-transform: skewX(0deg);
        -moz-transform: skewX(0deg);
        -ms-transform: skewX(0deg);
        -o-transform: skewX(0deg);
        transform: skewX(0deg);
    }

    .diagonal>div,
    .text {
        -webkit-transform: skewX(0deg);
        -moz-transform: skewX(0deg);
        -ms-transform: skewX(0deg);
        -o-transform: skewX(0deg);
        transform: skewX(0deg);
    }
}

@media (min-width: 992px) {
    .diagonal {
        -webkit-transform: skewX(-5deg);
        -moz-transform: skewX(-5deg);
        -ms-transform: skewX(-5deg);
        -o-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }

    .diagonal>div {
        -webkit-transform: skewX(5deg);
        -moz-transform: skewX(5deg);
        -ms-transform: skewX(5deg);
        -o-transform: skewX(5deg);
        transform: skewX(5deg);
    }

    /* .description {
        transform: skewX(-10deg);
    }

    .text {
        transform: skewX(10deg);
    } */
}

.avatar {
    width: 25em;
    /* base size */
    aspect-ratio: 1 / 1;
    /* keeps it square */
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#danrey {
    background-image: url('../img/danrey.png');
}

.program-photo {
    background-size: cover;
}
.program-text {
    position: absolute;
    padding:0.8em;
    width:90%;
    background:white;
    bottom:0
}

.rotating-text {
    position: relative;
}

.rotating-text h2 {
    grid-area: 1 / 1;
    opacity: 0;
    animation: fadeRotate 6s infinite;
}

/* stack without absolute positioning */
.rotating-text {
    display: grid;
}

/* timing */
.rotating-text h2:nth-child(1) {
    animation-delay: 0s;
}

.rotating-text h2:nth-child(2) {
    animation-delay: 2s;
}

.rotating-text h2:nth-child(3) {
    animation-delay: 4s;
}

@keyframes fadeRotate {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}



.learn-more {
    position: absolute;
    bottom: 0;
    left: 0;

    transform: translateX(-500px);
    /* start hidden */
    transition: transform 0.4s ease;

    padding: 1em 5em;
    color: white;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}




.bg-gray-gradient {
background: linear-gradient(0deg,rgb(34, 34, 34) 0%, rgb(97, 97, 97) 100%) !important;
}