* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

/* width */

::-webkit-scrollbar {

  width: 1px;

  height: 1px;

}



/* Track */

::-webkit-scrollbar-track {

  background: #fff;

}



/* Handle */

::-webkit-scrollbar-thumb {

  background: #fff;

}

html,

body {

  font-family: "Work Sans", sans-serif;

  font-size: 16px;

  line-height: 1.6;

}



:root {

  --color-primary: #e5a000;

  --color-gradient: linear-gradient(

      90deg,

      rgba(230, 30, 77, 0) 0%,

      rgba(227, 28, 95, 0.5) 35.42%,

      #d70466 100%

    ),

    #ff385c;

  --color-black: #000;

  --color-white: #fff;

  --color-pregrapgh: #5d5757;

  --color-gray: #6b7280;

}



input:focus,

textarea:focus,

select:focus {

  outline: none !important;

  border-color: var(--color-primary) !important;

  box-shadow: none !important;

}

.form-check-input:checked {

  background-color: var(--color-primary);

  border-color: var(--color-primary);

}

h1,

h2,

h3,

h4,

h5,

h6,

p {

  margin: 0;

}



a {

  text-decoration: none;

  color: inherit;

}



ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



img {

  max-width: 100%;

  height: auto;

}



input::placeholder {

  color: #b1b1b1 !important;

  opacity: 1; /* Firefox */

}



input::-ms-input-placeholder {

  /* Edge 12 -18 */

  color: #b1b1b1 !important;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-ExtraBold.woff2") format("woff2"),

    url("../fonts/WorkSans-ExtraBold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-BoldItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-BoldItalic.woff") format("woff");

  font-weight: bold;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-ExtraLightItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-ExtraLightItalic.woff") format("woff");

  font-weight: 200;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-ExtraBoldItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-ExtraBoldItalic.woff") format("woff");

  font-weight: bold;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Italic.woff2") format("woff2"),

    url("../fonts/WorkSans-Italic.woff") format("woff");

  font-weight: normal;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-ExtraLight.woff2") format("woff2"),

    url("../fonts/WorkSans-ExtraLight.woff") format("woff");

  font-weight: 200;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Regular.woff2") format("woff2"),

    url("../fonts/WorkSans-Regular.woff") format("woff");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Medium.woff2") format("woff2"),

    url("../fonts/WorkSans-Medium.woff") format("woff");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-LightItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-LightItalic.woff") format("woff");

  font-weight: 300;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-SemiBold.woff2") format("woff2"),

    url("../fonts/WorkSans-SemiBold.woff") format("woff");

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Light.woff2") format("woff2"),

    url("../fonts/WorkSans-Light.woff") format("woff");

  font-weight: 300;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-MediumItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-MediumItalic.woff") format("woff");

  font-weight: 500;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Thin.woff2") format("woff2"),

    url("../fonts/WorkSans-Thin.woff") format("woff");

  font-weight: 100;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Bold.woff2") format("woff2"),

    url("../fonts/WorkSans-Bold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-BlackItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-BlackItalic.woff") format("woff");

  font-weight: 900;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-Black.woff2") format("woff2"),

    url("../fonts/WorkSans-Black.woff") format("woff");

  font-weight: 900;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-ThinItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-ThinItalic.woff") format("woff");

  font-weight: 100;

  font-style: italic;

  font-display: swap;

}



@font-face {

  font-family: "Work Sans";

  src: url("../fonts/WorkSans-SemiBoldItalic.woff2") format("woff2"),

    url("../fonts/WorkSans-SemiBoldItalic.woff") format("woff");

  font-weight: 600;

  font-style: italic;

  font-display: swap;

}



/* Abhaya Libre font */

@font-face {

  font-family: "Abhaya Libre";

  src: url("../fonts/AbhayaLibre-ExtraBold.woff2") format("woff2"),

    url("../fonts/AbhayaLibre-ExtraBold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Abhaya Libre";

  src: url("../fonts/AbhayaLibre-Medium.woff2") format("woff2"),

    url("../fonts/AbhayaLibre-Medium.woff") format("woff");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Abhaya Libre";

  src: url("../fonts/AbhayaLibre-Regular.woff2") format("woff2"),

    url("../fonts/AbhayaLibre-Regular.woff") format("woff");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Abhaya Libre";

  src: url("../fonts/AbhayaLibre-Bold.woff2") format("woff2"),

    url("../fonts/AbhayaLibre-Bold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Abhaya Libre";

  src: url("../fonts/AbhayaLibre-SemiBold.woff2") format("woff2"),

    url("../fonts/AbhayaLibre-SemiBold.woff") format("woff");

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}



.login_signup_sec {

  background-image: url("../images/login-bg.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  padding-bottom: 30px;

  overflow-y: auto;

}



.login_signup_sec .logo_login {

  padding: 50px 100px;

}



.login_signup_sec .logo_login h1 {

  font-family: "Abhaya Libre";

  font-weight: 700;

  font-size: 50px;

  line-height: 59px;

  color: var(--color-white);

}



.btn-primary {

  background-color: var(--color-primary);

  border: none;

  border-radius: 8px;

  padding: 10px 20px;

  font-size: 16px;

  font-weight: 500;

  color: var(--color-white);

}



.login_signup_sec .login_signup_form {

  width: 100%;

  max-width: 568px;

  margin: 0 auto;

  background-color: var(--color-white);

  border-radius: 8px;

}

.login_signup_sec .login_signup_form .signin_heading {

  padding: 22px 15px 22px 15px;

  border-bottom: 1px solid #ebebeb;

  position: relative;

}

.login_signup_sec .login_signup_form .signin_heading .close-btn {

  background: transparent;

  border: 0;

  position: absolute;

  left: 20px;

  top: 20px;

}

.login_signup_sec .login_signup_form .signin_heading h4 {

  font-weight: 400;

  font-size: 20px;

  line-height: 20px;

  text-align: center;

  color: #353232;

}

.login_signup_sec .login_signup_form .main_form_inner {

  padding: 10px 24px 33px 24px;

}

.login_signup_sec .login_signup_form .main_form_inner .form-group .input-group {

  position: relative;

}

.login_signup_sec

  .login_signup_form

  .main_form_inner

  .form-group

  .input-group

  .email-icon,

.password-icon,

.username-icon {

  position: absolute;

  left: 15px;

  top: 16px;

  z-index: 10;

}

.login_signup_sec

  .login_signup_form

  .main_form_inner

  .form-group

  .input-group

  .eye-icon {

  position: absolute;

  right: 15px;

  top: 12px;

  z-index: 10;

  cursor: pointer;

  background-color: transparent;

  border: 0;

}

.login_signup_sec

  .login_signup_form

  .main_form_inner

  .form-group

  .input-group

  .form-control {

  padding: 12px 30px 12px 40px;

  border: 1px solid #d7d7d7;

  border-radius: 10px !important;

  font-family: "Work Sans", sans-serif;

  font-size: 16px;

}

.login_signup_sec .login_signup_form .main_form_inner .form-group .form-label {

  font-weight: 400;

  font-size: 16px;

  line-height: 19px;

  color: #353232;

  margin-bottom: 9px;

}

.login_signup_sec .login_signup_form .main_form_inner .form-group {

  margin-top: 30px;

}

.login_signup_sec .login_signup_form .forgot_password {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin: 14px 0 0px 0;

}

.login_signup_sec .login_signup_form .forgot_password .check-group {

  display: flex;

  align-items: center;

  gap: 8px;

}

.login_signup_sec

  .login_signup_form

  .forgot_password

  .check-group

  .form-check-label {

  font-size: 15px;

  color: var(--color-black);

}

.login_signup_sec .login_signup_form .forgot_password .forgot {

  font-size: 15px;

  color: #4d4d4d;

}

.login_signup_sec .login_signup_form .btn-primary {

  margin-top: 30px;

  width: 100%;

  padding: 14px;

  font-weight: 400;

  background: var(--color-primary);

  transition: 0.3s;

}

.login_signup_sec .login_signup_form .btn-primary:hover {

  background: #c98d02;

}

.login_signup_sec .login_signup_form .divider {

  display: flex;

  align-items: center;

  text-align: center;

  color: #666;

  margin: 20px 0;

}

.login_signup_sec .login_signup_form .divider::before,

.divider::after {

  content: "";

  flex: 1;

  border-bottom: 1px solid #dddddd;

}



.login_signup_sec .login_signup_form .divider span {

  padding: 0 16px;

  font-size: 16px;

  color: var(--color-black);

}

.login_signup_sec .login_signup_form .other_login {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 28px;

}

.login_signup_sec .login_signup_form .other_login .other_login_btn {

  background: transparent;

  border: 0;

}

.main-header {

  padding: 24px 24px;

  background-color: var(--color-white);

  position: sticky;

  z-index: 10;

  top: 0;

}

.main-header .header-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.main-header .header-row .logo img {

  width: 100%;

  max-width: 102px;

}

.main-header .header-row .search-bar {

  position: relative;

}

.main-header .header-row .search-bar .form-control {

  border-radius: 50px;

  padding: 8px 38px 8px 12px;

  width: 100%;

  min-width: 334px;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  box-shadow: 0px 2px 4px rgba(31, 41, 55, 0.06),

    0px 4px 6px rgba(31, 41, 55, 0.1);

}

.main-header .header-row .search-bar .search-icon {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 32px;

  height: 32px;

  background: #e6a000;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 50%;

  cursor: pointer;

  border: 0;

  position: absolute;

  right: 6px;

  /* top: 5px; */

  z-index: 10;

}

.main-header .header-row .menu-header .menu-profile {

  display: flex;

  justify-content: center;

  align-items: center;

  border: 1px solid #e5e7eb;

  border-radius: 50px;

  padding: 8px 8px 8px 16px;

  gap: 8px;

}

.main-header .header-row .menu-header .menu-profile img {

  width: 32px;

  height: 32px;

  border-radius: 50%;

}

.main-header .header-row .menu-header {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 60px;

}

.main-header .header-row .menu-header .wishlist-title {

  font-weight: 500;

  font-size: 14px;

  line-height: 20px;

  color: var(--color-black);

}

.main-header .header-row .menu-header .wishlist-mobile-icon {

  display: none;

}

.main-header .header-row .menu-header .humburger {

  cursor: pointer;

  border: 0;

  background-color: transparent;

}

.main-header .header-row .menu-header .dropdown-menu {

  background: var(--color-white);

  border: 1px solid rgba(230, 230, 230, 0.7);

  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.05);

  border-radius: 10px;

}

/* .main-header .header-row .menu-header .dropdown-menu.show {

  transform: translate(1616px, 77px) !important;

} */

.main-header .header-row .menu-header .dropdown-menu .dropdown-item {

  font-size: 16px;

  color: #112211;

}



.filter-main-sec .main-filter-row {

  display: flex;

  align-items: center;

  justify-content: start;

  padding-bottom: 36px;

  width: 100%;

  max-width: 1600px;

  margin: 0 auto;

  overflow-x: auto;

}

.filter-main-sec .main-filter-row .left-filter-col,

.right-filter-col {

  display: flex;

  align-items: center;

}

.filter-main-sec .main-filter-row .left-filter-col .filter-btn.active {

  border: 1px solid var(--color-primary);

  color: var(--color-white);

  background-color: var(--color-primary);

}



.filter-main-sec .main-filter-row .left-filter-col .filter-btn {

  color: #374151;

  font-size: 14px;

  font-weight: 400;

  padding: 8px 16px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #d9d9d9;

  border: 1px solid #d9d9d9;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 5px;

  gap: 8px;

  transition: 0.3s;

  white-space: nowrap;

}

.filter-main-sec .main-filter-row .left-filter-col .filter-btn:hover {

  color: var(--color-white);

  background-color: var(--color-primary);

}

.filter-main-sec .main-filter-row .left-filter-col .filter-btn:first-child {

  background-color: var(--color-primary);

  border-color: var(--color-primary);

}



.filter-main-sec .main-filter-row .left-filter-col {

  gap: 12px;

  border-right: 1px solid #e5e7eb;

  padding-right: 16px;

}

.filter-main-sec .main-filter-row .right-filter-col {

  gap: 12px;

  padding-left: 16px;

}

.filter-main-sec .main-filter-row .filter-select-child .form-select {

  padding-top: 8px;

  padding-bottom: 8px;

  border: 1px solid #e5e7eb;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 5px;

  white-space: nowrap;

  width: 100%;

  min-width: 200px;

}

.dropdown-item.active,

.dropdown-item:active {

  color: var(--color-white) !important;

  background-color: var(--color-primary) !important;

}

.filter-main-sec .hotels-inner-main {

  display: flex;

  align-items: center;

  gap: 24px;

  justify-content: center;

  max-width: 1600px;

  margin: 0 auto;

  overflow-x: auto;

  padding-bottom: 10px;

}

.filter-main-sec .hotels-inner-main .btn-hotel {

  padding: 0;

  width: 64px;

  height: 64px;

  flex: 0 0 64px;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  border-radius: 15px;

}

.filter-main-sec .hotels-inner-main .btn-hotel img {

  width: 100%;

  height: 100%;

  border-radius: 15px;

}

.filter-main-sec .hotels-inner-main .selected-hotel {

  border: 3px solid var(--color-primary);

}

.filter-main-sec .container_t {

  border-top: 1px solid #f3f4f6;

  padding-top: 12px;

}

.hotel-card-sec .hotel-card-row {

  /* border: 1px solid #e5e7eb; */

  border-bottom: 0;

  /* margin: 20px 0 50px 0; */

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));

  max-width: 1600px;

  gap: 20px;

  margin: 10px auto 50px;

}

.hotel-card-sec .hotel-card-row .hotel-card {

  padding: 15px 20px;

  /* overflow-y: auto; */

  scrollbar-width: none;

  -ms-overflow-style: none;

  border: 1px solid #e5e7eb;

  border-radius: 6px;

  box-shadow: 0 5px 20px 0 rgba(69, 67, 96, 0.1);

}

.hotel-card-sec .hotel-card-row .hotel-card .hotel-inner-card {

  display: flex;

  gap: 16px;

  /* flex-basis: 50%; */

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-inner-card::-webkit-scrollbar {

  display: none; /* Chrome, Safari */

}



.hotel-card-sec .hotel-card-row .hotel-card .hotel-img {

  width: 210px;

  height: 308px;

  flex: 0 0 210px;

  overflow: hidden;

  transition: 0.6s;

}

.hotel-card-sec .hotel-card-row .hotel-card .hotel-img img {

  overflow: hidden;

  transition: 0.6s;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.hotel-card-sec .hotel-card-row .hotel-card:hover .hotel-img img {

  transform: scale(1.1);

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-top-content

  .hotel-mini-heading {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  color: var(--color-gray);

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-top-content

  .facelites {

  font-weight: 400;

  font-size: 14px;

  line-height: normal;

  color: var(--color-gray);

  padding-left: 21px;

  margin-top: 5px;

}



.hotel-card-sec

  .hotel-card-row

  .hotel-card:hover

  .hotel-content-card

  .card-top-content

  .hotel-main-heading {

  color: var(--color-primary);

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-top-content

  .hotel-main-heading {

  font-weight: 500;

  font-size: 20px;

  line-height: 32px;

  color: #374151;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 1;

  line-clamp: 1;

  -webkit-box-orient: vertical;

  position: relative;

  transition: 0.5s;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-top-content

  .hotel-main-heading::before {

  transition: 0.6s;

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  background-color: var(--color-primary);

  height: 1px;

  width: 0;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card:hover

  .hotel-content-card

  .card-top-content

  .hotel-main-heading::before {

  width: 100%;

}

.filter-select-child {

  border: 1px solid #ccc;

  border-radius: 6px;

  position: relative;

  width: 100%;

  max-width: 200px;

}



.filter-select-child .selected-items {

  display: flex;

  /* flex-wrap: wrap; */

  align-items: center;

  gap: 6px;

  /* margin-bottom: 5px; */

  width: 100%;

  overflow: auto;

}



.filter-select-child .tag {

  background-color: var(--color-primary);

  color: var(--color-white);

  padding: 4px 8px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  white-space: nowrap;

}



.filter-select-child .tag span {

  margin-left: 8px;

  cursor: pointer;

  font-weight: bold;

}



.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-top-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  max-width: 490px;

}

.hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card .content {

  max-width: 500px;

}

.hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card .content,

.food-rating p {

  font-weight: 400;

  font-size: 14px;

  line-height: normal;

  color: var(--color-gray);

  padding-left: 21px;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-top-content

  .percantage-btn {

  padding: 8px 16px;

  background: var(--color-primary);

  border: 1px solid #e5e7eb;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 30px;

  font-size: 14px;

  color: #374151;

}

.hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card .card-buttons {

  display: flex;

  align-items: center;

  gap: 8px;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .avaiable-hotel {

  display: flex;

  align-items: center;

  gap: 4px;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .avaiable-hotel

  .btn-avaible-hotel {

  width: 36px;

  height: 36px;

  border: 1px solid rgba(0, 0, 0, 0.1);

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  border-radius: 50%;

  padding: 0;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .avaiable-hotel

  .btn-avaible-hotel

  img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .options-btns {

  display: flex;

  align-items: center;

  gap: 8px;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .options-btns

  .btn-primary-btns {

  background: #d9d9d9;

  border: 1px solid #e5e7eb;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 50px;

  font-weight: 400;

  font-size: 12px;

  color: #374151;

  padding: 8px 10px;

  transition: 0.3s;

  white-space: nowrap;

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .options-btns

  .btn-primary-btns:hover {

  background: var(--color-white);

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .options-btns

  .btn-primary-btns:first-child {

  background: var(--color-white);

}

.hotel-card-sec

  .hotel-card-row

  .hotel-card

  .hotel-content-card

  .card-buttons

  .options-btns

  .selected-btn {

  border: 2px solid var(--color-primary);

}

.hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



/* .hotel-card-sec .hotel-card-row .hotel-card:nth-child(odd) {

  border-right: 1px solid #e5e7eb;

} */



.hotel-card-popup .modal-dialog {

  max-width: 580px;

}

.hotel-card-popup .modal-body .modal-hotel-card {

  display: flex;

  gap: 10px;

}

.hotel-card-popup .modal-body .modal-hotel-card .hotel-img {

  width: 130px;

  height: 192px;

  flex: 0 0 130px;

}

.hotel-card-popup .modal-body .modal-hotel-card .hotel-img img {

  object-fit: cover;

}

.hotel-card-popup .modal-body .modal-hotel-card .hotel-content p {

  font-weight: 400;

  font-size: 14px;

  line-height: normal;

  color: var(--color-gray);

  padding-left: 10px;

}

.hotel-card-popup .modal-body .modal-hotel-card .hotel-content h4 {

  font-weight: 500;

  font-size: 20px;

  line-height: 32px;

  color: #374151;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 1;

  line-clamp: 1;

  -webkit-box-orient: vertical;

  padding-left: 10px;

}

.hotel-card-popup .modal-body .modal-hotel-card .hotel-content .percntage-btn {

  padding: 8px 16px;

  background: var(--color-primary);

  border: 1px solid #e5e7eb;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 30px;

  font-size: 14px;

  color: #374151;

  margin: 10px 0;

}

.hotel-card-popup .modal-body .content {

  font-weight: 400;

  font-size: 14px;

  line-height: normal;

  color: var(--color-gray);

}

.hotel-card-popup .modal-body .hotel-types-main .inner-model-ttype h6 {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  letter-spacing: 0.25px;

  color: var(--color-black);

  margin-bottom: 5px;

}

.hotel-card-popup .modal-body .hotel-types-main .inner-model-ttype .type-card {

  background: #d9d9d9;

  padding: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.hotel-card-popup

  .modal-body

  .hotel-types-main

  .inner-model-ttype

  .type-card

  .hotel-logo {

  display: flex;

  align-items: center;

  gap: 16px;

}

.hotel-card-popup

  .modal-body

  .hotel-types-main

  .inner-model-ttype

  .type-card

  .hotel-logo

  img {

  width: 49px;

  height: 49px;

  flex: 0 0 49px;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  border-radius: 15px;

}

.hotel-card-popup .modal-body .hotel-types-main {

  border-top: 1px solid #e5e7eb;

}



.hotel-card-popup

  .modal-body

  .hotel-types-main

  .inner-model-ttype

  .type-card

  .hotel-logo

  .type-content

  h5 {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  align-items: center;

  letter-spacing: 0.25px;

  color: #000000;

}

.hotel-card-popup

  .modal-body

  .hotel-types-main

  .inner-model-ttype

  .type-card

  .hotel-logo

  .type-content

  p {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  letter-spacing: 0.25px;

  color: #636363;

}

.hotel-card-popup .modal-body .hotel-types-main .inner-model-ttype {

  margin-top: 20px;

}



.profile-cover-sec .upload-wrapper {

  position: relative;

}



.profile-cover-sec .upload-btn {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  background-color: #fff;

  color: #0f1e10;

  font-size: 1rem;

  font-weight: 500;

  padding: 0.6rem 1.2rem;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  transition: background 0.3s ease;

}



.profile-cover-sec .upload-btn:hover {

  background-color: #f2f2f2;

}



.profile-cover-sec .upload-icon {

  font-size: 1.2rem;

}



/* Hide actual input but keep it accessible */

.profile-cover-sec .upload-input {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  opacity: 0;

  cursor: pointer;

}

.profile-cover-sec {

  /* padding: 0 81px; */

}

.profile-cover-sec .cover-img-main {

  position: relative;

}

.profile-cover-sec .cover-img-main .upload-inner {

  position: absolute;

  right: 20px;

  bottom: 20px;

}

.profile-cover-sec .cover-img-main img {

  height: 350px;

  object-fit: cover;

  width: 100%;

  border-radius: 12px;

  max-width: 1734px;

  margin: 0 auto;

}

.profile-cover-sec .avatar_img_main .avatar_img {

  position: relative;

}

.profile-cover-sec .avatar_img_main .avatar_img img {

  width: 160px;

  height: 160px;

  border: 4px solid var(--color-primary);

  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);

  border-radius: 50%;

}

.profile-cover-sec .avatar_img_main .avatar_img .edit-icon {

  position: absolute;

  right: 3px;

  bottom: 0;

}

.profile-cover-sec .avatar_img_main h4 {

  font-weight: 600;

  font-size: 24px;

  line-height: 28px;

  text-align: center;

  color: #112211;

  margin: 24px 0 0px 0;

}

.profile-cover-sec .avatar_img_main p {

  font-weight: 400;

  font-size: 16px;

  line-height: 19px;

  text-align: center;

  color: #4a4d4a;

}

.profile-cover-sec .avatar-col {

  margin-top: -80px;

}



.profile-edit-sec .profile-edit-main {

  width: 100%;

  max-width: 1734px;

  margin: 0 auto;

  border-top: 1px solid #dddddd;

  padding-top: 40px;

}

.profile-edit-sec {

  margin: 40px 0;

}

.profile-edit-sec .profile-edit-main .profile-edit-card {

  padding: 40px 30px;

  background: #ffffff;

  border: 1px solid rgba(230, 230, 230, 0.7);

  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.05);

  border-radius: 16px;

}

.profile-edit-sec .profile-edit-main .profile-edit-col {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 30px;

}

.profile-edit-sec .profile-edit-main .profile-edit-col:last-child {

  padding-bottom: 0px;

}

.profile-edit-sec .profile-edit-main .profile-edit-col .profile-edit-left p {

  font-weight: 400;

  font-size: 16px;

  line-height: 19px;

  color: #4a4d4a;

  margin-bottom: 4px;

}

.profile-edit-sec .profile-edit-main .profile-edit-col .profile-edit-left h4 {

  font-weight: 400;

  font-size: 18px;

  line-height: 21px;

  color: #112211;

}

.profile-edit-sec

  .profile-edit-main

  .profile-edit-col

  .profile-edit-right

  .btn-edit {

  font-weight: 500;

  font-size: 14px;

  line-height: 17px;

  color: #112211;

  border: 1px solid #e6a000;

  border-radius: 4px;

  padding: 12px 26px;

  display: flex;

  align-items: center;

  gap: 5px;

}

.hotel-card-sec .hotel-card-row .hotel-card .content-mobile-view {

  display: none;

}

.percantage-btn-mobile,

.more-opition-btn-mobile {

  display: none;

}

.popup-mobile-view-btns {

  display: none;

}

.more-filter-popup .modal-dialog {

  max-width: 1340px;

}

.more-filter-popup .modal-dialog .more-filter-tabs {

  display: flex;

  align-items: start;

}

.more-filter-popup .modal-dialog .more-filter-tabs .nav .nav-link {

  width: 425px;

  display: flex;

  align-items: center;

  justify-content: start;

  color: #374151;

  font-size: 16px;

  font-weight: 500;

  background: #d9d9d9;

  border: 1px solid #d9d9d9;

  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

  border-radius: 5px;

  transition: 0.3s;

  white-space: nowrap;

}

.more-filter-popup .modal-dialog .more-filter-tabs .nav {

  gap: 10px;

  background: #cccccc47;

  padding: 13px;

  border-radius: 6px;

}

.more-filter-popup .modal-dialog .more-filter-tabs .nav .nav-link:hover {

  color: var(--color-white);

  background-color: var(--color-primary);

}

.more-filter-popup .modal-dialog .more-filter-tabs .nav .nav-link.active {

  color: var(--color-white);

  background-color: var(--color-primary);

  border-color: var(--color-primary);

}

.more-filter-popup .modal-dialog .more-filter-tabs .more-filter-content h3 {

  font-size: 24px;

  font-weight: 600;

  color: var(--color-black);

}

.more-filter-popup .modal-dialog .tab-content {

  width: 100%;

}



.more-filter-content .selected-items {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-bottom: 10px;

  margin-top: 10px;

}

.more-filter-content .selected-tag {

  background-color: var(--color-primary);

  color: var(--color-white);

  padding: 4px 8px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  white-space: nowrap;

  gap: 4px;

}

.more-filter-content .remove-tag {

  background: none;

  border: none;

  color: white;

  font-weight: bold;

  cursor: pointer;

}

.price-container {

  width: 100%;

  margin: 20px 0;

  text-align: left;

}

.price-label {

  font-size: 20px;

  font-weight: bold;

  color: var(--color-primary); /* Yellow color */

}

.price-slider {

  width: 100%;

  appearance: none;

  height: 10px;

  background: #ddd;

  outline: none;

  border-radius: 5px;

  -webkit-appearance: none;

  -moz-appearance: none;

}

.price-slider::-webkit-slider-thumb {

  appearance: none;

  width: 16px;

  height: 16px;

  background: blue;

  border-radius: 50%;

  cursor: pointer;

  -webkit-appearance: none;

}

.price-slider::-moz-range-thumb {

  width: 16px;

  height: 16px;

  background: blue;

  border-radius: 50%;

  cursor: pointer;

}

.star-container {

  display: flex;

  justify-content: start;

  font-size: 30px;

  margin-bottom: 10px;

}



.star {

  color: gray;

  transition: color 0.2s;

}



.star.filled {

  color: var(--color-primary);

}



.rating-container {

  position: relative;

  /* width: 300px;

  margin: auto; */

  max-width: 400px;

}



.rating-slider {

  width: 100%;

  appearance: none;

  height: 8px;

  background: #ddd;

  border-radius: 5px;

  outline: none;

  transition: background 0.1s;

}



.rating-slider::-webkit-slider-runnable-track {

  height: 8px;

  background: #ddd;

  border-radius: 5px;

}



.rating-slider::-webkit-slider-thumb {

  appearance: none;

  width: 20px;

  height: 20px;

  background: gray;

  border-radius: 50%;

  cursor: pointer;

  -webkit-appearance: none;

  position: relative;

}

/* media query */

@media (max-width: 1470px) {

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-img {

    width: 180px;

    flex: 0 0 180px;

  }

}

@media (max-width: 1385px) {

  .hotel-card-sec .hotel-card-row {

    border: 0;

    grid-template-columns: 1fr;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-img {

    width: 220px;

    flex: 0 0 220px;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-top-content {

    max-width: inherit;

    gap: 10px;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card .content {

    max-width: inherit;

  }

}

@media (max-width: 1300px) {

  .filter-main-sec .hotels-inner-main {

    justify-content: start;

  }

}

@media (max-width: 1125px) {

  /* .hotel-card-sec .hotel-card-row .hotel-card:nth-child(odd) {

    border-right: 0;

  } */

  .filter-main-sec .hotels-inner-main {

    justify-content: start;

  }

}

@media (max-width: 991px) {

  .more-filter-popup .modal-dialog .more-filter-tabs{

    flex-direction: column;

    gap: 16px;

  }

}

@media (max-width: 767px) {

  .more-filter-popup .modal-dialog .more-filter-tabs .nav .nav-link{

    width: 100%;

  }

  .more-filter-popup .modal-dialog .more-filter-tabs .nav {

    width: 100%;

}



  .login_signup_sec .logo_login {

    text-align: center;

    padding: 40px 10px;

  }

  .login_signup_sec .logo_login h1 {

    font-size: 35px;

    line-height: normal;

  }

  .login_signup_sec .login_signup_form .main_form_inner .form-group {

    margin-top: 10px;

  }

  .login_signup_sec {

    overflow-y: auto;

  }

  .login_signup_sec .login_signup_form .divider {

    margin: 10px 0;

  }

  .login_signup_sec .login_signup_form .signin_heading h4 {

    font-size: 16px;

  }

  .login_signup_sec .login_signup_form .signin_heading {

    padding: 15px;

  }

  .login_signup_sec .login_signup_form .signin_heading .close-btn {

    left: 15px;

    top: 13px;

  }

  .login_signup_sec

    .login_signup_form

    .main_form_inner

    .form-group

    .input-group

    .form-control {

    padding: 10px 30px 10px 40px;

  }

  .login_signup_sec .login_signup_form .main_form_inner {

    padding: 10px 24px 15px 24px;

  }

  .login_signup_sec .login_signup_form .btn-primary {

    margin-top: 25px;

    padding: 11px;

  }

  .login_signup_sec .login_signup_form .forgot_password .forgot {

    font-size: 12px;

  }

  .login_signup_sec

    .login_signup_form

    .forgot_password

    .check-group

    .form-check-label {

    font-size: 14px;

  }

  .profile-cover-sec .cover-img-main img {

    height: 200px;

  }

  .profile-cover-sec .avatar_img_main .avatar_img img {

    width: 90px;

    height: 90px;

    border: 2px solid var(--color-primary);

  }

  .profile-cover-sec .avatar-col {

    margin-top: 20px;

  }

  .profile-cover-sec .cover-img-main .upload-inner {

    right: 10px;

    bottom: 10px;

  }

  .profile-cover-sec .upload-btn {

    font-size: 0.8rem;

    padding: 0.3rem 0.7rem;

  }

  .profile-cover-sec .avatar_img_main .avatar_img .edit-icon svg {

    width: 31px;

    height: auto;

  }

  .profile-cover-sec .avatar_img_main .avatar_img .edit-icon {

    right: 31px;

  }

  .profile-cover-sec .avatar_img_main h4 {

    font-size: 20px;

    line-height: 24px;

    margin: 15px 0 0px 0;

  }

  .profile-edit-sec .profile-edit-main {

    padding-top: 20px;

  }

  .profile-edit-sec {

    margin-top: 20px;

  }

  .profile-edit-sec .profile-edit-main .profile-edit-card {

    padding: 20px 20px;

  }

  .profile-edit-sec .profile-edit-main .profile-edit-col .profile-edit-left p {

    font-size: 14px;

    margin-bottom: 2px;

  }

  .profile-edit-sec .profile-edit-main .profile-edit-col .profile-edit-left h4 {

    font-size: 15px;

  }

  .profile-edit-sec .profile-edit-main .profile-edit-col {

    padding-bottom: 15px;

  }

  .profile-edit-sec

    .profile-edit-main

    .profile-edit-col

    .profile-edit-right

    .btn-edit {

    font-size: 12px;

    padding: 8px 11px;

  }

  .main-header .header-row .search-bar {

    display: none;

  }

  .main-header .header-row .menu-header .wishlist-title {

    display: none;

  }

  .main-header .header-row .menu-header .wishlist-mobile-icon {

    display: flex;

  }

  .main-header .header-row .menu-header {

    flex-direction: row-reverse;

    gap: 20px;

  }

  .main-header {

    padding: 8px 5px;

    background: #f0f0f0;

  }

  .filter-main-sec .filter-hotel-main {

    display: flex;

    flex-direction: column-reverse;

  }

  .filter-main-sec .hotels-inner-main .btn-hotel {

    width: 49px;

    height: 49px;

    flex: 0 0 49px;

    border-radius: 50%;

  }

  .filter-main-sec .hotels-inner-main .btn-hotel img {

    border-radius: 50%;

  }

  .filter-main-sec .hotels-inner-main {

    gap: 12px;

    border-bottom: 1px solid #e5e7eb;

  }

  .filter-main-sec .main-filter-row {

    padding-bottom: 10px;

    padding-top: 10px;

    flex-direction: column;

    overflow-x: inherit;

    align-items: start;

    gap: 8px;

  }



  .filter-main-sec .main-filter-row .left-filter-col .filter-btn {

    font-size: 13px;

    padding: 5px 7px;

  }



  .filter-main-sec .main-filter-row .left-filter-col,

  .filter-main-sec .main-filter-row .right-filter-col {

    gap: 6px;

    width: 100%;

    max-width: fit-content;

    overflow-x: auto;

  }

  .filter-main-sec .main-filter-row .filter-select-child .form-select {

    padding-top: 5px;

    padding-bottom: 5px;

    font-size: 13px;

  }

  .filter-main-sec .main-filter-row .right-filter-col {

    padding-left: 0;

  }

  .filter-main-sec .main-filter-row .left-filter-col {

    padding: 0;

    border: 0;

  }

  .hotel-card-sec .hotel-card-row {

    border: 0;

    grid-template-columns: 1fr;

  }

  .hotel-card-sec .hotel-card-row .hotel-card {

    border: 1px solid #e5e7eb;

    border-radius: 5px;

    margin-bottom: 10px;

    padding: 0;

    overflow-x: inherit;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-img {

    width: 86px;

    height: 127px;

    flex: 0 0 86px;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .content-mobile-view {

    display: flex;

    font-weight: 400;

    font-size: 12px;

    line-height: 16px;

    letter-spacing: 0.4px;

    color: #5d5757;

    padding: 8px 6px;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card .content {

    display: none;

  }

  .percantage-btn-mobile {

    display: flex;

    padding: 4px 16px;

    background: var(--color-primary);

    border: 1px solid #e5e7eb;

    box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

    border-radius: 30px;

    font-size: 12px;

    color: #374151;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-top-content

    .percantage-btn {

    display: none;

  }

  .more-opition-btn-mobile {

    display: flex;

    background: #ededed;

    color: #000;

    font-size: 12px;

    border-radius: 50px;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-buttons

    .options-btns

    .btn-primary-btns {

    display: none;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card .food-rating {

    display: none;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-img img {

    border-radius: 0;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-inner-card {

    gap: 6px;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-top-content

    .hotel-main-heading {

    font-size: 18px;

    line-height: normal;

    padding-left: 8px;

  }

  .hotel-card-sec .hotel-card-row .hotel-card .hotel-content-card {

    justify-content: start;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-top-content {

    margin-top: 5px;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-buttons {

    margin-top: 7px;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-buttons

    .avaiable-hotel

    .btn-avaible-hotel:last-child {

    display: none;

  }

  .hotel-card-sec

    .hotel-card-row

    .hotel-card

    .hotel-content-card

    .card-top-content

    .facelites {

    padding-left: 8px;

  }

  .hotel-card-popup .modal-body .modal-hotel-card .hotel-img {

    width: 106px;

    height: 158px;

    flex: 0 0 106px;

  }

  .hotel-card-popup .modal-body .modal-hotel-card .hotel-content h4 {

    font-size: 18px;

  }

  .hotel-card-popup

    .modal-body

    .modal-hotel-card

    .hotel-content

    .percntage-btn {

    padding: 5px 13px;

  }

  .hotel-card-popup

    .modal-body

    .hotel-types-main

    .inner-model-ttype

    .type-card {

    padding: 8px;

  }

  .hotel-card-popup

    .modal-body

    .hotel-types-main

    .inner-model-ttype

    .type-card

    .hotel-logo

    img {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

  }

  .hotel-card-popup .modal-body .hotel-types-main .inner-model-ttype {

    margin-top: 10px;

  }

  .popup-mobile-view-btns {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

  }

  .popup-mobile-view-btns .btn-popup {

    padding: 8px 16px;

    background: #d9d9d9;

    border: 1px solid #e5e7eb;

    box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);

    border-radius: 50px;

    white-space: nowrap;

    font-size: 14px;

  }

  .hotel-card-popup .modal-header {

    padding: 9px;

  }

}