@charset "UTF-8";

/*
One-Page HTML Template v1.7.8
http://one-page-html-template.website/
Copyright 2025
*/

/* ===== ROOT ========================================================================= */

:root{

/* Container Width Variables - Adjust to fit viewport width */
--width-desktop: 80vw;
--width-mobile: 100vw; 
--width-ipad: 90vw;
--width-large-screen: 70vw;

/* HTML Font Size Variables - Adjust to set global text size, depending on viewport width*/
/* up to 769px */
--font-desktop: 16px;
/* up to 1075px */
--font-mobile: 16px;
/* up to 1900px */
--font-ipad: 16px;
/* over 1900px */
--font-large-screen: 16px;

/* Colour Variables */
--purewhite: #ffffff;
--white: #fff8f0ff;
--lightgrey: #eeeeee;
--oxford-blue: #0b132bff;
--space-cadet: #1c2541ff;
--yinmn-blue: #3a506bff;
--verdigris: #5bc0beff;
--fuchsia: #b8246dff;

/* Number Of Boxes Across Variables - Sets the number of boxes across the viewport width */
--3across: calc((100% - 4rem)/3);
--2across: calc((100% - 4rem)/2);
--2columns: calc(((100% - 1rem)/3)*2);
--1across: 100%;
--narrow1across: 70%;

/* Image Overlay Colour */
--img-overlay-colour: rgb(0, 33, 71, 0.35);

/* Shadow Variables */
--shadow-color: 209deg 100% 4%;

--container-shadow:
-0.5px 0px 0.6px hsl(var(--shadow-color) / 0.08),
-1.5px 0px 1.8px -0.5px hsl(var(--shadow-color) / 0.09),
-2.9px 0px 3.5px -0.9px hsl(var(--shadow-color) / 0.1),
-5.6px -0.1px 6.8px -1.4px hsl(var(--shadow-color) / 0.11),
-10.6px -0.1px 13px -1.8px hsl(var(--shadow-color) / 0.12),
0.5px 0px 0.6px hsl(var(--shadow-color) / 0.08),
1.5px 0px 1.8px -0.5px hsl(var(--shadow-color) / 0.09),
2.9px 0px 3.5px -0.9px hsl(var(--shadow-color) / 0.1),
5.7px 0px 7px -1.4px hsl(var(--shadow-color) / 0.11),
10.6px 0px 13px -1.8px hsl(var(--shadow-color) / 0.12);

--shadow-down:
0px 0.6px 0.7px hsl(var(--shadow-color) / 0.08),
0px 2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1),
0px 5.5px 6.5px -1.3px hsl(var(--shadow-color) / 0.11),
0px 12.8px 15.2px -2px hsl(var(--shadow-color) / 0.12);

--shadow-up:
0px -0.6px 0.7px hsl(var(--shadow-color) / 0.08),
0px -2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1),
0px -5.5px 6.6px -1.3px hsl(var(--shadow-color) / 0.11),
0px -12.8px 15.4px -2px hsl(var(--shadow-color) / 0.12);

--inset-down:
0px 0.6px 0.7px hsl(var(--shadow-color) / 0.08) inset,
0px 2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1) inset,
0px 5.5px 6.5px -1.3px hsl(var(--shadow-color) / 0.11) inset,
0px 12.8px 15.2px -2px hsl(var(--shadow-color) / 0.12) inset;

--inset-up:
0px -0.6px 0.7px hsl(var(--shadow-color) / 0.08) inset,
0px -2.3px 2.8px -0.7px hsl(var(--shadow-color) / 0.1) inset,
0px -5.5px 6.6px -1.3px hsl(var(--shadow-color) / 0.11) inset,
0px -12.8px 15.4px -2px hsl(var(--shadow-color) / 0.12) inset;

--button-shadow:
0.7px 0.7px 1.1px hsl(var(--shadow-color) / 0.1),
2.5px 2.5px 4.1px -0.8px hsl(var(--shadow-color) / 0.11),
6.2px 6.1px 10px -1.5px hsl(var(--shadow-color) / 0.11),
14.8px 14.7px 24.1px -2.3px hsl(var(--shadow-color) / 0.11);

}

/* ===== ANGLED EDGES ================================================================= */
.div-bot-left {clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 30px));}
.div-top-left {clip-path: polygon(0 0,100% 30px,100% 100%,0 100%);margin-top: -30px;}
.div-bot-right {clip-path: polygon(0 0,100% 0,100% calc(100% - 30px),0 100%);}
.div-top-right {clip-path: polygon(0 30px,100% 0,100% 100%,0 100%);margin-top: -30px;}

/* ===== CSS RESET ==================================================================== */
*{margin:0;padding:0;border:0;scroll-behavior:smooth;}
*,::after,::before{box-sizing:border-box;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body,h1,h2,h3,h4,h5,p{margin-block-end:0;font-optical-sizing:auto;}

/* ===== BASIC LAYOUT ================================================================= */
html,body{height:100svh;min-height:100svh;background:var(--lightgrey);}
html{font-size:var(--font-desktop);}
body{font-family: "Roboto", sans-serif;font-weight:normal;font-style:normal;font-size:1.05rem;overflow-x:hidden;overflow-y:scroll;}
h1,h2{margin:0 auto;padding:1rem;font-family: "Lato", sans-serif;font-weight:700;font-style:normal;color:var(--white);text-align:center;width:100%;z-index:500;line-height:1.2;}
h1{font-size:clamp(3rem, 5vw, 4rem);}
h2{font-size:clamp(2rem, 2vw, 3rem);}
h3,h4{font-family: "Roboto", sans-serif;font-weight:800;font-style:normal;line-height:1.2;}
h3{margin:2rem auto;width:100%;font-size:2rem;}
h4{margin:0 auto;width:100%;font-size:1.3rem;}
p{margin:0 auto;padding:0.75rem 0 0.75rem 0;width:100%;line-height:1.6;}
ul, li {font-size:1.05rem;line-height:1;}
a,a:active,a:hover,a:link,a:visited{text-decoration:none;}
strong{font-family: "Roboto", sans-serif;font-weight:600;font-style:normal;}
[id]{scroll-margin-top: 185px;}

/* ===== GLOBAL WIDTHS ================================================================ */
.logo, nav, .container, footer{width:var(--width-desktop);max-width:var(--width-desktop);min-width:var(--width-desktop);}

/* ===== CONTAINER ==================================================================== */
.container{margin:0 auto;min-height:auto;display:flex;flex-direction:row;justify-content:center;background:var(--space-cadet);box-shadow:var(--container-shadow);}

/* ===== HEADER ======================================================================= */
header{position:sticky;top:0;left:50%;right:50%;height:185px;background:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;z-index:8888;}

/* ===== LOGO ========================================================================= */
.logo{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;position:absolute;top:0;height:145px;min-height:150px;margin:0 auto;color:var(--white);cursor:pointer;text-align:center;background:center center url("../images/logo.webp") no-repeat var(--oxford-blue);transition:background-image 300ms ease-in-out 0s;font-family: "Lato", sans-serif;font-weight:700;font-style:normal;}
.logo:hover{background:center center url("../images/logo-hover.webp") no-repeat var(--oxford-blue);}
.logo a{color:var(--white);font-size:clamp(3rem,3vw,4rem);padding:2rem;transition:color 300ms ease-in-out 0s;}
.logo a:hover{color:var(--verdigris);}

/* ===== NAVIGATION =================================================================== */
nav{position:absolute;top:145px;height:40px;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;background:var(--space-cadet);z-index:8888;box-shadow:var(--shadow-down);}

/* Menu Styles */
.nav-menu{display:flex;list-style:none;font-family: "DM Sans",sans-serif;font-weight:400;font-style:normal;}

/* Menu Links */
.nav-item a{display:inline-block;font-size:1.15rem;padding: 0 1rem 0 1rem;width: 100%;color: var(--white);transition:color 300ms ease-in-out 0s;}
.nav-item a:hover{color: var(--verdigris);}
.nav-item a:active{color: var(--verdigris);transition-duration:0s;}

/* These classes are for highlighting menu items when scrolling. See 'script.js' */
.nav-item a.clickd{color: var(--verdigris);transition-duration:0s;}
.nav-item a.active{color: var(--verdigris);transition-duration:0s;}

/* Mobile Hamburger Menu */
.hamburger{display:none;}
.bar{display:block;width:25px;height:3px;margin:5px auto;transition:all 300ms ease-in-out 0s;background-color:var(--white);}

/* ===== SECTIONS ========================================================================== */
section {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2svh 5vw 5svh 5vw;height:auto;min-height:35svh;}

/* ===== TOP ========================================================================== */
.top{margin-top:185px;}

/* Image */
.top img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* Image Overlay Colour */
.top::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--img-overlay-colour);z-index:100;}

/* ===== TEXT SECTION ================================================================= */

/* First text Section */
.text-one {background:var(--verdigris);color:var(--oxford-blue);text-align:left;}

/* Second Text Section */
.text-two {background:var(--space-cadet);color:var(--white);text-align:right;padding-top:20px;}

/* ===== IMAGE SECTION ================================================================ */
.image-section {height:50svh;}

/* Image */
.image-section img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* Image H3 (Hidden from view, but needed for accessibility and code validation) */
.image-section h3{border:0;clip-path: inset(0 0 0 0);clip-path: inset(50%);height:1px;margin:-1px;overflow: hidden;white-space: nowrap;width:1px;color:var(--white);opacity:1;}

/* Image Overlay */
.image-section-overlay{position:absolute;bottom:0;left:0;width:100%;height:auto;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:var(--img-overlay-colour);z-index:100;}

/* Text */
.image-section-overlay p{padding:0.8rem;color:var(--white);}

/* Links */
.image-section-overlay a{color:var(--verdigris);}
.image-section-overlay a:hover{color:var(--space-cadet);}
	
/* ===== INFO SECTION ================================================================= */
.info-section{background:var(--verdigris);color:var(--oxford-blue);box-shadow:var(--inset-down);}
.info-section h3{color:var(--white);}
.info-section strong{color:var(--yinmn-blue);}
.info-section a{color:var(--white);transition:color 300ms ease-in-out 0s;}
.info-section a:hover{color:var(--yinmn-blue);}

/* Info Boxes Container */
.info-section-boxes{display:flex;flex-wrap:wrap;gap:2rem;padding:2rem 0;}

/* Info Boxes */
.info-section-boxes > *{width:var(--3across);background:var(--white);border-radius:10px;}

/* Headings */
.info-section-heading{display:flex;justify-content:center;align-items:center;margin:0;padding:1rem;color:var(--white);background:var(--oxford-blue);border-radius:10px 10px 0 0;}

/* Info Boxes Content */
.info-section-text{display:flex;justify-content:center;flex-direction:column;padding:0.5rem 2rem 3rem 2rem;}
.info-section-text p{text-align:center;color:var(--yinmn-blue);}

/* Bold */
.info-section-bold{font-family: "Roboto", sans-serif;font-weight:800;font-style:normal;font-size:2.5rem;color:var(--oxford-blue);}

/* Alternating List */
.alternating {margin:0 auto;list-style:none;text-align:center;}
.alternating li{padding:2px 0 3px 0;font-size:1.1rem;line-height:1.5;}
.alternating li:nth-child(odd) {color:var(--verdigris);}
.alternating li:nth-child(even) {color:var(--space-cadet);}

/* ===== GALLERY SECTION ============================================================== */
.gallery-section{background:var(--space-cadet);color:var(--verdigris);box-shadow:var(--inset-down);}
.gallery-section h3{color:var(--white);}

/* Gallery Photos */
.gallery-photos{display:flex;flex-wrap:wrap;gap:2rem;padding:30px 0;justify-content:center;}
.gallery-photos > *{position:relative;width:var(--3across);background:var(--space-cadet);border-radius:10px;}

/* Image */
.gallery-photos img{width:100%;height:100%;object-fit:cover;object-position:center center;border-radius:10px;}

/* Overlay Text */
.gallery-photos p{position:absolute;bottom:0;left:0;width:100%;min-height:3.5svh;padding-top:0.5svh;margin:0;text-align:center;background-color:var(--img-overlay-colour);color:var(--white);z-index:100;border-radius:0 0 10px 10px;}

/* ===== ABOUT SECTION ================================================================ */
.about-section{background:var(--yinmn-blue);color:var(--oxford-blue);}
.about-section h3{color:var(--verdigris);}

/* About Boxes */
.about-boxes{display:flex;flex-wrap:wrap;gap:2rem;padding:30px 0;}

/* About Photo */
.about-photo {width:var(--3across);}
.about-photo-box{width:100%;height:100%;position:relative;padding:0;min-height:35svh;overflow:hidden;border-radius:10px;}
.about-photo-box img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:400px;object-fit:cover;object-position: center center;}

/* About Text */
.about-text {width:var(--2columns);background:var(--white);border-radius:10px;}
.about-text-box{width:100%;position:relative;padding:20px;color:var(--yinmn-blue);min-height:35svh;}
.about-text-box p{width:100%;}

/* ===== CONTACT ====================================================================== */
.contact-section{background:var(--verdigris);color:var(--white);padding-top:20px;}
.contact-section h3{color:var(--oxford-blue);}
.contact-section strong{color:var(--oxford-blue);}
.contact-section a{color:var(--verdigris);transition:color 300ms ease-in-out 0s;}
.contact-section a:hover{color:var(--oxford-blue);}

/* Contact Boxes Container */
.contact-section-boxes{display:flex;flex-wrap:wrap;gap:2rem;padding:2rem 0;}

/* Contact Boxes */
.contact-section-boxes > *{width:var(--3across);background:var(--white);border-radius:10px;}

/* Contact Boxes Headings */
.contact-section-heading{display:flex;justify-content:center;align-items:center;margin:0;padding:1rem;color:var(--white);background:var(--oxford-blue);border-radius:10px 10px 0 0;}

/* Contact Boxes Content */
.contact-section-text{display:flex;justify-content:center;flex-direction:column;padding:1rem 2rem 2rem 2rem;}
.contact-section-text p{text-align:center;color:var(--yinmn-blue);}

/* Social Media Icons */
.social{display:flex;flex-direction:row;justify-content:center;margin:2rem auto;list-style:none;}
.social a{display:flex;height:35px;width:35px;background-size:35px 35px;margin:0 8px 0 8px;transition:background-image 300ms ease-in-out 0s;}
.social a:hover{background-size:35px 35px;}

/* Instagram */
.instagram{background:center center url("../images/icon-insta.png") no-repeat;}
.instagram:hover{background:center center url("../images/icon-insta-hover.png") no-repeat;}

/* Facebook */
.facebook{background:center center url("../images/icon-facebook.png") no-repeat;}
.facebook:hover{background:center center url("../images/icon-facebook-hover.png") no-repeat;}

/* Twitter */
.twitter{background:center center url("../images/icon-twitter.png") no-repeat;}
.twitter:hover{background:center center url("../images/icon-twitter-hover.png") no-repeat;}

/* ===== FOOTER ======================================================================= */
footer{min-height:170px;position:relative;height:auto;background:var(--oxford-blue);color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3svh;box-shadow:var(--shadow-up);}
footer p{width:80%;margin:0 auto;padding:0.25rem;color:var(--white);}
footer a{color:var(--verdigris);transition:color 300ms ease-in-out 0s;}
footer a:hover{color:var(--yinmn-blue);}
.footer1{font-size:1.1rem;}
.footer2{font-size:1rem;}

/* ===== BACK TO TOP ================================================================== */
#backtotop{display:none;position:fixed;bottom:5svh;right: 8.5vw;width:3.75rem;height:3.75rem;opacity:0.9;z-index:8888;font-size:2rem;border:none;outline:none;color:var(--white);background:var(--fuchsia);border-radius:7px;text-align:center;transition:background 300ms ease-in-out 0s;box-shadow: var(--button-shadow);}
#backtotop:hover{background:var(--verdigris);}
.chevron{margin:1.35rem auto;border-right:0.55rem solid var(--white);border-bottom:0.55rem solid var(--white);width:2rem;height:2rem;background-color:transparent;}
#chevron-arrow-down{transform:rotate(-135deg);}

/* ===== MOBILE RULES ================================================================= */

/* ===== Viewport Width 768px ===== */
@media only screen and (max-width:768px){

/* Font Sizes */
html{font-size:var(--font-mobile);-ms-overflow-style:none;scrollbar-width:none;}

/* Basic Setup */
html::-webkit-scrollbar{display:none;}
h1{font-size:clamp(3rem, 5vw, 4rem);padding:1rem;}
h2{font-size:clamp(1.2rem, 3vw, 3rem);padding:1rem;}
h3{font-size:1.75rem;margin:20px auto;}

/* Global Widths */
.logo, nav, .container, footer{width:var(--width-mobile);max-width:var(--width-mobile);min-width:var(--width-mobile);}
section {padding:2svh 5vw 4svh 5vw;min-height:35svh;}

/* Logo */
.logo a{font-size:clamp(2.25rem,5vw,9rem);}

/* Navigation */
nav{justify-content:right;text-align:right;}
.nav-menu{position:fixed;top:-100%;left:0;padding:0;flex-direction:column;width:100%;height:100%;text-align:center;transition:all 300ms ease-in-out 0s;background-color:var(--oxford-blue);opacity: .90;display:inline-block;z-index:9999;}
.nav-menu.active{top:185px;}
.nav-menu li:first-child{margin-top:2rem;}
.nav-item a{font-size:1.25rem;line-height:2.2;}
.nav-item a{color:var(--white);}
.nav-item a:hover{color:var(--white);}
.nav-item a.active{color:var(--white);}
.hamburger{display:block;cursor: pointer;padding:0 20px 0 0;}
.hamburger.active .bar:nth-child(2){opacity:0;}
.hamburger.active .bar:nth-child(1){transform: translatey(8px) rotate(45deg);}
.hamburger.active .bar:nth-child(3){transform: translatey(-8px) rotate(-45deg);}
.noscroll{overflow-y:hidden;}

/* Info, Gallery & Contact Boxes */
.info-section-boxes > *{width:var(--1across);}
.contact-section-boxes > *{width:var(--1across);}
.gallery-photos > *{width:var(--2across);}

/* About Section */
.about-photo {width:var(--1across);min-height:40svh;}
.about-text {width:var(--1across);min-height:40svh;}
.about-photo-box img{object-position: center 20%;}

/* Footer */
.footer1, .footer2{width:90%;margin:0 auto;padding:0;font-size:clamp(1rem,2.5vw,1rem);}

/* Back To Top */
#backtotop{right: 3.3vw;}
}

/* ===== Viewport Width 769px to 1075px ===== */
@media only screen and (min-width:600px) and (max-width:769px){

/* Info & Contact Boxes */
.info-section-boxes > *{width:var(--narrow1across);}
.contact-section-boxes > *{width:var(--narrow1across);}
}

/* ===== Viewport Width 769px to 1075px ===== */
@media only screen and (min-width:769px) and (max-width:1075px){

/* Font Sizes */
html{font-size:var(--font-ipad);}

/* Basic Setup */
h1{font-size:clamp(3rem, 5vw, 4rem);}
h2{font-size:clamp(1.5rem, 2.5vw, 3rem);}

/* Global Widths */
.logo, nav, .container, footer{width:var(--width-ipad);max-width:var(--width-ipad);min-width:var(--width-ipad);}

/* Logo */
.logo a{font-size:clamp(2rem,4vw,4rem);}

/* Navigation */
.nav-item a{font-size:clamp(0.95rem, 3vw, 1.15rem);}

/* About Section */
.about-photo {width:var(--1across);}
.about-text {width:var(--1across);}
.about-photo-box img{object-position: center 25%;}

/* Social Media Icons */
.social a{height:30px;width:30px;background-size:30px 30px;margin:0 7px 0 7px;}
.social a:hover{background-size:30px 30px;}

/* Back To Top */
#backtotop{right: 2.5vw;}
}

/* ===== Viewport Width 1900px and up ===== */
@media only screen and (min-width:1900px){
/* Font Sizes */
html{font-size:var(--font-large-screen);}

/* Global Widths */
.logo, nav, .container, footer{width:var(--width-large-screen);max-width:var(--width-large-screen);min-width:var(--width-large-screen);}

/* Logo */
.logo a{font-size:clamp(3rem,3vw,5rem);}

/* Back To Top */
#backtotop{right: 13.5vw;}
}