/* Colour tokens shared with hotel.css, so pages that load only this file (transfer
   passenger form, payment) still resolve them. */

/* One family for the whole public site, declared once. Roboto is loaded in _Layout;
   the rest is the platform stack so nothing falls back to Times on a slow load. */
body {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
input, select, textarea, button { font-family: inherit; }

:root {
    /* The brand: the petrol blue of the logo's "TRAVEL AGENCY", its darker shade,
       and the lighter blue of its swoosh, for gradients. Actions, links, steps,
       prices and highlights use it. */
    --brand: #007296;
    --brand-dark: #005a78;
    --brand-deep: #004d66;
    --brand-light: #00a2cc;
    /* Green stays for what it says — a good state: free cancellation, confirmed,
       paid. Bootstrap's text-success / bg-success / alert-success keep it too. */
    --ok: #198754;
    --ok-dark: #146c43;
    --hotel-ink: #1a1a1a;
    --hotel-muted: #6b7280;
    --hotel-line: #e8ebe9;
}

/* ------------------------------------------------ booking step strip (all products) */

.booking-steps {
    /* Inset to the summary bar's own padding, so step 1 lines up with its icon. */
    display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 1rem; padding: 0 1.1rem;
    font-size: .95rem; color: var(--hotel-muted); overflow-x: auto;
}
.booking-steps li { display: flex; align-items: center; gap: .55rem; white-space: nowrap; }
.booking-steps li + li::before {
    content: ""; display: block; width: 40px; height: 2px; border-radius: 2px; background: #d5ded9; margin: 0 .8rem;
}
.booking-step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 50%; border: 2px solid #cfd8d3; font-weight: 700; font-size: .82rem; color: var(--hotel-muted); background: #fff;
}
.booking-steps .is-current { color: var(--hotel-ink); font-weight: 700; }
.booking-steps .is-current .booking-step-num { border-color: var(--brand); background: var(--brand); color: #fff; }
.booking-steps .is-done { color: var(--brand-dark); }
.booking-steps .is-done .booking-step-num {
    border-color: var(--brand); background: var(--brand); color: #fff;
}
.booking-steps .is-done .booking-step-num::before { content: "\2713"; }
.booking-steps .is-done + li::before { background: var(--brand); }
.booking-steps { scrollbar-width: none; }
.booking-steps::-webkit-scrollbar { display: none; }
@media (max-width: 575.98px) {
    /* On a phone each step is a disc with its name under it, in equal columns, joined
       by a line from disc to disc — every step named, not only the current one, so the
       guest sees what comes after this page. */
    .booking-steps {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        padding: 0;
        font-size: .74rem;
        overflow: visible;
    }
    .booking-steps li {
        position: relative;
        flex-direction: column;
        gap: .3rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
    .booking-steps li + li::before {
        position: absolute;
        top: 12px;
        left: calc(-50% + 18px);
        right: calc(50% + 18px);
        width: auto;
        margin: 0;
    }
    .booking-step-num { width: 26px; height: 26px; font-size: .76rem; position: relative; z-index: 1; }
}

/* NOTE: the stylesheet below ends with a stray "}", which makes the browser drop
   whatever rule follows it — keep shared rules above this line, not at the end. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Tighten Bootstrap default text colors — content text deep black for readability */
body { color: #0a0a0a; }                                   /* deep black body text */
p, li, span, label, div { color: inherit; }                /* inherit from parent */
.text-muted { color: #0a0a0a !important; }                 /* was #6c757d */
.text-secondary { color: #0a0a0a !important; }             /* was #6c757d */
small, .small { color: inherit; }
.text-justify { color: #0a0a0a; }

/* Mobile side padding — ensure sections aren't flush against screen edges */
@media (max-width: 575.98px) {
    .container, .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Compact section spacing on mobile */
    section { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-4 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
    h2 { font-size: 1.5rem; }
    h1 { font-size: 1.65rem; }
}

/* Reduce excessive section padding on all screens */
section.container.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }

.p-120 {
    padding: 120px;
}

html {
    font-size: 14px;
    list-style-type: none;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Fields take their focus ring from forms.css; buttons keep this one. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
  
    list-style-type: none;
}

.layout-logo {
    width: 200px;
    height: auto;
}

/* The header mark is the logo file cropped to its artwork — the original carried a
   wide white margin that made the header 118px tall for a 60px logo. */
/* The logo is centred on its own box, but the eye lines up the words, and the
   wordmark sits well below that box's middle because "TRAVEL AGENCY" hangs under
   it. Centring the words exactly would push the artwork off the top of the
   header, so the ten pixels are split: the logo rises five and the links drop
   five, and "TR BANGLA" ends up on the same line as "Home". */
/* The 2026 logo, cropped tight with no tagline (logo-header.png): the old file
   carried a margin of white round the mark, so the same box is drawn smaller. */
.header-logo { height: 64px; width: auto; display: block; margin: 8px 0; }

@media (min-width: 992px) {
    .navbar .navbar-nav { transform: translateY(5px); }
}

@media (max-width: 991.98px) { .header-logo { height: 56px; margin: 6px 0; } }

.bg-custom-danger {
    background: rgb(64,224,208);
    background: linear-gradient(318deg, rgba(64,224,208,1) 0%, rgba(195,32,47,1) 100%);
}

.btn-outline-turquoise {
    background: #007296;
    border-radius: 0.375rem;
    border: none;
    color: white;
    padding: 8px;
    transition: 200ms ease-in-out;
    height:75%;
}
@media (max-width: 992px) {
    .btn-outline-turquoise {
        height: 100%;
    }
}

    .btn-outline-turquoise:hover {
        background: #17b4a5;
        border-radius: 0.375rem;
        padding: 8px;
        transition: 200ms ease-in-out;
        color: white;
    }

/* The site loads Roboto only (see _Layout). This class predates that and asked for
   Poppins, which was never loaded — the nav rendered in the browser's fallback font
   while everything around it was Roboto. It now simply follows the page. */
.ff-poppins { font-family: inherit; }

.navbar-nav .nav-link {
    color: #000000;
    transition: 200ms ease-in-out;
}

ul.navbar-nav li.nav-item:hover .nav-link {
    color: #c3202f;
    transition: 200ms ease-in-out;
}

.logos div.social-media ul {
    margin-top: 20px;
}

    .logos div.social-media ul li {
        list-style-type: none;
        margin-right: 10px;
    }

        .logos div.social-media ul li i {
            color: #c3202f;
            font-size: 24px;
            transition: 100ms ease-in;
        }

        .logos div.social-media ul li:hover i {
            color: #40e0d0;
            font-size: 26px;
            transform: scale(1.04);
            transition: 100ms ease-in;
        }

section img {
    object-fit: cover;
}

.all-checked {
    padding: 20px;
}


.module {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11px;
}

div.rezervation ul {
    content: "";
    position: relative;
    margin-block-start: 0 !important;
    padding-inline-start: 0 !important;
    margin-top: 20px;
    margin-left: 15px;
}

    div.rezervation ul li {
        list-style-type: none;
        content: "";
        position: relative;
        margin-top: 2rem;
    }

        div.rezervation ul li input {
            flex: 1 0 0px;
            width: 100%;
            max-width: 100%;
        }

.change-rota {
    content: "";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cfcfd0;
    border: none;
    left: 47%;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    top: 47%;
    z-index: 11;
}

    .change-rota i {
        content: "";
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        top: auto;
    }

button.change-rota i.bx-arrow-right {
    content: "";
    position: absolute;
    top: 11px;
    right: 5px;
}

button.change-rota i.bx-arrow-left {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
}

div.buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    div.buttons button {
        background: transparent;
        border: none;
        font-family: inherit;
        color: black;
    }

    div.buttons .transfer {
        background-color: white;
        color: black;
        padding: 20px;
        border-radius: 10px 10px 0 0;
    }

    div.buttons .inquiry {
        color: black;
    }


.w-15 {
    width: 150px;
}
.cardTransferTitleButton{

}
.changeRotaButton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    padding: 12px;
    border-radius: 50%;
    background-color: #dee2e6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-left: calc(-2%);
    margin-top: calc(9.5%);
}

.icon {
    width: 10px; 
    height: 10px; 
    color: white;
    top: 6px;
    left: 5px;
    font-size:14px;
    font-weight:500;
    color:#000;
    
}
.hero-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0 !important;
    background-image: url('../img/bg_transfer_homepage.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

    .hero-img::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(2, 17, 65, 0.7), rgba(2, 17, 65, 0.25), rgba(2, 17, 65, 0.2));
        z-index: 1;
    }

    .hero-img .container {
        position: relative;
        z-index: 2; /* ��erik �n planda */
    }

    .hero-img .customCard {
        z-index: 3; /* .customCard kart�n� en �st katmana ta��yoruz */
        background: rgba(255, 255, 255, 1); /* Kart�n arka plan�n� daha belirgin yapar */
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 1); /* G�lgeyle daha belirgin hale getirilir */
    }

    .hero-img .card.bg-transparent {
        background: none; /* Arka plan� �effaf olan di�er kartlar i�in */
        border: none;
    }
.active-btn {
 
    background-color: #007bff; /* Aktif buton rengi */
    color: white; /* Aktif buton yaz� rengi */
}
.btn-btnCustom {
    background-color: transparent;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    transition: 200ms ease-in-out;
}

    .btn-btnCustom:focus, .btn-btnCustom {
        align-items: center;
        justify-content: center;
        background: #fff;      
        color: #000;
        font-weight: bolder;
        text-decoration: none;
        border-radius: 10px 10px 0px 0px !important;
        transition: 200ms ease-in-out;
    }

        .btn-btnCustom:hover {
            color: rgb(45, 196, 77);
        }

        .card-card {
            border-radius: 10px;
            -webkit-box-shadow: 10px 8px 27px -22px rgba(0,0,0,0.75);
            -moz-box-shadow: 10px 8px 27px -22px rgba(0,0,0,0.75);
            box-shadow: 10px 8px 27px -22px rgba(0,0,0,0.75);
            transition: 200ms ease-in-out;
            background-color: transparent;
        }

div.card-card:hover {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.01);
    transition: 200ms ease-in-out;
    background-color: #c3202f;
    color: #fff;
}

    div.card-card:hover img {
        display: none;
    }

div.card-card img {
    width: 90px;
    height: 90px;
}


div.detail-title {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0px auto;
    position: relative;
    width: 100%;
    background-color: transparent;
    padding: 60px 30px;
}

    div.detail-title div.detail-img-img img {
        max-width: 100%;
        height: auto;
        opacity: 1;
    }

div.populars-button-button {
    width: 100%;
    height: auto;
    background: #fff;
}

.border-n {
    border: none !important;
}

.border-custom {
    border: 1px solid #40e0d0;
    border-radius: 10px;
}

.border-custom-gray {
    border: 1px solid #80808039;
    border-radius: 0.375rem;
}

.rounded-10 {
    border-radius: 10px;
}

div.populars div.populars-point-button {
    border: 1px solid #40e0d0;
    padding: 10px;
    border-radius: 10px;
}

    div.populars div.populars-point-button button {
        width: 250px;
        background-color: transparent;
        color: #000;
        text-decoration: none;
        font-size: 16px;
        border: none;
        margin-bottom: 35px;
        text-align: center;
        padding: 14px;
    }

        div.populars div.populars-point-button button:hover {
            background-color: #3e39391a;
            border-radius: 14px;
        }

.collaps-button {
    background-color: transparent;
    text-decoration: none;
    display:
}

.slider-bg {
    border-radius: 20px;
}

.tour-image {
    width: 100%;
    object-fit: cover;
    height: 500px;
    border-radius: 40px;
   
}

.tour-image-img {
    border-radius: 20px;
   padding-top:1rem;  
   
}

.tour-image-pirce {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    bottom: 50%;
    right: 8%;
    clip-path: polygon(100.00% 50.00%,78.98% 57.76%,93.30% 75.00%,71.21% 71.21%,75.00% 93.30%,57.76% 78.98%,50.00% 100.00%,42.24% 78.98%,25.00% 93.30%,28.79% 71.21%,6.70% 75.00%,21.02% 57.76%,0.00% 50.00%,21.02% 42.24%,6.70% 25.00%,28.79% 28.79%,25.00% 6.70%,42.24% 21.02%,50.00% 0.00%,57.76% 21.02%,75.00% 6.70%,71.21% 28.79%,93.30% 25.00%,78.98% 42.24%);
}

.tour-image-pirce-price-one {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    clip-path: polygon(100.00% 50.00%,78.98% 57.76%,93.30% 75.00%,71.21% 71.21%,75.00% 93.30%,57.76% 78.98%,50.00% 100.00%,42.24% 78.98%,25.00% 93.30%,28.79% 71.21%,6.70% 75.00%,21.02% 57.76%,0.00% 50.00%,21.02% 42.24%,6.70% 25.00%,28.79% 28.79%,25.00% 6.70%,42.24% 21.02%,50.00% 0.00%,57.76% 21.02%,75.00% 6.70%,71.21% 28.79%,93.30% 25.00%,78.98% 42.24%);
    transform: rotate(0.88turn);
}

.tour-image-pirce-price-two {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    clip-path: polygon(100.00% 50.00%,78.98% 57.76%,93.30% 75.00%,71.21% 71.21%,75.00% 93.30%,57.76% 78.98%,50.00% 100.00%,42.24% 78.98%,25.00% 93.30%,28.79% 71.21%,6.70% 75.00%,21.02% 57.76%,0.00% 50.00%,21.02% 42.24%,6.70% 25.00%,28.79% 28.79%,25.00% 6.70%,42.24% 21.02%,50.00% 0.00%,57.76% 21.02%,75.00% 6.70%,71.21% 28.79%,93.30% 25.00%,78.98% 42.24%);
    transform: rotate(-0.88turn);
}

.polygon-detail {
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    margin-top: 25px;
    padding: 15px;
}

.mobile-filter-button {
    max-width: 50px;
    max-height: 50px;
    margin-left: auto;
}

.hover-scale {
    transform: scale(1);
    transition: 200ms ease-in-out;
}

    .hover-scale:hover {
        transform: scale(1.01);
        transition: 200ms ease-in-out;
    }

.offcanvas.offcanvas-bottom {
    min-height: 80vh !important;
}

.btn-rounded-1100 {
    border-radius: 10px 10px 0 0;
}

.btn-rounded-0011 {
    border-radius: 0 0 10px 10px !important;
}

.btn-rounded-0111 {
    border-radius: 0 10px 10px 10px !important;
}

.btn-rounded-1111 {
    border-radius: 10px 10px 10px 10px;
}
.flag-icon {
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.dropdown-item img {
    margin-right: 10px;
}

.input-group-text {
    padding: 0.375rem 0.75rem;
}

.step-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

.step {
    text-align: center;
    width: 100%;
    position: relative;
    cursor: pointer;
}

    .step::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -50%;
        width: 100%;
        height: 2px;
        background-color: #ddd;
        z-index: 0;
        transition: all 0.5s ease;
    }

    .step:first-child::before {
        display: none;
    }

.step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ddd;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}

.step.active .step-icon {
    background-color: #28a745;
}

    .step.active .step-icon::after {
        content: '\2713';
        font-size: 16px;
    }

.step-title {
    margin-top: 10px;
    font-size: 14px;
    transition: all 0.5s ease;
}

.step-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

    .step-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.transfer-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .transfer-card .card-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .transfer-card h6 {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .transfer-card img {
        max-width: 100%;
        height: auto;
    }

    .transfer-card ul {
        padding-left: 0;
        list-style-type: none;
    }

        .transfer-card ul li {
            font-size: 0.875rem;
            font-weight: 500;
        }

        .transfer-card ul.list-inline {
            padding-left: 0;
            list-style-type: none;
        }

            .transfer-card ul.list-inline li {
                margin-right: 10px;
            }

                .transfer-card ul.list-inline li i {
                    margin-right: 5px;
                }

    .transfer-card hr {
        margin: 20px 0;
        border-top: 1px solid #ddd;
    }

    .transfer-card .d-flex {
        font-size: 1rem;
        font-weight: 500;
    }




-------------- +
/* Custom styles for input group icons */
.input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

/* btn-success is the site's primary button in many views; it takes the brand
   colour, through Bootstrap 5.3's own button variables. ".btn." in front because
   the MDB stylesheet is loaded after this one with rules as specific. */
.btn.btn-success {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-deep);
    --bs-btn-active-border-color: var(--brand-deep);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 0, 114, 150;
    /* The MDB UI kit, also loaded, draws .btn-success from its own variables and
       left the flight "Select" buttons green. */
    --mdb-btn-bg: var(--brand);
    --mdb-btn-border-color: var(--brand);
    --mdb-btn-hover-bg: var(--brand-dark);
    --mdb-btn-hover-border-color: var(--brand-dark);
    --mdb-btn-focus-bg: var(--brand-dark);
    --mdb-btn-active-bg: var(--brand-deep);
    --mdb-btn-active-border-color: var(--brand-deep);
    --mdb-btn-disabled-bg: var(--brand);
    --mdb-btn-disabled-border-color: var(--brand);
    --mdb-btn-box-shadow: 0 4px 9px -4px rgba(0, 114, 150, .45);
    --mdb-btn-box-shadow-state: 0 8px 9px -4px rgba(0, 114, 150, .3), 0 4px 18px 0 rgba(0, 114, 150, .2);
    --mdb-btn-focus-shadow-rgb: 0, 114, 150;
}

.btn.btn-outline-success {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 0, 114, 150;
    --mdb-btn-color: var(--brand);
    --mdb-btn-border-color: var(--brand);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-hover-bg: var(--brand);
    --mdb-btn-hover-border-color: var(--brand);
    --mdb-btn-focus-color: var(--brand);
    --mdb-btn-active-color: #fff;
    --mdb-btn-active-bg: var(--brand-dark);
    --mdb-btn-active-border-color: var(--brand-dark);
}

/* Adjust padding and margin for better layout */
.mb-3 {
    margin-bottom: 1rem !important;
}

.card {
    border-radius: 15px;
}

.nav-tabs .nav-link.active {
    background-color: #f8f9fa;
    border-color: #dee2e6 #dee2e6 #f8f9fa;
    border-radius: .25rem;
}

/*popup cvv*/
.tooltip .tooltip-inner {
    background-color: #fff;
    color: #000;
    max-width: 300px; /* Tooltip Width */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    text-align: center;
    animation: modalFadeZoomIn 200ms ease-in-out;
}
/*privacy notice popup*/
.custom-modal .modal-dialog {
    max-width: 600px;
    animation: modalFadeZoomIn 200ms ease-in-out;
}

.custom-modal .modal-body{
    max-height: 80vh;
    overflow-y: auto;
}

@keyframes modalFadeZoomIn {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* Popup IMG CSS */
.tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .tooltip-content p {
        margin: 5px 0;
        font-size: 14px;
    }

.tooltip-img {
    width: 180px;
    height: auto;
    margin-bottom: 8px;    
    border-radius: 4px;
}

.mr-008rem{
    margin-right:-.8rem !important;
}
.cursor-pointer{
    cursor:pointer;
}

.icon-oppiste-arrow{
    top:23%;
    left:23%;
}

@media (max-width: 1200px) {
    .icon-oppiste-arrow {      
        left: 22%;
    }
}
@media (max-width: 992px) {
    .icon-oppiste-arrow {
        top: 15%;
        left: 45%;
    }

    .icon-oppiste-arrow svg {
       width:35px;
       height:35px;
    }
}

/*Swiper Pagnation*/
.swiper-pagination {
    position: inherit;
    bottom: -3px !important;
}
.swiper-pagination-bullet {
    background-color: rgb(45, 196, 77);
    width: 13px !important;
    height: 13px !important;
}
.swiper-pagination-bullet-active {
    background-color: rgb(45, 196, 99);
}


/*Custom Font Size*/
.fs-8 {
    font-size: 8px !important;}
.fs-10 {
    font-size: 10px !important;}
.fs-12 {
    font-size: 12px !important;}
.fs-14 {
    font-size: 14px !important;
}

/*Tours Page*/
.tourImg, img{
    width:100%;
    height:200px;
}
.tourCardCustomCss {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: 200 ms ease-in-out;
}
    .tourCardCustomCss:hover {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        transition: 200 ms ease-in-out;
    }
    
    /* The Bosphorus from the ST-1 tour, in place of a 6.4 MB stock photo of a palm
       tree that said nothing about tours in Türkiye. The veil keeps the white title
       readable against the bright evening sky. */
    .tourTitleImg {
        width: 100%;
        height: 200px;
        background-image: linear-gradient(rgba(8, 28, 24, .42), rgba(8, 28, 24, .42)), url('../img/tours-banner.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center 18%;
    }
.myFiloTitleImg {
    width: 100%;
    height: 200px;
    background: linear-gradient(354deg, rgba(31,255,254, 0.8), rgba(255, 255, 255, 0.3), rgba(31,255,254, 0.8 ) ), url('../img/viptransfermyfilobgimg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.contactUsTitleImg {
    width: 100%;
    height: 200px;
    background-image: url('../img/contactus-title-img.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.tourDescription p {
    white-space: nowrap; /* Metnin alt sat�ra ge�mesini engeller */
    overflow: hidden; /* Ta�an k�sm� gizler */
    text-overflow: ellipsis; /* Ta�an k�sm� '...' ile g�sterir */
    width: 100%; /* Geni�li�i ayarla */
}
.scrollable-section {
   
    padding: 10px;
    max-height: 650px; /* �stedi�in maksimum y�kseklik */
    overflow-y: auto; /* Y dikeyde kayd�rmay� etkinle�tirir */
    padding-right: 15px; /* Kayd�rma �ubu�u geldi�inde i�erik ile �ubuk aras�nda bo�luk */
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/*About US*/
.aboutContainerIMG {
    background-image: url('../img/travel-agency (3).jpg');
    background-position: center;
    border-radius: 16px;
}
.aboutUsImg {
    height: 500px;
    background-image: url('../img/travel-agency (3).jpg');
    background: rgba(0, 0, 0, 0.19);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.2px);
    -webkit-backdrop-filter: blur(10.2px);
}
.aboutUsImgOneSection {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
    border-radius: 16px;
}

.myFiloCustom.active{
    background:rgba(195,32,47,1) !important;
    color:antiquewhite !important;
}

.myFiloCard div div button{
    color:#000;
}
.myFiloCardImg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.myFiloCardImg-image {
    width: 700px;
    object-fit:cover;
    height:400px;
    border-radius: 14px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: 200ms ease-in-out
}
    .myFiloCardImg-image:hover {
        box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
        transition:200ms ease-in-out
    }

.shadow-n {
    box-shadow: none !important;
}

.modalFullScreenImg{
    width:auto;
    height:100vh;
}

/* The site header is white and the search band under it is off-white; with no line
   between them the menu and the page ran into each other. A full-width white bar,
   a hairline and a faint shadow make the header read as its own layer, as on
   Booking and Expedia. Positioned so the shadow falls over the band beneath it
   rather than under it. */
.site-header {
    position: relative;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid #e3e8e5;
    box-shadow: 0 2px 12px rgba(16, 42, 34, .07);
}

/* ----------------------------------------------- results pages: the top band
   The grey band under the header on the hotel and flight results — product tabs,
   search box or search summary — carries the Bosphorus skyline faintly behind a
   white veil, on wide screens only. It adds no height: on a phone the band is
   already as short as it can be, and the first result has to stay on screen. */
@media (min-width: 992px) {
    .results-band {
        background-image:
            linear-gradient(90deg, rgba(248, 249, 250, .97) 0%, rgba(248, 249, 250, .9) 45%, rgba(248, 249, 250, .62) 100%),
            url('../img/band-istanbul.jpg');
        background-size: cover;
        background-position: center 55%;
        background-repeat: no-repeat;
    }
}

/* ------------------------------------------------------- language switcher */
.lang-switch { position: relative; margin-left: auto; }
.lang-switch > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .7rem;
    border: 1px solid #dfe5e2;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    color: #1f2a26;
    cursor: pointer;
    user-select: none;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary .bx-globe { font-size: 1.2rem; color: var(--brand); }
.lang-switch > summary .bx-chevron-down { font-size: 1rem; color: #6b7280; transition: transform .15s ease; }
.lang-switch[open] > summary .bx-chevron-down { transform: rotate(180deg); }
.lang-switch > ul {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 1040;
    min-width: 170px;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 42, 34, .12);
}
.lang-switch > ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: #1f2a26;
    text-decoration: none;
    font-weight: 600;
}
.lang-switch > ul a:hover { background: #f1f8fb; }
.lang-switch > ul a.is-current { color: var(--brand); }

@media (max-width: 991.98px) {
    /* Phones: the switcher stays in the bar between the logo and the menu button, so a
       guest can change language or currency without opening the menu. Its list drops
       below it, over the page. The opened menu wraps to the next line under all three. */
    .lang-switch { order: 1; margin: 0 .5rem 0 auto; }
    .site-header .navbar-toggler { order: 2; }
    .site-header .navbar-collapse { order: 3; }
    .lang-switch > summary { padding: .4rem .6rem; font-size: .85rem; }
    /* The logo's lettering sits below the middle of its image (the plane takes the top),
       so both buttons drop to line up with "TR BANGLA" rather than with the image box. */
    .lang-switch, .site-header .navbar-toggler { position: relative; top: 5px; }
}
@media (min-width: 992px) {
    /* Desktop: it ends the row after the menu, a little apart from the last link. */
    .lang-switch { margin-left: .75rem; }
}
@media (max-width: 389.98px) {
    /* The narrowest phones: the chevron goes so logo, switcher and menu button share one line. */
    .lang-switch > summary .bx-chevron-down { display: none; }
}

/* Bangla pages: Bengali letters from Noto Sans Bengali, Latin from Roboto. */
html[lang="bn"] body,
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6,
html[lang="bn"] .btn, html[lang="bn"] button, html[lang="bn"] input, html[lang="bn"] select, html[lang="bn"] textarea,
html[lang="bn"] .ff-poppins, html[lang="bn"] .nav-link {
    font-family: Roboto, "Noto Sans Bengali", sans-serif;
}

/* Language and currency share one menu: a heading over each list, and a note on charging. */
.lang-switch > ul { min-width: 240px; }
.lang-switch > ul .switch-head { padding: .5rem .75rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.lang-switch > ul .switch-head:not(:first-child) { border-top: 1px solid #eef1ef; margin-top: .3rem; padding-top: .6rem; }
.lang-switch > ul .switch-note { padding: .5rem .75rem .35rem; font-size: .75rem; color: #6b7280; line-height: 1.4; }
.lang-switch { flex-shrink: 0; }
.lang-switch > summary span { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Tablet landscape: the Turkish menu fills the bar. The globe goes and the links draw
       closer, so "TR · TL" stays on one line without pushing the page sideways. */
    .lang-switch > summary .bx-globe { display: none; }
    .navbar .navbar-nav .nav-link { padding-left: .4rem; padding-right: .4rem; white-space: nowrap; }
    header nav.navbar.ps-lg-5 { padding-left: 1rem !important; }
}

/* Readable small print. MDB's muted grey (#7b7b7b, 4.2:1 on white) and its green
   (#14a44d, 3.3:1) fall short of the 4.5:1 that small text needs, and the audits listed
   every muted line on the homepage and the footer. A shade darker clears it; "body" in
   front outranks MDB's own !important rules, which load after this file. */
body .text-muted,
body .text-body-secondary,
body .text-black-50 { color: #626262 !important; }
body .text-success.text-uppercase { color: #0f7a3c !important; }

/* A link inside the footer's line of text was told apart by colour alone. */
footer .border-top a { text-decoration: underline; }

/* ------------------------------------------------ account button in the header
   "Sign in", or the member's initials with a menu (My trips, profile, sign out). */
.acct-menu { position: relative; flex-shrink: 0; }
.acct-menu > summary, .acct-signin {
    list-style: none; display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .75rem; border-radius: 999px; border: 1px solid #dfe5e2;
    font-weight: 700; font-size: .9rem; color: #1f2a26; cursor: pointer; user-select: none;
    text-decoration: none; white-space: nowrap; background: #fff;
}
.acct-signin:hover, .acct-menu > summary:hover { border-color: #b9c7c2; color: #1f2a26; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-signin > i { font-size: 1.2rem; color: var(--brand); }
.acct-avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.acct-menu > ul { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 1040; min-width: 220px; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid #e3e8e5; border-radius: 12px; box-shadow: 0 12px 30px rgba(16, 42, 34, .12); }
.acct-menu > ul a, .acct-menu > ul button { display: flex; width: 100%; align-items: center; gap: .55rem; padding: .55rem .75rem; border-radius: 8px; color: #1f2a26; text-decoration: none; font-weight: 600; border: 0; background: none; text-align: left; }
.acct-menu > ul a:hover, .acct-menu > ul button:hover { background: #f1f8fb; }
.acct-menu > ul i { font-size: 1.15rem; color: var(--brand); }
.acct-menu .acct-menu-head { padding: .5rem .75rem .45rem; border-bottom: 1px solid #eef1ef; margin-bottom: .25rem; font-size: .82rem; color: #6b7280; overflow-wrap: anywhere; }
.acct-menu .acct-menu-head strong { display: block; color: #0f1f2a; font-size: .92rem; }

@media (max-width: 991.98px) {
    /* Phones: logo · account · language · menu, on one line. The account shows its icon only. */
    .acct-menu, .acct-signin { order: 1; margin-left: auto; position: relative; top: 5px; }
    .acct-menu + .lang-switch, .acct-signin + .lang-switch { margin-left: .4rem; }
    .acct-signin { padding: .38rem .55rem; }
    .acct-signin span, .acct-menu .acct-name { display: none; }
    .acct-menu > summary { padding: .3rem .4rem; }
}
@media (min-width: 992px) {
    .acct-menu, .acct-signin { margin-left: .75rem; }
    .acct-menu + .lang-switch, .acct-signin + .lang-switch { margin-left: .5rem; }
}

/* The account links at the foot of the phone menu, set apart by a line. */
.acct-nav-mobile { border-top: 1px solid #e3e8e5; padding-top: .6rem; margin-top: .2rem; }
.acct-nav-mobile .nav-link { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; }
.acct-nav-mobile .nav-link i { color: var(--brand); font-size: 1.15rem; }
.acct-nav-mobile button.nav-link { border: 0; background: none; width: 100%; text-align: left; color: inherit; }
/* iPhone Safari turns the e-mail under the name into a mail link (underlined, tappable);
   in the account menu it is only a label. */
.acct-menu .acct-menu-head a[x-apple-data-detectors],
.acct-menu .acct-menu-head a[href^="mailto:"] { color: inherit !important; text-decoration: none !important; pointer-events: none; }
.acct-menu .acct-menu-email { display: block; -webkit-touch-callout: none; }
@media (max-width: 991.98px) {
    /* Phones: the account menu opened from the initials and ran left from them, over the
       logo — and past the screen's edge on a 360 px phone. It now hangs from the bar's
       right side, inside the screen, like a sheet. Static so the bar is its anchor; the
       margin keeps the initials level with the language button. */
    .site-header .acct-menu { position: static; top: auto; margin-top: 10px; }
    .site-header .acct-menu > ul { right: 12px; left: auto; top: calc(100% - 4px); width: min(300px, calc(100vw - 24px)); min-width: 0; }
}

/* ------------------------------------------------------------ footer
   Four columns: brand (logo, line, social, TÜRSAB) · quick links · information · contact. */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; padding: 2.5rem 0 1.75rem; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer-logo { width: 170px; height: auto; }
.footer-brand p { margin: 0; font-size: .9rem; color: #5b6b73; max-width: 300px; line-height: 1.5; }
.footer-social { display: flex; align-items: center; gap: .55rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f6eaeb; color: #c3202f; font-size: 1.35rem; transition: background .12s, color .12s; }
.footer-social a:hover { background: #c3202f; color: #fff; }
/* The trust card at the top of the footer: the TÜRSAB licence (badge, member agency,
   licence number, a verify button) and three facts, divided by thin rules. */
.trust-strip { display: flex; align-items: stretch; margin: 2rem 0 .5rem; padding: .9rem; background: #fff; border: 1px solid #e6ebe9; border-radius: 20px; box-shadow: 0 10px 30px rgba(16, 42, 34, .06); }
.trust-tursab { display: flex; align-items: center; gap: 1.1rem; padding-right: 1.5rem; margin-right: 1.5rem; border-right: 1px solid #e6ebe9; text-decoration: none; color: #374151; flex: none; }
.trust-tursab:hover { color: #374151; }
.trust-badge { display: grid; place-items: center; padding: .7rem; border-radius: 14px; background: #fdf1f1; transition: background .15s; }
.trust-tursab:hover .trust-badge { background: #fbe4e4; }
.trust-badge img { width: 168px; height: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
footer .trust-strip .trust-licence { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; color: #4b5563; }
footer .trust-strip .trust-licence strong { display: flex; align-items: center; gap: .45rem; color: #0f1f2a; font-size: 1.08rem; font-weight: 800; }
.trust-licence strong i { color: #16a34a; font-size: 1.6rem; }
footer .trust-strip .trust-no { color: #6b7280; font-size: .95rem; padding-left: 2.05rem; }
footer .trust-strip .trust-verify { display: inline-flex; align-items: center; gap: .35rem; margin: .35rem 0 0 2.05rem; padding: .45rem .9rem; border-radius: 10px; background: #fdecec; color: #c3202f; font-weight: 700; font-size: .9rem; transition: background .15s; }
.trust-tursab:hover .trust-verify { background: #f9d7d7; }
.trust-items { display: flex; align-items: center; flex: 1; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.trust-items { min-width: 0; }
.trust-items li { flex: 1 1 auto; display: flex; justify-content: center; padding: 0 .9rem; min-width: 0; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* In Turkish the three labels were wider than the strip at about 1200 px and pushed
       the page sideways; there they may wrap onto a second line. */
    footer .trust-items li { padding: 0 .6rem; }
    footer .trust-items strong { white-space: normal; }
}
.trust-items li + li { border-left: 1px solid #e6ebe9; }
.trust-items li, .trust-items li a { align-items: center; gap: .75rem; }
.trust-items li a { display: flex; text-decoration: none; color: inherit; }
.trust-items li a:hover strong { color: #1da851; }
.trust-items li > span:last-child, .trust-items li a > span:last-child { display: flex; flex-direction: column; font-size: .86rem; color: #6b7280; line-height: 1.3; }
.trust-items strong { color: #0f1f2a; font-size: .95rem; font-weight: 700; white-space: nowrap; }
.trust-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.45rem; }
.trust-icon.is-blue { background: #eaf3f9; color: var(--brand); }
.trust-icon.is-green { background: #e8f8ee; color: #1da851; }
.trust-icon.is-grey { background: #eef1f4; color: #374151; }
@media (max-width: 1199.98px) {
    /* Laptops and tablets: the licence across the top, the three facts under it. */
    .trust-strip { flex-direction: column; gap: 1rem; }
    .trust-tursab { border-right: 0; margin-right: 0; padding: 0 0 1rem; border-bottom: 1px solid #e6ebe9; }
    .trust-items li { justify-content: flex-start; }
    .trust-items li:first-child { padding-left: 0; }
}
@media (max-width: 767.98px) {
    /* Phones: badge above its text, the facts one under another. */
    .trust-strip { padding: .9rem; border-radius: 16px; }
    .trust-tursab { flex-direction: column; align-items: stretch; text-align: left; gap: .8rem; }
    .trust-badge img { width: 100%; max-width: 260px; }
    .trust-items { flex-direction: column; align-items: stretch; gap: .8rem; }
    .trust-items li { padding: 0; justify-content: flex-start; }
    .trust-items li + li { border-left: 0; border-top: 1px solid #eef1ef; padding-top: .8rem; }
}
.footer-col h2 { font-size: 1.05rem; font-weight: 800; color: #0f1f2a; margin: .35rem 0 .9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col ul a { color: #4b5563; text-decoration: none; font-weight: 500; }
.footer-col ul a:hover { color: var(--brand); }
.footer-contact p { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .7rem; font-size: .88rem; color: #374151; line-height: 1.45; }
.footer-contact p i { color: var(--brand); font-size: 1.15rem; margin-top: .05rem; flex: none; }
.footer-contact a { color: #1f2a26; font-weight: 600; text-decoration: none; }
.footer-contact a:hover { color: var(--brand); }
@media (max-width: 991.98px) {
    /* Tablets: the brand across the top, the three columns under it. */
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    /* Phones: one column; the brand and the TÜRSAB licence first. */
    /* Phones: the brand and the TÜRSAB licence first, the two link lists side by side,
       the contact across the bottom. */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; padding-top: 2rem; }
    .footer-contact { grid-column: 1 / -1; }
    .footer-col ul a { font-size: .9rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Tablet landscape: with the Turkish menu the bar is full, so the account button is its
       icon alone (as on phones) and the language button keeps its place on screen. */
    .acct-signin span, .acct-menu .acct-name { display: none; }
    .acct-signin { padding: .38rem .55rem; }
    .acct-menu > summary { padding: .3rem .4rem; }
    .site-header .navbar-nav.ms-5 { margin-left: .6rem !important; gap: .15rem !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Small laptops: with "Education" the Turkish and German menus no longer fit at the
       default spacing, so the links draw closer and keep to one line. */
    .site-header .navbar-nav.ms-5 { margin-left: .8rem !important; gap: .4rem !important; }
    .site-header .navbar-nav .nav-link { white-space: nowrap; }
}