@font-face {
    font-family: 'noe-display-bold';
    src: url(../fonts/noe-display-bold.ttf), url(../fonts/noe-display-bold.eot), url(../fonts/noe-display-bold.otf), url(../fonts/noe-display-bold.woff),  url(../fonts/noe-display-bold.woff2);
}
@font-face {
    font-family: 'Helvetica-Regular';
    src: url(../fonts/Helvetica-Regular.ttf), url(../fonts/Helvetica-Regular.eot), url(../fonts/Helvetica-Regular.otf), url(../fonts/Helvetica-Regular.woff),  url(../fonts/Helvetica-Regular.woff2);
}

@font-face {
    font-family: 'DIN-Medium';
    src: url('../fonts/DIN-Medium.eot');
    src: url('../fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DIN-Medium.woff2') format('woff2'),
        url('../fonts/DIN-Medium.woff') format('woff'),
        url('../fonts/DIN-Medium.ttf') format('truetype'),
        url('../fonts/DIN-Medium.svg#DIN-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'DIN-BoldAlternate';
    src: url('../fonts/DIN-BoldAlternate.eot');
    src: url('../fonts/DIN-BoldAlternate.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DIN-BoldAlternate.woff2') format('woff2'),
        url('../fonts/DIN-BoldAlternate.woff') format('woff'),
        url('../fonts/DIN-BoldAlternate.ttf') format('truetype'),
        url('../fonts/DIN-BoldAlternate.svg#DIN-BoldAlternate') format('svg');
    font-weight: bold;
    font-style: normal;
}




* {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:before, :after {
    box-sizing: border-box;
}
body{
    font-family: 'DIN-BoldAlternate';
    font-weight: 100;
    font-size: 14px;
    /* color: #9a9a9a; */
    color: #fff;
    margin: 0;
    background-color: #1b5a40;
}
article, aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
ul, li {
    list-style: none;
}
a{
    color: #999999;
    text-decoration: none;
}
a:active, a:hover {
    outline: 0;
    color: #666;
}
input {
    font-family: 'DIN-BoldAlternate';
    font-size: 13px;
    -webkit-appearance: none;
}
input:focus {
    outline: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
img {
    max-width: 100%;
}
p{
    font-size: calc(11px + .3vw);
    font-family: 'DIN-BoldAlternate';
    line-height: 1.8vw;
    transform: translateX(-10%);
    opacity: 0;
}
.section.active_anim p{    
    animation: para_anim 1s forwards 1s;
}
@keyframes para_anim {
    0%{
        opacity: 0;
        transform: translateX(-10%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
.container {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
h2{
    font-family: 'DIN-Medium';
    /* color: #000; */
    color:#fff;
    font-size: calc(14px + 1.2vw);
    margin-bottom: 30px;
    transition: .4s;
    position: relative;
    text-transform: uppercase;
}
h3{
    font-family: 'DIN-Medium';
    /* color: #000; */
    color:#fff;
    font-size: calc(12px + 1.0vw);
    margin-bottom: 30px;
    transition: .4s;
    position: relative;
    text-transform: uppercase;
}
#commercial-retail-wrp h2{
    margin-bottom: 10px;
}
h1 span,
h2 span{
    display: block;
    opacity: 0;
    transform: translateX(-20%);
    line-height: 3.4vw;
}
.section.active_anim h1 span,
.section.active_anim h2 span,
.section.active_anim h3 span{
    animation: reveal 1s ease forwards;
}
.section.active_anim h1 span,
.section.active_anim h2 span:nth-child(2){
    animation-delay: .5s;
}
.section.active_anim h1 span,
.section.active_anim h2 span:nth-child(3){
    animation-delay: .8s;
}
@keyframes reveal {
    0%{
        opacity: 0;
        transform: translateX(-20%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fade{
    opacity: 0;
}
.section.active_anim .fade{
    animation: fade .8s forwards;    
}
@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* Header */
header{
    position:fixed;
    display:block;
    width: 100%;
    z-index: 2;
    color: #f2f2f2;
    padding: 15px 0;
    transition: opacity .5s linear;
    opacity: 0;
    background-color: rgba(24, 69, 52, 0.7);
}
header.show{
    opacity: 1;
}
.fp-viewing-home header {
    display: none;
}
header .container{
    display: flex;
    justify-content: space-between;
    padding-left: 0;
}
header img{
    transition: .5s;
    filter: brightness(0) invert(1);
}
header .container > a{
    /*margin-right: calc(5% + 30px);*/
    display: flex;
    align-items: center;
}

.menu-btn{
    display: none;
}
nav{
    z-index: 3;
    display: flex;
    align-items: center;
}
nav a{
    margin: 0 10px;
    text-transform: uppercase;
    font-size: 13px;
    overflow: hidden;
    position: relative;
    color: #fff;
    height: 15px;
}
nav a span{
    transition: 1.2s;
    display: block;
}
nav a span.hidden {
    position: absolute;
    top: 0;
    transform: translateY(-16px);
}
nav a:hover .hidden{
    transform: translateY(0);
}
nav a:hover .open{
    transform: translateY(16px);
}
[class*=fp-viewing-gallery-] nav a{
    color: #333;
}
nav a.active, [class*=fp-viewing-gallery-] nav a.active, nav a:hover{
    color: #c1c1c1;
    font-weight: 700;
}
.blink-btn{
    padding: 5px 10px;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    height: auto;
    animation: blink 2s infinite;
}
@keyframes blink{
    0%{
        opacity:.4;
        background-color: #c12b70;
    }
    50%{
        opacity:1;
        background-color: #0077b9;
    } 
    100%{
        opacity:.4;
        background-color: #c12b70;
    }
}

#footer{
    display: none;
}


/*Offer slider start*/
#home-wrp {

}
.offerslider.owl-carousel {

}
.offerslider.owl-carousel .item {
    width: 100%;
    height: 100vh;
/*    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;*/
}
/*.offerslider.owl-carousel .item.slide1 {
    background-image: url(../images/main_banner.jpg);
}
.offerslider.owl-carousel .item.slide2 {
    background-image: url(../images/main_banner2.jpg);
}*/

.offerslider.owl-carousel .owl-item img.desk_img {
    display: block;
}
.offerslider.owl-carousel .owl-item img.mobi_img {
    display: none;
}

/* Home */ 
#commercial-retail-wrp{
    background-color: #1b5a40;
}
#commercial-retail-wrp .fp-slide small{
    color: #787878;
    font-size: calc(14px + .7vw);
    font-weight: bold;
    /*opacity: 0;*/
}

.home-txt p{
    margin-bottom: 20px;
}
.section.active_anim .slide h2 span{
    opacity: 0;
}
.section .slide .slidebg{
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: left top;
}
.section .slide .slidecontent{
    position: absolute;
    width: 50%;
    left: 0;
    padding: 0 10% 0 0%;
}

.section.active_anim .slide.active h2 span:nth-child(4){
    animation-delay: 1.7s;
}
#commercial-retail-wrp .fp-slide .fp-tableCell{
    position: relative;
    justify-content: flex-end;
}
#commercial-retail-wrp .fp-slide .container{
    flex-direction: column;
}
#commercial-retail-wrp .slide{
    background-position: right !important;
}
#commercial-retail-wrp .slide1 .slidebg{
    background-image: url(../images/slide1.jpg);
}
.fp-controlArrow{
    transition: transform .5s ease;
    opacity: 0;
    animation: fade .8s forwards 4s;
}
#commercial-retail-wrp .num{
    position: absolute;
    bottom: 9.8%;
    z-index: 2;
    left: 5%;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(13px + .2vw);
    letter-spacing: 1px;
    overflow: hidden;
    opacity: 0;
    animation: fade .8s forwards 4s;
}
#commercial-retail-wrp .num span{
    transform: translateY(0px);    
}
#commercial-retail-wrp .num .current{
    display: inline-block;
    transition: all .5s ease;
    transform: translateY(0);
    animation: downcount .5s forwards; 
}
@keyframes downcount{
    0% {
        transform: translateY(0px);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}
#commercial-retail-wrp .num .current.anim-upcount{
    animation: upcount .5s forwards;
}
@keyframes upcount{
    0% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}
span.hm-txt{
    line-height: 22px;
}
/* About commercial-retail */
.fp-viewing-about header .container > div:nth-child(2) img{
    filter: brightness(0) invert(1);
}
#about-project-wrp .container{
        height: 100%;
        width: 100%;
        align-items: center;
    }
.about-right{
    width: 50%;
    padding: 0 5%;
}
.about-right h2{
    margin-bottom: 25px;
}
.about-right h2:first-child span {
    line-height: 3.4vw;
}
.about-right h2 span{
    line-height: 30px;
}
.about-right h2:nth-child(2){
    line-height: 30px;
    font-size: calc(12px + 1.22vw); 
}
.about-right h2:nth-child(2) small{
    opacity: 0;
    transform: translateX(-20%);
}
.about-right p{
    font-size: calc(11px + .3vw);
}
.section.active_anim .about-right h2 small{
    animation: reveal 1s ease forwards;
    animation-delay: .7s;
}
.about-right h2:after{
    right: -70%;
    width: 15vw;
    height: 50vh;
    z-index: 2;
    top: 80%;
}
.about-lft{
    width: 50%;
    height: 100%;
    /*position: absolute;
    bottom: 0;
    left: 0;*/
    overflow: hidden;
}
.img-wrp{
    width: 100%;
    height: 100%;
    background:  url(../images/about-bg.jpg) center;
    background-size: cover;
}
/*.img-wrp-mask{
    position: absolute;
    top: -5%;
    left: -10%;
    width: 120%;
    height: 110%;
    background:  url(../images/webp/paralax_img.webp) center;
    background-size: cover;
}*/


/* Highlights */
.highlights-lft{
    width: 20%;
}
.highlights-right{
    width: 75%;
    display: flex;
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
}
.highlights-right .column{
    width: 33.3%;
    position: relative;
    transition: all .4s ease;
    cursor: pointer;
    opacity: 0;
    overflow: hidden;
}
.section.active_anim .highlights-right .column:nth-child(1){
    animation-delay: 2.2s;
}
.section.active_anim .highlights-right .column:nth-child(2){
    animation-delay: 2.5s;
}
.section.active_anim .highlights-right .column:nth-child(3){
    animation-delay: 2.8s;
}
.section.active_anim .highlights-right .column:nth-child(4){
    animation-delay: 3.1s;
}
.h-mask{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    position: relative;
    z-index: 2;
    transition: all .8s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.highlights-right .column:hover .h-mask{
    height: 0;
}
.h-img{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: black;
    position: absolute;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.h-img img{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    transition: all 2s ease;
    transform: scale(1.2);
}
.highlights-right .column:hover .h-img img{
    transform: scale(1);
}
.h-txt{
    position: absolute;
    top: 25%;
    width: 100%;
    padding: 0 30% 0 10%;
    transition: all .8s ease-in;
    font-size: calc(13px + 0vw);
    z-index: 4;
    overflow: hidden;
    color: #fff;
}
.h-txt > div{
    overflow: hidden;
}
.h-txt h3{    
    font-size: calc(13px + 1vw);
    font-family: 'DIN-Medium';
    margin-bottom: 20px;
    line-height: normal;
}
.highlights-right .column:hover .h-txt{
    top: 25%;
}
.h-txt ul{
    margin-left: 25px;
    transition: all .5s ease-in;
}
.highlights-right .column:hover .h-txt ul{
    transform: translateY(-150%);
}
.h-txt ul li{
    margin-bottom: 12px;
    list-style-type: disc;
    text-transform: uppercase;
}

/* Gallery */
#gallery-wrp .container{
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 2;
    flex-direction: column;
    width: 30%;
}
#gallery-wrp .fp-slidesContainer{
    transform: none !important;
    width: 100% !important;
}
#gallery-wrp .slide {
    width: 100% !important;
    z-index: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s ease;
}
#gallery-wrp .slide.active {
    z-index: 9;
    position: relative;
    opacity: 1;
}
#gallery-wrp .fp-slidesNav{
    display: none;
}
.gallery-cont{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#gallery-wrp h2, #gallery-wrp p{
    color: #fff;
}
.gallery-cont video, .gallery-cont img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    max-width: fit-content;
}
.controls {
    background-color: #fff;
    padding: 10px;
    bottom: 15%;
    width: 35%;
    left: 5%;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
}
.controls .thumbnail-wrp{
    width: 66%;
    overflow: hidden;
}
#gallery-wrp .fp-controlArrow.fp-prev, #gallery-wrp .fp-controlArrow.fp-next{
    display: none;
}
.thumbnail-stage{
    display: block;
    float: left;
    width: calc(100% * 4);
    transition: .4s;
}
.thumbnail-stage div {
    float: left;
}
.num1{
    width: 50%;
    text-align: center;
}
.nav-arrow{
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-arrow > span{
    padding: 8px 0;
    display: inline-block;
    cursor: pointer;
    font-family: monospace;
    font-size: 22px
}


/* Location */
.location-first{
    width: 100%;
}
.location-first .container > div {
    width: 50%;
}
.location-first .container > div > p{
    width: 80%;
    margin-bottom: 30px;
}
.location-first ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    transform: translateX(-10%);
    opacity: 0;
}
.section.active_anim .location-first ul{
    animation: para_anim 1s forwards 2.5s;
} 
.location-first ul li{
    width: 30%;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.location-first ul li strong{
    color: #000;
    font-size: calc(13px + .1vw);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}
.location-first ul li span{
    font-family: 'DIN-BoldAlternate';
    font-size: 13px;
    color: #787878;
    line-height: normal;
    margin-bottom: 8px;
    font-weight: 700;
    display: block;
}
.location-last{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #bfe5e8;
    background-size: cover;
    display: flex;
    align-items: center;
}
.section.active_anim .location-last{
    animation-delay: 4.3s;
    animation-duration: .8s;
}
.location-middle > div {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.location-middle > div img {
    margin-right: 15px;
}
#map {
    height: 100%;
}


#aboutgpl-wrp {

}
#aboutgpl-wrp .container {
    height: 100%;
    width: 100%;
    align-items: center;
}
.img-wrp2 {
    width: 100%;
    height: 100%;
    background:  url(../images/aboutgpl-bg.jpg) center;
    background-size: cover;
}

/* contact */
#foooter{
    padding: 0 0 70px 0;
    background-color: rgba(24, 69, 52, 1);
    /* color: #858585; */
    color:#fff;
}
#foooter .fp-tableCell {
    flex-direction: column;
}
#foooter :not(.f-left) span{
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}
#foooter span small{
    font-size: inherit;
}
#foooter img{
    vertical-align: middle;
}
.f-left{
    margin-right: 10%;
}
.f-left h2{
    margin-bottom: 0;
}
.f-right{
    width: 100%;
}
#foooter .container.top{
    justify-content: flex-start;
    align-items: center;
    padding: 50px 0;
}
#foooter .f-heading{
    margin-bottom: 10px;
}
.section#foooter p{
    animation: none;
    opacity: 1;
    transform: translate(0);
}


/* Side form */

.enquire-form-slide {
    background-color: rgba(255,255,255,1);
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    padding: 25px 20px;
    position: fixed;
    right: -250px;
    top: 25%;
    z-index: 3;
    transition:all ease .4s
}
.enquire-form-slide.active {
    right: 0;
    transition:all ease .4s
}
.enquire-form-slide .enq-toggle {
    background: #184534;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    position: absolute;
    top: 30%;
    left: -74px;
    cursor: pointer;
    padding: 8px 25px;
    transform: rotate(-90deg);
    text-transform: uppercase;
    font-size: 16px;
}
.enquire-form-slide .close-form {
    display:inline-block;
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
    color: #184534;
    text-align: center;
    font-size: 30px;
}
.form-head {
    font-size: 22px;
    color: #184534;
    line-height: 35px;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.enquire-form-slide .fieldwrapper {
    width: 100%;
    margin: 0 10px 20px 0;
}
.enquire-form-slide .fieldwrapper input, .enquire-form-slide .fieldwrapper select {
    width: 100%;
    border: none;
    background-color: transparent;
    border: 1px solid #ccc;
    color: #333333;
    font-size: 14px;
    line-height: 18px;
    height: 32px;
    padding: 0 0 0 20px;
    outline: 0;
}
.enquire-form-slide .fieldwrapper.form-cta-btn {
    float: none;
    width: auto;
    max-width: 150px;
    margin: 0 auto;
    text-align: center;
    background-color: transparent;
}
.enquire-form-slide .fieldwrapper.form-cta-btn input {
    height: 40px;
    width: 109px;
    padding: 0;
    margin: 0;
    border:none;
    background-color: rgba(21, 88, 19, 0.95);
    color: #ffffff;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.enquire-form-slide .fieldwrapper.form-cta-btn a {
    display: block;
    width: 80%;
    padding: 10px 20px;
    margin: 0 auto;
    border: none;
    background-color: #184534;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.enquire-form-slide .fieldwrapper.form-cta-btn input:hover {
    background-color: #1783ce;
}

.enquire-form-slide .fieldwrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../images/webp/arrow-down.webp) 96% center no-repeat #fff;
    outline: 0;
    padding-right: 40px;
}
.enquire-form-slide .fieldwrapper > input:placeholder-shown {
    color: #000000;
    opacity: 1;
}
.enquire-form-slide .fieldwrapper.mob-wrp {
    display: flex;
    justify-content: space-between;
    background: #fff;
}
.mob-wrp input:first-child{
    width: 40px;
    padding-left: 2px;
}
.mob-wrp input:last-child{
    width: calc(100% - 40px);
}
.error-msg {
    color: red;
    margin-bottom: 10px;
    display: block;
}

/* Disclaimer Popup */
.white_content{
    max-width: 50%;
    background-color: white;
    border: medium none;
    overflow: visible;
    padding: 20px 1%;
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 740px;
    width: 90%;
    margin: 0 auto;
    z-index: 1002;
    text-align: center;
    display: none;
}
.white_content h3 {
    color: #324679;
    font-size: 20px;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 0 0 13px;
    text-transform: uppercase;
}
.white_content p {
    padding: 5px 0;
    font-size: 14px;
    font-family: 'DIN-BoldAlternate';
    line-height: 21px;
    margin-bottom: 0;
    transform: translate(0);
    color: #333;
    opacity: 1;
}
.light-container {
    height: 450px;
    overflow-y: scroll;
}
a.lightclose {
    background: #3397d1 none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 15px 0 0;
    padding: 10px 25px;
    text-decoration: none;
}
a.lightclose:hover {
    color: #fff;
}
.black_overlay {
    display: none;
    position: fixed;
    top: 0%;
    overflow: hidden;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
    display: none;
}

.enquire-form-slide .fieldwrapper.form-cta-btn input:hover {
    background-color: #1783ce;
}
.enquire-form-slide .fieldwrapper.homeally_dwnld_checklist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 0px 10px;
}
.enquire-form-slide .fieldwrapper.homeally_dwnld_checklist input {
    background-image: url(../images/webp/homeally_checkbox.webp);
    background-repeat: no-repeat;
    background-position: 0 0;
    border: none;
    width: 23px;
    height: 11px;
    border: none;
    margin-right: 10px;
    margin-top: 3px;
}
.enquire-form-slide .fieldwrapper.homeally_dwnld_checklist input:checked {
    background-image: url(../images/webp/homeally_checkbox_checked.webp);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.enquire-form-slide .fieldwrapper.homeally_dwnld_checklist span {
    font-size: 12px;
    line-height: 18px;
    color: #015e98;
}

.enquire-form-slide.submitpopup {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    background-color: rgba(0,0,0,0.8);
}
.submitpopup .inp-wrp {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    background-color: rgba(255,255,255,1);
    text-align: center;
    padding: 10px;
}
.submitpopup .inp-wrp p {
    font-family: 'DIN-BoldAlternate';
    color: #000;
    font-size: 14px;
    transform: translateX(0);
    opacity: 1;
}
.submitpopup.enquire-form-slide .fieldwrapper.form-cta-btn {
    max-width: none;
    margin: 10px auto;
}
.submitpopup.enquire-form-slide .fieldwrapper.form-cta-btn a {
    width: auto;
    display: inline-block;
    padding: 5px 10px;
}
.submitpopup .fieldwrapper.form-cta-btn a.whatsapp_btn i {
    font-size: 35px;
    vertical-align: middle;
}
@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait){
    .main-img{
        -webkit-mask-size: 90%;
    }
    p{
        line-height: 4.2vw;
    }
    h1 span,
    h2 span{
        line-height: 6.5vw;
        display: inline;
    }

   /* .offerslider.owl-carousel .item {
        background-position: center top;
        background-size: 100%;
        background-color: #000;
    }
    .offerslider.owl-carousel .item.slide1 {
        background-image: url(../images/main_banner_mobi.jpg);
    }
    .offerslider.owl-carousel .item.slide2 {
        background-image: url(../images/main_banner_mobi2.jpg);
    }*/

.offerslider.owl-carousel .owl-item img.desk_img {
    display: none;
}
.offerslider.owl-carousel .owl-item img.mobi_img {
    display: block;
}
    #commercial-retail-wrp h1 span,
    #commercial-retail-wrp h2 span,
    .home-txt p{
        color: #fff;
    }
    .about-lft h2 span{
        line-height: 15px;
    }
    header{
        background-color: #fff;
    }
    header img {
        filter: brightness(0) invert(0);
    }
    header .container{
        position: relative;
    }
    header .container > a{
        margin-right: calc(5% + 30px);
    }
    .menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        width: 22px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
    }
    .menu-btn span {
        width: 100%;
        height: 2px;
        background-color: #353535;
        transition: all .4s ease;
        margin-bottom: 3px;
    }
    .menu-btn span:nth-child(2) {
        width: 80%;
    }
    .menu-btn.opened span{
        background-color: #fff;
        margin-top: -6px;
    }   
    .menu-btn.opened span:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.opened span:first-child{
        transform: rotate(45deg)
    }
    .menu-btn.opened span:last-child{
        transform: rotate(-45deg)
    }
    nav{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: none;
        background-color: rgba(0,0,0,.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: .5s;
        pointer-events: none;
        position: fixed;
    }
    nav.opened{
        pointer-events: auto;
        opacity: 1;
    }
    nav a, [class*=fp-viewing-gallery-] nav a {
        color: #fff;
        margin-bottom: 20px;
        transition: none;
        transform: translateX(-40%);
        opacity: 0;
    }
    nav.opened a{
        transform: translateX(0);
        opacity: 1;
        transition: transform 800ms cubic-bezier(0, 0.695, 0, 1), background 800ms, -webkit-transform 800ms cubic-bezier(0, 0.695, 0, 1); 
    }
    nav a.active, [class*=fp-viewing-gallery-] nav a.active {
        color: #0077b9;
        font-weight: 700;
    }
    #footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #0077b9;
        color: #fff;
        z-index: 4;
        text-align: center;
        padding: 12px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        display: block;
    }
    #footer-form{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.8);
        display: none;
    }
    #footer-form form {
        display: flex;
        position: absolute;
        width: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        flex-direction: column;
        background-color: #fff;
    }
    #footer-form .subbtn{
        width: 100%;
    }
    #footer-form .inp-wrp{
        flex-direction: column;
        padding: 30px 30px 0;
        width: 100%;
    }
    #footer-form form .form-row{
        width: 100%;
        margin-bottom: 30px;
    }
    .close-btn{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
        display: flex;
        align-items: center;
        justify-content: center;
        right: -10px;
        top: -10px;
        position: absolute;
        background: #fff;
        font-weight: 700;
        font-size: 15px;
    }
    #commercial-retail-wrp .fp-slide .container{
        align-self: flex-start;
        /*margin-top: 20%;*/
    }
    #commercial-retail-wrp .fp-slide h2{
        width: 85%;
    }
    #commercial-retail-wrp .fp-slide small{
        font-size: calc(14px + 3.8vw);
    }
    #commercial-retail-wrp .fp-slide .fp-tableCell{
        flex-direction: column;
    }
    /*#commercial-retail-wrp .slide1 .slidebg{
        width: 100%;
        background-image: url(../images/mobi-slide1.jpg);
    }*/
    #commercial-retail-wrp .slide1 .slidebg {
        width: 100%;
        height: 50%;
        order: 2;
    }
    .section .slide .slidecontent{
        padding: 0 20px 0 20px;
        top: 50px;
        width: 100%;
    }
    #foooter .checklist-wrp .container{
        flex-direction: column;
        padding: 50px 0;
        text-align: center;
    }
    #foooter .checklist-wrp h4{
        width: 100%;
        margin: 30px 0;
    }
    #foooter .checklist-wrp span:not(.blue-circle){
        margin-bottom: 30px;
    }
    #gallery-wrp .container {
        width: 100%;
    }
    #about-project-wrp .container, #aboutgpl-wrp .container {
        flex-direction: column;
    }
    
    .about-lft {
        width: 100%;
        height: 50%;
        order: 2;
    }
    .about-right{
        width: 100%;
        padding-top: 60px;
    }
    
    .about-lft h2:after{
        top: 250%;
        right: -30%;
    }
    #highlights-wrp .container{
        height: 85%;
    }
    .highlights-right{
        height: 50vh;
        bottom: 20px;
        left: 0;
        width: 100%;
        /*flex-direction: column;*/
    }
    .highlights-right .column {
        width: 100%;
        height: 40vh;
    }
    .highlights-lft {
        width: 50%;
        padding-top: 4vh;
    }
    .highlights-lft h2:before{
        height: 50%;
        top: 25%;
        left: 100%;
    }
    .highlights-lft h2:after{
        height: 50%;
        width: 4vw;
        bottom: -25%;
        left: 100%;
    }
    .h-txt{
        width: 100%;
        padding: 0 5%;
    }
    .h-txt ul{
        display: flex;
        flex-wrap: wrap;
    }
    .h-txt ul li{
        width: 50%;
        margin-bottom: 5px;
    }
    #amenities-wrp .container{
        flex-direction: column;
    }
    .amenities-left{
        width: 80%;
        margin-bottom: 4vh;
    }
    .amenities-right{
        width: 80%;
    }
    .amenities-right > div {
        width: 50%;
        margin-bottom: 3vh;
    }
    .controls{
        width: 55%;
    }
    .location-first {
        width: 100%;
        margin-bottom: 3vh;
    }
    #location-wrp .container{
        flex-direction: column;
        height: 70vh;
        justify-content: flex-start;
    }
    .location-first .container > div {
        width: 100%;
    }
    .location-first h2{
        width: 55%;
    }
    .location-last{
        left: 0;
        width: 100%;
        height: 50%;
        bottom: 0;
        top: auto;
    }
    .location-middle > div img{
        margin-bottom: 10px;
    }
    .enquire-form-slide {
        top: auto;
        left: 0;
        right: auto;
        bottom: -100%;
        margin: 0 auto;
        width: 100%;
        max-width: none;
        padding-bottom: 80px;
    }
    .enquire-form-slide.active {
        right: auto;
        bottom: 0;
    }
    .enquire-form-slide .enq-toggle {
        left: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        background: #184534;
        box-shadow: 0 0 10px #fff inset; 
        height: auto;
        text-align: center;
        padding: 10px 0;
        position: fixed;
        z-index: 999;
        transform: none;
    }
    .enquire-form-slide .enq-toggle i {
        display: inline-block;
        background: #014d82;
        font-size: 1em;
        line-height: 25px;
        padding: 5px 15px;
        min-width: 100px;
        color: #fff;
        font-style: normal;
    }
    .enquire-form-slide .enq-toggle.active i{
        width:40px;
        text-indent:999px;
        overflow:hidden;
        min-width:inherit;
        border-radius:50%;
        background:#014d82 url(../images/webp/arrow_select.webp) no-repeat center center;
    }
    .form-head {
        font-size: 28px;
        line-height: 55px;
    }
    .enquire-form-slide .fieldwrapper {
        margin: 0 10px 10px 0;
    }
    .enquire-form-slide .fieldwrapper.form-cta-btn input {
        padding-top: 5px; 
    }
    
    .enquire-form-slide .fieldwrapper.homeally_dwnld_checklist {
        padding: 10px;
    }
}

@media only screen and (max-width: 480px){
    header{
        padding: 8px 0;
    }
    p{
        font-size: 13px;
    }
    h2, .about-lft h2{
        margin-bottom: 10px;
    }
    #footer-form form, .amenities-left, .amenities-right {
        width: 90%;
    }
    #commercial-retail-wrp .fp-slide h2, .home-txt{
        width: 100%;
        font-size: calc(16px + 1.5vw)
    }
    .commercial-retail-wrp-offer-img{
        background: #000;
    }
    #foooter .checklist-wrp .container{
        padding: 25px 0 75px;
    }
    .about-lft p {
        font-size: 12.5px;
    }
    .about-lft h2:nth-child(2){
        line-height: 15px;
    }
    
    .highlights-lft {
        width: 80%;
    }
    .h-txt h3{
        font-size: 12px;
    }
    .h-txt > div{
        display: none;
    }
    #gallery-wrp .container {
        top: 30%;
        width: 70%;
    }
    .controls {
        width: 90%;
    }
    .controls .thumbnail-wrp {
        width: 53%;
    }
    .nav-arrow {
        width: 50%;
    }
    #location-wrp .container {
        height: 65vh;
    }
    #location-wrp .fp-tableCell{
        align-items: flex-start;       
    }
    .location-first{
        margin: 8vh 0 0;
    }
    .location-first .container > div > p{
        margin-bottom: 10px;
        width: 100%;
    }
    .location-first h2 {
        width: 85%;
    }
    .location-first ul{
        flex-wrap: inherit;
        overflow-x: auto;
    }
    .location-first ul li{
        margin-right: 20px;
        text-transform: none;
    }
    .location-first ul li strong{
        font-size: 12px;
        letter-spacing: 0px;
    }
    .location-first ul li span{
        font-size: 11px;
        font-weight: normal;
    }
    
    #foooter{
        margin-bottom: 40px;
        padding: 30px 0; 
    }
    #foooter .container{
        flex-direction: column;   
    }
    #foooter .container.top {
        padding: 25px 0%;
    }
    .f-left h2{
        margin-bottom: 20px;
    }
     #foooter .bottom{
        margin-bottom: 40px;
     }
    .f-left{
        width: 80%;
    }
    .f-left br{
        display: none;
    }
}