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

@font-face {
    font-family: 'Heading-Pro-Bold-trial';
    src: url('../fonts/Heading-Pro-Bold-trial.eot');
    src: url('../fonts/Heading-Pro-Bold-trial.eot?#iefix') format('embedded-opentype'), url('../fonts/Heading-Pro-Bold-trial.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HeadingProTrial-Bold';
    src: url('../fonts/HeadingProTrial-Bold.svg#HeadingProTrial-Bold') format('svg'), url('../fonts/HeadingProTrial-Bold.ttf') format('truetype'), url('../fonts/HeadingProTrial-Bold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fonte Nexea";
    src: url("fonts/Fonte_Nexa-TTF") format("truetype"), url("fonts/Fonte_Nexa") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: 'Perpetua Titling MT Std';
    src: url('../fonts/PerpetuaTitlingMTStd-Rg.eot');
    src: url('../PerpetuaTitlingMTStd-Rg.eot?#iefix') format('embedded-opentype'), url('../PerpetuaTitlingMTStd-Rg.woff2') format('woff2'), url('../PerpetuaTitlingMTStd-Rg.woff') format('woff'), url('../PerpetuaTitlingMTStd-Rg.ttf') format('truetype'), url('../PerpetuaTitlingMTStd-Rg.svg#PerpetuaTitlingMTStd-Rg') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
textarea,
ul {
    margin: 0;
    padding: 0
}

.bold,
.highlight {
    font-weight: 700
}

.footerblk,
.rpos,
.sec3,
.sec4-slider,
.sec7,
body,
label.wrapper {
    position: relative
}

.form-element input:focus,
.sec4-slider .slick-slide:focus,
.sec6 .slick-slide:focus,
a,
a:hover {
    outline: 0
}

.container,
.sec4slidetxt img {
    margin: 0 auto
}

.blockcontainer,
.sec4-slider .slick-slide.slick-current.slick-active.slick-center .sec4imgdowntxt,
.sec4-slider .slick-slide.slick-current.slick-active.slick-center .sec4imgtoptxt {
    display: block
}

.blockcontainer,
.new-banner,
.sec5,
.sec5bgimg,
.sec6,
.sec8 {
    overflow: hidden
}

.highlight,
.uppercase {
    text-transform: uppercase
}



body {
    font-family: Roboto, sans-serif;
    overflow-x: hidden;
    background: #fff
}

a,
a:hover {
    text-decoration: none;
    border: 0
}

.form-element select,
img {
    border: none
}

.sec4imgblk img,
.sec6slider,
iframe {
    width: 100%
}

.clear,
.pageblock {
    clear: both
}

.bdnone {
    border: none !important
}

.leftcontent {
    float: left
}

.rightcontent {
    float: right
}

.ibvm,
.ibvt,
.sec4imgdowntxt img {
    display: inline-block
}

.container {
    width: 89%
}

.highlight {
    color: #000
}

.center {
    text-align: center
}

.ibvt {
    vertical-align: top
}

.ibvm {
    vertical-align: middle
}

.txtright {
    text-align: right
}

::-webkit-input-placeholder {
    color: #000
}

:-moz-placeholder {
    color: #000
}

::-moz-placeholder {
    color: #000
}

:-ms-input-placeholder {
    color: #000
}

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

.line-anim {
    height: 0;
    width: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    -webkit-animation: 3s increase;
    -moz-animation: 3s increase;
    -o-animation: 3s increase;
    animation: 3s forwards increase
}

.slick-next,
.slick-prev {
    background: url(../images/sec6slidernext.png) center/100% no-repeat;
    width: 65px;
    height: 65px;
    z-index: 1;
    top: 50%
}

@keyframes increase {
    100% {
        width: 400px
    }
}

.slick-prev {
    transform: rotate(180deg);
    left: 4%
}

.slick-next {
    transform: none;
    right: 2%
}

.sec4 .slick-next {
    top: 40%
}

.sec4-slider .slick-slide {
    transform: scale(.83);
    transition: .8s;
    position: relative;
    text-align: center
}

.slick-current.slick-center {
    transform: scale(1);
    margin-top: 0
}

.sec4-slider {
    margin: 100px 0 0
}

.knowmorebt {
    width: 40%;
    margin: 10px 0 0 40px
}


.sec4slidetxt {
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%
}

.sec4imgdowntxt {
    margin: 50px 0 0;
    display: none
}

.sec2txt1,
.sec2txt2 {
    margin-bottom: 52px
}

.banner {
    background: url(../images/banner.png) center -200px/cover no-repeat;
    position: relative
}

/* .headerwrapper,
.sec1:before {
    position: absolute;
    top: 0;
    width: 100%
} */

.headerwrapper {
    z-index: 9
}

.bannertxt1,
.bannertxt2,
.sec1,
.sec2 {
    position: relative
}

.sec3img1,
.sec3img2 {
    z-index: 0
}

.sec2 {
    padding: 100px 0
}

.sec1 {
    height: 100vh;
    text-align: center;
    background: url(../images/banner.png) center/cover no-repeat
}

.sec1:before {
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    content: ""
}

.bannertxt1 {
    top: 270px
}

.bannertxt2 {
    top: 380px
}

.sec2txt2 {
    width: 70%
}

.sec2txt3 {
    margin: 0 0 100px 80px;
    width: 70%
}

.sec3img1,
.sec3img2,
.sec3img3 {
    width: 100%;
    position: relative
}

.sec3img2 {
    float: left;
    top: -85px;
    display: flex
}

.sec3img3 {
    float: right;
    top: -85px;
    left: 13px
}

.sec4-w,
.sec4bgimg,
.sec4imgtoptxt {
    position: absolute
}

.sec4bgimg {
    width: 35%;
    left: 5%
}

.sec4txt2 {
    margin: 50px 0
}

.sec4txt3,
.section-1 {
    width: 80%
}

.sec4-slider .slick-slide img {
    filter: grayscale(1);
    opacity: .6
}

.sec4-slider .slick-slide.slick-current.slick-active.slick-center img {
    filter: grayscale(0);
    opacity: 1
}

.sec4imgtoptxt {
    right: 10%;
    z-index: 1;
    width: 30%;
    display: none
}

.sec4imgtoptxt img {
    max-height: 27px;
    width: auto
}

.sec4-w {
    bottom: -9%;
    width: 40%;
    right: 8%
}

.sec5 {
    position: relative;
    padding-top: 100px
}

.sec5bgimg {
    position: absolute;
    top: 0;
    width: 35%;
    right: -10%
}

.img-sec-2,
.sec5blk1 .container {
    display: flex;
    align-items: center
}

.sec5blk2,
.sec7imgwrap {
    justify-content: space-between;
    display: flex
}

.sec5imgtxt {
    margin: 0 0 0 15%
}

.sec5blk2 {
    width: 66.5%;
    float: right
}

.sec5blk2img2 {
    margin-left: 30px
}

.sec6 {
    position: relative;
    display: flex;
    justify-content: flex-end;
    max-width: 1500px
}

.sec6txt {
    margin-bottom: 100px
}

.sec6bgimg {
    position: absolute;
    top: 8%;
    right: 28%
}

.sec6slidetxt {
    position: absolute;
    right: 20px
}

.sec6 .slick-slide:nth-child(odd) .sec6slidetxt {
    bottom: 20px
}

.sec6 .slick-slide:nth-child(2n) .sec6slidetxt {
    top: 20px
}

.sec6slide {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end
}

.sec6slide img {
    width: 94%
}

.sec6 .slick-list {
    margin: -8 -22px !important
}

.sec7 .container {
    padding: 100px 0;
    position: relative
}

.sec7bgimg {
    position: absolute;
    bottom: -15%;
    right: 5%;
    width: 45%;
    text-align: right;
    z-index: -1
}

.sec7imgblk,
.sec7imgblk2,
.sec7imgblk3 {
    width: 31%
}

.sec7imgblk3 img {
    margin-bottom: 30px
}

.sec7imgblk2 {
    margin-top: 18%
}

.sec7imgblk {
    margin-top: 10%
}

.greenblk {
    background: #04a480;
    margin-top: 100px;
    padding: 100px 0
}

.sec8 {
    position: relative
}

.sec8 .sec4-w {
    right: 12.5%;
    bottom: 0;
    width: 20%
}

.footerblk .container img {
    top: -160px;
    position: absolute;
    width: 89%
}

.sec9blk1 {
    padding: 100px 0 100px 10%
}

.sec9blk2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px
}

.sec9blk2b {
    margin-left: 40px
}

.sec6 .slick-next {
    background: url(../images/sec6slidernext.png) center/100% no-repeat;
    width: 65px;
    height: 65px;
    transform: none;
    right: 2%;
    z-index: 0;
    top: 50%
}

.slide-in-fwd-bottom {
    -webkit-animation: .8s cubic-bezier(.25, .46, .45, .94) both slide-in-fwd-bottom;
    animation: .8s cubic-bezier(.25, .46, .45, .94) both slide-in-fwd-bottom
}

@-webkit-keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(800px);
        transform: translateZ(-1400px) translateY(800px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(800px);
        transform: translateZ(-1400px) translateY(800px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}

.slide-in-left {
    -webkit-animation: .5s cubic-bezier(.25, .46, .45, .94) both slide-in-left;
    animation: .5s cubic-bezier(.25, .46, .45, .94) both slide-in-left
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.scale-up-tl {
    -webkit-animation: 1s cubic-bezier(.39, .575, .565, 1) both scale-up-tl;
    animation: 1s cubic-bezier(.39, .575, .565, 1) both scale-up-tl
}

@-webkit-keyframes scale-up-tl {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%
    }
}

@keyframes scale-up-tl {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%
    }
}

.scale-up-tr {
    -webkit-animation: 1s cubic-bezier(.39, .575, .565, 1) both scale-up-tr;
    animation: 1s cubic-bezier(.39, .575, .565, 1) both scale-up-tr
}

@-webkit-keyframes scale-up-tr {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%
    }
}

@keyframes scale-up-tr {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%
    }
}

.scale-in-center {
    -webkit-animation: .8s cubic-bezier(.25, .46, .45, .94) both scale-in-center;
    animation: .8s cubic-bezier(.25, .46, .45, .94) both scale-in-center
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.wobble-ver-left {
    -webkit-animation: 3s both wobble-ver-left;
    animation: 3s both wobble-ver-left
}

@-webkit-keyframes wobble-ver-left {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    15% {
        -webkit-transform: translateY(-30px) rotate(-6deg);
        transform: translateY(-30px) rotate(-6deg)
    }

    30% {
        -webkit-transform: translateY(15px) rotate(6deg);
        transform: translateY(15px) rotate(6deg)
    }

    45% {
        -webkit-transform: translateY(-15px) rotate(-3.6deg);
        transform: translateY(-15px) rotate(-3.6deg)
    }

    60% {
        -webkit-transform: translateY(9px) rotate(2.4deg);
        transform: translateY(9px) rotate(2.4deg)
    }

    75% {
        -webkit-transform: translateY(-6px) rotate(-1.2deg);
        transform: translateY(-6px) rotate(-1.2deg)
    }
}

@keyframes wobble-ver-left {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    15% {
        -webkit-transform: translateY(-30px) rotate(-6deg);
        transform: translateY(-30px) rotate(-6deg)
    }

    30% {
        -webkit-transform: translateY(15px) rotate(6deg);
        transform: translateY(15px) rotate(6deg)
    }

    45% {
        -webkit-transform: translateY(-15px) rotate(-3.6deg);
        transform: translateY(-15px) rotate(-3.6deg)
    }

    60% {
        -webkit-transform: translateY(9px) rotate(2.4deg);
        transform: translateY(9px) rotate(2.4deg)
    }

    75% {
        -webkit-transform: translateY(-6px) rotate(-1.2deg);
        transform: translateY(-6px) rotate(-1.2deg)
    }
}

.wobble-hor-bottom {
    -webkit-animation: 8s ease-in-out 3s infinite alternate wobble-hor-bottom;
    animation: 8s ease-in-out 3s infinite alternate wobble-hor-bottom
}

@-webkit-keyframes wobble-hor-bottom {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    15% {
        -webkit-transform: translateX(-20px) rotate(-3deg);
        transform: translateX(-20px) rotate(-3deg)
    }

    30% {
        -webkit-transform: translateX(15px) rotate(3deg);
        transform: translateX(15px) rotate(3deg)
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg)
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg)
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg)
    }
}

@keyframes wobble-hor-bottom {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    15% {
        -webkit-transform: translateX(-20px) rotate(-2eg);
        transform: translateX(-20px) rotate(-2deg)
    }

    30% {
        -webkit-transform: translateX(15px) rotate(2deg);
        transform: translateX(15px) rotate(2deg)
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-2.6deg);
        transform: translateX(-15px) rotate(-2.6deg)
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg)
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg)
    }
}

.sec8 .sec4imgdowntxt,
.sec8 .sec4imgtoptxt {
    display: none !important
}

.new-banner {
    width: 100%;
    height: 100vh
}

.head {
    position: absolute;
    z-index: 1
}

.banner-content-container {
    display: flex;
    justify-content: center;
    align-items: center
}

.banner-text {
    text-align: center;
    color: #fff
}

.banner-text p {
    font-family: system-ui;
    letter-spacing: 6px;
    font-size: 14px
}

.banner-text h1 {
    padding-top: 32px;
    font-family: 'Perpetua Titling MT Std';
    word-spacing: 6px;
    font-size: 35px;
    font-weight: lighter !important;
    line-height: 2rem
}

.banner-text h1 span {
    font-size: 15px;
    letter-spacing: 1px
}

.section-2 {
    width: 40%
}

.second-sec {
    display: flex;
    justify-content: center
}

.section-2 img {
    width: 330px
}

.img-sec {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.date-fluid,
.sec5blk1 {
    justify-content: space-between;
    display: flex
}

.casa-text-img1,
.casa-text-img3 {
    width: 20%;
    max-height: fit-content;
    margin-right: 105px
}

.casa-img-fluid {
    width: 62%
}

.casa-img-fluid-2 {
    width: 60.5%
}

.casa-text-2-img {
    width: 20%;
    max-height: fit-content;
    margin-left: 105px
}

.casa-flwr-1 {
    margin-top: -72%
}

.casa-text-5 {
    margin-left: 10%
}

.casa-footer img {
    position: absolute;
    top: -100px;
    z-index: -1
}

.casa-sec-5-text {
    width: 80%;
    margin-left: 8%;
    min-height: fit-content
}

.sec5blk1 {
    align-items: center;
    /* padding-left: 10% */
}

.sec6slider .slick-slide {
    margin-top: 600px
}

.sec6slider .slick-slide.slick-current.slick-active {
    margin-top: 0
}

.slider-sec5-con {
    width: 50%;
    /* margin-right: 11% */
}

.slider-for {
    width: 30%
}

.slider-nav {
    width: 65%
}

.imginfo_itemblk {
    display: flex;
    justify-content: flex-end;position: relative
}
.imginfo_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 50px;
    flex-direction: row-reverse;width: 90%
}
.imgpic {line-height: 0;width: 70%}        
.imgtxt_pic {line-height: 0;width: 25%}
.imginfo_itemblk.lifestyle_item .imginfo_item {
    flex-direction: row;
}
.imginfo_itemblk.lifestyle_item {
    justify-content: flex-start;
}
.imginfo_itemblk.comfort_item .imgpic {width:56%}
.imageinfo_blk {padding: 0 0 130px 0}
.imginfo_itemblk.lifestyle_item .imgpic {width: 100%;height: 570px;}
.imginfo_itemblk.lifestyle_item .imgpic iframe {width: 100%;height: 100%;object-fit: cover;}
.youtubebg_video {
    width: 70% !important;
}
.private-luxury-txt h1 {
    font-family: 'Perpetua Titling MT Std';
    font-size: 35px;
    text-transform: uppercase;
    font-weight: lighter;
    color: #3a3a3a;
    line-height: 5rem;
}
.wel-sec {
    display: flex;
}
.pt {
    padding-top: 80px;
    position: relative;
    /* background-color:#ffffe4; */
}
.home-demo-flower div img {
    width: 88%;
}
.home-demo-flower {
    position: absolute;
    right: -20%;
    top: 8%;
}
/* .new-columns{
    width: 50% !important;
} */
.new-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.list-txt h4 {
    font-family: 'Perpetua Titling MT Std';
    font-size: 21px;
    text-transform: uppercase;
    font-weight: lighter;
    color: #2d309e !important;
}

.list-txt p {
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    color: #3a3a3a !important;
    text-transform: uppercase;
    font-weight: 400;
    text-transform: inherit !important;
    text-align: justify;
}

.font-size4 {
    font-size: 5vw !important;
    line-height: 5vw !important;
}

.welcome-txt {
    text-align: center;
    color: #2d309e;
    font-size: 2.5vw;
    font-family: 'Perpetua Titling MT Std';
    text-transform: uppercase;
    font-weight: lighter;
}

.title-case p {
    text-transform: inherit !important;
    width: 90%;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    height: 14%;
    box-shadow: 0px 1px 5px 1px #e6e6e6;
}

.ptb {
    padding: 10px 0 100px 0;
    /* background-color:#ffffe4; */
}

.ylw-bg-2 {
    background-image: url(images/body-bg-img.jpg);
    background-size: cover;
}

.ylw-bg {
    background-color: #f5efe9;
    background-image: url(images/site-bgimg.webp);
    background-size: contain;
}

@media (min-width:1400px) {
    iframe {
        height: 108vh
    }
    .banner-vid video{
        height:108vh;
    }
}

.enquiry-form {
    border-left: 1px solid #cdcdcd;
    padding: 0 50px
}

.form-element {
    margin: 30px 0;
    border: none
}

.form-element::before {
    content: '';
    position: absolute
}

.form-element input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid grey;
    padding: 10px 0;
    width: 100%;
    color: #3f3f3f
}

.form-element input::placeholder {
    color: #3f3f3f;
    text-transform: uppercase;
    font-size: 12px
}

.enquiry-form h2 {
    font-size: 13px;
    letter-spacing: 1px;
    color: #3f3f3f
}

.date-fluid {
    gap: 18px
}

.form-element label {
    font-size: 12px;
    color: #3f3f3f;
    padding: 5px 0;
    width: 50%
}

.form-element button {
    background-color: #3f3f3f;
    color: #fff;
    padding: 7px 10px;
    border: none;
    border-radius: 15px
}

.form-element button:hover {
    cursor: pointer
}

.select-fluid {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.select-fluid label {
    color: #3f3f3f
}

.form-element button img {
    width: 12px
}

.option-border {
    border-bottom: 1px solid grey;
    padding: 5px 0;
    width: 50%
}

.date-input-field-1[type=date]:invalid + span:after {
    content: "CHECK-IN";
    position: absolute;
    left: 0;
    top: 17px
}

.date-input-field-2[type=date]:invalid + span:after {
    content: "CHECK-OUT";
    position: absolute;
    left: 0;
    top: 17px
}

input[type=date]:focus:invalid + span:after {
    display: none
}

input:not(:focus):invalid {
    color: transparent
}