*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat";
}

html{
    scroll-behavior: smooth;
}

body{
    overflow: hidden;
}

/* general */
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: initial;
    /* width: initial; */
    padding-left: 100px;
    padding-right: 100px;
}

.vs-text-dark{
    color: #080808 !important;
}

.vs-bg-dark{
    background-color: #080808 !important;
}

.vs-bg-three{
    background-color: #0044b3 !important;
}

.vs-bg-seven{
    background-color: #090a15 !important;
}

.vs-bg-light{
    background-color: #f7f7f7 !important;
}

.vs-text-light{
    color: #f7f7f7 !important;
}

.vs-bg-yellow{
    background-color: #ffba00 !important;
}

.vs-text-yellow{
    color: #ffba00 !important;
}

.mt-60{
    margin-top: 60px;
}

.mt-75{
    margin-top: 75px;
}

/* nav bar */
header{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000000;
    min-height: 64px;
}

/* .navbar{
    justify-content: space-between;
} */


.navbar-brand img{
    min-width: 50px;
}

.nav-item{
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    position: relative;
}


/*vin chess animation*/
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

/*vend*/


/* cursor */
.cursor{
    position: fixed;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #ffffff38;
    transition-duration: 0.12s;
    -o-transition-duration: 0.12s;
    -moz-transition-duration: 0.12s;
    -webkit-transition-duration: 0.12s;
    transition-timing-function:ease;
    -o-transition-timing-function:ease;
    -moz-transition-timing-function:ease;
    -webkit-transition-timing-function:ease;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    /* display: none; */
    z-index: 100000001;
}

/* .nav-link{
    color: #f7f7f7 !important;
} */

.b-light .nav-link{
    color:  #757575 !important;
}

.b-light .nav-link:hover{
    color:  #424242 !important;
}

.nav-item button{
    background-color: white;
    border-radius: 20px;
    padding: 5px 10px;
    border: none;
    outline: none;
}

.b-light .nav-item button{
    background-color: #080808;
}

.nav-item button svg{
    width: 16px;
}

.nav-item button .nav-link{
    color: #080808 !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.b-light .nav-item button .nav-link{
    color: #fff !important;
}

/* for svg img */
.cls-h{
    fill:none;
    stroke:#080808;
    stroke-miterlimit:10;
    stroke-width:3px;
}

.b-light .cls-h {
    stroke:#fff;
}

/* responsive navbar icon */
.responsive-navbar-toggler{
    min-width: 35px;
    cursor: pointer;
    margin-left: 10px;
}

.navbar-dark .navbar-toggler{
    border: none !important;
    outline: none !important;
    min-width: 150px;
    margin-right: 10px;
    color: #bdbdbd;
}

.b-dark .nav-link{
    color: #bdbdbd !important;
}

.b-dark .nav-link:hover{
    color: #fff !important;
}

.b-light .navbar-toggler,
.nav-item button .nav-link:hover{
    color: #080808 !important;
}

.responsive-navbar-toggler .top-line{
    height: 1px;
    background: #bdbdbd;
    width: 15px;
    margin-left: 8px;
}

.responsive-navbar-toggler .mid-line{
    display: block;
    height: 1px;
    background: #bdbdbd;
    margin: 3px auto;
}

.responsive-navbar-toggler .bottom-line{
    /*width: 10px;*/
    margin-left: 13px;
    height: 1.9px;
    background: #bdbdbd;
}

.b-light  .responsive-navbar-toggler span{
    background-color: #080808 !important;
}

/* main */
/* project button */
.proj-btn{
    min-width: 200px;
    border: none;
    outline: none !important;
    background: transparent;
    margin-bottom: 55px;
    position: absolute;
    top: 17%;
    left: 14%;
}

.proj-btn span{
    font-weight: 600;
}

.left-arr,
.right-arr{
    max-width: 8px;
    width: 8px;
    display: inline;
}

/* two main sections of home page */
.toggle-bg{
    height: 100vh !important;
}

.prf-abt{
    height: 100vh !important;
}

#profile .container{
    padding-right: 0;
}

#profile footer .container{
    padding-right: 100px;
}

@keyframes slide {
    0%   {top: 100%;}
    25%  {top: 75%;}
    50%  {top: 50%;}
    75%  {top: 25%;}
    100% {top: 70px;}
}

.toggle-bg.b-dark{
    color: #bdbdbd;
}

/* title, heading and paragraph*/
.title{
    color: #e0e0e0;
    font-weight: 500;
}

.b-light .title{
    color: #616161;
}

.title .hr-white-line{
    width: 50px;
    height: 1px;
    display: inline-block;
    margin-bottom: 5px;
}

.b-dark .hr-white-line{
    background-color: white;
}

.b-light .hr-white-line{
    background-color: #080808;
}

.title + h1{
    font-size: 70px;
    font-weight: 800;
    margin-top: 10px;
}

.b-dark h1{
    color: white;
}

.b-light h1{
    color: #080808;
}

.toggle-bg p{
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: #e0e0e0;
}

.b-light p{
    color: #616161 !important;
}

/* view project */
.vw-proj>div{
    min-width: 20px;
    max-width: 25px;
    background: transparent;
    border: none;
    display: inline-block;
}

.vw-proj{
    max-width: 200px;
    background: transparent;
    border: none !important;
    outline: none !important;
    min-width: 50px;
}

.about{
    height: 100vh;
}


.abt-slide{
    /* top: 25%; */
    position: absolute;
    display: flex;
    z-index: 1;
    overflow: hidden;
    animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

@keyframes downToTop {
    from {top: 0%;}
    to {top: -100%;}
}

@keyframes topToDown {
    from {top: -100%;}
    to {top: 0%;}
}

.about .slide-text{
    top: 33%;
    left: 0;
    min-height: 350px;
}

.slider{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.slide-images{
    max-width: 100vw;
    min-width: 58vw;
    position: absolute;
    right: -95px;
    mix-blend-mode: screen;
    top: 72px;
    bottom: -156px;
}

.slide-images img{
    object-fit: cover;
    -o-object-fit: cover;
    height: 100%;
}

.slide-d{
    height: 100%;
    position: absolute;
    background-color: #080808;
    z-index: 1;
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;
}

.slide-l{
    background-color: #f7f7f7 !important;
    height: 100%;
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;
}

.b-light .about>.row:first-child{
    background-size: cover;
    background-image: url(../Images/dot-texture.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-color: #f5f5f5e3;
    /* mix-blend-mode: lighten; */
    background-blend-mode: screen;
}

/* social links bar */
.social-links{
    border: 1px solid #212121;
    border-radius: 20px;
    width: fit-content;
    padding: 33px 7px;
    margin-left: 5px;
    top: 34%;
    z-index: 1000000;;
}

.b-light .social-links{
    border-color: #9e9e9e;
}

.b-dark .social-links{
    border-color:  rgb(255 255 255 / 50%);
}


.social-links img{
    min-width: 20px;
    max-width: 20px;
    width: 20px;
    padding: 14px 3px;
    padding-bottom: 15px;
    cursor: pointer;
}

/* for dark theme */
.b-dark .social-links img{
    filter: invert(0.25);
    -webkit-filter: invert(0.25) ;
}

.social-links a:not(:last-child) svg{
    margin-bottom: 27px;
}

.b-dark .social-links svg{
    height: 17px;
    fill: rgb(255 255 255 / 50%);
    stroke: none;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

.b-dark .social-links a:hover svg{
    fill: rgb(255 255 255 / 90%);
}

.b-light .social-links svg{
    height: 17px;
    fill: #9e9e9e;
    stroke: none;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

.b-light .social-links a:hover svg{
    fill:#3a3a3a;
}

#be svg{
    height: 10px;
}

#inst svg{
    height: 14px;
}

#dr svg{
    height: 15px;
}

#in svg{
    height: 13px;
}

#ut svg{
    height: 12px;
    width: 14px;
}

.b-dark .social-links img:hover{
    filter: invert(1);
    -webkit-filter: invert(1) ;
}

/* for light theme */
.b-light .social-links img{
    filter: invert(0.6);
    -webkit-filter: invert(0.6) ;
}

.b-light .social-links img:hover{
    filter: invert(0);
    -webkit-filter: invert(0);
}

#fb-icon{
    min-width: 15px;
    max-width: 15px;
    width: 15px;
}

/* QR CODE */
.qr-row{
    margin-bottom: 30px;
    position: absolute;
    bottom: 0;
    z-index: 10;
}

.pr-slide .l-qr,
.pr-slide .d-qr{
    display: none !important;
}

.b-dark .d-qr{
    display: block;
}

.b-dark .l-qr{
    display: none;
}

.b-light .l-qr{
    display: block;
}

.b-light .d-qr{
    display: none;
}

footer .qr-row{
    bottom: 0px;
    text-align: left;
}

footer{
    font-size: 12px;
}


footer .col-md-12{
    padding-left: 292px;
    padding-right: 100px;
    font-size: 13px;
    text-align: center;
    display: flex;
    width: 100%;
    /* justify-content: space-between; */
    flex-wrap: wrap;
}

.prf-abt .qr-row{
    margin-bottom: 0px;
    position: static;
}

.qr-row .position-fixed{
    bottom: 20px;
}

.qr{
    min-width: 70px;
    max-width: 70px;
    width: 70px;
    padding: 5px 10px;
}

.qr img{
    max-width: 50px;
    width: 50px;
}

.qr + div{
    line-height: 1.5;
    font-size: 13px;
    color: gray;
    justify-content: center;
}

.b-dark .qr + div{
    color: rgb(255 255 255 / 50%);
}

/* video button */
.animated-btn{
    position: relative;
    height: 40px;
}

.btn-bg,
.btn-arrow {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 100%;
}

.btn-arrow svg{
    width: 19px;
    margin-left: 10px;
}

.btn-bg {
    animation: pulse 2s ease infinite;
    -o-animation: pulse 2s ease infinite;
    -moz-animation: pulse 2s ease infinite;
    -webkit-animation: pulse 2s ease infinite;
    background: #616161;
}

.b-dark .btn-bg{
    background: rgb(255 255 255 / 80%);
}

.b-dark .btn{
    background: rgb(255 255 255 / 40%);
}

.b-light .btn-bg{
    background: #c3c3c3;
}

/* for svg image */
.cls-a{
    fill:none;
    stroke:#fff;
    stroke-miterlimit:10;
    stroke-width:6px;
}

.b-light .cls-a{
    stroke:#080808;
}

.btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 99;
    border: none;
    background: rgb(255 255 255 / 50%);
    background-size: 18px;
    cursor: pointer;
    outline: none;
}

.b-light .btn-arrow{
    background: #e0e0e0;
}

.btn-arrow a {
    position: absolute;
    color: #FFF;
    font-size: 17px;
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* view project button */
.vs-hvr-btn{
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    width: 12rem;
    height: auto;
    border: none;
    outline: none !important;
}

.vs-hvr-btn:hover .circle {
    width: 100%;
}

.b-dark .vs-hvr-btn:hover .circle {
    background-color: #ffba00;
}

.b-light .vs-hvr-btn:hover .circle {
    background-color: #080808;
}

.vs-hvr-btn .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -moz-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px 0;
    margin: 0 0 0 1.85rem;
    font-weight: 500;
    font-size: 15px;
    text-align: left;
    padding-left: 15px;
    line-height: 1.6;
    text-align: left;
    text-transform: uppercase;
}

.vs-hvr-btn .button-text:hover{
    text-decoration: none;
}

.b-dark .vs-hvr-btn .button-text{
    color: #ffba00;
}

.b-light .vs-hvr-btn .button-text{
    color: #080808;
}

.vs-hvr-btn:hover .button-text {
    color: #fff;
}

.vs-hvr-btn .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -moz-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 37px;
    height: 37px;
    border-radius: 1.625rem;
}

.b-dark .vs-hvr-btn .circle{
    border: 1px solid #ffba00;
}

.b-light .vs-hvr-btn .circle{
    border: 1px solid #080808;
}

.vs-hvr-btn:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
    -o-transform: translate(1rem, 0);
    -ms-transform: translate(1rem, 0);
    -moz-transform: translate(1rem, 0);
    -webkit-transform: translate(1rem, 0);
}

.vs-hvr-btn .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -moz-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 4px;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

.vs-hvr-btn .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -moz-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

.vs-hvr-btn .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.25rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #ffba00;
    border-right: 0.125rem solid #ffba00;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.b-dark .vs-hvr-btn .circle .icon.arrow::before {
    border-top: 0.125rem solid #ffba00;
    border-right: 0.125rem solid #ffba00;
}

.b-light .vs-hvr-btn .circle .icon.arrow::before {
    border-top: 0.125rem solid #080808;
    border-right: 0.125rem solid #080808;
}

.vs-hvr-btn:hover .circle .icon.arrow::before{
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
}

/* slider */
.slider{
    position: relative;
}

.slider{
    height: calc(100vh - 62.3px);
    overflow: hidden;
}

.pr-slide .slider-counter{
    display: none;
}

.slider-counter{
    color: white;    
    position: absolute;
    bottom: 0;
    right: 30px;
    margin: 10px;
    z-index: 10;
    font-weight: 600;
}

.b-light .slider-counter{
    color: #080808;
}

.slider-counter .current{
    color: transparent;
    font-size: 60px;
    -webkit-text-stroke: 0.7px #bdbdbd;
}

.b-light .slider-counter .current{
    -webkit-text-stroke: 0.7px #080808;
}

.slide-img{
    position: absolute;
    top: 5%;
    z-index: -1;
    overflow: hidden;
    animation-name: right;
    -o-animation-name: right;
    -moz-animation-name: right;
    -webkit-animation-name: right;
    animation-duration: 2s;
    -o-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    right: -15%;
    width: 70%;
}

@keyframes right {
    from {right: -25%;}
    to {right: -15%;}
}

.slide-img img{
    width: 100%;
    height: auto;
}

/* preloader */
.preloader img{
    width: 250px;
    max-width: 250px;
}

.preloader .loader{
    /* width: 100%; */
    height: 1px;
    background: #ffba00;
    width: 0;
    margin: 10px 0;
    transition: width 1s ease;
    -webkit-transition: width 1s ease;
    -o-transition: width 1s ease;
    -moz-transition: width 1s ease;
}

.preloader span{
    color: #9e9e9e;
    font-weight: 500;
}

.preloader .loader+span{
    font-size: 16px;
    letter-spacing: 10px;
}

#loading #dots{
    width: 0;
    vertical-align: middle;
    overflow: hidden;
    display: inline-block;
    animation: widthAnim 1s infinite;
    -webkit-animation: widthAnim 1s infinite;
    -o-animation: widthAnim 1s infinite;
    -moz-animation: widthAnim 1s infinite;
}

@keyframes widthAnim {
    0% {width: 0}
    25% {width: 5px}
    50% {width: 10px}
    75% {width: 20px}
    100% {width: 30px}
}

.preloader .load-perc{
    font-size: 90px;
    font-weight: bolder;
    font-family: "ASSISTANT", sans;
    color: white;
    letter-spacing: normal;
}

.preloader .row:first-child{
    height: calc(100vh - 100px);
}

.preloader .row{
    margin: auto 100px;
    padding: 0;
}

.preloader .col-md-6{
    padding: 0;
}

.fdbk{
    font-size: 19px;
    width: fit-content;
    margin-left: auto;
    border: 1px solid #424242;
    padding-bottom: 14px;
    transform: skewX(-10deg)  translate(5px, 0);
    -o-transform: skewX(-10deg)  translate(5px, 0);
    -moz-transform: skewX(-10deg)  translate(5px, 0);
    -ms-transform: skewX(-10deg)  translate(5px, 0);
    -webkit-transform: skewX(-10deg)  translate(5px, 0);
    border-bottom: none;
    padding: 15px 20px;
}

.fdbk span{
    transform: skewX(10deg);
    -o-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    display: inline-block;
}

/* profile */
.profile{
    margin-top: 50px;
}

.profile img{
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
}

.profile span{
    color: white;
    font-size: 20px;
    line-height: 1;
}

.pr-text{
    margin-top: 20px;
    margin-left: 20px;
}

.profile .large-span{
    font-size: 40px;
    font-weight: 600;
    margin-top: 10px;
    display: inline-block;
}

/* cursor for dynamic text typing */
.input-cursor {
    display: inline-block;
    width: 2px;
    height: 35px;
    background-color: white;
    animation: blink .6s linear infinite alternate;
    -o-animation: blink .6s linear infinite alternate;
    -moz-animation: blink .6s linear infinite alternate;
    -webkit-animation: blink .6s linear infinite alternate;
}

@keyframes blink {
    0% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
}

.pr-option{
    margin-top: 20px;
}

.pr-option button{
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 22px;
    outline: none;
    font-size: 15px;
    margin-right: 15px;
}

.pr-option button:first-child{
    background: #292929;
}

.pr-option button:nth-child(2){
    background: #ffba00;
    color: #080808;
}

.larger-ques{
    margin-top: 15px;
    font-size: 52px;
    letter-spacing: 4px;
    font-weight: bold;
    color: white;
    line-height: 1;
}

.prf-abt p {
    margin-bottom: 0;
    color: white;
    font-size: 13px;
    margin-top: 2px;
}

.prf-abt .col-md-5{
    height: calc(100vh - 150px);
    padding-top: 20px;
}

.prf-abt div.vs-text-yellow span{
    font-size: 13px;
}

/* video */
.video video, 
.overlay img,
.black-overlay{
    width:100%;
    height:100%;
    position:absolute;
    top:10%;
    left:0;
    object-fit:cover;
    max-width:381px;
    width:381px;
    padding: 10px;
} 

.video video{
    padding: 0;
}


.video video{
    max-width: 372px;
    width: 372px;
    left: 5px;
}

.black-overlay{
    left: 0px;
    width: 101%;
    background: #080808;
    z-index: 3;
    mix-blend-mode: lighten;
}

.overlay img {
    z-index:2;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    mix-blend-mode: multiply;
    object-fit: fill;
    background: #000000;
    padding-right: 10px;
}

 /* scroll icon */
.pr-slide #scroller{
    display: none;
}

.scrolldown {
    z-index: 10000;
    --color: white;
    --sizeX: 20px;
    --sizeY: 34px;
    position: relative;
    width: var(--sizeX);
    height: var(--sizeY);
    margin-left: var(sizeX / 2);
    border: calc(var(--sizeX) / 10) solid var(--color);
    border-radius: 50px;
    box-sizing: border-box;
    margin-bottom: 25px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 100000;
    cursor: pointer;
}

.b-light .scrolldown {
    --color: #080808;
}

.scrolldown span:hover,
.scrolldown:hover span{
    color: #ffba00 !important
}

.scrolldown span{
    min-width: 100px;
    margin-left: -30px;
    font-size: 15px;
}

.scrolldown::before {
    content: "";
    position: absolute;
    bottom: 32px;
    left: 63%;
    top: 2px;
    width: 3px;
    height: 2px;
    margin-left: -3px;
    background-color: var(--color);
    border-radius: 100%;
    animation: scrolldown-anim 2s infinite;
    -o-animation: scrolldown-anim 2s infinite;
    -moz-animation: scrolldown-anim 2s infinite;
    -webkit-animation: scrolldown-anim 2s infinite;
    box-sizing: border-box;
    box-shadow: 0px -5px 3px 1px #ffffff66;
}

@keyframes scrolldown-anim {
    0% {
        opacity: 0;
        height: 6px;
    }
    40% {
        opacity: 1;
        height: 10px;
    }
    80% {
        transform: translate(0, 20px);
        -o-transform: translate(0, 20px);
        -ms-transform: translate(0, 20px);
        -moz-transform-origin: translate(0, 20px);
        -webkit-transform: translate(0, 20px);
        height: 10px;
        opacity: 0;
    }
    100% {
        height: 3px;
        opacity: 0;
    }
}

.chevrons {
    padding: 6px 0 0 0;
    margin-left: -3px;
    margin-top: 35px;
    width: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* footer */
footer{
    height: 100px;
    background-color: #080808;
    color: gray;
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0
}

footer a{
    color: #bdbdbd;
    margin-right: 10px;
}

footer a:hover{
    color: #fff;
    text-decoration: none;
}

.gr-ba{
    display: inline-block;
    min-width: 30px;
    background: gray;
    height: 1.5px;
    width: 60px;
    margin: 3px;
}

@media screen and (max-width: 1515px) {
    .larger-ques{
        font-size: 50px;
    }
}

@media screen and (min-height: 900px) {
    #profile .col-lg-10{
        margin-top: -156px;
    }
    
    .video video, 
    .overlay img,
    .black-overlay{
        top: 0%;
    }
}


@media screen and (max-width: 1475px) {
    .larger-ques{
        font-size: 48px;
        letter-spacing: normal;
    }

    /* footer .col-md-3{
        flex: 0 0 22%;
        max-width: 22%;
    }

    footer .col-md-3.pr-0{
        flex: 0 0 28%;
        max-width: 28%;
    } */
}

@media screen  and (max-height: 2000px) and (min-height: 1000px) {
    .slide-img{
        min-width: 70%;
        width: auto;
        top: 5%;
    }
}

@media screen and (max-width: 1380px) {
    .title +  h1{
        font-size: 60px;
    }

    .larger-ques{
        font-size: 47px;
    }
}

@media screen and (max-width: 1320px)and (min-width: 900px) {

    .slide-text .col-lg-5{
        flex: none;
        max-width: 60%;
    }
}

@media screen and (max-width: 1210px) {
    .preloader{
        padding: 0 20px;
    }

    .title + h1{
        font-size: 55px;
    }

    .profile .large-span{
        font-size: 36px;
    }

    .larger-ques{
        font-size: 40px;
    }

    footer .col-md-3{
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }

    footer .col-md-3.pr-0{
        align-self: flex-end;
    }

    footer .col-md-6{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center !important;
        padding: 0 30px;
    }
}


@media screen and (max-width: 1060px) {
    .title + h1{
        font-size: 45px;
    }

    .container,
    #profile footer .container{
        padding-right: 50px;
        padding-left: 50px;
    }
}


@media screen and (max-width: 991px) {

    header{
        border-bottom: 1px solid gray;
    }

    .b-light header {
        background-color: #f7f7f7;
    }
    
    .b-dark header{
        background-color: #080808;
    }

    .navbar-collapse{
        position: absolute;
        background: black;
        left: -50px;
        right: 0px;
        top: 83px;
        padding: 20px;
        width: 100vw;
    }

    .b-light .navbar-collapse{
        background-color: #f7f7f7;
    }

    .fdbk{
        padding: 10px;
    }

    .profile .large-span{
        font-size: 31px;
    }

    .profile span{
        font-size: 17px;
    }

    .larger-ques {
        font-size: 37px;
    }
}

@media screen and (max-width: 891px) {
    .fdbk{
        font-size: 17px;
    }

    .title+h1{
        font-size: 40px;
    }

    
    .profile .large-span{
        font-size: 30px;
    }

    .larger-ques{
        font-size: 34px;
    }

    .slide-d,
    .slide-l{
        background-size: 100% 100%;
    }

    .overlay img{
        padding: 45px;
    }

    .profile .large-span{
        font-size: 23px;
    }

    .profile span{
        font-size: 16px;
    }

    .larger-ques {
        font-size: 30px;
    }

    .input-cursor{
        height: 25px;
    }

    .slide-img{
        width: 80%;
    }

    .toggle-bg p{
        padding-right: 20px;
    }

}

@media screen and (max-width: 859px) {
    footer{
        padding: 0 20px;
    }

    footer .col-md-3,
    footer .col-md-6{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center !important;
    }
}

@media screen and (max-width: 789px) {

    .title+h1{
        font-size: 38px;
    }

    .profile .large-span{
        font-size: 21px;
    }

    .profile span{
        font-size: 16px;
    }

    .larger-ques {
        font-size: 27px;
    }

    
    .preloader .row{
        margin: auto 50px;    
    }
    
    .slide-img{
        opacity: 0.4;
    }
}

@media screen and (max-width: 767px) {

    .preloader .row:first-child{
        flex-direction: column-reverse;
        justify-content: flex-end;
        padding: 15px;
        justify-content: center;
    }

    .preloader .loader+span {
        font-size: 15px;
        letter-spacing: 8px;
    }

    .preloader .row:nth-child(2){
        text-align: center;
        padding: 10px;
    }

    .fdbk{
        text-align: center !important;
        padding: 10px 30px;
        margin: auto;
    }

    .preloader .row .fdbk span{
        margin: 0 !important;
        font-size: 17px;
    }

    .slider-counter{
        display: none;
    }

    .slider{
        position: absolute;
        top: 0;
        opacity: 0.1;
        padding: 0;
    }

    .about{
        z-index: 100;
    }

    .toggle-bg, .prf-abt{
        height: 100%;
        overflow: hidden;
        padding-right: 20px;
    }
    
    .prf-abt .col-md-5{
        opacity: 0.1;
        position: absolute;
    }
    
    .scrolldown {
        --sizeX: 23px;
        --sizeY: 44px;
    }

    .mt-60{
        margin-top: 100px;
    }

    footer {
        font-size: 12px;
    }

    .b-light .about>.row:first-child{
        background-image: none;
        background-color: transparent;
    }

    .container,
    #profile footer .container{
        padding-left: 20px;
        padding-right: 20px;
    }

    .slide-text{
        padding-left: 20px;
    }

    .slide-img {
        top: 20%;
        right: -6%;
        width: 100%;
    }

    .navbar-collapse{
        left: -20px;
    }

    
    footer .col-md-12{
        padding-left: 20px;
        padding-right: 20px;
    }

    footer .qr-row {
        margin-bottom: 30px;
    }

}
@media screen and (max-width: 600px) {
    #scroll{
        display: none !important;
    }

}

@media screen and (max-width: 540px) {

    .preloader .load-perc {
        text-align: center;
        font-size: 80px;
    }

    .preloader img {
        max-width: 240px;
        width: 240px;
    }

    .preloader .loader{
        width: 0;
    }

    .preloader .loader+span {
        font-size: 15px;
        letter-spacing: 8px;
    }

    .preloader .row:nth-child(2) span{
        font-size: 15px ;
        padding-bottom: 0;
    }

    .fdbk{
        border: none;
        text-align: center !important;
        padding: 0;
        margin: auto;
    }

    .preloader .row .fdbk span{
        margin: 0 !important;
        font-size: 17px;
    }

    /* -------- */

    .title+h1 {
        font-size: 38px;
    }

    .vrt-center{
        margin-top: 0 !important;
    }

    
    .profile .large-span{
        font-size: 25px;
    }

    .larger-ques{
        font-size: 32px;
    }

    .profile span{
        font-size: 17px;
    }

    .input-cursor{
        height: 22px;
    }

    .profile {
        margin-top: 20px;
    }  
    
    footer{
        font-size: 11px
    }

    footer .col-md-6{
        justify-content: center !important;
        padding: 5px;
    }
    
    .container,
    #profile footer .container{
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .slide-text{
        padding-left: 30px;
    }

    footer .qr-row{
        left: 6%;
    }

    .prf-abt .col-lg-2.col-md-2{
        max-width: 15%;
    }

    
    .navbar-collapse{
        left: -10px;
    }

    .prf-abt .qr-row {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 471px) {

    .profile .large-span{
        font-size: 22px;
    }

    .larger-ques{
        font-size: 30px;
    }

    footer .col-md-6{
       display: none !important;        
    }

    footer span,
    footer a{
        display: block;
    }

    footer .col-md-6:nth-child(2){
        display: none !important;
    }
    
    footer .col-md-6>span{
        width: 100%;
    }
    
    .prf-abt .col-lg-2.col-md-2{
        max-width: 20%;
    }


    .d-vs-sm-none{
        display: none !important;
    }
}

@media screen and (max-width: 420px){
    .larger-ques {
        margin-top: 20px;
        line-height: 1.3;
        font-size: 26px;
    }

    #profile .col-md-7{
        padding: 0;
    }

    footer .qr-row {
        bottom: 60px;
        text-align: left;
    }

    .scrolldown::before {
        content: "";
        position: absolute;
        bottom: 32px;
        left: 64%;
        top: 0px;
        width: 2px;
        height: 1px;
    }

    .scrolldown {
        --sizeX: 14px;
        --sizeY: 33px;
    }

    .scrolldown span {
        font-size: 13px;
    }
    
    .prf-abt .col-lg-2.col-md-2{
        max-width: 22%;
    }

}

@media screen and (max-width: 400px) {

    .preloader .load-perc {
        font-size: 70px;
    }

    .preloader img {
        max-width: 220px;
        width: 220px;
    }

    .preloader .row:nth-child(2) span{
        font-size: 14px ;
        padding-bottom: 0;
    }

    .fdbk{
        border: none;
        text-align: center !important;
        padding: 0;
        margin: auto;
    }

    .preloader .row .fdbk span{
        margin: 0 !important;
        font-size: 15px;
    }

    /* ------------- */

    .vrt-center{
        margin-top: 0 !important;
    }

    .title{
        margin-top: 10px;
        display: inline-block;
        font-size: 16px;
    }

    .title+h1{
        font-size: 28px;
        margin-top: 5px;
    }

    .toggle-bg p{
        line-height: 1.3;
        text-align: justify;
        padding: 5px;
        font-size: 13px;
    }

    .vs-hvr-btn .circle{
        width: 25px;
        height: 25px;
    }

    .vs-hvr-btn .circle .icon.arrow {
        left: -2px
    }

    .vs-hvr-btn .button-text{
        font-size: 14px;
        padding: 5px 7px;
        line-height: 1.2;
    }

    .qr img {
        max-width: 40px;
        width:40px;
    }

    .qr + div {
        line-height: 1.2;
        font-size: 12px;
    }

    .social-links img {
        min-width: 18px;
        width: 18px;
        max-width: 18px;
    }

    #fb-icon {
        min-width: 13px;
        width: 13px;
        max-width: 13px;
    }

    
    .profile .large-span{
        font-size: 18px;
    }

    .larger-ques{
        font-size: 22px;
    }

    
    .input-cursor{
        height: 18px;
    }

    .profile span{
        font-size: 15px;
    }

    .profile img {
        max-width: 79px;
        width: 79px;
        max-height: 79px;
        height: 79px;
    }

    .prf-abt p {
        font-size: 12px;
    }

    .pr-option button {
        padding: 2px 13px;
        outline: none;
        font-size: 13px;
        margin-right: 9px;
    }

    
    footer{
        font-size: 10px;
    }

    .chevrons {
        margin-top: 40px;
    }

    .slide-text{
        padding-left: 60px;
    }

    .slide-img {
        top: 24%;
        right: -10%;
        min-width: 100%;
        height: 100%;
        opacity: 0.4;
    }

    .qr-row {
        margin-bottom: 10px;
    }

    .pr-text {
        margin-left: 10px;
    }

    
    .prf-abt .qr-row {
        margin-bottom: 0px;
    }

    .toggle-bg p{
        padding-right: 10px;
    }
}

@media screen and (max-width: 360px){
    .larger-ques {
        font-size: 21px;
    }

    
    .toggle-bg p{
        padding-right: 5px;
    }

}

@media screen and (max-width: 320px){
    
    .profile{
        margin-top: 20px;
    }
    
    .profile img {
        max-width: 55px;
        width: 55px;
        max-height: 55px;
        height: 55px;
    }

    .profile .large-span{
        font-size: 14px;
    }

    .larger-ques {
        font-size: 16px;
        line-height: 1 ;
        letter-spacing: normal;
        margin-top: 11px ;
    }

    .toggle-bg p {
        line-height: 1;
        text-align: justify;
        padding: 3px 3px 0 3px;
        font-size: 11px;
    }

    .prf-abt div.vs-text-yellow span {
        font-size: 10px;
    }
    
    .input-cursor{
        height: 16px;
    }

    .profile span{
        font-size: 12px;
    }

    .prf-abt p {
        font-size: 11px;
    }

    .prf-abt .col-9{
        padding-right:  0 !important;
    }

    .qr {
        min-width: 60px;
        max-width: 60px;
        width: 60px;
        padding: 5px 10px;
        margin-left: 10px;
    }

    .pr-option button {
        padding: 2px 10px;
        font-size: 11px;
        margin-right: 2px;
    }

    .pr-text{
        margin-top: 8px;
        margin-left: 7px;
    }

    #fb-icon{
        min-width: 12px;
        max-width: 12px;
        width: 12px;
    }

    .social-links img {
        min-width: 17px;
        max-width: 17px;
        width: 17px;
    }

    .social-links{
        padding: 10px 2px;
    }

    .slide-d,
    .slide-l{
        background-position: 100% 100%;
    }

    .navbar-dark .navbar-toggler {
        min-width: 80px;
        font-size: 16px;
    }

    .vs-hvr-btn .circle {
        width: 20px;
        height: 20px;
    }

    .vs-hvr-btn .circle .icon.arrow {
        left: -5px;
        top: 2px;
        height: 1.5px;
    }

    .vs-hvr-btn:hover  .circle .icon.arrow {
        width: 10px;
    }

    .vs-hvr-btn .circle .icon.arrow::before {
        width: 8px;
        height: 8px;
    }

    .vs-hvr-btn .button-text {
        font-size: 12px;
        padding: 5px 0px;
    }

    footer  {
        font-size: 10px;
    }


}

@media screen and (max-width: 300px) {

    .preloader .load-perc {
        font-size: 60px;
    }

    .preloader img {
        max-width: 200px;
        width: 200px;
    }

    .preloader .loader+span {
        font-size: 14px;
        letter-spacing: 8px;
    }

    .preloader .row:nth-child(2){
        text-align: center;
        padding: 10px;
    }

    .preloader .row:nth-child(2) span{
        font-size: 12px !important;
    }

    .fdbk span{
        margin: 0 !important;
    }

    /* -------- */
    .proj-btn span{
        font-size: 14px;
    }

    .btn-bg, .btn-arrow {
        width: 25px;
        height: 25px;
    }

    .btn-arrow svg {
        width: 17px;
    }

    .title .hr-white-line {
        width: 40px;
    }

    .title{
        font-size: 14px;
    }

    .title+h1 {
        font-size: 26px;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .toggle-bg p {
        font-size: 12px;
    }

    .proj-btn{
        margin-top: 30px !important;
    }

    .social-links {
        margin-bottom: 30px;
        padding: 10px 3px;
    }

    .navbar{
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .nav-link{
        font-size: 13px;
    }

    .nav-item button{
        padding: 0px 10px;
        margin-top: 5px;
    }

    .nav-item button svg,
    .scrolldown a{
        width: 14px;
    }

    .title+h1{
        font-size: 24px;
    }

    .toggle-bg p{
        font-size: 10px;
    }
}


.active{
    color: #ffba00;
}