/* ===== Base Styles ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", sans-serif;
  color: #fff;
/*  background: #363636; */
  background: #000;
}

/* ============================================================================================================================ */
/* ============================================================================================================================ */
/* =====                                              WEBPAGE - DESKTOP FULL SCREEN                                       ===== */
/* ============================================================================================================================ */
/* ============================================================================================================================ */

/* =========================================== */
/* =====    NAVIGATION ROW | BUTTON      ===== */
/* =========================================== */

nav {
  width: 100%;
  background: #161616; 					/* #1c1818 */
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 60px 0 0;   				/* NEW ? pushes navigation 60px from right */
  height: 100px;
  position: fixed; 		
  Top:0;			
  left:0;			
  z-index: 1000;
  border-bottom: 1px solid #d4af37;
}



/* Add padding-top to body so content isn't hidden under nav */

.page-content {
  padding-top: 80px; 					/* slightly more than nav height */
}



/* =========================================== */
/* =====              LOGO               ===== */
/* =========================================== */


/*** Container for the Logo and Symbol row ***/

.logo-row {
  display: flex;					/* Its direct children (logo, symbol, etc.) are laid out in a row by default */
  align-items: center; 					/* Controls vertical alignment of the children along the cross-axis. Vertically centers the logo and symbol relative to each other */
  gap: 0px;          					/* Controls the space between flex items, such as Logo and Symbol */
}

/*** Holder for Logo image ***/

.logo-img {
  height: 90px;
  width: auto;						/* Automatically calculates width based on the image’s natural aspect ratio */
  display: block;					/* Changes the image from its default inline behavior to a block-level element. Removes unwanted inline spacing (like descender gaps) */
  opacity: 1;						/* Sets the image to fully visible, 1 = 100% opacity */
}

/***  Holder for Symbol ***/

.symbol-img {
  height: 90px; 
  width: auto;
  margin-left: 10px;
  /* margin-bottom: 1rem; */
  border: 0px solid #fff;
  opacity: 1;
  z-index: 100000;
}

/* =========================================== */
/* =====          TEXT COLOURING         ===== */
/* =========================================== */


.gold-emboss {
  font-size: 90px;
  font-weight: 900;
  background: linear-gradient(
    45deg,
    #fff7c2,
    #d4af37,
    #9c7c19,
    #f9e784
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.6);
}

/* ----------------------------------------- */

.gold-classic {
  font-size: 90px;
  font-weight: 900;
  color: #D4AF37; 				/* classic gold */
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.35), 	/* subtle highlight */
    0 3px 6px rgba(0, 0, 0, 0.6);        	/* depth */
}

/* ----------------------------------------- */

.gold-classic-metal {
  font-size: 90px;
  font-weight: 900;
  background: linear-gradient(
    to bottom,
    #F5E6A8, 					/* light gold highlight */
    #E6C35C  					/* classic light gold */
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.35), 		/* subtle shine */
    0 3px 6px rgba(0,0,0,0.7);      		/* depth */
}

/* ----------------------------------------- */

.gold-classic-metalx {
  font-size: 90px;
  font-weight: 900;
  background: linear-gradient(
    to bottom,
    #FFE9A3, 					/* light gold highlight */
    #E3B84F  					/* rich classic gold */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.30), 		/* soft shine */
    0 3px 6px rgba(0,0,0,0.65);     		/* depth */
}

/* ----------------------------------------- */

.gold-engraved {
  font-size: 90px;
  font-weight: 900;
  background: linear-gradient(
    to bottom,
    #D9AF45,
    #B8942E
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(0,0,0,0.75),     		/* top cut */
    0 -1px 0 rgba(255,255,255,0.25); 		/* bottom edge */
}

/* ----------------------------------------- */

.gold-engravedx {
  font-size: 90px;
  font-weight: 900;
  background: linear-gradient(
    to bottom,
    #FFF1B8, /* light gold shine */
    #E6C35C, /* classic gold */
    #C9A23A  /* inner depth */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

text-shadow:
/*    0 1px 0 rgba(0,0,0,0.7),      		engraved top edge */
/*    0 -1px 0 rgba(255,255,255,0.35),  	inner light catch */
/*    0 2px 6px rgba(0,0,0,0.6);      		depth */

    0 1px 0 rgba(255,255,255,0.75), 		/* top highlight (surface edge) */
    0 -1px 0 rgba(0,0,0,0.35),      		/* inner cut */
    0 3px 6px rgba(0,0,0,0.25);     		/* depth */
}

/* ----------------------------------------- */

.gold-engravedxx {
  font-size: 90px;
  font-weight: 900;
  Color: #171203; 				/* Color: #403c30; #E8DCC5; */
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

text-shadow:
    0 1px 0 rgba(255,255,255,0.75), 		/* top highlight (surface edge) */
    0 -1px 0 rgba(0,0,0,0.35),      		/* inner cut */
    0 3px 6px rgba(0,0,0,0.25);     		/* depth */
}

/* ----------------------------------------- */

.gold-engravedxx2 {
  font-size: 90px;
  font-weight: 900;

  background: linear-gradient(
    to bottom,
    #FFFBE8 0%,
    #FFE9A3 12%,
    #F6D46B 25%,
    #E3B94C 48%,
    #CFA63A 70%,
    #B38A1F 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(0,0,0,0.25),
    0 -1px 0 rgba(255,255,255,0.8),
    0 4px 8px rgba(0,0,0,0.6);
}

/* ----------------------------------------- */

.gold-engravedxxx {
  font-size: 90px;
  font-weight: 900;
  background: linear-gradient(
    to bottom,
    #FFF7D6,   					/* very light gold highlight */
    #F0D77A,   					/* light warm gold */
    #CFA63A    					/*  engraved depth */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(0,0,0,0.2),        /* engraved top cut */
    0 -1px 0 rgba(255,255,255,0.45),/* strong light catch */
    0 3px 6px rgba(0,0,0,0.65);      /* depth */
}

/* ------- */
/* Gold    */
/* ------- */

:root {
  --gold-light: #ffe9a3;
  --gold-main:  #d4af37; /* classic gold */
  --gold-dark:  #9c7c19;
}

.gold-text {
  color: var(--gold-main);
  text-shadow: 0 0 0.5px rgba(255, 215, 120, 0.6);
}

.gold-text-grad {
  background: linear-gradient(
    45deg,
    var(--gold-light),
    var(--gold-main),
    var(--gold-dark)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========================================================================================================================== */
/* ========================================================================================================================== */
/* =====  				       HORIZONGTAL & VERTICAL NAVIGATION BUTTONS				===== */
/* ========================================================================================================================== */
/* ========================================================================================================================== */


/* ================================================================================== */
/* ===== HORIZONGTAL NAVIGATION - 1st level horizontal			       	===== */
/* ================================================================================== */

.nav {
  list-style: none;					/* list-style: none; is a CSS rule that removes the default bullets or numbering from list items. */
  display: flex;					/* display:flex makes the items stay aligned horizontally — even with different content sizes */
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;    			/* Missing */
}

.nav > li {
  position: relative;					/* This ensures the dropdown appears directly under its corresponding menu item - not the whole page, like top-left of the page */
}

/* ================================================================================== */
/* ===== HORIZONGTAL NAVIGATION - 1st level horizontal, click button 		===== */
/* ================================================================================== */

.nav > li > a {						
  display: block;					/* Means the <a> element behaves like a block-level element instead of the default inline element. The entire area becomes clickable. */
  padding: 14px 16px;
  color: #ffe9a3;					/* #d4af37; */				
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* ================================================================================== */
/* ===== HORIZONGTAL NAVIGATION - 1st level horizontal, button hover	  	===== */
/* ================================================================================== */

.nav > li > a:hover {
  background: #9c7c19; /* #007bff;  */
  color: #ffe9a3;
  border: 1px solid #ffe9a3;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.25);
  border-radius: 6px;		/* Missing */
  transform: scale(1.05);
}

/* ================================================================================== */
/* ===== VERTICAL NAVIGATION - 2nd, 3rd Sub-Menu Levels     		       	===== */
/* ================================================================================== */


/* ===== 2nd Level Submenu ===== */

.nav li ul {
  position: absolute;					/* Allows dropdown menus to overlay other content */
  top: 100%;						/* Places the submenu directly below its parent menu item - 100% means "the full height of the parent element". */
  left: 0;						/* Aligns the submenu's left edge perfectly with the parent button’s left edge. */
  list-style: none;					/* Removes default bullets from submenu list items. */
  /* background: #363636; */				/* Background colour of 2nd Level Sub Menu */
  display: none;					/* Hides the submenu by default. It only becomes visible when:the parent is hovered (:hover) or opened by JavaScript in mobile (.open) */
  min-width: 200px;
  padding: 30px 0 0 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 0px solid #ddd;	/* Missing */

}

.nav li ul li {
  position: relative;					/* This ensures the dropdown appears directly under its corresponding menu item - not the whole page, like top-left of the page */
}

/* ================================================================================== */
/* ===== VERTICAL NAVIGATION - 2nd,3rd Level Submenu, click button 	       	===== */
/* ================================================================================== */

.nav li ul li a {					
  display: block;					/* Means the <a> element behaves like a block-level element instead of the default inline element. The entire area becomes clickable. */
  padding: 12px 16px;
  background: #000000;					/* button background colour - 2nd Sub-Menu Level, 3rd Sub-Menu Level */
  color: #d4af37;					/* button text colour - 2nd Sub-Menu Level, 3rd Sub-Menu Level */
  text-decoration: none;
  margin: 0px 0px;
  border: 1px solid #d4af37;
  font-size: 15px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* ================================================================================== */
/* ===== VERTICAL NAVIGATION - 2nd, 3rd Level Submenu, button hover   	       	===== */
/* ================================================================================== */

.nav li ul li a:hover {				 /* Clickable Button - Hover */
  background: #9c7c19;
  color: #ffe9a3;
  border-radius: 0px;
  border: 1px solid #ffe9a3;
  transform: scale(1.05);
}

/* ================================================================================== */
/* ===== VERTICAL NAVIGATION - 3rd Level Submenu, Button Size 	       	       	===== */
/* ================================================================================== */

.nav li ul li ul {
  top: 0;
  left: 100%;
  min-width: 200px;
  border: 0px solid #ddd;
  display: none;
}

.nav > li > a:hover,
.nav li ul li a:hover {
  font-weight: 500;
}

/* ================================================================================== */
/* ===== VERTICAL NAVIGATION - 2nd,3rd Submenu Level, opens down & left       	===== */
/* ================================================================================== */

@media (min-width: 901px) {

  /* 2nd level opens downward */
  .nav li ul {
    left: 0;
  }

  /* 3rd level opens to the left */
  .nav li ul li ul {
    left: -100%;
    right: auto;
    top: 0;
  }

  .nav li ul li:hover > ul {
    top: 0;
  }
}


/* ================================================================================= */
/* ======   VERTICAL NAVIGATION - DESKTOP FULL SCREEN | Sub-Menu Visibility	==== */
/* ================================================================================= */

/* Show second-level submenu ONLY for hovered top-level li */
.nav > li:hover > ul {
  display: block;
}

/* Show third-level submenu ONLY for hovered second-level li */
.nav li ul > li:hover > ul {
  display: block;
}

/* Show submenu when JS applies class (desktop hover JS assist) */
.nav > li.open-hover > ul {
  display: block;
}

.nav li ul > li.open-hover > ul {
  display: block;
}

/* Mobile accordion behavior */
.nav li.open > ul {
  display: block;
}

/* ========================================================================================================================== */
/* ========================================================================================================================== */
/* =====  						SLIDESHOW CONTAINER						===== */
/* ========================================================================================================================== */
/* ========================================================================================================================== */


.slideshow-container {
margin-top: 0px;
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

/* ================================================================================== */
/* =====  SLIDESHOW CONTAINER - Slides 						===== */
/* ================================================================================== */
.slide {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}
										
/* ================================================================================== */
/* =====  SLIDESHOW CONTAINER - Slides images fade-in 				===== */
/* ================================================================================== */

.slide img {
  width: 100%;
  height: 300px; /* max height */
  object-fit: cover;
  opacity: 0.3;               /* start transparent */
  transition: opacity 1.5s ease; /* fade-in duration */
}

/* ================================================================================== */
/* ===== SLIDESHOW CONTAINER - When slide is active, fade in image 		===== */
/* ================================================================================== */

.slide.active img {
  opacity: 1;
}

/* ================================================================================== */
/* ===== SLIDESHOW CONTAINER - Overlay text 					===== */
/* ================================================================================== */
.slide-text {
  position: absolute;
  top: 80%;          /* vertically center */
  left: -100%;       /* start off-screen left */
  transform: translateY(-50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px;
  background: rgba(0,0,0,0.5); /* optional background for readability */
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: left 1.5s ease, opacity 1.5s ease;
}

/* When slide is active, animate text in */
.slide.active .slide-text {
  left: 20px; /* final position inside slide */
  opacity: 1;
}

/* SlideShow Dots */
.dots {
  text-align: center;
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  display: inline-block;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.active {
  background-color: white;
}

/* ================================================================================== */
/* ===== SLIDESHOW CONTAINER: Floating boxes wrapper 				===== */
/* ================================================================================== */

.floating-boxes {
  position: absolute;
  top: 60%;
  right: 100px;                   /* distance from right */
  transform: translateY(-50%);    /* center vertically */
  display: flex;
  gap: 20px;                      /* space between the two boxes */
}

/* ================================================================================== */
/* ===== Individual floating box 						===== */
/* ================================================================================== */
.floating-box {
  background-color: rgba(0, 0, 0, 0.7); /* semi-transparent black */
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 180px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Floating Box heading */
.floating-box h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

/* Floating Box link */
.floating-link {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background-color: #00aaff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.floating-link:hover {
  background-color: #0088cc;
}

/* ========================================================================================================================== */
/* ========================================================================================================================== */
/* ===== 4 x BOXES													===== */
/* ========================================================================================================================== */
/* ========================================================================================================================== */

.boxes-container {
  margin: 0px 0;
  padding: 20px;
  background-color: #111;       /* dark section background */
  border-radius: 0px;
  box-shadow: 0 0px 0px rgba(0,0,0,0.6);
}

/* The row inside the container */
.box-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* ================================================================================== */
/* ===== Individual box 							===== */
/* ================================================================================== */

.box p {
  margin-bottom: 22px; 							/* space above the link */
}

.box {

  background-color: #222;
  border-radius: 0px;
  box-shadow: 0 0px 0px rgba(0,0,0,0.6);
  flex: 1;
  text-align:Left;
  color: #fff;
  padding-bottom: 70px; 						/* 20px + button height buffer */

  display: flex;             						/* enable flexbox */
  flex-direction: column;    						/* stack children vertically */
  position: relative;        						/* needed for bottom anchoring if you prefer absolute */

}

/* Ensure images stack correctly */
.box img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  animation: fadeInOut var(--flash-duration, 4s) ease-in-out infinite;
}

/* Optional: stagger animations slightly for a softer effect */
.box:nth-child(1) img { animation-delay: 0s; }
.box:nth-child(2) img { animation-delay: 0.5s; }
.box:nth-child(3) img { animation-delay: 1s; }
.box:nth-child(4) img { animation-delay: 1.5s; }

/* ================================================================================== */
/* ===== Fade animation 							===== */
/* ================================================================================== */


@keyframes fadeInOut {
  0% {
    opacity: 0.3;
  }
  25% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}


/* ================================================================================== */
/* ===== Box links 								===== */
/* ================================================================================== */

.box-link {
  position: absolute;
  bottom: 30px;            		/* fixed distance from bottom */
  left: 50%;
  transform: translateX(-50%);

  margin-top: 22px;        		/* minimum distance from text */

  padding: 8px 10px;
  background-color: #000000; 		/* #d4af37, #4f4f4f; */
  border: 1px solid #d4af37;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;

  Color: #f4e3a1; 						/* Color: #403c30; #E8DCC5; */
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;

  text-shadow:
  0 1px 0 rgba(255,255,255,0.75), 				/* top highlight (surface edge) */
  0 -1px 0 rgba(0,0,0,0.35),      				/* inner cut */
  0 3px 6px rgba(0,0,0,0.25);     				/* depth */


}
.box-link:hover { 
  background-color: #9c7c19;
  border: 1px solid #d4af37;
}

/* ======================================================================================================================== */
/* ======================================================================================================================== */
/*                                                       WEB PAGE - NAVIGATION PAGES                                        */
/* ======================================================================================================================== */
/* ======================================================================================================================== */


/* ================================================================================== */
/* ===== WEB PAGE - Two-Column Layout: Text Left + Image Right			===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: the code shown here mainly controls the overall page/section container, its background, height, layout direction, and text colour. */

/***        MAIN PAGE CONTAINER      ***/

.text-img-page {

  background: url("bg_goldx.png") no-repeat center center/cover;

  background-attachment: fixed; 					/* Makes the background image stay fixed while the content scrolls */
  min-height: 100vh;							/* Ensures the section is at least the full viewport height; Even if content is small, the section fills the screen */
  display: flex;							/* Turns the container into a flex container */
  flex-direction: column;						/* Stacks child elements vertically */

  background-color: #000000;
  color: #d3d3d3;
  position: relative;
}

/* ================================================================================== */
/* ===== WEB PAGE - BACKGROUND IMAGE - DARKENING OVERLAY			===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This code creates a semi-transparent black overlay over the background image of .text-img-page.*/

.text-img-page::before {						/* Creates an extra layer on top of the background image */					
  content: "";
  position: absolute;

  top: 0;								/* Full-size overlay */
  left: 0;								/* Full-size overlay */
  width: 100%;								/* Full-size overlay */
  height: 100%;								/* Full-size overlay */

  background: rgba(0,0,0,0.6); 						/* Black overlay with 60% opacity */
  z-index: 0;								/* Places the overlay above the background */
}

/* ================================================================================== */
/* ===== WEB PAGE - CONTENT WRAPPER - ABOVE THE DARK OVERLAY			===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS styles the .content-row inside .text-img-page. Its main purpose is to create the horizontal content area containing the text and image, 	*/
/*       while ensuring that the content sits above the dark overlay.												*/


/*.text-img-page .content-row {			*/		/* Add a Content Wrapper - Content Above the Overlay */
/*  flex: 1;					*/		/* Allows .content-row to grow and fill available vertical space. Useful when the parent (.text-img-page) is a flex container*/
/*  display: flex;				*/		/* Turns .content-row into a flex container. Its direct children (text + image columns) will align in a row */
/*  align-items: flex-start;			*/		/* Other options: center; or flex-end; */
/*  margin-top: 100px;				*/		/* Pushes the content down from the top*/
/*  justify-content: space-between;		*/		/* Pushes the first child to the left; Pushes the last child to the right; Creates space between columns */
/*  gap: 40px;					*/		/* Adds space between flex items */
/*  padding: 20px;				*/		/* Adds internal spacing */
  
/*  position: relative;				*/		/* Required so z-index works */
/*  z-index: 1;					*/		/* Places content above the dark overlay */

/*  border: 0px solid #fff;			*/
/*}						*/

/* LEFT TEXT AND RIGHT IMAGE CENTERED ON THE PAGE */
.text-img-page .content-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 20px 40px;
    position: relative;
    z-index: 1;
    border: 0;
}


/* ================================================================================== */
/* ===== LEFT TEXT BOX - LAYOUT - SIZING & SLIDE-IN ANIMATION			===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS controls the left-hand text box within your .text-img-page. It defines its size, spacing, appearance, and—most importantly—adds a slide-in animation 	*/
/*       from the left when the page loads.																*/

.text-img-page .text-box {
  flex: 1;							/* Allows .text-box to grow and shrink within its flex container */
  max-width: 800px;
  background: rgba(0,0,0,0.0); 					/* bg */
  padding: 0px;
  border-radius: 10px;
  margin: 0 auto;
/*  margin-left: clamp(20px, 10vw, 200px); */			
/* Automatically adapts spacing across screen sizes: Minimum left margin: 20px, Preferred value: 10vw (10% of viewport width), Maximum margin: 200px */
  border: 0px solid #fff;


  /* Slide in from left */

  opacity: 0;							/* Text starts invisible */
  transform: translateX(-100px);				/* Positioned 100px to the left */
  animation: slideInLeft 1.2s ease forwards;			/* Easing: ease (smooth acceleration & deceleration); forwards: keeps final state after animation finishes */
}

/* ================================================================================== */
/* ===== LEFT TEXT BOX - H1 HEADING - TYPOGRAPHY & GOLD GRADIENT EFFECT 	===== */
/* ================================================================================== */
/* CSS CODE DESCRIPTION */
/* NOTE: This CSS controls the H1 heading inside the left text box. 	*/


.text-img-page .text-box h1 {					/* Targets <h1> headings inside .text-box, which itself is inside .text-img-page. */
  font-family: 'Inter', sans-serif; 				/* Falls back to the browser’s default sans-serif if Inter isn’t available */
  font-weight: 600; 						/* font-weight: 900; */
  font-size: clamp(1.6rem, 6vw, 4rem); 				/* font-size: clamp(1.6rem, 5vw, 3rem); */
  line-height: 1.6;						/* Tight vertical spacing between lines */
  margin-top: 0px;						/* Removes default browser spacing */
  margin-bottom: 1.2rem;					/* Adds spacing below the heading */
  text-align: left;
  Color: #161616; 						/* #171203; #403c30; #E8DCC5; */

  background: linear-gradient(
    to bottom,
    #FFF7D6, 							/* very light gold highlight */
    #F0D77A, 							/* light warm gold */
    #CFA63A  							/* engraved depth */
  );
  -webkit-background-clip: text;				/* only the text is filled with the gradient */
  -webkit-text-fill-color: transparent;				/* makes the text itself invisible, showing the gradient */


  text-shadow:
    0 1px 0 rgba(255,255,255,0.82), 				/* Simulates light hitting the top surface */
    0 -4px 0 rgba(255,255,255,0.0),      			/* Adds carved / embossed, dark inner shadow: 	Horizontal offset (X-axis), Vertical offset (Y-axis), Blur radius */
    0 3px 8px rgba(0,0,0,0.7);     				/* Soft shadow beneath text:  			Horizontal offset (X-axis), Vertical offset (Y-axis), Blur radius */

}

/* ================================================================================== */
/* ===== LEFT TEXT BOX - p - Paragraphs 					===== */
/* ================================================================================== */

.text-img-page .text-box p {
  text-align: left;
  margin: 0 0 1.0em 0; 						/* relative spacing */
  font-size: clamp(0.7rem, 1.5vw, 0.9rem); 			/* flexible font size */
  line-height: 1.6; 						/* better readability */
  Color: #171203; 						/* Color: #403c30; #E8DCC5; #171203; 	*/
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;

/*text-shadow:
/*  0 1px 0 rgba(255,255,255,0.75), 	*/			/* top highlight (surface edge) */
/*  0 -1px 0 rgba(0,0,0,0.35),      	*/			/* inner cut */
/*  0 3px 6px rgba(0,0,0,0.25);     	*/			/* depth */
}


/* Reuse Learn More button */
.text-img-page .box-link {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 15px;
  background-color: #00aaff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}
.text-img-page .box-link:hover {
  background-color: #0088cc;
}

/* ================================================================================== */
/* ===== Right: Image box							===== */
/* ================================================================================== */

.text-img-page .image-box {
  flex: 1;								/* Allows .image-box to grow and fill available vertical space. Useful when the parent (.text-img-page) is a flex container*/
  display: flex;							/* Turns .image-box into a flex container. Its direct children will align in a row */

  justify-content: center;						/* In a row layout ? centers items horizontally; In a column layout ? centers items vertically */
  align-items: flex-start;						/* Other options: center; or flex-end; */
  margin-right: clamp(20px, 10vw, 200px); 				/* Min: 20px, Preferred: 15vw, Max: 200px */
  border: 0px solid #fff;
  border-radius: 10px;


  /* Slide in from right */
  opacity: 0;
  transform: translateX(100px);
  animation: slideInRight 1.2s ease forwards;
  animation-delay: 0.4s; 						/* appear slightly after text */
}

/* ================================================================================== */
/* ===== Right: Image 								===== */
/* ================================================================================== */

.text-img-page .image-box img {						/* Targets all <img> elements inside .image-box, which is itself inside .text-img-page */
  width: 100%;								/* image will try to fill 100% of its parent container’s width */
  max-width: 400px;
  border-radius: 10px;
  object-fit: contain; 							/* the entire image fits inside its container without cropping; cover would fill the container fully but crop edges */
  object-position: top;							/* Positions the image starting from the top inside its container */

  box-shadow: 0 0px 0px rgba(0,0,0,0.0);
  opacity: 0.3;
}

/* ================================================================================== */
/* ===== Keyframe Animation 							===== */
/* ================================================================================== */

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================================================================================================== */
/* ========================================================================================================================== */
/* =====  MOBILE - RESPONSIVE LAYOUT: TABLETS & MOBILE   								===== */
/* ========================================================================================================================== */
/* ========================================================================================================================== */

/* CATEGORY 1: PAGE STRUCTURE - LAYOUT CONTAINER & CONTENT (5) */

/* CATEGORY 1: PAGE STRUCTURE */
/* ================================================================================== */
/* ===== MOBILE - RESPONSIVE LAYOUT: STACK CONTENT BOXES VErTICALLY (=1024px) 	===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code creates a responsive mobile/tablet layout adjustment for pages that contain text and image sections. It applies only when the screen width is 900px or smaller. */
/* NOTE: This code ensures that a row of boxes becomes a mobile-friendly vertical stack (flex-direction: column;) on smaller screens. */
/* NOTE: Desktop: Boxes appear side-by-side.*/
/* NOTE: Tablet/mobile: Boxes stack vertically and fill the available screen width.*/

@media (max-width: 1024px) {
  .box-row {
    flex-direction: column;
  }
  .box {
    width: 100%;
  }
}

/* CATEGORY 1: PAGE STRUCTURE */
/* ================================================================================== */
/* ===== MOBILE . RESPONSIVE LAYOUT: TEXT & IMAGE PAGES (=900px)		===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code creates a responsive mobile/tablet layout adjustment for pages that contain text and image sections. It applies only when the screen width is 900px or smaller. */
/* NOTE: Stacks content vertically; Centers text; Removes animations; Removes transforms; Resizes images */


@media (max-width: 900px) {
  .text-img-page .content-row {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .text-img-page .text-box {
    max-width: 100%;
    animation: none; 			/* disable animation for simplicity on small screens */
    opacity: 1;
    transform: none;
  }
  .text-img-page .image-box {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .text-img-page .image-box img {
    max-width: 100%;
  }
}

/* CATEGORY 1: PAGE STRUCTURE */
/* ================================================================================== */
/* ===== MOBILE - RESPONSIVE LAYOUT: STACK & CENTRE CONTENT (=900px) 		===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code creates a responsive mobile/tablet layout for text-and-image pages when the screen width is 900px or smaller. */
/* NOTE: This CSS block transforms a desktop text + image landing page into a mobile-friendly layout. */

@media (max-width: 900px) {

  .text-img-page .content-row {
    flex-direction: column;      /* Stack items vertically */
    align-items: center;         /* Center horizontally */
    justify-content: flex-start; /* Keep default vertical flow */
    padding: 20px;               /* Reduce padding */
    gap: 20px;                   /* Space between text and image */
  }

  /* Adjust text box */
  .text-img-page .text-box {
    margin-top: 60px; 								 /* FROM 10PX TO 60PX --------------- */
    margin-left: 0;              /* Remove horizontal offset */
    padding: 20px;               /* Reduce padding */
    max-width: 90%;              /* Fit better on small screens */
    text-align: center;          /* Optional: center text horizontally */
    transform: none;             /* Remove slide-in offset */
  }

  /* Adjust image box */
  .text-img-page .image-box {
    margin-right: 0;             /* Remove horizontal offset */
    max-width: 90%;              /* Fit screen width */
    transform: none;             /* Remove slide-in offset */
    align-items: center; 
  }

  /* Reduce heading size */
  .text-img-page .text-box h1 {
    font-size: 2.0rem;             /* Smaller font for mobile */
  }

  /* Reduce paragraph size slightly */
  .text-img-page .text-box p {
    font-size: 0.95rem;
  }

}

/* CATEGORY 1: PAGE STRUCTURE */
/* ================================================================================== */
/* ===== MOBILE RESPONSIVE: PHONE SCREENS (=480px)				===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code provides additional responsive adjustments for very small mobile devices (screens 480px wide or smaller, such as smartphones in portrait mode). */


@media (max-width: 480px) {
  .slideshow-container {
    max-height: 300px;
  }

  .slide img {
    height: 300px;
  }

  .slide-text {
    font-size: 14px;
  }

  .floating-box {
    width: 95%;
  }
}

/* CATEGORY 1: PAGE STRUCTURE */
/* ================================================================================== */
/* ===== MOBILE RESPONSIVE: BANNER SLIDESHOW & FLOATING BOXES (=900px)		===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code creates responsive adjustments for a top banner slideshow on tablets and mobile devices when the screen width is 900px or smaller.*/


@media (max-width: 900px) {

  /* Smaller slideshow height */
  .slideshow-container {
    max-height: 400px;
    width: 100%
  }

  .slide img {
    height: 400px;
  }

  /* Overlay text smaller + inside padding */
  .slide-text {
    font-size: 16px;
    padding: 8px 14px;
    top: 75%;
  }

  .slide.active .slide-text {
    left: 10px;
  }



/* CATEGORY 2: NAVIGATION - NAVIGATION MENU & CONTENT (5) */

/* CATEGORY 2: NAVIGATION */
/* ================================================================================== */
/* ===== MOBILE NAVIGATION: MENU TOGGLE BUTTON					===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code styles a mobile hamburger menu button (the three horizontal lines commonly used to open a navigation menu on smaller screens). */
/* NOTE: It creates the visual appearance of the hamburger icon but does not by itself open or close the menu. That functionality requires JavaScript. */

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #d4af37;
  border-radius: 0px;
}

/* CATEGORY 2: NAVIGATION */
/* ================================================================================== */
/* ===== MOBILE NAVIGATION: MENU CONTAINER & POSITIONING (=768px)		===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code controls the mobile navigation menu behaviour and positioning for screens 768px wide or smaller (smartphones and smaller tablets). */
/* NOTE: Show the hamburger menu button on mobile */
/* NOTE: Position the menu off-screen until activated */
/* NOTE: Animate the menu opening */
/* NOTE: Keep the menu above other page content*/

@media (max-width: 768px) {

  nav {
    padding: 0;
    height: 90px;
  }

  .menu-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    top: 90px;
    right: -100%;
    max-width: 300px;
    height: calc(100vh - 90px);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 0;
    transition: right 0.3s ease;
    margin-right: 20px;
    z-index: 1000;
  }

  .nav.active {
    right: 20px;
  }

/* CATEGORY 2: NAVIGATION */
/* ================================================================================== */
/* ===== MOBILE NAVIGATION: SCROLLING & OVERFLOW HANDLING (=900px)		===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code improves the mobile navigation menu usability on screens 900px wide or smaller by ensuring that a long menu can scroll properly and submenu content is not cut off. */
/* NOTE: Limit the navigation menu height to the screen height*/
/* NOTE: Enable vertical scrolling when menu items exceed the available space */
/* NOTE: Improve scrolling performance on iOS devices */
/* NOTE: Prevent nested submenu lists from being clipped */


@media (max-width: 900px) {
  .nav {
    max-height: 100vh;         /* keep menu within screen height */
    overflow-y: auto;          /* enable vertical scrolling */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  }

  /* ensure ULs inside are also allowed to grow naturally */
  .nav ul {
    overflow: visible;
  }
}

/* CATEGORY 2: NAVIGATION */
/* ================================================================================== */
/* =====  MOBILE NAVIGATION: FIRST-LEVEL MENU STRUCTURE				===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code styles the first-level mobile navigation menu items (the main menu buttons such as Home, About, Services, Contact). */
/* NOTE: The width of the main navigation items */
/* NOTE: The appearance of the clickable menu links */
/* NOTE: Spacing, colours, and borders for the top-level menu buttons */

.nav > li {
width: 360px;
}

  .nav > li > a {
    width: 100%;
    margin: 0px 10px;
    padding: 14px 20px;
    background: #000;
    color: #d4af37;
    border: 1px solid #d4af37;
  }

/* CATEGORY 2: NAVIGATION */
/* ================================================================================== */
/* ===== MOBILE NAVIGATION: CLICK-TO-OPEN SUBMENUS				===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code controls the mobile navigation submenu behaviour (second-level and third-level menu items). */
/* NOTE: Disable desktop-style hover dropdown behaviour on mobile */
/* NOTE: Enable click-to-open submenus*/
/* NOTE: Position submenus correctly inside the mobile menu*/
/* NOTE: Remove desktop dropdown styling (borders, shadows, floating positioning) */
/* NOTE: Improve submenu touch usability */

  .nav li:hover > ul {
    display: none !important;
  }

  .nav li.open > ul {
    display: block !important;
  }

  /* --- Mobile submenus: 2nd and 3rd level --- */
  .nav li ul {
    position: static;

    /* align submenu to right edge of the parent button */
    width: 90%;           /* same width as parent button */
    margin-left: auto;    /* pushes submenu to the right */
    padding: 0 0 0 0;  /* remove left indent */

    border: 0;
    box-shadow: none;
    display: none;
  }

  .nav li ul li a {
    padding: 12px 20px;
  }
}



/* CATEGORY 3: Supporting UI components - UI Components & Interactive Elements (3) */

/* CATEGORY 3: Supporting UI components */
/* ================================================================================== */
/* ===== MOBILE UI COMPONENTS: STACK FLOATING BOXES BELOW CONTENT		===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code controls the mobile layout behaviour of floating action boxes/cards by changing them from a desktop-style floating layout into a stacked, centred vertical layout. */
/* NOTE: This code converts floating desktop action boxes into a mobile-friendly vertical stack that is centred, readable, and easy to tap.*/

  .floating-boxes {
    position: static;         /* no absolute positioning */
    transform: none;
    margin: 15px auto 0;
    flex-direction: column;   /* stack vertically */
    align-items: center;
    gap: 15px;
  }

  .floating-box {
    width: 90%;
    max-width: 280px;
    padding: 15px;
  }

/* CATEGORY 3: Supporting UI components */
/* ================================================================================== */
/* ===== MOBILE UI COMPONENTS: FLOATING ACTION BOX POSITIONING (=768px) 	===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code controls the floating action boxes layout on smaller mobile screens (=768px). */
/* NOTE: Unlike the previous CSS example that stacks floating boxes vertically below content, this version keeps the boxes floating over the page and arranged horizontally on the right side.*/
/* NOTE: Position floating boxes as an overlay */
/* NOTE: Align them to the right side of the screen */
/* NOTE: Keep multiple boxes side-by-side */
/* NOTE: Reduce their size for mobile screens */
/* NOTE: Make buttons/links compact and touch-friendly */


@media (max-width: 768px) {

  .floating-boxes {
    position: absolute;
    top: 58%;                           /* adjust vertical position */
    right: 10px;                        /* align to the right side */
    left: auto;                         /* remove centering */
    transform: translateY(-50%);        /* vertical centering only */
    z-index: 100;


    display: flex;
    flex-direction: row;                /* horizontal layout */
    justify-content: flex-end;          /* push boxes to right */
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;                  /* ensure side-by-side */
  }

  .floating-box {
    width: 120px;                       /* mobile-friendly width */
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
  }

  .floating-box h3 {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  .floating-link {
    padding: 5px 8px;
    font-size: 0.75rem;
    border-radius: 5px;
  }
}

/* CATEGORY 3: Supporting UI components */
/* ================================================================================== */
/* ===== MOBILE UI: SLIDESHOW NAVIGATION DOTS FOR TOUCH DEVICES			===== */
/* ================================================================================== */

/* CSS CODE DESCRIPTION */
/* NOTE: This CSS code controls the appearance and spacing of slideshow navigation dots (also called carousel indicators) on smaller screens. */
/* NOTE: Its purpose is to make the dots larger and easier to tap on touch devices.*/


  .dot {
    height: 16px;
    width: 16px;
    margin: 0 4px;
  }
}

/* CATEGORY 4 — Device & Accessibility Optimisation */

/* CATEGORY 5 — Animation & Transition Behaviour */