@import url("//fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("//fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400..800&display=swap");
@import url(variable.css);

body {
    margin: 0;
    padding: 0;
    color: var(--accent-color-seventh);
    font-family: var(--font-primary);
    font-size: var(--font-body-lg);
    background: var(--accent-color-sixth);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--color-primary);
}

::selection {
    background: var(--brand-green);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    @media (min-width: 1200px) {
        max-width: 1040px;
    }
}

/* Shared brand furniture --------------------------------------------------- */

/* The dome from the logo, reused as a heading rule and as section decoration */
.arc-rule {
    display: block;
    width: 156px;
    height: 18px;
    margin: 22px auto 0;
    overflow: visible;
}

.arc-rule path {
    stroke: var(--brand-green);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: arc-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes arc-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
    font-size: var(--font-body-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-green-deep);
    background: var(--accent-color-fourth);
    border-radius: var(--bordert-radius-xl);
    padding: 7px 16px;
    margin-bottom: 20px;
}

.eyebrow:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-green);
    flex: none;
}

.eyebrow--light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.eyebrow--light:before {
    background: var(--brand-green-light);
}

.contactinfo {
    font-family: var(--font-secondary);
    font-size: var(--font-body-md);
}

.contactinfo a {
    color: var(--color-primary);
    transition: color 0.25s ease;
}

.contactinfo a:hover {
    color: var(--brand-green-deep);
}

.contactinfo svg {
    color: var(--brand-green);
    flex: none;
}

.topbarbgwrap {
    background: var(--brand-sky-wash);
}

.toprightcol p,
.toprightcol a{
    color: var(--color-primary);
    margin-bottom: 0;
    font-family: var(--font-secondary);
    font-size: var(--font-body-sm);
    font-weight: 500;
}

.btnstyleone {
    border-radius: var(--bordert-radius-xl);
    -webkit-border-radius: var(--bordert-radius-xl);
    -moz-border-radius: var(--bordert-radius-xl);
    -ms-border-radius: var(--bordert-radius-xl);
    -o-border-radius: var(--bordert-radius-xl);
    border: var(--border-primary);
    padding: 8px 20px;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: var(--font-body-lg);
    background: var(--transparent-background);
    text-decoration: none;
    color: var(--color-secondary);
    -webkit-transition: background-color 0.3s ease, color 0.3s ease;
    -moz-transition: background-color 0.3s ease, color 0.3s ease;
    -o-transition: background-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btnstyleone:hover {
    background: var(--color-secondary);
    color: var(--accent-color-first);
}

.btnstyletwo {
    border-radius: var(--bordert-radius-xl);
    -webkit-border-radius: var(--bordert-radius-xl);
    -moz-border-radius: var(--bordert-radius-xl);
    -ms-border-radius: var(--bordert-radius-xl);
    -o-border-radius: var(--bordert-radius-xl);
    padding: 20px 40px !important;
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 28px;
    color: var(--accent-color-first);
    font-size: var(--h6);
    background: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: inline-block !important;
    box-shadow: var(--shadow-green);
    position: relative;
    z-index: 999;
}

.btnstyletwo:hover {
    background: var(--accent-color-first);
    color: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
    transform: translateY(-2px);
    box-shadow: 0 22px 50px -20px rgba(0, 148, 24, 0.65);
}

.navbg {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-navy-sm);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: 0px;
    line-height: 22px;
    height: 22px;
    width: 22px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    background: linear-gradient(41.35deg, var(--brand-green-deep) 15.71%, var(--brand-green-light) 85.11%);
    color: var(--accent-color-first);
    text-align: center;
    font-family: var(--heading-font);
}

.cart-countwrap svg {
    color: var(--color-primary);
    transition: color 0.25s ease;
}

.cart-countwrap:hover svg {
    color: var(--brand-green-deep);
}

.navbar-wrapper .dropdown{
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
}

.navbar {
    padding: 0 0px 0px 0px !important;
    z-index: 9999;
}

.navbar-nav {
    align-items: center;
}

.navbar-wrapper ul.dropdown > li,
li.nav-item {
    margin-right: 12px;
}

ul.navbar-nav li:last-child {
    margin-right: 0;
}

.navbar-wrapper a.active,
.nav-item a.active {
    color: var(--color-primary);
    border-bottom: 2.5px solid var(--brand-green);
    font-weight: 700;
}

.navbar-wrapper a,
.nav-item a {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-primary);
    padding: 10px !important;
    font-family: var(--font-primary);
    border-bottom: 2.5px solid var(--transparent-background);
    display: block;
}

.navbar-wrapper .dropdown a:hover,
.nav-item a:hover {
    color: var(--brand-green-deep);
}

.navbar-wrapper ul li {
    position: relative;
}

.navbar-wrapper ul.dropdown > li > a {
    white-space: nowrap;
}

.navbar-wrapper ul li > ul {
    list-style: none;
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    margin-top: 0;
    margin-left: 10px;
    background-color: #fff;
    padding-left: 0;
    border-top: 2px solid var(--brand-green);
    box-shadow: var(--shadow-navy);
    border-radius: 0 0 var(--bordert-radius-md) var(--bordert-radius-md);
    min-width: 200px;
    z-index: 1;
    overflow: hidden;
}

.navbar-wrapper ul li > ul a {
    white-space: nowrap;
    display: block;
    padding: 5px 10px !important;
}

.navbar-wrapper ul li:hover > ul {
    display: block;
}

/* Line-art props ----------------------------------------------------------
   Objects drawn from the logo's own vocabulary (bounce house, table, chair,
   popcorn cart) placed as quiet decoration. Markup comes from inc/props.php.  */

.prs-prop {
    display: block;
}

/* A row of props standing on a ground line, as in the logo. */
.prop-rail {
    display: block;
    width: 100%;
    height: auto;
    color: var(--brand-navy);
    pointer-events: none;
}

.prop-rail--hero {
    position: relative;
    margin-top: 56px;
    margin-bottom: -2px;
    opacity: 0.16;
}

.prop-rail--footer {
    max-width: 1040px;
    margin: 0 auto 26px;
    opacity: 0.2;
}

/* Corner decoration inside a panel. */
.prop-watermark {
    position: absolute;
    color: var(--brand-navy);
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

.prop-watermark--light {
    color: #ffffff;
    opacity: 0.11;
}

.prop-watermark--tl { top: 38px; left: 44px; }
.prop-watermark--tr { top: 38px; right: 44px; }
.prop-watermark--bl { bottom: 30px; left: 44px; }
.prop-watermark--br { bottom: 30px; right: 44px; }

/* Props that run off the panel edge, cropped by its border radius. */
.prop-watermark--bleed-l { bottom: -36px; left: 10px; }
.prop-watermark--bleed-r { bottom: -42px; right: 14px; }

/* Props standing just outside the text column, flanking a centred section. */
.prop-flank {
    position: absolute;
    bottom: 96px;
    color: var(--brand-navy);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.prop-flank--left { left: 2%; }
.prop-flank--right { right: 2%; }
.prop-flank--low { bottom: 60px; }

/* Pennant bunting. Flags alternate between the two logo colours. */
.bunting {
    display: block;
    width: 100%;
    height: 54px;
    pointer-events: none;
}

.hero-bunting {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0.85;
    z-index: 1;
}

.testimonial-bunting {
    position: absolute;
    top: 6px;
    left: 9%;
    right: 9%;
    width: auto;
    height: 46px;
    opacity: 0.6;
    /* Navy on navy is invisible, so re-theme the swag for the dark panel. */
    --bunting-line: rgba(255, 255, 255, 0.5);
    --bunting-flag-a: var(--brand-green-light);
    --bunting-flag-b: rgba(255, 255, 255, 0.68);
}

/* Welcome Section CSS Start */
.welcomewrap {
    background: var(--accent-color-tenth);
    width: 100%;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
}

/* Faint blueprint grid: the logo is technical line art, so the page sits on paper */
.welcomewrap:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
    opacity: 0.55;
    pointer-events: none;
}

.welcomewrap > .container {
    position: relative;
    z-index: 1;
}

.welcometext {
    margin-top: 40px;
}

.welcometext h1 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(40px, 2.2vw + 26px, var(--h2));
    color: var(--color-primary);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 0;
}

/* The green dome from the logo, arcing over the headline */
.welcometext .hero-arc {
    display: block;
    width: 196px;
    max-width: 62%;
    height: auto;
    margin-bottom: -6px;
    overflow: visible;
}

.welcometext .hero-arc path {
    fill: none;
    stroke: var(--brand-green);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: arc-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.welcometext h6 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-body-xl);
    color: var(--accent-color-seventh);
    line-height: 1.6;
    margin: 24px 0px 32px;
    max-width: 42ch;
}

.hero-proof {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0;
    margin: 28px 0 0;
}

.hero-proof li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--brand-navy-deep);
}

.hero-proof svg {
    color: var(--brand-green);
    flex: none;
}

/* Staggered entrance for the hero column */
.welcometext > * {
    animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.welcometext > *:nth-child(1) { animation-delay: 0.05s; }
.welcometext > *:nth-child(2) { animation-delay: 0.12s; }
.welcometext > *:nth-child(3) { animation-delay: 0.19s; }
.welcometext > *:nth-child(4) { animation-delay: 0.26s; }
.welcometext > *:nth-child(5) { animation-delay: 0.33s; }
.welcometext > *:nth-child(6) { animation-delay: 0.4s; }

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Logo-style line illustration, cut out to a transparent background
   (home-hero-cutout.webp is home-hero.webp with its white keyed out), so it
   sits straight on the grid paper with no frame. */
.imgwrap > .grayscale {
    width: 100%;
    max-width: 620px;
}

.hero-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

/* The illustration's own arc leaves its top-right corner open; float the balloon there. */
.hero-illustration + .balloon-img {
    top: -42px;
    right: -6px;
}

/* Line-art balloon echoing the logo's stroke weight */
.balloon-img {
    position: absolute;
    top: -14px;
    right: -78px;
    width: 112px;
    height: auto;
    color: var(--brand-navy);
    animation: drift 7s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-14px) rotate(3deg); }
}

/* End Welcome CSS*/

/* Product Servide Section CSS */

.product-service-wrap {
    max-width: 1200px;
    width: 96%;
    margin: 100px auto 26px;
    background-color: var(--color-primary);
    background-image: radial-gradient(90% 120% at 12% -10%, rgba(96, 146, 214, 0.28) 0%, transparent 58%);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    position: relative;
    overflow: hidden;
}

.product-service-wrap .container {
    position: relative;
    z-index: 1;
    padding: 80px 0;
    max-width: 924px;
    width: 96%;
    margin: 0px auto;
}

.prodsercol1_3 {
    text-align: center;
}

.prodsercol1_3 .feature-mark {
    color: var(--brand-green-light);
    display: inline-block;
}

.prodsercol1_3 h4 {
    font-family: var(--heading-font);
    color: var(--accent-color-first);
    line-height: 1.2;
    font-size: 28px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 14px;
}

.prodsercol1_3 p {
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-primary);
    line-height: 1.7;
    font-size: var(--font-body-lg);
    font-weight: 400;
    margin-bottom: 10px;
}

/* End Product Servide Section CSS */

/* What we rent — the four core services from the brand's own line art ------- */

.fundamentals-wrap {
    padding: 96px 0 8px;
}

.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.section-head h2 {
    font-size: var(--font-title-3xl);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.section-head p {
    font-size: var(--font-body-xl);
    line-height: 1.65;
    color: var(--accent-color-seventh);
    margin-bottom: 0;
}

.fundamentals-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.fundamental-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 24px;
    padding: 34px 26px 30px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease, border-color 0.35s ease;
}

/* A green dome rises behind the icon on hover — the logo gesture, animated */
.fundamental-card:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22px;
    width: 104px;
    height: 104px;
    margin-left: -52px;
    border-radius: 50%;
    background: var(--brand-green-wash);
    transform: scale(0.35);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.fundamental-card:hover {
    transform: translateY(-6px);
    border-color: var(--brand-green-wash-strong);
    box-shadow: 0 24px 48px -28px rgba(11, 33, 69, 0.4);
}

.fundamental-card:hover:before {
    transform: scale(1);
    opacity: 1;
}

.fundamental-card .fundamental-icon {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    color: var(--brand-navy);
    transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fundamental-card:hover .fundamental-icon {
    transform: translateY(-3px);
}

.fundamental-card h3 {
    position: relative;
    font-size: var(--font-body-2xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary);
    margin-bottom: 10px;
}

@media (min-width: 992px) {
    .fundamental-card h3 {
        min-height: 2.5em;
    }
}

.fundamental-card p {
    position: relative;
    font-size: var(--font-body-md);
    line-height: 1.65;
    color: var(--accent-color-seventh);
    margin-bottom: 0;
}

/* Products Categories CSS  Start*/

.prodcatmainwrap {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
    background-color: var(--accent-color-first);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    box-shadow: 0 30px 70px -50px rgba(11, 33, 69, 0.45);
}

.prodcatwrap {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0px auto;
}

.prodcatwrap .section-title {
    color: var(--color-primary);
    font-family: var(--heading-font);
    line-height: 1.2;
    font-size: 40px;
}

.prodcatwrap .prod-info {
    padding: 8px;
    border-radius: var(--bordert-radius-md);
    -webkit-border-radius: var(--bordert-radius-md);
    -moz-border-radius: var(--bordert-radius-md);
    -ms-border-radius: var(--bordert-radius-md);
    -o-border-radius: var(--bordert-radius-md);
    border: 1px solid var(--hairline);
    margin-bottom: 40px;
    text-decoration: none;
    display: block;
}

.prodcatwrap .prod-info h6 {
    font-size: var(--font-body-xl);
    color: var(--color-primary);
    font-weight: 600;
    font-family: var(--heading-font);
    line-height: 28px;
    text-align: center;
    padding: 16px 0 8px 0;
    margin-bottom: 0;
    height: 80px;
}

/* The shared category/product grids ship as Tailwind utilities from
   prsclientweb-core; pull their headings onto the brand navy. */
.prodcatwrap h3,
.featuredproductswrap h3 {
    color: var(--color-primary);
}

/* End CSS Of Products Categories */

/* Let Us Help You  CSS Start */

.letushelpyouwrap {
    position: relative;
    text-align: center;
    background: var(--accent-color-tenth);
    padding-top: 120px;
    padding-bottom: 100px;
}

.letushelpyouwrap {
    overflow: hidden;
}

.letushelpyouwrap .container {
    position: relative;
    z-index: 1;
    max-width: 960px;
    width: 96%;
    margin: 0px auto;
}

.letushelpyouwrap h2 {
    font-size: var(--font-title-3xl);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    margin-bottom: 20px;
    font-family: var(--heading-font);
}

.letushelpyouwrap > .container > .row > .col-sm-12 > p {
    font-size: var(--font-body-xl);
    line-height: 1.65;
    color: var(--accent-color-seventh);
    max-width: 62ch;
}

.letushelpyouwrap h6 {
    font-family: var(--font-primary);
    font-size: var(--font-body-xl);
    font-weight: 400;
    line-height: 28px;
    color: var(--accent-color-seventh);
    margin-bottom: 0px;
}

.listbtnstyle {
    padding: 0;
    margin: 48px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    column-count: initial;
}

.listbtnstyle li {
    list-style: none;
    background: var(--accent-color-fourth);
    padding: 14px 26px;
    margin-bottom: 0;
    border-radius: var(--bordert-radius-xl);
    -webkit-border-radius: var(--bordert-radius-xl);
    -moz-border-radius: var(--bordert-radius-xl);
    -ms-border-radius: var(--bordert-radius-xl);
    -o-border-radius: var(--bordert-radius-xl);
    border-bottom: 2px solid var(--accent-color-eighth);
    overflow: hidden;
}

.listbtnstyle li a {
    font-size: var(--font-body-lg);
    font-family: var(--font-secondary);
    color: var(--color-primary);
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
}

/* End CSS - Let Us Help You  */

/* Featured Products CSS Start */

.featuredproductswrap .section-title {
    color: var(--color-primary);
    line-height: 1.2;
}

/* End CSS - Featured Products */

/* Why Fundamental — the differentiator, plus the counties we deliver to ----- */

.promise-wrap {
    padding: 100px 0 20px;
}

.promise-panel {
    position: relative;
    background: var(--brand-navy);
    background-image: radial-gradient(115% 135% at 92% -8%, rgba(96, 146, 214, 0.3) 0%, transparent 62%);
    border-radius: 48px;
    padding: 72px 64px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 48px;
    align-items: center;
}

/* Blueprint rule lines, same idea as the hero */
.promise-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
}

.promise-copy {
    position: relative;
}

.promise-copy h2 {
    color: #fff;
    font-size: var(--font-title-3xl);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

.promise-copy h2 em {
    font-style: normal;
    color: var(--brand-green-light);
}

.promise-copy p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-body-xl);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 52ch;
}

.promise-art {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    color: rgba(255, 255, 255, 0.82);
}

.promise-art .promise-art-arc {
    stroke: var(--brand-green-light);
}

.servicearea {
    margin-top: 28px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 28px;
    padding: 30px 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.servicearea-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--heading-font);
    font-size: var(--font-body-xl);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    flex: none;
}

.servicearea-label svg {
    color: var(--brand-green);
    flex: none;
}

.county-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.county-list li {
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--brand-navy-deep);
    background: var(--brand-sky-wash);
    border-radius: var(--bordert-radius-xl);
    padding: 8px 16px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.county-list li:hover {
    background: var(--accent-color-fourth);
    color: var(--brand-green-deep);
}

/* Operation Hours CSS Start */
.operationhourswrap {
    padding-top: 120px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    background: var(--accent-color-tenth);
}

.operationhourswrap .container {
    position: relative;
    z-index: 1;
}

.operationhourswrap h2 {
    font-weight: 700;
    font-size: var(--font-title-3xl);
    line-height: 1.16;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 16px;
}

.operationhourscol {
    max-width: 796px;
    width: 96%;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    padding: 40px;
    margin-bottom: 60px;
    margin: 44px auto 0;
    box-shadow: 0 30px 60px -48px rgba(11, 33, 69, 0.5);
}

.operationhourscol h5 {
    font-family: var(--heading-font);
    font-size: var(--font-body-2xl);
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
}

.operationhourscol ul {
    padding: 0px;
    margin: 0;
}

.operationhourscol ul li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0px;
    border-top: 1px solid var(--hairline);
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    font-family: var(--heading-font);
    color: var(--color-primary);
}

.operationhourscol ul li:first-of-type {
    border-top: none;
}

.operationhourscol .timecol {
    color: var(--brand-green-deep);
    font-weight: 600;
}

span.line {
    width: 22px;
    display: inline-block;
    background: var(--brand-green);
    height: 1.5px;
    vertical-align: middle;
    margin: 0px 8px;
}

.btnstylethree {
    background: var(--color-secondary);
    border: 2px solid var(--color-secondary);

    padding: 16px 32px;
    font-size: var(--h6);
    color: var(--accent-color-first);
    text-decoration: none;
    text-align: center;
    font-family: var(--heading-font);
    font-weight: 600;
    display: block;
    width: 180px;
    margin: 48px auto 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: var(--bordert-radius-xl);
    -webkit-border-radius: var(--bordert-radius-xl);
    -moz-border-radius: var(--bordert-radius-xl);
    -ms-border-radius: var(--bordert-radius-xl);
    -o-border-radius: var(--bordert-radius-xl);
    box-shadow: var(--shadow-green);
}

.btnstylethree:hover {
    background: var(--accent-color-first);
    color: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
    transform: translateY(-2px);
}

/* Operation Hours CSS End */

/* Testimonial CSS Start */
.testinobualwrap {
    padding: 80px 0px;
    background: var(--color-primary);
    background-image: radial-gradient(100% 140% at 50% 125%, rgba(96, 146, 214, 0.32) 0%, transparent 62%);
    text-align: center;
    position: relative;
    max-width: 1200px;
    width: 96%;
    margin: 0px auto 80px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    overflow: hidden;
}

.testinobualwrap .container {
    position: relative;
    z-index: 1;
}

.testinobualwrap .carousel-item .rating-stars {
    margin-bottom: 28px;
    color: var(--brand-green-light);
}

.testinobualwrap .carousel-caption {
    position: inherit;
    right: auto;
    bottom: auto;
    left: auto;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--accent-color-first);
    text-align: center;
    max-width: 578px;
    margin: 0px auto;
}

.carousel-caption .line {
    display: block;
    margin: 28px auto;
    width: 101px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-green-light);
}

.carousel-caption h5 {
    font-size: var(--h5);
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.5;
    color: var(--accent-color-first);
}

.carousel-caption p {
    font-size: var(--font-body-lg);
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0;
}

.carousel-control-prev-icon {
    background-image: url(../images/icon/left-arrow.png) !important;
    height: 49px !important;
}

.carousel-control-next-icon {
    background-image: url(../images/icon/right-arrow.png) !important;
    height: 49px !important;
}

/* End Testimonial CSS */

/* Footer CSS Start */
footer {
    background: var(--accent-color-fifth);
    border-top: 1px solid var(--hairline);
    overflow: hidden;
}

/* The logo file carries a white background, so give it a deliberate tile
   rather than letting a bare white rectangle sit on the tinted footer. */
.footerlogo img {
    background: #fff;
    border-radius: 18px;
    padding: 14px 22px;
    box-shadow: var(--shadow-navy-sm);
}

.footer-nap {
    font-size: var(--font-body-md);
    line-height: 1.7;
    color: var(--accent-color-seventh);
}

.footer-nap a {
    color: var(--brand-navy-deep);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-nap a:hover {
    color: var(--brand-green-deep);
}

.footernav ul li a {
    color: var(--color-primary);
    font-size: var(--font-body-sm);
    font-family: var(--font-primary);
}

.copyright {
    color: var(--accent-color-seventh);
    font-size: var(--font-body-sm);
    font-family: var(--font-primary);
}

.copyright a {
    color: var(--accent-color-seventh);
}

/* End Footer CSS  */

@media (prefers-reduced-motion: reduce) {
    .arc-rule path,
    .welcometext .hero-arc path,
    .welcometext > *,
    .balloon-img {
        animation: none !important;
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }
}