html,
body {
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
:root {
--primary: #051036;
--primary-rgb: 5, 16, 54;
--secondary: #12d069;
--secondary-rgb: 18, 208, 105;
--accent: #3554D1;
--bg-main: #f8fafc;
--text-main: #1e293b;
--text-muted: #64748b;
--border-main: #e2e8f0;
--card-bg: rgba(255, 255, 255, 0.85);
--glass-blur: blur(12px);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
* {
margin: 0;
box-sizing: border-box;
}
body,
html {
font-family: 'Poppins', sans-serif;
font-size: 14px;
background-color: #ffffff !important;
color: var(--text-main);
line-height: 1.6;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
top: 0 !important;
position: relative !important;
}
img {
max-width: 100%
}
input,
textarea,
button,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
outline: none;
border: none;
resize: none;
}
a {
text-decoration: none;
color: inherit
}
p {
margin-bottom: 1rem;
}
.w-full {
width: 100%;
}
/* html, body { */
html {
overflow-x: hidden;
overflow-y: auto;
}
@media (max-width: 1199px) {
.home-page {
max-width: unset !important;
}
}
.text-center {
text-align: center;
}
.home-page {
position: relative;
padding-top: 16rem;
width: calc(100% - 40px);
max-width: 1500px;
/* max-width: calc(100% - 40px); */
margin: 0 auto;
z-index: 99;
}
.home-page::before {
border-radius: 20px;
z-index: 2;
pointer-events: none;
background: linear-gradient(transparent, black);
content: '';
display: inline-block;
position: absolute;
inset: 20px;
}
.home-page h1 {
width: 100%;
text-align: center;
font-size: 4rem;
font-weight: 700;
color: white;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 100px;
position: relative;
z-index: 2;
letter-spacing: -1px;
}
.home-page .bg-image {
width: 100%;
position: absolute;
height: 100%;
top: 0;
z-index: 1;
border-radius: 20px;
overflow: hidden;
padding: 20px;
border: 1px solid var(--main-border);
background-color: #fff;
box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, .1);
}
.home-page .bg-image :is(img, video) {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0;
border-radius: 20px;
border: 1px solid var(--main-border);
}
/* Premium Internal Hero */
.internal-hero {
position: relative;
padding: 16rem 0 12rem;
width: calc(100% - 40px);
max-width: 1500px;
margin: 0 auto 80px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
z-index: 99;
}
.internal-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
z-index: 2;
border-radius: 20px;
}
.internal-hero .bg-image {
position: absolute;
inset: 0;
z-index: 1;
}
.internal-hero .bg-image video,
.internal-hero .bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.internal-hero .container {
position: relative;
z-index: 3;
text-align: center;
}
.internal-hero .hero-content small {
display: block;
color: #f7941d;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 20px;
animation: fadeInUp 0.8s ease-out;
}
.internal-hero .hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
color: white;
margin-bottom: 24px;
line-height: 1.2;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1s ease-out;
}
.internal-hero .hero-content p {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.85);
max-width: 90%;
margin: 0 auto;
line-height: 1.7;
white-space: normal;
animation: fadeInUp 1.2s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 991px) {
.internal-hero {
width: 100%;
border-radius: 0;
margin: 0 0 40px 0;
padding: 12rem 0 9rem !important;
}
.internal-hero::before,
.internal-hero .bg-image video {
border-radius: 0;
}
.internal-hero .hero-content h1 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.internal-hero {
padding: 12rem 0 10rem !important;
}
.internal-hero .hero-content h1 {
font-size: 1.6rem;
padding: 0 10px;
line-height: 1.4;
margin-bottom: 10px;
}
.internal-hero .hero-content p {
white-space: nowrap;
font-size: clamp(10px, 2.5vw, 13px);
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding: 0 10px;
}
}
@media (max-width: 480px) {
.internal-hero {
padding: 10rem 0 10rem !important;
}
.internal-hero .hero-content h1 {
font-size: 1.35rem;
line-height: 1.5;
margin-bottom: 8px;
padding-bottom: 0;
}
.internal-hero .hero-content p {
font-size: clamp(9px, 3.2vw, 12px);
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.home-page .booking {
width: 90%;
margin: 0 5%;
margin-top: 5%;
/* width: 100%; */
transform: translateY(20px);
position: relative;
z-index: 100;
}
.home-page .booking .card {
width: 100%;
background: var(--card-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
box-shadow: var(--shadow-lg);
}
.home-page .booking .card div {
display: flex;
flex-direction: column;
gap: 2px;
border-left: 1px solid var(--border-main);
padding: 1rem 1.5rem;
width: 100%;
transition: all 0.3s ease;
}
.home-page .booking .card div:hover {
background: rgba(255, 255, 255, 0.3);
}
.home-page .booking .card label {
color: var(--primary);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.home-page .booking .card div:first-child {
border: none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.home-page .booking .card div:last-child {
border: none;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.home-page .booking .card input,
select {
border: 0;
}
.home-page .booking .card button {
padding: 1.25rem 2.5rem;
border-radius: 1rem;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 0.75rem;
background-color: var(--primary);
color: #fff;
cursor: pointer;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-page .booking .card button:hover {
background-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(53, 84, 209, 0.2);
}
.home-page .booking .card button svg {
width: 2rem;
}
.home-page .card-image {
margin-top: -2rem;
position: relative;
z-index: -1;
}
.home-page .card-image img {
border-radius: 0.5rem;
}
.home-page-item {
margin-top: 10rem;
}
.home-page-item h1 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 0.5rem;
}
.home-page-item h2 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 0.5rem;
}
.home-page-item p {
margin-top: 16px;
}
.home-page-item .card {
text-align: center;
padding: 2rem;
box-shadow: 0 0 15px #ebebeb;
}
@media (max-width: 991px) {
.home-page {
padding-top: 4rem;
}
.home-page h1 {
font-size: 1.5rem;
color: white;
text-shadow: 1px 1px #000000;
font-weight: 400;
padding: 1rem;
margin: 0;
}
.home-page .booking {
width: 100%;
margin: 0;
margin-top: 3rem;
}
.home-page>.container {
padding: 0;
}
.home-page .booking .card {
flex-direction: column;
}
.home-page .booking .card>div {
border: none;
border-top: 1px solid #eee;
}
.home-page .card-image {
margin-top: 0;
display: flex;
}
.home-page .card-image img {
border-radius: 0;
display: flex;
}
/* footer .footer-bottom { flex-direction: column; align-items: center; justify-content: center; gap: 30px; } */
}
.faq {
display: flex;
flex-direction: column;
gap: 20px;
}
.faq .item {
border: 1px solid #eee;
padding: 20px;
display: flex;
flex-direction: column;
transition: .4s ease;
height: auto;
overflow: hidden;
}
.faq .item .h4 {
font-size: 16px;
}
.faq .item .desc {
overflow: hidden;
flex: 0;
}
.faq .item>div:first-child {
display: flex;
align-items: center;
cursor: pointer;
}
.faq .item>div:first-child>span {
flex: 0 0 40px;
display: block;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #eee;
position: relative;
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: .75rem;
}
.faq .item>div:first-child>span::before,
.faq .item>div:first-child>span::after {
content: '';
display: block;
width: calc(100% - 20px);
height: 2px;
position: absolute;
background-color: black;
transition: .4s ease;
}
.faq .item>div:first-child>span::before {
transform: rotate(90deg);
}
.faq .item.active>div:first-child>span::before {
transform: rotate(0deg);
}
.faq .item>div:last-child {
max-height: 0;
overflow: hidden;
transition: .4s ease;
}
.faq .item.active>div:last-child {
max-height: 300px;
}
/* Mixed */
.cars-carousel .swiper-slide .image {
border-radius: 5px;
overflow: hidden;
position: relative;
}
.cars-carousel .swiper-slide .image .image-link-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.cars-carousel .swiper-slide .image img {
max-width: 100%;
display: block;
border-radius: 5px;
}
.cars-carousel .swiper-slide .title {
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
margin-top: 5px;
margin-bottom: 10px;
}
.cars-carousel .swiper-slide .title span {
opacity: .5;
font-weight: 400;
font-size: 14px;
}
.cars-carousel .swiper-slide .features {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.cars-carousel .swiper-slide .feature {
display: flex;
align-items: center;
margin-right: 15px;
}
.cars-carousel .swiper-slide .feature svg {
width: 22px;
height: 22px;
margin-right: 5px;
}
.cars-carousel .swiper-slide .feature span {
font-size: 13px;
}
.cars-carousel .swiper-slide .details {
display: flex;
align-items: center;
font-size: 12px;
}
.cars-carousel .swiper-slide .details>div {
display: flex;
align-items: center;
margin-right: 10px;
}
.cars-carousel .swiper-slide .details .rating {
width: 30px;
height: 30px;
background-color: var(--secondary);
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.cars-carousel .swiper-slide .details .type {
font-weight: 600;
letter-spacing: 1px;
}
.cars-carousel .swiper-slide .details .views {
opacity: .5
}
.cars-gallery-carousel .nav-control {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: block;
width: calc(100% - 2rem);
height: 60px;
}
.cars-gallery-carousel .swiper-button-prev,
.cars-gallery-carousel .swiper-button-next {
width: 30px;
height: 30px;
background: white;
border-radius: 100%;
opacity: 0;
transition: .4s ease;
}
.cars-gallery-carousel .swiper-button-prev::after,
.cars-gallery-carousel .swiper-button-next::after {
font-size: 13px;
color: black;
}
.cars-gallery-carousel .swiper-button-prev:hover,
.cars-gallery-carousel .swiper-button-next:hover {
background: var(--secondary);
}
.cars-gallery-carousel .swiper-pagination-bullet {
background: white;
opacity: 0;
transition: .4s ease;
}
.cars-gallery-carousel .swiper-pagination-bullet-active {
opacity: 1 !important;
}
.cars-gallery-carousel:hover .swiper-pagination-bullet {
opacity: .5;
}
.cars-gallery-carousel:hover .swiper-button-prev,
.cars-gallery-carousel:hover .swiper-button-next {
opacity: 1;
}
.cars-gallery-carousel .like-button {
position: absolute;
top: 1.75rem;
right: 1.75rem;
width: 30px;
height: 30px;
background: white;
border-radius: 100%;
opacity: 1;
transition: .4s ease;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
.cars-gallery-carousel .like-button:hover {
background: var(--secondary);
}
.cars-gallery-carousel .like-button svg {
width: 20px;
height: 20px;
position: absolute;
top: 7px;
left: 7px;
}
.cars-carousel .content {
position: relative;
}
.cars-carousel .content-link-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.cars-carousel>.swiper-nav-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.cars-carousel>.swiper-nav-container>.swiper-pagination {
position: static;
width: auto;
display: flex;
align-items: center;
}
.cars-carousel>.swiper-nav-container>.swiper-button-prev,
.cars-carousel>.swiper-nav-container>.swiper-button-next {
position: static;
width: 40px;
height: 40px;
margin: 0;
}
.cars-carousel>.swiper-nav-container>.swiper-button-prev::after,
.cars-carousel>.swiper-nav-container>.swiper-button-next::after {
position: static;
font-size: 25px;
color: black;
}
.cars-carousel .main-pagination .swiper-pagination-bullet {
transition: .4s ease width, .4s ease height;
}
.cars-carousel .main-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
width: 5px;
height: 5px;
}
.cars-carousel .main-pagination .swiper-pagination-bullet-active {
background: var(--secondary) !important;
}
/* Footer */
/* footer { margin-top: 100px; background: #051036; color: white; } footer * { font-size: 15px; font-weight: 400; } .footer-top { padding: 60px 0; } footer .small-title { font-size: 13px; } footer .small-title-link { font-size: 17px; color: inherit; text-decoration: none; transition: .4s ease; font-weight: 500; margin-top: 5px; } footer .small-title-link:hover { color: #6084ff; } .footer-menu { display: flex; flex-direction: column; } .footer-menu-item { display: block; color: white; text-decoration: none; font-weight: 300; font-size: 13.5px; margin-bottom: 10px; transition: .4s ease; } .footer-menu-item:hover { color: #0a58ca } footer .mail-input-group { position: relative; height: 60px; background: white; border-radius: 10px; display: flex; align-items: center; padding: 1.5rem; } footer .mail-input-group input { flex: 1; color: black; } footer .mail-input-group button { background: none; color: #0a58ca; cursor: pointer; text-decoration: underline; } .footer-bottom .left-side { display: flex; align-items: center; flex-wrap: wrap; } .footer-bottom .bottom-menu { display: flex; align-items: center; flex-wrap: wrap; margin-left: 40px; gap: 1rem; } .footer-bottom .bottom-menu-item { color: white; font-weight: 300; text-decoration: none; transition: .4s ease } .footer-bottom .bottom-menu-item:hover { color: #0a58ca; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .5); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .footer-bottom .right-side { display: flex; align-items: center; } .footer-bottom .social-media-links { display: flex; align-items: center; flex-wrap: wrap; } .footer-bottom .social-media-links .item { fill: white; width: 36px; height: 36px; } .footer-bottom .social-media-links .item svg { width: 24px; height: 24px; transition: .4s ease; } .footer-bottom .social-media-links .item:hover svg { fill: #0a58ca } .footer-bottom .generator { margin-left: 15px } .footer-bottom .generator img { width: 100%; max-width: 120px; filter: invert(1); } */
html.mobile-menu-active {
overflow-y: hidden;
}
.page-heading {
padding: 110px 0;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 60%);
position: relative;
color: white;
}
.page-heading h1 {
font-size: 3rem;
margin-bottom: -5px;
letter-spacing: 1px;
}
.page-heading .container {
display: flex;
flex-direction: column;
position: relative;
}
.page-heading .bg-image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-heading .bg-image img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
object-position: center;
}
.page-heading .breadcrumb {
display: flex;
align-items: center;
gap: 20px;
}
.page-heading .breadcrumb .breadcrumb-item {
color: white;
text-decoration: none;
}
.page-heading .breadcrumb .item-link::after {
content: '>';
margin-left: 20px;
font-size: 20px;
}
header {
background: transparent !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 1000 !important;
padding: 20px 0 !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0 !important;
border-bottom: none !important;
box-shadow: none !important;
}
header>.container {
padding: 0.75rem 2rem;
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 1rem;
border: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto !important;
}
header .logo img {
height: 38px;
width: auto;
transition: transform 0.3s ease;
}
header .logo img:hover {
transform: scale(1.05);
}
header.sticky {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem;
}
header.sticky>.container {
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cars-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 2.5rem;
margin-top: 2rem;
}
.cars-grid-item {
display: flex;
flex-wrap: wrap;
background: white;
border-radius: 1.25rem;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-main);
transition: all 0.3s ease;
}
.cars-grid-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--accent);
}
.cars-grid-item .item-slider-wrapper {
width: 100%;
max-width: 250px;
}
.cars-grid-item .item-slider-wrapper {
height: 250px;
overflow: hidden;
}
.cars-grid-item .item-slider-wrapper,
.cars-grid-item .item-slider-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cars-grid-item .item-content-wrapper {
flex: 1;
display: flex;
justify-content: space-between;
padding: 2rem;
gap: 2rem;
}
.cars-grid-item .item-left .item-title {
font-weight: 700;
font-size: 1.25rem;
color: var(--primary);
margin-bottom: 0.5rem;
}
.cars-grid-item .item-left .item-payment-selection p {
font-weight: 400;
margin-top: 2rem;
color: red;
}
.cars-grid-item .item-left .payment-options {
display: flex;
gap: 1rem;
font-size: .85rem;
flex-wrap: wrap
}
.cars-grid-item .item-left .payment-options div input {
position: absolute;
opacity: 0;
}
.cars-grid-item .item-left .payment-options label {
display: flex;
justify-content: center;
align-items: center;
background: white;
border: 1px solid #eee;
border-radius: 3px;
padding: .5rem .75rem;
cursor: pointer;
transition: .4s ease;
}
.cars-grid-item .item-left .payment-options input:hover~label {
background: #eee;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05)
}
.cars-grid-item .item-left .payment-options input:checked~label {
background: #051036;
color: white;
}
.cars-grid-item .item-rating {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-bottom: 1.5rem
}
.cars-grid-item .item-rating .rating-info {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.cars-grid-item .item-rating .rating-point {
background: var(--secondary);
width: 2.75rem;
height: 2.75rem;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: .9rem;
font-weight: 600
}
.cars-grid .item-reservation-button {
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
border-radius: 0.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #000 !important;
color: white;
margin: 0;
width: auto;
padding: 0.75rem 1.5rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.cars-grid .item-reservation-button:hover {
background: #333 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.cars-grid .item-reservation-button svg {
width: 25px;
height: 25px;
margin-left: 1.5rem;
transition: .4s ease;
}
.cars-grid .item-reservation-button svg path {
fill: white;
}
.cars-grid .item-slider .nav-control {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: block;
width: calc(100% - 2rem);
height: 60px;
}
.cars-grid .item-slider .swiper-button-prev,
.cars-grid .item-slider .swiper-button-next {
width: 30px;
height: 30px;
background: white;
border-radius: 100%;
opacity: 0;
transition: .4s ease;
}
.cars-grid .item-slider .swiper-button-prev::after,
.cars-grid .item-slider .swiper-button-next::after {
font-size: 13px;
color: black;
}
.cars-grid .item-slider .swiper-button-prev:hover,
.cars-grid .item-slider .swiper-button-next:hover {
background: var(--secondary);
}
.cars-grid .item-slider .swiper-pagination-bullet {
background: white;
opacity: 0;
transition: .4s ease;
}
.cars-grid .item-slider .swiper-pagination-bullet-active {
opacity: 1 !important;
}
.cars-grid .item-slider:hover .swiper-pagination-bullet {
opacity: .5;
}
.cars-grid .item-slider:hover .swiper-button-prev,
.cars-grid .item-slider:hover .swiper-button-next {
opacity: 1;
}
@media (min-width: 0) and (max-width: 767px) {
.cars-grid-item {
height: auto;
flex-direction: column;
}
.cars-grid {
display: block;
}
.cars-grid-item .item-slider-wrapper {
max-width: 100%;
}
.cars-grid-item .item-content-wrapper {
flex-direction: column;
}
.cars-grid-item .item-right {
margin-top: 1.75rem;
display: flex;
justify-content: center;
flex-direction: column;
}
.cars-grid-item .item-rating {
justify-content: center
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.cars-grid-item .item-content-wrapper {
flex-direction: column;
align-items: flex-start;
}
.cars-grid-item .item-right {
margin-top: 1.5rem;
}
.cars-grid-item .item-rating {
justify-content: flex-start;
}
.cars-grid .item-reservation-button {
padding: .5rem 1rem;
font-size: .8rem
}
}
@media (max-width: 1024px) {
.home-page .bg-image img {
width: 100%;
height: 27%;
object-fit: cover;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.cars-grid .item-reservation-button {
padding: .5rem 1rem;
font-size: .8rem
}
}
.location-infos {
background: white;
box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, .1);
border-radius: 5px;
}
.location-infos .item {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 2rem;
}
.location-infos .item+.item {
border-top: 1px solid #eee;
}
.location-infos .item span {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: .5rem
}
.location-infos .item small {
font-size: .9rem;
font-weight: 400;
opacity: .7
}
.cars-grid hr {
border: none;
border-top: 1px solid #eee;
}
.map-area {
margin-top: 20px;
height: 250px;
border-radius: 4px;
overflow: hidden;
display: none;
}
.map-area .detail {
width: 100%;
height: 100%;
}
/* Yeni */
.booking-form {
/* background-color: #fff;
box-shadow: 0 0 20px 0 rgba(0,0,0,.1); */
/* border-radius: 4px; */
display: flex;
/* padding: 20px; */
gap: 20px;
flex-wrap: wrap;
position: relative;
padding-bottom: 40px;
width: 100%;
}
.booking-form.v2 {
padding: 0;
}
.booking-form .form-column {
flex: auto;
}
.booking-form .form-column.column-from-to {
display: flex;
flex: 1;
gap: 20px;
}
.booking-form .column-date-return-person {
display: flex;
flex: 1;
gap: 20px;
position: relative;
z-index: 2;
}
.booking-form .form-column.column-from-to .form-textbox::placeholder {
opacity: 0;
}
.booking-form .form-column.column-from-to .form-input-container {
flex: 1;
position: relative;
}
.form-input-container.error {
border-color: #ff0000 !important;
background-color: #ff00000f;
}
.booking-form .form-column.column-from-to .form-input-container .form-input-block {
position: relative;
}
.booking-form .form-column.column-from-to .form-input-container .form-input-block small {
position: absolute;
top: 20px;
transition: all .3s ease;
}
.booking-form .form-column.column-from-to .form-input-container.active .form-input-block small {
top: 100%;
}
.booking-form .form-column.column-from-to .form-input-container .form-input-block>label {
transition: all .3s ease;
position: relative;
top: 0;
white-space: nowrap;
}
.booking-form .form-column.column-from-to .form-input-container.active .form-input-block>label {
position: relative;
top: -5px;
font-size: 10px;
}
.booking-form .form-input-container {
display: flex;
align-items: center;
border: 2px solid #eee;
padding: 20px 30px;
border-radius: 10px;
height: 100%;
height: 110px;
}
.form-date-container {
height: 110px !important;
}
.form-date-container.v2 {
height: 80px !important;
}
.form-date-container.v2 .form-input-container.small>.form-input-block>label {
margin-bottom: 2px;
}
.booking-form .form-date-container .form-input-container {
height: auto !important;
}
.booking-form .form-input-container.small {
align-items: flex-start;
}
.booking-form .form-input-container.small>.form-input-block>label {
margin-bottom: 10px;
font-size: 10px;
font-weight: 600;
transition: all .3s ease;
}
.booking-form .form-input-container .form-input-icon {
width: 40px;
display: flex;
align-items: center;
height: 100%;
font-size: 30px;
}
.booking-form .form-input-container .form-input-icon img {
width: 25px;
}
.booking-form .form-input-container .form-input-icon svg {
width: 42px;
transform: translateX(-14px) translateY(-3px);
}
.booking-form .form-input-container .form-input-icon .from-icon {
color: #0fb85f;
}
.booking-form .form-input-container .form-input-icon .to-icon {
color: var(--secondary);
}
.booking-form .form-input-container .form-input-icon .date-icon {
color: #7a858a;
}
.booking-form .form-input-container .form-input-block {
flex: 1;
}
.booking-form .form-input-container .form-input-block label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555;
}
.booking-form .form-input-container .form-input-block small {
display: block;
font-size: 10px;
font-weight: 400;
color: #999;
}
.booking-form .form-input-container .form-input-block .form-textbox {
width: 100%;
border: 0;
outline: 0;
font-size: 14px;
font-weight: 600;
color: #000;
padding: 0;
margin: 0;
background-color: transparent;
}
.booking-form .form-input-group {
height: 100%;
display: flex;
gap: 20px;
}
.booking-form .form-input-group.fill {
flex: 1
}
.fill {
flex: 1;
}
.form-switch {
position: relative;
display: inline-block;
width: 80px;
height: 35px;
margin: 0;
padding: 0;
border-radius: 100px;
overflow: hidden;
cursor: pointer;
background-color: #ddd;
}
.form-switch input {
z-index: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.form-switch .form-switch-ball {
position: absolute;
top: 5px;
left: 6px;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
transition: all .3s ease;
z-index: 3;
}
.form-switch input:checked~.form-switch-ball {
left: calc(100% - 6px);
transform: translateX(-100%);
}
.form-switch input:checked~.form-bg {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--secondary);
transition: all .3s ease;
}
.form-selectbox {
/* position: relative; */
height: 35px;
display: flex;
align-items: center;
}
.form-selectbox-options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
display: none;
max-height: 200px;
overflow-y: auto;
z-index: 100;
}
.form-selectbox-option {
padding: 10px 20px;
font-size: 14px;
font-weight: 400;
color: #000;
cursor: pointer;
transition: all .3s ease;
}
.form-selectbox-option:hover,
.form-selectbox-option.active {
background-color: #eee;
}
.form-selectbox-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #000;
cursor: pointer;
transition: all .3s ease;
position: relative;
width: 100%;
}
.form-selectbox-label::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000;
transform: translateY(-50%);
transition: all .3s ease;
}
.form-map-results {
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 100%;
max-width: 400px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
max-height: 200px;
overflow-y: auto;
}
.form-map-results li {
list-style: none;
padding: 10px 20px;
font-size: 14px;
font-weight: 400;
color: #000;
cursor: pointer;
transition: all .3s ease;
display: flex;
align-items: flex-start;
font-size: 13px;
font-weight: 500;
}
.form-map-results li i {
margin-right: 10px;
font-size: 20px;
}
.form-map-results li:hover {
background-color: #eee;
}
.form-date-select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0 !important;
cursor: pointer;
z-index: 2;
}
.booking-form .form-input-container {
position: relative;
}
.booking-form .form-input-container.date.active small {
display: none;
}
#formDateReturn {
display: none;
border: 2px solid #eee;
border-radius: 10px;
padding: 20px 15px;
}
#formDateReturn.error {
border-color: #ff0000 !important;
background-color: #ff00000f;
}
#formDateReturn .form-input-container {
flex: 1;
padding: 0;
border: none;
border-radius: 0;
position: static;
}
#formDateReturn {
position: relative;
}
#formDateReturn .form-input-container:last-child {
border-left: 1px solid #eee;
padding-left: 15px;
}
#formDateReturn .form-date-select {
width: 0;
height: 0;
}
#formDateReturn .form-input-block .dayNameString {
display: none;
}
.booking-form .date-time-value {
white-space: nowrap;
}
.booking-form .form-footer {
position: absolute;
flex: 0 0 100%;
display: flex;
justify-content: center;
align-items: center;
top: calc(100% - 20px);
/* right: 20px; */
left: 50%;
transform: translateX(-50%);
}
.booking-form .form-footer .btn {
display: flex;
align-items: center;
padding: 15px 30px;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
}
.booking-form .form-footer .btn.btn-primary {
background-color: #000;
color: #fff;
}
.booking-form .form-footer .btn.btn-primary:hover {
background-color: #333;
}
.booking-form .form-footer .btn svg {
margin-right: 10px;
width: 30px;
height: 30px;
}
@media (max-width: 1199px) {
.booking-form .form-column.column-from-to,
.booking-form .column-date-return-person {
flex-direction: column;
}
.booking-form .column-date-return-person .form-input-container {
width: 100%;
}
#formReturnAndPerson,
#formReturnAndPerson .form-input-container {
flex: unset;
z-index: 0;
}
.booking-form {
padding-bottom: 40px !important;
}
.booking-form .form-footer {
width: 100%;
position: static !important;
transform: unset
}
.booking-form .form-footer .btn {
width: 100%;
justify-content: center;
}
}
.ui-form-button {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1rem 2.5rem;
background-color: #051036;
font-size: 13px;
color: white;
text-decoration: none;
transition: .4s ease;
border-radius: 4px;
cursor: pointer;
}
.ui-form-button:hover {
background-color: #3554D1;
}
.booking-total-price {
font-size: 3rem;
font-weight: 600;
color: red;
margin-bottom: 2.5rem;
}
.ui-form-label {
font-size: .9rem;
display: block;
margin-bottom: .5rem;
color: #555
}
.ui-form-label>span {
color: red;
font-weight: 600;
}
.ui-form-control {
border: 1px solid var(--border-main);
border-radius: 0.75rem;
width: 100%;
height: 48px;
padding: 0 1.25rem;
font-size: 0.95rem;
transition: all 0.3s ease;
background-color: white;
color: var(--text-main);
}
.ui-form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(53, 84, 209, 0.1);
outline: none;
}
.ui-form-control.textarea {
height: 120px;
padding: 1rem;
}
.ui-form-control.textarea.v2 {
height: 165px;
}
.ui-form-control,
.ui-form-select {
border: 1px solid #eee;
border-radius: 3px;
width: 100%;
height: 40px;
padding: 0 1rem;
font-size: .9rem;
transition: .4s ease;
}
.ui-form-select {
color: #777;
}
/* .ui-form-control:hover { box-shadow: 0 0 0 2px rgba(5, 16, 54, .5);}
.ui-form-control:focus { box-shadow: 0 0 0 2px rgba(5, 16, 54, 1);} */
.ui-form-control:hover {
box-shadow: 0 0 0 2px rgba(var(--secondary-o), 0.5);
}
.ui-form-control:focus {
box-shadow: 0 0 0 2px rgba(var(--secondary-o), 1);
}
.ui-form-control.err {
box-shadow: 0 0 0 2px rgb(201, 11, 11) !important;
}
div:has(> input.err) {
position: relative;
}
div:has(> input.err)::before {
font-size: 13px;
font-weight: 500;
color: rgb(201, 11, 11);
content: 'Invalid Number';
position: absolute;
right: 0;
top: -3px;
transform: translateY(-100%);
}
.services-table {
border: 1px solid #eee;
overflow: hidden;
border-radius: 3px;
}
.services-table .table-row {
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.services-table .table-row .item-left {
flex: 1;
overflow: hidden;
word-break: break-word;
padding-right: 1rem
}
.services-table .table-row:last-child {
border: none;
}
.services-table .table-row.table-header {
background: #051036;
color: white;
padding: 1rem 3rem
}
.ui-checkbox {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
}
.ui-checkbox span {
margin-left: 1rem;
font-size: 1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
position: relative;
padding-left: 3rem;
overflow: hidden;
}
.ui-checkbox input {
position: absolute;
opacity: 0;
}
.ui-checkbox span::before {
position: absolute;
left: 0;
content: '';
width: 1.5rem;
height: 1.5rem;
display: block;
margin-right: 1.5rem;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICAgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hlY2siPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==');
transition: .4s ease;
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
z-index: -1
}
.ui-checkbox span::after {
position: absolute;
left: 0;
content: '';
width: 1.5rem;
height: 1.5rem;
border: 1px solid #eee;
border-radius: 3px;
transition: .4s ease;
z-index: 2;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .1) inset;
}
.ui-checkbox input:hover~span::before {
opacity: .5
}
.ui-checkbox input:checked~span::before {
opacity: 1
}
.ui-checkbox.radio span {
position: relative;
}
.ui-checkbox.radio span::before {
background-image: unset;
background-color: #333;
width: .9rem;
height: .9rem;
top: .3rem;
left: .375rem;
border-radius: 1px;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.txt-sm {
font-size: 13px;
color: #888;
}
/* --------------------------------------- */
/* -------- RESERVATION TEMPLATES -------- */
/* --------------------------------------- */
.reservation-container {
--w: 350px;
--gap: 20px;
display: flex;
gap: var(--gap);
}
.reservation-container.v2 {
--gap: 30px;
}
.reservation-container.reverse {
flex-direction: row-reverse;
}
.reservation-container>.l {
width: calc(100% - (var(--w) + var(--gap)));
max-width: calc(100% - (var(--w) + var(--gap)));
}
.reservation-container>.r {
width: var(--w);
min-width: var(--w);
}
.reservation-container>.r>div {
position: sticky;
top: 15px;
}
.langs-wrapper {
position: relative;
}
.langs-wrapper .front {
width: fit-content;
padding: 5px;
border-radius: 999px;
display: flex;
gap: 5px;
align-items: center;
background-color: white;
transition: all .2s ease;
cursor: pointer;
}
.langs-wrapper .front:hover {
background-color: rgba(0, 0, 0, .07);
}
.langs-wrapper .front img {
margin-right: 2px;
height: 20px;
border-radius: 50%;
object-fit: cover;
aspect-ratio: 1;
}
.langs-wrapper .front i {
transition: all .2s ease;
}
.langs-wrapper:has(.back.active) .front i {
transform: rotate(180deg);
}
.langs-wrapper .back {
border: 1px solid #e8ecef;
border-radius: 3px;
width: 100px;
position: absolute;
top: calc(100% + 30px);
background-color: white;
left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: all .2s ease;
opacity: 0;
pointer-events: none;
}
.langs-wrapper .back.active {
top: calc(100% + 10px);
opacity: 1;
pointer-events: all;
}
.langs-wrapper .back>button {
padding: 10px 5px 10px 15px;
border-radius: 3px;
display: flex;
gap: 5px;
align-items: center;
background-color: white;
transition: all .2s ease;
cursor: pointer;
width: 100%;
transition: all .2s ease;
}
.langs-wrapper .back>button:hover {
background-color: #f5f5f5;
}
.langs-wrapper .back>button:not(:last-child) {
border-bottom: 1px solid #eee;
}
.langs-wrapper .back>button img {
margin-right: 2px;
height: 15px;
border-radius: 50%;
object-fit: cover;
aspect-ratio: 1;
}
.social-wrapper {
display: flex;
align-items: center;
gap: 15px;
padding-top: 6px;
padding-left: 20px;
border-left: 1px solid rgba(5, 16, 54, 0.2);
}
.social-wrapper>a {
font-size: 20px;
transition: all .2s ease;
display: flex;
color: #1a1a1a;
}
.social-wrapper>a:hover {
color: #0a58ca;
}
.shadow-header {
display: none;
height: 100px;
}
.sticky~.shadow-header {
display: block;
}
/* header:not(.sticky) {
max-width: calc(100% - 40px);
margin: 0 auto;
} */
.mobile-wp {
--size: 60px;
font-size: 35px;
padding-bottom: 1px;
margin-right: 10px;
color: #fff;
background-color: #25D366;
width: var(--size);
height: var(--size);
min-width: var(--size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 15px;
bottom: 15px;
z-index: 5;
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, .2);
}
@media screen and (max-width: 1199px) {
.langs-wrapper {
margin-right: 10px;
}
.social-wrapper {
border-left: none !important;
padding-left: 0 !important;
}
/* header:not(.sticky) {
max-width: unset;
} */
.mobile-wp {
left: 10px;
bottom: 10px;
}
}
/* --------------------------------------- */
/* ----------- BIDO TEMPLATES ------------ */
/* --------------------------------------- */
/* Cleaned up empty rulesets */
.bd-template-1>div:nth-child(3) {
text-align: end;
}
.bd-template-1>div:nth-child(3) strong {
font-size: 16px;
font-weight: 500;
}
.bd-template-2 {
display: flex;
gap: 10px;
width: 100%;
}
.bd-template-2>button {
flex: 1;
height: 45px;
border-radius: 3px;
gap: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 15px;
border: 2px solid #eee;
background-color: white;
position: relative;
transition: all .2s ease;
cursor: pointer;
}
.bd-template-2>button.active {
/* border-color: var(--green); color: var(--green); */
border-color: var(--secondary-dark);
color: var(--secondary-dark);
}
.bd-template-2>button strong {
font-size: 13px;
font-weight: 500;
line-height: 1;
}
.bd-template-2>button del {
font-size: 11px;
color: #888;
line-height: 1;
}
.bd-template-2>button>div {
--size: 15px;
/* background-color: var(--green); */
background-color: var(--secondary-dark);
font-size: 9px;
position: absolute;
left: 0;
top: 0;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: all .2s ease;
}
.bd-template-2>button.active>div {
opacity: 1;
pointer-events: all;
}
.bd-template-3 {
display: grid;
grid-template-columns: 200px 1fr;
gap: 30px;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.bd-template-3>div {}
.bd-template-3>div:nth-child(1) {}
.bd-template-3>div:nth-child(1) strong {
font-size: 16px;
font-weight: 500;
}
.bd-template-3>div:nth-child(2) {
font-size: 14px;
font-weight: 400;
}
.bd-template-3>div:nth-child(2) p {
font-size: inherit;
}
.bd-template-3>div:nth-child(2) ul {
padding-left: 20px;
}
.bd-template-3>div:nth-child(2) ul li {
font-size: inherit;
padding: 5px 0;
}
.bd-template-3>div:nth-child(2) ul.custom {
list-style: none;
padding-left: 0;
}
.bd-template-3>div:nth-child(2) ul.custom>li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.bd-template-3>div:nth-child(2) ul.custom>li>div {}
.bd-template-3>div:nth-child(2) ul.custom>li.success>div {
color: #0fb85f;
}
.bd-template-3>div:nth-child(2) ul.custom>li.warning>div {
color: #f8b820;
}
.bd-template-3>div:nth-child(2) ul.custom>li.danger>div {
color: #ff0000;
}
.bd-template-3>div:nth-child(2) ul.custom>li>span {}
.bd-print {
max-width: 1000px;
width: 100%;
margin: 0 auto 10px;
display: flex;
justify-content: flex-end;
}
.bd-print>button {
font-size: 13px;
font-weight: 400;
gap: 5px;
background-color: transparent;
border: none;
outline: none;
padding: 0;
display: flex;
align-items: center;
cursor: pointer;
}
.bd-print>button i {
font-size: 1.15em;
}
/* .bd-template-4{ max-width: 1000px; width: 100%; margin: 0 auto 20px; padding: 50px; background-color: rgba(254, 238, 21, 0.1); display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 10px;} */
.bd-template-4 {
max-width: 1000px;
width: 100%;
margin: 0 auto 20px;
padding: 50px;
background-color: var(--main-white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 10px;
border: 1px solid var(--main-border);
}
.bd-template-4 .icon {
--size: 70px;
line-height: 1;
font-size: 45px;
margin-bottom: 20px;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--secondary);
color: var(--secondary-txt);
}
.bd-template-4 .icon i {}
.bd-template-4 h2 {
font-size: 36px;
font-weight: 600;
}
.bd-template-4 .number {
font-size: 14px;
margin-top: 10px;
gap: 10px;
display: flex;
align-items: center;
}
.bd-template-4 .number span {
padding: 3px 10px;
font-size: 18px;
font-weight: 600;
background-color: var(--secondary);
color: var(--secondary-txt);
border-radius: 6px;
}
.bd-template-4 .txt-area {
gap: 20px;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.bd-template-4 .txt-area p {
font-size: 14px;
font-weight: 400;
}
.bd-template-4 .txt-area p strong {
font-weight: 600;
}
.bd-template-5 {
width: 100%;
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-bottom: 10px;
}
.bd-template-5::before {
content: '';
display: inline-block;
position: absolute;
top: 100%;
height: 2px;
width: 100%;
background: linear-gradient(90deg, var(--light-blue) 5px, white 5px);
background-size: 10px 100%;
background-repeat: repeat;
}
.bd-template-5 span {
font-weight: 600;
font-size: 13px;
color: var(--light-blue);
line-height: 1;
}
.bd-template-5 i {
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.bd-template-5 i:nth-of-type(1) {
color: var(--secondary-dark);
}
.bd-template-5 i:nth-of-type(2) {
color: #0fb85f;
}
.bd-template-6 {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.bd-template-6>div {
flex: 1;
display: flex;
flex-direction: column;
padding-top: 20px;
}
.bd-template-6>div:last-child {
text-align: end;
}
.bd-template-6>div.content {
position: relative;
}
.bd-template-6>div.content::before {
content: '';
display: inline-block;
position: absolute;
bottom: 0;
border-top: 2px solid;
width: 50px;
}
.bd-template-6>div.content:nth-of-type(1)::before {
border-color: var(--secondary-dark);
left: 0;
}
.bd-template-6>div.content:nth-of-type(3)::before {
border-color: #0fb85f;
right: 0;
}
.bd-template-6>div.content small {
font-weight: 500;
font-size: 13px;
color: var(--light-blue);
}
.bd-template-6>div.content strong {
font-weight: 600;
font-size: 18px;
}
.bd-template-6>div.content p {
font-size: 14px;
font-weight: 400;
}
.bd-template-6>div.info {
display: flex;
gap: 20px;
text-align: center;
flex-direction: row;
justify-content: center;
}
.bd-template-6>div.info span {
color: var(--secondary-txt);
background-color: var(--secondary);
padding: 3px 10px;
margin-bottom: 6px;
font-weight: 600;
font-size: 15px;
border-radius: 6px;
}
.bd-template-6>div.info p {
font-size: 13px;
font-weight: 400;
margin: 0;
}
.bd-template-6>div.info>div {
display: flex;
flex-direction: column;
}
.bd-template-7 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
flex-direction: column;
margin-bottom: 30px;
}
.bd-template-7 .t {
font-size: 16px;
display: flex;
align-items: center;
gap: 5px;
}
.bd-template-7 .t svg {
height: 23px;
transform: translateY(-1px);
}
.bd-template-7 .t span {
font-weight: 400;
}
.bd-template-7 .t strong {
font-weight: 600;
}
.bd-template-7 .b {
display: flex;
align-items: center;
gap: 7px;
}
.bd-template-7 .b strong {
opacity: .5;
font-weight: 500;
}
.bd-counter {
--size: 25px;
display: flex;
gap: 5px;
}
.bd-counter>button {
transform: scale(.75);
opacity: .75;
font-size: 15px;
width: var(--size);
height: var(--size);
border-radius: 50%;
background-color: var(--secondary);
color: var(--secondary-txt);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s ease;
}
.bd-counter>button:hover {
transform: scale(.85);
opacity: 1;
}
.bd-counter>button:active {
transform: scale(.75);
opacity: .75;
}
.bd-counter>input {
font-size: 13px;
height: var(--size);
width: 30px;
border: 1px solid #ddd;
border-radius: 2px;
outline: none;
background-color: #fff;
text-align: center;
font-weight: 300;
}
.light-err .bd-counter>button.up {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 10px 0 rgba(248, 213, 72, 1);
}
.wrapper-template-1 {
display: flex;
flex-direction: column;
gap: 30px;
}
.wrapper-template-2 {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.wrapper-template-3 {
display: flex;
flex-direction: column;
gap: 15px;
}
.wrapper-template-4 {
display: grid;
gap: 15px;
grid-template-columns: repeat(2, 1fr);
}
.wrapper-template-4>div:nth-child(2) {
display: flex;
justify-content: center;
}
.wrapper-template-5 {
display: flex;
flex-direction: column;
}
.wrapper-template-1:has(> .logo) {
position: relative;
}
.wrapper-template-1>.logo {
position: absolute;
left: 30px;
top: 25px;
}
.wrapper-template-1>.logo img {
height: 55px;
}
.hr-line {
width: 100%;
height: 0;
border-top: 1px solid #eee;
margin: 20px 0;
}
div:not(.acitve-pdf)>.just-pdf {
display: none;
}
/* #pdf-content{width: 21cm; position: absolute; top: -9999999px;} */
#pdf-content {
width: 25cm;
position: absolute;
top: -9999999px;
}
.bd-table-1 {}
.bd-table-1 .h {
border-bottom: 1px solid #ddd;
margin-bottom: 6px;
}
.bd-table-1 .h,
.bd-table-1 .b>div {
display: grid;
grid-template-columns: 220px 300px 1fr 70px 70px;
}
.bd-table-1 .h>div {
padding: 6px 0;
font-size: 14px;
}
.bd-table-1 .b>div {}
.bd-table-1 .b>div>div {
font-size: 13px;
font-weight: 400;
padding: 6px 0;
}
.bd-table-1 .b>div>div:nth-last-child(1),
.bd-table-1 .b>div>div:nth-last-child(2) {
font-weight: 600;
text-align: center;
}
/* Bido Template 1 */
/* .bido-template-1 { box-shadow: 0 0 25px 0 rgba(34, 41, 47, .1); border-radius: 10px;} */
.bido-template-1 {
border-radius: 10px;
background-color: #fff;
border: 1px solid #e8ecef;
color: #051036;
}
.bido-template-1>.h {
padding: 20px;
background-color: #000;
color: #fff;
position: relative;
border-radius: 10px 10px 0 0;
}
.bido-template-1>.h strong {
font-size: 16px;
font-weight: 500;
}
.bido-template-1>.h .switch {
position: absolute;
right: calc(20px + 30px);
top: 50%;
transform: translateY(-50%);
}
.bido-template-1>.b {
padding: 20px;
}
.bido-template-1>.b .txt-area {
display: flex;
flex-direction: column;
gap: 10px;
}
.bido-template-1>.b .txt-area>div {
display: flex;
flex-direction: column;
gap: 3px;
}
.bido-template-1>.b .txt-area>div>b {
font-size: 14px;
font-weight: 500;
color: #888;
}
.bido-template-1>.b .txt-area>div>p {
font-size: 13px;
color: #051036;
margin: 0;
font-weight: 500;
}
.bido-template-1>.b .table-area {
padding-top: 20px;
margin-top: 10px;
border-top: 1px solid #e8ecef;
display: flex;
flex-direction: column;
gap: 12px;
}
.bido-template-1>.b .table-area.v2 {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.bido-template-1>.b .table-area>div {
font-size: 13px;
color: #051036;
font-weight: 500;
gap: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bido-template-1>.b .table-area:not(.no-border)>div.total {
border-top: 1px solid #e8ecef;
margin-top: 15px;
padding-top: 15px;
}
.bido-template-1>.b .table-area>div.total>div:nth-child(1) {
opacity: 1 !important;
}
.bido-template-1>.b .table-area>div.total>div:nth-child(2) {
font-size: 20px;
}
.bido-template-1>.b .table-area>div.red {
color: #d93f3f;
}
.bido-template-1>.b .table-area>div>div:nth-child(1) {
color: #888;
display: flex;
align-items: center;
}
.bido-template-1>.b .table-area.v2>div>div:nth-child(1) {
color: inherit;
opacity: .7;
}
.bido-template-1>.b .table-area>div>div:nth-child(1) i {
font-size: 17px;
width: 20px;
text-align: center;
margin-right: 7px;
}
/* Bido Template 2 */
.bido-template-2 {
display: flex;
background-color: white;
border: 1px solid #eaeaea;
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
margin-bottom: 2rem;
}
.bido-template-2:hover {
box-shadow: var(--shadow-lg);
border-color: #000;
}
.bido-template-2 .img {
display: flex;
width: 250px;
min-width: 250px;
aspect-ratio: 4/3;
position: relative;
overflow: hidden;
}
.bido-template-2 .img .swiper {
position: relative;
}
.bido-template-2 .img .swiper .swiper-slide {
display: flex;
}
.bido-template-2 .img .swiper .swiper-slide img {
aspect-ratio: 1;
object-fit: cover;
}
.bido-template-2 .detail {
padding: 20px 25px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
}
.bido-template-2 .detail .top .info {
gap: 40px;
padding-bottom: 10px;
border-bottom: 1px solid #e8ecef;
display: flex;
align-items: center;
justify-content: space-between;
}
.bido-template-2 .detail .top .info>strong {
font-size: 20px;
font-weight: 500;
}
.bido-template-2 .detail .top .info .icons {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.bido-template-2 .detail .top .info .icons>span {
white-space: nowrap;
color: #888;
font-size: 14px;
display: flex;
align-items: center;
gap: 7px;
}
.bido-template-2 .detail .top .info .icons>span i {
font-size: 22px;
color: #000;
}
/* .bido-template-2 .detail .top .options { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap;}
.bido-template-2 .detail .top .options > div { width: 90px; min-width: 90px; color: #888; background-color: #fafafa; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center; max-width: 90px;}
.bido-template-2 .detail .top .options > div .icon { font-size: 20px;}
.bido-template-2 .detail .top .options > div span { font-size: 12px;}
.bido-template-2 .detail .bottom .price-area > span { font-size: 12px; color: #888;} */
.bido-template-2 .detail .top .options {
display: flex;
gap: 15px;
margin-top: 15px;
flex-wrap: wrap;
border-bottom: 1px solid #f0f4f6;
padding-bottom: 10px;
}
/* .bido-template-2 .detail .top .options > div { color: #b3b2a1; background-color: rgba(254, 238, 21, 0.05); border-radius: 10px; padding: 10px; display: flex; gap: 7px; align-items: center;} */
.bido-template-2 .detail .top .options>div {
color: #333;
border-radius: 8px;
background-color: #f8f8f8;
border: 1px solid #eaeaea;
padding: 8px 12px;
display: flex;
gap: 6px;
align-items: center;
}
.bido-template-2 .detail .top .options>div .icon {
font-size: 20px;
}
.bido-template-2 .detail .top .options>div span {
font-size: 12px;
white-space: nowrap;
}
.bido-template-2 .detail .bottom .price-area>span {
font-size: 12px;
color: #888;
}
.bido-template-2 .detail .bottom .price-area>div {
--green: #51b400;
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.bido-template-2 .detail .bottom .price-area>div .prices {
display: flex;
gap: 10px;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button {
min-height: 52px;
height: auto;
border-radius: 12px;
gap: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 15px;
border: 2px solid #eee;
background-color: white;
position: relative;
transition: all .2s ease;
cursor: pointer;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button.active {
/* border-color: var(--green); color: var(--green); */
border-color: #000;
color: #000;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button strong {
font-size: 13px;
font-weight: 500;
line-height: 1;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button del {
font-size: 11px;
color: #888;
line-height: 1;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button>div {
--size: 15px;
/* background-color: var(--green); */
background-color: #000;
font-size: 9px;
position: absolute;
left: 0;
top: 0;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: all .2s ease;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button.active>div {
opacity: 1;
pointer-events: all;
}
.bido-template-2 .detail .bottom .price-area>div>a {
background-color: var(--green);
border: 1px solid var(--green);
color: #fff;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
max-width: 120px;
text-align: center;
font-size: 13px;
line-height: 1.25;
transition: all .2s ease;
border-radius: 12px;
}
.bido-template-2 .detail .bottom .price-area>div>a:hover {
background-color: white;
color: var(--green);
}
.bido-template-2 .detail .bottom .price-area>div>button {
cursor: pointer;
background-color: var(--primary);
border: 1px solid var(--primary);
color: white;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 2rem;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
border-radius: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.bido-template-2 .detail .bottom .price-area>div>button:hover {
background-color: var(--accent);
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(53, 84, 209, 0.2);
}
.bido-template-2 .detail .bottom .price-area>div>button i {
display: none;
}
/* Bido Template 3 */
.bido-template-3 {
display: flex;
gap: 40px;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.bido-template-3 .txt p {
margin-bottom: 5px;
}
/* Bido Template 4 */
.bido-template-4 {
height: 40px;
display: flex;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 7px;
overflow: hidden;
}
.bido-template-4 input {
background-color: transparent;
padding: 0 10px;
font-size: 13px;
font-weight: 500;
}
.bido-template-4 button {
background-color: rgba(5, 16, 54, 0.05);
border-left: 1px solid #ddd;
width: fit-content;
height: 100%;
padding: 0 15px;
display: flex;
align-items: center;
font-size: 14px;
cursor: pointer;
}
/* --------------------------------------- */
/* ----------- CARD TEMPLATES ------------ */
/* --------------------------------------- */
.card-template-1 {
/* box-shadow: 0 0 25px 0 rgba(34, 41, 47, .1); */
border-radius: 10px;
background-color: var(--main-white);
border: 1px solid var(--main-border);
overflow: hidden;
}
.card-template-1.space {
padding: 25px;
}
.card-template-1>.h {
padding: 25px;
position: relative;
}
.card-template-1>.h h3 {
font-size: 18px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.card-template-1>.h h3 i {
font-size: 26px;
/* color: var(--main-color); */
color: #000;
}
.card-template-1>.h .switch {
position: absolute;
right: calc(25px + 30px);
top: 50%;
transform: translateY(-50%);
}
.card-template-1>.b {
padding: 0 25px 25px;
}
.card-template-2 {
position: relative;
}
.card-template-2>input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.card-template-2>label {
display: flex;
flex-direction: column;
gap: 15px;
padding: 25px;
border: 2px solid #eee;
border-radius: 10px;
width: 100%;
height: 100%;
justify-content: space-between;
cursor: pointer;
}
.card-template-2>label.active {
border-color: #000;
}
.card-template-2>label .icons {
display: flex;
justify-content: space-between;
}
.card-template-2>label .icons>i {
font-size: 30px;
color: #888;
}
.card-template-2>label .icons>div {
--size: 40px;
font-size: 25px;
color: #eee;
border: 1px solid #eee;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.card-template-2>label.active .icons>div {
border-color: #000;
color: #000;
}
.card-template-2>label .txt {
display: flex;
gap: 20px;
align-items: flex-end;
}
.card-template-2>label .txt>strong {
display: inline-block;
width: 100%;
font-weight: 400;
}
.card-template-2>label .txt>div {
display: inline-block;
white-space: nowrap;
font-size: 16px;
}
/* .card-template-2 > input:checked + label { border-color: #51b400;}
.card-template-2 > input:checked + label .icons > div { color: #51b400; border-color: #51b400;}
.card-template-2 > input[type="radio"]:checked + label { border-color: #51b400;}
.card-template-2 > input[type="radio"]:checked + label .icons > div { color: #51b400; border-color: #51b400;} */
.card-template-2>input:checked+label {
border-color: #000;
}
.card-template-2>input:checked+label .icons>div {
color: #000;
border-color: #000;
}
.card-template-2>input[type="radio"]:checked+label {
border-color: #000;
}
.card-template-2>input[type="radio"]:checked+label .icons>div {
color: #000;
border-color: #000;
}
.card-template-3 {
padding: 20px;
border: 2px solid #eee;
border-radius: 10px;
transition: all .2s ease;
cursor: pointer;
}
.card-template-3.active {
/* border-color: #51b400; */
border-color: #000;
}
.card-template-3>.h {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-template-3>.h .l {
display: flex;
flex-direction: column;
position: relative;
padding-left: 40px;
}
.card-template-3>.h .l::before {
--size: 20px;
border: 1px solid #ddd;
color: white;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: all .2s ease;
font-family: 'Line Awesome Free';
content: '?';
font-weight: 700;
}
.card-template-3.active>.h .l::before {
background-color: #000;
border-color: #000;
}
.card-template-3>.h .l strong {
font-weight: 500;
font-size: 14px;
}
.card-template-3>.h .l span {
font-size: 12px;
color: #888;
}
.card-template-3>.h .r {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
text-align: end;
}
.card-template-3>.h .r strong {
font-size: 24px;
font-weight: 500;
line-height: 1;
}
.card-template-3>.h .r>span {
color: #000;
font-size: 12px;
}
.card-template-3 .btn-green {
opacity: 0;
transition: all .2s ease;
pointer-events: none;
}
.card-template-3.active .btn-green {
opacity: 1;
pointer-events: all;
}
.form-template-1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px 25px;
}
.form-template-1 ._1 {
grid-column: span 1 / span 1;
}
.form-template-1 ._2 {
grid-column: span 2 / span 2;
}
.form-template-1 ._4 {
grid-column: span 4 / span 4;
}
.form-template-1 .__4 {
grid-column: span 4 / span 4;
}
.form-template-1 .custom-v1 {
gap: 20px 25px;
display: grid;
grid-template-columns: 90px 90px 1fr;
grid-column: span 4 / span 4;
}
.align-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.form-template-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 25px;
}
.form-template-2 ._1 {
grid-column: span 1 / span 1;
}
.form-template-2 ._3 {
grid-column: span 3 / span 3;
}
@media screen and (max-width: 1280px) {
.form-template-2 {
display: flex;
flex-direction: column;
}
.reservation-container.reverse {
flex-direction: column-reverse;
}
}
select.ui-form-control {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
select.ui-form-control::-ms-expand {
display: none;
}
div:has(> select.ui-form-control) {
position: relative;
}
div:has(> select.ui-form-control)::before {
content: '';
display: inline-block;
font-size: 11px;
font-weight: 900;
color: #000;
position: absolute;
right: 10px;
bottom: 12px;
font-family: 'Line Awesome Free';
content: '\f107';
}
.input-template-1 {
display: flex;
flex-direction: column;
gap: 3px;
}
.input-template-1 label {
font-size: 13px;
font-weight: 400;
color: #4d4f57;
}
.input-template-1>div {
display: flex;
}
.input-template-1>div button {
height: 40px;
aspect-ratio: 1;
background-color: var(--secondary);
color: var(--secondary-txt);
border: 1px solid #ddd;
border-right: 0;
font-size: 12px;
border-radius: 12px 0 0 12px;
}
.input-template-1>div button+input {
/* border-top-right-radius: 0;
border-bottom-left-radius: 0; */
border-radius: 0 12px 12px 0;
}
.input-template-1>div :is(input, select, textarea) {
font-size: 13px;
height: 40px;
font-weight: 400;
width: 100%;
border: 1px solid #ddd;
padding: 10px 12px;
border-radius: 3px;
}
.input-template-1>div :is(input, select, textarea)::placeholder {
opacity: .6;
}
.input-template-1>div textarea {
height: 150px;
}
.chckbx {
position: relative;
}
.chckbx input[type="checkbox"] {
position: absolute;
cursor: pointer;
transform: translate(6.5px, 8px);
top: 0;
width: 2px;
height: 2px;
}
.chckbx input[type="checkbox"]::before {
box-sizing: border-box;
transition: all .1s ease;
box-shadow: inset 0 0 7px 0px rgba(0, 0, 0, 1);
content: '';
position: absolute;
left: 0;
top: 0;
display: inline-block;
box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, .1);
border: 1px solid rgb(214, 220, 232);
background-color: white;
width: 17px;
height: 17px;
border-radius: 3px;
}
.chckbx input[type="checkbox"]:checked::before {
font-size: 11px;
font-weight: 900;
color: white;
border-color: unset;
background-color: #f8b820;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 17px;
height: 17px;
font-family: 'Line Awesome Free';
content: '\f00c';
}
.chckbx input[type="checkbox"]::before,
.chckbx input[type="checkbox"]:checked:before {
transform: translate(-6.5px, -5.5px);
}
.chckbx label {
padding-left: 23px;
font-size: 12px;
color: #555;
font-weight: 500;
}
.chckbx label a {
text-decoration: none;
color: black;
}
.chckbx label a:hover {
text-decoration: underline;
}
.btns-wrapper-1 {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
/* --------------------------------------- */
/* --------------- BUTTONS --------------- */
/* --------------------------------------- */
.btn {
cursor: pointer;
padding: 10px 20px 11px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 13px;
border-radius: 12px;
transition: .2s ease;
}
.btn-blue {
background-color: #051036;
border: 1px solid #051036;
color: white;
}
.btn-blue:hover {
background-color: #fff;
color: #051036;
}
.btn-green {
background-color: #000;
border: 1px solid #000;
color: white;
}
.btn-green:hover {
background-color: #fff;
color: #000;
}
.btn-green {
background-color: #000;
border: 1px solid #000;
color: white;
}
.btn-green:hover {
background-color: #fff;
color: #000;
}
.btn-red {
background-color: #d93f3f;
border: 1px solid #d93f3f;
color: white;
}
.btn-red:hover {
background-color: #fff;
color: #d93f3f;
}
.btn-gray-outlined {
background-color: #fff;
border: 1px solid #ddd;
color: #051036;
}
/* .btn-gray-outlined.active { border-color: #51b400; color: #51b400;} */
.btn-gray-outlined.active {
border-color: #000;
color: #000;
}
/* .btn-wait { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404;}
.btn-approved { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;}
.btn-rejected { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;} */
.btn-wait {
background-color: #ffb730;
color: #4d3900;
}
.btn-approved {
background-color: #12d069;
color: #fff;
}
.btn-rejected {
background-color: #ff0000;
color: #fff;
}
/* FOOTER */
/* footer{ width: 100%; margin-top: 50px; background-color: #051036;} footer .footer{ width: 100%;} footer .footer > div{ gap: 30px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 10px; display: flex; align-items: flex-start; justify-content: space-between;} footer .footer > div .left{ display: flex; flex-direction: column; gap: 20px;} footer .footer > div .left > b{ color: white; font-size: 20px; font-weight: 600;} footer .footer > div .left > img{ height: 40px;} footer .footer > div .left .agent{ display: flex; flex-direction: column; gap: 2px;} footer .footer > div .left .agent > span{ font-size: 11px; color: #ccc;} footer .footer > div .left .agent > a{font-size: 13px; font-weight: 600; text-decoration: none; color: #ddd;} footer .footer > div .left .agent > a:hover{ text-decoration: underline;} footer .footer > div .left .contact{ display: flex; flex-direction: column; gap: 3px;} footer .footer > div .left .contact > strong{ font-size: 13px; color: #fff; font-weight: 500;} footer .footer > div .left .contact > a{ transition: all .2s ease; font-size: 13px; gap: 10px; color: #ddd; display: flex; align-items: center; text-decoration: none;} footer .footer > div .left .contact > a:hover{ color: white;} footer .footer > div .left .contact > a i{ width: 7px; display: flex; justify-content: center;} footer .footer > div .left .social{ display: flex; gap: 10px;} footer .footer > div .left .social a {font-size: 30px; color: white;} footer .footer > div .right{ display: flex; width: 100%; max-width: 600px; justify-content: space-between;} footer .footer > div .right > div{ display: flex; gap: 20px; flex-direction: column;} footer .footer > div .right > div > a{ font-size: 16px; font-weight: 600; text-decoration: none; color: white;} footer .footer > div .right > div > p{ font-size: 13px; font-weight: 500; color: #ddd; max-width: 250px;} footer .footer > div .right > div > div:not(.input){ display: flex; flex-direction: column; gap: 12px;} footer .footer > div .right > div > div:not(.input) > a{ cursor: pointer; transition: all .2s ease; font-size: 13px; font-weight: 500; text-decoration: none; color: #ddd;} footer .footer > div .right > div > div:not(.input) > a:hover{ color: white;} footer .footer > div .right > div > .input{display: flex; outline: 1px solid white; background-color: white; height: 30px; border-radius: 3px; overflow: hidden;} footer .footer > div .right > div > .input input{ font-size: 13px; background-color: transparent; padding: 0 7px; border: none; width: 100%;} footer .footer > div .right > div > .input input::placeholder{ color: #aaa; opacity: 1;} footer .footer > div .right > div > .input input:focus{ outline: none;} footer .footer > div .right > div > .input button{ background-color: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-decoration: none; font-size: 13px; color: var(--main-dark-blue-txt);} footer .copy{ background-color: #051036; box-shadow: 0 0 15px 0 rgba(255, 255, 255, .2);} footer .copy > div{ width: 100%; max-width: 1200px; padding: 10px 10px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; color: #fff;} footer .copy > div > div{ flex: 1;} footer .copy > div .logo-wrapper{ display: flex; align-items: center; justify-content: flex-end; gap: 10px;} footer .copy > div .logo-wrapper .logo{ height: 40px; filter: invert(1);} footer .copy > div .cr{ display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;} footer .copy > div .cards{ display: flex; align-items: center; gap: 10px;} footer .copy > div .cards > a{ height: 25px; aspect-ratio: 1.586; background-color: #fff; display: flex; align-items: center; padding: 3px; border-radius: 5px;} footer .copy > div .cards > a img{ height: 100%; object-fit: contain;} */
footer {
width: 100%;
background-color: var(--primary);
color: white;
padding-top: 4rem;
}
footer .footer>.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
padding-bottom: 4rem;
}
footer .footer .left b {
color: white;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
display: block;
text-shadow: none;
}
footer .footer .contact a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
footer .footer .contact a:hover {
color: white;
}
footer .footer .social a {
color: white;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
footer .footer .social a:hover {
transform: translateY(-3px);
color: var(--secondary);
}
footer .right h4 {
color: white;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
footer .right a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
display: block;
margin-bottom: 0.75rem;
}
footer .right a:hover {
color: white;
}
footer .copy {
background-color: rgba(0, 0, 0, 0.2);
padding: 1.5rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
footer .copy .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
/* Newsletter */
/* .newsletter{ padding: 50px 15px; background-color: #fafafa; margin-top: 50px;} */
/* .newsletter {
padding: 50px 15px;
background-color: #051036;
margin-top: 50px;
color: #fff;
}
.newsletter > div {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.newsletter > div .l h3 {
font-size: 25px;
font-weight: 600;
color: white;
}
.newsletter > div .l p {
font-size: 14px;
font-weight: 400;
margin-top: 5px;
color: white;
}
.newsletter > div .r form {
display: flex;
gap: 10px;
}
.newsletter > div .r form input {
width: 200px;
color: black;
}
.newsletter > div .r form button {
height: 40px;
color: #000000;
background: white;
} */
/* @media screen and (max-width: 830px) {
footer .footer > div {
flex-direction: column;
}
} */
@media screen and (max-width: 768px) {
/* footer .copy > div {
flex-direction: column;
gap: 20px;
}
.newsletter > div {
flex-direction: column;
align-items: flex-start;
gap: 15px;
} */
.page-heading h1 {
text-align: center;
}
}
@media screen and (max-width: 660px) {
/* footer .footer > div {
width: 100%;
max-width: 550px;
margin: 0 auto;
padding: 40px 30px;
}
footer .footer > div .right {
flex-direction: column;
gap: 50px;
}
footer .footer > div .right > div > .input {
width: 200px;
}
footer .footer > div .right > div > div:not(.input) {
gap: 10px;
}
footer .footer > div .right > div > p {
max-width: unset;
}
footer .copy > div {
padding: 10px 30px;
} */
}
/* SWITCH */
.switch {
position: relative;
display: flex;
align-items: center;
}
.switch input {
cursor: pointer;
width: 0;
height: 0;
position: absolute;
}
.switch input::before {
transition: all .2s ease;
content: '';
padding: 2px;
display: inline-block;
width: 30px;
height: 15px;
background-color: #e0e0e0;
border-radius: 15px;
position: absolute;
top: 0;
transform: translateY(-50%);
}
.switch input::after {
transition: all .2s ease;
content: '';
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 0px;
transform: translateY(-50%);
left: 2px;
background-color: white;
}
.switch input:checked::before {
/* background-color: #51b400; */
background-color: #e8db1a;
}
.switch input:checked::after {
left: 2px;
transform: translateX(100%) translateY(-50%);
}
/* PAGINATION */
.pagination-template .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
width: 20px;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}
.pagination-template .swiper-pagination-bullet {
background-color: #f5f5f5;
opacity: .5;
}
.pagination-template .swiper-pagination-bullet-active {
background-color: #f5f5f5;
opacity: 1;
}
.iti {
position: relative;
display: inline-block;
width: 100%;
}
@media screen and (max-width: 1280px) {
.reservation-container {
flex-direction: column-reverse;
max-width: 1000px;
margin: 0 auto;
}
.reservation-container>.r {
width: 100%;
min-width: unset;
}
.reservation-container>.l {
width: 100%;
max-width: 100%;
}
}
@media screen and (max-width: 868px) {
.pagination-template .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
width: 15px;
height: 5px;
}
.wrapper-template-2 {
grid-template-columns: repeat(2, 1fr);
}
.bido-template-2 {
padding-bottom: 160px;
position: relative;
}
.bido-template-2 .img {
width: 45%;
min-width: unset;
max-width: 300px;
border-radius: 10px;
overflow: hidden;
}
.bido-template-2 .detail {
width: 55%;
padding: 10px 15px;
}
.bido-template-2 .detail .top .info {
flex-direction: column;
gap: 10px;
align-items: baseline;
}
.bido-template-2 .detail .top .info>strong {
font-size: 14px;
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.bido-template-2 .detail .top .info>strong::before {
content: '';
display: inline;
position: absolute;
left: 0;
bottom: 0;
width: 70px;
height: 2px;
background-color: #051036;
}
.bido-template-2 .detail .top .info .icons>span {
font-size: 12px;
}
.bido-template-2 .detail .top .info .icons>span i {
font-size: 20px;
}
.bido-template-2 .detail .top .options {
gap: 15px;
}
.bido-template-2 .detail .top .options>div {
padding: 0;
background-color: transparent;
width: fit-content;
min-width: unset;
}
.bido-template-2 .detail .top .options>div span {
display: none;
}
.bido-template-2 .detail .bottom {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
padding: 15px 15px;
}
.bido-template-2 .detail .bottom .price-area>span {
font-size: 11px;
transform: translateY(17px);
display: inline-block;
}
.bido-template-2 .detail .bottom .price-area>div {
flex-direction: column;
gap: 10px;
}
.bido-template-2 .detail .bottom .price-area>div>a {
max-width: unset;
width: 100%;
height: fit-content;
padding: 10px 0;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button {
flex: 1;
padding: 10px 0;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button strong {
font-size: 12px;
}
.bido-template-2 .detail .bottom .price-area>div .prices>button del {
font-size: 10px;
}
.bido-template-2 .detail .bottom .price-area>div>button {
max-width: 170px;
width: 100%;
margin: 0 auto;
height: 45px;
}
}
@media screen and (max-width: 768px) {
.form-template-1 {
grid-template-columns: repeat(2, 1fr);
gap: 20px 15px;
}
.form-template-1 ._4 {
grid-column: span 2 / span 2;
}
}
/* =========================================
Mobile Alignments (Hero & Footer)
========================================= */
@media (max-width: 991px) {
/* Header Mobile Alignment - Logo Left, Actions Right */
header {
padding: 10px 0 !important;
background: rgba(0, 0, 0, 0.85) !important;
height: auto !important;
}
header .container {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
padding: 0 15px !important;
max-width: 100% !important;
}
header .logo {
padding: 0 !important;
border: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
}
header .logo img {
height: 35px !important;
margin: 0 !important;
}
header .actions {
padding: 0 !important;
border: none !important;
width: auto !important;
justify-content: flex-end !important;
gap: 15px !important;
display: flex !important;
align-items: center !important;
}
header .actions .whatsapp span {
display: none !important;
}
header .actions .whatsapp i {
font-size: 22px !important;
color: #25d366 !important;
}
header .langs-wrapper .front {
padding: 5px !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 6px !important;
}
header .langs-wrapper .front span {
font-size: 12px !important;
color: #fff !important;
}
header .actions .mobile-toggle {
font-size: 24px !important;
color: #fff !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
}
/* Hero Section Mobile Typography Alignment */
.home-page .top .txt {
text-align: center;
align-items: center;
padding-top: 10px;
}
.home-page .top .txt h1,
.home-page .top .txt p {
text-align: center;
}
/* Footer Mobile Alignment */
footer .container .t .container {
flex-direction: column;
align-items: center;
text-align: center;
}
footer .container .t .l {
align-items: center;
text-align: center;
margin-bottom: 2rem;
}
footer .container .t .l .logo img {
margin: 0 auto;
}
footer .container .t .r {
align-items: center;
}
footer .container .t .r .menus {
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
gap: 2rem;
}
footer .container .t .r .menus .menu {
align-items: center;
width: 100%;
}
footer .container .t .r .cards {
width: 100%;
text-align: center !important;
margin-top: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
footer .container .t .r .cards div {
float: none !important;
text-align: center !important;
}
footer .container .t .r .cards img {
margin: 0 auto 10px auto !important;
}
/* Center Meeting Points Content inside cards */
.meeting-card-content {
text-align: center;
}
.meeting-card-header {
justify-content: center;
}
.meeting-instruction {
text-align: center;
justify-content: center;
}
.meeting-instruction i {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 668px) {
.wrapper-template-2 {
display: flex;
flex-direction: column;
}
div:not(#pdf-content .card-template-1 > .b)>.card-template-3>.h {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
div:not(#pdf-content .card-template-1 > .b)>.card-template-3>.h .r {
align-items: flex-start;
text-align: start;
padding-left: 40px;
}
div:not(#pdf-content .card-template-1 > .b > div > .b)>.bido-template-3 {
flex-direction: column;
}
}
@media (max-width:1024px) {
.page-heading .bg-image img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
object-position: center 0rem;
}
.page-heading .container {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
.page-heading {
padding: 110px 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: white;
background: rgb(0 0 0 / 47%);
}
}
.service-item {
border: 1px solid #f1f1f1;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
transition: .3s;
}
.service-item:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.service-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
.service-content {
padding: 10px;
}
.service-content h3 {
font-size: 18px;
font-weight: 600;
color: #333;
}
.service-content p {
font-size: 14px;
color: #666;
}
.home-page h1 {
margin-bottom: 0;
}
/* renkler */
:root {
--light-btn-border: #ddd;
--main-color: #51b400;
--main-dark-blue-txt: #051036;
--white-bg: 255, 255, 255;
--white-o: 255, 255, 255, 0.8;
--black-txt: #333;
}
.ajax-form.loading::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #c3c3c324;
z-index: 999
}
.ajax-form.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
border: 3px solid var(--light-btn-border);
border-top: 3px solid var(--black-txt);
border-radius: 50%;
animation: 1s linear infinite spin;
z-index: 1000
}
.ajax-form.loading,
.card-body,
.my-profile .image,
.sidebar-menu>ul li {
position: relative
}
@keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
/* .form-error{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; word-break: break-all;} */
.form-error {
white-space: nowrap;
font-size: 12px;
font-weight: 400;
opacity: .75;
}
.bd-tabs-wrapper {}
.bd-tabs-wrapper .bd-tabs {
margin: 0 auto;
background-color: var(--card-bg);
backdrop-filter: var(--glass-blur);
padding: 0.5rem;
border-radius: 1rem;
width: fit-content;
z-index: 2;
position: relative;
gap: 0.5rem;
display: flex;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: var(--shadow-md);
}
.bd-tabs-wrapper .bd-tabs>button {
color: var(--text-muted);
border-radius: 0.75rem;
background-color: transparent;
border: none;
outline: none;
padding: 0.75rem 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
font-weight: 600;
transition: all 0.3s ease;
}
.bd-tabs-wrapper .bd-tabs>button.active {
background-color: var(--primary);
color: white;
box-shadow: var(--shadow-sm);
}
.bd-tabs-wrapper .bd-contents>div {
display: none;
padding: 3rem 2rem 2rem;
background-color: white;
box-shadow: var(--shadow-lg);
border-radius: 1.5rem;
border: 1px solid var(--border-main);
}
.bd-tabs-wrapper .bd-contents>div.active {
display: flex;
}
.booking-form .form-footer .btn.btn-primary {
background-color: var(--secondary);
color: var(--secondary-txt);
}
.bd-grid__2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
}
.spacing-1 {
padding-top: 100px;
}
footer.v2 {
border-top: none;
padding: 4rem 1rem;
margin-top: 6rem;
background: var(--bg-main);
}
footer.v2>.container {
padding: 3rem;
background-color: white;
border: 1px solid var(--border-main);
border-radius: 1.5rem;
box-shadow: var(--shadow-md);
max-width: 1200px;
}
footer .t {}
footer .t>div {
display: flex;
justify-content: space-between;
gap: 30px;
}
footer .t>div .l {
display: flex;
flex-direction: column;
gap: 20px;
}
footer .t>div .l .logo {
margin-bottom: 20px;
}
footer .t>div .l .logo img {
height: 55px;
}
footer .t>div .l .txt {
display: flex;
flex-direction: column;
font-size: 15px;
gap: 3px;
}
footer .t>div .l .txt>strong {}
footer .t>div .l .txt>p {
font-weight: 500;
font-size: .8em;
opacity: .75;
margin-bottom: 0;
}
footer .t>div .r {
display: flex;
gap: 40px;
width: 100%;
width: fit-content;
}
footer .t>div .r .menus {
display: flex;
gap: 20px;
width: fit-content;
}
footer .t>div .r .menus .menu {
width: 180px;
}
footer .t>div .r .cards {
display: flex;
flex-direction: column;
width: 200px;
gap: 10px;
}
footer .t>div .r .cards>a {
display: flex;
width: 100%;
}
footer .t>div .r .cards>a img {
width: 100%;
object-fit: contain;
}
footer .b>div {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #f3f3f3;
}
/* footer > .b > div > div{ flex: 1;} */
footer>.b>div>div p {
margin: 0;
font-size: 12px;
font-weight: 500;
}
/* footer > .b > div > div:nth-child(1){}
footer > .b > div > div:nth-child(2){ display: flex; justify-content: center; text-align: center;}
footer > .b > div > div:nth-child(3){ display: flex; justify-content: flex-end;} */
/* footer > .t > div .r .cards > a:nth-child(1){ width: 200px;}
footer > .t > div .r .cards > a:nth-child(2){ width: 100%;} */
@media (min-width: 1400px) {
footer>.container {
max-width: 1600px;
}
}
.social-template {
display: flex;
align-items: center;
gap: 10px;
}
.social-template>a {
font-size: 20px;
}
/* .swiper-template-1 .arrow{ --space: 5px; font-size: 20px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background-color: transparent; border: none; outline: none; cursor: pointer; color: #fff;}
.swiper-template-1 .arrow.prev{ left: var(--space);}
.swiper-template-1 .arrow.next{ right: var(--space);} */
.swiper-template-1 .arrow {
--size: 22px;
--space: -10px;
font-size: 14px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
color: #000;
background-color: var(--secondary);
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all .2s ease;
opacity: 0;
}
.swiper-template-1:hover .arrow {
--space: 10px;
opacity: .75;
}
.swiper-template-1 .arrow:hover {
opacity: 1;
}
.swiper-template-1 .arrow.prev {
left: var(--space);
}
.swiper-template-1 .arrow.next {
right: var(--space);
}
.swiper-template-1 .swiper-pagination-bullet {
background-color: var(--secondary);
opacity: .3;
width: 15px;
height: 5px;
border-radius: 99px;
}
.swiper-template-1 .swiper-pagination-bullet-active {
background-color: var(--secondary);
opacity: 1;
}
.swiper-template-2 {
padding-bottom: 40px;
}
.swiper-template-2 .arrow {
--size: 22px;
--space: -10px;
font-size: 14px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
color: #000;
background-color: var(--secondary);
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all .2s ease;
opacity: 0;
}
.swiper-template-2:hover .arrow {
--space: 10px;
opacity: .75;
}
.swiper-template-2 .arrow:hover {
opacity: 1;
}
.swiper-template-2 .arrow.prev {
left: var(--space);
}
.swiper-template-2 .arrow.next {
right: var(--space);
}
.swiper-template-2 .swiper-pagination-bullet {
background-color: var(--secondary);
opacity: .3;
}
.swiper-template-2 .swiper-pagination-bullet-active {
background-color: var(--secondary);
opacity: 1;
}
.swiper-template-2 .swiper-wrapper {
padding-top: 10px;
}
/* .bd-tabs-template-1{ width: 100%; overflow-x: auto; min-height: 60px; border-radius: 12px; overflow: hidden; background-color: var(--main-white); border: 1px solid var(--main-border);} */
/* .bd-tabs-template-1{ width: 100%; overflow-x: auto; min-height: 60px;} */
.bd-tabs-template-1 {
margin: 30px auto 50px;
padding: 35px 30px;
width: 100%;
border-radius: 12px;
background-color: var(--main-white);
border: 1px solid var(--main-border);
width: fit-content;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
}
.bd-tabs-template-1 ul {
--space: 60px;
gap: var(--space);
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: 0 auto;
list-style: none;
padding: 0;
white-space: nowrap;
}
.bd-tabs-template-1 ul li {}
.bd-tabs-template-1 ul li button {
font-size: 14px;
position: relative;
display: flex;
align-items: center;
gap: 10px;
border: none;
outline: none;
background-color: transparent;
}
.bd-tabs-template-1 ul li:not(:first-child) button::after {
left: calc((var(--space) / 2) * -1);
content: '\f105';
display: inline-block;
font-family: 'Line Awesome Free';
font-weight: 700;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
pointer-events: none;
}
.bd-tabs-template-1 ul li button::before {
--size: 20px;
font-size: 10px;
font-weight: 500;
padding-top: 1px;
border: 1px solid #e8ecef;
content: '';
display: inline-block;
width: var(--size);
height: var(--size);
min-width: var(--size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
transition: all .2s ease;
}
.bd-tabs-template-1 ul li:nth-child(1) button::before {
content: '1';
}
.bd-tabs-template-1 ul li:nth-child(2) button::before {
content: '2';
}
.bd-tabs-template-1 ul li:nth-child(3) button::before {
content: '3';
}
.bd-tabs-template-1 ul li:nth-child(4) button::before {
content: '4';
}
.bd-tabs-template-1 ul li:nth-child(5) button::before {
content: '5';
}
.bd-tabs-template-1 ul li:nth-child(6) button::before {
content: '6';
}
.bd-tabs-template-1 ul li button.current::before {
background-color: var(--secondary);
border-color: var(--secondary);
color: var(--secondary-txt);
}
.bd-tabs-template-1 ul li button.active::before {
content: '\f00c';
background-color: var(--secondary);
border-color: var(--secondary);
color: var(--secondary-txt);
font-family: 'Line Awesome Free';
font-weight: 700;
padding-top: 2px;
}
@media screen and (max-width: 992px) {
.bd-tabs-template-1 {
width: 100%;
border-radius: 0;
margin-top: 15px !important;
padding: 30px 20px;
}
}
.big-slider {
border-radius: 16px;
}
.big-slider .swiper-slide {
display: flex;
aspect-ratio: 16/9;
}
.big-slider .swiper-slide>img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-slider {
margin-top: 15px;
padding: 4px;
}
.thumb-slider .swiper-slide {
border-radius: 12px;
overflow: hidden;
transition: all .3s ease;
position: relative;
}
.thumb-slider .swiper-slide::before {
content: '';
display: inline-block;
position: absolute;
inset: 0;
border-radius: 12px;
pointer-events: none;
transition: all .2s ease;
z-index: 2;
}
.thumb-slider .swiper-slide img {
border-radius: 12px;
}
.thumb-slider .swiper-slide-thumb-active::before {
box-shadow: inset 0 0 0 3px var(--secondary);
}
.slider-template-1 {
--swiper-theme-color: var(--secondary);
--swiper-pagination-bullet-inactive-color: var(--secondary);
}
.slider-template-1 .swiper-btn {
--size: 24px;
--offset: 0px;
font-size: 13px;
border-radius: 50%;
background-color: var(--secondary);
color: var(--primary);
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transition: all .2s ease;
}
.slider-template-1:hover .swiper-btn {
--offset: 10px;
opacity: 1;
}
.slider-template-1 .swiper-btn.prev {
left: var(--offset);
}
.slider-template-1 .swiper-btn.next {
right: var(--offset);
}
.slider-template-1 .swiper-pagination {
bottom: 0;
opacity: 0;
transition: all .2s ease;
}
.slider-template-1:hover .swiper-pagination {
bottom: 8px;
opacity: 1;
}
.comment-slider {}
.comment-slider .swiper-slide {
height: auto;
}
.comment-template-1 {
height: 100%;
background-color: var(--main-white);
border-radius: 12px;
border: 1px solid var(--main-border);
padding: 25px;
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
overflow: hidden;
transition: all .3s ease;
}
.comment-template-1:hover {
border-color: var(--secondary);
transform: translateY(-5px);
box-shadow: 0 15px 20px -15px rgba(0, 0, 0, .2);
}
.comment-template-1>.t {
display: flex;
gap: 15px;
}
.comment-template-1>.t .img {
--size: 40px;
width: var(--size);
height: var(--size);
min-width: var(--size);
display: flex;
}
.comment-template-1>.t .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.comment-template-1>.t .detail {
display: flex;
flex-direction: column;
gap: 5px;
}
.comment-template-1>.t .detail>a {
display: flex;
align-items: center;
gap: 10px;
}
.comment-template-1>.t .detail>a:hover {
text-decoration: underline;
}
.comment-template-1>.t .detail>a>span {
font-size: 14px;
font-weight: 500;
}
.comment-template-1>.t .detail>a>svg {
height: 15px;
width: 15px;
}
.comment-template-1>.t .detail>div {
display: flex;
align-items: center;
gap: 10px;
}
.comment-template-1>.t .detail>div>span {
font-size: 12px;
font-weight: 500;
opacity: .5;
}
.comment-template-1>.t .detail>div>svg {
height: 18px;
width: 60px;
}
.comment-template-1>.b {}
.comment-template-1>.b .stars {}
.comment-template-1>.b .comment {}
.comment-template-1>.b .comment p {}
.comment-template-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
}
.stars-outer {
--fs: 20px;
position: relative;
display: flex;
}
.stars-inner {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
width: 0%;
display: flex;
transition: all .3s ease;
}
.stars-outer::before {
content: '\f005 \f005 \f005 \f005 \f005';
font-family: 'Line Awesome Free';
font-weight: 900;
font-size: var(--fs);
color: var(--light-blue);
}
.stars-inner::before {
content: '\f005 \f005 \f005 \f005 \f005';
font-family: 'Line Awesome Free';
font-weight: 900;
font-size: var(--fs);
color: var(--secondary);
}
.star-template {
display: flex;
gap: 10px;
color: var(--dark-blue);
align-items: center;
transform: translateY(-1px);
}
.star-template.v2 .stars-outer {
--fs: 2rem;
}
.star-template.v2.sm .stars-outer {
--fs: 1.5rem;
}
.star-template.v2 span {
font-weight: 500;
color: var(--gray);
display: flex;
align-items: center;
gap: 7px;
}
.star-template.v2 span small {
opacity: .5;
}
.card {
border-radius: 10px;
perspective: 1000px;
width: 100%;
aspect-ratio: 1.6;
max-width: 380px;
height: fit-content;
}
.card.flip .card-inner {
transform: rotateY(180deg);
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 10px;
transition: transform 600ms ease;
transform-style: preserve-3d;
box-shadow: 0 0 25px 2px rgba(black, 0.2);
}
.card-front,
.card-back {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
backface-visibility: hidden;
background: linear-gradient(135deg, #161508 50%, #000000 50%);
}
.card-front {
border-radius: 10px;
overflow: hidden;
position: relative;
transition: transform 300ms ease-in-out;
}
.card-back {
transform: rotateY(180deg);
}
.card-back::before {
content: "";
position: absolute;
top: 40%;
left: 20%;
width: 180%;
height: 120%;
border-radius: 100%;
filter: blur(10px);
opacity: 0.15;
}
.card-back::after {
content: "";
position: absolute;
top: 15%;
width: 100%;
height: 40px;
background-color: #393502;
}
.card-glow {
position: absolute;
top: -140px;
left: -65px;
height: 200px;
width: 400px;
background: rgba(#151819, 1);
filter: blur(10px);
border-radius: 100%;
transform: skew(-15deg, -15deg);
}
.card-contactless {
position: absolute;
left: 75px;
top: 55px;
transform: scale(0.5);
}
.card-contactless svg {
color: var(--secondary);
}
/* .card-chip { position: absolute; top: 65px; left: 25px; width: 45px; height: 34px; border-radius: 5px; background-color: var(--secondary); overflow: hidden; display: flex;} */
.card-chip {
position: absolute;
top: 65px;
left: 25px;
width: 45px;
height: 34px;
border-radius: 5px;
background: linear-gradient(45deg, #fbb000, #b7ae30);
overflow: hidden;
display: flex;
}
.card-chip::before {
content: "";
position: absolute;
left: 49%;
top: -6%;
transform: translateX(-50%);
background: #e9db12;
border: 1px solid #000;
width: 25%;
height: 110%;
border-radius: 100%;
z-index: 2;
}
.card-chip::after {
content: "";
position: absolute;
top: 30%;
left: -10%;
background: transparent;
border: 1px solid #000;
width: 120%;
height: 33%;
}
.card-holder {
position: absolute;
left: 25px;
bottom: 30px;
color: var(--secondary);
font-size: 14px;
letter-spacing: 0.1em;
filter: drop-shadow(1px 1px 1px rgba(black, 0.3));
}
.card-number {
position: absolute;
left: 25px;
bottom: 65px;
color: var(--secondary);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.2em;
filter: drop-shadow(1px 1px 1px rgba(black, 0.3));
}
.card-valid {
position: absolute;
right: 25px;
bottom: 30px;
color: var(--secondary);
font-size: 14px;
letter-spacing: 0.2em;
filter: drop-shadow(1px 1px 1px rgba(black, 0.3));
}
.card-signature {
position: absolute;
top: 120px;
left: 15px;
width: 70%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 38px;
font-weight: 400;
background-color: #393502;
background-image: linear-gradient(-45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
}
.card-signature::before {
content: '';
color: #fff;
font-size: 9px;
left: 0;
top: -14px;
position: absolute;
}
.card-seccode {
left: calc(70% + 20px);
font-size: 11px;
text-align: center;
background-color: var(--secondary);
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 125px;
}
.card-logo {
position: absolute;
right: 25px;
top: 30px;
}
.card-logo img {
height: 44px;
}
@media screen and (max-width: 992px) {
footer .t>div {
flex-direction: column;
justify-content: flex-start;
gap: 50px;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .h {
display: none;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b {
display: flex;
flex-direction: column;
gap: 15px;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b>div {
display: flex;
flex-direction: column;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
position: relative;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b>div>div:nth-child(1) {
font-weight: 500;
margin-bottom: 7px;
font-size: 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
padding: 10px 15px;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b>div>div:nth-child(2) {
padding: 7px 15px;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b>div>div:nth-child(3) {
padding: 7px 15px;
padding-bottom: 50px;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b>div>div:nth-child(4) {
position: absolute;
bottom: 10px;
left: 15px;
}
div:not(#pdf-content .card-template-1 > .b)>.bd-table-1 .b>div>div:nth-child(5) {
position: absolute;
bottom: 10px;
right: 15px;
}
}
@media screen and (max-width: 768px) {
div:not(#pdf-content)>.bd-template-4 h2 {
font-size: 28px;
}
div:not(#pdf-content .card-template-1)>.bd-template-6 {
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
div:not(#pdf-content .card-template-1)>.bd-template-6>div.content {
width: 100%;
}
footer .t>div {
flex-direction: column;
justify: flex-start;
gap: 50px;
}
footer .t>div .r {
flex-direction: column;
width: 100%;
}
footer .t>div .r .menus {
width: 100%;
}
footer .t>div .r .menus .menu {
width: 100%;
}
footer .b>div {
flex-direction: column;
align-items: center;
}
.home-page {
padding-top: 2rem;
width: 100%;
}
.home-page .bg-image {
width: 100%;
position: absolute;
height: 135%;
top: 0;
z-index: 1;
border-radius: 0;
overflow: hidden;
}
.home-page .bg-image {
width: 100%;
position: absolute;
height: 46%;
top: 0;
z-index: 1;
border-radius: 0;
overflow: hidden;
}
.home-page .bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0;
}
.home-page .bg-image video {
height: auto;
}
.home-page .bg-image::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* background: linear-gradient(0deg, black 0%, transparent); */
}
/* .home-page > .container{ transform: translateY(100px); margin-bottom: 150px;} */
.home-page h1 {
transform: translateY(35px);
font-size: 1.3rem;
}
.bd-tabs-wrapper .bd-tabs {
width: 100%;
}
.bd-tabs-wrapper .bd-tabs>button {
flex: 1;
flex-direction: column;
white-space: nowrap;
}
.bd-tabs-wrapper .bd-contents>div {
border-radius: 0 0 12px 12px;
}
.wrapper-template-4 {
display: flex;
flex-direction: column-reverse;
gap: 30px;
}
.card-chip {
top: 20px;
}
.card-contactless {
top: 30px;
}
.bd-grid__2 {
display: flex;
flex-direction: column;
}
header .whatsapp span {
display: none;
}
header .whatsapp i {
font-size: 30px;
}
}
body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) {
overflow: visible !important;
}
.swiper {}
.car-swiper .swiper-pagination-bullet {
background-color: var(--secondary);
border-color: var(--secondary);
opacity: .5;
}
.car-swiper .swiper-pagination-bullet-active {
background-color: var(--secondary);
border-color: var(--secondary);
opacity: 1;
}
/* ================================================================
PREMIUM — BEYAZ ZEMİN + SİYAH TONLAR
================================================================ */
:root {
--bw-black: #111111;
--bw-dark: #1c1c1c;
--bw-mid: #3a3a3a;
--bw-muted: #888888;
--bw-border: #e4e4e4;
--bw-subtle: #f5f5f5;
--bw-white: #ffffff;
--bw-off: #fafafa;
--bw-ease: cubic-bezier(0.4, 0, 0.2, 1);
--bw-r: 0.875rem;
--bw-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
--bw-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Zemin beyaz */
body {
background: var(--bw-white) !important;
color: var(--bw-black) !important;
}
/* ================================================================
HEADER
================================================================ */
header {
background: transparent !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 1000 !important;
border-bottom: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 20px 0 !important;
}
header .container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
header .logo img {
filter: brightness(0) invert(1) !important;
height: 40px !important;
width: auto !important;
}
header .menu nav>ul>li>a {
color: rgba(255, 255, 255, 0.72) !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
letter-spacing: 0.15px !important;
transition: color 0.2s var(--bw-ease) !important;
}
header .menu nav>ul>li>a:hover,
header .menu nav>ul>li>a.active {
color: #ffffff !important;
}
header .menu nav>ul>li>a::before {
background: #ffffff !important;
height: 1px !important;
}
header .actions .whatsapp {
color: rgba(255, 255, 255, 0.75) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 2rem !important;
padding: 0.38rem 1rem !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
transition: all 0.2s var(--bw-ease) !important;
background: transparent !important;
}
header .actions .whatsapp:hover {
color: #fff !important;
border-color: rgba(255, 255, 255, 0.4) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
header .mobile-toggle,
header .mobile-nav-toggle {
color: rgba(255, 255, 255, 0.85) !important;
}
header .langs-wrapper .front {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
}
header .langs-wrapper .front i {
color: rgba(255, 255, 255, 0.35) !important;
}
header .langs-wrapper .back {
background: #1c1c1c !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0.75rem !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
header .langs-wrapper .back button {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.82rem !important;
}
header .langs-wrapper .back button:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.05) !important;
}
/* ================================================================
HERO — GÜÇLÜ KONTRAST, BEYAZ METİN
================================================================ */
.home-page {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
padding-top: 14rem !important;
padding-bottom: 5rem !important;
margin-top: 0 !important;
position: relative !important;
top: 0 !important;
border: none !important;
background: #000 !important;
}
.home-page .bg-image {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
border-radius: 0 !important;
padding: 0 !important;
border: none !important;
background: #000 !important;
overflow: hidden !important;
}
.home-page .bg-image video,
.home-page .bg-image img {
border-radius: 0 !important;
border: none !important;
opacity: 0.42 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.home-page::before {
position: absolute !important;
content: '' !important;
z-index: 2 !important;
border-radius: 0 !important;
inset: 0 !important;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.28) 0%,
rgba(0, 0, 0, 0.6) 55%,
rgba(0, 0, 0, 0.92) 100%) !important;
}
.home-page::after {
display: none !important;
}
.home-page>.container {
position: relative !important;
z-index: 3 !important;
}
/* Başlık */
.home-page h1 {
font-size: 4.25rem !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: -2.5px !important;
line-height: 1.05 !important;
text-align: center !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25) !important;
margin-bottom: 2.5rem !important;
width: 100% !important;
}
/* ================================================================
REZERVASYON FORMU
================================================================ */
.home-page .booking {
width: 88% !important;
margin: 0 auto !important;
padding: 0 !important;
transform: none !important;
position: relative !important;
z-index: 10 !important;
}
/* Tab'lar */
.bd-tabs-wrapper .bd-tabs {
background: rgba(17, 17, 17, 0.88) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: none !important;
border-radius: 0.75rem 0.75rem 0 0 !important;
padding: 0.35rem 0.35rem 0 !important;
display: inline-flex !important;
width: auto !important;
gap: 0.18rem !important;
margin-bottom: 0 !important;
}
.bd-tabs-wrapper .bd-tabs>button {
color: #ffffff !important;
background: transparent !important;
border-radius: 0.5rem 0.5rem 0 0 !important;
font-size: 0.81rem !important;
font-weight: 600 !important;
padding: 0.55rem 1.15rem !important;
transition: all 0.2s var(--bw-ease) !important;
white-space: nowrap !important;
}
.bd-tabs-wrapper .bd-tabs>button i {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.95rem !important;
}
.bd-tabs-wrapper .bd-tabs>button:hover {
color: rgba(255, 255, 255, 0.8) !important;
background: rgba(255, 255, 255, 0.04) !important;
}
.bd-tabs-wrapper .bd-tabs>button.active {
background: #ffffff !important;
color: var(--bw-black) !important;
font-weight: 700 !important;
}
.bd-tabs-wrapper .bd-tabs>button.active i {
color: var(--bw-black) !important;
}
/* Form paneli — beyaz, clean */
.bd-tabs-wrapper .bd-contents>div {
background: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-top: none !important;
border-radius: 0 var(--bw-r) var(--bw-r) var(--bw-r) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28) !important;
}
/* Form input container */
.booking-form .form-input-container {
background: var(--bw-subtle) !important;
border: 1.5px solid transparent !important;
border-radius: 0.75rem !important;
transition: all 0.2s var(--bw-ease) !important;
}
.booking-form .form-input-container:hover {
background: var(--bw-white) !important;
border-color: var(--bw-border) !important;
box-shadow: var(--bw-shadow) !important;
}
.booking-form .form-input-container:focus-within {
background: var(--bw-white) !important;
border-color: var(--bw-black) !important;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
}
.booking-form .form-input-container label {
color: var(--bw-muted) !important;
font-size: 0.66rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.9px !important;
}
.booking-form .form-input-block strong,
.booking-form .form-textbox,
.booking-form .form-input-block input {
color: var(--bw-black) !important;
font-weight: 500 !important;
}
.form-input-icon svg,
.form-input-icon i {
color: var(--bw-mid) !important;
opacity: 0.4 !important;
}
/* Arama butonu: siyah › hover'da beyaz */
.booking-form .form-footer .btn.btn-primary,
.booking-form .form-footer button[type=submit] {
background: var(--bw-black) !important;
color: #ffffff !important;
border: 2px solid var(--bw-black) !important;
border-radius: 0.75rem !important;
font-weight: 700 !important;
font-size: 0.93rem !important;
letter-spacing: 0.3px !important;
padding: 0.9rem 2rem !important;
width: 100% !important;
transition: all 0.25s var(--bw-ease) !important;
}
.booking-form .form-footer .btn.btn-primary:hover,
.booking-form .form-footer button[type=submit]:hover {
background: #ffffff !important;
color: var(--bw-black) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15) !important;
transform: translateY(-1px) !important;
}
.booking-form .form-footer .btn.btn-primary svg,
.booking-form .form-footer button[type=submit] svg {
color: inherit !important;
}
/* ================================================================
POPÜLER LOKASYONLAR — BEYAZ ZEMİN
================================================================ */
.popular-locations-section {
background: var(--bw-off) !important;
padding: 5rem 0 !important;
margin-top: 0 !important;
border-top: 1px solid var(--bw-border) !important;
}
.popular-locations-section .section-title {
color: var(--bw-black) !important;
font-size: 2.2rem !important;
font-weight: 800 !important;
letter-spacing: -1px !important;
}
.popular-locations-section .section-desc {
color: var(--bw-muted) !important;
}
/* Filtre tabları */
.location-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.45rem !important;
justify-content: center !important;
margin: 1.5rem 0 2.5rem !important;
}
.location-tab {
background: transparent !important;
color: var(--bw-mid) !important;
border: 1.5px solid var(--bw-border) !important;
border-radius: 2rem !important;
padding: 0.42rem 1.1rem !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s var(--bw-ease) !important;
}
.location-tab:hover {
background: var(--bw-subtle) !important;
border-color: var(--bw-mid) !important;
color: var(--bw-black) !important;
}
.location-tab.active {
background: var(--bw-black) !important;
color: #fff !important;
border-color: var(--bw-black) !important;
}
/* Lokasyon kartları: beyaz zemin, siyah hover invert */
.location-card {
background: var(--bw-white) !important;
border: 1.5px solid var(--bw-border) !important;
border-radius: var(--bw-r) !important;
color: var(--bw-black) !important;
box-shadow: var(--bw-shadow) !important;
transition: all 0.28s var(--bw-ease) !important;
cursor: pointer !important;
}
.location-card:hover {
background: var(--bw-black) !important;
border-color: var(--bw-black) !important;
color: #ffffff !important;
transform: translateY(-3px) !important;
box-shadow: var(--bw-shadow-lg) !important;
}
.location-card .location-icon {
background: var(--bw-subtle) !important;
color: var(--bw-mid) !important;
border-radius: 0.6rem !important;
padding: 0.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s var(--bw-ease) !important;
}
.location-card:hover .location-icon {
background: rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
}
.location-card .route-from span,
.location-card .route-to span {
color: inherit !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
}
.location-card .route-arrow i {
color: var(--bw-border) !important;
}
.location-card:hover .route-arrow i {
color: rgba(255, 255, 255, 0.2) !important;
}
.location-card .price {
color: var(--bw-black) !important;
font-size: 1.22rem !important;
font-weight: 800 !important;
}
.location-card:hover .price {
color: #ffffff !important;
}
.location-card small {
color: var(--bw-muted) !important;
font-size: 0.7rem !important;
}
.location-card:hover small {
color: rgba(255, 255, 255, 0.5) !important;
}
.select-location-btn {
background: var(--bw-subtle) !important;
color: var(--bw-mid) !important;
border: 1.5px solid var(--bw-border) !important;
border-radius: 50% !important;
width: 2.1rem !important;
height: 2.1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s var(--bw-ease) !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.location-card:hover .select-location-btn {
background: rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
/* ================================================================
FOOTER — DERİN SİYAH
================================================================ */
footer {
background: var(--bw-black) !important;
color: #fff !important;
border-top: none !important;
margin-top: 0 !important;
}
footer .container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
footer .t>div .l .txt>strong {
color: #ffffff !important;
font-weight: 700 !important;
}
footer .t>div .l .txt>p {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 0.88rem !important;
}
footer .t>div .r .menus .menu .title {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
}
footer .t>div .r .menus .menu a {
color: rgba(255, 255, 255, 0.45) !important;
font-size: 0.87rem !important;
transition: all 0.18s !important;
}
footer .t>div .r .menus .menu a:hover {
color: #ffffff !important;
padding-left: 4px !important;
}
footer .b>div {
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
footer .b>div>div p,
footer .b>div>div a {
color: rgba(255, 255, 255, 0.28) !important;
font-size: 0.78rem !important;
}
footer .b>div>div a:hover {
color: rgba(255, 255, 255, 0.7) !important;
}
/* ================================================================
MOBİL OPTİMİZASYON
================================================================ */
@media (max-width: 991px) {
.home-page {
padding-top: 5rem !important;
padding-bottom: 3rem !important;
}
.home-page h1 {
font-size: 2.2rem !important;
letter-spacing: -1px !important;
margin-bottom: 1.5rem !important;
}
.home-page .booking {
width: 100% !important;
margin: 0 !important;
}
.bd-tabs-wrapper .bd-tabs {
width: 100% !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.bd-tabs-wrapper .bd-tabs::-webkit-scrollbar {
display: none !important;
}
.bd-tabs-wrapper .bd-tabs>button {
font-size: 0.75rem !important;
padding: 0.5rem 0.8rem !important;
}
.bd-tabs-wrapper .bd-contents>div {
border-radius: 0 0 var(--bw-r) var(--bw-r) !important;
}
.popular-locations-section {
padding: 3.5rem 0 !important;
}
.location-tabs {
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
padding: 0 1rem !important;
scrollbar-width: none !important;
margin-top: 1.5rem !important;
/* Üste biraz boşluk eklendi */
}
.location-tabs::-webkit-scrollbar {
display: none !important;
}
.location-tab {
flex-shrink: 0 !important;
white-space: nowrap !important;
transition: none !important;
/* Animasyon olmasın */
}
.location-tab:hover,
.location-tab.active {
/* Mobilde hover veya aktif sekme zıplamasın (style.css'den gelen transform varsa eziyoruz) */
transform: none !important;
}
}
@media (max-width: 576px) {
.home-page h1 {
font-size: 1.75rem !important;
letter-spacing: -0.5px !important;
}
}
/* ================================================================
DÜZELTMELER — LANGS WRAPPER + SİYAH ZEMİN METİN
================================================================ */
/* langs-wrapper .front orijinal white bg override */
header .langs-wrapper .front {
background-color: transparent !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
padding: 4px 8px !important;
border-radius: 999px !important;
transition: all 0.2s ease !important;
}
header .langs-wrapper .front:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
}
header .langs-wrapper .front span {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
}
header .langs-wrapper .front i {
color: rgba(255, 255, 255, 0.45) !important;
}
/* Dropdown arka plan & yazı */
header .langs-wrapper .back {
background: #111111 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
header .langs-wrapper .back>button {
color: rgba(255, 255, 255, 0.72) !important;
background: transparent !important;
}
header .langs-wrapper .back>button span {
color: rgba(255, 255, 255, 0.72) !important;
}
header .langs-wrapper .back>button:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: #fff !important;
}
header .langs-wrapper .back>button:hover span {
color: #fff !important;
}
/* Genel kural: siyah zemin üstünde her yazı beyaz */
header * {
color: inherit;
}
footer * {
color: inherit;
}
/* Ensure header is on top of hero video */
header {
z-index: 1000 !important;
}
/* --- Mobile Menu Fix: Siyah Menü, Beyaz Yazılar --- */
@media (max-width: 991px) {
header .menu {
width: 100vw !important;
/* Tüm ekran genişliğini kapla */
max-width: 100vw !important;
left: 0 !important;
background: #000 !important;
/* Ana konteyner siyah */
}
header .menu .bg-layers>span::after,
header .menu .bg-layers>span {
background-color: #000 !important;
width: 100vw !important;
/* Katmanlar tüm ekranı kaplasın */
left: 0 !important;
}
header .menu nav>ul>li>a,
header .menu nav>ul>li>ul>li>a,
header .menu nav>ul>li>ul .h strong,
header .menu .close-nav-btn i,
header .menu nav>ul>li>ul .h button i {
color: #fff !important;
}
header .menu nav>ul>li>ul {
background-color: #000 !important;
width: 100vw !important;
left: 0 !important;
}
}
/* ================================================================ */
/* 1. Sekmeleri Ortala */
.bd-tabs-wrapper .bd-tabs {
display: flex !important;
justify-content: center !important;
width: fit-content !important;
margin: 0 auto 0 auto !important;
}
/* 2. Form Alanları - Beyaz İç, Siyah Kenar */
.booking-form .form-input-container {
background: #ffffff !important;
border: 1.5px solid #111111 !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
padding: 10px 16px !important;
display: flex !important;
align-items: center !important;
border-radius: 12px !important;
min-height: 68px !important;
}
/* 3. Yazı Düzenlemeleri (Hizalama ve Netlik) */
.booking-form .form-input-block {
margin-left: 14px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
line-height: 1.1 !important;
}
.booking-form .form-input-block label {
display: block !important;
font-size: 10px !important;
font-weight: 800 !important;
color: #999999 !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
margin: 0 0 3px 0 !important;
padding: 0 !important;
}
.booking-form .form-textbox,
.booking-form .date-time-value,
.booking-form .form-selectbox-label {
display: block !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #111111 !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
outline: none !important;
}
/* 4. İkonlar - Premium & Statik */
.form-input-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
background: rgba(230, 57, 70, 0.04) !important;
border-radius: 10px !important;
color: #e63946 !important;
flex-shrink: 0 !important;
}
.form-input-icon svg {
width: 20px !important;
height: 20px !important;
stroke-width: 2 !important;
}
/* ================================================================
TEMA SONU — PREMIUM B&W
================================================================ */
/* 5. Sekme İkonları (Tab Icons) */
.bd-tabs button svg {
width: 18px !important;
height: 18px !important;
margin-right: 10px !important;
flex-shrink: 0 !important;
stroke: currentColor !important;
stroke-width: 2 !important;
}
.bd-tabs button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}