/*  	
	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 page Hero info styles
		- Domain page Hero image
			-Individual domain Hero images

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

	5. FOOTER STYLES 

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



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


/*Parakeet Line icons*/


/* Import Fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@400;700&family=Nunito:wght@400;800&family=Lato:wght@400;900&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&family=Rubik:wght@400;700&family=Ubuntu:wght@400;700&family=Roboto+Slab:wght@400;700&family=Kanit:wght@300;700&family=Arvo:wght@400;700&family=Quicksand:wght@400;700&family=Raleway:wght@400;800&display=swap');


* {
    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;
}

/* Small Section padding */
.block {
    padding: 64px 0;
    
}

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

.overlap {
    margin-top:-320px;
}
.overlap1 {
    margin-top:-140px;
}


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

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

.grey {
    background-color: #eeeeee;
}

.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;
}

.background_domains {
    background: url('../images/catalogue_blurred.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	

.background_domains_a {
    background: url('../images/decka.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	
.background_domains_b {
    background: url('../images/deckb.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	
.background_domains_c {
    background: url('../images/deckc.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	
.background_domains_d {
    background: url('../images/deckd.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	
.background_domains_e {
    background: url('../images/decke.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	
.background_domains_f {
    background: url('../images/deckf.jpg') no-repeat center top/cover;
	border-radius: 16px;
}	



/* 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;
}

h5 {
    font-size: 20px;
    font-weight: 400;
    text-transform: none;
    line-height: 32px;
    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 */
}


.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;
	margin-left: auto;
    margin-right: auto;
}

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

/* Case Study Buttons */

.btn-domain-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-domain-green {
    display: inline-block;
    color: #128616;
    border: 2px solid #128616;
    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;
}


/* Primary Button Styling */

.btn-primary {
    display: block;
    text-decoration: none;
    background-color: #128616;
    color: #ffffff;
    border: 2px solid #128616;
    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: #128616;
    border: 2px solid #128616;
    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 */
}
.btn-white {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border: 2px solid #ffffff;
    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-white:hover {
    background-color: #149e19;
    color: #ffffff;
	border: 2px solid #149e19;
}

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

.inline-button-primary {
    display: inline-block;
    background-color: #128616;
    color: #ffffff;
    border-radius: 24px;
    border: 2px solid #128616;
    font-size: 16px;
    font-weight: bold;
    width: 180px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.inline-button-secondary {
    display: inline-block;
	text-decoration: none;
    color: #128616;
    border: 2px solid #128616;
    border-radius: 24px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: fit-content;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  justify-content: center; /* 👈 centers the buttons horizontally */
}

.button-row-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* 👈 centers the buttons horizontally */
}

.button-row a {
  margin: 0; /* remove any vertical margin if your button classes had it */
}

.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: 40px;
    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%, #000 100%);
}

/* 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 */
}

.fixed_bottom {
    position: fixed; /* Ensure this is at the top */
    bottom: -40px; /* 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: #000000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.trans.scrolled {
    background: linear-gradient(90deg, #000 20%, #0090b5 182%); /* 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;
	text-align: 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: #128616;
    font-weight: bold;
    border-bottom: 4px solid #128616;
    display: inline-block;
}

.nav-links a.active {
    color: #128616;
    font-weight: bold;
    border-bottom: 4px solid #128616;
    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: #fff;
}

/* 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: 100px;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 1rem;
    z-index: 9999;
}

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

.trans.mobile-nav {
    background: url('../assets/images/mobile-nav-img.png') 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: 60px;
}

.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: #128616;
    font-weight: bold;
    border-bottom-color: #128616;
}

/* Domain Listing 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: 400;
    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: #128616;
}
/* Domain Listing pages have a Close button on the right hand top corner.*/
.top-button {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  background-color: #ffffff;
	  color: #5f6368;
	  border: none;
	  border-radius: 30px;
	  padding: 10px 16px;
	  font-size: 16px;
	  font-weight: bold;
	  line-height: 23px;
	  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
	  cursor: pointer;
	  z-index: 9999;
	  display: flex;
	  align-items: center;
	  gap: 8px;
	  text-decoration: none;
	  transition: background-color 0.3s ease, color 0.3s ease;
}

.top-button:hover {
    background-color: #ffffff;
    color: #128616;
}

.top-button img.up-icon {
  width: 32px;
  height: 32px;
  transition: filter 0.3s ease;
}

.top-button:hover img.up-icon {
  filter: brightness(0) saturate(100%) invert(37%) sepia(99%) saturate(692%) hue-rotate(79deg) brightness(90%) contrast(90%);
}

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


/* Hero Section */

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


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


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


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

}

.medium-hero {
    min-height: 640px;
    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.png') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.35); /* Dark color overlay */
    background-blend-mode: multiply; /* Blend the color with the image */
}

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

.domain-hero {
    background: url('../images/hero-image1.png') 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 */
}

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

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

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

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

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

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


.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 */

}

.header-with-back {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-with-back .back-link {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
  color: #0000ff;
}

.header-with-back .back-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}


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

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

/* 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: 87%;
    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 */	
}

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

.content-image-column-2 img {
    width: 100%;
    height: 87%;
    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 */
}

.round_avatar img {
    border-radius: 50%;
    max-width: 50%;
    height: 50%;
    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 */
}



/* General Card & Domain 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;
	min-width: 30%;
    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;
}



.category-link {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  display: block;
  text-decoration: none;
  color: inherit;
}

.category-link:hover .category-icon img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(99%) saturate(692%) hue-rotate(79deg) brightness(90%) contrast(90%);
}

.category-link:hover .category-icon p {
  color: #128616;
  font-weight: bold;
}

.category-container {
  position: relative;
  z-index: 999; /* Ensure it stays above content below */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.category-scroll {
  display: flex;
  overflow-x: auto;
  gap: 40px;
  scroll-behavior: smooth;
  padding: 10px 0;
  width: 100%;
  margin-left: 30px;
  margin-right: 30px;
  scrollbar-width: none;
}
.category-scroll::-webkit-scrollbar {
  display: none;
}

.category-scroll-2 {
  display: flex;
  justify-content: center; /* Center the content */
  flex-wrap: wrap; /* Allow wrapping if needed on smaller screens */
  gap: 40px;
  padding: 20px 0;
  width: 100%;
}


.category-icon {
  flex: 0 0 auto;
  text-align: center;
  width: 110px;
}

.category-icon img {
  width: 36px;
  height: 36px;
  margin-bottom: 0px;
}
.category-icon p {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.category-icon p:hover {
  color: #128616;
  font-weight: bold;
}


.category-link:hover img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(99%) saturate(692%) hue-rotate(79deg) brightness(90%) contrast(90%);
}



.chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  z-index: 1;
  /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);*/
}
.chevron img {
  width: 48px;
  height: 48px;
}

.chevron-left {
  left: 0px;
}

.chevron-right {
  right: 0px;
}


/* domain styles */

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

.domain-grid p {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 4px;
    text-align: center;
}

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

.domain-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 */
}

.domain-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 domain card */
.overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 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: 16px;
    font-weight: 400;
    margin-bottom: 6px;
    text-align: center;
}

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

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

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




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


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


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

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


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

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

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

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

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

.pagesite {
    background-image: url('../assets/1pagesite/1pagesite.png');
}

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

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

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

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

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

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

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

.dealfinda {
    background-image: url('../assets/dealfinda/dealfinda.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;
    }
    .nav-links, .header-button {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }


}


@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;
    }
	
    h3 {
        font-size: 28px;
        line-height: 42px;
    }
	
    p {
        font-size: 14px;
    }

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

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

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

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

    .card {
        padding: 20px;
    }

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

    .overlay {
        padding: 40px 20px 10px 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 (min-width: 769px) {
  .domain-meta-item:last-child {
    text-align: right;
  }
}


@media (max-width: 768px) {

    h3 {
        font-size: 24px;
        line-height: 36px;
    }

    .hero-homepage1 {
    	background: url('../images/hero-image1.jpg') no-repeat center center/cover;
   	background-color: rgba(0, 0, 0, 0.6); /* 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;
    }

    .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%;
    }

    .text-column h2 {
    font-size: 36px;
    margin-bottom: 2px;
    }
	
	form {
    flex-direction: column !important;
    }

    .content-text-column {
    width: 100%;
	}
	

}



@media (max-width: 600px) {

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

    h2 {
        font-size: 32px;
        line-height: 48px;
    }


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

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

    .about-hero-content {
        flex-direction: column; 
        align-items: center;
    }

     .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:-280px;
    }

  .domain-meta {
    flex-direction: column;
    gap: 8px;
  }
}


}

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






/* ===============================  5. FORM STYLES ================================== */


.form-columns {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}


.content-text-column label {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  font-size: 14px;
  color: #333;
}

.profile-image-placeholder {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: #f0f0f0;
  margin-bottom: 12px;
}

.form-actions {
  margin-top: 20px;
  text-align: center;
}


.content-text-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.content-text-column input,
.content-text-column select,
.content-text-column textarea {

  border: 1px solid #cccccc;
  border-radius: 8px; /* 👈 Adjust radius here */
  padding: 6px 10px;
  margin-bottom: 16px;
  color: #000;
  background-color: #fff;
  font-size: 16px;
}

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select select {
  appearance: none; /* Removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 40px;
  padding: 6px 40px 6px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
}

/* Custom arrow (chevron) */
.custom-select::after {
  content: '\25BE'; /* ▼ */
  position: absolute;
  right: 12px;
  top: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 32px;
  color: #333;
}


.listing-options {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.listing-card {
  cursor: pointer;
  transition: border 0.3s, box-shadow 0.3s;
  border: 2px solid transparent;
  border-radius: 16px;
}

input[type="radio"]:checked + .listing-card {
  border: 3px solid #128616; /* Green tick border */
  box-shadow: 0 0 8px rgba(18, 134, 22, 0.2);
}

.form-divider {
  border: none;
  border-top: 1px solid #e0e0e0; /* Light grey line */
  margin: 40px 0 24px;
  width: 100%;
}

.checkbox-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.checkbox-confirmation input[type="checkbox"] {
  transform: scale(1.4);
  margin-top: 3px;
  cursor: pointer;  
  margin-right: 10px;
}



/* 3-column domain meta strip */
.domain-meta-block {
  margin: 16px 0 24px;
}

/* top and bottom 1px lines in #D9D9D9 */
.domain-meta-block::before,
.domain-meta-block::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #D9D9D9;
}

.domain-meta-block::before {
  margin-bottom: 12px;
}

.domain-meta-block::after {
  margin-top: 12px;
}

.domain-meta-block1::before{
  content: "";
  display: block;
  height: 1px;
  background-color: #D9D9D9;
}

.domain-meta-block1::before {
	margin-top: 12px;
    margin-bottom: 12px;
}



.domain-meta {
  display: flex;
  gap: 20px;            /* adjust to taste */
}

.domain-meta-item {
  flex: 1;
  min-width: 0;
}

.domain-meta-label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #444;          /* light label colour */
  margin-bottom: 4px;
}

.domain-meta-value {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #000;          /* or your body text colour */
}








.password-gate {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.password-card {
  max-width: 480px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  padding: 10px 10px;
  text-align: center;
}

#access-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* NEW: wrapper for label + input so we can position the label inside */
.password-field {
  position: relative;
  width: 100%;
  text-align: left;
}

/* Hide label once the user types */


/* Label now sits inside the input field */
.password-field label {
  position: absolute;
  left: 12px;
  top: 40%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  pointer-events: none; /* clicks focus the input */
}

.password-field input:not(:placeholder-shown) + label {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Input styling stays the same */
#access-password {
  width: 100%;
  padding: 18px 12px;
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

#access-form button {
  display: block;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: #ffffff;
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 24px;
  margin-top: 8px;
  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;
}

#access-form button:hover {
  background-color: #149e19;
  color: #ffffff;
  border: 2px solid #149e19;
}

.access-message {
  margin-top: 6px;
  font-size: 14px;
  min-height: 18px;
}
.access-message.error {
  color: #ffffff;
  background: #d22c2c;
  padding: 12px 24px;
  border-radius: 4px;
}
.access-message.success {
  color: #ffffff;
  background: green;
  padding: 12px 24px;
  border-radius: 4px;
}