@font-face {
    font-family: Poppins-Regular;
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: Poppins-Bold;
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
    font-display: swap
}

.white-bg {
    background-color: #fff
}

.bg-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.site-container {
    position: relative;
    z-index: 1
}

.full-width {
    width: 100%;
    min-height: 100vh
}

.logo {
    width: 50%
}

.logo img {
    max-width: 100%
}

.heading-text {
    font-family: Poppins-Regular;
    font-size: 24px;
    line-height: 1.5;
    color: #555
}

.heading-span {
    font-family: Poppins-Bold;
    font-size: 24px;
    line-height: 1.5;
    color: #555
}

.social-icons {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff
}

.social-icons:hover {
    background-color: #555;
    color: #fff
}

.linkedin {
    background-color: #0e76a8
}

.github {
    background-color: #333
}

.lhs {
    max-width: 650px;
    min-height: 100vh
}

.rhs {
    padding: 50px 50px 150px 320px;
    height: 100%;
    width: 71%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0
}

.rhs-overlay {
    overflow: hidden
}

.rhs-overlay::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -3;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8)
}

.rhs-overlay::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    top: 0;
    right: 100%;
    width: 10000px;
    height: 100%;
    background-color: #fff;
    transform-origin: bottom right;
    -webkit-transform: skewX(160deg);
    -moz-transform: skewX(160deg);
    -ms-transform: skewX(160deg);
    -o-transform: skewX(160deg);
    transform: skewX(160deg)
}

@media (max-width:1600px) {
    .lhs {
        max-width: 38%
    }
}

@media (max-width:1200px) {
    .lhs {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media (max-width:992px) {
    .lhs {
        max-width: 650px;
        min-height: unset;
        padding-top: 0;
        margin-left: auto;
        margin-right: auto
    }

    .rhs {
        position: relative;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px
    }

    .rhs::after {
        top: 100%;
        right: 0;
        width: 100%;
        height: 10000px;
        transform-origin: top right;
        -webkit-transform: skew(180deg, 8deg);
        -moz-transform: skew(180deg, 8deg);
        -ms-transform: skew(180deg, 8deg);
        -o-transform: skew(180deg, 8deg);
        transform: skew(180deg, 8deg)
    }
}