/*Start detailsBlock1*/
a, button {
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* The navbar is `fixed-top`, so this padding is the only thing keeping the first
   heading out from under it. It has to track the navbar's own height, which is set
   per breakpoint elsewhere: 87px on desktop, 67px under 767, 60px under 576. The
   old flat 100px left just 13px of real clearance on desktop.

   Keep these in step if the navbar height ever changes. */
.block1 {
    padding-top: 132px; /* 87 navbar + 45 */
}

@media (max-width: 767px) {
    .block1 { padding-top: 95px; } /* 67 navbar + 28 */
}

@media (max-width: 576px) {
    .block1 { padding-top: 86px; } /* 60 navbar + 26 */
}

/* Section headings ("Vietnam golf packages", "Da Nang golf packages") ran straight
   into the block above them. The first one is already clear of the navbar via the
   padding above, so only subsequent ones need the separation. */
.package-index-header {
    margin-bottom: 4px;
}

.block1-form-head + .block1-form-head .package-index-header,
#packages-container .block1-form-head ~ .block1-form-head .package-index-header {
    margin-top: 44px;
}
.detailsBlock1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 400px;
    margin-top: 100px;
    padding: 1px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.detailsBlock1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    border-radius: 0 0 12px 12px;
}
.detailsBlock1 .main-container {
    position: relative;
    min-height: 400px;
    z-index: 1;
}
.detailsBlock1-payment {
    margin-top: 50px;
    background: #FFC800;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    display: inline-block;
    padding: 8px 10px;
    color: #000101;
}

.detailsBlock1-fancybox-link {
    position: absolute;
    right: 0;
    bottom: 50px;
    background: #fff;
    padding: 10px 23px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    border-radius: 4px;
    color: #000101;

}
.detailsBlock1-fancybox-link a  {
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.detailsBlock1-fancybox-link img {
    position: relative;
    right: 10px;
}
.block1 .owl-nav {
    display: flex !important;
    justify-content: space-between;
    position: absolute;
    top: 20%;
    width: 100%; /* Ensure navigation arrows are positioned at the container's edges */
    z-index: 10;
}

.block1 .owl-prev, .block1 .owl-next {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 6px 12px rgb(0 0 0 / 8%);
    cursor: pointer;
    position: absolute;
    z-index: 10;
}

.block1 .owl-prev {
    left: -25px; /* Adjust to position it correctly */
}

.block1 .owl-next {
    right: -25px; /* Adjust to position it correctly */
}

.block1 .owl-prev ,.block1 .owl-next {
    display: flex !important;
    position: absolute !important;
    /* top: 20%; */
    /* right: -25px; */
    background: #fff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0px 6px 12px rgb(0 0 0 / 8%) !important;
}
.block1 .owl-nav .owl-prev.disabled,
.block1 .owl-nav .owl-next.disabled {
    display: none !important;
}

.block1 .owl-prev span, .block1 .owl-next span {
    font-size: 24px;
    line-height: 1;
    display: block;
    position: relative;
}

.block1 .owl-prev:focus, .block1 .owl-next:focus {
    outline: none;
}

.block1 .owl-theme .owl-nav [class*=owl-]:hover {
    background: #f0f0f0; /* Slight hover effect */
    color: inherit;
}

.hide-nav-important .owl-prev,
.hide-nav-important .owl-next {
    display: none !important;
}


/*=============================================================*/
.btn-custom {
    padding: 10px 8px;
    margin-top: 2%;
    color: #122C5A;
    font-size: 17px;
    font-weight: 400;
    transition: background-color 0.3s ease;
}

.paragraph-content p ,#more-text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    /* Was `justify`. Without hyphenation that stretches word spacing into visible
       rivers on wide screens, which is what made these pages read as unpolished.
       Ragged-right is the safer default for body copy. */
    text-align: left;
    color: #000101;
    display: block;
}

/* Body copy ran the full container width, ~1180px on desktop, roughly 160
   characters a line. Comfortable reading is 60-80, so cap the measure while
   leaving headings, cards and the rest of the layout full width. */
.paragraph-content p, .paragraph-content li,
#more-text p, #more-text li {
    max-width: 78ch;
}

.paragraph-content {
    margin-top: 20px;
}

.paragraph-content ,#more-text {
    margin-top: 20px;
}

/* ── Rich SEO content inside descriptions ─────────────────────────────────
   Descriptions are stored as raw HTML and echoed with {!! !!}. Only `p` was
   ever styled here, because Malaysia and Thailand store a single paragraph.
   Vietnam's content carries <h2> section headings and a native <details> FAQ,
   which fell through to browser defaults: ~24px headings sitting beside 14px
   justified body text, and bare disclosure triangles for the FAQ.

   Scoped to elements the single-paragraph markets do not contain, so this
   cannot change how MY/TH render. */

.paragraph-content h2, #more-text h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: #122C5A;
    margin: 26px 0 10px;
}

.paragraph-content h2:first-child, #more-text h2:first-child {
    margin-top: 0;
}

.paragraph-content h3, #more-text h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color: #122C5A;
    margin: 20px 0 8px;
}

.paragraph-content ul, .paragraph-content ol,
#more-text ul, #more-text ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.paragraph-content li, #more-text li {
    font-size: 14px;
    line-height: 25px;
    color: #000101;
    margin-bottom: 6px;
}

/* FAQ. Native <details> gives a cramped disclosure triangle and no spacing,
   so it is restyled into cards with a chevron that rotates when open. */
.paragraph-content details, #more-text details {
    border: 1px solid #e6ebf5;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

.paragraph-content details[open], #more-text details[open] {
    background: #f8fafd;
}

.paragraph-content summary, #more-text summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 42px 14px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: #122C5A;
    position: relative;
}

/* Hide the default marker in both engines. */
.paragraph-content summary::-webkit-details-marker,
#more-text summary::-webkit-details-marker {
    display: none;
}

.paragraph-content summary::marker, #more-text summary::marker {
    content: '';
}

/* Chevron, drawn in CSS so it needs no asset. */
.paragraph-content summary::after, #more-text summary::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #122C5A;
    border-bottom: 2px solid #122C5A;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.paragraph-content details[open] summary::after,
#more-text details[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.paragraph-content summary:hover, #more-text summary:hover {
    background: #f1f5ff;
}

.paragraph-content details p, #more-text details p {
    margin: 0;
    padding: 0 16px 14px;
    text-align: left;
}

@media (max-width: 768px) {
    .paragraph-content h2, #more-text h2 { font-size: 16px; line-height: 24px; }
    .paragraph-content h3, #more-text h3 { font-size: 14px; }
    .paragraph-content li, #more-text li { font-size: 12px; line-height: 22px; }
    .paragraph-content summary, #more-text summary { font-size: 13px; padding-right: 38px; }
    .paragraph-content details p, #more-text details p { font-size: 12px; }
}

#more-text {
    display: none;
}

#read-more,#read-less {
    display: inline;
    margin-left: 5px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
    font-weight: 400;
    color: #122C5A;
}

#read-more:hover ,#read-less:hover{
    text-decoration: underline;
}

.package-index-header{
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0em;
    color: #122C5A;
}


.block-state-packages {
    position: relative;
}
.block-state-packages > img {
    min-height: 250px;
    max-height: 250px;
    min-width: 100%;
    transition: all .3s ease-in-out;
    border-radius: 16px;
}
.block-state-packages > img:hover {
    transform: scale(1.05);
}
.block-state-packages:hover {
    text-decoration: none;

}


.cards-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}


.block-package-head{
    margin-bottom: 5px;
}
.block-package-head2{
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #122C5A;
}

.packages-container {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    gap: 3rem;
    min-height: 470px;
}

.package ,.packageOwl {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 2rem; /* Space between rows */
    display: flex;
    flex-direction: column;
    min-height: 80%;
}
.package{
    width: calc(33% - 2rem);
}
.packageOwl {
    width: 345px;
    height : 470px
}
.package-show-more-link {
    width: 345px;
    height: 470px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: center;
}
.package img , .packageOwl img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    aspect-ratio: 345 / 200;
    /*padding: 4%;*/
    /*border-radius: 28px;*/
    margin-bottom: 3%;
}

.package-body {
    padding: 0 0.7rem;
    flex-grow: 1; /* Allows the package-body to grow and fill the space */
}

.package-body .title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0;
    font-family: 'Inter', 'Roboto', sans-serif;
}

.package-body .duration {
    font-size: 12px;
    color: #666;
    margin-bottom: 1rem;
    margin-top:2%;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.package-duration {
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #555555;
}
.package-body .price {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    font-family: 'Inter', 'Roboto', sans-serif;

}
.package-body .price span {
    font-size: 12px;
    font-weight: 400;
    font-family: 'Inter', 'Roboto', sans-serif;

}
.package-body .short_description {
    font-family: 'inter','Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    /* Same reason as the body copy above, and worse here: justifying inside a
       narrow card forces even bigger gaps between words. */
    text-align: left;
    color: #000101;
}
.package-body p {
    line-height: normal;
}

.package-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.7rem;
    background-color: #f8f9fa;
}

.package-footer .rating {
    display: flex;
    align-items: center;
}

.package-footer .rating span {
    margin-left: 0.25rem;
    color: #f39c12;
}

.package-footer button {
    padding: 0.5rem 1rem;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    width: 150px;
    height: 50px;
    background-color: #122C5A;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.package-location{
    font-size: 16px;
    font-weight: 400;
    color: #000 !important;
}
.package-location a{
    padding-left: 1%;
}
.course_image_package{
    min-height: 127px !important;
    max-height: 127px !important;
}
.course_head_package{
    font-size: 14px;
    text-align: -webkit-left;
}
.block3-place-star img{
    width: 10px !important;
    height: 10px;
}
.details-section {
    margin-top: 20px;
}

.block2-head {
    font-size: 24px;
    font-weight: 700;
    color: #122C5A; /* Dark blue */
    margin-bottom: 10px;
}

/* Two-column grid layout */
.details-content {
    display: grid;
    grid-template-columns: 150px auto; /* Left column (labels) is 150px, right column (values) takes remaining space */
    gap: 25px 20px; /* Adds space between rows and columns */
    font-size: 16px;
    line-height: 1.5;
    color: #333; /* Dark text color */
}

.details-item {
    display: contents; /* Make sure both columns (label and value) align properly in the grid */
}

.details-item strong {
    font-weight: 700;
    color: #122C5A; /* Dark blue for labels */
    padding-right: 10px; /* Add space between the label and value */
    justify-self: start;
}

.details-item span, .details-item ul {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    font-family: 'Inter', 'Roboto', sans-serif;
}

.details-item ul {
    padding-left: 20px; /* Adds padding for the list in the right column */
}

.details-item ul li {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    margin-bottom: 5px;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.itinerary-section {
    margin-top: 20px;
}



.block-head {
    font-size: 24px;
    font-weight: 700;
    color: #122C5A; /* Dark blue color for the heading */
    margin-bottom: 20px;
    text-align: left;
}
.itinerary-head{
    font-size: 18px !important;
    font-weight: 600  !important;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.itinerary-content {
    font-size: 14px;
    line-height: 1.5;
    color: #333; /* Dark text color */
}

.itinerary-day {
    margin-bottom: 20px; /* Space between the itinerary days */
}

.itinerary-day h4 {
    font-size: 14px;
    font-weight: 700;
    color: #122C5A; /* Dark blue for the day headings */
    margin-bottom: 10px;
    font-family: 'inter','Roboto'
}

.itinerary-day p {
    width: 80%;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    color: #666;
    font-family: 'inter','Roboto'
}
.itinerary-day p strong {

    color: #122c5a;
}
.book_details_head ,.book_details_number{
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.book_details_head2{
    font-size: 12px;
    font-weight: 400;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.book_details_icon{
    text-align: end;
}
.book_details_icon img{
    width: 12px;
    height: 12px;
    color: #122C5A;
}
.book_main_head{
    font-family: 'Inter', 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #122C5A;
    margin-bottom: 15px;
}
.block2-form-not-available-btn-container{
    padding-top: 0;
}

.btn-whatsapp{
    width: 100%;
    background-color: #2BB673;
    color: #fff;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 4%;
}
.btn-whatsapp img {
    margin-right: 2%;
}
.head_space{
    margin: 5% 0%;
}
.block2-hr{
    margin: 2% 0%;
}
.courses_container_package{
    max-width: 100%;
}
.bt-state {
    display: block;
    flex-wrap: nowrap; /* Prevent wrapping on mobile view */
    overflow-x: auto; /* Allow horizontal scrolling */
    padding: 10px 0; /* Add some padding for better spacing */
}

.bt-state .btn-custom {
    /*flex: 1 1 auto; !* Allow buttons to scale based on available space *!*/
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center; /* Center align button text */
    color: #122C5A;
    /* Was a soft grey drop shadow, which read as a floating artefact next to flat
       body copy. A tinted pill with a real border sits better and makes it look
       like the filter it actually is. */
    background: #f1f5ff;
    border: 1px solid #dde5f7;
    box-shadow: none;
    padding: 7px 18px;
    border-radius: 999px !important;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bt-state .btn-custom:hover {
    background: #e3ecff;
    border-color: #c3d3f2;
    color: #122C5A;
}
.mobile_whatsapp_button{
    display: none;
}

.owl-carousel .owl-nav .custom-left-arrow,
.owl-carousel .owl-nav .custom-right-arrow {
    position: absolute;
    top: 50%;  /* Vertically align in the center of the carousel */
    transform: translateY(-50%);  /* Adjust for centering */
    font-size: 24px;  /* Adjust the size of the arrow */
    background-color: rgba(0, 0, 0, 0.5);  /* Optional: Add background color */
    color: white;  /* Change arrow color */
    padding: 10px;
    cursor: pointer;
    z-index: 1000;  /* Make sure arrows are on top of the content */
}

.owl-carousel .owl-nav .custom-left-arrow {
    left: -30px;  /* Adjust left position to be outside the carousel */
}

.owl-carousel .owl-nav .custom-right-arrow {
    right: -30px;  /* Adjust right position to be outside the carousel */
}
.owl-carousel .owl-nav .custom-left-arrow:hover,
.owl-carousel .owl-nav .custom-right-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);  /* Darken background on hover */
    color: #fff;  /* Change arrow color on hover */
}
.carousel-container {
    position: relative;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 50%;
}

.left-btn {
    left: -25px; /* Adjust as needed */
}

.right-btn {
    right: -25px; /* Adjust as needed */
}
.see-more-button{
    width: 100%;
    margin-top: 126%;
    background-color: #122C5A;
    border-radius: 8px;
    font-size: 15px;
    padding: 15px;
    border-color: #122C5A;
}
.see-more-button:hover{
    background-color: #122C5A;
    border-color: #122C5A;

}
@media (max-width: 1200px) {
    .package {
        width: calc(50% - 2rem); /* Two cards per row */
    }
    .packageOwl {
        width: calc(106% - 2rem);; /* Two cards per row */
    }
    .detailsBlock1 {
        max-width: 950px;
    }
    .detailsBlock1, .detailsBlock1 .main-container {
        min-height: 350px;
    }
}
@media (max-width: 767px) {
    .mobile_whatsapp_button{
        display: block;
        font-size: 3.5vw;
        padding: 2.5vw 4vw;
    }
    .mobile_whatsapp_button img {
        width: 4vw;
        height: 4vw;
    }
}

@media (max-width: 991px) {
    .detailsBlock1 {
        margin-top: 100px;
        max-width: 710px;
        border-radius: 10px;
    }
    .detailsBlock1::after {
        border-radius: 0 0 10px 10px;
    }

    .detailsBlock1, .detailsBlock1 .main-container {
        min-height: 280px;
    }

    .detailsBlock1-fancybox-link {
        font-size: 11px;
    }

    .detailsBlock1-fancybox-link img {
        width: 17%;
    }

    .detailsBlock1-payment {
        margin-top: 25px;
        font-size: 11px;
        padding: 6px 8px;
    }
}
/* Responsive Design */
@media (max-width: 768px) {
    .paragraph-content p, #more-text p {
        font-size: 12px;
    }
    .bt-state a{
        font-size: 12px;
        font-weight: 400;
        color: #122C5A;
    }
    .package-index-header{
      font-size:   17px;
        /* `margin-top: 5%` used to be the only thing pushing this clear of the
           fixed navbar. `.block1` now owns that spacing at every breakpoint, and
           keeping both stacked them into a large empty band on mobile. */
        margin-top: 0;
    }
    .btn-group{
        justify-content: flex-start;
    }
    .block2-link img {
        margin-left: 13px;
        width: 5%;
    }
    .courses_container_package{
        max-width: 60%;
    }
    .block-head {
        font-size: 20px;
    }

    .itinerary-day h4 {
        font-size: 16px;
    }

    .itinerary-content {
        font-size: 13px;
    }

    .details-content {
        grid-template-columns: 1fr; /* Make one column for mobile */
    }

    .details-item strong {
        text-align: left; /* Labels are left-aligned on mobile */
        padding-right: 0;
    }

    .package {
        width: calc(100% - 0rem); /* Full width card on smaller screens */
        margin-bottom: 0;
    }
    .packageOwl {
        width: calc(100% - 0rem); /* Full width card on smaller screens */
        margin-bottom: 0;
    }
    .package-footer button {
        width: 100px;
        height: 38px;
        font-size: 13px;
        padding: 0.3rem 0.8rem;
    }
    .package-footer {
        padding: 0.5rem 0.7rem;
    }

    .block2-head {
        font-size: 5vw;
    }

    .package-location {
        font-size: 3vw;
    }

    .package-location img {
        width: 18px;
    }

    .package-duration {
        font-size: 10px;
    }
    .details-item strong {
        font-weight: 700;
        color: #122C5A; /* Dark blue for labels */
        text-align: right; /* Align label text to the right */
        padding-right: 10px; /* Add space between the label and value */
        justify-self: start;
    }

    .details-item span, .details-item ul {
        color: #333; /* Darker text for values */
        margin: 0;
    }
    .see-more-button{
        margin-top: 123%;
    }
}

@media (max-width: 576px) {
    .detailsBlock1 {
        margin-top: 80px;
        max-width: calc(100% - 30px);
        border-radius: 8px;
    }
    .detailsBlock1::after {
        border-radius: 0 0 8px 8px;
    }

    .detailsBlock1, .detailsBlock1 .main-container {
        min-height: 220px;
    }

    .detailsBlock1-payment {
        margin-top: 3vw;
        font-size: 3vw;
        padding: 2vw 3vw;
    }

    .detailsBlock1-fancybox-link {
        font-size: 3vw;
        padding: 2vw 6vw;
        bottom: 4vw;
        right: 4vw;
    }
}