html, body {
max-width: 100% !important;
width: auto !important;
overflow-x: hidden !important;
}
/* ========================================================= */
/* RESET */
/* ========================================================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
outline-style: none;
font-size: 100%;
vertical-align: baseline;
background-color: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style-type: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline-style: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
/* ========================================================= */
/* TYPOGRAPHY */
/* ========================================================= */
.handlee-regular {
font-family: "Handlee", cursive;
font-weight: 400;
font-style: normal;
}
.dm-sans-regular {
font-family: "DM Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
:root {
font-size: 16px;
}
/* ========================================================= */
/* ANCHOR LINK OFFSET */
/* ========================================================= */
html {
scroll-padding-top: 28px;
scroll-padding-bottom: 40px;
}
#maintenancesection {
background-color: #e7e1da;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 1px;
padding-left: 0px;
margin-top: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
}
#maintenancesection,
#emergsection,
#watersection {
scroll-margin-top: 35px;
}
#maint-info {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 40px;
padding-left: 0px;
background-color: #e7e1da;
}
#maint-info h1,
#maint-info p,
#maint-info .maint-intro {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
/* MOBILE FIX — increased top spacing when anchor scrolls */
@media (max-width: 768px) {
#maintenancesection,
#emergsection {
scroll-margin-top: 100px !important;
}
}
#newslettersub {
scroll-margin-top: 30px;
}
/* ========================================================= */
/* MAIN BODY STYLES */
/* ========================================================= */
body {
font-size: 16px;
line-height: 20px;
font-family: 'DM Sans', sans-serif;
background-color: #ffffff;
color: #333333;
margin-top: 0px !important; /* FIX: Removed 28px top margin that created the white band */
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #ffffff;
}
ul.circle {
list-style-type: circle;
padding-left: 20px;
color: #003333;
font-size: 16px;
font-weight: 500;
}
li.circle:not(:last-child) {
margin-bottom: 15px;
}
.middle {
text-align: center;
}
ul.repair {
list-style-type: disc;
padding-left: 20px;
color: #000000;
font-size: 16px;
font-weight: 500;
}
li.repair:not(:last-child) {
margin-bottom: 10px;
}
/* ========================================================= */
/* STICKY HEADER #1 — Brown Rotating Header */
/* ========================================================= */
.fixedheader {
position: fixed;
top: 0;
z-index: 9999;
background-color: #453536;
width: 100%;
height: 32px !important;
padding: 0 !important;
display: flex;
align-items: center !important;
justify-content: center;
}
.rotating-message {
color: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 13px !important;
font-weight: 400 !important;
margin: 0 !important;
padding: 0 0 10px 0 !important;
line-height: 1.0 !important;
text-align: center;
}
h2.fixedheader {
margin: auto;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 34px;
font-weight: 500;
letter-spacing: 1px;
word-spacing: 4px;
}
.rotating-message span {
position: absolute;
width: 100%;
left: 0;
opacity: 0;
animation: rotateMessages 12s infinite;
white-space: normal !important;
overflow-wrap: break-word !important;
}
.rotating-message span:nth-child(1) { animation-delay: 0s; }
.rotating-message span:nth-child(2) { animation-delay: 4s; }
.rotating-message span:nth-child(3) { animation-delay: 8s; }
@keyframes rotateMessages {
0% { opacity: 0; transform: translateY(10px); }
10% { opacity: 1; transform: translateY(0); }
30% { opacity: 1; transform: translateY(0); }
40% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 0; transform: translateY(-10px); }
}
/* ========================================================= */
/* STICKY HEADER #2 — Main White Header */
/* ========================================================= */
#mainheader {
position: fixed !important;
top: 32px !important;
z-index: 9998 !important;
background-color: #ffffff !important;
width: 100%;
display: flex;
align-items: flex-end !important;
justify-content: space-between;
padding-top: 8px;
padding-right: 30px;
padding-bottom: 8px;
padding-left: 30px;
box-sizing: border-box;
border-bottom-width: 3px !important;
border-bottom-style: solid !important;
border-bottom-color: #0a9ad1 !important;
}
/* ========================================================= */
/* LEFT: Logo */
/* ========================================================= */
#mainheader .header-left img {
height: 120px !important;
width: auto !important;
object-fit: contain !important;
display: block;
}
.logo-link {
display: inline-block;
}
/* ========================================================= */
/* MIDDLE: Menu */
/* ========================================================= */
.header-menu {
flex-grow: 1;
text-align: center;
position: relative;
}
.header-menu ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: flex;
justify-content: center;
column-gap: 28px;
row-gap: 28px;
}
.header-menu ul li a {
position: relative;
z-index: 1;
padding-top: 6px !important;
padding-right: 0px !important;
padding-bottom: 6px !important;
padding-left: 0px !important;
color: #3b2414;
text-decoration: none;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
}
/* ========================================================= */
/* DESKTOP MENU LIFT */
/* ========================================================= */
@media screen and (min-width: 769px) {
.header-menu ul li a {
display: inline-block !important;
position: relative !important;
bottom: 18px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
}
/* ========================================================= */
/* DESKTOP HOVER BLOCK */
/* ========================================================= */
.header-menu ul li a::before {
content: "";
position: absolute;
left: -12px;
right: -12px;
top: -26px;
bottom: -26px;
background-color: #ff7a00;
opacity: 0;
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0s;
z-index: -1;
}
.header-menu ul li a:hover::before {
opacity: 1;
}
/* ========================================================= */
/* RIGHT: Contact + BOOK NOW */
/* ========================================================= */
.header-right {
display: flex;
flex-direction: row;
align-items: center !important;
justify-content: flex-end !important;
column-gap: 12px !important;
row-gap: 12px !important;
text-align: right !important;
}
.header-right .contact-block {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 1.2;
text-align: right !important;
}
@media screen and (min-width: 769px) {
/* Lift both the contact block and the BOOK NOW button to match menu alignment */
.header-right .contact-block,
.header-right .ghost-button {
position: relative !important;
bottom: 18px !important;
}
.header-right .phone a,
.header-right .email a {
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.4px;
}
}
.header-right .phone a,
.header-right .email a {
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.4px;
color: #003333;
text-decoration: none;
white-space: nowrap;
}
.header-right .ghost-button {
display: inline-block;
padding-top: 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
padding-left: 20px !important;
font-size: 15px !important;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: #ff7a00;
color: #ffffff !important;
text-decoration: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ff7a00;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #ff7a00;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #ff7a00;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #ff7a00;
white-space: nowrap;
margin-top: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
box-shadow: none !important;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.header-right .ghost-button:hover,
.header-right .ghost-button:focus,
.header-right .ghost-button:active {
background-color: #e06b00;
border-top-color: #e06b00;
border-right-color: #e06b00;
border-bottom-color: #e06b00;
border-left-color: #e06b00;
color: #ffffff !important;
text-decoration: none;
box-shadow: none !important;
transform: translateY(-2px);
}
/* ========================================================= */
/* MOBILE PHONE ICON */
/* ========================================================= */
.mobile-call-button {
display: none;
background-color: transparent !important;
background-image: none !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
margin-top: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
text-decoration: none;
align-items: center;
justify-content: center;
}
.mobile-call-button svg {
width: 26px;
height: 26px;
stroke: #000000;
fill: none;
}
/* ========================================================= */
/* REPLACED MOBILE/TABLET BLOCK — PORTRAIT + LANDSCAPE */
/* ========================================================= */
@media screen and (max-width: 1024px) {
.fixedheader {
position: fixed;
top: 0px;
z-index: 9999;
width: 100%;
}
#mainheader {
position: fixed !important;
top: 32px !important;
z-index: 9998 !important;
background-color: #ffffff !important;
width: 100%;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
box-sizing: border-box;
border-bottom-width: 3px !important;
border-bottom-style: solid !important;
border-bottom-color: #0a9ad1 !important;
}
.menu-icon {
display: flex !important;
align-items: center;
justify-content: flex-start;
order: 1 !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
flex-basis: 33% !important;
color: #000000 !important;
font-size: 32px !important;
line-height: 1 !important;
text-decoration: none !important;
user-select: none;
cursor: pointer;
}
#mainheader .header-left {
order: 2 !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
flex-basis: 34% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0px;
}
.logo-link {
display: inline-flex !important;
justify-content: center;
}
#mainheader .header-left img {
height: 50px !important;
width: auto !important;
margin-top: 0px !important;
margin-right: auto !important;
margin-bottom: 0px !important;
margin-left: auto !important;
display: block !important;
}
.header-right {
order: 3 !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
flex-basis: 33% !important;
display: flex !important;
flex-direction: row;
align-items: center !important;
justify-content: flex-end !important;
column-gap: 8px;
row-gap: 8px;
}
.header-right .contact-block,
.header-right .ghost-button {
display: none !important;
}
.mobile-call-button {
display: flex !important;
}
.header-menu {
position: absolute !important;
top: 100%;
left: 0px;
width: 100%;
background-color: #ffffff;
z-index: 9999;
}
.header-menu ul {
display: none;
flex-direction: column;
column-gap: 0px;
row-gap: 0px;
margin-top: 0px;
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #a08b7a;
}
.header-menu.responsive ul {
display: flex;
}
.header-menu ul li {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #a08b7a;
width: 100%;
}
.header-menu ul li a {
padding-top: 14px !important;
padding-right: 14px !important;
padding-bottom: 14px !important;
padding-left: 14px !important;
font-size: 17px !important;
display: block;
text-align: left;
color: #000000 !important;
position: static !important;
bottom: auto !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
}
.header-menu ul li a::before {
display: none !important;
content: none !important;
}
.header-menu ul li a:hover,
.header-menu ul li a:active,
.header-menu ul li a:focus,
.header-menu ul li a:visited:hover {
background-color: #f7f7f7 !important;
color: #000000 !important;
outline-style: none !important;
}
}
/* ========================================================= */
/* BODY OFFSET & ANCHOR SCROLLING FIX */
/* ========================================================= */
body {
padding-top: 101px;
}
html {
scroll-padding-top: 101px;
}
@media screen and (min-width: 1025px) {
body {
padding-top: 165px;
}
html {
scroll-padding-top: 165px;
}
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
height: 0px;
}
/* ========================================================= */
/* TABLET & SMALL DESKTOP FIX (iPad Mini, Galaxy Tab, etc.) */
/* ========================================================= */
@media screen and (min-width: 741px) and (max-width: 1280px) {
#mainheader {
padding-top: 8px !important;
padding-right: 16px !important;
padding-bottom: 8px !important;
padding-left: 16px !important;
align-items: center !important;
}
#mainheader .header-left img {
height: 75px !important;
width: auto !important;
}
.header-menu ul {
column-gap: 14px !important;
row-gap: 14px !important;
}
.header-menu ul li a {
font-size: 15px !important;
bottom: 0px !important;
}
.header-right .contact-block,
.header-right .ghost-button {
bottom: 0px !important;
}
.header-right .phone a,
.header-right .email a {
font-size: 12px !important;
}
.header-right .ghost-button {
padding-top: 8px !important;
padding-right: 14px !important;
padding-bottom: 8px !important;
padding-left: 14px !important;
font-size: 14px !important;
}
}
/* ========================================================= */
/* iPad Mini — LANDSCAPE FIX (tablet only) */
/* ========================================================= */
@media screen and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 600px) {
.menu-icon {
display: none !important;
}
#mainheader .header-left {
order: 1 !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
text-align: left !important;
}
#mainheader .header-left img {
height: 90px !important;
width: auto !important;
}
.header-menu {
order: 2 !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
flex-basis: auto !important;
text-align: center !important;
}
.header-right {
order: 3 !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
justify-content: flex-end !important;
}
.header-right .contact-block {
display: none !important;
}
.header-right .ghost-button {
display: inline-block !important;
position: relative !important;
bottom: 12px !important;
}
.mobile-call-button {
display: none !important;
}
}
/* ========================================================= */
/* Galaxy Tab — LANDSCAPE FIX */
/* ========================================================= */
@media screen and (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
.menu-icon {
display: none !important;
}
#mainheader .header-left img {
height: 120px !important;
width: auto !important;
}
.header-right .contact-block {
display: none !important;
}
.header-right .ghost-button {
display: inline-block !important;
position: relative !important;
bottom: 18px !important;
}
.mobile-call-button {
display: none !important;
}
.header-menu ul {
display: flex !important;
column-gap: 28px !important;
row-gap: 28px !important;
}
}
/* ========================================================= */
/* TABLET OVERRIDE: BOOK NOW button for Mid-Size Tablets */
/* (iPad Mini, iPad Pro, Galaxy Tab) */
/* ========================================================= */
@media screen and (min-width: 741px) and (max-width: 1366px) {
.header-right .contact-block {
display: none !important;
}
.mobile-call-button {
display: none !important;
}
.header-right .ghost-button {
display: inline-block !important;
}
}
/* ========================================================= */
/* MOBILE OVERRIDE: ALL MOBILE PHONES (Portrait & Landscape) */
/* (iPhone 15, iPhone SE, Pixel 8, Galaxy S24, Z Fold 5) */
/* ========================================================= */
@media screen and (max-width: 740px) {
.header-right .contact-block {
display: none !important;
}
/* Hide the BOOK NOW button on mobile phones */
.header-right .ghost-button {
display: none !important;
}
/* Display the telephone icon link on mobile phones */
.mobile-call-button {
display: flex !important;
}
}
/* ========================= BOOKING BAR ========================== */
#book {
width: 100%;
}
.bookingbar {
width: 100%;
height: 60px;
background: #fff;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 35px;
text-align: center;
color:#fff;
}
.bookingbar:hover {
cursor: pointer;
}
#why {
width: 100%;
}
.whybar {
width: 100%;
height: 40px;
background: #fff;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 0;
text-align: center;
color:#fff;
}
.whybar:hover {
cursor: pointer;
}
/* ============================ SECTIONS ==================== */
img.centre {
display: block;
margin-left: auto;
margin-right: auto
}
img.centre2 {
display: block;
margin: 20px auto;
}
p.tag {
font-size: 16px;
font-weight: 700;
line-height: 22px;
font-family: "Handlee", cursive;
word-spacing: 2px;
letter-spacing: 1px;
color: #003333;
text-align: left;
margin: 0;
}
.highlight {
background: #fff;
padding: 0.5em;
width: fit-content;
border-radius:50%;
padding: 22px;
}
/* ============================ PRODUCTS PAGE ========================= */
#mainproduct{
float:left;
width: 100%;
margin-left:20px;
padding-top:10px;
padding-bottom:10px;
padding-left: 0;
padding-right:0;
border: 3px solid #d6d7d9;
}
img.align-left {
float: left;
margin-left: 25px;
margin-right: 25px;
}
#mainproduct h2{
font-size: 22px;
font-family: 'DM Sans', sans-serif;
line-height: 24px;
padding-top:60px;
padding-bottom:10px;
color: #333;
text-align:left;
}
#mainproductspace{
float:left;
width: 100%;
height:70px;
}
#product1{
float:left;
width: 100%;
}
#sidep1{
float:left;
width: 45%;
height: 100%;
background:#fff;
margin-left:5px;
margin-right:0;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:30px;
padding-bottom:10px;
text-align: left;
}
#product1 h3{
font-size: 17px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
padding-top:20px;
padding-bottom:20px;
color: #333;
text-align:left;
}
#product2{
float:left;
width: 100%;
}
#sideimgp1{
float:right;
width:45%;
height: 100%;
background:#fff;
margin-left:0;
margin-right:5px;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
text-align: center;
}
#product2 h3{
font-size: 17px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
padding-top:20px;
padding-bottom:20px;
color: #333;
text-align:left;
}
#sideimgp2{
float:left;
width: 45%;
height: 100%;
background:#fff;
margin-left:5px;
margin-right:0;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
text-align: center;
}
#sidep2{
float:right;
width:45%;
height: 100%;
background:#fff;
margin-left:0;
margin-right:5px;
margin-top:20px;
margin-bottom:20px;
padding-left:10px;
padding-right:5px;
padding-top:30px;
padding-bottom:10px;
text-align: left;
}
.space {
margin-bottom: 30px;
}
.pricebox {
border: 1px solid #d6d7d9;
padding: 7px 20px;
display:inline;
font-size: 18px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
color: #333;
font-weight: bold;
background-color: #f0d8f4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9e6e2), to(#fbfafa));
background-image: -webkit-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: -moz-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: -ms-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: -o-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: linear-gradient(top, #e9e6e2, #fbfafa);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
/* ============================ SERVICES ==================== */
#service-info{
width:100%;
font-family: 'DM Sans', sans-serif;
padding-top: 20px;
}
#service-pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
font-family: 'DM Sans', sans-serif;
background-color: #fff;
font-size: 16px;
line-height: 18px;
color: #003333;
}
.service-pagewraptext{
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #003333;
}
.service-pagewrapheading {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 22px;
color: #003333;
}
#service-header {
height: 100px;
padding: 15px 15px 0 15px;
}
#service-content {
width: 280px;
float: left;
padding: 5px 15px;
background-color: #fff;
}
#service-middle {
width: 294px; /* Account for margins + border values */
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
#service-middle h2{
font-size: 20px;
margin-top: 10px;
}
#service-middle h3{
color: #999;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
padding-top:15px;
padding-bottom:15px;
}
#service-middle2 {
float: left;
width: 450px; /* Account for margins + border values */
height: 300px;
line-height: 50px;
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
white-space: normal;
overflow: hidden;
background-color: pink;
}
p.middle2 {
font-size: 26px;
font-weight: 700;
display: inline-block;
vertical-align: middle;
line-height: normal;
letter-spacing: 4px;
font-family: "Taprom", system-ui;
color: #003333;
}
#aboutservice-sidebar {
width: 270px;
max-width: 270px;
background-color: #fffbf1;
padding: 15px 5px 15px 20px;
float: left;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 26px;
color: #003333;
border-radius: 7px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
#service-sidebar {
width: 270px;
max-width: 270px;
background-color: #fffbf1;
padding: 15px 5px 15px 20px;
float: left;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 26px;
color: #003333;
border-radius: 7px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
#service-sidebar a:link {
color: #333;
text-decoration:none;
}
#service-sidebar a:hover {
color: #999;
}
#service-sidebar a:visited {
color: #333;
}
#service-sidebar2 {
width: 70px;
padding: 15px 5px 15px 20px;
float: left;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 26px;
background-color: yellow;
}
.side {
color: #003333;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
}
#service-footer {
clear: both;
display: block;
margin: 0 auto;
}
#service-header, #service-content, #service-middle, #service-middle2, #service-sidebar, #service-sidebar2 {
margin-bottom: 5px;
}
#service-pagewrap, #service-header, #service-content, #service-middle, #service-middle2 {
border: 0;
}
#service-header h2
{
color: #333;
font-family: 'DM Sans', sans-serif;
font-size: 30px;
font-weight: bold;
}
h2
{
color: #333;
font-family: 'DM Sans', sans-serif;
font-size: 22px;
}
/* ============================ PRODUCTS PAGE ========================= */
#mainproduct{
float:left;
width: 100%;
margin-left:20px;
padding-top:10px;
padding-bottom:10px;
padding-left: 0;
padding-right:0;
border: 3px solid #d6d7d9;
}
img.align-left {
float: left;
margin-left: 25px;
margin-right: 25px;
}
#mainproduct h2{
font-size: 22px;
font-family: 'DM Sans', sans-serif;
line-height: 24px;
padding-top:60px;
padding-bottom:10px;
color: #333;
text-align:left;
}
#mainproductspace{
float:left;
width: 100%;
height:70px;
}
#product1{
float:left;
width: 100%;
}
#sidep1{
float:left;
width: 45%;
height: 100%;
background:#fff;
margin-left:5px;
margin-right:0;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:30px;
padding-bottom:10px;
text-align: left;
}
#product1 h3{
font-size: 17px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
padding-top:20px;
padding-bottom:20px;
color: #333;
text-align:left;
}
#product2{
float:left;
width: 100%;
}
#sideimgp1{
float:right;
width:45%;
height: 100%;
background:#fff;
margin-left:0;
margin-right:5px;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
text-align: center;
}
#product2 h3{
font-size: 17px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
padding-top:20px;
padding-bottom:20px;
color: #333;
text-align:left;
}
#sideimgp2{
float:left;
width: 45%;
height: 100%;
background:#fff;
margin-left:5px;
margin-right:0;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
text-align: center;
}
#sidep2{
float:right;
width:45%;
height: 100%;
background:#fff;
margin-left:0;
margin-right:5px;
margin-top:20px;
margin-bottom:20px;
padding-left:10px;
padding-right:5px;
padding-top:30px;
padding-bottom:10px;
text-align: left;
}
.space {
margin-bottom: 30px;
}
.pricebox {
border: 1px solid #d6d7d9;
padding: 7px 20px;
display:inline;
font-size: 18px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
color: #333;
font-weight: bold;
background-color: #f0d8f4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9e6e2), to(#fbfafa));
background-image: -webkit-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: -moz-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: -ms-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: -o-linear-gradient(top, #e9e6e2, #fbfafa);
background-image: linear-gradient(top, #e9e6e2, #fbfafa);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
/* ============================ HOMEPAGE MAIN SERVICES LINKS - ORANGE CIRCLES ========================= */
#mainservices {
text-align: center;
width: 100%;
height: auto;
margin: 0 auto;
background-color: #d6cec4; /* premium darker taupe */
position: relative;
border: 0;
padding: 0 0 50px 0;
}
#mainservices article {
text-align: center;
width:95%;
margin:0 auto;
padding:0;
position:relative;
overflow:hidden;
border: 0;
}
.row {
text-align: justify;
width: 100%;
height: auto;
background-color: #f59d21;
border: 0;
}
.row:after {
content: '';
display: inline-block;
width: 100%;
border: 0;
}
.col {
display: inline-block;
vertical-align: top;
border: 0
}
.box1 {
width: 180px;
height: 180px;
margin: 0 auto 20px auto;
text-align: center;
overflow:hidden;
}
.box2 {
width: 180px;
height: 180px;
margin: 0 auto 20px auto;
text-align: center;
overflow:hidden;
}
.box3 {
width: 180px;
height: 180px;
margin: 0 auto 20px auto;
text-align: center;
overflow:hidden;
}
.box4 {
width: 180px;
height: 180px;
margin: 0 auto 0 auto;
text-align: center;
overflow:hidden;
vertical-align: top;
}
.homecircles {
padding: 0;
width: 100%;
height: 100%;
margin:auto;
top:0;
right:0;
left:0;
bottom:0;
border: 0;
aspect-ratio: 1/1;
}
img.mainsupport
{
max-height:100%;
max-width:100%;
object-fit: none;
margin: 0 auto;
}
.pictext {
float: left;
width: 160px;
height: 160px;
overflow: hidden;
text-align:center;
position: relative;
}
#mainservices h2 {
font-family: 'DM Sans', sans-serif;
position: absolute;
top: 70px;
padding: 0;
width: 100%;
font-size: 20px;
line-height: 22px;
}
#mainservices h2 a{
font-family: 'DM Sans', sans-serif;
color:#fff;
text-shadow: 1px 1px 2px #b8841d;
}
/* ============================ CONTACT & BOOKING PAGE LAYOUT ========================= */
#contactcontainer {
width: 100%;
height: 100%;
background-color: #fff;
margin: auto;
}
#contactsideleft {
float: left;
width: 5%;
height: 100%;
padding: 10px 0;
background-color: #fff;
}
#contactmiddle {
width: 45%;
height: 100%;
min-height: 400px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
padding: 30px 10px 20px 10px;
float: left;
text-align: left;
margin: 10px 0 10px 0;
background-color: #fff;
}
#contactmiddle h2 {
font-family: 'DM Sans', sans-serif;
font-size: 24px;
line-height: 26px;
padding-top: 10px;
padding-bottom: 20px;
color: #000;
text-align: left;
}
#contactsideright {
float: left;
width: 40%;
height: 100%;
margin: 40px 0 0 0;
padding: 10px 10px;
text-align: right;
background-color: #fff;
}
#contactsiderightbook {
float: right;
width: 40%;
height: 100%;
margin: 40px 0 0 0;
padding-top: 20px;
padding-right: 30px;
text-align: left;
background-color: #fff;
}
#map {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #f6f6f6;
}
/* -----------------------------------------------------------
Modern input + textarea styling (Contact + Booking forms)
----------------------------------------------------------- */
.formbox,
.textbox,
select {
width: 100%;
background-color: #fffaf5;
color: #333;
padding: 12px 14px;
border: 1px solid #e6d8c8;
border-radius: 6px;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
box-sizing: border-box;
margin-bottom: 16px;
}
.textbox {
height: 180px;
}
.formbox:focus,
.textbox:focus,
select:focus {
border-color: #ff7a00;
outline: none;
box-shadow: 0 0 0 2px rgba(255,122,0,0.15);
}
/* -----------------------------------------------------------
Form labels – modern, readable
----------------------------------------------------------- */
label {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
color: #333;
margin-bottom: 6px;
display: block;
}
/* -----------------------------------------------------------
NEW submit button class (does NOT affect WhatsApp button)
----------------------------------------------------------- */
.formbutton-submit {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
padding: 10px 16px;
background-color: #ff7a00;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease;
margin-top: 12px;
display: inline-block;
}
.formbutton-submit:hover {
background-color: #e96c00;
}
/* -----------------------------------------------------------
Response note under submit button
----------------------------------------------------------- */
.response-note {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
color: #777;
margin-top: 10px;
display: block;
}
/* -----------------------------------------------------------
Intro blocks (Contact + Booking)
----------------------------------------------------------- */
.booking-intro,
.contact-intro {
display: block;
background: #fffaf5;
border-left: 4px solid #ff7a00;
padding: 18px 20px;
margin-top: 10px;
margin-bottom: 25px;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* -----------------------------------------------------------
Paragraph styling for both pages
----------------------------------------------------------- */
p.contact,
p.booking {
font-family: 'DM Sans', sans-serif;
color: #333;
font-size: 18px;
line-height: 26px;
}
/* ===========================
CALENDAR STYLES (BOOKING PAGE)
=========================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
:root {
--calendar-bg-color: #262829;
--calendar-font-color: #FFF;
--weekdays-border-bottom-color: #404040;
--calendar-date-hover-color: #505050;
--calendar-current-date-color: #1b1f21;
--calendar-today-color: #82b804;
--calendar-today-innerborder-color: transparent;
--calendar-nextprev-bg-color: transparent;
--next-prev-arrow-color: #FFF;
--calendar-border-radius: 16px;
--calendar-prevnext-date-color: #484848;
}
* {
padding: 0;
margin: 0;
}
.calendar {
font-family: 'IBM Plex Sans', sans-serif;
position: relative;
max-width: 400px;
min-width: 320px;
background: var(--calendar-bg-color);
color: var(--calendar-font-color);
margin: 20px auto;
box-sizing: border-box;
overflow: hidden;
font-weight: normal;
border-radius: var(--calendar-border-radius);
}
.calendar-inner {
padding: 10px 10px;
}
.calendar .calendar-inner .calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.calendar .calendar-inner .calendar-body div {
padding: 4px;
min-height: 30px;
line-height: 30px;
border: 1px solid transparent;
margin: 10px 2px 0px;
}
.calendar .calendar-inner .calendar-body div:nth-child(-n+7) {
border: 1px solid transparent;
border-bottom: 1px solid var(--weekdays-border-bottom-color);
}
.calendar .calendar-inner .calendar-body div:nth-child(-n+7):hover {
border: 1px solid transparent;
border-bottom: 1px solid var(--weekdays-border-bottom-color);
}
.calendar .calendar-inner .calendar-body div > a {
color: var(--calendar-font-color);
text-decoration: none;
display: flex;
justify-content: center;
}
.calendar .calendar-inner .calendar-body div:hover {
border: 1px solid var(--calendar-date-hover-color);
border-radius: 4px;
}
.calendar .calendar-inner .calendar-body div.empty-dates:hover {
border: 1px solid transparent;
}
.calendar .calendar-inner .calendar-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.calendar .calendar-inner .calendar-today-date {
display: grid;
text-align: center;
cursor: pointer;
margin: 3px 0px;
background: var(--calendar-current-date-color);
padding: 8px 0px;
border-radius: 10px;
width: 80%;
margin: auto;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month {
display: flex;
min-width: 100px;
justify-content: space-evenly;
align-items: center;
}
.calendar .calendar-inner .calendar-controls .calendar-next {
text-align: right;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
font-weight: 500;
font-size: 20px;
}
.calendar .calendar-inner .calendar-body .calendar-today {
background: var(--calendar-today-color);
border-radius: 4px;
}
.calendar .calendar-inner .calendar-body .calendar-today:hover {
border: 1px solid transparent;
}
.calendar .calendar-inner .calendar-body .calendar-today a {
outline: 2px solid var(--calendar-today-innerborder-color);
}
.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
color: var(--calendar-font-color);
font-family: arial, consolas, sans-serif;
font-size: 26px;
text-decoration: none;
padding: 4px 12px;
display: inline-block;
background: var(--calendar-nextprev-bg-color);
margin: 10px 0 10px 0;
}
.calendar .calendar-inner .calendar-controls .calendar-next a svg,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg {
height: 20px;
width: 20px;
}
.calendar .calendar-inner .calendar-controls .calendar-next a svg path,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg path {
fill: var(--next-prev-arrow-color);
}
.calendar .calendar-inner .calendar-body .prev-dates,
.calendar .calendar-inner .calendar-body .next-dates {
color: var(--calendar-prevnext-date-color);
}
.calendar .calendar-inner .calendar-body .prev-dates:hover,
.calendar .calendar-inner .calendar-body .next-dates:hover {
border: 1px solid transparent;
pointer-events: none;
}
/* ===========================
MOBILE FIX FOR CONTACT + BOOKING
=========================== */
@media (max-width: 768px) {
#contactcontainer {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
#contactsideleft,
#contactmiddle,
#contactsideright,
#contactsiderightbook {
float: none !important;
width: 100% !important;
height: auto;
margin: 0 !important;
padding: 10px 0 !important;
text-align: left !important;
box-sizing: border-box;
}
.contact-intro,
.booking-intro {
width: 100%;
padding: 18px 20px;
box-sizing: border-box;
margin-left: 12px !important;
margin-right: 12px !important;
}
#contactmiddle {
padding-left: 12px !important;
padding-right: 12px !important;
}
#contactmiddle form {
width: 100%;
box-sizing: border-box;
padding-left: 12px !important;
padding-right: 12px !important;
}
#contactsiderightbook {
padding-left: 12px !important;
padding-right: 12px !important;
}
#contactsideright iframe {
width: 100% !important;
max-width: 100% !important;
height: 300px !important;
display: block;
}
.calendar {
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
margin: 10px auto !important;
border-radius: 12px !important;
}
.calendar-inner {
padding: 8px 8px !important;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
font-size: 16px !important;
}
.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
font-size: 20px !important;
padding: 4px 8px !important;
}
.calendar .calendar-inner .calendar-body {
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px !important;
}
.calendar .calendar-inner .calendar-body div {
margin: 6px 1px 0px !important;
padding: 2px !important;
min-height: 24px !important;
line-height: 24px !important;
font-size: 14px !important;
}
.calendar .calendar-inner .calendar-today-date {
width: 90% !important;
padding: 6px 0 !important;
font-size: 14px !important;
}
html,
body {
overflow-x: hidden !important;
}
}
/* ===========================
TABLET FIX (GALAXY TAB, IPAD, SURFACE)
=========================== */
@media (max-width: 1024px) {
#contactcontainer {
width: 100%;
padding: 0;
margin: 0;
display: block;
}
#contactsideleft,
#contactmiddle,
#contactsideright,
#contactsiderightbook {
float: none !important;
width: 100% !important;
height: auto;
margin: 0 !important;
padding: 20px 0 !important;
text-align: left !important;
box-sizing: border-box;
}
.contact-intro,
.booking-intro {
width: 100%;
padding: 20px;
box-sizing: border-box;
margin-left: 20px !important;
margin-right: 20px !important;
}
#contactmiddle {
padding-left: 20px !important;
padding-right: 20px !important;
}
#contactmiddle form {
width: 100%;
box-sizing: border-box;
padding-left: 20px !important;
padding-right: 20px !important;
}
#contactsiderightbook {
width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin: 0 !important;
text-align: left !important;
box-sizing: border-box;
}
#contactsideright iframe {
width: 100% !important;
max-width: 100% !important;
height: 350px !important;
display: block;
}
.calendar {
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
margin: 20px auto !important;
}
.calendar-inner {
padding: 12px !important;
}
.calendar .calendar-inner .calendar-body div {
margin: 8px 2px 0px !important;
padding: 4px !important;
min-height: 28px !important;
line-height: 28px !important;
}
html,
body {
overflow-x: hidden !important;
}
}
/* =================================== BOOKING PAGE CALENDAR ===================================================================*/
/*calendar*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
:root {
--calendar-bg-color: #262829;
--calendar-font-color: #FFF;
--weekdays-border-bottom-color: #404040;
--calendar-date-hover-color: #505050;
--calendar-current-date-color: #1b1f21;
--calendar-today-color: #82b804;
--calendar-today-innerborder-color: transparent;
--calendar-nextprev-bg-color: transparent;
--next-prev-arrow-color: #FFF;
--calendar-border-radius: 16px;
--calendar-prevnext-date-color: #484848;
}
* {
padding: 0;
margin: 0;
}
.calendar {
font-family: 'IBM Plex Sans', sans-serif;
position: relative;
max-width: 400px;
min-width: 320px;
background: var(--calendar-bg-color);
color: var(--calendar-font-color);
margin: 20px auto;
box-sizing: border-box;
overflow: hidden;
font-weight: normal;
border-radius: var(--calendar-border-radius);
}
.calendar-inner {
padding: 10px 10px;
}
.calendar .calendar-inner .calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.calendar .calendar-inner .calendar-body div {
padding: 4px;
min-height: 30px;
line-height: 30px;
border: 1px solid transparent;
margin: 10px 2px 0px;
}
.calendar .calendar-inner .calendar-body div:nth-child(-n+7) {
border: 1px solid transparent;
border-bottom: 1px solid var(--weekdays-border-bottom-color);
}
.calendar .calendar-inner .calendar-body div:nth-child(-n+7):hover {
border: 1px solid transparent;
border-bottom: 1px solid var(--weekdays-border-bottom-color);
}
.calendar .calendar-inner .calendar-body div > a {
color: var(--calendar-font-color);
text-decoration: none;
display: flex;
justify-content: center;
}
.calendar .calendar-inner .calendar-body div:hover {
border: 1px solid var(--calendar-date-hover-color);
border-radius: 4px;
}
.calendar .calendar-inner .calendar-body div.empty-dates:hover {
border: 1px solid transparent;
}
.calendar .calendar-inner .calendar-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.calendar .calendar-inner .calendar-today-date {
display: grid;
text-align: center;
cursor: pointer;
margin: 3px 0px;
background: var(--calendar-current-date-color);
padding: 8px 0px;
border-radius: 10px;
width: 80%;
margin: auto;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month {
display: flex;
min-width: 100px;
justify-content: space-evenly;
align-items: center;
}
.calendar .calendar-inner .calendar-controls .calendar-next {
text-align: right;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
font-weight: 500;
font-size: 20px;
}
.calendar .calendar-inner .calendar-body .calendar-today {
background: var(--calendar-today-color);
border-radius: 4px;
}
.calendar .calendar-inner .calendar-body .calendar-today:hover {
border: 1px solid transparent;
}
.calendar .calendar-inner .calendar-body .calendar-today a {
outline: 2px solid var(--calendar-today-innerborder-color);
}
.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
color: var(--calendar-font-color);
font-family: arial, consolas, sans-serif;
font-size: 26px;
text-decoration: none;
padding: 4px 12px;
display: inline-block;
background: var(--calendar-nextprev-bg-color);
margin: 10px 0 10px 0;
}
.calendar .calendar-inner .calendar-controls .calendar-next a svg,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg {
height: 20px;
width: 20px;
}
.calendar .calendar-inner .calendar-controls .calendar-next a svg path,
.calendar .calendar-inner .calendar-controls .calendar-prev a svg path {
fill: var(--next-prev-arrow-color);
}
.calendar .calendar-inner .calendar-body .prev-dates,
.calendar .calendar-inner .calendar-body .next-dates {
color: var(--calendar-prevnext-date-color);
}
.calendar .calendar-inner .calendar-body .prev-dates:hover,
.calendar .calendar-inner .calendar-body .next-dates:hover {
border: 1px solid transparent;
pointer-events: none;
}
/* END ORIGINAL CALENDAR CSS */
/* ===========================
MOBILE FIX FOR CALENDAR
=========================== */
@media (max-width: 767px) { /* CHANGED FROM 768px TO 767px */
.calendar {
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
margin: 10px auto !important;
border-radius: 12px !important;
}
.calendar-inner {
padding: 8px 8px !important;
}
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
font-size: 16px !important;
}
.calendar .calendar-inner .calendar-controls .calendar-next a,
.calendar .calendar-inner .calendar-controls .calendar-prev a {
font-size: 20px !important;
padding: 4px 8px !important;
}
.calendar .calendar-inner .calendar-body {
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px !important;
}
.calendar .calendar-inner .calendar-body div {
margin: 6px 1px 0px !important;
padding: 2px !important;
min-height: 24px !important;
line-height: 24px !important;
font-size: 14px !important;
}
.calendar .calendar-inner .calendar-today-date {
width: 90% !important;
padding: 6px 0 !important;
font-size: 14px !important;
}
}
/* ===========================
TABLET FIX FOR CALENDAR
=========================== */
@media (max-width: 1024px) {
.calendar {
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
margin: 20px auto !important;
}
.calendar-inner {
padding: 12px !important;
}
.calendar .calendar-inner .calendar-body div {
margin: 8px 2px 0px !important;
padding: 4px !important;
min-height: 28px !important;
line-height: 28px !important;
}
}
/* ===========================
LANDSCAPE FIX FOR CALENDAR
=========================== */
@media (orientation: landscape) {
.calendar {
max-width: 400px !important;
width: 400px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.calendar-inner {
padding: 10px 10px !important;
}
}
/* ===========================
PORTRAIT FIX FOR TABLETS (iPad Pro, iPad Mini, Galaxy Tab)
=========================== */
@media (orientation: portrait) and (min-width: 768px) {
.calendar {
max-width: 600px !important;
width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.calendar-inner {
padding: 12px 12px !important;
}
}
/*===================================== END OF BOOKING PAGE CALANDER ================================================*/
/*===================================== WE LOVE COFFEE ================================================*/
#coffee-drink-container {
width:auto;
max-width: 100%;
}
.animal {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.animal img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
/* ========================= FREE SUPPORT ========================== */
#free-container {
width: 100%;
height: auto;
background-color: #fff;
text-align:center;
margin: 0 auto;
padding-bottom: 30px;
position: relative;
}
.free-info {
max-width: 600px;
height: auto;
background-color: #fff;
text-align: center;
padding: 0 20px 0 20px;
margin: 0 auto;
vertical-align:top;
}
h2.free-info {
font-size: 22px;
font-weight: 700;
text-align: center;
padding-top: 0;
padding-bottom: 20px;
letter-spacing: 1px;
word-spacing: 2px;
color: #000;
margin: 50px 0 0 0;
}
p.free-info {
font-size: 15px;
font-weight: 500;
text-align: center;
padding-bottom: 20px;
color: #000;
margin-top: 0;
}
/* FREE CIRCLES AT BOTTOM */
.outer {
display: flex;
width: 750px;
max-width:100%;
margin: 0 auto;
text-align: center;
background-color: #fff;
position:relative;
padding-left: 10px;
}
.outer .inner {
width: 30%;
height: 100%;
margin: 10px;
background-color: #fff;
position:relative;
display: inline-block;
}
.circle {
display: table;
margin: 0 auto;
text-align:center;
width: 220px;
height: 220px;
font-size: 20px;
background: #fff;
}
.circle p {
font-weight: bold;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 22px;
padding: 0 22px;
background-image: url("../images/freegreen3.png");
max-width: 100%;
max-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
color:#fff;
}
.circle:hover p {
}
.circle a {
text-decoration:none;
font-size: 20px;
font-family: 'DM Sans', sans-serif;
font-weight: bold;
color: #fff;
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
.circle img {
padding-top: 20px;
width: 80px;
height: 80px;
}
@media (max-width: 1100px) {
.circle {
font-size: 22px;
}
}
@media (min-width: 813px) and (max-width: 935px) {
.circle {
font-size: 22px;
}
}
@media (min-width: 693px) and (max-width: 812px) {
.circle {
font-size: 22px;
}
}
@media (min-width: 641px) and (max-width: 692px) {
.circle {
font-size: 22px;
}
}
@media (min-width: 445px) and (max-width: 640px) {
.circle {
font-size: 18px;
}
}
@media (min-width: 400px) and (max-width: 444px) {
.outer .inner {
margin: 6px;
}
.outer {
padding-left: 0;
}
.circle {
width: 125px;
height: 125px;
font-size: 16px;
}
.circle p {
line-height: 16px;
padding: 7px 20px 0 20px;
}
.circle img {
padding-top: 10px;
width: 45px;
height: 45px;
}
}
/*===================================== FAQs TABLE ================================================*/
/* FAQ TABLE WRAPPER */
#faqstable {
max-width: 800px !important;
background-color: #fff;
position: relative;
text-align: center;
box-sizing: border-box;
margin: 0 auto;
width: 100%;
padding: 40px 0 0 0;
font-family: 'DM Sans', sans-serif;
}
/* ACCORDION WRAPPER */
.cw-accordion {
width: 95%;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1rem;
}
/* EACH FAQ ITEM */
.cw-accordion__item {
padding: 0.8rem 1rem;
background: #e7e1da; /* warm taupe */
position: relative;
width: 95%;
cursor: pointer;
border: 1px solid #d6cec4; /* warm neutral border */
border-radius: 6px; /* subtle modern rounding */
transition: background 0.3s;
}
/* HOVER EFFECT */
.cw-accordion__item:hover {
background: #f0ebe3; /* warm stone tint */
}
/* FAQ QUESTION LABEL */
.cw-accordion__item .cw-label {
padding-left: 26px;
position: relative;
width: 95%;
display: inline-block;
font-size: 18px;
font-weight: bold;
color: #003333; /* brand dark teal */
}
/* PLUS ICON */
.cw-accordion__item .cw-label:after {
position: absolute;
left: 0;
content: "+";
font-size: 20px;
font-weight: bold;
color: #003333;
top: 2px;
border: 2px solid #003333;
width: 22px;
height: 22px;
border-radius: 50%;
line-height: 20px;
text-align: center;
transition: transform 0.3s;
}
/* ROTATE TO MINUS WHEN OPEN */
.cw-accordion__item .cw-label.cw-open:after {
transform: rotate(45deg);
background: #fff3e6; /* soft orange tint */
}
/* ANSWER CONTENT */
.cw-accordion__item .cw-acordion-cont {
height: 0px;
overflow: hidden;
transition: 0.4s;
font-size: 16px;
padding-left: 25px;
padding-right: 25px;
color: #003333;
}
/* LIST INSIDE ANSWER */
.cw-accordion__item .cw-acordion-cont ul {
padding-left: 20px;
}
.cw-accordion__item .cw-acordion-cont ul li {
margin: 7px 0px;
list-style-type: circle;
}
/* WHEN OPEN */
.cw-accordion__item .cw-open + .cw-acordion-cont {
height: auto;
padding-top: 15px;
padding-bottom: 15px;
text-align: left;
}
/* CONTACT SECTION BELOW FAQ */
.faq-contact {
text-align: center;
padding: 30px 0 0 0;
font-family: 'DM Sans', sans-serif;
}
.faq-contact h3 {
margin: 0px 0px 15px 0px;
word-spacing: 2px;
font-size: 18px;
}
.faq-contact .contact-btn {
padding: 10px 24px;
background-color: #003333;
color: #fff;
text-decoration: none;
display: inline-block;
border-radius: 6px;
border: none;
transition: 0.3s all;
}
.faq-contact .contact-btn:hover {
background-color: #f59d21; /* brand orange */
color: #003333;
}
/* MOBILE */
@media(max-width:992px) {
.cw-section__title {
font-size: 1.5rem;
}
}
/*====================== WHY SECTION ===============================================================*/
/* Servicing page intro block */
.servicing-intro {
background: #fffaf5;
border-left: 4px solid #ff7a00;
padding: 18px 20px;
margin-top: 10px;
margin-bottom: 25px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Unique wrapper for Servicing page */
.servicing-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
.serv-pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
background-color: #f5f2eb;
}
.serv-pagewrapheading {
font-size: 30px;
line-height: 1.3;
color: #003333;
text-align: center;
margin: 40px auto 20px auto;
}
@media only screen and (max-width: 600px) {
.serv-pagewrapheading {
font-size: 24px !important;
line-height: 1.3;
padding: 0 20px;
}
}
.serv-pagewraptext {
font-size: 18px;
line-height: 1.6;
color: #003333;
max-width: 800px;
margin: 10px auto;
display: block;
text-align: center;
}
#serv-info {
background-color: #e7e1da; /* light stone */
padding: 40px 0; /* keeps spacing consistent */
clear: both; /* prevents layout collision with tabs */
}
#whyservice-info{
width:100%;
font-family: 'DM Sans', sans-serif;
padding-top: 20px;
background-color: #f5f2eb;
padding-bottom: 60px;
}
#whyservice-pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
font-family: 'DM Sans', sans-serif;
background-color: #f5f2eb;
font-size: 16px;
line-height: 18px;
color: #003333;
}
.whyservice-pagewraptext{
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #003333;
}
.whyservice-pagewrapheading {
font-size: 24px;
line-height: 1.3;
color: #003333;
text-align: center;
margin: 10px auto 20px auto;
}
#whyservice-header {
height: 100px;
padding: 15px 15px 0 15px;
}
/*====================== WHY TABS ===============================================================*/
#whytabcontent {
width:100%;
max-width:100%;
height: auto;
margin:50px 0 5px 0;
padding: 20px 0 30px 0;
background-color: #cae1f0;
position: relative;
}
.tabbox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.tabheader {
position: relative;
max-width:100%;
margin-top: 40px;
background: #cae1f0;
color: black;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.tabcontent {
position: relative;
width: 800px;
max-width: 100%;
height: 375px;
margin: 0 auto;
text-align: center;
background: #cae1f0;
display:block;
}
.tabnavbar {
overflow: hidden;
background-color: #cae1f0;
}
.tabnavbar a {
float: left;
font-size: 16px;
color: #000;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
.tabdropdown {
float: left;
overflow: hidden;
white-space: nowrap;
}
.tabdropdown .tabtitle {
font-size: 16px;
border: none;
outline: none;
color: #000;
width: 145px;
padding: 0;
background-color: inherit;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: "DM Sans", sans-serif;
font-weight: 600;
border: 0;
text-align:center;
}
.tabdropdown .tabdropbtn {
outline: none;
width: 145px;
padding: 0;
background-color: inherit;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
border: 0;
}
.tabcontent1 {
position: absolute;
top: 40px;
margin: 0 auto;
display: none;
text-align: center;
font-family: "DM Sans", sans-serif;
}
.taboperation {
width: 800px;
position: absolute;
top: 120px;
text-align: center:
margin: 0 auto;
border: 0;
font-family: "DM Sans", sans-serif;
}
/*====================== WHY TABLE ===============================================================*/
#whycontent {
width:100%;
margin:50px 0 5px 0;
padding: 20px 0 30px 0;
background-color: #f5f2eb;
}
#whycontent article {
width: 400px;
margin: 40px auto;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: #444;
}
.borderedwhy {
border: 1px solid #d6cec4; /* FAQ warm-neutral border */
border-collapse: collapse;
font-size:16px;
background-color: #fff;
}
.borderedwhy tr:hover {
background: #fff;
transition: all 0.1s ease-in-out;
}
.borderedwhy td,
.borderedwhy th {
border: 1px solid #d6cec4;
padding: 10px;
vertical-align: middle;
}
/* ORANGE HEADING */
.borderedwhy th {
background-color: #ff7a00; /* Coffee Refresh dark orange */
font-size:18px;
color: #fff;
word-spacing: 2px;
text-align: center;
}
/* Remove left border on first column */
.borderedwhy td:first-child,
.borderedwhy th:first-child {
border-left: none;
}
/* Column widths — fixes squished images */
.borderedwhy td:first-child {
width: 150px; /* adjust if needed */
text-align: center;
}
.borderedwhy td:last-child {
width: auto;
}
/* Remove right + bottom border on merged heading */
.borderedwhy thead th {
border-right: none;
border-bottom: none;
}
/* Compact image size */
.borderedwhy td img {
width: 55px;
height: auto;
margin: 0 4px;
}
/* ? UNIFORM ROW HEIGHT BELOW THE ORANGE TITLE */
.borderedwhy tbody tr {
height: 110px; /* adjust to taste: 100–130px works well */
}
/*==================================== SERVICES PAGE TEXT SECTIONS ==============================*/
#beautywrapper{
width:100%;
height:100%;
font-size:20px;
font-family: 'DM Sans', sans-serif;
padding: 0;
text-align:center;
position:relative;
margin-bottom:20px;
}
div#column1a{
background:#FFFFFF;
float:left;
width:30%;
border: 1px;
border-style:solid;
border-color:#ccc;
text-align: left;
margin-left:10px;
margin-right:25px;
margin-bottom:20px;
padding:10px;
}
div#column2a{
background:#F8F8FF;
float:left;
width:30%;
border: 1px;
border-style:solid;
border-color:#ccc;
margin-right:10px;
margin-bottom:20px;
padding:10px;
}
div#column3a{
background:#FFFFFF;
float:right;
width:30%;
border: 1px;
border-style:solid;
border-color:#ccc;
text-align: left;
margin-right:10px;
margin-bottom:20px;
padding:10px;
}
/* ========================================================= */
/* FOOTER LAYOUT (CLEAN + STABLE — FULL LONG-HAND) */
/* ========================================================= */
/* ========================================================= */
/* SECTION 0 — BUTTONS USED ELSEWHERE */
/* ========================================================= */
/* ------------------------- */
/* 0A. Ghost Button (orange) */
/* ------------------------- */
.ghost-button {
background-color: #ff7a00;
color: #ffffff;
word-spacing: 5px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 16px;
line-height: 18px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
text-align: center;
display: inline-block;
font-family: 'DM Sans', sans-serif;
min-width: 90px;
font-weight: 600;
vertical-align: top;
}
.ghost-button a {
background-color: #ff7a00;
color: #ffffff;
text-decoration: none;
}
.ghost-button a:hover,
.ghost-button a:active,
.ghost-button a:visited,
.ghost-button a:focus {
background-color: #ff7a00;
color: #ffffff;
text-decoration: none;
}
/* Mobile adjustments */
@media screen and (max-width: 768px) {
.ghost-button {
font-size: 14px;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
min-width: 70px;
margin-left: 10px;
}
}
/* --------------------------- */
/* 0B. Ghost Button 2 (dark) */
/* --------------------------- */
/* GET IN TOUCH button */
.ghost-button2 {
width: auto;
display: inline-block;
color: #ffffff;
background-color: #453536;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 16px;
line-height: 18px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
font-weight: 600;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
word-spacing: 5px;
font-family: 'DM Sans', sans-serif;
min-width: 140px;
}
.ghost-button2 a {
color: #ffffff;
background-color: #006400;
text-decoration: none;
}
.ghost-button2:hover,
.ghost-button2:active,
.ghost-button2:visited,
.ghost-button2 a:focus {
color: #ffffff;
background-color: #453536;
text-decoration: none;
}
/* Mobile adjustments */
@media screen and (max-width: 768px) {
.ghost-button2 {
padding-top: 10px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
font-size: 15px;
min-width: 110px;
}
}
/* Landscape reduction */
@media screen and (max-height: 500px) and (orientation: landscape) {
.ghost-button2 {
font-size: 14px !important;
line-height: 16px !important;
padding-top: 8px !important;
padding-right: 12px !important;
padding-bottom: 8px !important;
padding-left: 12px !important;
min-width: 120px !important;
margin-top: 14px !important;
}
}
/* ========================================================= */
/* UNIFIED FOOTER BOOK NOW BUTTON */
/* ========================================================= */
.footer-booking-button {
display: inline-block;
box-sizing: border-box;
width: auto;
min-width: 140px;
padding-top: 12px;
padding-right: 32px;
padding-bottom: 12px;
padding-left: 32px;
font-size: 16px;
line-height: 1;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #ffffff;
background-color: #ff7a00;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff7a00;
border-right-color: #ff7a00;
border-bottom-color: #ff7a00;
border-left-color: #ff7a00;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
text-decoration: none;
text-align: center;
white-space: nowrap;
margin-top: 22px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
}
.footer-booking-button:hover,
.footer-booking-button:focus,
.footer-booking-button:active {
background-color: #e06b00;
border-top-color: #e06b00;
border-right-color: #e06b00;
border-bottom-color: #e06b00;
border-left-color: #e06b00;
color: #ffffff;
text-decoration: none;
box-shadow: 0px 4px 12px rgba(255, 122, 0, 0.3);
transform: translateY(-2px);
}
/* Mobile centring */
@media screen and (max-width: 480px) {
.footer-booking-button {
margin-left: 0px;
}
}
/* Samsung centring */
@media screen and (max-height: 700px) {
.footer-booking-button {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Landscape reduction */
@media screen and (max-height: 500px) and (orientation: landscape) {
.footer-booking-button {
font-size: 14px !important;
line-height: 16px !important;
padding-top: 8px !important;
padding-right: 12px !important;
padding-bottom: 8px !important;
padding-left: 12px !important;
min-width: 120px !important;
margin-top: 18px !important;
}
}
/* ========================================================= */
/* ALL SUB PAGES */
/* ========================================================= */
#subpagecontainer {
font-family: 'DM Sans', sans-serif;
width: 100%;
height: 100%;
padding-top: 5px;
background-color: #ffffff;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#sidebarmenu {
float: left;
width: 15%;
height: 100%;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 0px;
font-size: 17px;
font-family: 'DM Sans', sans-serif;
font-weight: bold;
line-height: 18px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
background-color: #ffffff;
}
#sidebarmenu ul {
display: block;
list-style-type: none;
margin-top: 30px;
}
#sidebarmenu li {
float: left;
clear: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#sidebarmenu ul li a {
text-decoration: none;
}
#sidebarmenu ul li a:hover {
text-decoration: underline;
}
#sidebarmenu ul li.current a:link {
color: #000000;
}
#subpagecontainermiddle {
width: 55%;
height: 100%;
min-height: 400px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
float: left;
text-align: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 40px;
margin-left: 0px;
border-left-width: 0px;
border-left-style: solid;
border-left-color: gray;
border-right-width: 0px;
border-right-style: solid;
border-right-color: gray;
}
#subpagecontainermiddle h2 {
font-size: 20px;
font-family: 'DM Sans', sans-serif;
line-height: 22px;
padding-top: 10px;
padding-bottom: 20px;
color: #000000;
text-align: left;
}
#rightpanel {
float: right;
font-family: 'DM Sans', sans-serif;
width: 20%;
height: 100%;
margin-top: 40px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 20px;
text-align: center;
}
#listmenu ul {
list-style-type: square;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
margin-left: 20px;
margin-right: 5px;
text-align: left;
}
#subpagecontainermiddle2 {
width: 55%;
height: 100%;
min-height: 200px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
float: left;
text-align: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-left-width: 0px;
}
#subpagecontainermiddle2 h2 {
font-family: 'DM Sans', sans-serif;
font-size: 24px;
line-height: 26px;
padding-top: 10px;
padding-bottom: 20px;
color: #000000;
text-align: left;
}
#subpagecontainermiddle2 a {
font-family: 'DM Sans', sans-serif;
color: #333333;
}
#subpagecontainermiddle2 a:visited {
font-family: 'DM Sans', sans-serif;
color: #666666;
}
#subpagecontainermiddle2 a:hover {
font-family: 'DM Sans', sans-serif;
color: #999999;
}
#subpagecontainermiddle3 {
width: 55%;
height: 100%;
min-height: 400px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
text-align: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-left-width: 0px;
border-left-style: solid;
border-left-color: gray;
}
#subpagecontainermiddle3 a {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000000;
font-weight: bold;
}
#subpagecontainermiddle3 a:hover {
color: #999999;
font-weight: bold;
}
p.right {
text-align: right;
}
#subpagecontainerprices {
width: 55%;
height: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 22px;
line-height: 28px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 20px;
float: left;
text-align: left;
margin-top: 20px;
margin-right: 0px;
margin-bottom: -35px;
margin-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: gray;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;
}
#subpagecontainerprices a {
font-family: 'DM Sans', sans-serif;
font-size: 22px;
line-height: 28px;
color: #000000;
font-weight: bold;
}
#subpagecontainerprices a:hover {
color: #999999;
font-weight: bold;
}
#subpagecontainermiddle4 {
width: 35%;
height: 100%;
min-height: 150px;
font-family: 'DM Sans', sans-serif;
font-size: 22px;
line-height: 28px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 40px;
text-align: left;
margin-top: 20px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: gray;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;
background-color: orange;
}
#subpagecontainermiddle4 a {
font-family: 'DM Sans', sans-serif;
font-size: 22px;
line-height: 28px;
color: #000000;
font-weight: bold;
}
#subpagecontainermiddle4 a:hover {
color: #999999;
font-weight: bold;
}
#subpagecontainermiddle4 p.text {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
}
#topservices {
width: 35%;
height: 100%;
min-height: 150px;
font-family: 'DM Sans', sans-serif;
font-size: 22px;
line-height: 28px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 40px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#topservices a {
font-family: 'DM Sans', sans-serif;
font-size: 22px;
line-height: 28px;
color: #000000;
font-weight: bold;
}
#topservices a:hover {
color: #999999;
font-weight: bold;
}
#topservices p.text {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
}
/* ========================================================= */
/* FOOTER SECTION ANCHOR & RACCOON POSITIONING (LONG-HAND) */
/* ========================================================= */
#linkscontainer2 {
position: relative;
width: 100%;
}
.contact-column {
position: relative;
padding-bottom: 0px;
}
.contact-block {
position: static;
}
.footer-raccoon-container {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 2;
pointer-events: none;
}
.footer-raccoon-drawing {
width: 180px;
height: auto;
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
/* Mobile responsive handling for raccoon */
@media screen and (max-width: 768px) {
.footer-raccoon-container {
position: relative;
bottom: auto;
right: auto;
text-align: center;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.footer-raccoon-drawing {
width: 120px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
}
/*====================== PARALLAX ===========================================================*/
#grey {
height:350px;
background-color:#e8e8e8;;
font-size:20px;
font-family: 'DM Sans', sans-serif;
padding-top:240px;
padding-bottom:50px;
padding-right:60px;
padding-left:60px;
text-align:center;
}
p.grey {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 26px;
color: #333;
padding-top:20px;
padding-bottom:20px;
margin: 20px 180px;
}
/* ================================ WHY REFRESH PAGE - ORANGE and TAUPE TABS FOR REASONS TO SERVICE ============================ */
/* ============================ SERVICING SECTION ============================ */
/* MAIN SECTION WRAPPER */
#serv-container {
box-sizing: border-box;
width: 100%;
margin: 0 auto;
font-family: 'DM Sans', sans-serif;
background-color: #fff;
text-align: center;
padding: 60px 0;
overflow: hidden;
}
/* INNER WIDTH CONTAINER – DESKTOP stays 800px, centred */
.reasons-container {
width: 800px;
margin: 0 auto;
text-align: center;
}
/* DESKTOP TABS */
ul.tabs {
margin: 0;
padding: 1px 0;
list-style: none;
height: 132px;
width: 100%;
background: #e7e1da;
display: flex;
justify-content: space-between;
align-items: center;
}
ul.tabs li {
flex: 1;
height: 127px;
margin-right: 2px;
background: #e7e1da;
border-radius: 5px;
text-align: center;
overflow: hidden;
border: none;
}
ul.tabs li a {
text-decoration: none;
color: #003333;
display: block;
font-size: 18px;
font-weight: 600;
padding: 1px 0;
}
/* TAB TITLE */
.tab-title {
font-size: 18px;
font-weight: 600;
line-height: 1.2;
padding-bottom: 5px;
font-variant: small-caps;
letter-spacing: 0.5px;
text-transform: lowercase;
}
ul.tabs li:hover,
ul.tabs li.active {
background: #f9c892;
}
/* CONTENT BOX */
.tab_container {
clear: both;
width: 100%;
background: #f9c892;
border: none;
}
.tab_content {
padding: 15px 10px 10px 10px;
font-size: 16px;
background: #f9c892;
color: #003333;
/* ? DESKTOP HEIGHT (tighter) */
min-height: 130px;
}
#serv-container .tab_container:nth-of-type(1) .tab_content h2 {
font-size: 20px;
font-weight: 600;
color: #003333;
padding-bottom: 15px;
}
#serv-container .tab_container:nth-of-type(1) .tab_content p {
padding-bottom: 25px;
}
#serv-container .tab_container:nth-of-type(2) .tab_content h2 {
font-size: 18px;
font-weight: 600;
color: #003333;
padding-bottom: 20px;
}
/* ------------------------------------------------------ */
/* MOBILE – double row (6 tabs: 3 per row) with white space */
/* ------------------------------------------------------ */
@media (max-width: 768px) {
.reasons-container {
width: 100%;
max-width: 100%;
padding: 0 15px;
box-sizing: border-box;
}
ul.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
height: auto;
padding: 10px 0;
background: #e7e1da;
}
ul.tabs li {
height: 110px;
margin: 0;
padding: 10px 0;
border-radius: 5px;
background: #e7e1da;
}
ul.tabs li img {
width: 45px;
height: auto;
margin-top: 4px;
}
ul.tabs li a {
font-size: 18px;
padding: 0;
}
.tab-title {
font-size: 18px;
padding-bottom: 2px;
letter-spacing: 0.3px;
}
.tab_content {
padding: 20px 15px;
font-size: 15px;
/* ? MOBILE HEIGHT (perfect as you liked) */
min-height: 150px;
}
#serv-container .tab_container:nth-of-type(1) .tab_content h2 {
font-size: 18px;
padding-bottom: 12px;
}
#serv-container .tab_container:nth-of-type(2) .tab_content h2 {
font-size: 17px;
padding-bottom: 15px;
}
}
/* ================================ NEW ABOUT ------ HEADER, 3 COL LAYOUT AND FOOTER ============================ */
#about-container {
box-sizing: border-box;
width: 100%;
font-family: 'DM Sans', sans-serif;
position: relative;
}
.about-top {
width: 100%;
max-width: 900px; /* matches servicing page */
margin: 0 auto;
text-align: center;
padding: 40px 20px 20px 20px; /* gives space above and below */
display: flex;
flex-direction: column;
align-items: center;
}
/* main heading */
.about-top-heading {
font-family: 'DM Sans', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 25px;
color: #333;
}
.about-top-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
}
/* ROW AND COLUMN STRUCTURE */
.about-wrapper {
padding: 5px;
max-width: 960px;
width: 95%;
margin: 20px auto;
position: relative;
}
.about-subheader {
padding: 0 15px;
}
.about-subheader-header {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 16px;
color: #000;
text-align:center;
padding-top: 30px;
padding-bottom: 20px;
}
.about-subheader-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
text-align:center;
padding-bottom: 20px;
}
.about-columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.about-column {
flex: 1;
border: 0;
margin: 5px;
padding: 2px;
}
.about-column:first-child {
margin-left: 0;
}
.about-column:last-child {
margin-right: 0;
}
.about-col1-content {
width: 100%;
background-color: #fff;
text-align: center;
margin: 0 auto;
padding-top: 30px;
}
.about-col2-content {
width: 95%;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 18px;
color: #003333;
background-color: #fff;
text-align: left;
padding-top: 30px;
}
.about-col2-content-heading {
font-size: 16px;
font-weight: 600;
text-align:center;
padding-bottom: 20px;
}
.about-col3-content {
width: 100%;
background-color: #f59d21;
padding: 20px 0 20px 0;
}
.about-col3-content-heading {
color: #fff;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
padding-left: 20px;
}
.about-col3-content-inner {
width: 70%;
margin: 10px auto 0 auto;
font-family: 'DM Sans', sans-serif;
padding: 15px 5px 15px 20px;
text-align: left;
font-size: 16px;
line-height: 26px;
color: #003333;
background-color: #fffbf1;
border-radius: 7px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
ul.about-circle {
list-style-type: circle;
padding-left: 20px;
color: #003333;
font-size: 16px;
font-weight: 500;
}
li.about-circle:not(:last-child) {
margin-bottom: 15px;
}
.about-bottom-container {
width: 100%
height: auto;
background-color: #fff;
margin-top: 30px;
}
.about-bottom {
margin: 0 auto;
text-align: center;
padding: 40px auto;
text-align: center;
width: 80%;
height: 80px;
background-color:#fff;
}
.about-bottom-heading {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 16px;
color: #000;
text-align:center;
padding-top: 40px;
padding-bottom: 20px;
}
.about-bottom-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
text-align:center;
padding-bottom: 20px;
}
@media screen and (max-width: 980px) {
.about-nav {
padding-left: 20px;
}
.about-columns .about-column {
margin-bottom: 5px;
flex-basis: 40%;
}
.about-columns .about-column:nth-last-child(2) {
margin-right: 0;
}
.about-columns .about-column:last-child {
flex-basis: 100%;
margin: 0;
}
}
@media screen and (max-width: 680px) {
.about-nav {
padding-left: 5px;
}
.about-columns .about-column {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}
/*
Note: You can easily create additional columns by adding more elements with the class of 'column' inside the 'columns' div. e.g.:
...
4th column
5th column
*/
/* ================================ NEW ABOUT ------ COVERAGE ============================ */
#about-coverage-container {
box-sizing: border-box;
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
position: relative;
margin: 0 auto;
text-align:center;
background-color: #f5f2eb;
padding: 60px 0 80px 0;
}
.about-coverage-container-column-heading {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000;
font-weight: 700;
}
.about-coverage-container-column-text{
font-family: 'DM Sans', sans-serif;
font-size: 16px;
color: #000;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
/* Create two equal columns that floats next to each other */
.about-coverage-container-column1 {
float: left;
width: 57%;
padding: 10px;
height: 200px; /* Should be removed. Only for demonstration */
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000;
font-weight: normal;
}
.about-coverage-container-column2 {
float: left;
width: 37%;
padding: 10px;
height: 200px; /* Should be removed. Only for demonstration */
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000;
font-weight: normal;
}
.about-coverage-container-row {
}
/* Clear floats after the columns */
.about-coverage-container-row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.about-coverage-container-column1 {
width: 100%;
}
.about-coverage-container-column2 {
width: 100%;
}
}
/*====================== ABOUT ============================================================*/
p.about {
padding-left: 227px;
}
/* ================================ ABOUT ------ LOGO SLIDER AT BOTTOM ============================ */
#about-slider-logos {
width:100%;
margin:80px 0 10px 0;
}
#about-slider-logos article {
width: 700px;
margin: 10px auto 0 auto;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
color: #444;
padding-top:10px;
padding-bottom:2px;
background:#fff;
}
/* ================================================ NEWSLETTER IFRAME ============================================================ */
.newsletter-section {
background-color: #f5f2eb;
padding: 60px 20px;
text-align: center;
width: 100%;
height: auto;
max-height: 500px;
position:relative;
margin: 0 auto;
}
.newsletter-section-heading {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
text-align: center;
color: #000;
padding-bottom: 10px;
}
/* Container that holds the iframe */
.iframe-container {
max-width: 90%;
height: auto;
min-height: 500px; /*adjust to form's actual content */
margin: 0 auto;
background-color: #f5f2eb; /* greenish background color */
padding: 20px;
border-radius: 8px; /* optional */
}
/* Ensure iframe inherits background color */
.iframe-container iframe {
background-color: #f5f2eb !important;
}
/* Responsive wrapper for the newsletter iframe */
/* DESKTOP / LAPTOP: fixed height */
.responsive-iframe-container {
position: relative;
width: 100%;
max-width: 100%;
height: 460px;
overflow: hidden;
margin: 0 auto;
border-radius: 8px; /* optional: match container styling */
background-color: #f5f2eb; /* matches container background */
}
.responsive-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
background-color: #e8f2dd !important; /* ensures iframe bg matches */
}
/* MOBILE: taller ratio */
@media (max-width: 768px) {
.responsive-iframe-container {
height: auto;
padding-bottom: 120%; /* original height for mobile */
}
}
/* ================================================ PRIVACY POLICY ============================================================ */
#privacy-container {
box-sizing: border-box;
width: 90%;
font-family: 'DM Sans', sans-serif;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
background-color: #bfebf2;
margin: 0 auto;
text-align:center;
}
.privacy-container1 {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #000;
}
.privacy-top {
width: 60%;
margin-left: 25vw;
margin-right: 0;
height: auto;
text-align: left;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
background-color: #bfebf2;
position: relative;
padding-top: 40px;
}
.privacy-top p {
font-size: 14px;
}
.privacy-top ul, .privacy-top li {
font-size: 14px;
}
.privacy-top ul {
list-style-type: disc;
list-style-position: outside;
display: inline-block;
text-align: left;
padding-left: 20px;
margin: 0 auto;
}
.privacy-top li {
list-style-position: outside;
}
.privacy-top a {
color: black;
text-decoration: none;
}
.privacy-top a:hover {
text-decoration: underline;
}
.privacy-top-heading2 {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
padding: 22px 0 16px 0;
text-align: left;
}
.privacy-top-heading3 {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 16px;
color: #000;
padding: 14px 0 14px 0;
text-align: left;
}
@media (max-width: 600px) {
#privacy-container {
width: 90%;
font-size: 12px;
text-align: left;
}
.privacy-container1 {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #000;
}
.privacy-top {
width: 90%;
margin-left: 20px;
margin-right: 10px;
height: auto;
text-align: left;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
background-color: #bfebf2;
position: relative;
padding-top: 20px;
}
}
/* ================================================ PSSR ============================================================ */
#pssr-container {
box-sizing: border-box;
width: 100%;
font-family: 'DM Sans', sans-serif;
position: relative;
padding-bottom: 60px;
background-color: #e7e1da;
}
.pssr-top {
width: 100%;
height: auto;
text-align: center;
font-family: 'DM Sans', sans-serif;
background-color: #e7e1da;
position: relative;
padding-top: 40px;
}
.pssr-top-heading {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 22px;
color: #000;
padding: 20px 0 20px 0;
}
.pssr-top-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 20px;
color: #000;
padding-bottom:15px;
padding-left: 10px;
padding-right: 10px;
}
.pssr-top-text2 {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 20px;
color: #000;
padding-bottom:15px;
margin-bottom: 20px;
}
/* ========= PSSR 2 DIVS BESIDE EACH OTHER ============== */
#pssr-coverage-container {
box-sizing: border-box;
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
position: relative;
margin: 0 auto;
text-align:center;
background-color: #fff;
padding: 60px 0 40px 0;
}
.pssr-coverage-container-column-heading {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000;
font-weight: 700;
}
.pssr-coverage-container-column-text{
font-family: 'DM Sans', sans-serif;
font-size: 16px;
color: #000;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
/* Create two equal columns that floats next to each other */
.pssr-coverage-container-column1 {
float: left;
width: 57%;
padding: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000;
font-weight: normal;
}
.pssr-coverage-container-column2 {
float: left;
width: 37%;
padding: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 20px;
color: #000;
font-weight: normal;
}
.pssr-coverage-container-row {
}
/* Clear floats after the columns */
.pssr-coverage-container-row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.pssr-coverage-container-column1 {
width: 100%;
}
.pssr-coverage-container-column2 {
width: 100%;
}
}
/* ================================ MAINTENANCE INTRO ORANGE BAR SECTION ============================ */
/* Maintenance page intro block */
.maint-intro {
background: #fffaf5;
border-left: 4px solid #ff7a00;
padding: 18px 20px; /* your original spacing */
margin-top: 30px;
margin-bottom: 25px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Wrapper for Maintenance page */
.maint-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
/* Maintenance heading */
.maint-heading {
font-size: 30px;
line-height: 1.3;
color: #003333;
text-align: center;
margin: 40px auto 20px auto;
}
@media only screen and (max-width: 600px) {
.maint-heading {
font-size: 24px !important;
line-height: 1.3;
padding: 0 20px;
}
}
/* Maintenance text paragraphs */
.maint-text {
font-size: 18px;
line-height: 1.6;
color: #003333;
max-width: 800px;
margin: 10px auto;
text-align: center;
}
/* Extra spacing below final Maintenance intro sentence */
.maint-text-last {
margin-bottom: 35px;
}
/* Extra spacing below entire Maintenance intro section and Maintenance page background colour*/
#maint-info {
background-color: #e7e1da; /* taupe */
padding-bottom: 30px; /* keep your original spacing */
margin: 0; /* FIX: prevents white gap below */
}
/* FIX: remove margins that leak white outside taupe */
#maint-info h1,
#maint-info p,
#maint-info .maint-intro {
margin: 0;
padding: 18px 20px; /* FIX: restore your original padding so text is NOT tight */
}
/* ================================ REPAIRS INTRO ORANGE BAR SECTION ============================ */
/* Repairs page intro block */
.rep-intro {
background: #fffaf5;
border-left: 4px solid #ff7a00;
padding: 18px 20px;
margin-top: 30px;
margin-bottom: 25px;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Wrapper for Repairs page */
.rep-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
/* Repairs heading */
.rep-heading {
font-size: 30px;
line-height: 1.3;
color: #003333;
text-align: center;
margin: 40px auto 20px auto;
}
@media only screen and (max-width: 600px) {
.rep-heading {
font-size: 24px !important;
line-height: 1.3;
padding: 0 20px;
}
}
/* Repairs text paragraphs */
.rep-text {
font-size: 18px;
line-height: 1.6;
color: #003333;
max-width: 800px;
margin: 10px auto;
text-align: center;
}
/* Extra spacing below entire Repairs intro section and background colour */
#rep-info {
background-color: #d6cec4; /* dark taupe background */
padding-top: 30px;
padding-bottom: 30px;
}
/* ================================ REPAIRS TESTIMONIAL SECTION ============================ */
/* Testimonial placeholder block */
.testimonial-placeholder {
background: #e8f9fb;
border-left: 6px solid #05a0b7; /* bright aqua */
padding: 24px;
margin: 60px auto;
max-width: 900px;
border-radius: 6px;
box-shadow: none;
}
/* Mobile spacing fix */
@media (max-width: 600px) {
.testimonial-placeholder {
margin: 40px 16px; /* adds 16px left/right margin on mobile */
padding: 20px; /* slightly tighter padding for small screens */
}
}
.testimonial-wrapper {
font-family: 'DM Sans', sans-serif;
}
/* Heading stays modern */
.testimonial-heading {
font-size: 28px;
color: #003333;
margin-bottom: 20px;
text-align: center;
font-weight: 700;
}
/* Handlee text — larger + darker + more expressive */
.testimonial-text {
font-family: "Handlee", cursive !important;
font-size: 26px !important; /* slightly larger */
line-height: 30px !important; /* keeps it tight */
color: #003333 !important; /* dark brand colour */
text-align: center !important;
word-spacing: 2px !important;
letter-spacing: 0.6px !important; /* subtle bold effect */
font-weight: 600 !important; /* Handlee simulates bold here */
text-shadow: 0.4px 0.4px #003333; /* visual boldness like About page */
}
/* =========================
COFFEE REFRESH – NEW MAINTENANCE LIST SECTION
Completely isolated, no shared classes
Prefix: cr-maintlist-
========================= */
#cr-maintlist {
background-color: #f4f1ec; /* neutral taupe/stone */
padding: 40px 0;
width: 100%;
font-family: 'DM Sans', sans-serif;
margin-bottom: 30px;
}
.cr-maintlist-wrapper {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.cr-maintlist-title {
text-align: center;
font-size: 26px;
font-weight: 700;
color: #003333;
margin-bottom: 30px;
}
.cr-maintlist-block {
background: #ffffff;
padding: 25px 25px 20px 25px;
margin-bottom: 25px;
border-radius: 8px;
box-shadow: rgba(0,0,0,0.08) 0px 2px 6px;
/* ? OPTION A: narrower boxes */
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.cr-maintlist-heading {
font-size: 20px;
font-weight: 700;
color: #ff7a00; /* brand orange */
margin-bottom: 12px;
}
.cr-maintlist-ul {
list-style-type: none;
padding-left: 0;
}
.cr-maintlist-ul li {
font-size: 16px;
line-height: 22px;
color: #003333;
padding-left: 26px;
position: relative;
margin-bottom: 10px;
}
/* Safe orange bullet */
.cr-maintlist-ul li::before {
content: "\2022"; /* safe Unicode bullet */
color: #ff7a00;
font-size: 22px;
position: absolute;
left: 0;
top: -1px;
}
/* =========================
COFFEE REFRESH – NEW REPAIRS INTRO SECTION
Completely isolated
Prefix: cr-repairsintro-
========================= */
#cr-repairsintro {
background-color: #f4f1ec; /* neutral taupe/stone */
padding: 45px 0;
width: 100%;
font-family: 'DM Sans', sans-serif;
margin-bottom: 40px; /* keeps spacing consistent with following sections */
}
.cr-repairsintro-wrapper {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.cr-repairsintro-title {
text-align: center;
font-size: 26px;
font-weight: 700;
color: #003333;
margin-bottom: 20px;
}
.cr-repairsintro-subtext {
text-align: center;
font-size: 18px;
color: #003333;
margin-bottom: 30px;
font-weight: 500;
}
.cr-repairsintro-block {
background: #ffffff;
padding: 25px 25px 20px 25px;
margin: 0 auto;
max-width: 650px; /* narrower premium box */
border-radius: 8px;
box-shadow: rgba(0,0,0,0.08) 0px 2px 6px;
}
.cr-repairsintro-list {
list-style-type: none;
padding-left: 0;
}
.cr-repairsintro-list li {
font-size: 16px;
line-height: 22px;
color: #003333;
padding-left: 26px;
position: relative;
margin-bottom: 12px;
}
/* Orange bullet */
.cr-repairsintro-list li::before {
content: "\2022"; /* safe Unicode bullet */
color: #ff7a00;
font-size: 22px;
position: absolute;
left: 0;
top: -1px;
}
/* ================================ NEW MAINTENANCE & REPAIRS ------ HEADER, 3 COL LAYOUT AND FOOTER ============================ */
#mr-container {
box-sizing: border-box;
width: 100%;
font-family: 'DM Sans', sans-serif;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.mr-m-top {
width: 100%;
height: auto;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
background-color: #fcd884;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
}
.mr-m-top-heading {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 22px;
font-weight: 600;
color: #000;
padding: 20px 0 20px 0;
}
.mr-m-top-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
.mr-m-top-inner {
width: 20%;
margin: 10px auto 0 auto;
font-family: 'DM Sans', sans-serif;
text-align: left;
font-size: 16px;
line-height: 16px;
color: #000;
background-color: transparent;
}
/* for 480px or less */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 479px)
and (orientation: portrait) {
.mr-m-top-inner {
width: 70%;
}
}
.mr-m-top-inner-heading2 {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: #000;
padding-top: 5px;
padding-left: 10px;
}
ul.mr-m-top-inner-circle {
list-style-type: circle;
padding-left: 15px;
color: #000;
font-weight: 700;
}
li.mr-m-top-inner-circle:not(:last-child) {
margin-bottom: 15px;
}
.mr-r-top {
width: 100%;
height: auto;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
background-color: #fcd884;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
}
.mr-r-top-heading {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
line-height: 22px;
font-weight: 700;
color: #000;
padding: 20px 0 20px 0;
}
.mr-r-top-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
}
.mr-r-top-inner {
width: 60%;
margin: 10px auto 0 auto;
font-family: 'DM Sans', sans-serif;
text-align: left;
font-size: 16px;
line-height: 16px;
color: #000;
background-color: transparent;
}
.mr-r-top-inner-heading2 {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: #000;
padding-top: 5px;
padding-left: 15px;
}
ul.mr-r-top-inner-circle {
list-style-type: circle;
padding-left: 20px;
color: #000;
font-weight:500;
}
li.mr-r-top-inner-circle:not(:last-child) {
margin-bottom: 15px;
}
/* ROW AND COLUMN STRUCTURE */
.mr-wrapper {
padding: 5px;
max-width: 960px;
width: 95%;
margin: 20px auto;
position: relative;
}
.rep-wrapper {
padding: 5px;
max-width: 960px;
width: 95%;
margin: 5px auto;
position: relative;
}
.mr-subheader {
padding: 0 15px;
}
.mr-subheader-header {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 16px;
color: #000;
text-align:center;
padding-top: 30px;
padding-bottom: 20px;
}
.mr-subheader-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
text-align:center;
padding-bottom: 20px;
}
.mr-columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0 0 0;
padding-top: 50px;
}
.mr-column {
flex: 1;
margin: 5px 0 0 0;
padding: 2px;
}
.mr-column:nth-child(2),
.mr-column:nth-child(3) {
background-color: #f7f7f7;
padding: 20px 26px 28px 26px;
border-radius: 6px;
}
.mr-column:nth-child(2) h3 {
font-size: 20px;
color: #ff7a00;
margin-top: 0;
margin-bottom: 12px;
font-weight: 600;
}
.mr-column:first-child {
margin-left: 0;
}
.mr-column:last-child {
margin-right: 0;
}
.mr-col-heading {
font-size: 18px;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
padding: 0;
}
.mr-col-heading-secondary {
color: #0b7f92;
font-size: 18px;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
padding: 0;
}
.mr-col1-content {
width: 100%;
background-color: #fff;
text-align: center;
margin: 0 auto;
padding-top: 0;
}
.mr-col2-content {
width: 95%;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 22px;
color: #003333;
background-color: transparent;
text-align: left;
padding-top: 5px;
}
.mr-col2-content-heading {
font-size: 16px;
font-weight: 600;
text-align:center;
padding-bottom: 20px;
}
.mr-col3-content {
width: 100%;
background-color: transparent;
padding: 0;
margin-top: 10px;
clear: both;
}
.mr-col3-content-heading {
color: #ff7a00;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 700;
}
.mr-col3-content-inner {
width: 70%;
margin: 10px auto 0 auto;
font-family: 'DM Sans', sans-serif;
text-align: left;
font-size: 16px;
line-height: 24px;
color: #003333;
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 6px;
padding: 18px 16px;
}
ul.mr-circle {
list-style-type: circle;
padding-left: 20px;
color: #003333;
font-size: 16px;
font-weight: 500;
}
li.mr-circle:not(:last-child) {
margin-bottom: 15px;
}
.mr-m-bottom-container {
width: 100%
height: auto;
background-color:#fff;
margin-top: 30px;
}
.mr-m-bottom {
margin: 0 auto;
text-align: center;
padding: 40px auto;
text-align: center;
width: 80%;
height: 80px;
background-color: #fff;
}
.mr-m-bottom-heading {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 16px;
color: #000;
text-align:center;
padding-top: 40px;
padding-bottom: 20px;
}
.mr-m-bottom-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
text-align:center;
padding-bottom: 20px;
}
.mr-r-bottom-container {
width: 100%
height: auto;
background-color: #fff;
margin-top: 0;
padding-top: 0;
}
.mr-r-bottom {
margin: 0 auto;
text-align: center;
padding: 40px auto;
text-align: center;
width: 80%;
height: 80px;
background-color: #fff;
}
.mr-t-bottom-heading {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
line-height: 16px;
color: #000;
text-align:center;
padding-top: 40px;
padding-bottom: 20px;
}
.mr-r-bottom-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
text-align:center;
padding-bottom: 20px;
}
@media screen and (max-width: 980px) {
.mr-nav {
padding-left: 20px;
}
.mr-columns .mr-column {
margin-bottom: 5px;
flex-basis: 40%;
}
.mr-columns .mr-column:nth-last-child(2) {
margin-right: 0;
}
.mr-columns .mr-column:last-child {
flex-basis: 100%;
margin: 0;
}
}
@media screen and (max-width: 680px) {
.mr-nav {
padding-left: 5px;
}
.mr-columns .mr-column {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}
/* Orange dividers for repairs sections */
.rep-section {
border-top: 3px solid #ff7a00;
padding-top: 18px;
margin-top: 20px;
}
/* Remove divider from the first section */
.rep-section:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0;
}
/* ========================================================= */
/* ? NEW: MOBILE FIXES TO COLLAPSE 3-COLUMN LAYOUT (480px) */
/* ========================================================= */
@media screen and (max-width: 480px) {
.mr-columns {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
.mr-column {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 0 auto 20px auto !important;
padding: 0 !important;
}
.circularimage {
width: 60% !important;
max-width: 200px !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
}
}
/* ================================ PRICES INTRO ORANGE BAR SECTION ============================ */
/* ===========================
PRICES PAGE INTRO SECTION
=========================== */
#prices-intro-section {
background-color: #e7e1da; /* taupe */
padding: 50px 0 30px 0; /* NEW: 50px top padding for spacing */
margin: 0;
}
/* Remove white band caused by H1 default margin */
#prices-intro-section h1.prices-heading {
margin-top: 0 !important;
}
.prices-wrap {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
/* Heading */
.prices-heading {
font-family: 'DM Sans', sans-serif;
font-size: 30px;
line-height: 1.3;
color: #003333;
text-align: center;
margin: 0 auto 15px auto !important; /* bottom spacing only */
}
/* Intro box */
.prices-intro-box {
background: #fffaf5;
border-left: 4px solid #ff7a00;
padding: 18px 20px;
margin: 15px 0 10px 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
display: flex;
}
.prices-intro-content {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
color: #003333;
}
/* Handlee sentences */
.prices-handlee {
font-family: "Handlee", cursive !important;
font-size: 22px !important;
line-height: 28px !important;
letter-spacing: 0.4px !important;
font-weight: 600 !important;
color: #ff7a00 !important;
text-align: center !important;
padding: 10px 0 !important;
margin: 0 auto !important;
max-width: 800px;
}
/* ================================ WHY REFRESH ============================ */
#why-container {
width: 100%;
background-color: #fff;
text-align:center;
margin: 0 auto;
}
.why-info {
max-width: 600px;
height: auto;
background-color: #fff;
text-align: center;
padding: 0 20px 0 20px;
margin: 0 auto;
vertical-align:top;
}
h2.why-info {
font-size: 20px;
font-weight: 700;
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
color: #000;
margin: 60px 0 0 0;
}
p.why-info {
font-size: 14px;
font-weight: 400;
text-align: center;
padding-bottom: 20px;
color: #000;
margin-top: 0;
}
#whytext{
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
}
#whytext img{
text-align:center;
vertical-align:middle;
margin:40px auto 0 auto;
}
img.why {
width: 100%;
max-width: 100%:
height: 100%;
max-height: 100%:
}
ul.why {
list-style-type: disc;
}
ul.why li {
list-style-type: disc;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption_media img{
width: 750px;
height: 262px;
}
#gift{
float:left;
width: 100%;
padding-top: 20px;
font-family: 'DM Sans', sans-serif;
}
#sidegift{
font-family: 'DM Sans', sans-serif;
float:left;
width: 50%;
height: 100%;
background:#fff;
margin-left:5px;
margin-right:0;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:30px;
padding-bottom:10px;
text-align: left;
background-color:pink;
}
#sideimggift{
font-family: 'DM Sans', sans-serif;
float:right;
width:40%;
height: 100%;
background:#fff;
margin-left:0;
margin-right:5px;
margin-top:20px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
text-align: center;
}
#sidebarmenugift {
font-family: 'DM Sans', sans-serif;
float: left;
width:15%;
height: 100%;
margin: 10px 0 0 0;
font-size: 17px;
line-height: 20px;
font-weight: bold;
line-height: 18px;
padding:20px 0 0 0;
background: #fff;
}
#rightpanelgift {
font-family: 'DM Sans', sans-serif;
float: right;
width: 20%;
height:100%;
margin: 40px 10px 0 0;
padding-top:20px;
text-align:center;
}
/* ========================================================= */
/* COFFEE BEANS MARKETING BANNER */
/* ========================================================= */
#coffee-marketing-banner {
position: relative;
width: 100%;
min-height: 240px;
/* Pulls banner up 1px to close any fractional rendering sub-pixel gap */
margin-top: -1px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
/* Expanded padding longhand */
padding-top: 40px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Dark semi-transparent layer over beans to make white text pop */
#coffee-marketing-banner::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
background-image: none;
z-index: 1;
}
/* Content Container sitting above overlay */
#coffee-marketing-banner .banner-content {
position: relative;
z-index: 2;
max-width: 800px;
/* Expanded margin longhand */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
/* Expanded padding longhand */
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Marketing Title */
#coffee-marketing-banner .banner-title {
font-family: 'DM Sans', sans-serif;
font-size: 28px;
font-weight: 700;
font-style: normal;
font-variant: normal;
line-height: normal;
color: #ffffff !important;
/* Expanded margin longhand (removes browser default h2 margin-top gap) */
margin-top: 0px !important;
margin-right: 0px !important;
margin-bottom: 12px !important;
margin-left: 0px !important;
/* Expanded padding longhand */
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
/* Removed uppercase transform to match rest of site headings */
text-transform: none;
letter-spacing: 0.5px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}
/* Marketing Subtext */
#coffee-marketing-banner .banner-text {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
font-variant: normal;
line-height: 1.5;
color: #e0e0e0 !important;
/* Expanded margin longhand */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
/* Expanded padding longhand */
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}
/* Marketing Button */
#coffee-marketing-banner .banner-button {
display: inline-flex;
align-items: center;
gap: 12px;
/* Expanded margin longhand */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
/* Expanded padding longhand */
padding-top: 18px;
padding-right: 38px;
padding-bottom: 18px;
padding-left: 38px;
background-color: #ff7a00;
color: #ffffff !important;
text-decoration: none;
font-family: 'DM Sans', sans-serif;
font-size: 17px;
font-weight: 800;
/* Expanded border-radius longhand */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: 0px 8px 22px rgba(255, 122, 0, 0.28);
/* Expanded transition longhand */
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
#coffee-marketing-banner .banner-button:hover,
#coffee-marketing-banner .banner-button:focus,
#coffee-marketing-banner .banner-button:active {
background-color: #e06b00;
color: #ffffff !important;
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0px 12px 26px rgba(255, 122, 0, 0.38);
}
/* Mobile Responsiveness */
@media screen and (max-width: 680px) {
#coffee-marketing-banner {
min-height: 200px;
/* Expanded margin longhand for mobile */
margin-top: -1px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
/* Expanded padding longhand for mobile */
padding-top: 30px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
}
#coffee-marketing-banner .banner-title {
font-size: 20px;
}
#coffee-marketing-banner .banner-text {
font-size: 14px;
}
}
/*===============================================================================
FOOTER LAYOUT (CLEAN + STABLE — FULL STYLESHEET)
=============================================================================== */
/* ========================================================= */
/* SECTION 0 — BUTTONS */
/* ========================================================= */
/* ------------------------- */
/* 0A. Ghost Button (orange) */
/* ------------------------- */
.ghost-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #ff7a00 !important;
background-image: none !important;
color: #ffffff !important;
font-family: 'DM Sans', sans-serif;
font-size: 17px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
padding-top: 18px;
padding-right: 38px;
padding-bottom: 18px;
padding-left: 38px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ff7a00 !important;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #ff7a00 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #ff7a00 !important;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #ff7a00 !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: none !important;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0s;
}
.ghost-button:hover,
.ghost-button:focus,
.ghost-button:active {
background-color: #e06b00 !important;
border-top-color: #e06b00 !important;
border-right-color: #e06b00 !important;
border-bottom-color: #e06b00 !important;
border-left-color: #e06b00 !important;
color: #ffffff !important;
text-decoration: none;
box-shadow: none !important;
transform: translateY(-3px);
}
.ghost-button a,
.ghost-button a:hover,
.ghost-button a:active,
.ghost-button a:visited,
.ghost-button a:focus {
background-color: transparent;
color: #ffffff;
text-decoration: none;
}
@media screen and (max-width: 740px) {
.ghost-button {
font-size: 14px;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
min-width: 70px;
margin-left: 10px;
}
}
/* ------------------------------------------- */
/* 0B. Ghost Button 2 (solid blue GET IN TOUCH)*/
/* ------------------------------------------- */
.ghost-button2 {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #0a9ad1 !important;
background-image: none !important;
color: #ffffff !important;
font-family: 'DM Sans', sans-serif;
font-size: 17px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
padding-top: 18px;
padding-right: 38px;
padding-bottom: 18px;
padding-left: 38px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #0a9ad1 !important;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #0a9ad1 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #0a9ad1 !important;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #0a9ad1 !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: none !important;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0s;
}
.ghost-button2:hover,
.ghost-button2:focus,
.ghost-button2:active {
background-color: #087fb0 !important;
border-top-color: #087fb0 !important;
border-right-color: #087fb0 !important;
border-bottom-color: #087fb0 !important;
border-left-color: #087fb0 !important;
color: #ffffff !important;
text-decoration: none;
box-shadow: none !important;
transform: translateY(-3px);
}
.ghost-button2 a,
.ghost-button2 a:hover,
.ghost-button2 a:active,
.ghost-button2 a:visited,
.ghost-button2 a:focus {
color: #ffffff !important;
text-decoration: none;
background-color: transparent !important;
}
@media screen and (max-width: 740px) {
.ghost-button2 {
padding-top: 10px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
font-size: 15px;
min-width: 110px;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.ghost-button2 {
font-size: 14px !important;
line-height: 16px !important;
padding-top: 8px !important;
padding-right: 12px !important;
padding-bottom: 8px !important;
padding-left: 12px !important;
min-width: 120px !important;
margin-top: 14px !important;
}
}
/* ---------------------------------------- */
/* 0C. Unified Footer BOOK NOW Button Base */
/* ---------------------------------------- */
.footer-booking-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 160px;
background-color: #ff7a00 !important;
background-image: none !important;
color: #ffffff !important;
font-family: 'DM Sans', sans-serif;
font-size: 17px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
text-align: center;
padding-top: 18px;
padding-right: 38px;
padding-bottom: 18px;
padding-left: 38px;
margin-top: 22px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ff7a00 !important;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #ff7a00 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #ff7a00 !important;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #ff7a00 !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: none !important;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0s;
}
.footer-booking-button:hover,
.footer-booking-button:focus,
.footer-booking-button:active {
background-color: #e06b00 !important;
border-top-color: #e06b00 !important;
border-right-color: #e06b00 !important;
border-bottom-color: #e06b00 !important;
border-left-color: #e06b00 !important;
color: #ffffff !important;
text-decoration: none;
box-shadow: none !important;
transform: translateY(-3px);
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.footer-booking-button {
font-size: 14px !important;
line-height: 16px !important;
padding-top: 8px !important;
padding-right: 12px !important;
padding-bottom: 8px !important;
padding-left: 12px !important;
min-width: 120px !important;
margin-top: 0px !important;
}
}
/* ========================================================= */
/* SECTION 1 — FOOTER LINKS */
/* ========================================================= */
.mainfooterlinks {
font-size: 16px;
line-height: 1.45;
padding-top: 6px;
display: flex;
flex-direction: column;
align-items: center;
}
.footerlink {
margin-top: 1px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
}
.footerlink a {
color: #191919;
text-decoration: none;
font-weight: 400;
font-size: 16px;
}
@media screen and (max-width: 740px) and (orientation: portrait) {
.mainfooterlinks {
padding-top: 22px !important;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.mainfooterlinks {
padding-top: 22px !important;
font-size: 15px !important;
}
.footerlink a {
font-size: 15px !important;
}
}
@media screen and (min-width: 1025px) {
.mainfooterlinks {
padding-top: 28px !important;
}
}
/* ========================================================= */
/* SECTION 2 — FOOTER CTA TEXT */
/* ========================================================= */
.footercta-column {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
}
.footercta-text {
font-size: 24px;
line-height: 28px;
font-weight: 700;
text-align: center;
color: #191919;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 14px;
margin-left: 0px;
font-family: 'DM Sans', sans-serif;
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.footercta-text {
margin-top: 0px !important;
}
}
/* ========================================================= */
/* SECTION 4 — FOOTER WHATSAPP BUTTON + TEXT */
/* ========================================================= */
.footermsg {
width: 90%;
background-color: transparent;
padding-top: 20px;
text-align: center;
font-size: 14px;
line-height: 18px;
font-family: "Handlee", cursive;
word-spacing: 3px;
font-weight: 500;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.footermsg img {
width: 100%;
max-width: 240px;
height: auto;
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.footermsgtext {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
font-weight: 500;
color: #191919;
letter-spacing: 0.2px;
text-align: center;
line-height: 1.3;
margin-top: 6px;
}
@media screen and (max-width: 740px) and (orientation: portrait) {
.footermsg img {
width: 100% !important;
max-width: 230px !important;
margin-bottom: 10px;
}
.footermsg {
width: 85%;
font-size: 90%;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.footermsg {
padding-top: 0px !important;
}
.footermsg img {
width: 100% !important;
max-width: 200px !important;
margin-bottom: 6px;
}
}
/* ========================================================= */
/* SECTION 5 — FOOTER OPENING TIMES */
/* ========================================================= */
.times {
width: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-align: center;
color: #191919;
}
.openingtimes {
margin-bottom: 30px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
}
.opening-hours {
width: max-content;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
color: #191919;
background-color: transparent;
display: block;
}
.opening-hours_title {
font-size: 16px;
font-weight: bold;
word-spacing: 2px;
}
.opening-hours_days li {
display: flex;
justify-content: space-between;
line-height: 16px;
list-style-type: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #191919;
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.openingtimes {
margin-bottom: 6px !important;
}
.opening-hours {
padding-top: 6px !important;
padding-right: 10px !important;
padding-bottom: 6px !important;
padding-left: 10px !important;
}
}
@media screen and (max-height: 400px) and (orientation: landscape) {
.openingtimes {
margin-bottom: 2px !important;
}
.opening-hours {
padding-top: 4px !important;
padding-right: 8px !important;
padding-bottom: 4px !important;
padding-left: 8px !important;
}
}
@media screen and (min-width: 741px) and (max-width: 1024px) and (orientation: portrait) {
.openingtimes {
margin-bottom: 10px !important;
}
}
/* ========================================================= */
/* SECTION 6 — FOOTER FSB LOGO */
/* ========================================================= */
.fsb {
width: 100%;
text-align: center;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fsb img {
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 140px;
height: auto;
max-width: 100%;
}
@media screen and (max-width: 740px) {
.fsb img {
width: 70%;
max-width: 150px;
}
}
@media screen and (max-width: 740px) and (orientation: portrait) {
.fsb {
margin-top: 35px !important;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.fsb {
margin-top: 0px !important;
}
.fsb img {
width: 100px !important;
}
}
@media screen and (max-height: 400px) and (orientation: landscape) {
.fsb {
margin-top: 0px !important;
}
.fsb img {
width: 90px !important;
}
}
@media screen and (min-width: 741px) and (max-width: 1024px) and (orientation: portrait) {
.fsb {
margin-top: 6px !important;
}
.fsb img {
width: 110px !important;
}
}
/* ========================================================= */
/* SECTION 7 — FOOTER COFFEESAFE */
/* ========================================================= */
.coffeesafe {
width: 100%;
text-align: center;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
}
.coffeesafe-name {
font-family: 'DM Sans', sans-serif;
font-size: 24px;
font-weight: 700;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #191919;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
.coffeesafe-name .coffee {
color: #ffffff;
}
.coffeesafe-name .safe {
color: #ffcd00;
}
.coffeesafe-title {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
color: #191919;
margin-top: 3px;
text-align: center;
}
@media screen and (max-width: 740px) {
.coffeesafe-name {
font-size: 22px;
}
.coffeesafe-title {
font-size: 16px;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.coffeesafe {
margin-top: 0px !important;
}
}
@media screen and (min-width: 1025px) {
.coffeesafe {
margin-top: 32px !important;
}
}
/* ========================================================= */
/* SECTION 8 — FOOTER TEL + EMAIL */
/* ========================================================= */
.contact-column {
display: flex;
justify-content: center;
align-items: flex-start;
align-self: stretch;
}
.contact-block {
font-family: 'DM Sans', sans-serif;
color: #191919;
line-height: 1.2;
font-size: 15px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
}
.contact-line {
margin-top: 4px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
.contact-line a {
color: #191919;
font-weight: 600;
font-size: 15px;
text-decoration: none;
}
.contact-line a:hover {
opacity: 0.8;
}
@media screen and (max-width: 740px) {
.contact-line a {
white-space: nowrap;
}
}
@media screen and (max-width: 740px) and (orientation: portrait) {
.contact-block {
padding-top: 34px !important;
padding-bottom: 20px !important;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.contact-block {
font-size: 11px !important;
line-height: 1.1 !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.contact-line a {
font-size: 11px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
}
@media screen and (min-width: 1025px) {
.contact-block {
padding-top: 0px !important;
}
}
@media screen and (min-width: 741px) and (max-width: 1024px) and (orientation: portrait) {
.contact-block {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
.contact-line a {
font-size: 12px !important;
font-weight: 600 !important;
}
}
/* ========================================================= */
/* RESPONSIVE FOOTER RACCOON LINE DRAWING */
/* ========================================================= */
.footer-raccoon-container {
display: block;
width: 100%;
text-align: inherit;
margin-top: auto;
margin-right: 0px;
margin-bottom: -30px;
margin-left: 0px;
padding-top: 16px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer-raccoon-drawing {
display: inline-block;
width: 125px;
height: auto;
max-width: 100%;
vertical-align: bottom;
opacity: 1;
filter: contrast(1.25) brightness(1.1);
transition-property: filter;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0s;
}
.footer-raccoon-drawing:hover {
opacity: 1;
transform: none;
filter: contrast(1.4) brightness(1.2);
}
@media (max-width: 768px) {
.footer-raccoon-container {
margin-top: auto;
margin-bottom: -30px;
padding-top: 12px;
}
.footer-raccoon-drawing {
width: 100px;
}
}
/* ========================================================= */
/* FOOTER CONTAINERS + ROW STRUCTURE */
/* ========================================================= */
#linkscontainer1 {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
background-color: #ddeff3;
background-image: linear-gradient(to bottom, #ddeff3, #eef7f9);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
}
#linkscontainer2 {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
background-color: #eef7f9;
background-image: linear-gradient(to bottom, #eef7f9, #ffffff);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
}
.footer-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 20px;
}
.footer-row article {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px;
max-width: 25%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #191919;
font-family: 'DM Sans', sans-serif;
}
@media screen and (max-width: 740px) and (orientation: portrait) {
.footer-row {
display: block !important;
}
.footer-row article {
width: 100% !important;
max-width: 100% !important;
margin-top: 0px !important;
margin-right: auto !important;
margin-bottom: 0px !important;
margin-left: auto !important;
}
}
/*=========================================================================== BLACK BOTTOM FOOTER =======================================================================================*/
.footer-distributed{
background-color: #191919;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: normal 16px;
font-family: 'DM Sans', sans-serif;
padding: 30px 50px 30px 50px;
margin-top: 0;
margin-bottom: 40px;
position: relative;
}
.footer-distributed .footer-left p{
color: #e7e1da;
font-size: 14px;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
.footer-distributed .footer-left a{
color: #e7e1da;
font-size: 14px;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
/* Footer links */
.footer-distributed p.footer-links{
font-size:18px;
font-family: 'DM Sans', sans-serif;
color: #e7e1da;
margin: 0 0 10px;
padding: 0;
}
.footer-distributed p.footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: #e7e1da;
word-spacing: 1px;
}
.footer-distributed p.footer-links a:hover{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: #ffffff;
}
.footer-distributed p.footer-links a:visited{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: #e7e1da;
}
.footer-distributed .footer-right{
float: right;
margin-top: 6px;
max-width: 225px;
}
.footer-distributed .footer-right a{
display: inline-block;
width: 35px;
height: 35px;
background-color: #191919;
border-radius: 0;
font-size: 20px;
color: #e7e1da;
text-align: center;
line-height: 35px;
font-family: 'DM Sans', sans-serif;
margin-left: 2px;
}
/* ===========================
MOBILE FIX FOR FOOTER
=========================== */
@media (max-width: 768px) {
.footer-distributed {
padding: 20px 20px 20px 20px !important;
text-align: center !important;
}
.footer-distributed .footer-left,
.footer-distributed .footer-right {
float: none !important;
width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
display: block !important;
}
/* spacing BELOW Facebook icon */
.footer-distributed .footer-right {
margin-top: 0 !important;
padding-bottom: 25px !important;
}
/* SMALL-SCREEN FONT FIX (iPhone SE, Galaxy S24, Z Fold 5 portrait) */
.footer-distributed p.footer-links {
font-size: 14px !important;
line-height: 1.5 !important;
margin-bottom: 10px !important;
}
.footer-distributed p.footer-links a {
font-size: 14px !important;
padding: 2px 4px !important;
word-spacing: 0 !important;
}
/* NEW: COPYRIGHT SMALL-SCREEN FIX */
.footer-distributed .footer-left p {
font-size: 12px !important; /* reduced from 14px */
line-height: 1.4 !important; /* tighter line height */
word-spacing: 0 !important; /* prevents wrap */
}
.footer-distributed .footer-right a {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ===========================
LANDSCAPE FIX FOR FOOTER
=========================== */
@media (orientation: landscape) {
.footer-distributed {
text-align: center !important;
padding: 20px 20px 20px 20px !important;
}
.footer-distributed .footer-left,
.footer-distributed .footer-right {
float: none !important;
width: 100% !important;
display: block !important;
text-align: center !important;
margin: 0 auto !important;
}
/* spacing BELOW Facebook icon */
.footer-distributed .footer-right {
margin-top: 0 !important;
padding-bottom: 25px !important;
}
}
/* ===========================
TABLET FIX (iPad, Galaxy Tab)
=========================== */
@media (max-width: 1024px) {
.footer-distributed {
padding: 25px 30px 25px 30px !important;
text-align: center !important;
}
.footer-distributed .footer-left,
.footer-distributed .footer-right {
float: none !important;
width: 100% !important;
text-align: center !important;
margin: 0 auto !important;
display: block !important;
}
.footer-distributed .footer-right {
margin-top: 20px !important;
}
}
/* ===========================
DESKTOP FIX — RESTORE ORIGINAL DESKTOP LAYOUT
=========================== */
@media (min-width: 1025px) {
.footer-distributed {
text-align: left !important;
padding: 30px 50px 30px 50px !important;
}
.footer-distributed .footer-left {
float: left !important;
text-align: left !important;
width: auto !important;
}
.footer-distributed .footer-right {
float: right !important;
text-align: right !important;
width: auto !important;
margin-top: 6px !important;
padding-bottom: 0 !important;
}
}
/* ===========================
ULTRA-NARROW FIX (Z Fold 5 portrait narrow mode)
=========================== */
@media (max-width: 360px) {
.footer-distributed p.footer-links {
font-size: 13px !important; /* slightly smaller */
line-height: 1.4 !important;
word-spacing: 0 !important;
letter-spacing: 0 !important;
}
.footer-distributed p.footer-links a {
font-size: 13px !important; /* reduce link size */
padding: 1px 3px !important; /* tighter spacing */
}
.footer-distributed .footer-left p {
font-size: 12px !important; /* keep copyright readable */
line-height: 1.4 !important;
}
}
/*========================================================================== END OF BLACK FOOTER ==============================================================================*/
/*========================================================================== STICKY FOOTER ==============================================================================*/
/* ========================================================= */
/* FIXED FOOTER */
/* ========================================================= */
.fixedfooter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 44px;
background-color: #453536;
text-align: center;
color: #ffffff;
z-index: 9999;
/* Animation */
animation: footerSlideUp 0.9s ease-out forwards;
opacity: 0;
/* iOS Home Bar Padding */
padding-bottom: env(safe-area-inset-bottom);
}
.fixedfooter .footer-message {
margin: 0;
text-align: center;
font-size: 14px;
color: #ffffff !important;
line-height: 44px;
font-weight: 500;
letter-spacing: 2px;
word-spacing: 4px;
font-family: 'DM Sans', sans-serif;
}
@keyframes footerSlideUp {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/*end fixed footer*/
/*================================================== MEDIA QUERIES ==================================================================*/
/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
/*============== RESPONSIVE SLIDESHOW ===================*/
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
img.why {
width: 100%;
height: auto;
}
.caption_media {
width: 100%;
height: auto;
}
}
/************************************************************************************
MEDIA QUERIES - SERVICES PAGE - BEAUTY NAIL TANNING MAKEUP SECTIONS
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#service-pagewrap {
width: 94%;
}
#service-content {
width: 41%;
padding: 1% 4%;
}
#service-middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
float: right;
}
#service-sidebar {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
#service-middle2 {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
float: left;
}
#service-sidebar2 {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
service-header, service-footer {
padding: 1% 4% 1% 4%;
}
}
/* for 700px or less */
@media screen and (max-width: 600px) {
#service-content {
width: auto;
float: none;
}
#service-middle {
width: auto;
float: none;
margin-left: 0px;
}
#service-sidebar {
width: auto;
float: none;
}
#service-middle2 {
width: auto;
float: none;
margin-left: 0px;
}
#service-sidebar2 {
width: auto;
float: none;
}
#topservices {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#service-header {
height: auto;
}
h1 {
font-size: 2em;
}
#service-sidebar {
display: none;
}
#topservices {
width: auto;
float: none;
}
.caption_media {
width: 100%;
height: auto;
}
p.homemessage {
font-size: 28px;
line-height: 26px;
}
}
/************************************************************************************
MEDIA QUERIES - CLASSIC
*************************************************************************************/
/* Tablet Landscape */
/*@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}*/
/* Tablet Portrait */
/*@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}*/
html { font-size:100%; }
@media (min-width: 640px) { body {font-size:1rem; h2 {font-size:12px; text-align:center; color:#5a5a5a;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
/* PRICE LIST PAGE — FULL WIDTH INTRO + WRAPPER FIXES */
/* PRICE LIST PAGE — FULL WIDTH INTRO */
#serv-info {
width: 100%;
margin: 0;
padding-bottom: 40px !important;
}
.pricing-pagewrap {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 20px 0 !important;
text-align: center;
}
@media (max-width: 600px) {
.serv-pagewrap {
padding: 0 10px !important;
}
}
/* TOP BANNER — BLUE CUP (correct aspect ratio, no cropping) */
#top-banner img {
width: 100%;
height: auto; /* keeps natural proportions */
display: block;
object-fit: contain; /* shows full image without cutting */
}
p.address {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
}