/* ============== TABLE OF CONTENTS ============== */

/* 1. COLOUR PALETTE
*/
/* 2. FONT SIZES 
*/
/* 3. SPACING 
*/
/* 4. GENERAL STYLES
__Variables 
__Typography
__General 
*/
/* 5. HELPER CLASSES 
*/
/* 6. SITEWIDE COMPONENTS
__Navbar
__Footer
__Hero

*/

/* ================================================== */


/* || 1. COLOUR PALETTE */

/* rgb(248, 149, 29); /* Orange */
/* rgb(246, 100, 43); /* Dark Orange */

/* #FFFFFF; /* White */
/* #DFDFDF; /* Lighter Gray */
/* #CCCCCC; /* Light Gray */
/* #F98C1E; /* Orange */
/* #E86424; /* Dark Orange */
/* #212529; /* Dark Blue  */


/* || 2. FONT SIZES */

/* 0.75rem; 12px /* 2 Extra Small */
/* 0.8125rem; 13px /* Extra Small */
/* 1rem; 16px /* Small */
/* 1.125rem; 18px /* Medium */
/* 1.25rem; 20px /* Large */
/* 1.5rem; 24px /* Extra Large */
/* 1.625rem; 26px /*  2 Extra Large */

/* -- Px

10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44

*/


/* || 3. SPACING */

/* -- Px

2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96

*/


/* || 4. GENERAL STYLES */


/* ===== Variables ===== */

:root {
	--XXSmallFont: 0.75rem;
	--XSmallFont: 0.8125rem;
	--SmallFont: 1rem;
	--Medium: 1.125rem;
	--LargeFont: 1.25rem;
	--XLargeFont: 1.5rem;
	--XXLargeFont: 1.625rem;
}


/* ===== Typography ===== */

@font-face {
    font-family: 'Fira Sans Bold';
	src: url('../fonts/FiraSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira Sans Regular';
	src: url('../fonts/FiraSans-Regular.ttf') format('truetype');
}


/* ===== General ===== */

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 100%;
}

body {
    margin: 0;
    padding: 0;
	font-family: 'Fira Sans Regular' !important;
	line-height: 1;
	font-weight: 400;
	color: #212529; /* Dark Blue  */
}

a, 
a:visited,
a:hover {
    text-decoration: none;
    color: unset;
}

h1, 
h2 {
	text-transform: uppercase;
	font-family: 'Fira Sans Bold';
}

p,
blockquote {
	line-height: 1.5;
}

.container,
.container--c {
	max-width: 1400px;
    margin: 0 auto;
}

li {
    line-height: 1.5;
}

hr {
	background-color: #E3E3E3; 
    height: 0.125rem; 
    border: 0;
}


/* || 5. HELPER CLASSES */

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-jc-sb {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-jc-fe {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.flex-jc-fs {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.flex-jc-ct {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-ai-c {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-wr {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flex-fd-c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.m-center {
    margin: 0 auto !important;
}

.cursor-p {
    cursor: pointer !important;
}

.align-c {
	text-align: center !important;
}

.u-line:hover {
	text-decoration: underline !important;
}

.u-case {
	text-transform: uppercase !important;
}

.text-capitalize {
	text-transform: capitalize !important;
}

.font-bold {
	font-weight: 700 !important;
}

.f-width-heading {
	width: 295px !important;
}

.mh-60 {
	min-height: 3.75rem !important;
}

.mw-100 {
    max-width: 100% !important;
}

.h-70{
	height: 70px;
}

.accent {
	font-weight: bold !important;
	color: #F98C1E !important; /* Orange */
	cursor: pointer !important;
}

.accent:hover {
	text-decoration: underline !important;
	color: #E86424 !important; /* Dark Orange */
}

.email__cta:hover {
	text-decoration: underline !important;
}

.o-accent {
    font-weight: bold !important;
	color: #F98C1E !important; /* Orange */
}

@media (max-width: 991px) {
    .hide-for-mobile {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hide-for-desktop {
        display: none !important;
    }
}

.sec__colour {
    color: rgb(246, 100, 43) !important; /* Dark Orange */
}

.bg-prim {
    background-color: #F98C1E !important; /* Orange */
}

.bg-sec {
    background-color: #E86424 !important; /* Dark Orange */
}

.mt-30,
.mt-24 {
	margin-top: 1.5rem !important;
}

.mtb-30 {
    margin-top: 1.875rem !important;
    margin-bottom: 1.875rem !important;
}

.mt-50 {
    margin-top: 3.125rem !important;
}

.mt-16 {
    margin-top: 0.75rem !important;
}

.ml-36 {
    margin-left: 2.25rem !important;
}

.mb-8 {
    margin-bottom: 0.5rem !important;
}

.d-block {
    display: block !important;
}

.mr-48 {
	margin-right: 3rem !important;
}


/* || 6. SITEWIDE COMPONENTS*/

/* ===== Navbar ===== */

.header {
	padding: 0.3125rem 0.625rem;
}

@media (min-width: 992px) {
	.header {
		position: relative;
		width: 90%;
		box-shadow: unset;
	}
}

@media (max-width: 991px) {
	.header__nav {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		z-index: 1;
	}
}

.header__icons,
.header__links {
	padding: 0.625rem;
}

.header__links a:last-child {
	margin-right: -0.9375rem;
}

.header__icons-a {
    margin: 0.3125rem;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--XSmallFont);
}

.hide-for-desktop .header__icons-a {
	font-size: var(--Medium);

	margin: 0 16px;
}

.header__icons-a:last-child {
	margin-right: 0;
}

.header__logo__img,
.header__logo__hp, 
.footer__logo__img,
.header__logo-img {
    display: block;
    height: 60px;
}

@media (min-width: 992px) {

	.header__logo__img,
	.header__logo-img {
        height: 120px;
    }

    .header__logo__hp {
		position: absolute;
		top: 0;
		left: 0;
		height: 165px;
		z-index: 1000;
    }

	header {
		position: relative;
	}

	.header__logo__img__desktop {
		position: absolute;
		top: 0;
		left: 0;
		height: 165px;
		z-index: 1000;
	}

}

.header__menu__span__item,
.header__menu__span span,
.header__menu-span span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: black;
    margin-bottom: 0.1875rem;
}

.header__links__a,
.header__links-a,
.header__menu-text {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 0 0.625rem;
	padding: 0.0625rem 0.9375rem;
	font-family: 'Fira Sans Bold';
}

.header__menu-text {
	padding-right: 0;
	margin-left: 0;
}

.header__menu__span,
.header__menu-span {
    margin-bottom: -0.125rem;
}

.header__links__a > span,
.header__links-a > span {
	cursor: pointer;
}

@media (min-width: 992px) {
    .header__links__a,
	.header__links-a {
		margin: 0 4.375rem 0 0;
		transition: 0.2s;
		font-size: var(--LargeFont);
	}
}

.header__links__a:hover,
.header__links-a:hover {
    background-color: rgb(248, 149, 29); /* Orange */
    border-radius: 28px;
	color: #FFFFFF; /* White */
}


/* ===== Small Screen Menu ===== */

.has-fade {
	visibility: hidden;
}
  
@-webkit-keyframes fade-in {
	from {
		visibility: hidden;
		opacity: 0;
	}
	1% {
		visibility: visible;
		opacity: 0;
	}
	to {
		visibility: visible;
		opacity: 1;
	}
}
  
@keyframes fade-in {
	from {
		visibility: hidden;
		opacity: 0;
	}
	1% {
		visibility: visible;
		opacity: 0;
	}
	to {
		visibility: visible;
		opacity: 1;
	}
}
  
  .fade-in {
	-webkit-animation: fade-in 200ms ease-in-out forwards;
			animation: fade-in 200ms ease-in-out forwards;
  }
  
@-webkit-keyframes fade-out {
	from {
		visibility: visible;
		opacity: 1;
	}
	99% {
		visibility: visible;
		opacity: 0;
	}
	to {
		visibility: hidden;
		opacity: 0;
	}
}
  
@keyframes fade-out {
	from {
		visibility: visible;
		opacity: 1;
	}
	99% {
		visibility: visible;
		opacity: 0;
	}
	to {
		visibility: hidden;
		opacity: 0;
	}
}

.fade-out {
	-webkit-animation: fade-out 200ms ease-in-out forwards;
			animation: fade-out 200ms ease-in-out forwards;
}
  
    
.header.open .header__toggle > .header__menu__span > span:first-child,
.header.open .header__toggle > .header__menu-span > span:first-child {
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}

.header.open .header__toggle > .header__menu__span > span:nth-child(2),
.header.open .header__toggle > .header__menu-span > span:nth-child(2) {
	opacity: 0;
}

.header.open .header__toggle > .header__menu__span > span:last-child,
.header.open .header__toggle > .header__menu-span > span:last-child {
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
}

.header__toggle > .header__menu__span > span,
.header__toggle > .header__menu-span > span {
	display: block;
	width: 26px;
	height: 3px;
	background-color: #2d314d;
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	-webkit-transform-origin: 2px 2px;
			transform-origin: 2px 2px;
}

.header__toggle > .header__menu__span > span:not(:last-child),
.header__toggle > .header__menu-span > span:not(:last-child) {
	margin-bottom: 0.3125rem;
}

.header__menu-links {
	position: absolute;
	width: 100%;
	top: 99%;
	left: 50%;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
	background: rgb(247, 247, 235);
	padding: 1.625rem;

	display: flex; 
	justify-content: space-between; 
	align-items: center;
	flex-direction: column; 
	gap: 24px;
}

.header__menu-links p {
	line-height: 0;
}



/* .header__menu-links a,
.header__menu-links span {
	display: block;
	padding: 0.625rem;
	text-align: center;
} */

.header__menu-link {
	padding: 0.375rem;
}

.dropdwn-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	display: flex;
	flex-direction: column;
	font-size: 0.75rem; /* Small */

	display: flex; 
	justify-content: space-between; 
	align-items: center;
	flex-direction: column; 
	gap: 24px; 
}

.dropdwn__p {
	margin: 0 0.3125rem 0 0;
	cursor: pointer;
}

.mr-hov {
	margin-right: -0.9375rem;
}


/* ===== Desktop Dropdown Menu ===== */

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color:  #FFFFFF; /* White */
	min-width: 270px;
	z-index: 1;
	color: #212529; /* Dark Blue  */;
	border-radius: 0 0 10px 10px;
	padding-top: 2.1875rem;
	top: 105%;
    left: 0;
}
  
.dropdown-content a {
	padding: 0.75rem 1rem;
	text-decoration: none;
	display: block;
}
  
.dropdown-content a:hover {
	color: #F98C1E; /* Orange */
}
  
.dropdown:hover .dropdown-content {
	display: block;
}

.header-arrow {
	display: none !important;
}

.dropdown-content a:hover .header-arrow {
	display: inline-block !important;
}

.dropdown a {
	cursor: pointer;
}

.fixed-header {
	position: fixed;
	top: 0;
	width: 100%;
	margin: 0 auto;
	z-index: 9999;
	background-color: #fff; /* White */
	box-shadow: 0 7px 10px -6px rgb(205 205 205 / 55%);
	-webkit-box-shadow: 0 7px 10px -6px rgb(205 205 205 / 55%);
	-moz-box-shadow: 0 7x 10px -6px rgba(205,205,205,0.55);
}


/* ===== Footer ===== */

.footer {
	text-align: center;
	font-size: var(--XSmallFont);
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 3.125rem;
}

@media (min-width: 992px) {
	.footer {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		width: 90%;
		margin: 0.3125rem auto 0.625rem;
	}
}

.footer__section {
	padding: 0.625rem 0 0;
}

@media (min-width: 992px) {
	.footer__section:nth-child(1) {
		text-align: left;
		width: 25%;
	}
	.footer__section:nth-child(2) {
		width: 75%;
		text-align: right;
	}

	.footer__p {
		display: inline-block;
	}

	.logo--ct {
		display: unset;
	}
}

.footer__div {
	border-bottom: 1px solid #E86424; /* Dark Orange */
 	width: 90%;
	margin: 0.625rem auto 0;
}

.footer__div a {
	display: inline-block;
	margin-bottom: 0.5rem;
}

.footer__div--bd {
	border-bottom: unset;
}

.footer__div p {
	margin: 0.625rem;
}

.footer__text {
	text-transform: uppercase;
}

.logo--ct {
	margin: 0.3125rem auto;
	height: 60px;
}

.footer__wrapper {
	border-top: 2px solid #E3E3E3;
	margin-top: 48px;
}


/*===== Hero =====*/

.hero {
    background-position: center;
    background-size: cover;
    height: 45vh;
	min-height: 15rem;
    position: relative;
	margin-top: 4rem;
}

@media (min-width: 992px) {
	.hero {
		height: 65vh;
		min-height: 25rem;
	}
}