@font-face{font-display:swap;font-family:Orbitron;font-style:normal;font-weight:400;src:url('../media/fonts/orbitron-v31-latin-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:Orbitron;font-style:normal;font-weight:500;src:url('../media/fonts/orbitron-v31-latin-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:Orbitron;font-style:normal;font-weight:600;src:url('../media/fonts/orbitron-v31-latin-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:Orbitron;font-style:normal;font-weight:700;src:url('../media/fonts/orbitron-v31-latin-700.woff2') format('woff2')}@font-face{font-display:swap;font-family:Orbitron;font-style:normal;font-weight:800;src:url('../media/fonts/orbitron-v31-latin-800.woff2') format('woff2')}@font-face{font-display:swap;font-family:Orbitron;font-style:normal;font-weight:900;src:url('../media/fonts/orbitron-v31-latin-900.woff2') format('woff2')} @font-face{font-display:swap;font-family:Ubuntu;font-style:normal;font-weight:300;src:url('../media/fonts/ubuntu-v20-latin-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:italic;font-weight:300;src:url('../media/fonts/ubuntu-v20-latin-300italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:normal;font-weight:400;src:url('../media/fonts/ubuntu-v20-latin-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:italic;font-weight:400;src:url('../media/fonts/ubuntu-v20-latin-italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:normal;font-weight:500;src:url('../media/fonts/ubuntu-v20-latin-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:italic;font-weight:500;src:url('../media/fonts/ubuntu-v20-latin-500italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:normal;font-weight:700;src:url('../media/fonts/ubuntu-v20-latin-700.woff2') format('woff2')}@font-face{font-display:swap;font-family:Ubuntu;font-style:italic;font-weight:700;src:url('../media/fonts/ubuntu-v20-latin-700italic.woff2') format('woff2')} button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} :root { --vertical-section-padding: 90px; --horizontal-section-padding: max(calc((100vw - 1200px) / 2), 5vw); --header-height: 70px; --border-radius: 0px; --heading-font: 'Orbitron', system-ui, sans-serif; --paragraph-font: 'Ubuntu', system-ui, sans-serif; --accent-color-1: #383838; --accent-color-2: #0c0c0c; --accent-color-filter-1: none; --accent-color-filter-2: none; --very-dark-grey: #151515; --dark-grey: #111111; --medium-grey: #7f7f7f; --light-grey: #b9b9b9; --very-light-grey: #e9e9e9; --bg-color: white; --hero-gradient: linear-gradient(150deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3)100%); --section-gradient: linear-gradient(150deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6)100%); --gradient-1: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9)100%); --box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.5); --dropdown-shadow: 0px 13px 18px -10px rgba(0,0,0,0.2); } * { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: var(--header-height); } body { overflow-x: hidden; background-color: var(--bg-color); } section { padding: var(--vertical-section-padding) var(--horizontal-section-padding); } section img { display: block; width: 100%; background-color: rgba(0,0,0,0.1); font-family: var(--paragraph-font); font-style: italic; } .row { display: flex; width: 100%; flex-wrap: nowrap; align-items: center; gap: 5%; } .col { flex-basis: 100%; } .hide-on-desktop { display: none; } .narrow-on-desktop { max-width: 700px; margin: 0 auto; } .cropped-img { width: 100%; aspect-ratio: 1.2; object-fit: cover; object-position: center; } .section-bg-img-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .section-bg-img-container img { display: block; min-width: 100%; height: 130%; object-fit: cover; object-position: center; transition: translate 0.3s; } .section-gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-image: var(--section-gradient); backdrop-filter: blur(3px) brightness(1); } .disable-scroll { height: 100dvw; max-height: 100dvw; overflow: hidden; } .grey-bg { background-color: var(--very-light-grey); } .banner-img-section { height: 300px; position: relative; } h1, h2, h3, h4 { margin-top: 0; margin-bottom: 0.3em; font-family: var(--heading-font); font-weight: 800; color: var(--accent-color-1); } h2 { margin: 0; font-size: 2.6rem; } h3 { margin-top: 1em; margin-bottom: 0; font-size: 1.8rem; } h4 { font-size: 1.4rem; } p, input, select, label, textarea, q{ font-family: var(--paragraph-font); font-size: 1.2rem; color: var(--dark-grey); line-height: 1.5em; } p a { color: inherit; font-weight: 500; line-height: 1.5em; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: inherit; transition: 0.3s; } p a:hover { text-decoration-color: var(--accent-color-2); } q { display: block; font-style: italic; font-weight: 500; padding-left: 1em; border-left: 2px solid rgba(0,0,0,0.2); } ul, ol { font-family: var(--paragraph-font); font-size: 1.2rem; margin: 0; padding: 0 0 1em 1em; } ul { list-style-type: square; } ul li, ol li { color: var(--dark-grey); margin: 0; padding: 0.5em 0; line-height: 1.5em; } ul li::marker { color: var(--accent-color-2); font-size: 1em; } b { font-weight: 500; } figcaption { margin: 1em 0; font-family: var(--paragraph-font); font-size: 1.2rem; font-style: italic; font-weight: 500; color: var(--dark-grey); text-align: center; } hr { border-color: lightblue; } a:focus-visible { outline: 4px solid rgb(255, 217, 1); } .text-cols { columns: 350px; column-gap: 3em; column-rule: 1px solid lightblue; } .pre-heading { font-family: var(--paragraph-font); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.1em;; color: var(--dark-grey); text-transform: uppercase; } .skip-nav-link { position: absolute; top: 1em; left: 50%; padding: 0.6em 1em; transform: translateX(-50%) translateY(-200%); font-family: var(--paragraph-font); color: white; text-decoration: none; background-color: rgba(0,0,0, 0.9); border-radius: var(--border-radius); z-index: 4;; transition: 0.3s } .skip-nav-link:focus { transform: translateX(-50%) translateY(0); } .button { display: inline-block; margin: 1em 0 0 0; padding: 0.6em 1.2em; font-family: var(--paragraph-font); font-size: 1.2rem; font-weight: 600; text-transform: uppercase; text-decoration: none; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all 0.3s; cursor: pointer; } .button.primary { margin-right: 0.; background-color: var(--accent-color-2); border: 2px solid var(--accent-color-2); color: white; } .button.secondary { background-color: transparent; color: var(--accent-color-1); border: 2px solid var(--accent-color-1); } .button.white { background-color: white; border: 2px solid white; color: var(--accent-color-2); } .button.white-outline { background-color: transparent; color: white; border: 2px solid white; } .button:hover { background-color: var(--accent-color-1); border-color: var(--accent-color-1); color: white; } .top-bar { display: none; width: 100%; z-index: 3; justify-content: center; align-items: center; gap: 2em; padding: 0 var(--horizontal-section-padding); background-color: rgba(255,255,255,0); border-bottom: 1px solid rgba(255,255,255,0.3); transition: background-color 0.5s; } .top-bar > * { margin: 0.3em 0; } .top-bar p { padding: 0; color: white; text-align: center; } .top-bar tel, .top-bar address { font-family: var(--paragraph-font); color: white; font-style: normal; } .top-bar a { text-decoration: none; } header { position: fixed; top: 0; width: 100%; z-index: 5; } .header-main { height: var(--header-height); padding: 0 var(--horizontal-section-padding); display: flex; justify-content: space-between; align-items: center; background-color: white; transition: background-color 0.5s; } .header-main div { display: flex; gap: 1em; align-items: center; } header nav > ul { display: flex; margin: 0; padding: 0; height: 100%; gap: 1em; transition: filter 1s; } header nav ul li { list-style-type: none; align-content: center; position: relative; transition: background-color 0.3s; } header nav ul ul { width: auto; height: auto; margin-left: -1em; padding: 0.5em 0; position: absolute; top: 100%; left: 0; background-color: rgba(255, 255, 255, 1); border-radius: calc(var(--border-radius)*1); opacity: 0; box-shadow: var(--dropdown-shadow); transform-origin: top; transition: opacity 0.3s; pointer-events: none; } header nav ul ul li { display: block; margin: 0 1em; line-height: 1em; white-space: nowrap; } header nav ul ul li a { color: var(--dark-grey); } header nav li:hover ul { opacity: 1; pointer-events: auto; } header nav li:focus-within ul { opacity: 1; pointer-events: auto; } li:has(ul) > a { position: relative; margin-right: 1em; } li:has(ul) > a::after { content: '⏷'; position: absolute; top: -0.3em; right: -1.1em; transform-origin: 0 57%; transition: transform 0.5s, filter 0.3s; transition-delay: 0.1s; pointer-events: none; } li:has(ul):hover > a::after { transform: rotateX(180deg); } header nav ul ul li:first-child { } header nav a { font-family: var(--paragraph-font); font-size: 1.1rem; font-weight: 600; text-decoration: none; text-transform: uppercase; color: var(--very-dark-grey); white-space: nowrap; transition: color 0.3s, opacity 0.3s; } header nav a:hover { opacity: 0.7; } header .header-main a[href^="tel:"] { padding: 0.5em 0.7em; font-family: var(--paragraph-font); font-size: 1.1rem; font-weight: 600; text-decoration: none; color: white; background-color: var(--accent-color-2); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: background-color 0.3s, color 0.3s; } header a[href^="tel:"]:hover { background-color: var(--accent-color-1); color: white; opacity: 1; } .white-bg { background-color: rgba(255,255,255,1); backdrop-filter: blur(5px); } .colored-bg { background-color: var(--accent-color-1); } .dark-nav-text { color: var(--dark-grey); } .dark-nav-text:hover { color: var(--accent-color-2); opacity: 1; } .dark-dropdown-arrow { filter: brightness(0); } .header-shadow { box-shadow: 0px 1px 5px rgba(0,0,0,0.2); } .dropdown-shadow { box-shadow: 0px 13px 18px -10px rgba(0,0,0,0.2); } .hamburger { display: none; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; background-color: transparent; border: none; outline: none; width: 1.6em; aspect-ratio: 1.3; position: relative; transition: opacity 0.3s, filter 1s; } .hamburger:hover { opacity: 0.7; } .hamburger span { display: block; width: 100%; height: 3px; background-color: black; border-radius: var(--border-radius); transition: transform 0.3s; } .hamburger span:nth-child(1) { transform-origin: 1.5px 1.5px; } .hamburger span:nth-child(2) { transform-origin: 0; } .hamburger span:nth-child(3) { transform-origin: 1.5px 1.5px; } .hamburger.hamburger-cross span:nth-child(1) { transform: rotate(45deg) scaleX(1.05); } .hamburger.hamburger-cross span:nth-child(2) { transform: scale(0); } .hamburger.hamburger-cross span:nth-child(3) { transform: rotate(-45deg) scaleX(1.05); } .hamburger-dark { filter: invert(0.5); } .hamburger.hamburger-cross.hamburger-dark { filter: invert(1); } .logo { display: block; height: calc(var(--header-height)*0.7); transform-origin: top left; opacity: 1; transition: filter 0.5s, transform 1s, transform-origin 1s, opacity 0.3s, box-shadow 0.3s; } .logo:hover { opacity: 0.7; } .white-logo { } .hero { display: flex; flex-direction: column; justify-content: center; background-color: var(--accent-color-1); min-height: 60vh; position: relative; margin-top: var(--header-height); } .hero-home { display: flex; flex-direction: column; justify-content: center; background-color: var(--accent-color-1); min-height: 100vh; position: relative; } .hero .hero-text-container { max-width: 580px; z-index: 3; } .hero-home .hero-text-container { max-width: 800px; z-index: 3; } .hero-text-container h1 { margin-top: 1em; font-size: clamp(1rem, 8vw, 3.5rem); font-weight: 800; text-wrap: balance; text-shadow: 3px 3px 3px rgba(0,0,0,0.5); color: white; } .hero-home .hero-text-container h1 { font-size: clamp(1rem, 7vw, 3rem); font-weight: 600; text-wrap: balance; text-shadow: 3px 3px 3px rgba(0,0,0,0.5); color: white; } .hero-text-container h1 b { font-weight: 600; } .hero-text-container p { max-width: 600px; margin: 0; padding-left: 1em; font-size: 1.2rem; line-height: 1.3em; color: white; text-shadow: 3px 3px 3px rgba(0,0,0,0.5); border-left: 4px solid rgba(255,255,255,0.5); } .hero-button-container { display: flex; gap: 1em; margin-top: 1em; z-index: 3; } .hero-image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .hero-image-container img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute; opacity: 0; transition: opacity 1s ease-in-out, scale 5s linear; } .hero-image-container img.active { opacity: 1; scale: 1.1; } .hero-gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-image: var(--hero-gradient); backdrop-filter: blur(0px) brightness(1); } .hero-accreditations-container { display: flex; gap: 1em; justify-content: space-between; position: absolute; left: 0; bottom: 1em; width: 100%; padding: 0 var(--horizontal-section-padding); z-index: 3; } .hero-accreditations-container img { height: 9vw; max-height: 50px; width: auto; background-color: transparent; filter: brightness(0) invert(1) opacity(0.7); } .breadcrumb-nav { padding: 0.6em var(--horizontal-section-padding); background-color: var(--very-light-grey); border-bottom: 1px solid rgba(0,0,0,0.08); } .breadcrumb-nav ol { display: flex; flex-wrap: wrap; gap: 0.3em; list-style: none; margin: 0; padding: 0; font-family: var(--paragraph-font); font-size: 0.9rem; color: var(--medium-grey); } .breadcrumb-nav li + li::before { content: '›'; margin-right: 0.3em; color: var(--medium-grey); } .breadcrumb-nav a { color: var(--dark-grey); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.3s; } .breadcrumb-nav a:hover { color: var(--accent-color-2); } footer { padding: var(--vertical-section-padding) var(--horizontal-section-padding); background-color: white; position: relative; } footer .row { align-items: flex-start; } footer h2 { margin-bottom: 0.5em; font-size: 2rem; } footer address { margin: 0; padding: 0.1em 0 0.1em 1em; font-style: normal; border-left: 4px solid var(--accent-color-2); } footer address a { display: block; margin: 0.2em 0; font-family: var(--paragraph-font); font-size: 1.3rem; font-style: normal; color: var(--accent-color-2); text-decoration: none; transition: opacity 0.3s; } footer address a:hover { opacity: 0.7; } .socials-container { display: flex; align-items: center; gap: 1em; padding: 0.5em 0 0.5em 1em; border-left: 4px solid var(--accent-color-2); } .socials-container a { text-decoration: none; transition: filter 0.3s; } .socials-container a:hover { filter: opacity(0.7); } .socials-container a img { display: block; height: 2em; width: auto; } .footer-logo { display: block; width: 250px; } .footer-bottom { padding: 0.5em var(--horizontal-section-padding); display: flex; width: 100%; justify-content: space-between; gap: 0.5em; border-top: 1px solid rgba(255,255,255,0.1); position: absolute; bottom: 0; left: 0; } .footer-bottom p { margin: 0; color: white; opacity: 0.4; font-size: 0.8rem; font-weight: 400; } .footer-bottom p a { text-decoration-thickness: 1px; } .home-services-section .col p { padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 3rem; } .home-services-grid .service-card { width: 100%; aspect-ratio: 1.4; background-color: var(--accent-color-1); border-radius: calc(var(--border-radius)*1); box-shadow: var(--box-shadow); position: relative; overflow: hidden; transition: background-color 0.3s; } .home-services-grid .service-card img { width: 100%; aspect-ratio: inherit; object-fit: cover; object-position: center; border-radius: calc(var(--border-radius)*1); transition: scale 0.5s, filter 0.3s; } .home-services-grid .service-card .service-card-text { display: flex; flex-direction: column; justify-content: flex-end; padding: 1em; background-image: var(--gradient-1); position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 2; } .home-services-grid .service-card .service-card-text h3 { color: white; } .home-services-grid .service-card .service-card-text p { margin: 0; padding: 0; color: white; } .home-services-grid .service-card:hover.service-card img { scale: 1.05; filter: brightness(1.2); } .home-services-grid .service-card:last-child .service-card-text { background-image: none; } .home-services-grid .service-card:last-child .service-card-text h3 { margin-bottom: 1em; } .home-services-grid .service-card:last-child:hover { background-color: var(--accent-color-2); } .home-services-section .button { display: none; margin-top: 2em; } .about-us-section { padding: 0; background-color: var(--accent-color-1); position: relative; } .about-us-section .section-text-container { box-sizing: content-box; width: 100%; max-width: 900px; padding: var(--vertical-section-padding) var(--horizontal-section-padding); position: relative; z-index: 3; position: relative; } .about-us-section .pre-heading { color: white; } .about-us-section .section-text-container h2 { color: white; } .about-us-section .about-us-paragraph-container { padding-left: 1em; border-left: 4px solid rgba(255,255,255,0.5); } .about-us-section .section-text-container p { color: white; } .latest-work-section { padding-left: 0; padding-right: 0; } .latest-work-section .row { padding-left: var(--horizontal-section-padding); padding-right: var(--horizontal-section-padding); } .latest-work-section .col p { padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .latest-work-section .col:has(a) { text-align: left; } .latest-work-section a { margin: 0; } .latest-work-carousel { width: 100%; margin: 3rem 0 2rem 0; border-radius: calc(var(--border-radius)*1); overflow-x: hidden; position: relative; white-space: nowrap; filter: contrast(1.2) saturate(1.1); } .latest-work-carousel::before { content: ''; position: absolute; top: 0; left: 0; width: var(--horizontal-section-padding); height: 100%; background-image: linear-gradient(90deg, white 0%, transparent 100%); z-index: 2; } .latest-work-carousel::after { content: ''; position: absolute; top: 0; right: 0; width: var(--horizontal-section-padding); height: 100%; background-image: linear-gradient(90deg, transparent 0%, white 100%); z-index: 2; } .carousel-content { width: fit-content; padding: 10px 0; display: inline-flex; overflow: hidden; } .carousel-content-slide { animation: slide 40s linear infinite; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .latest-work-carousel .carousel-content img { height: 300px; width: auto; margin-right: 1em; border-radius: calc(var(--border-radius)*1); box-shadow: var(--box-shadow); } .latest-work-carousel:hover .carousel-content { } .latest-work-section .button { display: block; width: fit-content; margin-inline: auto; } .areas-covered-section { background-color: var(--accent-color-1); border-bottom: 1px solid rgba(255,255,255,0.1); } .areas-covered-section h2 { color: white; } .areas-covered-section .pre-heading { color: white; } .areas-covered-section .col p { padding-left: 1em; border-left: 4px solid rgba(255,255,255,0.5); color: white; } #map { width: 100%; height: 350px; margin-top: 3em; border-radius: calc(var(--border-radius)*1); z-index: 1; } .areas-covered-section .map-credit { margin: 0; margin-top: 0.5em; padding: 0; border: none; text-align: right; font-size: 0.8rem; color: white; opacity: 0.7; } .areas-covered-section .map-credit a { text-decoration-thickness: 1px; text-decoration-color: inherit; } .leaflet-marker-icon { } .leaflet-marker-shadow { background-color: transparent; } .home-reviews-section .col p { padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .home-reviews-grid { margin: 3rem 0 2rem 0; columns: 400px; column-gap: 2em; } .review-card { margin-bottom: 2em; padding: 1.5em; background-color: var(--very-light-grey); border-radius: calc(var(--border-radius)*1); break-inside: avoid; box-shadow: var(--dropdown-shadow); } .review-name { position: relative; } .review-name p { margin: 0; margin-left: 2em; font-size: 1.4rem; font-weight: 600; } .review-name::before { content: ''; height: 100%; aspect-ratio: 1; position: absolute; left: 0; background-color: var(--accent-color-1); background-image: url('../media/svg/user-solid.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 100%; outline: 5px solid var(--accent-color-1) } .review-source img { display: block; height: 1.2rem; width: auto; background-color: transparent; } .review-stars { margin: 1em 0; width: 9rem; height: auto; background-color: transparent; filter: invert(64%) sepia(94%) saturate(324%) hue-rotate(4deg) brightness(99%) contrast(85%); } .review-text p { margin: 0.5em 0; padding: 0; } .home-reviews-section .button { display: block; width: fit-content; margin-inline: auto; } .cta-section { background-color: black; position: relative; } .cta-section .row { z-index: 3; position: relative; } .cta-section .pre-heading { color: white; } .cta-section h2 { color: white; } .cta-section p { padding-left: 1em; border-left: 4px solid rgba(255,255,255,0.5); color: white; } .services-intro-section img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: var(--border-radius); box-shadow: var(--box-shadow); background-color: rgba(0,0,0,0.1); } .services-list-section { background-color: var(--accent-color-1); } .services-list-section .pre-heading, .services-list-section h2, .services-list-section p { color: white; } .services-list-section p { padding-left: 1em; border-left: 4px solid rgba(255,255,255,0.5); } .services-list { columns: 300px; margin: 2em 0; padding: 1em; background-color: rgba(255,255,255,0.1); border-radius: var(--border-radius); } .services-list li { list-style-type: none; margin-left: 1em; color: white; position: relative; } .services-list li::before { content: ''; height: 1em; width: 1em; background-color: white; mask-image: url('../media/svg/square-check-solid-black.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; position: absolute; left: 0; top: 50%; transform: translate(-1.5em, -50%); } .services-list-section .button { margin: 0; float: right; } .why-choose-us-section p { padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .why-choose-us-list li { list-style-type: none; margin-left: 1.3em; font-size: 1.4rem; font-weight: 500; font-style: italic; position: relative; } .why-choose-us-list li::before { content: ''; background-image: url('../media/svg/check-solid-white.svg'); background-size: contain; background-repeat: no-repeat; height: 1em; width: 1em; background-color: var(--accent-color-2); border: 0.3em solid transparent; border-radius: 100%; position: absolute; left: 0; top: 50%; transform: translate(-2em, -50%); } .content-section { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 2em; } .content-container { flex-basis: 60%; } .content-container p:last-of-type { font-weight: 600; } .content-container img { display: block; width: 100%; height: auto; margin: 3em 0; border-radius: var(--border-radius); color: var(--dark-grey); } .content-container ul { columns: 300px; margin-bottom: 2em; padding: 0.5em 2em; background-color: var(--very-light-grey); border-radius: var(--border-radius); } .content-container li { list-style-type: none; margin-left: 1em; position: relative; } .content-container li::before { content: ''; height: 1em; width: 1em; background-color: var(--accent-color-1); mask-image: url('../media/svg/square-check-solid-black.svg'); mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-position: center; position: absolute; left: 0; top: 50%; transform: translate(-1.5em, -50%); } .content-sidebar { width: 30%; position: sticky; top: calc(var(--header-height) + 1em); background-color: white; } .content-sidebar h2 { font-size: 1.8rem; } .content-sidebar ul { margin: 0; padding: 0; } .content-sidebar li { list-style-type: none; margin: 1em 0; padding: 0; background-color: rgba(0,0,0,0.1); border-left: 4px solid var(--accent-color-2); } .content-sidebar li a { display: inline-block; width: 100%; margin: 0; padding: 0.5em 1em; text-decoration: none; font-weight: 500; color: var(--dark-grey); transition: background-color 0.3s, color 0.5s; } .content-sidebar li a:hover { color: white; background-color: var(--accent-color-1); } .gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; } .gallery-item { border-radius: var(--border-radius); overflow: hidden; } .gallery-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; color: rgba(0,0,0,0.5); transition: transform 0.3s; filter: contrast(1.2) saturate(1.1); } .gallery-section > p { margin-top: 2em; margin-bottom: 0; padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .gallery-item:hover.gallery-item img { transform: scale(1.1); } .review-page-grid { margin: 0 0 3rem 0; columns: 400px; column-gap: 2em; } .review-page-container > p { padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .contact-page-content .row { align-items: flex-start; } .contact-page-content .col:nth-child(1) { position: sticky; top: calc(var(--header-height) + 1em); } .contact-form .form-element { margin: 1em 0; } .contact-form label { display: block; font-weight: 500; color: var(--dark-grey); } .contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; padding: 0.3em 0.5em; border: 2px solid var(--accent-color-1); border-radius: var(--border-radius); color-scheme: light; color: var(--dark-grey); } .contact-form textarea { min-height: 3rem; transition: min-height 0.3s; } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible, .contact-form button:focus-visible { outline: 4px solid rgb(255, 217, 1) !important; } .contact-form textarea:focus { min-height: 10rem; } .contact-details-container { margin-bottom: 3em; padding-left: 1em; border-left: 4px solid var(--accent-color-2); } .contact-details-container a { display: block; margin: 0.5em 0; text-decoration: none; font-family: var(--paragraph-font); color: var(--dark-grey); font-size: 1.8rem; font-style: normal; font-weight: 500; } .contact-page-socials-container { display: flex; align-items: center; gap: 1em; margin: 0.5em 0; padding: 0.5em 0 0.5em 1em; border-left: 4px solid var(--accent-color-2); } .contact-page-socials-container a { text-decoration: none; transition: filter 0.3s; } .contact-page-socials-container a:hover { filter: opacity(0.7); } .contact-page-socials-container a img { display: block; height: 3em; width: auto; background-color: transparent; } @media (max-width: 1000px) { .row { flex-direction: column; align-items: flex-start; gap: 5vh; } .col { width: 100%; } .hamburger { display: flex; } header nav { position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 100vh; width: 100%; padding-top: var(--header-height); padding-left: 10%; padding-right: 10%; background-color: var(--accent-color-1); transform: translateX(200vw); overflow-x: hidden; overflow-y: scroll; opacity: 0; transition: 1s ease; } header nav ul { flex-direction: column; height: auto; width: 100%; gap: 1em; } header nav ul li { width: 100%; margin: 0; padding: 0; } header nav li:hover { background-color: transparent; } header nav a { font-size: 1.6rem; color: white; } header nav ul ul { width: 100%; height: auto; max-height: 0; margin: 0; padding: 0; padding-left: 1em; position: static; overflow: hidden; opacity: 1; border: none; border-left: 4px solid; border-color: transparent; border-radius: 0; background-color: transparent; box-shadow: none; transition: 0.5s ease, border-color 2s; } li:has(ul) > a::after { top: -0.1em; } header nav ul ul li { margin: 1em 0; } header nav ul ul li a { color: white; font-weight: 400; white-space: wrap; } header nav ul ul li:first-child { display: block; } li:has(ul) > a { pointer-events: none; } header a[href^="tel:"] { display: none; } .slide-nav { transform: translateX(0vw); opacity: 1; } .dropdown-accordion { max-height: 500px; overflow: visible; pointer-events: auto; border-color: white; } .dropdown-shadow { box-shadow: inset 0px 13px 18px -10px rgba(0,0,0,0.2); } .dark-nav-text { color: white !important; } .dropdown-shadow { box-shadow: inset 0px 13px 18px -10px rgba(0,0,0,0.2); } .home-services-section .row { gap: 0; } .home-services-grid { grid-template-columns: 1fr 1fr; } footer .row { margin-bottom: var(--vertical-section-padding); } .footer-bottom { flex-direction: column; align-items: center; } .footer-bottom p { text-align: center; font-size: 0.9rem; } .home-services-section .row, .latest-work-section .row, .areas-covered-section .row, .home-reviews-section .row, .cta-section .row, .services-list-section .row { gap: 0; } .content-section { flex-direction: column; } .content-container { width: 100%; } .content-sidebar { width: 100%; } .gallery { grid-template-columns: repeat(4, 1fr); } .contact-page-content .col:nth-child(1) { position: static; } .about-us-section .section-text-container { box-sizing: border-box; } } @media (max-width: 650px) { :root { --header-height: 60px; --vertical-section-padding: 60px; } .logo { height: calc(var(--header-height) * 0.85); } html { font-size: 14px; } h2 { font-size: 2.5rem; } .button { display: block; width: 100%; padding: 0.6em 1em; text-align: center; } .hero-home .hero-text-container p { font-size: 1.3rem; } .hero-button-container { flex-direction: column; gap: 0; } .home-services-grid { grid-template-columns: 1fr; } .home-services-grid .service-card { aspect-ratio: 2; } .home-services-grid .service-card:last-child { display: none; } .home-services-section .button { display: block; } .latest-work-section .button { width: 100%; } .home-reviews-section .button { width: 100%; } .top-bar { flex-wrap: wrap; gap: 0em 1em; justify-content: center;; } .latest-work-section .button { width: 90%; } .gallery { grid-template-columns: repeat(3, 1fr); gap: 0.5em; } } @media (max-width: 400px) { header nav li a[href^="tel:"] { display: inline-block; width: 100%; text-align: center; } } @media (prefers-reduced-motion: no-preference) { .fade-in { opacity: 0; } .fade-in-animation { animation: fade-in 1s ease forwards; } @keyframes fade-in { from {opacity: 0;} to {opacity: 1;} } .slide-left { opacity: 0; } .slide-left-animation { animation: slide-left 1s ease forwards; } @keyframes slide-left { from { transform: translateX(-50%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slide-right { opacity: 0; } .slide-right-animation { animation: slide-right 1s ease forwards; } @keyframes slide-right { from { transform: translateX(50%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .slide-down { opacity: 0; } .slide-down-animation { animation: slide-down 1s ease forwards; } @keyframes slide-down { from { transform: translateY(-50%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .slide-up { opacity: 0; } .slide-up-animation { animation: slide-up 1s ease forwards; } @keyframes slide-up { from { transform: translateY(50%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pulse-animation { animation: pulse 0.7s ease forwards; } @keyframes pulse { 0% {scale: 1} 50% {scale: 1.1} 100% {scale: 1} } .delay-200ms{ animation-delay: 200ms; } .delay-300ms{ animation-delay: 300ms; } .delay-400ms{ animation-delay: 400ms; } .delay-500ms{ animation-delay: 500ms; } .delay-600ms{ animation-delay: 600ms; } .delay-700ms{ animation-delay: 700ms; } .delay-800ms{ animation-delay: 800ms; } .delay-900ms{ animation-delay: 900ms; } .delay-1000ms{ animation-delay: 1000ms; } } .remove-scroll { overflow: hidden; } .lightbox-hide { top: -9999px; left: -9999px; position: absolute; visibility: hidden; } .lightbox-container { top: 0; left: 0; right: 0; bottom: 0; padding: 2em; display: -webkit-flex; display: -ms-flexbox; display: flex; position: fixed; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); z-index: 100; } .lightbox-wrapper { position: relative; box-shadow: var(--box-shadow); } .lightbox-image { height: 100%; width: 100%; max-height: 90vh; max-width: 90vh; padding: 4px; object-fit: contain; background-color: white; filter: contrast(1.2) saturate(1.1); } @media (max-width: 650px) { .lightbox-image { max-height: 95vh; max-width: 100vh; } } .lightbox-btn { width: 2em; height: 2em; position: absolute; border: none; box-shadow: none; transition: all 0.3s; background-color: transparent; background-position: center; background-repeat: no-repeat; } .lightbox-btn:hover { opacity: 0.7; border: none; } .lightbox-btn:disabled { cursor: initial; opacity: 0.3; } .lightbox-btn-close { top: 0; right: -2em; background-size: contain; background-image: url('../media/svg/cross.svg'); filter: invert(1); transition: opacity 0.3s; } .lightbox-btn-close:hover { opacity: 0.7; } .lightbox-btn-next, .lightbox-btn-previous { top: calc(50% - (2.2em / 2)); background-size: contain; background-image: url('../media/svg/angle-right-solid.svg'); filter: invert(1); } .lightbox-btn-previous { left: -2em; transform: rotate(180deg); } .lightbox-btn-next { right: -2em; } .lightbox-video-wrapper { width: 80vw; overflow: hidden; position: relative; padding-bottom: 56.25%; } .lightbox-video-player { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1; } } @keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} } @keyframes createBox { from {transform: scale(0);} to {transform: scale(1);} } @keyframes deleteBox { from {transform: scale(1);} to {transform: scale(0);} }