@font-face {
    font-family:"Minion Pro";
    src:local("Minion Pro"),url(./webfonts/MinionPro-Regular.woff) format("woff"),url(./webfonts/MinionPro-Medium.woff) format("woff"),url(./webfonts/MinionPro-Semibold.woff) format("woff")
}
* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    scroll-behavior:smooth
}
body {
    font-family:"Open Sans",sans-serif
}
a {
    color:#000;
    text-decoration:none
}
.container {
    max-width:1170px;
    width:100%;
    padding:0 15px;
    margin:0 auto;
    overflow:hidden
}
.section-container {
    max-width:1950px;
    width:100%;
    padding:0 15px;
    margin:0 auto
}
header {
    position:fixed;
    width:100%;
    top:0;
    background-color:#fff0;
    transition:all 0.3s ease-in-out;
    background-color:rgba(0,0,0,0.35);
    z-index:99999
}
header .container {
    max-width:1400px;
    overflow:visible
}
header.active {
    background-color:#fff
}
header::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgb(255 255 255 / .05);
    box-shadow:0 8px 32px 0 rgb(0 0 0 / .05);
    z-index:-2
}
header.active::before {
    background-color:#fff;
    transition:all 0.3s ease-in-out
}
header nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:600;
    gap:20px;
    position:relative;
    /*background-color:#fff*/
}
.site-logo img {
    width:180px
}
header .nav-items {
    max-width:900px;
    width:100%;
    padding:30px;
    position:absolute;
    right:0;
    top:0;
    transform:translateY(-550px);
    background-color:#ffffffeb;
    transition:transform ease-in-out 0.5s;
    z-index:-2;
    box-shadow:0 8px 32px 0 rgb(0 0 0 / .05)
}
header .nav-items.active {
    transform:translateY(75px)
}
header .nav-items .wrapper {
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:20px
}
header .nav-items .socials-nav {
    padding:20px 0;
    margin:10px 0;
    width:100%;
    margin:0 auto
}
header .nav-items .socials-nav:before {
    content:"";
    display:block;
    margin:0 auto 20px;
    width:100px;
    height:2px;
    background-color:#eb7e23
}
header .nav-items .socials-nav ul {
    list-style-type:none;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    align-items:center
}
header .nav-items .socials-nav ul li {
    font-size:18px;
    background-color:#000;
    padding:5px;
    width:32px;
    height:33px;
    border-radius:100%;
    position:relative;
    transition:all ease-in-out 0.3s
}
header .nav-items .socials-nav ul li:hover {
    background-color:#eb7e23
}
.socials-nav .fa-brands::before {
    color:#fff
}
.socials-nav ul li .fa-facebook:before,.socials-nav ul li .fa-whatsapp:before,.socials-nav ul li .fa-x-twitter:before,.socials-nav ul li .fa-linkedin::before,.socials-nav ul li .fa-instagram::before,.socials-nav ul li .fa-pinterest::before,.socials-nav ul li .fa-youtube::before {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.nav-list.about {
    width:35%
}
.nav-list.about h2 {
    text-transform:uppercase;
    color:#eb7e23;
    text-align:center;
    margin:0 0 20px;
    font-size:25px;
    font-weight:700
}
.nav-list.about p {
    font-weight:400;
    line-height:25px;
    font-size:14px;
    text-align:justify
}
.nav-list {
    width:20%
}
.nav-list ul {
    padding:0;
    margin:0;
    list-style:none
}
.nav-list ul li {
    padding:10px 0;
    font-size:15px
}
.nav-list ul li a {
    display:block;
    width:fit-content;
    color:#000
}
.nav-list ul li a:hover {
    color:#eb7e23
}
.nav-list ul li a::after {
    content:"";
    display:block;
    width:0;
    height:2px;
    background:#eb7e23;
    transition:width 0.3s
}
.nav-list ul li a:hover::after {
    width:100%
}
header .nav-items a {
    color:#eb7e23
}
header.active .nav-items a {
    color:#737373
}
.nav-right {
    display:flex;
    gap:20px;
    justify-content:space-between;
    align-items:center
}
.contact-btn {
    background-color:#eb7e23;
    padding:2px;
    border-radius:20px;
    box-shadow:0 3px 14px 0 #afaeae;
    transition:background-color 0.2s ease-in-out
}
.contact-btn:hover {
    background-color:#ff8c00
}
.contact-btn a {
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    font-weight:500;
    min-width:210px;
    width:100%
}
.fa-phone {
    padding:5px;
    color:#fff;
    border-radius:100%
}
#menu-btn {
    font-size:20px;
    color:#eb7e23;
    cursor:pointer;
    background:none;
    border:none;
    display:flex;
    align-items:center;
    width:80px;
    gap:5px
}
.menu-icon {
    position:relative;
    width:25px;
    height:25px
}
.menu-icon::before {
    content:"";
    position:absolute;
    top:25%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:4px;
    background-color:#eb7e23;
    transform-origin:center;
    transition:transform 0.3s ease-in-out
}
.menu-icon::after {
    content:"";
    position:absolute;
    bottom:25%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:4px;
    background-color:#eb7e23;
    transform-origin:center;
    transition:transform 0.3s ease-in-out
}
.menu-icon.active::before {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg)
}
.menu-icon.active::after {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-45deg)
}
.menuparent {
    position:relative;
    display:block
}
.menuparent .sub-menu {
    max-height:0;
    overflow:hidden;
    padding-left:10px;
    transition:max-height 0.5s ease-out
}
.menuparent .sub-menu.active {
    max-height:360px
}
.menuparent .nest_menu {
    display:block;
    padding-left:20px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.8s ease-out
}
.menuparent .sub-menu.active .nest_menu.active {
    max-height:300px
}
.mobile_des {
    display:none
}
#hero-section {
    max-height:410px;
    height:100vh;
    overflow:hidden
}
.hero-carousel {
    position:relative;
    width:100%;
    height:100%;
}
.hero-carousel .prev {
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    background-color:rgb(0 0 0 / .4);
    border:none;
    padding:5px 8px;
    font-size:25px;
    color:#fff;
    transition:all 0.2s ease-in-out
}
.hero-carousel .next {
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    background-color:rgb(0 0 0 / .4);
    border:none;
    padding:5px 8px;
    font-size:25px;
    color:#fff;
    transition:all 0.2s ease-in-out
}
.hero-carousel>ul {
    padding:0;
    margin:0
}
.desktop-slider {
    display:block
}
.mobile-slider {
    display:none
}
.slide {
    position:absolute;
    top:0;
    z-index:-1;
    opacity:0;
    height:100%;
    width:100%;
    transition:opacity 0.5s ease-in-out;
    transition-delay:0.5s
}
.slide.active {
    opacity:1;
    transition:opacity 0.5s ease-in-out;
    transition-delay:0s;
    animation:scaleAnimation 3s ease-in-out forwards
}
.slide>img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
@keyframes scaleAnimation {
    0% {
        transform:scale(1.05)
    }
    100% {
        transform:scale(1)
    }
}
.hero-carousel .prev:hover {
    background-color:rgb(0 0 0 / .7)
}
.hero-carousel .next:hover {
    background-color:rgb(0 0 0 / .7)
}
.show-widget {
    position:absolute;
    right:310px;
    bottom:400px
}
@media screen and (max-width:768px) {
    .show-widget {
        position:static;
        height:350px;
        margin:50px 0 0 30%;
        text-align:center
    }
}
@media screen and (max-width:576px) {
    .hero-carousel {
        top:0
    }
    .show-widget {
        margin:50px 0 0 25%
    }
}
@media screen and (max-width:480px) {
    .show-widget {
        margin:50px 0 0 18%
    }
}
#offerings {
    min-height:600px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center
}
#offerings .container {
    overflow:visible
}
#offerings .flex-container {
    display:flex;
    justify-content:center;
    gap:20px;
    align-items:center
}
.flex-container .flex-left {
    display:flex;
    gap:20px;
    width:49%
}
.flex-container .flex-right {
    display:flex;
    gap:20px;
    width:49%
}
.offer-img {
    width:100%;
    max-width:280px;
    max-height:400px;
    height:100%;
    transition:all linear 0.3s;
    position:relative
}
.offer-img.active {
    transform:translateY(-45px)
}
.offer-img>img {
    width:100%;
    max-height:350px;
    height:100%;
    object-position:center;
    object-fit:cover;
    border-radius:200px 200px 0 0
}
.offer-img .offer-desc {
    display:block;
    position:absolute;
    width:100%;
    z-index:-1;
    margin:-5px 0 0 0;
    transform:translateY(-150px);
    text-align:center;
    font-size:18px;
    background-color:#eb7e23;
    padding:10px;
    transition:all linear 0.3s
}
.offer-img .offer-desc h4 {
    color:#fff;
    text-transform:uppercase;
    margin:0 0 2px;
    font-weight:700
}
.offer-img .offer-desc p {
    color:#fff;
    font-weight:500;
    font-size:13px;
    margin:0 0 2px
}
.offer-img .offer-desc .details-btn {
    text-align:right;
    display:inline
}
.offer-img .offer-desc .details-btn::after {
    content:"";
    display:block;
    width:0;
    height:2px;
    background:#fff;
    transition:width 0.3s;
    margin:0 auto
}
.offer-img .offer-desc:hover .details-btn::after {
    width:33%
}
.offer-img.active .offer-desc {
    transform:translateY(0)
}
#introduction {
    padding:80px 0;
    position:relative;
    text-align:center
}

#introduction .flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 0 0 20px;
}

#introduction .flex-container .left {
  flex-basis: 50%;
  /* padding: 0 0 0 25px; */
}

#introduction .flex-container .left > h1 {
  color: #ff8c00;
  margin: 0 0 10px;
  font-size: 32px;
  text-align: left;
}

#introduction .flex-container .left > h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  margin: 0 0 20px;
  text-transform: uppercase;
  text-align: left;
}

#introduction .flex-container .left > p {
  text-align: justify;
    font-size: 16px;
}

#introduction .flex-container .right {
  flex-basis: 50%;
}

#introduction .flex-container .right > img {
  width: 100%;
  border-radius: 0 20px 0 20px;
}

@media screen and (max-width: 1024px) {
  #introduction .flex-container {
    flex-direction: column;
    align-items: center;
  }

  #introduction .flex-container .right,
  #introduction .flex-container .left {
    padding: 0 25px;
  }
}

@media screen and (max-width: 768px) {
  #introduction .flex-container {
    flex-direction: column;
    align-items: center;
  }

  #introduction .flex-container .right,
  #introduction .flex-container .left {
    padding: 0;
  }
}

.left-desc-bg {
    position:absolute;
    left:0;
    bottom:0;
    transform:rotate(180deg);
    width:120px
}
.right-desc-bg {
    position:absolute;
    right:0;
    top:0;
    width:120px
}
.heading h2 {
    text-transform:uppercase;
    font-size:45px;
    color:#eb7e23;
    margin:0 0 10px
}
.heading h3 {
    font-size:22px;
    margin:0 0 40px;
    font-weight:600
}
#introduction .desc {
    font-size:16px
}
.desc .tagline {
    color:#fff;
    width:fit-content;
    padding:5px 10px;
    border-radius:20px;
    background-color:#eb7e23;
    margin:0 auto 40px;
    text-transform:uppercase
}
.desc .tagline p {
    display:inline
}
.desc .desc-para {
    /* max-width:850px; */
    margin:0 auto
}
.desc .desc-para p {
    margin:0 0 20px;
    text-align:justify
}
.hidden-txt-visible {
    max-height:0;
    overflow:hidden;
    transition:max-height 1s ease-out
}
.hidden-txt-visible.active {
    max-height:1600px
}
.text-closed-btn {
    background-color:#eb7e23;
    padding:2px 0;
    width:50px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:32px;
    border-radius:100%;
    cursor:pointer;
    position:relative
}
.text-closed-btn .fa-times {
    margin:0 auto
}
.read-more-btn {
    display:inline;
    background-color:#eb7e23;
    color:#fff;
    font-size:18px;
    border:none;
    outline:none;
    cursor:pointer;
    padding:5px 10px;
    border-radius:20px
}
.read-more-btn.active {
    display:none
}
.sub-heading {
    color:#eb7e23;
    margin:20px auto;
    font-size:22px;
    max-width:850px
}
.list-why-solluna {
    text-align:justify;
    margin:0 auto 20px;
    max-width:480px;
    padding:0 0 0 40px;
    list-style-type:circle
}
#features {
    text-align:center;
    padding:20px 0
}
#features .section-container {
    position:relative
}
#features .container {
    overflow:hidden
}
.feat-swiper-button-prev {
    left:15px;
    transform:translateY(-50%);
    color:#fff;
    background-color:#eb7e23;
    height:40px;
    width:40px;
    border-radius:100%;
    transition:all 0.2s ease-in-out
}
.feat-swiper-button-prev::after {
    font-size:20px;
    font-weight:900
}
.feat-swiper-button-next {
    right:15px;
    transform:translateY(-50%);
    transform:translateY(-50%);
    color:#fff;
    background-color:#eb7e23;
    height:40px;
    width:40px;
    border-radius:100%;
    transition:all 0.2s ease-in-out
}
.feat-swiper-button-next::after {
    font-size:20px;
    font-weight:900
}
#features .swiper-slide .feat-img {
    background-color:#eb7e23;
    width:fit-content;
    height:fit-content;
    padding:20px;
    margin:0 auto 10px;
    border-radius:100%;
    box-shadow:4px 4px 12px 0 rgb(151 151 151 / .75);
    -webkit-box-shadow:4px 4px 12px 0 rgb(151 151 151 / .75);
    -moz-box-shadow:4px 4px 12px 0 rgb(151 151 151 / .75)
}
#features .swiper-slide p {
    text-transform:capitalize
}
#features .swiper-slide img {
    height:100px;
    width:100px;
    object-fit:contain;
    object-position:center
}
#videos {
    text-align:center;
    padding:80px 0;
    position:relative
}
#videos .heading h2 {
    margin:0 0 50px
}
#videos>img {
    position:absolute;
    z-index:-1000;
    width:100%;
    height:100%;
    left:0;
    top:40px;
    object-fit:cover;
    object-position:bottom
}
#videos .heading {
    text-transform:uppercase
}
.video-thumbnail {
    position:relative
}
.video-thumbnail.active:hover .youtube-player {
    filter:brightness(.8)
}
.video-thumbnail .video-bg {
    position:absolute;
    width:950px;
    height:40px;
    background-color:#d7daaf;
    z-index:-1;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.video-thumbnail .fa-play {
    display:none;
    cursor:pointer
}
.video-thumbnail.active .fa-play {
    display:block;
    padding:20px 20px 20px 24px;
    width:70px;
    height:70px;
    font-size:30px;
    background-color:#eb7e23;
    color:#fff;
    border-radius:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:all ease-in-out 0.2s;
    z-index:1
}
#videos .youtube-player {
    max-width:830px;
    max-height:480px;
    height:95%;
    width:95%;
    margin:0 auto;
    transition:all ease-in-out 0.2s
}
#videos .youtube-player img {
    width:100%
}
#cottages {
    margin:40px 0;
    text-align:center;
    padding:80px 0 0
}
.heading h2 {
    text-transform:uppercase;
    font-size:45px;
    color:#eb7e23;
    margin:0 0 10px
}
.heading h3 {
    text-transform:uppercase;
    margin:0 0 40px
}
#cottages .wrapper {
    padding:40px 0;
    position:relative;
    width:100%;
    margin:0 0 70px
}
.wrapper-1 {
    background-image:url(./assets/c1.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.wrapper-2 {
    background-image:url(./assets/c2.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.wrapper-3 {
    background-image:url(./assets/c3.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.wrapper-4 {
    background-image:url(./assets/c4.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.wrapper-5 {
    background-image:url(./assets/c5.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
#cottages .wrapper::after {
    position:absolute;
    content:"";
    background:rgb(234 233 230 / .705);
    height:100%;
    width:100%;
    top:0;
    left:0;
    display:block
}
.wrapper .container {
    position:relative;
    z-index:100
}
.cottage-card {
    width:100%;
    display:flex;
    align-items:center
}
.card-img {
    width:40%;
    overflow:hidden
}
.card-img>img {
    //width:480px;
    max-height:420px;
    object-fit:cover;
    transition:transform ease-in-out 0.3s
}
.card-img>img:hover {
    transform:scale(1.1)
}
.card-desc {
    width:60%;
    text-align:center;
    background:rgb(215 218 175 / .5);
    box-shadow:0 8px 32px 0 rgb(31 38 135 / .37);
    backdrop-filter:blur(3.5px);
    -webkit-backdrop-filter:blur(3.5px);
    border-radius:10px;
    border:1px solid rgb(255 255 255 / .18);
    padding:30px;
    z-index:1
}
.card-desc.left {
    margin-left:-20px
}
.card-desc.right {
    margin-right:-20px
}
.card-desc h4 {
    font-size:30px;
    color:#000000c1;
    margin:0 0 20px;
    text-transform:uppercase
}
.card-desc p {
    font-size:18px;
    line-height:25px;
    margin:0 0 30px;
    color:rgb(40 40 40 / .8);
    padding:0 30px;
    text-align:justify
}
.card-desc .desc-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.card-desc .desc-bottom button {
    font-family: "Open Sans", sans-serif;
    text-transform:uppercase;
    background:rgb(235 126 35 / .75);
    box-shadow:0 8px 32px 0 rgb(31 38 135 / .37);
    backdrop-filter:blur(3.5px);
    -webkit-backdrop-filter:blur(3.5px);
    border-radius:10px;
    border:1px solid rgb(255 255 255 / .18);
    color:#fff;
    padding:10px 20px;
    font-weight:500;
    box-shadow:0 5px 14px 0 #afaeae;
    transition:background-color 0.2s ease-in-out
}
.card-desc .desc-bottom button:hover {
    background-color:#fff;
    color:#eb7e23
}
.card-desc .desc-bottom div {
    display:flex;
    align-items:center;
    gap:10px
}
.card-desc .desc-bottom div img {
    width:45px
}
.image-bottom .icon {
    position:relative
}
.image-bottom .icon .icon-desc {
    display:none;
    font-size:12px;
    background-color:#000;
    color:#fff;
    padding:2px 5px;
    border-radius:5px;
    position:absolute;
    width:max-content;
    top:-80%;
    left:50%;
    transform:translate(-50%,50%);
    transition:all ease-in-out 0.3s
}
.image-bottom .icon .icon-desc::after {
    content:"";
    display:none;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-4px;
    z-index:-1;
    left:50%;
    background-color:#000;
    transform:translateX(-50%) rotate(45deg)
}
.image-bottom .icon:hover .icon-desc {
    display:block
}
.image-bottom .icon:hover .icon-desc::after {
    display:block
}
#updates {
    text-align:center;
    padding:80px 0;
    position:relative;
    min-height:600px;
    overflow:hidden
}
#updates .right-desc-bg {
    position:absolute;
    right:0;
    top:0;
    width:150px;
    transform:rotate(180deg)
}
#updates .bg {
    position:absolute;
    z-index:-1000;
    width:100%;
    height:100%;
    left:50%;
    top:0;
    transform:translateX(-50%);
    object-fit:cover;
    object-position:bottom
}
#updates .heading {
    text-transform:uppercase
}
#updates .heading h2 {
    margin:0 0 10px
}
#updates .heading p {
    margin:0 0 40px;
    font-family:"Minion Pro";
    font-weight:500;
    font-size:25px
}
#updates {
    text-align:center;
    padding:80px 0;
    position:relative;
    min-height:600px;
    overflow:hidden
}
#updates .right-desc-bg {
    position:absolute;
    right:0;
    top:0;
    width:150px;
    transform:rotate(180deg)
}
#updates .heading {
    text-transform:uppercase
}
#updates .heading h2 {
    margin:0 0 10px
}
#updates .heading p {
    margin:0 0 40px;
    font-family:"Minion Pro";
    font-weight:500;
    font-size:25px
}
.updates {
    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    gap:20px;
    position:relative;
    z-index:1
}
.updates .flex-right,.updates .flex-left {
    width:49%;
    z-index:-1
}
.update-img {
    padding:0 20px
}
.update-img img {
    max-width:500px;
    height:315px;
    width:100%;
    object-fit:cover;
    object-position:center
}
.update-desc {
    background-color:#b7b783;
    margin:0 auto;
    height:315px;
    padding:160px 40px 20px;
    border-radius:50px 50px 0 0;
    display:flex;
    justify-content:center;
    margin-top:-150px;
    position:relative;
    z-index:-10
}
.update-desc .wrapper {
    z-index:-2
}
.update-desc .desc {
    font-size:18px;
    text-transform:uppercase;
    font-weight:700;
    margin:10px 0 20px
}
.update-desc a {
    color:#fff;
    background-color:#2c6a5b;
    padding:5px 15px;
    border-radius:20px;
    font-size:18px;
    font-weight:600;
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 8px 32px 0 rgb(31 38 135 / .37)
}
#testimonials {
    text-align:center;
    padding:80px 0;
    position:relative;
    min-height:600px
}
#testimonials>img {
    position:absolute;
    z-index:-1000;
    height:100%;
    width:100%;
    left:0;
    object-fit:cover;
    object-position:bottom
}
#testimonials .heading {
    text-transform:uppercase
}
#testimonials .heading h2 {
    margin:0 0 20px
}
#testimonials .heading p {
    margin:0 0 60px;
    font-family:"Minion Pro";
    font-weight:500;
    font-size:25px;
    text-transform:capitalize
}
#testimonials .heading p span {
    display:block;
    font-weight:600;
    font-style:italic
}
#testimonials .testimonial-area {
    background-color:#eb7e23;
    text-align:center;
    font-family:"Minion Pro";
    color:#fff;
    border-radius:30px;
    position:relative;
    padding:20px 0;
    width:80%;
    margin:0 auto;
    overflow:hidden;
    transition:all ease-in-out 0.5s
}
#testimonials .testimonial-area h3 {
    font-weight:100;
    font-size:35px;
    margin:0 0 20px
}
.testimonial-area .test-card {
    max-width:700px;
    width:100%;
    margin:0 auto;
    font-size:22px;
    padding:0 20px
}
.testimonial-area .test-card .feedback {
    margin:0 0 20px;
    font-weight:100;
    line-height:40px;
    text-align:justify
}
.testimonial-area .test-card .name {
    display:inline;
    font-style:italic;
    font-size:30px;
    font-weight:500;
    border-bottom:solid 2px #fff
}
.test-card .feedback .fa-quote-right {
    width:20px
}
.test-card .feedback .fa-quote-left {
    width:20px
}
.test-swiper-button-prev {
    color:#fff;
    transition:all 0.2s ease-in-out
}
.test-swiper-button-prev::after {
    font-size:30px;
    font-weight:900
}
.test-swiper-button-next {
    color:#fff;
    transition:all 0.2s ease-in-out
}
.test-swiper-button-next::after {
    font-size:30px;
    font-weight:900
}
#awards {
    text-align:center;
    padding:80px 0;
    position:relative;
    min-height:520px;
    background:#fff0
}
#awards .ref-container {
    position:relative
}
#awards .container {
    overflow:hidden
}
#awards .heading {
    text-transform:uppercase;
    margin:0 0 40px
}
#awards .swiper-slide img {
    object-position:center;
    height:160px;
    width:160px;
    padding:15px;
    background-color:#d7daaf
}
.award-swiper-button-prev {
    left:15px;
    color:#fff;
    background-color:#eb7e23;
    height:40px;
    width:40px;
    border-radius:100%;
    transition:all 0.2s ease-in-out
}
.award-swiper-button-prev::after {
    font-size:20px;
    font-weight:900
}
.award-swiper-button-next {
    right:15px;
    color:#fff;
    background-color:#eb7e23;
    height:40px;
    width:40px;
    border-radius:100%;
    transition:all 0.2s ease-in-out
}
.award-swiper-button-next::after {
    font-size:20px;
    font-weight:900
}

/* Booking Section */
#booking-section {
  /*position: relative;
  bottom: -60px;*/
  background: #ff8c00;
  text-align: center;
  /*margin: -100px 0 0;*/
  padding: 40px 0 20px;
}

#booking-section .heading h2 {
  color: #fff;
}

#booking-section .heading p {
  color: #fff;
}


#booking-section form {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 20px;
  background-color: #fff;
  /* box-shadow: 0px -8px 30px rgba(140, 140, 140, 0.1); */
  margin: 0 auto 30px;
  max-width: 1024px;
  position: relative;
  z-index: 1;
  border-radius: 40px;
  max-width: 800px;
  border: solid 1px #f4f4f4;
}

.name-container,
.email-container,
.contact-container {
  width: 25%;
}

.name-container input,
.email-container input,
.contact-container input {
  width: 100%;
  /* height: 58px; */
  font-size: 18px;
  border: none;
  padding: 10px;
  outline: none;
}

.email-container input {
  border: solid 1px #dedbdb;
  border-top: none;
  border-bottom: none;
}

.book-now-btn {
  width: 20%;
  /* height: 58px; */
  margin: 0 0 0 auto;
}

.book-now-btn > button {
  width: 100%;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background-color: #ff8c00;
  color: #fff;
  font-size: 18px;
  padding: 10px;
  border-radius: 40px;
}

.arrow a {
  /*color: #eb7e23;*/
  color: #fff;
  text-decoration: none;
}

.arrow {
  text-align: center;
  margin: 40px 0 20px;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}


footer {
    padding:80px 0 0;
    box-shadow:0 -10px 30px 0 rgb(134 134 134 / 5%);
    position:relative
}
.footer-bg {
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    max-height:800px;
    min-height:667px;
    height:100vh;
    width:100%;
    z-index:-1000;
    object-fit:cover
}
.footer-bg-mob {
    display:none;
    position:absolute;
    top:0;
    bottom:0;
    max-height:800px;
    min-height:667px;
    height:100vh;
    width:100%;
    z-index:-1000;
    object-fit:cover
}
footer .flex-container {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin:0 0 10px;
    padding:0 0 5px
}
.credentials {
    max-width:280px;
    width:100%
}
.credentials img {
    max-width: 180px
}
.credentials p {
    margin:0 0 10px;
    font-size:15px
}
.credentials a {
    margin:0 0 10px;
    font-size:15px;
    transition:all ease-in-out 0.2s
}
.credentials a:hover {
    color:#eb7e23
}
.credentials .socials {
    display:flex;
    gap:10px;
    margin:10px 0
}
.credentials .socials a {
    font-size:15px;
    width:30px;
    height:30px;
    background:#eb7e23;
    border-radius:100%;
    text-align:center;
    margin:5px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:all 0.2s ease-in-out;
    color:#fff
}
.footer-nav ul {
    list-style-type:none
}
.footer-nav ul li {
    margin:0 0 10px
}
.footer-nav ul li a {
    transition:all 0.3s ease-in-out
}

.foot-subscribe {
    text-align: center; 
}

.foot-subscribe button {
    background: rgba(235, 126, 35, 0.75);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 7px 20px;
    font-weight: 500;
    box-shadow: 0px 5px 14px 0px #afaeae;
    transition: background-color 0.2s ease-in-out;
    font-size: 16px;
}

.foot-subscribe button:hover {
  background-color: #fff;
  color: #eb7e23;
}

.foot-subscribe h3 {
    text-transform:uppercase;
    text-align:center;
    color:#eb7e23;
    font-size:20px;
    margin:0 0 20px
}
.foot-subscribe input[type="email"] {
    padding:10px 10px;
    border-radius:30px 0 0 30px;
    outline:none;
    border:none;
    font-size:14px
}
.foot-subscribe input[type="submit"] {
    padding:11px 10px;
    border-radius:0 30px 30px 0;
    outline:none;
    border:none;
    background-color:#eb7e23;
    color:#fff;
    margin:0 0 0 -15px
}
.credentials .socials .social-fb:hover,.credentials .socials .social-ig:hover,.credentials .socials .social-yt:hover,.credentials .socials .social-wp:hover {
    color:#fff
}
.credentials .socials .social-fb:hover {
    background:#316ff6
}
.credentials .socials .social-ig:hover {
    background:#cd486b
}
.credentials .socials .social-yt:hover {
    background:#cd201f
}
.credentials .socials .social-wp:hover {
    background:#128c7e
}
.footer-nav ul li a:hover {
    color:#eb7e23
}
.top-btn {
    position:fixed;
    bottom:30px;
    right:40px;
    z-index:1000;
    text-align:center;
    transition:all .3 ease-in-out
}
.top-btn a {
    color:#fff;
    font-size:30px;
    font-weight:900;
    border-radius:100%
}
.top-btn .fa-chevron-down {
    background-color:#eb7d23d6;
    border-radius:100%;
    padding:9px
}
.rotated {
    transform:rotate(180deg)
}
@keyframes towards-top {
    0% {
        transform:rotate(180deg)
    }
    100% {
        transform:rotate(0deg)
    }
}
@keyframes towards-bottom {
    0% {
        transform:rotate(0deg)
    }
    100% {
        transform:rotate(180deg)
    }
}
.whatsapp-btn {
    display:block;
    position:fixed;
    z-index:999;
    bottom:30px;
    left:40px;
    padding:3px 11px;
    border-radius:100%;
    box-shadow:none;
    background-color:#25d366d6
}
.whatsapp-btn a {
    font-size:31px
}
.whatsapp-btn .fa-whatsapp {
    color:#fff
}
@media screen and (max-width:992px) {
    #offerings {
        padding:80px 0
    }
    #offerings .flex-container {
        flex-direction:column;
        gap:80px
    }
    .flex-container .flex-left {
        width:100%;
        justify-content:center;
        gap:50px
    }
    .flex-container .flex-right {
        width:100%;
        justify-content:center;
        gap:50px
    }
    .left-desc-bg {
        width:120px
    }
    .right-desc-bg {
        width:120px
    }
    .update-img img {
        max-width:400px;
        height:250px;
        width:100%;
        object-fit:cover;
        object-position:center
    }
    #testimonials .testimonial-area {
        width:90%
    }
    .testimonial-area .test-card {
        padding:0 40px
    }
    #awards {
        min-height:500px
    }
    .footer-nav {
        width:120px
    }
    .credentials {
        max-width:200px
    }
    .foot-subscribe {
        width:250px
    }
}
@media screen and (max-width:768px) {
    header .nav-items {
        width:100vw;
        left:-15px
    }
    header .nav-items .wrapper {
        gap:5px
    }
    .nav-list ul {
        width:110px
    }
    .nav-list.about {
        width:40px
    }
    .nav-list.about h2 {
        display:none
    }
    .nav-list.about p {
        display:none
    }
    header .nav-items.active {
        transform:translateY(50px)
    }
    header .nav-items .socials-nav {
        display:block;
        position:relative
    }
    header .nav-items .socials-nav ul {
        flex-direction:column;
        width:100%;
        height:100%
    }
    header .nav-items .socials-nav:before {
        position:absolute;
        transform:rotate(90deg);
        top:50%;
        left:-200%;
        margin:0
    }
    .mobile_des {
        display:block
    }
    .site-logo img {
        width:120px
    }
    .nav-right {
        gap:15px
    }
    .menuparent .sub-menu {
        padding-left:2px
    }
    .contact-btn {
        position:fixed;
        bottom:10px;
        left:10px;
        padding:5px;
        box-shadow:none
    }
    .contact-btn a {
        min-width:0
    }
    .contact-btn a p {
        display:none
    }
    .whatsapp-btn {
        bottom:10px;
        right:10px;
        left:auto;
        padding:3px 8px
    }
    .whatsapp-btn a {
        font-size:22px
    }
    .hero-carousel .next {
        right:10px;
        font-size:15px
    }
    .hero-carousel .prev {
        left:10px;
        font-size:15px
    }
    .heading h2 {
        font-size:38px
    }
    .heading h3 {
        font-size:18px
    }
    .desc .tagline p {
        font-size:15px
    }
    .desc .desc-para {
        max-width:550px
    }
    .desc .desc-para p {
        font-size:15px
    }
    .read-more-btn {
        font-size:15px
    }
    .sub-heading {
        font-size:18px
    }
    .list-why-solluna {
        font-size:15px
    }
    .text-closed-btn {
        font-size:25px;
        width:38px;
        height:38px
    }
    .right-desc-bg,.left-desc-bg {
        width:80px
    }
    .feat-swiper-button-next {
        right:2px
    }
    .feat-swiper-button-prev {
        left:2px
    }
    #cottages {
        margin:0
    }
    .cottage-card {
        flex-direction:column
    }
    .card-img {
        width:100%;
        border-radius:20px 20px 0 0
    }
    .card-img>img {
        width:100%
    }
    .card-desc {
        width:100%;
        padding:15px;
        border-radius:0 0 10px 10px
    }
    .card-desc.left {
        margin:-5px 0 0 0
    }
    .card-desc.right {
        margin:-5px 0 0 0;
        order:2
    }
    .card-desc h4 {
        font-size:18px
    }
    .card-desc p {
        font-size:15px;
        padding:0 20px
    }
    .card-desc .desc-bottom button {
        font-size:12px;
        padding:10px
    }
    .card-desc .desc-bottom div img {
        width:35px
    }
    #updates .right-desc-bg {
        width:80px
    }
    #updates .heading p {
        font-size:18px
    }
    .update-desc .desc {
        font-size:14px;
        margin:0 0 10px
    }
    .update-desc {
        height:300px
    }
    .update-desc a {
        font-size:14px;
        bottom:10px
    }
    #testimonials .testimonial-area {
        width:100%
    }
    #testimonials .heading p {
        font-size:18px;
        margin:0 0 30px
    }
    #testimonials .testimonial-area h3 {
        font-size:25px
    }
    .testimonial-area .test-card .feedback {
        font-size:18px
    }
    .testimonial-area .test-card .name {
        font-size:18px
    }
    .testimonial-area .test-card .feedback {
        line-height:30px
    }
    .award-swiper-button-prev {
        left:0
    }
    .award-swiper-button-next {
        right:0
    }
    .credentials {
        max-width:180px
    }
    .credentials>img {
        width:150px
    }
    .footer-nav ul li {
        font-size:14px
    }
    .footer-bg {
        display:none
    }
    .footer-bg-mob {
        display:block
    }
    footer .flex-container {
        flex-wrap:wrap;
        justify-content:center;
        gap:25px
    }
    .top-btn {
        display:none
    }
}
@media screen and (max-width:576px) {
    .nav-right {
        gap:10px
    }
    .contact-btn {
        background-color:#eb7d23d6
    }
    #menu-btn {
        font-size:15px
    }
    header .nav-items {
        padding:15px
    }
    header .nav-items.active {
        transform:translateY(53px)
    }
    header .nav-items .wrapper {
        gap:5px;
        flex-wrap:wrap
    }
    header .nav-items .socials-nav {
        padding:5px 0
    }
    header .nav-items .socials-nav ul li {
        font-size:14px;
        width:30px;
        height:30px
    }
    .nav-list {
        width:90px
    }
    .nav-list ul {
        width:100%
    }
    .nav-list ul li {
        padding:5px 0;
        font-size:12px;
        width:100%
    }
    .desktop-slider {
        display:none
    }
    .mobile-slider {
        display:block
    }
    .heading h2 {
        font-size:30px
    }
    .flex-container .flex-left {
        gap:10px
    }
    .flex-container .flex-right {
        gap:10px
    }
    .offer-img .offer-desc h4 {
        font-size:15px
    }
    .offer-img .offer-desc p {
        font-size:12px
    }
    #videos .youtube-player {
        height:100%;
        width:100%
    }
    .video-thumbnail.active .fa-play {
        width:50px;
        height:50px;
        padding:12px 10px 12px 12px;
        font-size:25px
    }
    #videos>img {
        display:none
    }
    #updates {
        background:url(./assets/Asset\ 3-100.webp);
        background-repeat:repeat-y;
        background-size:contain
    }
    .updates {
        flex-direction:column;
        width:100%;
        align-items:center;
        gap:40px
    }
    #updates .bg {
        display:none
    }
    .updates .flex-right,.updates .flex-left {
        width:85%
    }
    #videos {
        padding:55px 0
    }
    #testimonials {
        padding:55px 0
    }
    #testimonials>img {
        display:none
    }
    #features .swiper-slide .feat-img {
        box-shadow:none
    }
    #features .swiper-slide img {
        height:50px;
        width:50px
    }
    #features .swiper-slide p {
        font-size:12px
    }
    .feat-swiper-button-next {
        height:25px;
        width:25px;
        right:0
    }
    .feat-swiper-button-prev {
        height:25px;
        width:25px;
        left:0
    }
    .feat-swiper-button-prev::after {
        font-size:12px
    }
    .feat-swiper-button-next::after {
        font-size:12px
    }
    #awards {
        min-height:0;
        padding:0 0 120px
    }
    #awards .swiper-slide img {
        height:90px;
        width:90px;
        padding:10px;
        margin:0 10px
    }
    .award-swiper-button-prev {
        height:25px;
        width:25px;
        left:0
    }
    .award-swiper-button-next {
        height:25px;
        width:25px;
        right:0
    }
    .award-swiper-button-next::after {
        font-size:12px
    }
    .award-swiper-button-prev::after {
        font-size:12px
    }
    footer .flex-container {
        justify-content:space-evenly;
        gap:0
    }
    .footer-nav {
        width:100px
    }
    .footer-nav ul {
        padding:0 0 0 20px
    }
    .footer-nav ul li {
        font-size:12px
    }
    .credentials {
        width:120px
    }
    .credentials p {
        font-size:12px
    }
    .credentials a {
        font-size:12px
    }
    .credentials>img {
        width:100%
    }
    .credentials .socials a {
        font-size:12px;
        width:22px;
        height:22px
    }
    .foot-subscribe {
        margin:20px 0
    }
    
    .foot-subscribe button {
	font-size: 14px;
    }
    .foot-subscribe form {
        margin:0 auto;
        width:fit-content
    }
    .foot-subscribe input[type="email"] {
        display:inline;
        width:150px;
        font-size:12px
    }
    .foot-subscribe input[type="submit"] {
        display:inline;
        font-size:12px
    }
}
@media screen and (max-width:375px) {
    .card-desc .desc-bottom div {
        gap:5px
    }
    footer {
        padding:40px 0 0
    }
    footer .flex-container {
        width:100%;
        justify-content:flex-start;
        flex-direction:column
    }
    footer::after {
        content:"";
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
        display:block;
        height:100vh;
        max-height:800px;
        min-height:667px;
        width:100%;
        background:rgb(234 233 230 / .4)
    }
    .footer-nav ul li a {
        font-weight:500
    }
    .credentials {
        width:100%
    }
    .credentials>img {
        width:120px
    }
    .credentials p {
        font-weight:500
    }
    .credentials a {
        font-weight:500
    }
    .footer-nav {
        width:150px
    }
    .footer-nav ul {
        padding:0
    }

    .foot-subscribe {
        text-align:left
    }

    .foot-subscribe h3 {
        text-align:left
    }
    .foot-subscribe form {
        margin:0
    }
}
@media screen and (max-width:360px) {
    #awards .swiper-slide img {
        height:120px;
        width:120px;
        padding:10px;
        margin:0 10px
    }
}
@media screen and (max-width:480px) {
    header .nav-list.about {
        margin:0 auto;
        width:100%
    }
    header .nav-items .socials-nav ul {
        width:100%;
        flex-direction:row;
        margin:0 auto;
        margin:20px 0 0
    }
    header .nav-items .socials-nav:before {
        transform:rotate(0deg);
        top:0;
        left:50%;
        transform:translateX(-50%)
    }
}
.popup.active {
    position:fixed;
    z-index:100000;
    top:0;
    height:100vh;
    width:100vw;
    background-color:rgb(0 0 0 / .738);
    display:flex;
    justify-content:center;
    align-items:center
}
.popup {
    display:none
}
.popup-overlay {
    position:relative
}
.popup-overlay img {
    display:block;
    width:500px;
    border-radius:20px
}
@keyframes fadeInUp {
    from {
        opacity:0;
        transform:translateY(100%)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.popup.active .popup-overlay {
    animation:fadeInUp 0.5s ease-out
}
#cross {
    position:absolute;
    top:-10px;
    right:-10px;
    width:30px;
    height:30px;
    border:none;
    border-radius:100%;
    background-color:#ff8c00;
    color:#fff
}
#cross:hover {
    background-color:#fff;
    color:#ff8c00;
    border:solid 1px #ff8c00
}
@media screen and (max-width:768px) {
    .popup-overlay img {
        display:block;
        width:300px
    }
}

.name-container input,
  .email-container input,
  .contact-container input {
    font-size: 15px;
  }

  .book-now-btn > button {
    font-size: 15px;
  }

  .name-container input,
  .email-container input,
  .contact-container input {
    padding: 10px 0 10px 5px;
  }
}

.book-now-btn > button {
  font-size: 15px;
  padding: 10px 5px;
}

#faq {
    text-align:center;
    padding:80px 0 0
}
#faq .heading h2 span {
    text-transform:lowercase
}
.faq {
    border-bottom:1px solid #e0e1e3;
    padding:20px 0 0;
    margin:0 0 30px;
    position:relative;
    text-align:left;
    width:80%;
    margin:0 auto
}
.faq .faq-title-wrapper {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:10px;
    margin:0 0 10px;
    transition:all 0.3s ease-in-out;
    cursor:pointer
}
.faq.active .faq-title-wrapper {
    background:rgb(0 0 0 / .1);
    margin:0 0 20px
}
.faq .faq-title {
    transition:margin 0.3s;
    font-size:16px
}
.faq .faq-text-wrapper {
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease-in-out
}
.faq.active .faq-text-wrapper {
    max-height:200px
}
.faq .faq-text {
    margin:0 0 20px;
    font-size:16px;
    padding:0 5px
}
.faq .faq-text a {
    color:#eb7e23;
    font-weight:700
}
.faq.active .faq-title {
    color:#eb7e23
}
.faq.active .faq-text {
    display:block
}
.faq .faq-toggle {
    position:relative
}
.faq .faq-toggle .strip {
    height:3px;
    width:20px;
    background-color:#eb7e23;
    display:block;
    cursor:pointer
}
.faq .faq-toggle .strip-top {
    position:absolute;
    transform:rotate(-90deg);
    transition:transform 0.25s ease-in-out
}
.faq.active .faq-toggle .strip-top {
    transform:rotate(0deg)
}
@media (max-width:640px) {
    .faq {
        width:100%
    }
    .page-head {
        margin:50px 0 50px
    }
}
@media (max-width:576px) {
.name-container input,
  .email-container input,
  .contact-container input {
    font-size: 12px;
  }

  .book-now-btn > button {
    font-size: 12px;
  }

    #faq {
        padding:0 0 55px 0
    }
}
.row {
    display:flex;
    gap:20px;
    justify-content:flex-start;
    align-items:center
}
.card {
    min-height:400px;
    width:100%;
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 32px 0 rgb(0 0 0 / .1)
}
.background {
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
.card .wrapper .data {
    height:100%;
    text-align:justify;
    position:absolute;
    padding:15px;
    transform:translateY(280px);
    background-color:rgb(0 0 0 / .5);
    color:#fff;
    transition:transform ease-in-out 0.5s
}
.card .wrapper .data a {
    color:#fff
}
.card .wrapper .data .button-wrapper {
    width:100%;
    text-align:center
}
.card:hover .wrapper .data {
    align-items:center;
    transition:all ease-in-out 0.5s;
    transform:translateY(0)
}
.card .wrapper .data .content {
    position:relative;
    transition:all ease-in-out 0.5s;
    height:100%
}
.card:hover .wrapper .data .content {
    transform:translateY(90px)
}
.card .wrapper .data .title {
    text-align:left;
    margin:0 0 20px;
    text-transform:uppercase;
    font-size:18px
}
.card .wrapper .data .text {
    margin:0 0 20px;
    opacity:0;
    transition:opacity ease-in-out 0.5s;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    word-wrap:break-word
}
.card:hover .wrapper .data .text {
    opacity:1
}
.card .wrapper .data .button {
    text-transform:uppercase;
    position:absolute;
    bottom:90px;
    left:50%;
    transform:translateX(-50%);
    font-weight:600;
    margin:0 0 20px;
    opacity:0;
    transition:opacity ease-in-out 0.3s;
    animation:colorChange 2s infinite;
    padding:5px 8px;
    border:solid 1px #fff;
    background: transparent;
    font-family: inherit;
}
.card:hover .wrapper .data .button {
    opacity:1
}
.card .wrapper .data .button {
    transition:all ease-in-out 0.5s
}
.card .wrapper .data .button:hover {
    color:#eb7e23;
    border-color:#f58220;
    animation:none;
    background-color:#fff
}
.data .button:hover::after {
    transform:translate(5px,-50%);
    opacity:1;
    color:#eb7e23
}
@keyframes colorChange {
    0% {
        color:#fff
    }
    50% {
        color:#f58220;
        border-color:#f58220
    }
    100% {
        color:#fff
    }
}
.card .date {
    position:absolute;
    top:0;
    left:0;
    background-color:#ff8c00;
    color:#fff;
    padding:.8em;
    z-index:100
}
.card .date span {
    display:block;
    text-align:center
}
.card .date .day {
    font-weight:700;
    font-size:24px;
    text-shadow:2px 3px 2px rgba(var(--black),.18)
}
.card .date .month {
    text-transform:uppercase
}
.card .date .month,.card .date .year {
    font-size:12px
}
@media only screen and (max-width:768px) {
    .card .wrapper .data .text {
        font-size:15px;
        opacity:1
    }
    .card .wrapper .data .button {
        opacity:1
    }
    .card .wrapper .data {
        transform:translateY(0)
    }
    .card .wrapper .data .content {
        transform:translateY(90px)
    }
}
@media only screen and (max-width:576px) {
    .row {
        flex-direction:column
    }
}