a { cursor: pointer; }
.fw-400 { font-weight: 400; }
.full-w { width: 100%; }
.flx-bx { display: flex; }
.fl-al-cent { align-items: center; }
.fl-ju-cent { justify-content: center; }
.fl-ju-end { justify-content: end; }
.fl-ju-space { justify-content: space-between; }
.fl-ju-space-a { justify-content: space-around; }
.fl-wrap { flex-wrap: wrap; }
.flx-dir-col { flex-direction: column; }
.rel { position: relative; }
.center-txt { text-align: center; }

.lh-17 { line-height: 1.7; }
.lh-18 { line-height: 1.8; }

.pt-10 { padding-top: 10px; }
.pt-30 { padding-top: 30px; }
.pt-45 { padding-top: 45px; }
.pt-60 { padding-top: 60px; }

.pb-20 { padding-bottom: 20px; }
.pb-45 { padding-bottom: 45px; }
.pb-60 { padding-bottom: 60px; }

.py-10 { padding-top: 10px; padding-bottom: 10px; }

.mt--5 { margin-top: -5px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }

.fs-09 { font-size: .9rem; }
.fs-19 { font-size: 1.9rem; }

.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }

.px-15 { padding-left: 15px; padding-right: 15px; }

.maw-350 { max-width: 350px; }
.maw-430 { max-width: 430px; }
.maw-530 { max-width: 530px; }
.maw-740 { max-width: 740px; }
.maw-780 { max-width: 780px; }
.maw-800 { max-width: 800px; }
.maw-890 { max-width: 890px; }
.maw-1250 { max-width: 1250px; }

/* OVERLAPPING BACKGROUND STYLING */
.purple-gradient-bg { background: transparent linear-gradient(180deg,#30264b 75%,#ebebeb 220%) 0% 0% no-repeat padding-box; }
.purple-gradient-bg-md { background: transparent linear-gradient(180deg,#30264b 62%,#ebebeb 240%) 0% 0% no-repeat padding-box; }
.page .overlap-bg-section .content.container { position: relative; z-index: 3; }
.page .overlap-bg-section .purple-curve-top { position: absolute; height: 410px; width: 100%; background-color: #30264b; z-index: 0; margin-top: -2px; }

/* TRADE PRICELIST FORM */
.trade-pricelist { display: grid; background-color: #fff; padding: unset !important; border: 3px solid #30264b; border-radius: 16px; position: relative; z-index: 2; box-shadow: #30264bee 6px 5px; }
.trade-pricelist .info { max-width: 500px; }
.trade-pricelist .info p, .trade-pricelist .info p > div { font-size: 1rem; }
.trade-pricelist .info p { margin-bottom: 10px; }
.trade-pricelist .title { font-size: 2.25rem; font-weight: 900; font-family: "massilia",sans-serif; line-height: 1.2; }
.trade-pricelist .first-col { display: flex; display: flex; flex-wrap: wrap; justify-content: center; gap: 25px }
.trade-pricelist .second-col .inner { display: flex; flex-direction: column; justify-content: center; padding: 0 50px; height: 100%; gap: 20px; }
.trade-pricelist .second-col.area1 { background-color: #e9e9e9; }
.trade-pricelist .second-col.area2 { background-color: #fcb54c; }
.trade-pricelist .editor-field input[type=text] { border: 2px solid #000; font-size: 1.125rem; }

.page.custom-pennants h2, .page.wire-badges h2, .page h2 { font-size: 1.5625rem; }
.page h2 { margin: unset; }
.page .banner .inner .inner-sub .text { font-size: 1.125rem; }
.weoffer .section { text-align: center; justify-content: center; }


/* COLORS */
.dblue-txt { color: #052f58; }
.white-txt { color: #fff; }
.yellow-txt { color: #fcb54c; }
.purple-bg { background-color: #30264b; }
.purple-txt { color: #30264b !important; }
.lilac-bg { background-color: #f5f2ff; }
.yellow-bg { background-color: #fcb54c; }

.inline-link { color: #fcb54c; font-weight: 700; }

/*BANNER*/
.banner { overflow: hidden; background-repeat: no-repeat; background-size: cover; transition: min-height 500ms allow-discrete; }
.banner.home h1 { font-size: 6.0625rem; }
.banner.home .text { font-size: 1.125rem; font-family: 'Poppins', sans-serif; font-weight: 400; }
.banner .inner { position: relative; }
.banner .inner .inner-sub { transform: translateY(-30px); gap: 20px; display: flex; flex-direction: column; position: relative; min-height: 520px; padding-bottom: 25px; justify-content: center; align-items: center; text-align: center; padding-left: 15px; padding-right: 15px; }
.banner .inner .inner-sub .sub { font-size: 2.125rem; font-family: "massilia",sans-serif; font-weight: 600; }

svg path { stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: dash 2s linear forwards; }


/* HOMEPAGE */
.home-page h2 { font-size: 2.1875rem; }
.home-page .news { padding-top: 100px; position: relative; padding-bottom: 100px; }
.home-page .news > .container { position: relative; z-index: 2; }
.home-page .news > .bg-shape { position: absolute; left: 0; bottom: 0; clip-path: url(../images/clip-paths/NewsClipPath.svg#news-clip-path-2); }


.print { padding-top: 150px; margin-top: -135px; padding-bottom: 75px; }
.ourservices { padding-top: 120px; margin-top: -120px; background-color: #fff; }
.weoffer h2, .print h2, .news h2, .ourservices h2 { margin-bottom: unset; }

.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; grid-row-gap: 20px; }
.service-grid a { text-decoration: none; }
.service-grid .service:hover { text-decoration: underline; }
.service-grid .service-wrapper { position: relative; height: 60px; }
.service-grid .service-wrapper > .bg { background-color: #FCB54C; width: 100%; height: 60px; border-radius: 8px; position: absolute; top: 3px; left: -4px; z-index: 0; }
.service-grid .service { border: 2px solid #30264B; border-radius: 8px; background-color: #fff; color: #30264B; max-width: 350px; display: flex; justify-content: center; align-items: center; font-family: "massilia", sans-serif !important; font-weight: 900; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; }
.service-grid .service:hover { transform: translate(5px, -5px); }

/* HOMEPAGE CARDS */
.card-container { flex-wrap: wrap; }
.card { border-radius: 16px; max-width: 600px; padding: 20px; }
.card .inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; }
.card .inner h3 { font-family: "massilia", sans-serif; font-weight: 600; font-size: 1.875rem; }
.card .inner p { padding: 0 20px; }
.ourservices .section .card { background-color: #30264B; color: #fff; }
.ourservices .section .card img { border-radius: 10px; }

.print .alert { background-color: #30264B; border-radius: 11px; font-size: 1rem; padding: 30px 50px; }
.print .alert p { margin: auto; }
.print .section .card { background-color: #fff; }

.stats { display: flex; justify-content: space-evenly; padding: 0 100px; }
.stat { font-family: "massilia", sans-serif; color: #fff; text-align: center; }
.stat span { font-size: 1.575rem; }
.stat span.val { font-size: 1.9rem; font-weight: 900; }

@media screen and (max-width: 1230px) {
    .banner.home .text { font-size: 1.125rem; max-width: 610px; }
    .banner.home .inner .inner-sub { min-height: 580px; }
}

@media screen and (min-width: 992px) and (max-width: 1229px) {
    .banner.home h1 { font-size: 5.75rem; }
}

@media screen and (min-width: 992px) {
    .banner { margin-top: -200px; }
    .service-grid .service { font-size: 1.375rem !important; height: 60px; }
}

@media screen and (max-width: 992px) {
    h1, h2 { font-size: 2rem; }
    body { font-size: 1rem; }
    .banner { padding-top: 100px !important; transition: min-height 500ms ease-in !important; min-height: 450px; }
    .banner .inner .inner-sub { min-height: unset !important; }
}

@media screen and (max-width: 991px) {
    .page p.text, .page .banner .inner .inner-sub .text { font-size: 1rem; }
    #tradepricelist .outer { padding: 0 20px; }
    .trade-pricelist { display: flex; flex-direction: column; }
    .trade-pricelist .second-col .inner { padding: 10px; }
    .trade-pricelist .first-col { grid-row: 1; padding: 20px; text-align: center; }
    .trade-pricelist .first-col > img { padding: 20px; transform: translateX(20px); }
    .trade-pricelist .second-col.area1 { grid-row: 2; }
    .trade-pricelist .second-col.area2 { grid-row: 3; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }
    .trade-pricelist .second-col.area2 .btn { max-width: unset; width: 100%; }
    .btn.enquire { padding: 10px; width: 300px; font-size: 1.25rem; height: 35px; }
    .btn.enquire span.icon { width: 28px; height: 28px; }
    .btn.enquire span.icon img { width: 20px; height: 20px; }
    .service-grid .service { font-size: 1.125rem !important; height: 50px; }
}

@media screen and (min-width: 400px) and (max-width:991px) {
    h1, .banner h1 { font-size: 4.5rem !important; }
}

@media screen and (max-width: 930px) {
    .banner.home h1 { font-size: 2.5rem; }
    .banner.home .text { max-width: 420px; }
}

@media screen and (max-width: 880px) {
    .trade-pricelist .info { display: flex; flex-direction: column; align-items: center; }
}

@media screen and (min-width: 769px) and (max-width: 991px) {
    .banner.home h1 { font-size: 5rem; max-width: unset; }
}

@media screen and (min-width: 768px) {
    .news { clip-path: url("../images/clip-paths/NewsClipPath.svg#news-clip-path"); }
    .home-page .services-card { padding: 40px 45px; }
    .card { font-size: 1rem; }
    #content { min-height: calc(100vh - 252px); }
}

@media screen and (max-width: 767px) {
    #content { min-height: calc(100vh - 325px); }
    .banner.home h1 { margin: 0; font-size: 3.5rem; }
    .banner.home .text { max-width: 410px; }
    .banner.home .inner .inner-sub { transform: none; padding-bottom: 30px; padding-top: 30px; }
    .banner.home .inner .inner-sub br { display: none; }
    svg path { stroke-dashoffset: 1300; animation-duration: 2s; }
    h2 { font-size: 1.875rem; }
    .home-page .services-card { padding: 20px 25px; }
    .card { font-size: 0.875rem; }
    .card-container { gap: 1rem !important; }
}


@media screen and (max-width: 500px) {
    .banner.home h1 { margin: 0; font-size: 11vw !important; padding-bottom: 5px; }
    .banner.home .text { max-width: 100%; font-size: 5vw; }
    .banner.home .inner .inner-sub { padding-left: 0; padding-right: 0; }
    .banner.home .inner .inner-sub .sub { font-size: 7.5vw; }
    .banner.home .inner .inner-sub div.text { padding: 0 15px; }
    .btn.enquire { width: 80vw; font-size: 5vw; }
    .btn.enquire > span, .btn.enquire.wider > span { position: static; }
}

@media screen and (min-width: 431px) {
    .banner.home { background-image: url(images/banner/homepage-header.webp); padding-top: 200px; }
}

@media screen and (max-width: 430px) {
    .banner.home { background-image: url(images/banner/golden-finishes-small.webp); }
}

nav ul { list-style: none; padding: 0; margin: 0; }
nav a { text-decoration: none; color: #33294d; font-size: 1.125rem; }
.parent .drop-title { grid-gap: .25rem; cursor: pointer; }
nav li.parent > .drop-title > .menu-toggle { margin-left: 10px; }
nav li.parent:hover > .drop-title > .menu-toggle { transform: rotate(180deg); }
nav.with-border { border: 1px solid #fff; }

@media screen and (max-width:768px) {
    .page .banner { padding-top: 100px; }
    .banner.home .inner { overflow: hidden; }
}

@media screen and (max-width: 767px) {
    .news { clip-path: url("../images/clip-paths/NewsClipPath.svg#news-clip-path-mobile"); }
}



@media screen and (min-width:501px) {
    .banner.home .inner .inner-sub .img { opacity: 0; }
    .banner.home .inner .inner-sub .img.loaded { opacity: 1; }
}

@media screen and (min-width: 500px) {
    .banner { clip-path: url(../images/clip-paths/BannerClipPath.svg#main-banner-clip-path); }
}

@media screen and (max-width: 499px) {
    #logo-banner { clip-path: url(../../images/clip-paths/LogoBannerClipPath.svg#logo-banner-clip-path-mobile) }
    .we-offer-clip-path { clip-path: url(../../images/clip-paths/WeOfferClipPath.svg#we-offer-clip-path-mobile) }
}

.banner { clip-path: url(../images/clip-paths/BannerClipPath.svg#main-banner-clip-path-mobile); }
.banner.home h1 { font-size: 6.0625rem; }
.banner.home .text { font-size: 1.125rem; font-family: 'Poppins',sans-serif; font-weight: 400; }
.home-page h2 { font-size: 2.1875rem }
.home-page .news { padding-top: 100px; position: relative; padding-bottom: 100px; }

.home-page .news > .container { position: relative; z-index: 2; }

.home-page .news > .bg-shape { position: absolute; left: 0; bottom: 0; clip-path: url(../../images/clip-paths/NewsClipPath.svg#news-clip-path-2); }

.print { padding-top: 150px; margin-top: -135px; padding-bottom: 75px; }

.ourservices { padding-top: 120px; margin-top: -120px; background-color: #fff; }

.weoffer h2, .print h2, .news h2, .ourservices h2 { margin-bottom: unset; }

.service-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 30px; grid-row-gap: 20px; }

.service-grid a { text-decoration: none; }
.service-grid .service:hover { text-decoration: underline; }
.service-grid .service-wrapper { position: relative; height: 60px; }

.service-grid .service-wrapper > .bg { background-color: #fcb54c; width: 100%; height: 60px; border-radius: 8px; position: absolute; top: 3px; left: -4px; z-index: 0; max-width: 350px; }

.service-grid .service { border: 2px solid #30264b; border-radius: 8px; background-color: #fff; color: #30264b; height: 60px; max-width: 350px; display: flex; justify-content: center; align-items: center; font-family: "massilia",sans-serif !important; font-weight: 900; font-size: 1.375rem; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; }
.service-grid .service:hover { transform: translate(5px,-5px); }

/* CARDS */
.card-container { flex-wrap: wrap; }

.card { border-radius: 16px; max-width: 600px; padding: 20px }
.card .inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; }
.card .inner h3 { font-family: "massilia",sans-serif; font-weight: 600; font-size: 1.875rem; }
.card .inner p { padding: 0 20px; }
.ourservices .section .card { background-color: #30264b; color: #fff; }
.ourservices .section .card img { border-radius: 10px; }
.print .alert { background-color: #30264b; border-radius: 11px; font-size: 1rem; padding: 30px 50px; }
.print .alert p { margin: auto; }
.print .section .card { background-color: #fff; }
.stats { display: flex; justify-content: space-evenly; padding: 0 100px; }
.stat { font-family: "massilia",sans-serif; color: #fff; text-align: center; }
.stat span { font-size: 1.575rem; }
.stat span.val { font-size: 1.9rem; font-weight: 900; }
.services-card { border-radius: 13px; padding: 20px 25px; flex-wrap: wrap; }
.services-card.white { background-color: #fff; }
#enquiry { position: relative; z-index: 5; }
#enquiryform, .services-card.white.enquiry { width: 880px; max-width: 880px; border: 3px solid #33294d; border-radius: 16px; box-shadow: #33294d 2px 12px 0; position: absolute; left: 50%; top: var(--enquiry-top, 50%); transform: translate(-50%, -20%); opacity: 0; visibility: hidden; pointer-events: none; display: block; transition: transform 600ms ease, opacity 250ms ease, visibility 0s linear 600ms; padding-top: 25px; will-change: transform, opacity; }
#enquiryform.show-form, .services-card.white.enquiry.show-form { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); transition: transform 700ms ease, opacity 300ms ease; z-index: 200; }

#enquiryform.show-form.closing { opacity: 0; pointer-events: none; transform: translate(-50%, -20%); transition: transform 550ms ease, opacity 250ms ease; }

@media (prefers-reduced-motion: reduce) {
    #enquiryform, .services-card.white.enquiry { transition: none; transform: translate(-50%, -50%); }
}
.services-card.white.enquiry textarea { max-height: 94px; }
.services-card.white.enquiry input, .services-card.white.enquiry textarea { border: 2px solid #33294d; border-radius: 5px; }

@media screen and (max-width:400px) {
    .page p.text,
    .page .banner .inner .inner-sub .text { font-size: 4vw !important; }
    .page h2, .page h2.larger { font-size: 6.8vw; max-width: 200px; }

    #enquiryform h2 { font-size: 1.75rem; }
}

/* BUTTON */
.btn { -webkit-box-shadow: 0 0 14px 0 #828282; box-shadow: 0 0 14px 0 #828282; text-align: center; box-shadow: 0 3px 6px #00000029; text-decoration: none; font-weight: 400; padding: 5px 30px; cursor: pointer; min-height: 46px; min-width: 180px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 1rem }
.btn.full-w { width: 100% }
.btn.purple { background-color: #30264b; color: #fff; border: 3px solid #30264b }
.btn.purple:hover { background-color: transparent; color: #30264b }
.btn.gold, .btn.gold a { background-color: #fcb54c; color: #fff; border: 3px solid #fcb54c }
.btn.gold.nav { border: 2px solid #fcb54c; max-width: 160px }
.btn.gold:hover { background-color: transparent; color: #fff }
.btn.enquire { border-radius: 50px; font-size: 1.5rem; text-transform: uppercase; font-weight: 800; padding: 20px 20px 20px 0; display: flex; justify-content: center; width: 334px; height: 68px; position: relative }
.btn.enquire span { width: 42px; height: 42px; border-radius: 50px; display: flex; justify-content: center; align-items: center }
.btn.enquire span.icon { position: absolute; right: 10px; width: 40px; height: 40px }
.btn.enquire.form { height: 48px; width: 375px }
.btn.gold.enquire span { background-color: #30264b }
.btn.gold.enquire:hover span { background-color: #fcb54c }
.btn.gold.enquire:hover span img { filter: invert(1) }
.btn.purple.enquire.enquiry { max-width: 325px }
.btn.purple.enquire span, .btn.purple.form span { background-color: #fcb54c }
.btn.purple.form:hover span { background-color: #30264b }
.btn.purple.enquire span img { filter: invert(1) }
.btn.purple.form { font-size: 1.25rem; font-weight: 600; text-transform: uppercase; justify-content: center; padding: unset; position: relative }
.btn.purple.form span { position: absolute; right: 10px; width: 30px; height: 30px }
.btn.purple.form span img { filter: unset; width: 20px; height: 20px }
.btn.rounded { border-radius: 23px }


/*RSS FEED*/
.rss-feed { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
.rss-feed .hov { container: blogpost / inline-size; }
.rss-feed .blogpost { text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; border-radius: 1rem; padding: 2rem 0; background-color: #fff; transition: padding .2s ease-in-out, border .2s ease-in-out, transform .2s ease-in-out; font-family: "massilia", sans-serif; min-height: 630px; }
.rss-feed .blogpost .image { aspect-ratio: 510/273; background-size: contain; background-position: center; background-repeat: no-repeat; }
.rss-feed .blogpost .btn { margin: auto; }
.rss-feed .blogpost .btn:hover { color: #fcb54c; }
.rss-feed .blogpost .btn span { text-decoration: none !important; }
.rss-feed .blogpost .title { min-height: 108px; display: flex; align-items: center; color: #30264B; font-weight: 600; font-size: 1.875rem; line-height: 1.3; padding: 15px 0px; text-transform: uppercase; text-align: center; justify-content: center; }
.rss-feed .blogpost .summary { padding: 0 20px 20px 20px; text-align: center; font-size: 1rem; line-height: 1.75rem; font-weight: 400; font-family: "Poppins", sans-serif; color: #30264B; }
.rss-feed .hov:hover .blogpost { box-shadow: 0px 3px 6px #00000029; }
.rss-feed .blogpost .blogdate { color: #fff; font-size: 1.25rem; font-weight: 500; text-align: center; text-transform: uppercase; }


@media screen and (max-width:1300px) {
    .rss-feed { display: grid; grid-template-columns: 1fr 1fr !important; }
    .rss-feed .post-0 { grid-column: 1/3; }
}

@media screen and (max-width:700px) {
    .rss-feed { display: grid; grid-template-columns: 1fr !important; }
    .rss-feed .post-0 { grid-column: 1/2; }
    .rss-feed .blogpost { min-height: unset; gap: 15px; }
    .rss-feed .blogpost .title { font-size: 1.35rem; }
}

@media screen and (min-width: 676px) {
    .service-grid .service-wrapper .bg { max-width: 350px; }
}

@media screen and (max-width: 675px) {
    .services-card .service-grid { grid-template-columns: repeat(1,1fr) }
    .services-card .service-grid a > .service { width: 100%; max-width: unset }
    .service-grid .service-wrapper .bg { max-width: unset; }
}


@media screen and (min-width:500px) {
    .rss-feed .hov:hover .blogpost .btn { background-color: #052f58; }
}

@container blogpost (width < 515px) {
    .rss-feed .blogpost { padding: 0.75rem; }
    .rss-feed .blogpost .title { font-size: 1.25rem; }
    .rss-feed .blogpost .title { min-height: 0; }
}

@container blogpost (width < 435px) {
    .rss-feed .blogpost .title { font-size: 1.25rem; padding: 0.5rem 0; }
    .rss-feed .blogpost .blogdate { padding: 0.5rem 0; }
}

@container blogpost (width < 320px) {
    .rss-feed .blogpost .title { font-size: 0.875rem; }
}

@container blogpost (width > 675px) {
    .rss-feed .blogpost { padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 2rem; align-items: center; }
}