/*-------------------------------------------------------------- 4. General ----------------------------------------------------------------*/ @for $i from 1 through 70 { .cs_mb_#{$i} { margin-bottom: $i + px; } } .cs_mb_75 { margin-bottom: 75px; } .cs_mb_80 { margin-bottom: 80px; } @media screen and (max-width: 991px) { @for $i from 1 through 70 { .cs_mb_lg_#{$i} { margin-bottom: $i + px; } } .cs_mb_lg_75 { margin-bottom: 75px; } .cs_mb_lg_80 { margin-bottom: 80px; } } @for $i from 1 through 10 { .cs_zindex_#{$i} { z-index: $i; } } .cs_fs_13 { font-size: 13px; line-height: 1.6em; } .cs_fs_14 { font-size: 14px; line-height: 1.6em; } .cs_fs_15 { font-size: 15px; line-height: 1.667; } .cs_fs_16 { font-size: 16px; line-height: 1.875em; } .cs_fs_21 { font-size: 21px; line-height: 1.286em; } .cs_fs_28 { font-size: 28px; line-height: 1.25em; } .cs_fs_38 { font-size: 38px; line-height: 1.316em; @media (max-width: 1400px) { font-size: 34px; } @media (max-width: 991px) { font-size: 30px; } } .cs_fs_50 { font-size: 50px; line-height: 1.3em; @media (max-width: 1400px) { font-size: 46px; } @media (max-width: 991px) { font-size: 40px; } } .cs_fs_67 { font-size: 67px; line-height: 1.12em; @media (max-width: 1400px) { font-size: 60px; } @media (max-width: 991px) { font-size: 46px; } } .cs_fs_89 { font-size: 89px; line-height: 1.124em; @media (max-width: 1400px) { font-size: 78px; } @media (max-width: 991px) { font-size: 60px; } @media (max-width: 767px) { font-size: 50px; } } .cs_fs_150 { font-size: 150px; line-height: 1em; @media (max-width: 991px) { font-size: 120px; } @media (max-width: 991px) { font-size: 80px; } } .cs_light { font-weight: 300; } .cs_normal { font-weight: 400; } .cs_medium { font-weight: 500; } .cs_semibold { font-weight: 600; } .cs_bold { font-weight: 700; } .cs_extra_bold { font-weight: 800; } .cs_black { font-weight: 900; } .cs_radius_3 { border-radius: 3px; } .cs_radius_5 { border-radius: 5px; } .cs_radius_7 { border-radius: 7px; } .cs_radius_10 { border-radius: 10px; } .cs_radius_15 { border-radius: 15px; } .cs_radius_20 { border-radius: 20px; } .cs_letter_spacing_1 { letter-spacing: 3.2px; @media (max-width: 1400px) { letter-spacing: 2px; } @media (max-width: 575px) { letter-spacing: 1px; } } .cs_mp_0 { list-style: none; margin: 0; padding: 0; } .cs_gap_y_20 { gap: 20px 0; } .cs_gap_y_24 { gap: 24px 0; } .cs_gap_y_30 { gap: 30px 0; } .cs_gap_y_35 { gap: 35px 0; } .cs_gap_y_40 { gap: 40px 0; } .cs_gap_y_45 { gap: 45px 0; } .cs_gap_y_50 { gap: 50px 0; } .cs_gap_y_60 { gap: 60px 0; @media (max-width: 991px) { gap: 45px 0; } } .cs_gap_y_65 { gap: 65px 0; @media (max-width: 991px) { gap: 45px 0; } } .cs_gap_y_75 { gap: 75px 0; @media (max-width: 991px) { gap: 45px 0; } } .cs_gap_y_80 { gap: 80px 0; @media (max-width: 991px) { gap: 45px 0; } } .cs_gap_y_90 { gap: 90px 0; @media (max-width: 991px) { gap: 45px 0; } } .cs_row_gap_50 { margin-left: -25px; margin-right: -25px; > * { padding-left: 25px; padding-right: 25px; } @media (max-width: 1400px) { margin-left: -12px; margin-right: -12px; > * { padding-left: 12px; padding-right: 12px; } } } .cs_row_gap_60 { margin-left: -30px; margin-right: -30px; > * { padding-left: 30px; padding-right: 30px; } @media (max-width: 1400px) { margin-left: -12px; margin-right: -12px; > * { padding-left: 12px; padding-right: 12px; } } } .cs_row_gap_70 { margin-left: -35px; margin-right: -35px; > * { padding-left: 35px; padding-right: 35px; } @media (max-width: 1400px) { margin-left: -12px; margin-right: -12px; > * { padding-left: 12px; padding-right: 12px; } } } .cs_row_gap_80 { margin-left: -80px; margin-right: -80px; > * { padding-left: 80px; padding-right: 80px; } @media (max-width: 1400px) { margin-left: -40px; margin-right: -40px; > * { padding-left: 40px; padding-right: 40px; } } @media (max-width: 1199px) { margin-left: -12px; margin-right: -12px; > * { padding-left: 12px; padding-right: 12px; } } } .cs_row_gap_90 { margin-left: -45px; margin-right: -45px; > * { padding-left: 45px; padding-right: 45px; } @media (max-width: 1600px) { margin-left: -30px; margin-right: -30px; > * { padding-left: 30px; padding-right: 30px; } } @media (max-width: 1400px) { margin-left: -15px; margin-right: -15px; > * { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1199px) { margin-left: -12px; margin-right: -12px; > * { padding-left: 12px; padding-right: 12px; } } } .cs_row_gap_100 { margin-left: -50px; margin-right: -50px; > * { padding-left: 50px; padding-right: 50px; } @media (max-width: 1400px) { margin-left: -30px; margin-right: -30px; > * { padding-left: 30px; padding-right: 30px; } } @media (max-width: 1199px) { margin-left: -12px; margin-right: -12px; > * { padding-left: 12px; padding-right: 12px; } } } .container-fluid { max-width: 1920px; margin-left: auto; margin-right: auto; } .cs_plr_100 { padding-right: 100px; padding-left: 100px; @media (max-width: 1600px) { padding-right: 60px; padding-left: 60px; } @media (max-width: 1400px) { padding-right: 30px; padding-left: 30px; } @media (max-width: 1199px) { padding-right: 15px; padding-left: 15px; } } .cs_plr_70 { padding-right: 70px; padding-left: 70px; @media (max-width: 991px) { padding-left: 0; padding-right: 0; } } hr { opacity: 1; margin: 0; padding: 0; border: none; border-top: 1px solid var(--ternary); } .cs_bg_filed { background-size: cover; background-repeat: no-repeat; background-position: center; } .cs_bg_fixed { background-attachment: fixed; } .cs_vertical_middle { display: flex; align-items: center; min-height: 100%; } .cs_vertical_middle_in { flex: none; width: 100%; } .cs_center { display: flex; align-items: center; justify-content: center; } .cs_white_color { color: #fff; } .cs_primary_color { color: var(--primary); } .cs_secondary_color { color: var(--secondary); } .cs_ternary_color { color: var(--ternary); } .cs_accent_color { color: var(--accent); } .cs_green_color { color: #4baf47; } .cs_white_bg { background-color: #fff; } .cs_primary_bg { background-color: var(--primary); } .cs_secondary_bg { background-color: var(--secondary); } .cs_ternary_bg { background-color: var(--ternary); } .cs_gray_bg { background-color: var(--gray); } .cs_accent_bg { background-color: var(--accent); } .cs_pr_110 { padding-right: 110px; @media (max-width: 1400px) { padding-right: 55px; } @media (max-width: 991px) { padding-right: 0px; } } .cs_pl_110 { padding-left: 110px; @media (max-width: 1400px) { padding-left: 55px; } @media (max-width: 991px) { padding-left: 0px; } } .cs_pr_100 { padding-right: 100px; @media (max-width: 1400px) { padding-right: 55px; } @media (max-width: 991px) { padding-right: 0px; } } .cs_pl_100 { padding-left: 100px; @media (max-width: 1400px) { padding-left: 55px; } @media (max-width: 991px) { padding-left: 0px; } } .cs_pl_60 { padding-left: 60px; @media (max-width: 991px) { padding-left: 0; } } .cs_pr_60 { padding-right: 60px; } .cs_btn.cs_style_1 { border: none; padding: 11px 30px; outline: none; color: #fff; background-color: var(--accent); display: inline-flex; justify-content: center; align-items: center; &:hover { color: var(--web-wash); background-color: var(--primary); } &.cs_color_1 { background-color: var(--primary); &:hover { background-color: #fff; color: var(--primary); } } } .cs_btn.cs_style_2 { border: none; color: var(--primary); border: 1px solid var(--primary); padding: 10px 25px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; outline: none; background-color: transparent; transition: all 0.4s ease; span { display: flex; overflow: hidden; position: relative; width: 13px; svg { transform: rotate(45deg); } } i { transform: rotate(-45deg); transition: transform 0.4s; color: inherit; &:last-child { position: absolute; font-family: 'Font Awesome 6 Free'; font-weight: 900; left: -19px; bottom: -21px; transform: translate(0, 0) rotate(-45deg); opacity: 0; visibility: hidden; transition: transform 0.4s; color: currentColor; } } &:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; i { &:first-child { transform: translate(20px, -20px) rotate(-45deg); } &:last-child { opacity: 1; visibility: visible; transform: translate(20px, -20px) rotate(-45deg); } } } &.cs_white_btn { border-color: #fff; color: #fff; &:hover { border-color: var(--accent); } } &.cs_accent_btn { background-color: var(--accent); border-color: var(--accent); color: #fff; position: relative; b { position: relative; z-index: 1; font-weight: inherit; } &::before { content: ''; position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-radius: inherit; background-color: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.4s ease; } &:hover { &::before { opacity: 1; } } } &.cs_primary_btn { background-color: var(--primary); border-color: var(--primary); color: var(--web-wash); &:hover { background-color: var(--accent); border-color: var(--accent); } } } .cs_text_btn { display: inline-flex; justify-content: center; position: relative; &::before { content: ''; position: absolute; height: 1px; width: 100%; bottom: 0; left: 0; background-color: currentColor; } &:hover { color: #fff; } } .cs_form_field_2 { display: block; width: 100%; border: 1px solid var(--ternary); padding: 7px 20px; min-height: 47px; outline: none; background-color: transparent; &:focus { border-color: var(--accent); } } .cs_half_ternary_bg { &::after { content: ''; position: absolute; height: calc(100% - 54px); width: 100%; left: 0; bottom: 0; background-color: var(--gray); } .cs_form.cs_style_1, .cs_form.cs_style_4 { margin-top: -54px; } } .cs_form.cs_style_4 .cs_form_item, .cs_extra_service_item .cs_form_item { background-image: url('data:image/svg+xml;utf8,'); } .cs_form.cs_style_4.cs_type_3 .cs_date_item { background-image: url('data:image/svg+xml;utf8,'); } .cs_form.cs_style_4.cs_type_5 .cs_form_item, .cs_form.cs_style_4.cs_type_6 .cs_form_item { background-image: url('data:image/svg+xml;utf8,'); } .cs_form.cs_style_1 { padding: 30px; gap: 10px 20px; .cs_form_item { border: 1px solid #fff; padding: 0 16px; min-height: 47px; label { margin: 0 5px 0 0; } } .cs_form_item_btn { flex: 1; } &.cs_type_1 { border-radius: 50px; .cs_radius_5 { border-radius: 20px; } } &.cs_type_2 { background-color: transparent; padding: 0; justify-content: center; gap: 10px 30px; .cs_form_item { border-width: 0 0 1px 0; } .cs_form_item_btn { flex: none; width: 172px; } } &.cs_type_3 { padding: 30px 0; .cs_form_item { min-width: 170px; } } &.cs_type_4 { .cs_form_item { border-color: var(--primary); } .cs_white_color { color: var(--primary); } } &.cs_type_5 { padding: 40px 50px 50px; .cs_form_item { margin-bottom: 30px; padding-right: 0; padding-left: 20px; } select { flex: 1; text-align: right; background-position-x: calc(100% - 20px); height: 45px; padding: 0 40px 0px 15px; } } } .cs_form_item { border: 1px solid #fff; padding-left: 15px; height: 47px; position: relative; border-radius: 5px; display: flex; align-items: center; flex: 1; background-repeat: no-repeat; background-position-x: calc(100% - 15px); background-position-y: 50%; label { margin: 0; } &.cs_children_item { flex: 1.15; } @media (max-width: 1400px) { padding-left: 12px; background-position-x: calc(100% - 12px); } } .cs_quantity_btn { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; color: #fff; text-align: right; justify-content: flex-end; padding: 10px 32px 10px 15px; cursor: pointer; z-index: 2; @media (max-width: 1400px) { padding-right: 28px; padding-left: 12px; } } .cs_form.cs_style_4 { padding: 30px; display: flex; gap: 10px 18px; @media (max-width: 1400px) { gap: 10px 5px; .cs_btn.cs_style_1 { padding: 11px 15px; } } @media (max-width: 1199px) { flex-direction: column; .cs_form_item { flex: none; } } .cs_date_items { display: flex; gap: inherit; position: relative; &::before { content: ''; position: absolute; height: 100%; width: 19px; left: 50%; transform: translateX(-50%); top: 0; z-index: 6; } @media (max-width: 1199px) { gap: 10px; } @media (max-width: 767px) { flex-direction: column; .cs_date_item { flex: none; } } } .cs_datetimes { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 5; opacity: 0; cursor: pointer; } .cs_date_item { width: 240px; flex: none; justify-content: space-between; padding-right: 32px; @media (max-width: 1400px) { width: 235px; padding-right: 28px; } @media (max-width: 1199px) { width: initial; flex: 1; } } &.cs_type_1 { padding: 0; .cs_form_item { background-color: rgba(27, 27, 27, 0.5); @media (min-width: 992px) { backdrop-filter: blur(10px); } } .cs_date_item { width: 250px; } } &.cs_type_2, &.cs_type_4 { border-radius: 50px; .cs_form_item, .cs_btn.cs_style_1 { border-radius: 20px; } } &.cs_type_3 { background-color: transparent; padding: 0; justify-content: center; gap: 10px 30px; .cs_form_item { border-width: 0 0 1px 0; } .cs_date_item { width: 240px; padding-right: 38px; @media (max-width: 767px) { width: 100%; } } } &.cs_type_4 { padding: 30px 0; } &.cs_type_5 { .cs_form_item { border-color: var(--primary); } .cs_white_color, .cs_quantity_btn { color: var(--primary); } } &.cs_type_6 { flex-direction: column; padding: 0; gap: 20px 0; .cs_form_item { flex: none; border-color: var(--border); width: 100%; background-color: var(--gray); } .cs_white_color, .cs_quantity_btn { color: var(--secondary); } .cs_date_items { flex-direction: column; &::before { height: 20px; width: 100%; left: 0; top: 50%; transform: translateY(-50%); } } .cs_quantity_wrap { .cs_quantity_dropdown { left: initial; right: -1px; width: calc(100% + 2px); } } } &.cs_type_7 { flex-direction: column; padding: 0; gap: 15px 0; .cs_form_item { flex: none; width: 100%; } .cs_date_items { flex-direction: column; &::before { height: 20px; width: 100%; left: 0; top: 50%; transform: translateY(-50%); } } .cs_form_item_group { display: flex; gap: 0 15px; > .cs_form_item { flex: 1; } } .cs_quantity_wrap { .cs_quantity_dropdown { left: initial; right: 0; } } } } .cs_book_now_card { padding: 40px 50px 50px; @media (max-width: 1199px) { padding: 40px 35px 50px; } .cs_extra_service_item { color: #fff; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; &:not(:last-child) { margin-bottom: 15px; } .cs_checkbox { input { &:checked { + label { &::before { border-color: #fff; background-color: #fff; } } } } label { &::before { border-color: #fff; } &::after { border-color: var(--accent); } } } .cs_form_item { border-width: 0; border-radius: 0; padding-left: 0; background-position-x: 100%; height: 22px; width: 50px; border-left: 1px solid rgba(255, 255, 255, 0.5); margin-left: 15px; } .cs_quantity_btn { padding: 0px 20px 0px 0px; } .cs_quantity_wrap { .cs_quantity_dropdown { width: 116px; left: initial; right: 0; margin-top: 8px; padding: 8px; } } } .cs_extra_service_item_right { display: flex; align-items: center; font-size: 14px; } .cs_book_now_card_head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 15px; } } .cs_checkbox { display: inline-flex; position: relative; padding-left: 30px; input { position: absolute; height: 100%; width: 100%; left: 0; top: 0; cursor: pointer; z-index: 2; opacity: 0; &:checked { + label { &::before { border-color: var(--accent); background-color: var(--accent); } &::after { opacity: 1; } } } } a { color: var(--accent); position: relative; z-index: 3; &:hover { text-decoration: underline; } } label { margin: 0; display: inline-block; &::before { content: ''; height: 17px; width: 17px; border: 1px solid var(--secondary); position: absolute; left: 0; top: 7px; border-radius: 3px; } &::after { content: ''; position: absolute; height: 10px; width: 6px; border: 2px solid #fff; left: 6px; top: 9px; border-left: 0; border-top: 0; transform: rotate(45deg); opacity: 0; } } } .cs_radiobox { display: inline-flex; position: relative; padding-left: 30px; input { position: absolute; height: 100%; width: 100%; left: 0; top: 0; cursor: pointer; z-index: 2; opacity: 0; &:checked { + label { &::before { border-color: var(--accent); background-color: transparent; } &::after { opacity: 1; } } } } a { color: var(--accent); position: relative; z-index: 3; &:hover { text-decoration: underline; } } label { margin: 0; display: inline-block; img { margin-right: 10px; } &::before { content: ''; height: 20px; width: 20px; border: 1px solid var(--secondary); position: absolute; left: 0; top: 5px; border-radius: 50%; } &::after { content: ''; position: absolute; height: 12px; width: 12px; background-color: var(--accent); left: 4px; top: 9px; opacity: 0; border-radius: 50%; } } } .cs_payment_method_list { list-style: none; padding: 0; li { &:not(:last-child) { margin-bottom: 16px; } } } .daterangepicker { border-color: var(--border); border-radius: 5px; font-family: var(--primary); background-color: var(--web-wash); &:after, &::before { display: none; } td.off, td.off.in-range, td.off.start-date, td.off.end-date { background-color: var(--web-wash); } .calendar-table { background-color: var(--web-wash); th, td { font-size: 14px; padding: 2px 5px; width: 33px; } th { color: var(--primary); font-weight: 600; } td { color: var(--secondary); } } td.in-range { background-color: rgba(170, 132, 83, 0.2); color: var(--primary); } td.available { &:hover { background-color: rgba(170, 132, 83, 0.35); color: var(--accent); } } th.available { &:hover { background-color: var(--border); color: var(--accent); } } td.active, td.active:hover { background-color: var(--accent); color: #fff; } // available .drp-buttons { border-color: var(--border); } .drp-calendar { display: none; max-width: 320px; } td.disabled, option.disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } .applyBtn.btn.btn-primary { background-color: var(--accent); font-weight: 500; font-size: 14px; border-color: var(--accent); padding: 4px 12px; border-radius: 5px; &:hover { background-color: var(--primary); color: var(--web-wash); border-color: var(--primary); } } .drp-selected { display: none; } .calendar-table .next span, .calendar-table .prev span { border-color: var(--primary); } .drp-buttons { .btn.btn-default { color: var(--primary); font-size: 14px; font-weight: 600; &:hover { color: var(--secondary); } } } .calendar-table { border-color: var(--web-wash); } } .cs_quantity_wrap { .cs_quantity_dropdown { display: none; position: absolute; background-color: var(--web-wash); width: 300px; right: 0; top: 100%; margin-top: 5px; padding: 20px 20px; border-radius: 5px; border: 1px solid var(--border); z-index: 10; } &.active { .cs_quantity_dropdown { display: flex; } } } .cs_quantity_dropdown_item { display: flex; align-items: center; justify-content: space-between; width: 100%; } .cs_count { display: flex; align-items: center; text-align: center; .cs_quantity_decrement, .cs_quantity_increment { padding: 0; border: none; outline: none; background-color: transparent; height: 30px; width: 30px; font-size: 14px; border-radius: 5px; &:hover { background-color: var(--border); } } .cs_quantity_number { min-width: 40px; } } .ui-datepicker td span, .ui-datepicker td a { text-align: center; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border-color: var(--ternary); background: transparent; font-weight: normal; color: var(--primary); border-radius: 5px; &:hover { background-color: var(--ternary); } } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border-color: var(--accent); background-color: var(--accent) !important; color: #fff !important; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { color: var(--accent); } .ui-datepicker { width: 320px; padding: 5px; table th { color: var(--primary); } } .ui-widget.ui-widget-content { border-color: var(--ternary); } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 5px; } .ui-datepicker .ui-datepicker-header { padding: 5px 0; } .ui-widget-header { border: none; background: transparent; color: var(--primary); font-weight: bold; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 5px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 5px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 5px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 5px; } .cs_play_btn { position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; } .cs_play_btn_2 { background-color: rgba(27, 27, 27, 0.6); backdrop-filter: blur(10px); width: 115px; height: 115px; &::before { content: ''; position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-radius: 50%; opacity: 0; background-color: rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } svg { position: relative; z-index: 2; } &:hover { &::before { opacity: 1; } } &.cs_color_1 { background-color: var(--accent); } } .cs_play_btn_3 { position: relative; display: block; width: 115px; height: 115px; border-radius: 50%; padding: 18px 20px 18px 28px; display: flex; align-items: center; justify-content: center; &:before, &:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; height: 100%; background: var(--accent); border-radius: 50%; } &:before { z-index: 0; animation: pulse-border 1500ms ease-out infinite; } &:after { z-index: 1; transition: all 200ms; } svg { position: relative; z-index: 2; } } // .cs-player_btn span { // display: block; // position: relative; // z-index: 3; // width: 0; // height: 0; // border-left: 24px solid currentColor; // border-top: 16px solid transparent; // border-bottom: 16px solid transparent; // } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } .cs_video_block.cs_style_1 { height: 670px; @media (max-width: 991px) { height: 550px; } @media (max-width: 991px) { height: 420px; .cs_play_btn { transform: translate(-50%, -50%) scale(0.7); } } .cs_video_block_bg { border-radius: inherit; } .cs_video_block_title { background: linear-gradient( 180deg, #191919 0%, rgba(125, 126, 124, 0.3) 100% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } &.cs_color_1 { .cs_video_block_title { background: linear-gradient( 180deg, #fff 0%, rgba(126, 124, 124, 0.3) 100% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } &.cs_type_1 { height: 750px; @media (max-width: 1400px) { height: 600px; .cs_play_btn_2 { transform: scale(0.9); } } @media (max-width: 991px) { height: 450px; .cs_play_btn_2 { transform: scale(0.8); } } } &.cs_type_2 { height: 800px; border-radius: 25em 25em 0 0; overflow: hidden; @media (max-width: 1400px) { height: 600px; .cs_play_btn_2 { transform: scale(0.9); } } @media (max-width: 991px) { .cs_play_btn_2 { transform: scale(0.8); } } .cs_video_block_border { position: absolute; left: 30px; right: 30px; bottom: 30px; top: 30px; z-index: 2; border-radius: inherit; border: 1px solid var(--accent); } } &.cs_type_3 { height: 800px; @media (max-width: 991px) { height: 500px; .cs_play_btn_2 { transform: scale(0.8); } } } &.cs_type_4 { height: 550px; .cs_play_btn_2 { scale: 0.7; } } &.cs_type_5 { height: 650px; @media (max-width: 1199px) { height: 550px; } @media (max-width: 991px) { height: 450px; } .cs_play_btn_2 { scale: 0.7; } } &.cs_type_6 { height: 425px; .cs_play_btn_2 { scale: 0.7; } } } .cs_rating { width: 92px; height: 14px; position: relative; font-size: 14px; display: inline-flex; i { margin-right: 3px; } .cs_rating_percentage { position: absolute; height: 100%; width: 100%; left: 0; top: 0; display: flex; overflow: hidden; } .cs_rating_percentage { width: 50%; } } .cs_list.cs_style_1 { li { padding-left: 40px; position: relative; &:not(:last-child) { margin-bottom: 18px; } } svg { color: var(--accent); position: absolute; left: 0; top: 3px; } b { font-weight: 500; color: var(--primary); } } .cs_list.cs_style_2 { .cs_list_icon { height: 50px; width: 50px; flex: none; position: absolute; top: 27px; right: 0; transition: background-color 0.4s ease; overflow: hidden; svg { transition: all 0.3s; &:first-child { transform: translate(0, 0); } &:last-child { position: absolute; left: -10px; bottom: -10px; } } &:hover { svg { transition: all 0.3s; &:first-child { transform: translate(30px, -30px); } &:last-child { left: 18px; bottom: 18px; } } } } .cs_list_in { position: relative; z-index: 12; padding: 20px 60px 20px 0; } li { border-bottom: 1px solid var(--secondary); h2 { transition: all 0.4s ease; } &:hover { h2 { color: var(--accent); } .cs_list_icon { background-color: var(--accent); color: #fff; } } } } .cs_list.cs_style_3 { display: grid; grid-gap: 15px; grid-auto-rows: 1fr; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; max-width: 550px; li { position: relative; padding-left: 30px; img { position: absolute; left: 0; top: 5px; width: 20px; } } } .cs_grid_style_1, .cs_grid_style_3 { display: grid; grid-gap: 0px; grid-auto-rows: 1fr; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; } .cs_grid_style_1 { @media (max-width: 767px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 575px) { grid-template-columns: repeat(1, 1fr); } .cs_grid_item { &:first-child { grid-column: span 2; grid-row: span 2; .cs_gallery_item.cs_style_1 { height: 100%; } @media (max-width: 575px) { grid-column: initial; grid-row: initial; } } &:nth-child(2) { grid-row: span 2; @media (max-width: 575px) { grid-row: initial; } .cs_gallery_item.cs_style_1 { height: 100%; } } } } .cs_grid_style_2 { display: grid; grid-gap: 24px; grid-auto-rows: 1fr; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; @media (max-width: 991px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 575px) { grid-template-columns: repeat(1, 1fr); grid-gap: 24px 0; } @media (min-width: 576px) { .cs_grid_item { &:nth-child(4) { grid-column: span 2; } } } } .cs_grid_style_3 { @media (max-width: 767px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 575px) { grid-template-columns: repeat(1, 1fr); } .cs_grid_item { &:first-child { grid-row: span 2; @media (max-width: 575px) { grid-row: initial; } .cs_gallery_item.cs_style_1 { height: 100%; } } &:nth-child(3) { grid-column: span 2; grid-row: span 2; .cs_gallery_item.cs_style_1 { height: 100%; } @media (max-width: 575px) { grid-column: initial; grid-row: initial; } } } } .cs_grid_style_4 { display: grid; grid-gap: 24px; grid-auto-rows: 1fr; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; @media (max-width: 1199px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 767px) { grid-template-columns: repeat(1, 1fr); } .cs_grid_item { @media (min-width: 768px) { &:first-child { grid-column: span 2; } } } } .cs_gallery_item.cs_style_1 { padding-top: 100%; .cs_gallery_item_hover { position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; z-index: 1; background: rgba(27, 27, 27, 0.3); backdrop-filter: blur(2px); padding: 15px; transform: scale(0.5); opacity: 0; transition: all 0.5s ease; } &:hover { .cs_gallery_item_hover { opacity: 1; transform: scale(1); } } } .cs_gallery_item.cs_style_3 { height: 465px; @media (max-width: 1400px) { height: 400px; } @media (max-width: 1199px) { height: 335px; } @media (max-width: 991px) { height: 380px; } @media (max-width: 767px) { height: 275px; } @media (max-width: 575px) { height: 400px; } .cs_gallery_item_hover { position: absolute; left: 24px; top: 24px; right: 24px; bottom: 24px; backdrop-filter: blur(10px); background-color: rgb(255 255 255 / 95%); display: flex; justify-content: center; text-align: center; align-items: flex-end; padding: 40px 20px; opacity: 0; transition: all 0.4s ease; } .cs_hover_icon { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); display: flex; svg { opacity: 0; transform: scale(4); transition: all 0.4s ease; } } &:hover { .cs_gallery_item_hover { opacity: 1; } .cs_hover_icon { svg { opacity: 1; transform: scale(1); } } } &.cs_type_1 { height: 615px; @media (max-width: 1400px) { height: 460px; } @media (max-width: 1199px) { height: 410px; } @media (max-width: 991px) { height: 480px; } @media (max-width: 767px) { height: 380px; } @media (max-width: 575px) { height: 400px; } } } .cs_gallery_3_wrap { position: relative; &::before { content: ''; position: absolute; height: 600px; width: 100%; left: 0; top: 0; background-color: var(--primary); } .container { position: relative; } } .cs_custom_pointer_wrap { position: relative; .cs_mouse_point { position: absolute; z-index: 10; } .cs_mouse_point.cs_style_1 { height: 115px; width: 115px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -58%) scale(0); display: none; background-color: rgba(27, 27, 27, 0.6); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: #fff; opacity: 0; transition: transform ease 0.3s, opacity ease 0.3s; } .cs_mouse_point.cs_style_2 { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); color: var(--primary); font-family: var(--primary-font); font-size: 38px; white-space: nowrap; margin: 15px 0 0 15px; padding: 8px 30px 8px 20px; line-height: 1.4em; opacity: 0; transform: scale(0); transition: transform ease 0.3s, opacity ease 0.3s; } .cs_mouse_point.cs_style_3 { width: 330px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform ease 0.4s, opacity ease 0.4s; pointer-events: none; } &:hover { .cs_mouse_point.cs_style_1 { opacity: 1; transform: translate(-50%, -58%) scale(1); @media (max-width: 991px) { transform: translate(-50%, -58%) scale(0.6); } } .cs_mouse_point.cs_style_3 { opacity: 1; transform: translate(-50%, -50%) scale(1); } .cs_mouse_point.cs_style_2 { opacity: 1; transform: scale(1); } } } .cs_review_box.cs_style_1 { display: flex; align-items: center; box-shadow: 0px 10px 25px 8px rgba(27, 27, 27, 0.04); gap: 20px; padding-right: 20px; .cs_review_box_left { padding: 15px 20px; border-right: 1px solid var(--border); } } .cs_hover_layer, .cs_hover_layer_1, .cs_hover_layer_2, .cs_hover_layer_4 { position: relative; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transform: perspective(600px) translate3d(0, 0, 0); } .cs_section_heading_wrap_1 { display: flex; align-items: center; justify-content: space-between; gap: 0 15%; @media (max-width: 1400px) { gap: 0 8%; } @media (max-width: 1199px) { gap: 30px 3%; flex-wrap: wrap; } .cs_section_heading_icon { animation: rotate-anim 40s infinite; @media (max-width: 991px) { display: none; } } } .cs_section_heading.cs_style_1 { @media (max-width: 575px) { br { display: none; } } &.cs_type_1 { .cs_section_subtitle { display: inline-flex; position: relative; align-items: center; gap: 12px; &::after { content: ''; display: block; height: 1px; width: 50px; background-color: var(--accent); } } } } .cs_accordians.cs_style_1 { .cs_accordian_toggle { height: 14px; width: 14px; display: inline-block; position: absolute; top: 28px; left: 0; &::before, &::after { content: ''; height: 2px; width: 100%; background-color: var(--primary); position: absolute; left: 0; top: 50%; margin-top: -1px; border-radius: 3px; } &::after { transform: rotate(90deg); transition: all 0.3s ease; } } .cs_accordian_head { position: relative; padding: 18px 0 18px 26px; cursor: pointer; transition: all 0.3s ease; } .cs_accordian_body { padding-bottom: 18px; p { margin: 0; } } .cs_accordian { &:not(:last-child) { border-bottom: 1px solid var(--accent); } &.active { .cs_accordian_head { padding-bottom: 5px; } .cs_accordian_toggle { &::after { transform: rotate(0deg); } } } } } .cs_shape_wrap { .cs_shape_1 { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); } > * { &:not(.cs_shape_1) { position: relative; z-index: 3; } } } .cs_google_map.cs_style_1 { height: 600px; @media (max-width: 991px) { height: 400px; } iframe { border: none; filter: grayscale(100%); height: 100%; width: 100%; } &.cs_type_1 { height: 850px; @media (max-width: 991px) { height: 550px; } @media (max-width: 575px) { height: 450px; } } } .cs_page_heading { height: 600px; padding: 150px 0 50px; @media (max-width: 1400px) { height: 500px; } @media (max-width: 991px) { height: 400px; padding: 120px 0 50px; } &.cs_size_1 { height: 300px; } &.cs_size_2 { height: 500px; } } .cs_page_heading_2 { height: 650px; padding: 160px 0 50px; position: relative; display: flex; align-items: flex-end; .container { position: relative; z-index: 1; } &:after { background-image: linear-gradient(0, rgba(0, 0, 0, 0.7), transparent); bottom: -2px; content: ''; height: 50%; position: absolute; width: 100%; } .cs_page_heading_in { display: flex; align-items: flex-end; gap: 10px 30px; justify-content: space-between; @media (max-width: 767px) { flex-direction: column-reverse; align-items: center; gap: 10px; text-align: center; } p { color: rgba(255, 255, 255, 0.7); margin-bottom: 5px; } } .breadcrumb { margin-bottom: 0; margin-top: 8px; color: rgba(255, 255, 255, 0.7); font-size: inherit; } .breadcrumb-item { &.active { color: rgba(255, 255, 255, 0.7); } &::before { color: rgba(255, 255, 255, 0.7); } } } .cs_sticky_1 { position: sticky; top: 0; } ////////////////////////// .cs_moving_text_wrap { overflow-x: hidden; &:hover { .cs_moving_text { animation-play-state: paused; } } } .cs_moving_text_in { display: flex; flex-wrap: nowrap; white-space: nowrap; min-width: 100%; } .cs_moving_text { display: flex; flex-shrink: 0; align-items: center; padding: 15px 5px; animation: slide-left 10s linear infinite; > * { margin: 0 20px; } } .cs_moving_text_wrap { &.cs_style_1 { .cs_moving_text { animation-duration: 20s; } &:hover { .cs_moving_text { animation-play-state: paused; } } &.cs_type_1 { transform: rotate(-3deg); margin-left: -10px; width: calc(100% + 20px); } img { @media (max-width: 1400px) { max-height: 85px; } @media (max-width: 991px) { max-height: 62px; } } } } @keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } .cs_half_bg { .cs_half_bg_right { position: absolute; height: 100%; left: 0; top: 0; width: 50%; @media (max-width: 991px) { width: 100%; } } > * { &:not(.cs_half_bg_right) { position: relative; z-index: 5; } } } .cs_full_width_right { width: 100vw; .cs_iconbox.cs_style_3 { width: 416px; @media (max-width: 991px) { width: 350px; } @media (max-width: 400px) { width: 330px; } } } .cs_width_left_50_vw { height: 100%; width: 50vw; margin-left: calc(101.8% - 50vw); @media (max-width: 991px) { margin-left: 0; width: 100%; } } .cs_width_right_50_vw { width: calc(50vw - 1.8%); @media (max-width: 991px) { width: 100%; } } .cs_width_right_50_vw-110 { width: calc(50vw - 110px); @media (max-width: 1400px) { width: calc(50vw - 55px); } @media (max-width: 991px) { width: 100%; } } .faq_thumb_1 { height: 700px; @media (max-width: 991px) { height: 500px; } } .cs_tab { display: none; &.active { display: block; } } .cs_tabs.cs_style_1 { .cs_tabs_heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 30px; } } .cs_tab_links.cs_style_1 { display: inline-flex; flex-wrap: wrap; background-color: #313131; border-radius: 20px; li { border-radius: inherit; &.active { a { background-color: var(--accent); color: #fff; } } } a { display: inline-block; padding: 11px 40px; border-radius: inherit; @media (max-width: 991px) { padding: 11px 30px; } @media (max-width: 575px) { padding: 11px 17px; } } } .cs_tabs.cs_style_2 { display: flex; gap: 24px; } .cs_tab_links.cs_style_2 { flex: none; width: 306px; display: flex; flex-direction: column; gap: 24px; li { height: 171px; width: 100%; a { display: block; height: 100%; width: 100%; border-radius: 5px; cursor: pointer; } img { height: 100%; width: 100%; object-fit: cover; border-radius: inherit; } &.active { a { box-shadow: 0 0 0px 2px var(--accent); } } } } @keyframes rotate-anim { 100% { transform: rotate(360deg); } } .cs_contact_info_boxes { display: flex; align-items: center; justify-content: space-around; gap: 25px 40px; flex-wrap: wrap; .cs_iconbox.cs_style_4 { max-width: 320px; } @media (max-width: 1199px) { gap: 25px 20px; } @media (max-width: 767px) { flex-direction: column; align-items: flex-start; } } .cs_author_card { .cs_author_img { width: 250px; height: 250px; margin-left: auto; margin-right: auto; position: relative; padding: 15px; border-radius: 50%; svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } img { height: 100%; width: 100%; object-fit: cover; border-radius: inherit; } } .cs_author_meta { img { max-height: 100px; } } .cs_author_name { span { display: inline-block; position: relative; padding: 0 15px; &::before, &::after { content: ''; position: absolute; height: 1px; width: 30px; background-color: var(--border); top: 50%; } &::before { left: 100%; } &::after { right: 100%; } } } } .cs_booking_card { border: 1px solid var(--ternary); padding: 20px 30px; .cs_booking_time { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 20px; } } .cs_booking_info_list { li { display: flex; justify-content: space-between; padding: 6px 0; &:not(:last-child) { border-bottom: 1px solid var(--ternary); } } } .lg-thumb.lg-group { margin-left: auto; margin-right: auto; } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: var(--accent); } .lg-img-wrap { padding: 50px 70px !important; } .lg-sub-html { color: var(--primary); display: none; } .lg-actions .lg-prev { left: 15px; } .lg-actions .lg-next { right: 15px; } .cs_debit_card_box { display: none; } .cs_expent_section { display: flex; @media (max-width: 991px) { flex-direction: column; } .cs_hover_active { flex: 1; transition: all 0.4s ease; @media (max-width: 991px) { &.active { flex: 1.1; } } } } .cs_sticky_top_100 { position: sticky; top: 100px; } @media (max-width: 991px) { .cs_mobile_reverse { flex-direction: column-reverse; } .cs_mobile_reverse_sp { display: flex; flex-direction: column-reverse; } .cs_form_heading_1 { br { display: none; } } .cs_row_gap_lg_10 { margin-left: -5px; margin-right: -5px; > * { padding-left: 5px; padding-right: 5px; } } .cs_gap_y_lg_80 { gap: 80px 0; } }