.hsb-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hsb-track {
    display: flex;
    transition: transform 1s ease; /* same speed and easing as the original GutSlider (speed 1000) */
}
.hsb-slide {
    flex: 0 0 100%;
    min-width: 100%;
    position: relative;
    background: var(--hsb-bg);
    box-sizing: border-box;
    color: var(--hsb-text, #fff);
}
.hsb-slide-inner {
  
    margin: 0 auto;
    padding: 40px 70px;
    max-width: 100%;
    box-sizing: border-box;
}
.hsb-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.hsb-logos {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}
.hsb-logo {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.hsb-logo img {
    display: block;
    /* height: 50px !important; */
    object-fit: contain;
    object-position: top;
}
.hsb-headings {
    text-align: right;
}
.hsb-heading {
    margin: 20px 0 0px 0px;
    color: var(--hsb-text, #fff);
    line-height: 1.15;
	font-weight:bold;
	font-style: normal;
}
.hsb-heading a {
    color: inherit;
    text-decoration: none;
}
.hsb-bottom-row {
    margin-top: 35px;
}
.hsb-image {
    max-width: 100%;
    text-align: center;
}
@media only screen and (min-width: 900px) {
    .hsb-image img {
        max-height: 700px;
        min-height: 700px;
    }
}
@media only screen and (max-width: 900px) {
    .hsb-heading {
        text-align: center;
    }
    .hsb-logos {
        align-content: center;
        display: flex;
        justify-content: center;
    }
    
}
.hsb-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 3px;
}
.hsb-image a {
    display: block;
}
.hsb-prev,
.hsb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: 0;
    background: var(--hsb-arrow-bg, rgba(0, 0, 0, 0.25));
    color: var(--hsb-arrow-color, #fff);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 42px;
    padding: 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hsb-prev {
    left: 15px;
}
.hsb-next {
    right: 15px;
}
.hsb-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
}
.hsb-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.55);
    padding: 0;
    cursor: pointer;
}
.hsb-dots button.active {
    background: #fff;
}
@media (max-width: 900px) {
    .hsb-slide-inner {
        padding: 30px 60px;
    }
    .hsb-top-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .hsb-headings {
        text-align: left;
    }
    .hsb-heading {
        font-size: 28px;
    }
    .hsb-image img {
        max-height: 240px;
    }
    .hsb-prev,
    .hsb-next {
        width: 34px;
        height: 34px;
        font-size: 16px;
        line-height: 34px;
    }
}

.hsb-slider {
    margin-bottom: 30px;
    /* margin: 0 1.2%; */
}
.hsb-slider-wrapper {
    padding: 0 1.2%;
    display: block;
}
.hsb-prev,
.hsb-next {
    border-radius: 50% !important;
}
.hsb-heading[style*="--hsb-fs"] {
    font-size: var(--hsb-fs);
}
@media (max-width: 900px) {
    .hsb-heading[style*="--hsb-fs"] {
        font-size: min(var(--hsb-fs), 28px);
    }
}

/* Stop the neighbouring slide's background showing as a thin strip on the edge of the current slide.
   The track is moved by a percentage of a (usually fractional) width, so the browser can leave a
   sub-pixel seam where the next/previous slide's colour peeks through. The slide being shown is
   painted on top and extends its own colour 1px past its edges (hidden by .hsb-slider's overflow). */
.hsb-track {
    will-change: transform;
}
.hsb-slide.hsb-current {
    z-index: 1;
}
/* While the slider is resting, only the current slide is painted, so a neighbour's colour can never
   show on its edge. While sliding (.hsb-moving) every slide is visible so the animation looks normal. */
.hsb-slider:not(.hsb-moving) .hsb-slide:not(.hsb-current) {
    visibility: hidden;
}

/* Consistent alignment between slides: logo and title top-aligned, bottom image at the same position on every slide. */
.hsb-slide {
    display: flex;
}
.hsb-slide-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.hsb-top-row {
    align-items: start;
}
.hsb-logos {
    align-items: flex-start;
}
.hsb-logo {
    justify-content: flex-start;
}
.hsb-logo img {
    max-width: 100%;
    object-position: left top;
}
.hsb-headings .hsb-heading:first-child {
    margin-top: 0;
}
.hsb-bottom-row {
    margin-top: auto;
    padding-top: 20px;
}

/* Heading links keep the slide's Text Color on hover / focus / visited (the theme turns a:hover black) */
.hsb-slider .hsb-heading a,
.hsb-slider .hsb-heading a:hover,
.hsb-slider .hsb-heading a:focus,
.hsb-slider .hsb-heading a:active,
.hsb-slider .hsb-heading a:visited {
    color: var(--hsb-text, #fff);
    text-decoration: none;
}

@media only screen and (max-width:600px)
{
	.hsb-headings .hsb-heading:first-child,
	.hsb-headings .hsb-heading:first-child a {
   		font-size: 20px !important;
	}

	.hsb-headings .hsb-heading:last-child,
	.hsb-headings .hsb-heading:last-child a {
   		font-size: 18px !important;
	}
	.hsb-heading {
       margin: 20px 0px 20px 0px !important;
	}

	.hsb-headings .hsb-heading:first-child {
		margin-top: 20px !important;
	}
	
	.hsb-top-row .hsb-logo img {
        height:25px !important;
    }
	
	.hsb-slide-inner
	{
		padding: 30px 50px !important;
	}
	
}

@media only screen and (min-width:600px) and (max-width:1024px)
{
	.hsb-headings .hsb-heading:first-child a {
   		font-size: 24px !important;
		margin-top: 20px !important;
	}
	/* Same size on the heading itself, so the top-alignment trim measures the right font size */
	.hsb-headings .hsb-heading:first-child {
   		font-size: 24px !important;
	}

	.hsb-headings .hsb-heading:last-child,
	.hsb-headings .hsb-heading:last-child a {
   		font-size: 20px !important;
	}
	.hsb-top-row .hsb-logo img {
        height: 30px !important;
    }
	
}

@media only screen and (min-width:768.1px) and (max-width:1024px)
{
	.hsb-top-row
	{
		display:flex !important;
		flex-direction:row !important;
		justify-content: space-between;
	}
}
/* Top-align the slides: trim the space above the first heading's capital letters so the top of the
   text lines up exactly with the top of the logo, on every slide, whatever the font or size.
   Browsers without text-box support get the same result from frontend.js (alignHeadingTops). */
.hsb-headings .hsb-heading:first-child {
    text-box: trim-start cap alphabetic;
}

/* Arrows and dots act purely as buttons: no text caret, text selection or tap flash when hovering /
   clicking them (fast clicks used to select the arrow characters), and no focus ring after a mouse
   click. Keyboard users still get a visible focus ring. */
.hsb-slider .hsb-prev,
.hsb-slider .hsb-next,
.hsb-slider .hsb-dots button {
    cursor: pointer;
    caret-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.hsb-slider .hsb-prev:focus-visible,
.hsb-slider .hsb-next:focus-visible,
.hsb-slider .hsb-dots button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Drag with the mouse / swipe with a finger */
.hsb-slider .hsb-track {
    cursor: grab;
    touch-action: pan-y; /* the page still scrolls up/down; sideways moves drag the slider */
}
.hsb-slider.hsb-dragging .hsb-track,
.hsb-slider.hsb-dragging .hsb-track * {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}
.hsb-slider .hsb-track img {
    -webkit-user-drag: none;
}