styles.scss

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body,
html {
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
        background: #0c111b;
}

.container {
        margin-top: 30px;
        //     z-index: ;
}

footer {
        margin-top: 30px;
}

.hero-nav {
        z-index: 10;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 100vw;
        overflow: hidden;

        .hero-nav__inner {
                z-index: 2;
        }

        &:before {
                content: "";
                background: rgba(#000, 0);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                transition: background 400ms;
        }

        &.fixme {
                &:before {
                        background: #0c111b;
                }
        }
}

// navbar
#NavBar {
        z-index: 10;
}

.navTitle {
        font-size: 25px;
        font-style: oblique;
        font-weight: bolder;
        color: #ddae76e0;
}

#logo {
        top: 0;
        height: 30px;
        width: 30px;
}

#logo-name {
        padding-top: 15px;
        margin-top: 10px;
        padding-left: 5px;
        font-size: 30px;
        color: #ddae76e0;
        font-weight: bold;
        text-shadow: 0px 1px 4px;
}

.navBgColor {
        background-color: #0c111b;
}

/* carousel  */
#heroCarousel {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
}

.carousel-inner {
        height: auto;
        width: 100vw;
}

.carousel-inner .carousel-item img {
        height: 100vh;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
}

/* content*/
.card-title {
        font-size: medium;
}

.card-body {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: linear-gradient(to bottom, rgba(84, 129, 207, 0), #192133 90%);
        padding: 10px;
        transition: 0.5s;
}

.card:hover {
        transform: scale(1.4);
        z-index: 3;
        scroll-behavior: smooth;
}

.card:hover img {
        opacity: 0;
}

.card:hover .card-body {
        opacity: 1;
        background-color: #0c111b;
        overflow-y: auto;
        scrollbar-width: 2px;
}

.card-body p {
        font-size: x-small;
        font-weight: 200;
        font-style: italic;
        color: rgb(154, 164, 232);
}

.title {
        color: #24a9c3b3;
        opacity: 0.9;
        text-transform: capitalize;
        font-size: 30px;
        font-weight: 500;
        text-shadow: 2px 2px 5px;
}


/* contact us  */
#contactUs {
        background: -webkit-linear-gradient(left, #1f0103, #001217);
        width: 75%;
}

#contactUs #close {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #0d1b2b;
}

.contact-form {
        background: #462b2b;
        margin-top: 10%;
        margin-bottom: 5%;
        width: 70%;
        height: 80%;
}

.contact-form .form-control {
        border-radius: 1rem;
}

.contact-image {
        text-align: center;
}

.contact-image img {
        border-radius: 6rem;
        width: 11%;
        margin-top: -3%;
        transform: rotate(29deg);
}

.contact-form form {
        padding: 14%;
}

.contact-form form .row {
        margin-bottom: -7%;
}

.contact-form form .row .form-group {
        padding-bottom: 4%;
}

.contact-form h3 {
        margin-bottom: 8%;
        margin-top: -10%;
        text-align: center;
        color: #ad3a3a;
}

.contact-form .btnContact {
        width: 50%;
        border: none;
        border-radius: 1rem;
        padding: 1.5%;
        background: #dc3545;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
}

.btnContactSubmit {
        width: 50%;
        border-radius: 1rem;
        padding: 1.5%;
        color: #fff;
        background-color: #0062cc;
        border: none;
        cursor: pointer;
}

// about us 
.skw-pages {
        overflow: hidden;
        position: relative;
        height: 100vh;
}

$skewDeg: 18deg;
$magicVH: 32.4vh; // this number is magic and depends on skew angle
$scrollTime: 1s;

.skw-page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;

        &__half {
                position: absolute;
                top: 0;
                width: 50%;
                height: 100vh;
                transition: transform $scrollTime;

                &--left {
                        left: 0;
                        transform: translate3d(-$magicVH, 100%, 0);
                }

                &--right {
                        left: 50%;
                        transform: translate3d($magicVH, -100%, 0);
                }

                .skw-page.active & {
                        transform: translate3d(0, 0, 0);
                }
        }

        &__skewed {
                overflow: hidden;
                position: absolute;
                top: 0;
                width: 140%;
                height: 100%;
                transform: skewX($skewDeg * -1);
                background: #000;

                .skw-page__half--left & {
                        left: -40%;
                }

                .skw-page__half--right & {
                        right: -40%;
                }
        }

        &__content {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-flow: column wrap;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                padding: 0 30%;
                color: #fff;
                transform: skewX($skewDeg);
                transition: transform $scrollTime, opacity $scrollTime;
                background-size: cover;

                .skw-page__half--left & {
                        padding-left: 30%;
                        padding-right: 30%;
                        transform-origin: 100% 0;
                }

                .skw-page__half--right & {
                        padding-left: 30%;
                        padding-right: 30%;
                        transform-origin: 0 100%;
                }

                .skw-page.inactive & {
                        opacity: 0.5;
                        transform: skewX($skewDeg) scale(0.95);
                }
        }

        &__heading {
                margin-bottom: 15px;
                text-transform: uppercase;
                font-size: 25px;
                text-align: center;
                text-shadow: 1px 0px 4px;
        }

        &__description {
                font-size: 18px;
                text-align: center;
        }

        &__link {
                color: #FFA0A0;
        }

        &-1 {
                .skw-page__half--left .skw-page__content {
                        background:url(./images/logo.png);
                        background-repeat: no-repeat;
                        background-size:cover;
                }
                
                .skw-page__half--right .skw-page__content {
                        background: lighten(#0c111b, 5%);
                }
        }
        
        &-2 {
                .skw-page__half--left .skw-page__content {
                        background: lighten(#0c111b, 5%);
                }
                
                .skw-page__half--right .skw-page__content {
                        background:url(./images/about/p2.jpg);
                }
        }
        
        &-3 {
                .skw-page__half--left .skw-page__content {
                        background:url(./images/about/p1.jpg);
                }

                .skw-page__half--right .skw-page__content {
                        background: lighten(#0c111b, 5%);
                }
        }
}