@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');

/* Haul overrides — extends Camps/Hawaa :root tokens without changing the original theme files */
:root {
    --color-haul-blue: #29235C;
    --color-haul-light-blue: #0CB2DB;
    --color-haul-buttons: #DD0E5E;
    --color-haul-title-contrast: #DD0E5E;
    --color-haul-dark-background:#1A1334;
    --color-haul-light-background: #29235C;
    --color-haul-light-light-background: #D6F3FD;
    --color-haul-gray-background: #F1FBFE;
    --color-haul-contrast-1: #8FCC2F;
    --color-haul-white: #fff;
    --color-haul-cyan: #00B7F1;
    --color-haul-violet: #812ADD;
    --font-baloo: "Baloo 2", sans-serif;

    --font-body--family: var(--font-baloo);
    --font-heading--family: var(--font-baloo);
    --font-subheading--family: var(--font-baloo);
    --font-button--family: var(--font-baloo);

    --color-foreground-heading: var(--color-haul-blue);
    --color-foreground-subheading: var(--color-haul-blue);
    --color-primary: var(--color-haul-blue);
    --color-primary-hover: var(--color-haul-cyan);
    --color-primary-background: var(--color-haul-white);
    --color-primary-background-hover: var(--color-haul-white);

    --color-primary-button-text: var(--color-haul-white);
    --color-primary-button-background: var(--color-haul-buttons);
    --color-primary-button-border: var(--color-haul-buttons);
    --color-primary-button-icon: var(--color-haul-buttons);
    --color-primary-button-icon-background: var(--color-haul-white);
    --color-primary-button-hover-text: var(--color-haul-white);
    --color-primary-button-hover-background: var(--color-haul-blue);
    --color-primary-button-hover-border: var(--color-haul-blue);
    --color-primary-button-hover-icon: var(--color-haul-buttons);
    --color-primary-button-hover-icon-background: var(--color-haul-white);

    --color-secondary-button-text: var(--color-haul-buttons);
    --color-secondary-button-background: var(--color-haul-white);
    --color-secondary-button-border: var(--color-haul-buttons);
    --color-secondary-button-icon: var(--color-haul-white);
    --color-secondary-button-icon-background: var(--color-haul-buttons);
    --color-secondary-button-hover-text: var(--color-haul-white);
    --color-secondary-button-hover-background: var(--color-haul-buttons);
    --color-secondary-button-hover-border: var(--color-haul-white);
    --color-secondary-button-hover-icon: var(--color-haul-buttons);
    --color-secondary-button-hover-icon-background: var(--color-haul-white);

    --pagination-item-active-foreground: var(--color-haul-white);
    --pagination-item-active-background: var(--color-haul-buttons);
    --pagination-item-active-border: var(--color-haul-buttons);

    --swiper-navigation-background-color: var(--color-haul-buttons);
    --swiper-navigation-hover-background-color: var(--color-haul-blue);
    --swiper-pagination-bullet-inactive-color: var(--color-haul-dark-background);
    --swiper-pagination-color: var(--color-haul-buttons);
}

html,
body {
    font-family: var(--font-baloo);
}
body {
    background-color: var(--color-haul-dark-background);
    color: var(--color-haul-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-baloo);
    color: var(--color-haul-white);
}

.header-1 {
    background-color: var(--color-haul-light-background);
}
.header-1 .header-grid {
    background: none;
}

.image-text .content {
    color: var(--color-haul-white);
}

.heading {
    color: var(--color-haul-white);
}

.image-text .content p {
    color: var(--color-haul-white);
}

.image-text .content ul {
    color: var(--color-haul-white);
}

.image-text.haul-light .content * {
    color: var(--color-haul-blue);
}
.image-text.haul-light .content .button {
    color: var(--color-haul-white);
}
.image-text.haul-light .content h3 {
    font-size: 1.2em;
    font-weight: 700;
}
.image-text.haul-light .content ul {
    margin-top: 10px;
}
.image-text.haul-light .content ul li {
	list-style-image: url('data:image/svg+xml,<svg transform="scale(1) translate(0, 10)" transform-origin="center" width="24" height="22" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1_810)"><path d="M2.8125 9H15.1875" stroke="%23DD0E5E" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.125 3.9375L15.1875 9L10.125 14.0625" stroke="%23DD0E5E" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1_810"><rect width="18" height="18" fill="white"/></clipPath></defs></svg>');/* Use translate(X, Y) to position the SVG up, down, left, and right */
}
.image-text.haul-light .content ul li::marker{
	font-size: 1.5em;
	line-height: 0.01em;
}

.top-vedouci-carousel .tab-buttons .tab-btn,
.button--green {
    background: transparent;
    border-color: var(--color-haul-contrast-1);
    color: var(--color-haul-white);
}
.haul-light .button--green {
    color: var(--color-haul-blue);
}

.top-vedouci-carousel .tab-buttons .tab-btn.active,
.top-vedouci-carousel .tab-buttons .tab-btn:hover,
.top-vedouci-carousel .tab-buttons .tab-btn:focus {
    background: var(--color-haul-contrast-1);
    border-color: var(--color-haul-contrast-1);
    color: var(--color-haul-blue);
}
.haul-light .button--green:hover,
.haul-light .button--green:focus,
.haul-light .button--green:active {
    background: var(--color-haul-contrast-1);
    border-color: var(--color-haul-contrast-1);
    color: var(--color-haul-white);
}

.top-vedouci-carousel a.popular-item-wrap {
    background-color: var(--color-haul-white);
}
.top-vedouci-carousel a.popular-item-wrap h2 {
    color: var(--color-haul-blue);
}

.popular-destination .popular-item-wrap:focus .button--primary,
.popular-destination .popular-item-wrap:hover .button--primary,
.popular-destination .popular-item-wrap:focus .button--secondary,
.popular-destination .popular-item-wrap:hover .button--secondary {
  color: var(--color-primary-button-hover-text);
  background-color: var(--color-haul-buttons);
}
.faq-page .faq {
background-color: var(--color-haul-blue);
}
.faq-page .accordion-block .heading {
    color: var(--color-haul-light-background);
}
.faq-page .accordion-block .accordion-opener .acc-icon {
    background-color: var(--color-haul-buttons);
}
.faq-page .accordion-block.active {
    background-color: var(--color-haul-violet);
}
.faq-page .accordion-block.active .heading {
    color: var(--color-haul-white);
}
.faq-page .accordion-block.active .accordion-opener .acc-icon {
    background-color: var(--color-haul-white);
}

.contact .content-with-image .button--primary,
.contact .conatact-form-wrap .button--primary {
    background-color: transparent;
    border: 1px solid var(--color-haul-contrast-1);
    color: var(--color-haul-white);
}

.contact .conatact-form-wrap select,
.contact .conatact-form-wrap input,
.contact .conatact-form-wrap textarea {
    background-color: var(--color-haul-white);
    color: var(--color-haul-blue);
}

.contact .conatact-form-wrap h2,
.contact .conatact-form-wrap .text {
    color: var(--color-haul-white);
}

.blog .section-content .blog-card {
    background-color: var(--color-haul-white);
    border: none;
}

.blog .section-content .text {
    color: var(--color-haul-white);
}

.blog .section-content li .card-list-item,
.blog .section-content .blog-title {
    color: var(--color-haul-blue); 
}

.section-headings .text {
    color: var(--color-haul-white);
}

.text-has-bg {
    background: var(--color-haul-buttons);
}
.text-blue {
    color: var(--color-haul-blue) !important;
}
.text-light-blue {
    color: var(--color-haul-light-blue) !important;
}
.text-red {
    color: var(--color-haul-buttons) !important;
}

.filter-tab .tab-button.show:before {
    outline: 2px solid var(--color-haul-blue);
    background-color: var(--color-haul-contrast-1);
}
.filter-tab .tab-button.show {
    font-weight: 700;
}

.marquee {
    background-color: var(--color-haul-light-light-background);
}

.popular-destination.haul-light,
.featured-tour.haul-light,
.image-grid.offer-grid.haul-light,
.promotion.haul-light,
.image-text.haul-light,
.section-padding.haul-light,
.destination-gallery.haul-light,
.destination-overview.haul-light,
.destination-reviews.haul-light,
.destination-available.haul-light,
.destination-map.haul-light,
.subscribe-2.haul-light,
.faq-page.haul-light {
    background-color: var(--color-haul-white);
}
.featured-tour.haul-light.background-light {
    background-color: var(--color-haul-light-light-background);
}

.featured-tour .svg-wrapper {    
    color: var(--color-haul-cyan);
}

.featured-tour .svg-wrapper.icon-20 {
    color: var(--color-haul-buttons);
}


.haul-light .button--secondary {
    color: var(--color-haul-blue);
    border-color: var(--color-haul-blue);
}


.haul-light .offer-badge {
    background-color: var(--color-haul-contrast-1);
}

.promotion.testimonial-2.haul-light .testimonial-card {
    background-color: var(--color-haul-light-light-background);
    box-shadow: none;
}
.promotion.testimonial-2.haul-light .hover-on-card:hover {
    background: var(--color-haul-light-light-background) !important;
}
    .promotion.testimonial-2.haul-light .testimonial-card h2 {
        color: var(--color-haul-blue);
    }


.blog-2 .section-content .content * {
    color: var(--color-haul-blue);
}
.blog-2 .section-content .content .button {
    color: var(--color-haul-white);
}
.blog-2 .section-content .text {
    color: var(--color-haul-blue);
}
.blog-2 .section-content .card-list-item svg,
.blog-2 .section-content .card-list-item svg * {
    color: var(--color-haul-cyan);
}

.blog-2 .section-content .wishlist-icon {
    color: var(--color-haul-buttons);
}
.blog-2 .section-content .wishlist-icon.active svg {
    fill: var(--color-haul-buttons);
}

.destination-overview.haul-light  .overview-desc * {
    color: var(--color-haul-blue);
}

.destination-reviews.haul-light .section-headings-left * {
    color: var(--color-haul-blue);
}