/*  	
	CONTENTS
	========

	1. GLOBAL & GENERAL STYLES
		- Typography & Global element style
		- Button styles

	2. HEADER & NAVIGATION STYLES
		- Header & Navigation
		- Mobile Navigation (Responsive included here)

	3. HERO STYLES 
		- Homepage Hero images & styles
		- About Me page Hero & CV info styles
		- My Work/ Case study page Hero image
			-Individual case study Hero images

	4. CONTENT LAYOUTS
		- Text & Image section layouts and styles
		- CV & Casestudy card styles
		- Logo and Text Grids

	5. FOOTER STYLES 

	6. RESPONSIVE STYLES 
		- 1366px
		- 1200px
		- 1024px
		- 768px
		- 600px 
  
*/



/* ===============================  1. GLOBAL & GENERAL STYLES ================================== */


/*Parakeet Line icons*/


/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

html {
  scroll-behavior: smooth;
}


body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #000000;
    background-color: #ffffff;
}

header {
    z-index: 100000;
}

.material-symbols-outlined {
  font-size: 40px;
  font-weight: 300;
  width: 40px; /* Optional, depending on design needs */
  height: 40px; /* Optional, depending on design needs */
}


/* Text alternative styles - use these in heros when you want the text white and centred*/

.white-text {
    color: #ffffff;
    text-align: center;
}

/* Global Section padding */
section {
    padding: 40px 0;
}
.white_space {
    padding: 120px 0;
}
/* Small Section padding */
.block {
    padding: 20px 0;
    background: #eee;
}

.extra-pad {
    padding: 0 20px;
}

.overlap {
    margin-top:-160px;
}

/* White Section Background */
.white {
    background-color: #ffffff;
}

/* Extra Section Background Colors - Add any color classes here as required eg. grey, blue */

.grey {
    background-color: #F0F0F0;
}

.blue {
    background-color: #0000ff;
}

/* Page Section Background Image -  Add other backgrounds to apply as required */
.background1 {
    background: url('../images/background-img1.png') no-repeat left top/cover;
}



/* Default TYPOGRAPHY Styles */
h1 {
    font-size: 64px;
    font-weight: bold;
    text-transform: none;
    line-height: 72px;
    color: #000000;
    text-align: center;
    margin-bottom: 2rem;
}

h2 {
    font-size: 40px;
    font-weight: bold;
    text-transform: none;
    line-height: 48px;
    color: #000000;
    text-align: left;
    margin-bottom: 1rem;
}

h3 {
    font-size: 32px;
    font-weight: bold;
    text-transform: none;
    line-height: 36px;
    color: #000000;
    text-align: left;
    margin-bottom: 1rem;
}

h4 {
    font-size: 18px;
    font-weight: bold;
    text-transform: none;
    line-height: 24px;
    color: #000000;
    text-align: left;
}

p {
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    color: #000000;
    line-height: 1.8;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

.small {
   font-size: 12px;
}

i {
    font-size: 14px;
    text-transform: none;
    color: #000000;
    line-height: 1.8;
    text-align: left;
}


ul, li {
    font-size: 16px; /* Or your default size */
}

ul {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 20px;
  text-align: left;
}

ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}


.indented-list {
    padding-left: 40px; /* Indent the whole list by 20px */
    margin-top: 20px;
    margin-bottom: 20px;
}

.center-text {
    text-align: center; /* Ensure text is centered */
}

.no-bottom-margin {
        margin-bottom: 0px;
}

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



/* Individual styling for labels & bold values */
.label {
    font-weight: normal;
    font-size: 14px;
}

.value {
    font-weight: bold;
    font-size: 16px;
}

/* Button Styles */

.btn-download {
    background-color: transparent;
    color: #fff;
    border-radius: 24px;
    border: 2px solid #fff;
    font-size: 16px;
    font-weight: bold;
    width: 194px;
    height: 48px;
    display: inline-block;
    text-align: center;
    line-height: 48px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 10px;
}

.btn-download:hover {
    background-color: #fff;
    color: #0d1b2a;
}

/* Case Study Buttons */

.btn-casestudy-white {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    border: 2px solid #fff;
    border-radius: 24px;
    padding: 8px 32px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 32px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-casestudy-green {
    display: inline-block;
    color: #005e00;
    border: 2px solid #005e00;
    font-weight: bold;
    border-radius: 24px;
    padding: 8px 32px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 32px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-white:hover {
    background-color: #fff;
    color: #333;
}

/* Primary Button Styling */

.btn-primary {
    display: block;
    text-decoration: none;
    background-color: #005e00;
    color: #ffffff;
    border: 2px solid #005e00;
    border-radius: 24px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 24px;
    margin-top: 48px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: fit-content;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
    background-color: #149e19;
    border: 2px solid #149e19;
    color: #ffffff;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3); /* Drop shadow */
}


.btn-secondary {
    display: block;
    text-decoration: none;
    color: #005e00;
    border: 2px solid #005e00;
    border-radius: 24px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 24px;
    margin-top: 48px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: fit-content;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #149e19;
    border: 2px solid #149e19;
    color: #ffffff;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3); /* Drop shadow */
}

/* Navigation Header Button (GET IN TOUCH) */
.header-button {
    display: inline-block;
    background-color: #005e00;
    color: #ffffff;
    border-radius: 24px;
    border: 2px solid #005e00;
    font-size: 16px;
    font-weight: bold;
    width: 194px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-links a.header-button:hover {
    background-color: #149e19;
    border: 2px solid #149e19;
    color: #ffffff;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3); /* Drop shadow */
}



/* ======================== 2. HEADER & NAVIGATION STYLES ================ */

.logo img {
    height: 60px;
    width: auto;
}

/* Logo Text - if you choose no image for logo */
.logo a {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    line-height: 48px;
    text-align: left;
    text-decoration: none;
}

.logo p {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.0;
    text-align: left;
}

/* Navbar - Default style */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    padding: 0 124px;
    position: relative;
    margin-bottom: 0px;
}



/* Navbar - Base color style */
.color {
    background: linear-gradient(90deg, #000 20%, #749ACE 162%);
}

/* Navbar - light gradient style */
.trans {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 10%, rgba(0, 0, 0, 0.0) 100%);
}

/* Navbar - Locked at top of page */
.fixed {
    position: fixed; /* Ensure this is at the top */
    top: 0; /* Added to ensure it stays at the top */
    left: 0; /* Added to ensure it stays at the left edge */
    right: 0; /* Added to ensure it stays at the right edge */
    z-index: 10000;
    transition: background 0.3s ease; /* Smooth transition for background change */
}

/* Navbar class for scrolled states */
.scrolled  {
    background: white; /* Change this to whatever color you want when the page is scrolled */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);  /* Adjust Drop shadow as required */
}

.color.scrolled {
    background: linear-gradient(90deg, #000 20%, #749ACE 162%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.trans.scrolled {
    background: #ffffff; /* Change this to whatever color you want when the page is scrolled */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
}


.nav-links li {
    margin-left: 48px;
}

/* Default Color nav-links */
.nav-links a {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    text-transform: uppercase;
    transition: color 0.3s ease;
}


.nav-links a.header-button {
    color: #ffffff;
}

.white ul li a {
    color: #fff;
}

.black ul li a {
    color: #000;
}


.nav-links a:hover {
    color: #005e00;
    font-weight: bold;
    border-bottom: 4px solid #005e00;
    display: inline-block;
}

.nav-links a.active {
    color: #005e00;
    font-weight: bold;
    border-bottom: 4px solid #005e00;
    display: inline-block;
}

.case-study-header {
    display: contents;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    transition: all 0.3s ease;
}

.hamburger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    height: 24px;
    position: relative;
    width: 30px;
    transition: all 0.3s ease;
}

.hamburger-menu span {
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.color .hamburger-menu span {
    background-color: #fff;
}

.trans .hamburger-menu span {
    background-color: #000;
}

/* Transformations for X Button ln the Mobile Hamburger Menu */
.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 8px);
}

.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -5px);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0px;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 1rem;
    z-index: 9999;
}

.color.mobile-nav {
    background: linear-gradient(90deg, #000 20%, #749ACE 162%);
}

.trans.mobile-nav {
    background: url('../images/mobile-nav-img.jpg') no-repeat center center/cover;
}

/* Prevent scrolling when mobile nav is open */
body.no-scroll {
    overflow: hidden;
}

.mobile-nav.open {
    display: block;
}

.mobile-nav ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin-top: 160px;
}

.mobile-nav ul li {
    margin: 2rem 0;
}

.mobile-nav ul li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.5rem 0;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 4px solid lightarent;
}


.mobile-nav ul li a.header-button {
    color: #ffffff;
    line-height: 28px;
}


.mobile-nav ul li a.active {
    color: #005e00;
    font-weight: bold;
    border-bottom-color: #005e00;
}




/* ===========================  3. HERO STYLES ==================== */


/* Hero Section */

.hero-homepage1 {
    background: url('../images/hero-image1.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.0); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.hero-homepage2 {
    background: url('../images/hero-image2.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.hero-homepage3 {
    background: url('../images/hero-image3.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.50); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.hero-homepage4 {
    background: url('../images/hero-image4.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.0); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.hero-homepage5 {
    background: url('../images/hero-image5.png') no-repeat center center/cover;
    background-color: rgba(255, 255, 255, 0.20); /* Dark color overlay */
    background-blend-mode: lighten; /* Blend the color with the image */
}

.hero-homepage6 {
    background: url('../images/hero-image6.jpg') no-repeat center center/cover;
    background-color: rgba(255, 255, 255, 0.60); /* Dark color overlay */
    background-blend-mode: lighten; /* Blend the color with the image */
}

.hero-homepage7 {
    background: url('../images/hero-image7.png') no-repeat center center/cover;
    background-color: rgba(255, 255, 255, 0.20); /* Dark color overlay */
    background-blend-mode: lighten; /* Blend the color with the image */
}


.hero-homepage8 {
    background: url('../images/hero-image8.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.02); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}


.hero-homepage9 {
    background: url('../images/hero-image9.png') no-repeat center center/cover;
    background-color: rgba(20, 50, 90, 0.90); /* Blue color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}


.hero-homepage10 {
    background: url('../images/hero-image10.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.0); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}


.hero-image-blocks {
    background: url('../images/hero-image-blocks.png') no-repeat center center/cover;
    background-color: rgba(255, 255, 255, 0.20); /* Dark color overlay */
    background-blend-mode: lighten; /* Blend the color with the image */
}

.hero-right {
    min-height: 1000px;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 124px;
}

.hero-left {
    min-height: 1000px;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 124px;
}

.hero-center {
    min-height: 1000px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0px;
}

.hero-content-50 {
    width: 55%;
    max-width: 1200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content-100 {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Small Hero Section Styles - About page, My Work page, CaseStudy pages, Contact page */
.small-hero {
    min-height: 400px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

}

.small1 {
    background: url('../images/hero-image-small.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.45); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.small2 {
    background: url('../images/hero-image-small2.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.my-work-hero {
    background: url('../images/hero-image-work.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.05); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}
.my-approach-hero {
    background: url('../images/hero-image-2.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.05); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

/* Casestudy Hero Section Styles - We've create 12 unique small hero images for your project/ casestudies. Add more as required. */

.casestudy1-hero {
    background: url('../casestudy1/casestudy1.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.45); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy2-hero {
    background: url('../casestudy2/casestudy2.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.5); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy3-hero {
    background: url('../casestudy3/casestudy3.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy4-hero {
    background: url('../casestudy4/casestudy4.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy5-hero {
    background: url('../casestudy5/casestudy5.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy6-hero {
    background: url('../casestudy6/casestudy6.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy7-hero {
    background: url('../casestudy7/casestudy7.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy8-hero {
    background: url('../casestudy8/casestudy8.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.55); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy9-hero {
    background: url('../casestudy9/casestudy9.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy10-hero {
    background: url('../casestudy10/casestudy10.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.5); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy11-hero {
    background: url('../casestudy11/casestudy11.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy12-hero {
    background: url('../casestudy12/casestudy12.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}
.casestudy13-hero {
    background: url('../casestudy13/casestudy13.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy14-hero {
    background: url('../casestudy14/casestudy14.jpg') no-repeat center center/cover;
    background-color: rgba(0, 94, 184, 0.5); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy15-hero {
    background: url('../casestudy15/casestudy15.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.65); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy16-hero {
    background: url('../casestudy16/casestudy16.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.65); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy17-hero {
    background: url('../casestudy17/casestudy17.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.65); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy18-hero {
    background: url('../casestudy18/casestudy18.jpg') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.65); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy19-hero {
    background: url('../casestudy19/casestudy19.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

.casestudy20-hero {
    background: url('../casestudy20/casestudy20.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.25); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

/* About Me/ CV Page - Hero Section Styles */
.about-hero {
    background: url('../images/hero-image-work.png') no-repeat center center/cover;
    min-height: 400px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: normal;
    padding-top: 50px;
}

.about-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: normal;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    color: white;
}

.about-hero h2 {
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    text-transform: none;
    line-height: 48px;

}

.about-hero p {
    color: #ffffff;

}

/* Avatar Section styling in the About/CV Hero details section */

.avatar-column {
    width: 25%;  /* 1/4 of the width */
    text-align: center;
}

.avatar-column img {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    width: 280px; /* You can adjust this value as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.text-column {
    width: 75%;  /* 3/4 of the width */
    padding-left: 20px;
}


.text-column h2 {
    font-size: 48px;
    margin-bottom: 2px;
}

.text-column p {
    font-size: 18px;
}




/* ======================================  4. CONTENT LAYOUTS ====================================== */

/* These are the options for laying out text and text & image content sections. These provide multiple variations of laying out text and images in rows. */

.content-header {
    max-width: 1200px;
    margin: 20px auto;
    text-align: center; /* Change to left as required */

}

.content-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
}

/* Text column */
.content-text-column {
    flex: 1;
    padding-right: 20px;
}

/* Wider variant of text column spanning 2/3 of the section width. Forces other column to 1/3 width */
.content-text-column-2 {
    flex: 2;
    padding-right: 20px;
}

/* Image column */
.content-image-column {
    flex: 1;
    max-width: 100%;
    position: relative;
    overflow: hidden; /* Ensures any overflow is hidden */
    aspect-ratio: 1 / 1; /* Ensures a square aspect ratio */
    text-align: center;
}

.content-image-column img {
    width: 100%;
    height: 90%;
    object-fit: cover; /* Ensures the image fits the container without distortion */
    border-radius: 8px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.content-image-column-noshadow img {
    width: 100%;
    height: 90%;
    object-fit: cover; /* Ensures the image fits the container without distortion */
    border-radius: 8px;
}


.box-shadow {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.round img {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    width: 90%; /* You can adjust this value as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}


.content-image-column-fullwidth {
    flex: 1;
    max-width: 100%;
    position: relative;
    overflow: hidden; /* Ensures any overflow is hidden */
}

.content-image-column-fullwidth img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the image fits the container without distortion */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.quote-image-column {
    flex: 1;
    max-width: 100%;
    position: relative;
    overflow: hidden; /* Ensures any overflow is hidden */
    aspect-ratio: 1 / 1; /* Ensures a square aspect ratio */
}

.quote-image-column img {
    width: 100%;
    height: 90%;
    object-fit: cover; /* Ensures the image fits the container without distortion */
}


/* These are the styles for laying out the Customer or Employer Logo sections. These provide multiple variations of laying out text and images in rows. */

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin: 32px 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.logo-boxed {
    width: calc(25% - 24px);
    min-width: 280px;
    height: 120px;
    border-radius: 16px;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.logo-nobox {
    width: calc(25% - 24px);
    min-width: 260px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Custom background color for logo box - add extra color classes as required */

.custom-background-1 {
    background-color: #FF6600;
}


/* General Card & Casestudy Card Styles */
/* These are the styles for General Cards along with Case Study cards sections. These provide multiple variations of laying out text and images in rows. */

.card {
    background-color: white;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 1200px;
    margin: 40px auto 0px auto;
    transition: box-shadow 0.3s ease-in-out;
}


/* Top row section in a card containing a title and company logo */
.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title h4 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
}

/* Use a borderless container instead of a card */
.container {
    padding: 28px;
    max-width: 1200px;
    margin: 40px auto 0px auto;
}

/* CaseStudy styles */

.casestudy-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligns items to the left */
    max-width: 1200px;
    margin: 32px auto;
    gap: 45px;
}

.casestudy-grid p {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
}

.casestudy-grid h4 {
    color: #fff;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 10px;
    text-align: center;
}

.casestudy-card {
    width: calc(33.33% - 30px);
    height: 515px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25); /* Initial shadow */
    transition: box-shadow 0.3s ease; /* Smooth transition for the glow effect */
}

.casestudy-card:hover {
    box-shadow: 0 0 15px 8px rgba(0, 0, 0, 0.25); /* Black glow effect */
    transition: box-shadow 0.3s ease; /* Smooth transition */
}


/* Overlay for casestudy card */
.overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 50%);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 80px 20px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align the text */
    justify-content: center;
}

.overlay2 {
    background: #ffffff;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 20px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align the text */
    justify-content: center;
}

.overlay2 p {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: center;
}

.overlay2 h4 {
    color: #000000;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 20px;
    text-align: center;
}

/* 
.casestudy-text {
    color: #fff;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 10px;
    text-align: center; /* Ensure text is centered */
}

.casestudy-text2 {
    color:#000;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 10px;
    text-align: center; /* Ensure text is centered */
}


/* Case Study pages have a Close button on the right hand top corner.*/
.close-button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    color: #000;
    border: none;
    border-radius: 50%;
    font-size: 35px;
    font-weight: bold;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.close-button:hover {
    background-color: #ffffff;
    color: #005e00;
}


/* This section allows you to modify the background image for each individual Case Study card. We've added 12 casestudies to get you started, but you can add more as you need. */


.casestudy1 {
    background-image: url('../casestudy1/casestudy1-1.jpg');
}


.casestudy2 {
    background-image: url('../casestudy2/casestudy2-1.jpg');
}

.casestudy3 {
    background-image: url('../casestudy3/casestudy3-1.jpg');
}


.casestudy4 {
    background-image: url('../casestudy4/casestudy4-1.jpg');
}

.casestudy5 {
    background-image: url('../casestudy5/casestudy5-1.jpg');
}

.casestudy6 {
    background-image: url('../casestudy6/casestudy6-1.jpg');
}

.casestudy7 {
    background-image: url('../casestudy7/casestudy7-1.jpg');
}

.casestudy8 {
    background-image: url('../casestudy8/casestudy8-1.jpg');
}

.casestudy9 {
    background-image: url('../casestudy9/casestudy9-1.jpg');
}

.casestudy10 {
    background-image: url('../casestudy10/casestudy10-1.jpg');
}

.casestudy11 {
    background-image: url('../casestudy11/casestudy11-1.jpg');
}

.casestudy12 {
    background-image: url('../casestudy12/casestudy12-1.jpg');
}
.casestudy13 {
    background-image: url('../casestudy13/casestudy13-1.jpg');
}


.casestudy14 {
    background-image: url('../casestudy14/casestudy14-1.jpg');
}

.casestudy15 {
    background-image: url('../casestudy15/casestudy15-1.jpg');
}

.casestudy16 {
    background-image: url('../casestudy16/casestudy16-1.jpg');
}

.casestudy17 {
    background-image: url('../casestudy17/casestudy17-1.jpg');
}

.casestudy18 {
    background-image: url('../casestudy18/casestudy18-1.jpg');
}

.casestudy19 {
    background-image: url('../casestudy19/casestudy19.png');
}

.casestudy20 {
    background-image: url('../casestudy20/casestudy20.png');
}

/* Text & Icon Grids help you layout text and icons variations into 3 or 4 columns. This is used in About/CV details section or in the My Skills, Work History, Education sections of the example templates */


.text-grid-2, .text-icon-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
    gap: 32px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 32px;
    text-align: left;
}

.text-grid-3, .text-icon-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 32px;
    text-align: left;
}

.text-grid-4, .text-icon-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal-width columns */
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 32px;
    text-align: left;
}
 
/* Styles for laying out Icon & Text inline eg Contact Details */

.contact-info {
    display: flex;
    align-items: center; /* Align icon and text vertically */
    gap: 8px; /* Space between icon and text */
    margin-bottom: 16px;
}

.contact-info .icon {
    width: 24px; /* Adjust the size of the icon */
    height: 24px; /* Adjust the size of the icon */
}



/* Icon and Text component used for Skills & Tools Section/Card */

.icon-text-container {
    display: flex; /* Align items in a row */
    align-items: flex-start; /* Align items at the start */
    margin-bottom: 20px; /* Optional: Space between each skill section */
}

.icon {
    margin-right: 10px; /* Space between the icon and the text */
}

.icon img {
    width: 40px; /* Adjust icon size as needed */
    height: 40px; /* Maintain aspect ratio */
}

.icon-text-title {
    margin: 0; /* Remove default margin */
    font-weight: bold; /* Example of differentiating style */
    color: #333; /* Example color for titles */
}

.icon-text-description {
    margin: 0; /* Remove default margin */
    padding-left: 0px; /* Indent the paragraph to align under the title */
}


/* Accordion Header */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

}

/* Accordion icon style */
.accordion-icon {
    font-size: 60px;
    font-weight: normal;
    line-height: 1; /* Ensures the icon stays aligned with the title */
    transition: transform 0.3s ease; /* Smooth transition for the icon */
    margin-left: 20px; /* Optional: Adds space between title and icon */
}

/* Accordion Content (Initially hidden) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}


/* ===============================  5. FOOTER STYLES ================================== */


footer {
    background-color: #f9f9f9;
    padding: 40px 0;
    border-top: 1px solid #dddddd;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 40px;
    flex-wrap: wrap;
}

.footer-logo {
    text-align: center;
}


.footer-logo img {
    height: 60px;
    width: auto;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-bottom: 1rem;
    justify-content: center;
}

.social-links a img {
    width: 36px;
    height: auto; /* Ensures correct aspect ratio */
}


.copyright {
    font-size: 14px;
    line-height: 18px;
    color: #666666;
    text-align: center;
}


/* Modal window styles*/

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    margin: 2% auto;
    padding: 0; /* We will apply padding inside the body and header/footer */
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px); /* Adjusted height */
    position: relative;
}

/* Modal Header (Sticky) */
.modal-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 16px 32px 0px 32px;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    border-bottom: 1px solid #eee;
    border-radius: 16px 16px 0 0;
}



.close-modal {
    position: absolute;
    top: 24px;
    right: 15px;
    color: #aaa;
    font-size: 48px;
    font-weight: 400;
    line-height: 32px;
    cursor: pointer;
    z-index: 10001; /* Ensure it's above other elements in the modal */
}

/* Modal Body (Scrollable) */
.modal-body {
    padding: 32px;
    overflow-y: auto;
    flex-grow: 1; /* Ensures the content grows and becomes scrollable */
}

/* Modal Footer (Sticky) */
.modal-footer {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 32px;
    text-align: center;
    border-top: 1px solid #eee;
    border-radius:  0 0 16px 16px;
}

/* Ensure the modal header/footer stay fixed and body content is scrollable */
.modal-body p {
    margin-bottom: 20px;
}




/* ===============================  6. RESPONSIVE STYLES ================================== */


@media (max-width: 1366px) { 
    .navbar {
        padding: 0 40px;
    }

    .hero-right {
        background-position: left center;
    }


}


@media (max-width: 1200px) {

    section {
        padding: 20px 20px;
    }

    h1 {
        font-size: 48px;
        line-height: 64px;
    }

    p {
        font-size: 14px;
    }

    ul, li {
        font-size: 14px;
    }

    .navbar {
        padding: 0 20px;
    }


    .nav-links, .header-button {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }


    .hero-right, .hero-left, .hero-center {
        padding-right: 20px;
        padding-left: 20px;
    }

    .hero-content-50, .hero-content-100 h1 {
        font-size: 48px;
    }

    .hero-content-50, .hero-content-100 p {
        font-size: 14px;
    }

    .text-grid-3,  .text-icon-grid-3 {
        grid-template-columns: repeat(2, 1fr); /* Changes to 2x5 grid */
        gap: 15px;
    }

    .text-grid-4, .text-icon-grid-4 {
        grid-template-columns: repeat(3, 1fr); /* Changes to 2x5 grid */
        gap: 15px;
    }

    .footer-container {
        padding: 0 20px;
    }

}


@media (max-width: 1024px) {

    h1 {
        font-size: 48px;
        line-height: 64px;
    }

    p {
        font-size: 14px;
    }

    .hero-right, .hero-left, .hero-center {
        padding-right: 20px;
        padding-left: 20px;
    }

    .hero-content-50, hero-content-100 {
        width: 66%;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 48px;
        line-height: 64px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .card {
        padding: 20px;
    }

    .casestudy-card {
        width: 100%;
        max-width: 380px;
        margin: 0 auto 26px auto;
    }

    .overlay {
        padding: 40px 20px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-logo, .footer-column {
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-logo img {
        margin: 0 auto;
    }

    .footer-column a {
        margin-bottom: 15px;
    }

}


@media (max-width: 768px) {


    .hero-homepage1 {
    	background: url('../images/hero-image4-mob.png') no-repeat center center/cover;
   	background-color: rgba(0, 0, 0, 0.0); /* Dark color overlay */
    	background-blend-mode: multiply; /* Blend the color with the image */
    }

    .hero-left {
        padding: 0 40px;
    }


    .hero-content-50, hero-content-100 {
        width: 100%;
        text-align: center;
		margin-top: 100px;
    }

    .text-grid-3, .text-grid-4 .text-icon-grid-3, .text-icon-grid-4 {
        grid-template-columns: (2, 1fr); /* Stacks into a single column */
        gap: 15px;
    }


   .text-grid-4 {
        grid-template-columns: repeat(2, 1fr); /* Changes to 2x5 grid */
        gap: 15px;
    }

    .content-section {
        flex-direction: column;
    }

    .content-text-column, .content-image-column {
        flex: 1;
        width: 100%;
        padding-right: 0px;
    }

    .text-column h2 {
    font-size: 36px;
    margin-bottom: 2px;
    }

}



@media (max-width: 600px) {

    .hero-left {
        padding: 0 20px;
    }

    .about-hero-content {
        flex-direction: column; /* Stacks the avatar and text column vertically */
        align-items: center;
    }

    .avatar-column {
        width: 100%;
        text-align: center; /* Keeps avatar centered */
        margin-bottom: 20px; /* Adds spacing below avatar */
    }

    .content-section {
        flex-direction: column;
        text-align: center;
    }

    .content-image-column {
        margin-top: 20px;
    }

    .text-column {
        width: 100%; /* Text column takes full width */
        padding-left: 0;
    }

    .text-grid-2, .text-icon-grid-2, .text-grid-3, .text-icon-grid-3, .text-icon-grid-4 {
        grid-template-columns: 1fr; /* Stacks into a single column */
        gap: 15px;
    }

    .overlap {
        margin-top:-100px;
    }


}

@media (max-width: 500px) {
    .card-top-row {
        flex-direction: column;
        align-items: center;
    }
}