body,
html {
font-size: 18px;
height: -webkit-fill-available;
font-family: "DM Sans";
}
body {
touch-action: manipulation;
}
button, a, div, p {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
a {
cursor: pointer;
}
input,
textarea,
select {
font-size: 16px !important;
}
button.btn {
border: none !important;
outline: none !important;
}
.btn.btn-primary:active, .btn.btn-primary:hover {
background: #0D99FF !important;
}
.book-gallery a {
text-decoration: none;
}
.book-gallery h5 {
color: var(--Grayscale-Gray-100, #1E1E20);
font-size: 17px;
font-weight: 700;
line-height: 22px;
letter-spacing: -0.408px;
}
.book-gallery .card-text {
font-size: 14px;
}
.btn-rounded {
border-radius: 50px;
}
.bp-3 {
color: #1E1E20;
}
.bs-3 {
color: #ACACB0;
}
.btc-3 {
color: #747474;
}
.fs-16 {
font-size: 16px;
}
.hr {
color: #E6E6E6;
}
a.btn-brand {
border-radius: 40px;
border: solid 1px #E7E7E7;
background-color: #fff;
padding: 1rem 2rem;
color: #1E1E20;
text-decoration: none;
}
a.btn-brand:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background: #1E1E20;
color: #fff;
cursor: pointer;
}
.btn.btn-cd-secondary {
background: #F5F5F5;
border: 0;
font-size: 16px;
}
.btn.btn-cd-secondary:hover {
background: #ACACB0;
}
.btn.btn-pill {
border-radius: 40px;
}
.btn.btn-cd-light {
border: solid 1px #F4F4F4;
color: #B4B4B4;
font-size: 16px;
}
.btn.btn-cd-light:hover {
background: #EEF8FF;
color: #076CB6;
}
.btn.btn-cd-light:hover img {
filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(1434%) hue-rotate(185deg) brightness(93%) contrast(95%);
}
.btn.btn-cd-light:active {
background: #EEF8FF;
color: #076CB6;
}
.cd-mt1 {
margin-top: 96px;
}
.cd-mt2 {
margin-top: 153.5px;
}
.book-main .cd-col {
flex: 0 0 auto;
width: 100%;
}
@media (min-width: 576px) {
.book-main .cd-col {
flex: 0 0 auto;
width: 50%;
padding: 0 .25rem !important;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.book-main .cd-col {
flex: 0 0 auto;
width: 50%;
padding: 0 .25rem !important;
}
#divAllPlaces > div.cd-col:nth-of-type(n+7) {
display: none;
}
.friendlyplace > div.cd-col:nth-of-type(n+5) {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.book-main .cd-col {
flex: 0 0 auto;
width: 33.33333333%;
}
#divAllPlaces > div.cd-col:nth-of-type(n+10) {
display: none;
}
.friendlyplace > div.cd-col:nth-of-type(n+7) {
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.book-main .cd-col {
flex: 0 0 auto;
width: 25%;
}
#divAllPlaces > div.cd-col:nth-of-type(n+13) {
display: none;
}
.friendlyplace > div.cd-col:nth-of-type(n+9) {
display: none;
}
}
@media (min-width: 1400px) and (max-width: 1719px) {
.book-main .cd-col {
flex: 0 0 auto;
width: 20%;
}
#divAllPlaces > div.cd-col:nth-of-type(n+16) {
display: none;
}
.friendlyplace > div.cd-col:nth-of-type(n+11) {
display: none;
}
}
@media (min-width: 1720px) {
.book-main .cd-col {
flex: 0 0 auto;
width: 16.666666%;
}
#divAllPlaces > div.cd-col:nth-of-type(n+19) {
display: none;
}
.friendlyplace > div.cd-col:nth-of-type(n+13) {
display: none;
}
}
.hero-section {
background: url(../img/hero-bg.png);
padding: 1rem 0 7rem 0;
}
.hero-section-1 {
background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 1)), url(../img/hero-bg.jpg);
padding: 1rem 0 7rem 0;
background-size: cover;
}
.hero-search {
text-align: center;
max-width: 888px;
margin: 0 auto;
}
@media (min-width: 768px) and (max-width: 1199px) {
.hero-search {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
.hero-search h1 {
font-size: 72px;
margin-bottom: 70px;
}
.hero-search .search-box .hero-down {
text-decoration: none;
color: #ACACB0;
padding: 30px;
}
.hero-search .search-box .dropdown-menu {
width: fit-content;
min-width: 300px;
--bs-dropdown-link-active-bg: none;
--bs-dropdown-link-hover-bg: none;
cursor: pointer;
}
.hero-search .search-box .dropdown {
border: solid 1px #E7E7E7;
background: #fff;
margin-right: -1px;
position: relative;
cursor: pointer;
}
.hero-search .search-box .dropdown:first-child {
border-radius: 50px 0 0 50px;
}
.hero-search .search-box .dropdown-toggle::after {
margin-left: 2.255em;
}
.hero-search .search-box select {
border-radius: 0;
}
.hero-search .search-box select:first-child {
border-radius: 60px 0 0 60px;
padding: 0 43px;
margin-right: -1px;
}
.hero-search .search-box select:second-child {
margin-right: -1px;
}
.hero-search .btn-primary {
width: 150px;
border-radius: 0 60px 60px 0;
justify-content: center;
display: flex;
align-content: stretch;
align-items: center;
}
.hero-search.search-small .search-box .hero-down {
padding: 15px !important;
}
.header-section.header-fixed {
position: fixed;
z-index: 999;
background: #fff;
border-bottom: solid 1px #E7E7E7;
}
.header-drpdn-icon button {
/* display: flex;
height: 40px;
padding: 9.119px 13.679px;
justify-content: center;
align-items: center;
gap: 11.399px;
align-self: stretch;
border-radius: 16px;
border: 1px solid #E7E7E7;
background: transparent;
font-size: 14px;
font-weight: 500;
line-height: 138%;
letter-spacing: -0.28px;
*/
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-50, rgba(217, 217, 217, 0.80));
background: #FFFFFF;
color: #444;
}
.header-drpdn-icon button.active,
.header-drpdn-icon .cdmenu-item button:focus {
background: var(--PRIMARY-MAIN, #0D99FF);
border: 1px solid #0D99FF;
color: #FFFFFF;
}
.banner-section {
background: #000;
position: relative;
}
.banner-area {
width: 100%;
height: 420px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 0.6;
}
.banner-title {
position: absolute;
top: 200px;
color: #fff;
}
.banner-title h1 {
color: #fff !important;
}
.float-btn-listing {
position: fixed;
bottom: 20px;
left: 50%;
margin-left: -50px;
}
@media (max-width: 768px) {
.hero-search {
margin-top: 0px;
max-width: 90%;
}
.hero-search .btn-primary {
border-radius: 2rem;
width: 100%;
}
.hero-search h1 {
font-size: 32px;
}
.hero-search .search-box {
flex-direction: column !important;
width: 100%;
margin-bottom: -1px;
gap: 10px;
}
.hero-search .search-box .hero-down {
padding: 16px;
width: 100%;
text-align: left;
}
.hero-search .search-box .dropdown {
border-radius: 2rem !important;
}
.hero-search .search-box .dropdown .dropdown-toggle::after {
text-align: right;
float: right;
margin: 10px 10px 0 0 !important;
}
.header-section {
max-width: 100%;
background: #fff;
position: fixed;
top: 0;
z-index: 100;
box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}
.header-section .mb-4 {
margin-bottom: 0 !important;
}
footer {
padding: 1rem 0 0 !important;
}
}
.dropdown-menu li.cdmenu-item {
padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
}
.book-gallery {
padding: 0;
margin: 0 0 1.5rem 0;
}
.book-gallery .bgallery-img {
width: 100%;
overflow: hidden;
border-radius: 16px 16px 16px 16px;
position: relative;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* display: flex;*/
}
.book-gallery .bgallery-img img {
width: 100%;
aspect-ratio: 20/19;
object-fit: cover;
flex: 0 0 100%;
scroll-snap-align: center;
}
.photodiv {
scroll-snap-align: center;
display: flex;
}
.book-gallery .card-body {
padding: 0;
}
.book-gallery .card-body h4 {
margin: 0;
}
.book-gallery .card-body .rating {
gap: 0.5rem;
font-size: 18px;
font-weight: 400;
}
.review-box {
margin: 2rem 0 5rem 0px;
}
.review-box .review-card {
min-height: 300px;
border: solid 1px #E7E7E7;
border-radius: 12px;
padding: 1.5rem;
background-color: #FFF;
/* margin-left: .5rem;
margin-right: -.5rem;*/
}
.review-box .review-card .avatar {
width: 50px;
height: 50px;
border-radius: 100%;
overflow: hidden;
margin-right: 1rem;
}
.review-box .review-card .avatar img {
width: 100%;
height: 100%;
}
.review-box .review-card .reviewer b {
display: block;
font-weight: 500;
}
.review-box .review-card .reviewer span {
font-size: 16px;
}
footer {
background-color: #f5f5f5;
padding: 4rem 0 0;
}
.desktop-version-footer {
position: relative;
z-index: 97;
}
footer .f-menu {
margin: 0;
padding: 0;
}
footer .f-menu li {
list-style: none;
margin: 10px 0;
padding: 0;
}
footer .f-menu li a {
text-decoration: none;
color: #747474;
}
footer .f-menu li a:hover {
text-decoration: underline;
color: #1E1E20;
}
footer .copy {
margin-top: 20px;
border-top: solid 1px #E7E7E7;
font-size: 14px;
text-align: center;
padding: 30px 0;
}
.discover-main .discover-box {
/* margin-left: -25px;*/
margin: 2rem -0.5rem 0 -0.5rem;
}
.discover-main .discover-box .item {
position: relative;
aspect-ratio: 16/11;
}
.discover-main .discover-box .item img {
filter: brightness(0.7);
border-radius: 12px;
}
.discover-main .discover-box .discover-text {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
height: 80%;
flex-direction: column;
justify-content: space-between;
}
.discover-main .discover-box .discover-text .btn {
border-radius: 16px;
}
.discover-main .discover-box .discover-text p {
font-weight: bold;
font-size: 40px;
}
ul.cd-highlights {
display: flex;
gap: 1rem;
margin: 0;
padding: 0;
}
ul.cd-highlights li {
display: flex;
border: solid 1px #E7E7E7;
border-radius: 16px;
gap: 0.8rem;
padding: 20px 30px;
align-items: center;
background-color: #fff;
}
ul.cd-highlights span {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid 1px #E7E7E7;
background-color: #FCFCFC;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 24px;
}
ul.cd-highlights b {
font-weight: normal;
}
/*
.filter-area .filter-button {
border-right: solid 1px #E7E7E7;
padding-right: 20px;
}
*/
.button002 {
height: 40px;
padding: 0px 16px;
border-radius: 24px;
border: 1px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 500;
line-height: 18.23px;
letter-spacing: -0.02em;
background-color: #ffffff;
color: #222222;
}
.button002:hover {
border: 1px solid #F6F6F6;
background: #F6F6F6;
}
.button003 {
height: 40px;
padding: 0px 16px;
border-radius: 24px;
border: 1px;
border: 1px solid #D9D9D9;
font-size: 14px;
font-weight: 500;
line-height: 18.23px;
letter-spacing: -0.02em;
background-color: #ffffff;
color: #222222;
}
.button003:hover {
background: #F6F6F6;
border: 1px solid #ACACB0;
}
.button003.active {
border: 1px solid #2587CF;
color: #2587CF;
background-color: #E9F4FC;
}
.button003::after {
display: none !important;
}
button.button003.dropdown-toggle.show {
border: 1px solid #2587CF;
}
.button004 {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
line-height: 10px;
letter-spacing: -0.02em;
color: #222222;
min-width: fit-content;
}
.button004 span {
width: 20px;
height: 20px;
border-radius: 10px;
background: #FFFFFF;
border: 1px solid #D9D9D9;
}
.button004 div p:nth-child(2) {
font-size: 9px;
font-weight: 500;
line-height: 10px;
letter-spacing: -0.02em;
margin: 0;
margin-top: 3px;
text-align: left;
}
.filter-menu {
padding-left: 20px;
width: 100%;
display: flex;
gap: .5rem;
flex-wrap: nowrap;
overflow-x: auto;
}
.filter-dropdown {
width: 365px;
background-color: #ffffff;
border: 1px solid #D9D9D9;
}
.mobile_serach {
display: none;
}
@media (max-width:767px) {
.mbldrpdwnpopup .dropdown-menu {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100%;
border-radius: 0;
transform: unset !important;
border-radius: 16px 16px 0 0;
}
.mbldrpdwnpopup .dropdown-menu .dropdownbackdrop {
content: " ";
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background: #00000030;
}
.mobile_serach {
display: block;
}
.desktop_search {
display: none !important;
}
}
/* filter-menu*/
.col-message-1 {
border: 1px solid #4444;
border-radius: 1rem;
color: #222;
text-align: center;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
/* 128.571% */
padding: 11px 17px;
cursor: pointer;
margin-bottom: 0 !important;
}
.filter-area {
display: flex;
padding: .5rem 0;
}
.filter-menu::-webkit-scrollbar {
display: none;
/* Safari and Chrome */
}
.filter-menu button {
min-width: fit-content;
}
.filter-menu .active {
color: #076CB6;
background-color: #EEF8FF;
}
.filter-menu-main .scroll-next,
.filter-menu-main .scroll-back {
z-index: 1;
background-color: #fff;
border: 1px solid #75757524;
border-radius: 1.5rem;
display: block;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
height: 38px;
width: 42px;
}
.filter-menu-main .scroll-back {
rotate: 180deg;
}
.filter-menu-main .scroll-next {
position: absolute;
right: 0;
width: 38px;
}
.badge-icon {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid 1px #E7E7E7;
background-color: #FCFCFC;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 20px;
color: #444444;
}
.badge-icon:hover {
border-color: #0D99FF;
}
.details-gallery .d-img1,
.details-gallery .d-img2,
.details-gallery .d-img3,
.details-gallery .d-img4 {
background: #333;
border-radius: 16px;
overflow: hidden;
}
.details-gallery .d-img1 {
width: 45%;
height: 350px;
}
.details-gallery .d-img2 {
width: 27%;
height: 350px;
}
.details-gallery .d-img3,
.details-gallery .d-img4 {
width: 100%;
height: 170px;
}
.details-gallery .d-img-gr {
width: 27%;
height: 350px;
}
.cd-dhigh {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 14px;
margin: 15px 0;
}
.cd-dhigh li {
border: solid 1px #E7E7E7;
border-radius: 50px;
padding: 5px 15px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
.features-group ul {
color: #4b4b4d;
}
.cd-dhigh li img {
width: fit-content;
height: 21.75px;
}
.TopHeaderText {
color: #222;
font-feature-settings: 'ss03' on, 'liga' off;
font-family: "DM Sans";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -1.6px;
margin-bottom: 30px;
}
.imageMenuDropDownButton {
gap: 8px;
border-radius: 16px;
border: 1px solid #F1F1F1;
}
.rightHeaderContainer {
padding-left: 60px;
}
.rightHeaderContainer h2 {
color: #1E1E20;
font-family: "DM Sans";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 87.5% */
letter-spacing: -0.32px;
}
.rightHeaderContainer h5 {
color: #4B4B4D;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px;
/* 185.714% */
letter-spacing: -0.078px;
}
.rightHeaderContainer button {
border-radius: 16px;
padding-inline: 32px;
padding-block: 16px;
border: 1px solid rgba(234, 235, 237, 0.8);
background: #FFF;
color: #444;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.tab-buttons {
display: flex;
/* Style for the active tab button */
}
.tab-buttons .tab-button {
cursor: pointer;
padding: 10px 20px;
color: #747474;
text-align: center;
font-family: "DM Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px;
/* 128.571% */
}
.tab-buttons .tab-button.active {
border: 1px;
border-bottom: 3px solid #0D99FF;
}
.tab {
display: none;
/* Hide all tabs by default */
}
/* Style for the active tab */
.tab.active {
display: block;
/* Show active tab */
}
.columnContainerGuest .columnDivion {
padding-inline: 16px;
padding-block: 20px;
}
.columnContainerGuest .columnDivion h4 {
color: #444;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 131.25% */
letter-spacing: -0.32px;
}
.columnContainerGuest .columnDivion div.wrapper {
border-radius: 10px;
border: 1px solid rgba(234, 235, 237, 0.8);
background: #FFF;
}
.columnContainerGuest .columnDivion .textPadding {
padding: 24px;
}
.columnContainerGuest .columnDivion div.text {
color: #4B4B4D;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px;
/* 185.714% */
letter-spacing: -0.078px;
}
.columnContainerGuest .columnDivion .viewAllButton {
border: none;
border-top: 1px solid rgba(234, 235, 237, 0.8);
width: 100%;
background-color: transparent;
padding: 16px 24px;
color: #747474;
font-family: "DM Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 175% */
letter-spacing: -0.32px;
}
@media (max-width: 780px) {
.rightHeaderContainer {
display: none;
}
.TopHeaderText {
margin-top: 100px;
}
}
@media (max-width: 425px) {
.TopHeaderText {
margin-top: 40px;
}
}
.helpBackButton {
color: #0D99FF;
text-align: center;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.1px;
margin-left: 6px;
}
.sideHeader h3 {
color: #444;
font-family: "DM Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 105% */
letter-spacing: -0.32px;
margin-bottom: 24px;
}
.sideHeader h4 {
color: #444;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 131.25% */
letter-spacing: -0.32px;
margin-bottom: 24px;
}
.sideHeader h6 {
color: #4B4B4D;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px;
/* 185.714% */
margin-bottom: 24px;
letter-spacing: -0.078px;
}
.ContactUsButton {
border-radius: 16px;
padding-inline: 32px;
padding-block: 16px;
border: 1px solid rgba(234, 235, 237, 0.8);
background: #FFF;
color: #444;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.accordion {
overflow-anchor: none;
}
.accordion > .card:not(:last-of-type) {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.accordion > .card {
overflow: hidden;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: .25rem;
}
.accordion > .card > .card-header {
border-radius: 0;
margin-bottom: -1px;
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.collapse:not(.show) {
display: none;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.accordion > .card:not(:first-of-type) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.accordion > .card:not(:last-of-type) {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.accordion > .card > .card-header {
border-radius: 0;
margin-bottom: -1px;
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.collapse.show {
visibility: visible !important;
}
#accordionExample button {
color: #444;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.078px;
text-decoration: none;
width: 100%;
text-align: left;
padding-right: 2rem;
}
#accordionExample li {
color: #747474;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 26px;
/* 185.714% */
letter-spacing: -0.078px;
}
.panel-title {
position: relative;
}
.panel-title::after {
content: "\002B";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome";
font-size: 28px;
transition: content 1.3s ease;
/* Transition for content property */
}
.panel-title[aria-expanded="true"]::after {
content: "\2212";
font-size: 28px;
transition: content 1.3s ease;
/* Transition for content property */
}
.rightSideEligible {
background: url(../img/BG.png);
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 100vh;
height: fit-content;
}
.eligibleListContainer {
border-radius: 16px;
background: #FAFAFA;
padding: 48px;
min-height: 500px;
margin: 107px 138px 107px 138px;
}
.eligibleListContainer h2 {
color: #1E1E20;
font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 40px;
/* 142.857% */
letter-spacing: -0.56px;
}
.eligibleListContainer .logoContainer {
display: flex;
gap: 12px;
}
.eligibleListContainer li, .greentick li {
position: relative;
font-size: 30px;
list-style-type: none;
margin-bottom: 1rem;
background: url("../img/TickCircle.svg") no-repeat left;
padding: 2.4px 0 3px 30px;
color: #4B4B4D;
font-family: "DM Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px;
}
/* doted lines*/
.doted-line-main li::before {
content: " ";
background-color: #747474;
width: 1px;
height: 5px;
position: absolute;
bottom: -5px;
left: 8px;
}
.doted-line-main li::after {
content: " ";
background-color: #747474;
width: 1px;
height: 5px;
position: absolute;
top: -5px;
left: 8px;
}
.doted-line-main .first-after::after,
.doted-line-main .last-before::before {
display: none;
}
.eligibleListContainer ul.better li {
background-position: left 4px;
}
@media (max-width: 1441px) {
/* Styles for screens smaller than 1440px */
/* Add your styles here */
.eligibleListContainer {
margin: 67px 98px 67px 98px;
}
}
@media (max-width: 1025px) {
/* Styles for screens smaller than 1440px */
/* Add your styles here */
.eligibleListContainer {
margin: 27px 68px 27px 68px;
}
}
@media (max-width: 720px) {
/* Styles for screens smaller than 1440px */
/* Add your styles here */
.eligibleListContainer {
margin: 0;
border-radius: 0;
}
/* #rightSideEligibleId {
display: none;
}*/
}
.leftSideLoginEntry h1 {
color: #1E1E20;
text-align: center;
font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 118%;
/* 33.04px */
letter-spacing: -0.56px;
margin-bottom: 64px;
}
.leftSideLoginEntry .h1 {
color: #1E1E20;
text-align: center;
font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 118%;
/* 33.04px */
letter-spacing: -0.56px;
margin-bottom: 64px;
}
.leftSideLoginEntry .messageBeforeContinue {
color: var(--GREY, #747474);
text-align: center;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22.4px;
/* 160% */
margin-block: 32px;
}
.leftSideLoginEntry .Continue-button {
border-radius: 16px;
background: #0D99FF;
backdrop-filter: blur(40px);
width: 100%;
display: flex;
padding: 17px;
justify-content: center;
align-items: center;
gap: 10px;
color: #FFF;
text-align: center;
font-family: "DM Sans";
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 123.529% */
letter-spacing: -0.32px;
}
.leftSideLoginEntry .gapedDiv {
margin-top: 24px;
}
.leftSideLoginEntry .gapedDiv button {
color: #444;
margin-bottom: 24px;
padding: 17px 24px;
border-radius: 16px;
border: 1px solid rgba(234, 235, 237, 0.8);
background: #FCFCFC;
width: 100%;
text-align: center;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 21px;
/* 150% */
letter-spacing: -0.32px;
display: flex;
gap: 1rem;
}
.leftSideLoginEntry .gapedDiv button div {
width: 50px;
}
.leftSideLoginEntry .gapedDiv button p {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-left: -50px;
}
.leftSideLoginEntry .orClass {
color: #747474;
text-align: center;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.4px;
/* 140% */
}
@media (min-width: 768px) {
.mobile-show {
display: none;
}
}
@media (max-width: 768px) {
.mobile-show {
display: block;
}
.canIjoinLink {
margin-bottom: 24px;
color: #0D99FF;
text-align: center;
font-feature-settings: 'ss03' on, 'liga' off;
font-family: "DM Sans";
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.52px;
text-decoration-line: underline;
display: block !important;
cursor: pointer;
}
.hidecontent {
display: block;
}
.showcontent {
display: none;
}
}
#otpPageId {
text-align: center;
justify-content: center;
margin-top: 64px;
position: relative;
}
#otpPageId h1 {
color: #4B4B4D;
text-align: center;
font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 118%;
/* 33.04px */
letter-spacing: -0.56px;
margin-bottom: 32px;
margin-right: 5px;
}
#otpPageId span {
padding-inline: 16px;
width: 53px;
height: 47px;
margin-right: 15px;
display: flex;
align-items: center;
border-radius: 400px;
border: 1px solid #E7E7E7;
background: #FAFAFA;
margin-bottom: 32px;
}
#otpPageId input {
border-radius: 17.333px;
border: 1.333px solid #E3E5E5;
background: #FCFCFC;
width: 76px;
padding: 24px;
text-align: center;
}
@media (max-width:767px) {
#otpPageId input {
width: 50px;
height: 45px;
padding: 10px;
}
}
.modal-body .inputContainer input[type=number] {
width: 50px !important;
height: 45px !important;
padding: 10px !important;
}
@media (max-width:767px) {
#otpPageId input {
width: 50px;
height: 45px;
padding: 10px;
}
}
#otpPageId input.email, .loginpage input.email {
border-radius: 16px;
border: 1px solid rgba(234, 235, 237, 0.8);
background: #FDFDFD;
text-align: left;
padding: 24px;
}
#otpPageId h3 {
color: #1E1E20;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
text-align: center;
margin-bottom: 32px;
}
#otpPageId .inputContainer {
text-align: center;
margin-bottom: 32px;
color: #ACACB0;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22.4px;
/* 160% */
}
#otpPageId .Continue-button {
border-radius: 16px;
border: none;
background: #0D99FF;
backdrop-filter: blur(40px);
width: 100%;
display: flex;
padding: 16px;
justify-content: center;
align-items: center;
gap: 10px;
color: #FFF;
text-align: center;
font-family: "DM Sans";
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 123.529% */
letter-spacing: -0.32px;
width: 100%;
}
.marginBotton {
margin-bottom: 32px;
}
.chooseVerificationPageId {
text-align: center;
justify-content: center;
margin-top: 64px;
padding-left: 12px;
padding-right: 12px;
position: relative;
}
.chooseVerificationPageId h1 {
color: #4B4B4D;
text-align: center;
font-family: "DM Sans";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 118%;
/* 33.04px */
letter-spacing: -0.56px;
margin-bottom: 32px;
margin-right: 5px;
}
.chooseVerificationPageId a {
color: #0D99FF;
text-align: center;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
/* 160% */
margin-left: 12px;
margin-right: 12px;
}
.chooseVerificationPageId button {
color: #444;
margin-bottom: 24px;
padding: 24px;
border-radius: 16px;
border: 1px solid rgba(234, 235, 237, 0.8);
background: #FCFCFC;
width: 100%;
text-align: center;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 21px;
/* 150% */
letter-spacing: -0.32px;
}
.chooseVerificationPageId span {
padding-inline: 16px;
width: 53px;
height: 48px;
display: flex;
align-items: center;
margin-right: 5px;
border-radius: 400px;
border: 1px solid #E7E7E7;
background: #FAFAFA;
margin-bottom: 32px;
}
.chooseVerificationPageId input {
border-radius: 17.333px;
border: 1.333px solid #E3E5E5;
background: #FCFCFC;
width: 76px;
padding: 24px;
text-align: center;
}
.chooseVerificationPageId h3 {
color: #1E1E20;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
text-align: center;
margin-bottom: 32px;
}
.chooseVerificationPageId .inputContainer {
text-align: center;
margin-bottom: 32px;
}
.chooseVerificationPageId .Continue-button {
border-radius: 16px;
background: #0D99FF;
backdrop-filter: blur(40px);
width: 100%;
display: flex;
padding: 16px;
justify-content: center;
align-items: center;
gap: 10px;
color: #FFF;
text-align: center;
font-family: "DM Sans";
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 21px;
/* 123.529% */
letter-spacing: -0.32px;
width: 100%;
}
.marginSide {
margin-left: 100px;
margin-right: 100px;
}
@media (max-width: 768px) {
.marginSide {
margin-left: 20px;
margin-right: 20px;
}
.sk-button {
display: none !important;
}
}
@media (max-width:767px) {
.sk-button {
display: none !important;
}
}
.mainConfirmationPage {
display: flex;
align-items: center;
margin-top: 5%;
text-align: center;
flex-direction: column;
justify-content: center;
}
.mainConfirmationPage .messageContainer {
justify-content: center;
text-align: center;
}
.mainConfirmationPage .messageContainer .imageContainer {
background-color: #e9f4fc;
border-radius: 100%;
height: 115px;
display: flex;
width: 115px;
align-items: center;
justify-content: center;
}
.mainConfirmationPage .messageContainer h1 {
margin-top: 46px;
color: #1E1E20;
font-family: "DM Sans";
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.36px;
}
.mainConfirmationPage .messageContainer .smalltext {
color: #4B4B4D;
text-align: center;
font-family: "DM Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px;
/* 133.333% */
margin-bottom: 24px;
}
.mainConfirmationPage a {
color: #0D99FF;
text-align: center;
font-family: "DM Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
/* 160% */
margin-left: 12px;
margin-right: 12px;
}
/* mobile footer css */
main {
height: 2000px;
/* Just for demonstration */
padding: 20px;
}
.mobile-version-footer {
background-color: #f0f0f0;
display: none;
align-items: center;
justify-content: space-evenly;
position: fixed;
bottom: 0;
width: 100%;
transition: transform 0.5s ease-out;
z-index: 99;
background-color: white;
border-top: 1px solid #4444;
height: 60px;
}
.mobile-text-footer {
font-size: 12px;
margin-top: 0.25rem;
}
.mobile-version-footer .mf-icon {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
align-items: center;
}
.mobile-version-footer div img {
width: 21.75px;
height: 21.75;
}
@media (max-width:1000px) {
.flex-wrap-1000 {
flex-direction: column !important;
}
.book-main {
margin: auto;
}
}
/* loader */
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: #ffffff;
transition: all 0.6s ease-out;
}
#preloader:before {
/*content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: #0D99FF transparent #0D99FF transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;*/
content: "";
position: fixed;
top: calc(50%);
left: calc(50%);
box-shadow: 20px 0px 0 0 rgba(3,169,244,0.2), 16.2px 11.8px 0 0 rgba(3,169,244,0.4), 6.2px 19px 0 0 rgba(3,169,244,0.6), -6.2px 19px 0 0 rgba(3,169,244,0.8), -16.2px 11.8px 0 0 #03a9f4;
animation: spinner-b87k6z 1s infinite linear;
border-radius: 8px;
width: 10px;
height: 10px;
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
width: 8px;
height: 8px;
border-radius: 8px;
box-shadow: 20px 0px 0 0 rgba(3,169,244,0.2), 16.2px 11.8px 0 0 rgba(3,169,244,0.4), 6.2px 19px 0 0 rgba(3,169,244,0.6), -6.2px 19px 0 0 rgba(3,169,244,0.8), -16.2px 11.8px 0 0 #03a9f4;
animation: spinner-b87k6z 1s infinite linear;
}
@keyframes spinner-b87k6z {
to {
transform: rotate(360deg);
}
}
/* Background style only */
.loader-main, .loader-listing-main {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.05);
display: grid;
place-items: center;
z-index: 99999;
}
/* loader pill */
.loader-map {
position: absolute;
top: 50px;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
.loader-pill {
display: flex;
justify-content: space-between;
align-items: center;
width: 75px;
height: 32px;
background-color: white;
border-radius: 10px;
padding: .5rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.pill-dot {
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%;
animation: blink 1.4s infinite both;
}
.pill-dot {
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%;
animation: blink 1.4s infinite both;
}
.pill-dot:nth-child(2) {
animation-delay: 0.2s;
}
.pill-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes blink {
0%, 80%, 100% {
opacity: 0;
scale: .5;
}
40% {
opacity: 1;
scale: 1;
}
}
/*------------------------------
buttons start
------------------------------*/
.desktop-back-btn-1 {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 48px;
height: 38px;
border-radius: 400px;
border: 1px solid #E7E7E7;
background: #FAFAFA;
cursor: pointer;
}
.continue-button.active {
color: white;
background-color: #0D99FF;
}
.continue-button {
display: flex;
width: 100%;
max-width: 599px;
height: 64px;
padding: 16px 128px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 16px;
border: none;
background: var(--Grayscale-Gray-16, #F6F6F6);
color: var(--Grayscale-Gray-100, #1E1E20);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.32px;
text-decoration: none;
cursor: pointer;
margin-top: 1rem;
}
.continue-button-2 {
display: flex;
height: 48px;
padding: 8px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 16px;
background: var(--Primary-Primary-50, #0D99FF);
border: none;
color: white;
text-decoration: none;
}
.continue-button-2:focus {
outline: none;
}
.Add-listing-button {
display: flex;
width: 90%;
/* max-width: 592px; */
height: 64px;
padding: 16px 128px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 16px;
background: var(--Primary-Primary-50, #0D99FF);
border: none;
color: var(--White-White-100, #FFF);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.32px;
text-decoration: none;
cursor: pointer;
}
.more-info-btn {
border: none;
background: transparent;
text-decoration: underline;
color: #0D99FF;
padding: 0;
text-decoration: none;
cursor: pointer;
}
.button-1 {
display: flex;
padding: 6px 16px;
align-items: center;
gap: 2px;
border-radius: 16px;
border: 1px solid #E7E7E7;
background: var(--Gray-04, #FCFCFC);
color: #000;
font-size: 12px;
font-weight: 500;
line-height: 36px;
/* 300% */
letter-spacing: -0.12px;
}
.view-profile-button {
border: none;
padding: 0;
background-color: transparent;
color: var(--PRIMARY-MAIN, #0D99FF);
font-size: 16px;
font-weight: 500;
line-height: 18px;
/* 112.5% */
letter-spacing: -0.078px;
text-decoration-line: underline;
}
.link-module-button {
border: none;
padding: 0;
background-color: transparent;
color: var(--PRIMARY-MAIN, #0D99FF);
font-size: 16px;
font-weight: 700;
line-height: 18px; /* 112.5% */
letter-spacing: -0.078px;
text-decoration-line: underline;
}
/*------------------------------
buttons ends
------------------------------*/
/* toasts */
.toast {
overflow: hidden;
font-size: 14px;
font-weight: 400;
line-height: 22.4px;
margin-block: 32px;
}
/*--------------------------------
inputs starts
--------------------------------*/
.input1 {
display: flex;
height: 64px;
padding: 12px 24px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
background: var(--Gray-04, #FCFCFC);
}
/*--------------------------------
inputs starts
--------------------------------*/
/*--------------------------------
dropdowns starts
--------------------------------*/
.drpdn {
display: flex;
height: 64px;
padding: 12px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
color: var(--Grayscale-Gray-80, #4B4B4D);
font-size: 14px;
font-weight: 500;
line-height: 22px;
/* 157.143% */
letter-spacing: -0.12px;
}
/*--------------------------------
dropdowns ends
--------------------------------*/
/*--------------------------------
process-status-indicator
--------------------------------*/
.process-status-indicator {
position: relative;
background: #F6F6F6;
width: 100%;
height: 7px;
overflow: hidden;
border: 1rem;
/* Adjust as needed */
}
.process-status-fill {
border-radius: 0 1rem 1rem 0;
background: var(--PRIMARY-MAIN, #0D99FF);
height: 100%;
width: 0%;
/* Change this value dynamically */
}
/*--------------------------------
process-status-indicator ends
--------------------------------*/
/* host info*/
.host-info {
display: flex;
gap: 8px;
align-items: start;
}
.host-info .avatar,
.review-box .avatar,
.review-card .avatar {
border-radius: 50%;
overflow: hidden;
min-width: fit-content;
}
.host-info .avatar img {
aspect-ratio: 20/19;
object-fit: cover;
}
.float-btn-listing {
display: none;
}
/* style="width: 100%;height: 400px;position: relative;overflow: hidden;" */
/* remove inline css and add class name listing-details-map */
/* */
.listing-details-map {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
@media (max-width:767px) {
.listing-details-map {
height: 60vh;
height: 300px;
}
}
/* class="filter-button mobile-version-none" */
/* replace this or add calss name mb-3 */
/* class="filter-area mb-3 d-flex align-items-center" */
/*---------------------------------
searchbar starts
---------------------------------*/
#searchBar {
width: 100%;
}
.search_container {
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237));
display: flex;
border-radius: 4rem;
width: 100%;
background-color: white;
height: 80px;
}
.search_container-body {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.search-button-main {
height: 100%;
}
.search-button {
background-color: #0D99FF;
color: white;
height: 100%;
width: 100%;
padding: .5rem;
border-radius: 0 4rem 4rem 0;
border: none;
}
/* .search_container-body {} */
.search-input {
position: relative;
}
.auto-sugessions {
position: absolute;
display: none;
flex-direction: column;
gap: .5rem;
top: 100%;
border: 1px solid #74747440;
padding: .5rem;
background-color: white;
border-radius: 1rem;
width: 300px;
min-width: fit-content;
z-index: 2;
height: auto;
max-height: 300px;
overflow-y: auto;
}
/* width */
.auto-sugessions::-webkit-scrollbar {
width: 3px;
}
.auto-sugessions::-webkit-scrollbar-track {
background: transparent;
}
.auto-sugessions::-webkit-scrollbar-thumb {
background: #747474;
border-radius: 1rem;
}
.auto-sugessions div {
cursor: pointer;
}
.auto-sugessions.active {
display: flex;
}
.search_container .search-input input:focus + .auto-sugessions {
display: flex;
}
.search-date-button {
padding: 0 .5rem;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237));
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
height: 100%;
}
.search-guest-button {
padding: 0 .5rem;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237));
display: flex;
align-items: center;
margin: 0;
height: 100%;
justify-content: space-between;
text-decoration: none;
height: 100%;
}
.search_container-body .search-guest-button::after,
.search_container-body .search-date-button::after {
display: none !important;
}
.location-icon {
display: flex;
height: 48px;
aspect-ratio: 1;
justify-content: center;
align-items: center;
gap: 8.421px;
border-radius: 1684.211px;
border: 0.842px solid #E7E7E7;
background: #FAFAFA;
}
.place-text {
color: var(--Grayscale-Gray-80, #4B4B4D);
font-size: 14px;
font-weight: 400;
line-height: 22px;
/* 157.143% */
letter-spacing: -0.12px;
text-align: left;
display: flex;
padding: 8px 0px;
align-items: center;
gap: 10px;
align-self: stretch;
width: 100%;
border-bottom: 1px solid var(--Grayscale-Gray-40, rgba(172, 172, 176, 0.24));
}
.date_after_select {
gap: 3px;
justify-content: space-between;
width: 100%;
}
.date_after_select .line1 {
width: 1px;
display: block;
background-color: #74747431;
margin: .2rem 0;
margin-right: 6px;
margin-left: 6px;
}
.date_after_select > div.active {
border: 1px solid #000000;
border-radius: 5px;
/* padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;*/
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
}
.search-input input {
border-radius: 5rem !important;
}
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item:focus-visible {
background-color: transparent !important;
color: inherit !important;
}
.add-guests .dropdown-item:hover {
background-color: transparent !important;
color: inherit !important;
}
.flex-c-main {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border-bottom: 1px solid #E7E7E7;
padding: .5rem 0;
gap: 2rem;
}
.flex-c-sub {
display: flex;
align-items: center;
gap: 10px;
width: 125px;
justify-content: space-between;
}
.flex-c-sub .svg-1 {
display: flex;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
border-radius: 80px;
border: 1px solid var(--GREY, #747474);
cursor: pointer;
}
.disabled {
cursor: not-allowed;
border: 1px solid #E7E7E7 !important;
}
.suggested-list-place {
display: flex;
gap: 1rem;
align-items: center !important;
width: 100%;
align-items: start;
padding: .5rem;
border-radius: .7rem;
text-align: start;
}
.suggested-list-place:hover {
background-color: #74747417;
}
.suggested-list-place.active {
background-color: #74747417;
}
.Select-a-destination-suggestions {
display: flex;
flex-direction: column;
gap: .5rem;
}
/* scroll effect */
.search_container-1 {
position: fixed;
top: 33px;
left: 50%;
transform: translate(-50%, -50%);
width: 48%;
z-index: 100;
border-radius: 5rem;
padding: 0;
height: 50px;
max-width: 665px;
min-width: 400px;
}
/* scroll effect */
.header-small .search_container {
z-index: 100;
border-radius: 5rem;
padding: 0;
height: 50px;
max-width: 665px;
min-width: 400px;
/*margin:auto;*/
}
.header-small .search_container-body,
.search_container-1 .search_container-body {
gap: 0;
}
.header-small .search_container-1-none,
.search_container-1 .search_container-1-none {
display: none !important;
}
.header-small .date_before_select,
.search_container-1 .date_before_select {
display: flex;
}
.header-small .date_after_select p,
.search_container-1 .date_after_select p {
font-size: 14px;
line-height: normal;
}
.search-date-button.show .date_before_select {
display: none !important;
}
.search-date-button.show .date_after_select {
display: flex !important;
}
.header-small .search-input input,
.search_container-1 .search-input input {
padding: 2px 2px 2px 2px !important;
margin-left: 10px;
border: none;
outline: none;
width: 60px;
}
.header-small .search-input input:hover,
.search_container-1 .search-input input:hover {
box-shadow: none !important;
}
.header-small .search-button,
.search_container-1 .search-button {
border-radius: 0 4rem 4rem 0;
width: 110px;
}
.header-small .search-date-button,
.search_container-1 .search-date-button {
border: none !important;
}
.header-small .search-guest-button,
.search_container-1 .search-guest-button {
border: none !important;
}
.search_container .line {
display: none;
height: 70%;
width: .5px;
background-color: #74747456;
}
.header-small .line,
.search_container-1 .line {
display: block;
}
.header-small .search-input,
.search_container-1 .search-input {
width: 110px;
height: 100%;
}
.search_container .search-input input {
padding: 29px 12px 1px 34px !important;
border-radius: 4rem 0 0 4rem !important;
margin: 0;
border: none;
}
.header-small .search-input input,
.search_container-1 .search-input input {
padding: 12px 12px 12px 12px !important;
border-radius: 4rem 0 0 4rem !important;
margin: 0;
border: none;
}
.search_container .search-input input {
width: 90%;
height: 100%;
outline: none;
border: none;
}
.search_container .search-input input:focus {
outline: none;
border: none;
border-color: none;
background-color: none;
box-shadow: none;
}
.header-small .search-date,
.header-small .add-guests,
.search_container-1 .search-date,
.search_container-1 .add-guests {
width: 110px;
height: 100%;
display: flex;
align-items: center;
}
.search-date .dropdown-center,
.add-guests .dropdown {
width: 100%;
height: 100%;
}
.header-small .search-date a,
.header-small .add-guests a,
.search_container-1 .search-date a,
.search_container-1 .add-guests a {
width: 100%;
height: 100%;
}
.search-input .where-text {
position: absolute;
left: 35px;
top: 13px;
font-weight: 700 !important;
}
.hero-search #calander-main {
left: 18% !important;
}
@media (max-width:767px) {
.search_container {
background-color: transparent;
border: none;
padding: 0;
height: auto;
}
.search_container-body {
flex-direction: column;
gap: 1rem;
}
.search_container-body .search-input,
.search_container-body .search-date,
.search_container-body .add-guests {
width: 100% !important;
background-color: white;
border-radius: 1rem 1rem 1rem 1rem !important;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.126);
padding: .5rem .2rem;
}
.search-date-button {
width: 100%;
}
.search-button-main {
width: 100% !important;
}
.search-button {
border-radius: 0 0 0 0;
width: 100%;
}
.search-guest-button {
border: none;
}
.search-date-button {
border: none;
}
.search-button {
border-radius: 1rem;
}
.search_container .search-input input {
padding: 24px 12px 0px 10px !important;
}
.search-input p {
position: absolute;
left: 14px !important;
line-height: normal;
top: 10px !important;
font-weight: 500;
}
}
/*---------------------------------
searchbar ends
---------------------------------*/
/*---------------------------------
modal starts
---------------------------------*/
.login-model .eligibleListContainer {
margin: 40px 64px;
}
@media ((max-width:1200px)) {
.login-model {
min-width: 90%;
}
}
@media ((max-width:1100px)) {
.login-model .eligibleListContainer {
margin: 0;
}
}
@media ((max-width:767px)) {
.login-model {
margin: 0;
}
.login-model .modal-body {
margin: 0;
min-height: 100vh;
}
.login-model .eligibleListContainer {
margin: 2rem 12px !important;
border-radius: .5rem;
}
.login-model #otpPageId {
/* margin-top: 0 !important;*/
}
}
/*---------------------------------
modal ends
---------------------------------*/
/*---------------------------------
custom dropdown starts
---------------------------------*/
.custom-dropdown-01 a {
display: flex;
width: 155px;
height: 64px;
padding: 12px;
align-items: center;
gap: 10px;
border-radius: 16px;
border: 1px solid rgba(234, 235, 237, 0.80);
color: var(--Grayscale-Gray-80, #4B4B4D);
font-size: 14px;
font-weight: 500;
line-height: 22px;
/* 157.143% */
letter-spacing: -0.12px;
}
.custom-dropdown-01 a:hover {
color: var(--Grayscale-Gray-80, #4B4B4D);
border: 1px solid rgba(234, 235, 237, 0.80);
}
.custom-dropdown-01 a:focus {
border-color: #0d9aff7b;
box-shadow: 0 0 0 0.2rem rgba(13, 154, 255, 0.295);
}
.custom-dropdown-01 ul {
width: 100%;
padding: 16px;
gap: 8px;
border-radius: 16px;
border: 1px solid #E7E7E7;
background: #FFF;
/* Elevation */
box-shadow: 0px 20px 70px 0px rgba(194, 194, 194, 0.10);
height: auto;
max-height: 300px;
overflow-y: auto;
}
.custom-dropdown-01 ul li {
display: flex;
width: 100%;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
border-bottom: 1px solid #E7E7E7;
background: #FFF;
color: #444;
font-size: 14px;
font-weight: 500;
line-height: 138%;
/* 19.32px */
letter-spacing: -0.28px;
}
.custom-dropdown-01 ul li:last-child {
border-bottom: none;
}
/*---------------------------------
custom dropdown ends
---------------------------------*/
/*---------------------------------
inputs start
---------------------------------*/
/* inputs with close icon */
.input-with-cls-icon {
position: relative;
}
.input-with-cls-icon input {
padding-right: 1.5rem !important;
}
.input-with-cls-icon .close-icon {
position: absolute;
top: 1rem;
right: 1rem;
background: white;
}
/* input number Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
padding: 12px 24px;
border-radius: 16px !important;
font-size: 14px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
}
/*---------------------------------
inputs ends
---------------------------------*/
/*---------------------------------
header starts
---------------------------------*/
.dashboard-nav {
display: flex;
gap: 10px;
align-items: center;
}
.bell-icon {
display: flex;
width: 40px;
height: 40px;
padding: 10px;
justify-content: center;
align-items: center;
border-radius: 20px;
border-radius: 20px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
cursor: pointer;
background: var(--Gray-04, #FCFCFC);
}
.bell-icon:hover,
.bell-icon.active {
background-color: #0D99FF;
border-color: #0D99FF;
}
.bell-icon:hover svg:nth-child(1),
.bell-icon.active svg:nth-child(1) {
display: none !important;
}
.bell-icon:hover svg:nth-child(2),
.bell-icon.active svg:nth-child(2) {
display: block !important;
}
.dashboard-nav .dashboard-nav-ul {
display: flex;
align-items: center;
margin: auto;
gap: 20px;
list-style: none;
color: var(--BLACK, #444);
text-align: center;
font-size: 14px;
font-weight: 500;
line-height: 18px;
/* 128.571% */
}
.dashboard-nav ul li a {
color: var(--BLACK, #444);
font-size: 14px;
font-weight: 500;
line-height: 18px;
/* 128.571% */
text-decoration: none;
transition: all .5s ease;
position: relative;
}
.dashboard-nav ul li a::after {
content: "";
display: none;
position: absolute;
height: 2px;
width: 0%;
margin: auto;
background-color: #0D99FF;
bottom: -5px;
left: 0;
right: 0;
border-radius: 10px;
}
.dashboard-nav ul li a.active::after {
display: block;
width: 80%;
}
.dashboard-nav ul li a.active {
color: var(--Primary-Primary-50, #0D99FF);
}
/*---------------------------------
header ends
---------------------------------*/
/*-------------------------------------------
hide and show mobile and desktop responsive starts
--------------------------------------------*/
.desktop-version-none {
display: none !important;
}
.d-n {
display: none;
}
.leftSideLoginEntry {
max-width: 471px;
margin-left: auto;
margin-right: auto;
}
@media ((max-width:1100px)) {
.eligibleListContainer {
margin: 0;
}
}
@media (max-width:767px) {
/* .main-container {
margin-top: 4rem;
}*/
.px-m-none {
padding: 0 !important;
}
.d-n {
display: block;
}
.m-n {
display: none;
}
.bookinh-main-p-none {
margin-top: 0 !important;
}
}
/*-------------------------------------------
hide and show mobile and desktop responsive ends
--------------------------------------------*/
/*--------------------------------------------
booking starts
--------------------------------------------*/
.payment-method > p {
color: var(--BLACK, #444);
font-size: 16px;
font-weight: 400;
line-height: 32px;
/* 200% */
letter-spacing: -0.12px;
}
.right-sent-offer {
border-radius: 16px;
width: 100%;
max-width: 400px;
height: fit-content;
}
.payment-method .payment-box {
display: flex;
width: 147.5px;
padding: 12px;
flex-direction: column;
justify-content: center;
gap: 12px;
border-radius: 10px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
color: var(--Grayscale-Gray-60ha, #ACACB0);
font-size: 14px;
font-weight: 400;
line-height: 21px;
/* 150% */
letter-spacing: -0.32px;
}
.payment-method .payment-box.active {
background: var(--Primary-Primary-08, #E9F4FC);
border-color: var(--Primary-Primary-08, #E9F4FC);
color: #2587CF;
}
.payment-method .payment-box.active svg {
filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1697%) hue-rotate(186deg) brightness(101%) contrast(107%);
}
.payment-method .payment-box > div {
display: flex;
justify-content: space-between;
}
.booking-message-box {
display: flex;
height: 211px;
padding: 24px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
background: #FFF;
}
.booking-message-box textarea {
border: none;
outline: none;
resize: none;
color: var(--Grayscale-Gray-50, #444);
font-size: 14px;
font-weight: 400;
line-height: 26px;
/* 185.714% */
letter-spacing: -0.078px;
flex-grow: 1;
width: 100%;
}
.ba-lines {
position: relative;
margin-bottom: 1rem !important;
}
.ba-lines1::after {
display: none;
}
.ba-lines1::before {
display: none;
}
.ba-lines2::before {
display: block !important;
}
.ba-lines::before {
content: " ";
background-color: #747474;
width: 1px;
height: 5px;
position: absolute;
bottom: -5px;
left: 8px;
}
.ba-lines:last-child::before {
display: none;
}
.ba-lines::after {
content: " ";
background-color: #747474;
width: 1px;
height: 5px;
position: absolute;
top: -5px;
left: 8px;
}
.avatar-2 {
display: flex;
gap: .5rem;
width: 100%;
padding-top: 1rem;
border-top: 1px solid var(--LIGHT-GRAY, #F1F1F1);
}
.avatar-2 div img {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 952380px;
background: url() lightgray 50% / cover no-repeat, #DDD;
}
.avatar-2 div p:first-child {
color: #444;
font-size: 14px;
font-weight: 500;
line-height: 18px;
/* 128.571% */
letter-spacing: -0.078px;
margin-bottom: 0;
}
.avatar-2 div p:last-child {
color: var(--GREY, #747474);
font-size: 12px;
font-weight: 400;
line-height: 18px;
/* 150% */
letter-spacing: -0.078px;
margin-bottom: 0;
}
.rules-to-agree {
color: var(--GREY, #747474);
font-size: 10px;
font-weight: 400;
line-height: 20px;
/* 200% */
letter-spacing: -0.078px;
}
.rules-to-agree p span {
color: var(--Primary-Primary-50, #0D99FF);
text-decoration-line: underline;
}
.rules-to-agree p span a {
color: var(--Primary-Primary-50, #0D99FF);
}
.flag-text > div:first-child {
width: 31.832px;
height: 32px;
flex-shrink: 0;
border-radius: 53.333px;
border: 1px solid #E7E7E7;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
}
.flag-text img {
width: 17.221px;
height: 12.441px;
}
/* payment method input */
.payment-method-main {
display: flex;
width: 668px;
max-width: 100%;
padding: 24px;
flex-direction: column;
align-items: flex-start;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
background: #FFF;
gap: 10px;
margin-top: 1rem;
}
.payment-method-main input,
.payment-method-main input::placeholder {
color: var(--Grayscale-Gray-60ha, #ACACB0);
font-size: 14px;
font-weight: 400;
line-height: 22px;
/* 157.143% */
letter-spacing: -0.12px;
}
.payment-method-main .form-select {
display: flex;
height: 64px;
padding: 12px 24px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
}
.payment-method-main .form-control {
display: flex;
height: 64px;
padding: 12px 24px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
background: var(--Gray-04, #FCFCFC);
}
.payment-method-main > p {
color: var(--BLACK, #444);
font-size: 14px;
font-weight: 400;
letter-spacing: -0.078px;
margin-top: .5rem;
margin-bottom: 0;
}
.payment-method-main > div {
display: flex;
height: 64px;
padding: 24px 12px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
background: var(--Gray-04, #FCFCFC);
}
.payment-method-main div input {
border: none;
outline: none;
width: 100%;
}
.payment-method-main div div {
width: 1px;
height: 100%;
background-color: #D9D9D9;
}
.button-05 {
padding: 16px 12px;
flex-shrink: 0;
border-radius: 16px;
border: none;
background: var(--Grayscale-Gray-16, #F6F6F6);
color: var(--Grayscale-Gray-100, #1E1E20);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.32px;
text-decoration: none;
cursor: pointer;
margin-top: 1rem;
}
.flex-c-1 .svg-1 {
display: flex;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
border-radius: 80px;
border: 1px solid #e7e7e7;
}
.flex-c-1 {
display: flex;
align-items: center;
gap: 10px;
}
.margint-5 {
margin-top: 5rem;
}
@media (max-width:767px) {
.margint-5 {
margin-top: 0 !important;
}
}
/*------------------------------------------------
booking ends
------------------------------------------------*/
/* inputs */
.form-range01 {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #dddddd;
position: relative;
margin: 0;
padding: 0;
border-radius: 4px;
}
.form-range01::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
background: #0D99FF;
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 2;
}
.form-range01::-moz-range-thumb {
width: 24px;
height: 24px;
background: #0D99FF;
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 2;
}
.form-range01::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
background: #0D99FF;
border-radius: 50%;
cursor: pointer;
border: none;
}
.form-range01::-moz-range-thumb {
width: 24px;
height: 24px;
background: #0D99FF;
border-radius: 50%;
cursor: pointer;
border: none;
}
.form-range01::-ms-thumb {
width: 24px;
height: 24px;
background: #0D99FF;
border-radius: 50%;
cursor: pointer;
border: none;
}
/*--------------------------------
Home page top label starts
--------------------------------*/
.Home_page_top_label {
width: 100%;
top: 66.5px1;
left: 3px;
padding: 10px 0%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: #ffffff;
border-bottom: 1px solid #E7E7E7;
}
.Home_page_top_label p {
font-size: 14px;
font-weight: 400;
line-height: 18.23px;
letter-spacing: -0.1px;
text-align: center;
margin-bottom: 0;
}
.Home_page_top_label p a {
font-size: 14px;
font-weight: 500;
line-height: 18.23px;
letter-spacing: -0.1px;
text-align: center;
color: #0D99FF;
text-decoration: none;
}
.header-section {
transition: all 0.3s ease;
}
.header-section.bg-white {
position: fixed !important;
}
.home-header {
height: 65px;
}
/*--------------------------------
Home page top label starts ends
--------------------------------*/
/*------------------------------------------
custom inputs styling
------------------------------------------*/
.custom-dropdown-01 a.show {
border-color: #0D99FF;
}
.form-control:focus, .form-select:focus, .btn-close:focus, .form-check-input:focus {
border-color: #0D99FF !important;
box-shadow: none !important;
outline: none !important;
}
#otpPageId input:focus, .loginpage input:focus {
border-color: #0D99FF !important;
box-shadow: none !important;
outline: none !important;
}
/*------------------------------------------
donation
------------------------------------------*/
.donation-main {
margin-top: 80px;
}
@media (max-width:767px) {
.donation-main {
margin-top: 0px;
}
}
.Veteran-Cause > div {
width: 20%;
padding: 0;
cursor: pointer;
}
.blog-about-img > div {
width: 25%;
padding: 0;
cursor: pointer;
}
.Veteran-Cause img {
object-fit: contain;
}
@media (max-width:767px) {
.blog-about-img > div {
width: 50%;
}
}
.Veteran-Cause > div > div {
width: 100%;
max-width: 219px;
aspect-ratio: 219 / 111;
padding: 0px;
display: flex;
justify-content: center;
margin: auto;
}
/*offer css*/
.divider {
background-color: #E7E7E7;
height: 1px;
width: 100%;
margin: 1rem 0;
}
/* Tooltip container */
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Tooltip text */
.tooltip-container .tooltip-text {
visibility: hidden;
width: 220px;
font-size: 14px;
background-color: #ffffff;
color: #444444;
padding: 8px;
border-radius: 6px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
position: absolute;
z-index: 1;
bottom: 125%; /* Position above the element */
left: 50%;
margin-left: -110px; /* Center the tooltip */
opacity: 0;
transition: opacity 0.3s;
z-index: 10;
}
/* Tooltip arrow */
.tooltip-container .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
}
/* Show the tooltip text on hover */
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.price-list > div.active p {
color: #0D99FF;
}
.Pricing01 > div.active {
color: #0D99FF;
}
.Pricing01 > div.active svg path {
stroke: #0D99FF;
}
.form-check-input:checked {
background-color: #0D99FF;
border-color: #0D99FF;
}
@media (max-width:767px) {
.trip-list {
width: 100%;
}
}
.m-autocd-col-flex {
width: 100%;
}
.No-favorites {
flex-grow: 1;
min-height: 60vh;
width: 100%;
max-width: 100%;
}
.No-favorites > div {
display: flex;
align-items: center;
justify-content: center;
}
.No-favorites > div {
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
text-align: center;
max-width: 327px;
margin: auto;
margin-top: 5%;
}
.No-favorites p {
font-size: 14px;
font-weight: 400;
line-height: 18px;
text-align: center;
color: #ACACB0;
}
.No-favorites button {
top: 551.02px;
left: 654px;
padding: 16px 24px 16px 24px;
gap: 2px;
border-radius: 16px;
border: 1px;
border: 1px solid #E7E7E7;
background: #FCFCFC;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.01em;
color: #000;
}
/* Profile mobile */
.admin-detains,
.Account-info > div,
.Support-info > div,
.Legal-info > div,
.payments-and-payout > div > div {
cursor: pointer;
border-bottom: 1px solid #F1F1F1;
}
.Admin-img-div {
position: relative;
}
.Admin-img {
width: 100%;
background: #747474;
}
.Admin-img img {
width: 100%;
height: 100%;
}
.admin-buttons {
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
padding: .5rem;
}
.admin-buttons button {
height: 48px;
padding: 0px 24px 0px 24px;
gap: 24px;
border-radius: 16px;
border: 1px;
font-family: DM Sans;
font-size: 16px;
font-weight: 500;
line-height: 20.83px;
text-align: left;
}
.Admin-info {
font-size: 16px;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.07800000160932541px;
text-align: left;
color: #444444;
display: flex;
flex-direction: column;
gap: 1rem;
}
.Admin-info input {
height: 54px;
padding: 24px;
gap: 10px;
border-radius: 16px;
border: 1px solid #EAEBEDCC;
font-size: 14px;
font-weight: 400;
line-height: 33.6px;
text-align: left;
color: #444444;
}
.about-me-div > p {
font-size: 16px;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.07800000160932541px;
text-align: left;
color: #444444;
}
.about-me-div > div {
height: 334px;
padding: 24px;
gap: 10px;
border-radius: 16px;
border: 1px;
border: 1px solid #EAEBEDCC;
font-size: 14px;
font-weight: 400;
line-height: 26px;
letter-spacing: -0.07800000160932541px;
text-align: left;
color: #747474;
}
.user-inputs > div {
border-bottom: 1px solid #F1F1F1;
}
/* help static pages css */
.stc-ul {
padding: auto 2%;
}
.stc-ul ul {
color: var(--GREY, #747474);
font-size: 16px;
font-weight: 400;
line-height: 26px;
letter-spacing: -0.078px;
}
.VETERAN-FOUNDED {
width: 271px;
height: 34px;
padding: 8px 12px 8px 12px;
border-radius: 13px;
border: 1px solid #E7E7E7;
background-color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 18px;
letter-spacing: -0.07800000160932541px;
text-align: center;
color: #000000;
}
@media (max-width:767px) {
.VETERAN-FOUNDED {
color: #000000 !important;
}
}
.pending-payment-box-main {
flex-wrap: wrap;
justify-content: start;
align-items: start;
gap: 2rem;
}
.pending-payment-box {
min-width: 293px;
width: 100%;
border-radius: 10px;
border: 1px solid #EAEBED;
font-size: 16px;
font-weight: 500;
line-height: 21px;
letter-spacing: -0.3199999928474426px;
}
.help-mob-btn {
padding: 12px 24px;
border-radius: 32px;
border: 1px solid #E7E7E7;
background-color: #ffffff;
cursor: pointer;
}
/*------------------------------------
blog starts
------------------------------------*/
.blog-nav .nav-link {
border-radius: 0px;
background-color: white !important;
color: var(--GREY, #747474) !important;
font-size: 14px;
font-weight: 500;
line-height: 18px;
/* 128.571% */
position: relative;
}
.blog-nav .nav-link.active {
color: #0D99FF;
}
.blog-nav .nav-link::after {
content: "";
width: 0%;
height: 2px;
background-color: #0D99FF;
border-radius: 1rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all .3s ease;
margin: auto;
}
.blog-nav .nav-link.active::after {
width: 80%;
}
.bitton-03 {
display: flex;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 16px;
border: 1px solid var(--Grayscale-Gray-24, rgba(234, 235, 237, 0.80));
background: #FFF;
color: var(--BLACK, #444);
font-size: 14px;
font-weight: 500;
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
@media (max-width:576px) {
.blog-post .blog-post-avatar {
display: none !important;
}
.blog-post .blog-post-body {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.blog-post .blog-post-body div:nth-child(1) {
width: 40% !important;
}
.blog-post .blog-post-body div:nth-child(2) {
width: 60%;
}
.blog-post .blog-post-titel {
flex-direction: column-reverse !important;
justify-content: start;
}
.m-n {
display: none;
}
.hanburg-menu {
display: block !important;
}
.pd-mobile-none {
padding: 0 0 0 0 !important;
}
.m-pt-none {
padding-top: 0 !important;
}
}
.back-home-btn {
font-size: 16px;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.10000000149011612px;
text-align: center;
text-decoration: none;
color: #0D99FF;
}
.single-blog-img {
width: 100%;
aspect-ratio: 16/8;
overflow: hidden;
}
.single-blog-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
overflow: hidden;
}
.author-sectino {
max-width: 838px;
width: 100%;
padding: 24px;
gap: 10px;
border-radius: 16px;
border: 1px;
opacity: 0px;
background: #FDFDFD;
border: 1px solid #EAEBEDCC;
}
.author-sectino .avatar {
width: 100px;
height: 100px;
gap: 0px;
border-radius: 999999px;
border: 1px;
opacity: 0px;
}
.font-001 {
color: var(--GREY, #747474);
font-size: 14px;
font-weight: 400;
line-height: normal;
letter-spacing: -0.078px;
}
.btn-arrow-none:after {
display: none !important;
}
.dropdown-01 {
width: auto;
padding: 16px;
gap: 8px;
border-radius: 16px;
border: 1px solid #EAEBEDCC;
box-shadow: 0px 20px 70px 0px #C2C2C21A;
font-size: 14px;
font-weight: 500;
line-height: 19.32px;
letter-spacing: -0.02em;
color: #444444;
}
.dropdown-01 li {
width: 195px;
height: 40px;
padding: 12px;
border-radius: 16px;
}
/*
.checkin::after {
content: "";
background: #80808091;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
clip-path: polygon(0 0, 0% 100%, 100% 0);
border-radius: 100%;
}
.checkout::after {
content: "";
background: #80808091;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
clip-path: polygon(0 0, 0% 100%, 100% 0);
border-radius: 100%;
rotate: 180deg;
}
*/
.custom-modal-carousel-inner {
margin: auto;
width: 80%;
}
@media (max-width:767px) {
.custom-modal-carousel-inner {
width: 100%;
}
.back-border-none {
border-color: transparent !important;
}
}
.custom-modal-carousel-inner img {
object-fit: contain !important;
}
.badge-icon-active {
position: relative
}
.badge-icon-active::after {
content: "";
position: absolute;
top: 3px;
right: -10px;
height: 7px;
width: 7px;
border-radius: 6px;
background-color: #0D99FF;
}
.mt-custom01 {
margin-top: 5rem;
}
@media (max-width:767px) {
.mt-custom01 {
margin-top: 0rem;
}
}
.font011 {
font-size: 16px;
font-weight: 500;
line-height: 22px;
}
.font012 {
font-size: 14px;
font-weight: 400;
line-height: 26px;
letter-spacing: -0.07800000160932541px;
}
/* pagination*/
.search-listing-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin: 1rem auto;
}
@media (max-width:767px) {
.search-listing-pagination {
gap: 0rem;
}
}
.paginatonblock .nextpage {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.search-listing-pagination button {
width: 32px;
height: 32px;
padding: 6px;
gap: 0px;
border-radius: 266.67px;
background: #FFFFFF;
border: 1px solid #E7E7E7;
font-size: 14px;
font-weight: 400;
line-height: 18.23px;
letter-spacing: -0.02em;
color: #1E1E20;
}
.search-listing-pagination button.active {
background: #0D99FF;
color: #ffffff;
border-color: #0D99FF;
}
.message-host-button {
color: #ffffff;
}
.message-host-button:hover {
background: #0D99FF !important;
}
.p-2rem {
padding: 0 2rem;
}
@media (max-width:767px) {
.p-2rem {
padding: 1rem;
}
.hero-search {
padding-top: 0 !important;
}
}
.url-copied {
display: flex;
position: absolute;
left: 0;
right: 0;
align-items: center;
gap: 8px;
width: fit-content;
height: 48px;
padding: 12px;
border-radius: 16px;
background-color: #FFFFFF;
border: 1px solid #D9D9D9;
box-shadow: 2px 4px 20px 0px #0000001A;
font-size: 18px;
font-weight: 500;
line-height: 25.2px;
letter-spacing: -0.02em;
color: #4B4B4D;
margin: 1rem auto .5rem auto;
}
/*button*/
.show--list-btn,
.show--map-btn {
position: fixed;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
width: 134px;
height: 44px;
padding: 16px;
border-radius: 24px;
background: #0D99FF;
border: none;
outline: none;
z-index: 99;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
line-height: 18.23px;
letter-spacing: -0.02em;
color: #ffffff;
transition: all 0.5s ease-out;
}
.show--list-btn {
bottom: 1.5rem;
}
.show--map-btn {
bottom: 4.5rem;
}
.mblbtnprimary,
.Contact-us {
display: flex;
padding: 16px 24px;
flex-direction: column;
align-items: center;
gap: 10px;
border-radius: 16px;
border: 1px solid #E7E7E7;
background: #FAFAFA;
color: rgba(20, 20, 20, 0.88);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.28px;
}
@media (max-width: 767px) {
.mblbtnprimary,
.Contact-us {
padding: 5px 10px;
border-radius: 10px;
}
.canijoin,
.WhyCrewdogs,
.review-container,
.listing-container {
padding: 0 6.5% !important;
}
#moreFilterPopup .modal-footer {
background-color: white;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: .5rem;
z-index: 1111;
}
}
.empty-listing {
position: relative;
border-radius: 16px;
background: #F6F6F6;
width: 100%;
aspect-ratio: 20 / 19;
}
.empty-listing button {
position: absolute;
bottom: 1rem;
left: 1rem;
}
/* header */
@media ( min-width:992px) {
/* .search_container-static .search_container-1 {
position: relative !important;
top: unset;
left: unset;
transform: unset !important;
width: 100%;
z-index: 100;
border-radius: 5rem;
padding: 0;
height: 50px;
max-width: 665px;
min-width: 400px;
margin:unset;
}*/
}
@media ( min-width:768px) {
/* .search_container-static .search_container-1 {
position: relative !important;
top: unset;
left: unset;
transform: unset !important;
width: 100%;
z-index: 100;
border-radius: 5rem;
padding: 0;
height: 50px;
max-width: 665px;
min-width: 400px;
margin: unset;
}*/
}
#search_input::placeholder {
color: var(--BLACK, #444) !important;
}
@media (min-width: 1200px) {
.logo-small {
display: none !important;
}
.floatbtn {
display: none !important;
}
}
@media (min-width: 1200px) {
.logo-full {
display: block !important;
}
}
.form-switch .form-check-input {
height: 25px !important;
width: 45px !important;
}
.pricefooter {
padding-bottom: 0.75rem !important;
padding-top: 0.75rem !important;
}
.pricefooter .btn-lg {
--bs-btn-padding-y: 0.75rem;
--bs-btn-padding-x: 1rem;
}
@media (max-width:767px) {
.listing-container {
padding: 7.5%;
margin: 0;
max-width: 100% !important;
}
.book-main .cd-col {
padding: 0;
}
.btn4 {
padding: 16px 24px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.28px;
width: 50% !important;
flex-shrink: unset !important;
}
}
.search_container-1 {
width: 665px !important;
}
.mob-search-input input {
height: 56px;
padding: 0.375rem 32px;
}
.mob-search-input .search-close-icon {
right: 1rem;
top: .7rem;
}
/*-----------------------------------
Search popup css starts
-----------------------------------*/
/*search*/
.search_popup_small {
display: flex;
width: 449px;
min-width: fit-content;
max-width: 591px;
height: 50px;
border-radius: 5rem;
background: #0D99FF;
overflow: hidden;
border: 1px solid #EAEBEDCC;
background: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 20.83px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #141414E1;
cursor: pointer;
transition: top 0.5s ease, width 0.5s ease;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.search_popup_small > div:nth-child(1) {
width: auto;
min-width: 144px;
max-width: 200px;
height: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
padding: .5rem;
border-right: 1px solid #EAEBEDCC;
}
.search_popup_small > div:nth-child(1) p {
white-space: nowrap;
}
.search_popup_small > div:nth-child(2) {
width: 25%;
min-width: 144px;
height: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
border-right: 1px solid #EAEBEDCC;
}
.search_popup_small > div:nth-child(3) {
width: 25%;
min-width: 144px;
height: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
border-right: 1px solid #EAEBEDCC;
}
.search_popup_small > div:nth-child(4) p {
color: #ffffff;
}
.search_popup_small > div:nth-child(4) {
width: 25%;
min-width: 106px;
height: 100%;
padding: 0;
background: #0D99FF;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
}
/*popup css*/
.search_popup-bg {
width: 100%;
height: 70px;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
right: 0;
border-top: 1px solid #EAEBEDCC;
z-index: -1;
transition: top 0.3s ease;
}
.search_popup-bg.active {
top: 65px;
z-index: 1;
}
.search_popup-backdrop.active {
display: block !important;
}
.search_popup_main.active {
z-index: 2222 !important;
}
.search_popup_main.active .search_popup_small {
top: 100px;
width: 665px;
opacity: 0;
}
/*main search*/
.search_popup_main .search_container {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: -10;
transition: top 0.5s ease, width 0.5s ease;
width: 500px !important;
opacity: 0;
}
.search_popup_main.active .search_container .search-input {
width: 350px !important;
}
.search_popup_main.active .search_container {
top: 75px;
z-index: 2;
width: 665px !important;
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
@media (min-width: 1199px) {
.search_popup_small {
left: 50%;
transform: translate(-50%, -50%);
}
}
/*-----------------------------------
Search popup css ends
-----------------------------------*/
@media (min-width:768px) {
.w-md-100 {
width: 100% !important;
}
}
/* trip sidebarr css*/
.custom_offcanvas {
position: absolute;
top: 0;
right: 0;
max-width: 100%;
margin-top: 64px;
height: calc(100vh - 64px);
overflow-y: scroll;
overflow-x: hidden;
}
@media (max-width:768px) {
.custom_offcanvas {
top: -64px;
}
.custom_offcanvas .sidebar {
display: block;
}
}
.notify_bubble {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -5px;
right: -5px;
z-index: 10;
width: 21px;
height: 21px;
border-radius: 50%;
background: #0D99FF;
border: 2px solid #ffffff;
}
.notify_bubble_small {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0px;
right: 3px;
z-index: 10;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0D99FF;
border: 2px solid #ffffff;
}
.bgallery-img {
overflow: hidden; /* General approach to hide scrollbar */
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.bgallery-img::-webkit-scrollbar {
display: none; /* WebKit browsers (e.g., Chrome, Safari) */
}
/* review css */
.Review-secton {
display: flex;
flex-direction: column;
gap: 1rem;
}
.Review-secton button {
width: 100%;
height: 52px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #747474;
font-size: 14px;
font-weight: 500;
line-height: 36px;
text-align: left;
color: #444444;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.Review-secton button.active {
color: #ffffff;
background: #0D99FF !important;
border-color: #0D99FF;
}
.Review-secton button.active svg path {
fill: #ffffff !important;
}
.Review-secton textarea {
width: 100%;
height: 141px;
padding: 24px 16px 24px 16px;
border-radius: 10px;
border: 1px solid #E7E7E7;
color: var(--Grayscale-Gray-50, #444);
font-size: 16px;
font-weight: 400;
line-height: 21px;
letter-spacing: -0.3199999928474426px;
}
/* Skeleton css starts */
@keyframes shine {
0% {
background-position: 150% 0;
}
100% {
background-position: -150% 0;
}
}
.skeleton-loader {
height: 100%;
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: space-between;
padding-bottom: 1.5rem;
}
.skeleton {
position: relative;
overflow: hidden;
background-color: #f4f4f4; /* Light neutral tone */
border-radius: 0.5rem;
}
.skeleton::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient( 90deg, rgba(244, 244, 244, 1) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(244, 244, 244, 1) 100% );
background-size: 200% 100%;
animation: shine 1.2s ease-in-out infinite;
}
.skeleton-img {
width: 100%;
aspect-ratio: 16 / 13;
border-radius: 1rem;
}
.skeleton-text-small {
height: 20px;
width: 50%;
}
.skeleton-text-medium {
height: 20px;
width: 20%;
}
.skeleton-text-large {
height: 50px;
width: 100%;
}
.skeleton-text-short {
height: 30px;
width: 60%;
}
/* Skeleton css ends */
.hover-none:hover {
background-color: #ffffff !important;
}
.ui-menu-item {
cursor: pointer
}
.ui-state-active {
background-color: #f8f9fa;
color: inherit !important;
}
.ui-menu-item-wrapper {
padding: 0.5rem 0.5rem;
}
.Our-software-partners div {
width: 25%;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.Our-software-partners div {
width: 50%;
}
}
/*----------------------
Amenities-list
----------------------*/
.Amenities-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0;
}
.Amenities-list li {
display: flex;
gap: 4px;
font-size: 16px;
text-align: start;
color: #4B4B4D;
font-weight: 400;
}
.Amenities-list li span {
font-size: 12px;
}
.bannercard {
width: 100%;
max-width: 900px;
min-height: 377px;
background-color: white;
border-radius: 24px;
padding: 24px 36px;
border-width: 1px;
border: 1px solid #EAEBEDCC;
box-shadow: 8px 8px 35px 0px #0000004D;
position: absolute;
bottom: -70px;
right: 0;
}
@media (max-width: 992px) {
.bannercard {
position: relative;
}
}
.thanksservicebanner {
width: 100%;
max-width: 900px;
min-height: 377px;
height: fit-content;
overflow: visible;
background-color: white;
border-radius: 24px;
padding: 12px;
border-width: 1px;
border: 1px solid #EAEBEDCC;
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 555px;
}
@media (max-width: 992px) {
.thanksservicebanner {
position: relative;
transform: unset;
margin: auto;
margin-top: 2rem;
border: none;
max-width: 100%;
}
.thankyoupagebannerimg {
min-height: unset !important;
}
.thankyoupagebannerimg img {
width: 100% !important;
}
}
.green-label {
height: 23px;
padding: 2px 8px;
background: #DAF3E5;
border-radius: 7px;
justify-content: center;
align-items: center;
gap: 10px;
display: inline-flex;
font-size: 12px;
font-weight: 500;
line-height: 20px;
word-wrap: break-word;
}