body {
    font-family: 'Raleway', sans-serif;
}

@font-face {
    font-family:Portrait;
    src:url(../fonts/Portrait-Light.eot);
    src:url(../fonts/Portrait-Light.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Portrait-Light.woff) format('woff'),
        url(../fonts/Portrait-Light.ttf) format('truetype'),
        url(../fonts/Portrait-Light.svg#eef1162f892eea819041155feb347e1f) format('svg');
    font-style:normal;
    font-weight:200
}
@font-face {
    font-family:Portrait;src:url(../fonts/Portrait-Regular2.eot);
    src:url(../fonts/Portrait-Regular2.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Portrait-Regular2.woff) format('woff'),
        url(../fonts/Portrait-Regular2.ttf) format('truetype'),
        url(../fonts/Portrait-Regular2.svg#b42bb75d2d0748402daa28693ce09573) format('svg');
    font-style:normal;
    font-weight:400
}

/* ============================================ Video Background and project-scroll css Starts ===================================== */
#myVideo {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

.my-banner {
    color: white;
    text-align:center;
    height: 100vh;
}

.home-page-banner {
    position: absolute;
    width: 100%;
}

.my-banner h1
{
    font-size: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: white;/*#fab00f;*/
}

.project-scroll {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.project-scroll span {
    display: block;
    text-align: center;
    font: 400 .75rem Apercu;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .09rem;
    opacity: 0;
}

.project-scroll .bar {
    display: block;
    position: relative;
    margin: .9375rem auto 0;
    width: 2px;
    height: 60px;
    background: #fff;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

.project-scroll.is-hidden span {
    transition: opacity .6s cubic-bezier(.19,1,.22,1);
    opacity: 0!important;
}

.project-scroll.is-hidden .bar {
    transition: -webkit-transform .6s cubic-bezier(.19,1,.22,1);
    transition: transform .6s cubic-bezier(.19,1,.22,1);
    -webkit-transform: translate3d(0,100%,0)!important;
    transform: translate3d(0,100%,0)!important;
}
/* ============================================ Video background and project-scroll css Ends ===================================== */

/* ============================================ nav-btn css Starts ===================================== */
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: inherit;
}
.nav-btn {
    display: block;
    position: fixed;
    top: 8%;
    z-index: 100;
    cursor: pointer;
    opacity: 0;
    transition: opacity .9s cubic-bezier(.19,1,.22,1);
}

.nav-btn:after, .nav-btn:before {
    content: "";
    position: absolute;
    top: 0;
    width: 10vw;
    height: 2px;
    background: #fff;
    transition: color 1s cubic-bezier(.19,1,.22,1),-webkit-transform .7s cubic-bezier(.19,1,.22,1),width .8s cubic-bezier(.19,1,.22,1);
    transition: color 1s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1),width .8s cubic-bezier(.19,1,.22,1);
}

.btn-about:after {
    left: 100%;
    -webkit-transform: translate3d(155px,8px,0);
    transform: translate3d(155px,8px,0);
}

.btn-about:before {
    left: 100%;
    -webkit-transform: translate3d(35px,8px,0);
    transform: translate3d(35px,8px,0);
}

body.is-loaded .btn-about {
    opacity: 1;
    pointer-events: initial;
}

.btn-about {
    right: 5%;
}

.btn-about:hover:after {
    -webkit-transform: translate3d(30px,8px,0);
    transform: translate3d(30px,8px,0);
}

.btn-about:hover:before {
    width: 0vw;
    -webkit-transform: translate3d(-100px,8px,0);
    transform: translate3d(-100px,8px,0);
}

.btn-projects:after {
    right: 100%;
    -webkit-transform: translate3d(-155px,8px,0);
    transform: translate3d(-155px,8px,0);
}

.btn-projects:before {
    right: 100%;
    -webkit-transform: translate3d(-35px,8px,0);
    transform: translate3d(-35px,8px,0);
}

.btn-projects {
    left: 5%;
    width: 135px;
    transition: opacity .6s cubic-bezier(.19,1,.22,1) 1s;
}

body.is-home .btn-projects, body.is-about .btn-projects, body.is-section .btn-projects {
    opacity: 1;
}

.btn-projects:hover:after {
    -webkit-transform: translate3d(-30px,8px,0);
    transform: translate3d(-30px,8px,0);
}

.btn-projects:hover:before {
    width: 0vw;
    -webkit-transform: translate3d(140px,8px,0);
    transform: translate3d(140px,8px,0);
}

.overflow-hidden {
    overflow: hidden;
}

.nav-btn .overflow-hidden {
    display: block;
    position: relative;
    transition: -webkit-transform .6s cubic-bezier(.19,1,.22,1);
    transition: transform .6s cubic-bezier(.19,1,.22,1);
}

.btn-about:hover .overflow-hidden {
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
}

.btn-projects:hover .overflow-hidden {
    -webkit-transform: translate3d(10px,0,0);
    transform: translate3d(10px,0,0);
}

.nav-btn span {
    display: block;
    position: relative;
    font-size: 1rem;
    color: #fff;
    z-index: 2;
    transition: color .8s cubic-bezier(.19,1,.22,1),-webkit-transform .8s cubic-bezier(.77,0,.175,1);
    transition: color .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.77,0,.175,1);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.nav-btn span:first-child {
    position: absolute;
    left: 0;
    top: -100%;
}

.nav-btn span:last-child {
    position: absolute;
    left: 0;
    top: 100%;
}

.nav-btn.is-active span {
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

.btn-about span:first-child {
    position: relative;
}

.btn-about span:nth-child(2) {
    position: absolute;
    left: 0;
    top: 200%;
}

.nav-btn.is-all-project span {
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}


/* ============================================ nav-btn css Ends ===================================== */

/* ============================================ About Page Css Starts ===================================== */
.page {
    position: absolute;
    top: 0;
    width: 100vw;
}

.page-about .my-banner {
    /*background-image: url(../images/about-banner.jpg?v=1);*/
    background: #ab806a;/*#0c1e2f;*/
    background-position: center;
    background-size: cover;
}

.page-project .my-banner {
    background-position: center;
    background-size: cover;
}

.page-about .my-banner .para {
    line-height: 1.3;
    transform: translateY(100%);
    color: white/*#fab00f /*#f9b52c*/;
    height: 100%;
}

.page-about.on-load .my-banner .para {
    transform: translateY(22%);
    transition: cubic-bezier(0.4, 0, 1, 1) 1000ms;
    transition-delay: 200ms;
}

.page-about.on-load .my-banner h1 {
    font-size: 60px;
    top: 10%;
    transform: translateY(0%);
    transition: all cubic-bezier(0.4, 0, 1, 1) 1000ms;
    transition-delay: 200ms;
}

.page-about .my-banner img {
    width: 400px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #f9b52c;
}

.page-about.on-load .my-banner img {
    width: 200px;
    top: 10%;
    transform: translateY(0%);
    transition: all cubic-bezier(0.4, 0, 1, 1) 1000ms;
    transition-delay: 200ms;
}

.page-project h1 {
    transform: translateY(-60%);
    font-weight: 300;
    color: white;
    font-size: 8vw;
    font-family: Portrait;
}

.pic1, .pic2 {
    position: relative;
}

.pics:hover img {
    opacity: 0;
}
.pic1:hover img {
    opacity: 1;
}
.pic2:hover img {
    opacity: 1;
}

.about-pic {
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    color: #000;
    padding: 25px;
    display: flex;
}

.about-pic p {
    text-align: justify;
}

@media (max-width: 991px) {
    .page-about.on-load .my-banner img {
        top: 5%;
    }
    .page-about.on-load .my-banner .para {
        transform: translateY(8%);
    }
    .page-about.on-load .my-banner h1 {
        font-size: 40px;
    }
}
/* ============================================ About Page css Ends ===================================== */

/* ============================================ Slide Round css Starts ===================================== */

a.slide-round  {
    text-decoration: none;
    color: black;
}

.slide-round {
    position: fixed;
    bottom: 10%;
    right: 5%;
    width: 56px;
    height: 56px;
    z-index: 200;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    transition: background .7s cubic-bezier(.19,1,.22,1),-webkit-transform .9s cubic-bezier(.19,1,.22,1);
    transition: background .7s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1);
}

.slide-round .overflow {
    position: absolute;
    top: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-transform: translate3d(0,2px,0) rotate3d(0,0,1,90deg);
    transform: translate3d(0,2px,0) rotate3d(0,0,1,90deg);
}

svg:not(:root) {
    overflow: hidden;
}

.slide-round svg {
    display: block;
    position: relative;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);
    transition: transform .3s cubic-bezier(.165,.84,.44,1);
    z-index: 2;
}

.slide-round svg.off {
    -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
    transform: translate3d(0,0,0) scale3d(1,1,1);
}

.slide-round svg.on {
    position: absolute;
    top: 0;
    -webkit-transform: translate3d(-90%,0,0) scale3d(1.3,1.3,1.3);
    transform: translate3d(-90%,0,0) scale3d(1.3,1.3,1.3);
}

.slide-round:hover {
    background: #fff!important;
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
}

.slide-round:hover svg.off {
    -webkit-transform: translate3d(90%,0,0) scale3d(1.3,1.3,1.3);
    transform: translate3d(90%,0,0) scale3d(1.3,1.3,1.3);
}

.slide-round:hover svg.on {
    -webkit-transform: translate3d(0,0,0) scale3d(.85,.85,.85);
    transform: translate3d(0,0,0) scale3d(.85,.85,.85);
}

/* ============================================ Slide Round css Ends ===================================== */

/* ============================================ Slider css Starts ===================================== */
.slider {
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
}

#slider1 {
    width: 50vw;
    right: 0;
}

#slider2 {
    width: 15vw;
    left: 0;
}

#text-slider {
    width: 35vw;
    left: 15vw;
}

#project-number-slider {
    width : 5vw;
    left: 17vw;
}

#heading-slider {
    width: 82vw;
    right: 0;
}

.holder {
    -webkit-transition: all 1.0s ease-in-out;
    -moz-transition: all 1.0s ease-in-out;
    -o-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
}

.holder1 {
    width: max-content;
}

#slider2 .holder1 {
    transform: translateX(-35vw);
}

.holder2 {
    width: max-content;
}

.text-holder {
    width: max-content;
}

.heading-holder {
    width: max-content;
}

.slide {
    float: left;
    width: 50vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.text-holder .slide {
    width: 35vw;
}

.heading-holder .slide {
    width: 82vw;
}

#project-number-slider h5 {
    color: #fff;
    margin-top: 20vh; /*25vh;*/
    text-align: left;
    padding-left: 1vw;
    font-size: 28px;
}

#heading-slider h1 {
    text-align: left;
    padding-right: 5vw;
    font-size: 8vw;/*font-size: 3vw;*/
    /*font-weight: bold;*/
    font-family: Portrait;
}


.project0-banner { background-image: url(../images/renders/hotel/1.jpg); }
.project1-banner { background-image: url(../images/renders/hotel/1.jpg); }
.project2-banner { background-image: url(../images/renders/irctc-marketing-office/1.jpg); }
.project3-banner { background-image: url(../images/renders/master-suite-and-study/1.jpg); }
.project4-banner { background-image: url(../images/renders/office-and-conference-room/1.jpg); }
.project5-banner { background-image: url(../images/renders/residence1/1.jpg); }
.project6-banner { background-image: url(../images/renders/residence2/1.jpg); }


.project1-text-bg { background: #844f4f; }
.project2-text-bg { background: #414d8a; }
.project3-text-bg { background: #de326d; }
.project4-text-bg { background: #41362e; }
.project5-text-bg { background: #32dec6; }
.project6-text-bg { background: #dbde32; }

.effect {
    -webkit-transition: all 1.0s ease-in-out;
    -moz-transition: all 1.0s ease-in-out;
    -o-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
}

.trans-left {
    transform: translateX(-100%);
}
.trans-right {
    transform: translateX(100%);
}
.trans-up {
    transform: translateY(-100%);
}
.trans-down {
    transform: translateY(100%);
}

.display-none {
    display: none;
}

.project-heading {
    display: none;
}

.half-width {
    width: 50vw;
}

.right0 {
    right: 0;
}

#page-project .my-banner {
    position: relative;
}

.project-content p {
    text-align: justify;
}
/* ============================================ Slider css Ends ===================================== */

.product-wrapper {
    background: white;
}