#hero-section {
    background: url('../jpg/thinking-ceo.jpg') right top;
    background-size: cover;
    height: 85vh;
}

    #hero-section .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 1;
        max-height: 85vh;
    }

#hero-cta {
    z-index: 2;
}

#hero-form {
    background-color: rgba(255,255,255,0.7);
    z-index: 2;
    border-top: solid 10px #0097dc;
    border-top-left-radius: unset !important;
    border-top-right-radius: unset !important;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: #c4ecff;
    max-height: 100%;
    overflow-y: scroll;
}

    #hero-form::-webkit-scrollbar {
        width: 5px; /* width of the entire scrollbar */
    }

    #hero-form::-webkit-scrollbar-track {
        box-shadow: inset 0 0 10px grey;
    }

    #hero-form::-webkit-scrollbar-thumb {
        background-color: #c4ecff; /* color of the scroll thumb */
        border-radius: 0px; /* roundness of the scroll thumb */
        border: 3px solid #c4ecff; /* creates padding around scroll thumb */
    }

#success-hero-section {
    background: url('../jpg/laptop-desk-agh-logo.jpg') left 90%;
    background-size: cover;
    height: 65vh;
}

#success-overlay {
    background-color: rgba(0,0,0,0.7);
    z-index: 2;
}

.agh-gray {
    color: #484848;
}

.agh-yellow {
    color: #ffd200;
}

.agh-orange {
    color: #ff9900;
}

.agh-blue {
    color: #0097dc;
}

.agh-green {
    color: #72ae56;
}

.agh-purple {
    color: #625bc4;
}

.agh-red {
    color: #f42938;
}

.bg-agh-blue {
    background-color: #0097dc;
}

.border-agh-blue {
    border: solid 10px #0097dc;
}

.border-top-agh-blue {
    border-top: solid 10px #0097dc;
}

.border-bottom-agh-blue {
    border-bottom: solid 10px #0097dc;
}

.carousel-indicators .active {
    background-color: #0097dc;
}

.carousel-inner {
    max-height: 75vh;
}

.carousel-item h3 {
    font-size:2.5rem;
}

.three-overlay {
    right: 0;
    background-color: rgba(0,0,0,0.8);
    width: 30vw;
}

    .three-overlay p {
        font-size: 1.5rem;
    }


#final-cta {
    background: url('../jpg/business-chat.jpg') left center;
    background-size: cover;
    height: 75vh;
}

#final-cta-overlay {
    background-color: rgba(0,0,0,0.4);
}

#final-cta-callout {
    background-color: rgba(0,0,0,0.8);
    z-index: 2;
}

.border-top-agh-gradient {
    border-top-style: solid;
    border-top-width: 15px;
    border-image: linear-gradient(to right, #ff9900, #0097dc, #72ae56) 100% 0 0 0;
}

.border-bottom-agh-gradient {
    border-bottom-style: solid;
    border-bottom-width: 15px;
    border-image: linear-gradient(to right, #ff9900, #0097dc, #72ae56) 0 0 100% 0;
}

.bg-agh-gradient {
    background-image: linear-gradient(to right, #ff9900, #0097dc, #72ae56);
}

#dna-background {
    background: url('../png/dna-background.png') 1%;
    background-size: cover;
    background-color: #0097dc;
}

#dna-background-overlay {
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.75;
    z-index: 1;
}

.dna-text {
    opacity: 1;
    z-index: 2;
}

@media(min-width:2400px) {
    .carousel-inner {
        max-height: 65vh;
    }

    .carousel-item {
        max-height: 65vh;
    }

    .three-overlay {
        width:33vw;
    }
    .three-overlay p {
        font-size:2.5rem;
    }

}

@media(max-width:1440px) {
    .three-overlay {
        width: 40vw;
    }
}

@media(max-width:1199px) {
    #hero-section {
        height: 85vh;
    }

    #carousel-inner {
        max-height:50vh;
    }

    .display-4 {
        font-size: 2.5rem;
    }

    .three-overlay p {
        font-size: 1.2rem;
    }

    #final-cta-callout {
        margin-top: 0 !important;
    }
}

@media (max-width:991px) {
    .display-4 {
        font-size: 2.5rem;
    }

    #hero-form {
        max-height: 100%;
        overflow-y: scroll;
    }

    .three-overlay {
        width: 100vw;
    }

    .carousel-item img {
        transform: scale(3);
    }
}

@media(max-width:800px) {
    #final-cta-callout {
        height: 100%;
        padding-left: 0;
    }

    .display-4 {
        font-size: 2rem;
    }
}

@media(max-width:768px) {
    #hero-form {
        max-height: unset;
    }
}

@media(max-width:767px) {
    #final-cta {
        background-position-x: center;
    }

    #final-cta-callout {
        height: 100%;
    }

    #hero-section {
        height: unset;
    }

    #hero-form {
        background-color: white;
    }

    #transform-your-organization {
        font-size: 2.5rem;
    }

    #dna-background img {
        max-width: 50%;
    }

    /* .carousel-inner {
        height: 60vh;
    }

    .carousel-item {
        height: 60vh;
    }*/

    .carousel-item img {
        transform: scale(5);
    }

    .carousel-item p {
        font-size: 1rem;
    }
}

@media(max-width:500px) {
    #hero-section {
        background-position-x: 33%;
    }
    
    #hero-section .overlay {
        opacity:0.7;
    }
    
    .carousel-item h3 {
        font-size: 1.5rem;
    }

    #success-hero-section {
        background-position: 20% center;
        height: 68vh;
    }

    #success-overlay {
        align-self: flex-start;
        text-align: center;
        height: 100%;
    }

    .carousel-inner {
        height:100%;
    }

    .carousel-item {
        height:100%;
    }

    #final-cta {
        height:55vh;
    }
}