/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html { font-size: 16px; }
html {
	scroll-behavior: smooth;
  }
  

/* Enable smooth scrolling for the entire page */
/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, p, a { margin: 0; padding: 0; border: 0; }

body { background: #eee; }


/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container { max-width: 160rem; }
.container { margin: 0 auto; background: #eee; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
	font-family: Plex;
	src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff2);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Plex-Bold;
	src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2);
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: Plex-Italic;
	src: url(fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff2);
	font-weight: normal;
	font-style: italic;
}




body		{font-family: forma-djr-display, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.05em; /* Adjust kerning */}
h1, h2, h3	{ font-family: forma-djr-display, sans-serif;
	font-weight: 600;
	font-style: normal; 
	letter-spacing: 0.05em; /* Adjust kerning */}
p			{ font-family: forma-djr-display, sans-serif;
	font-weight: 500;
	font-style: normal;
letter-spacing: 0.05em; /* Adjust kerning */ }
figcaption	{ font-family: Plex, Arial, sans-serif; }


/*  top navigation section
--------------------------------------------------------------------------------------- */
nav 	{ padding: .5rem .5rem 2rem .5rem; min-height: 2rem; border-bottom: 2px #eee solid;   position: fixed; /* Keeps the nav fixed at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures nav stays on top */
    background: #000000;  /* Optional: background to prevent transparency issues */
    padding: .5rem .5rem 1rem .5rem; /* Adjust padding as needed */
    min-height: 3rem; /* Adjust height if needed */
    border-bottom: 2px #eee solid;
	
}

nav h1	{ font-size: 1.75rem; margin-bottom: .5rem; }
nav a	{ white-space: nowrap; }

nav ul		{ list-style-type: none; }
nav ul li	{ font-size: 1.75rem; display: inline-block; margin-right: 1.5rem; }

/* Centered link container */
.centered-link {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
  }

nav a {font-family: forma-djr-display, sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.05em;
	color:white;
}

/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
	font-size: 2rem;
	line-height: 2.15rem;
	margin: 1rem .5rem 3rem;
	
}

/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container > figure { margin: 0 .5rem 2rem .5rem; }


/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section { margin:0; padding: 0 .5rem 1.5rem; }

section h3, section div h3 { font-size: 1.5rem; line-height: 2.25rem;  text-align: center; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size: 1rem; }

section div { margin-top: -0.375rem; }  /* to adjust type against images */


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; max-width: 36em; max-width: 42em; } /* max-width sets line length */
p { font-size: 1.5rem; line-height: 1.375em; }
/* p { line-height: 2.0625rem; } */ 


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ width: 100%; height: auto; }

video	{ width: 100%; }

.max 	{ max-width: 100%; }  /* max-width can stop img element going bigger than its actual size */


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: rgb(255, 255, 255); text-decoration: none; }
a:visited	{ color: rgb(255, 255, 255); }
a:hover		{ color: rgb(133, 133, 133); text-decoration: underline; }
a:active	{ color: #0e0; }

nav a			{ color: rgb(255, 255, 255); text-decoration: none; }
nav a:visited	{ color: rgb(255, 255, 255); }
nav a:hover		{ color: rgb(134, 134, 134); text-decoration: underline; }
nav a:active	{ color: #0e0; }

.contact p { font-size: 3rem; text-align: center; }

/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {


/*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
	.container { min-width: 60rem; min-width: 0; }

	.force-height { min-height: 100vh; }


/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
		background: #000000;
		border-bottom: 0 #eee none;
	}

	nav h1	{ font-size: 1.75rem; margin-bottom: 0rem; margin-top: 0; color: white; }

	nav ul { margin: 0; }
	nav ul li { font-size: 1.75rem; margin:  }


/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { 
		font-size: 3rem;
		line-height: 1.15em;
		margin: 3rem auto 4rem;
		text-align: left;
		padding-left: 100px;
		padding-bottom: 100px;
		padding-top: 75px;
	}


/*  hero image
--------------------------------------------------------------------------------------- */
	h2 + figure { margin: 0; padding-bottom: 3rem; }
	h2 + figure img { display: block; }


/*  default desktop section styles
--------------------------------------------------------------------------------------- */
	section { padding: 0 .5rem 4rem; }

	section figure { margin: 0; }

	section h3 { margin-bottom: 1.5em; }


/*  section default 12 column grid
--------------------------------------------------------------------------------------- */
	section { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"fg fg fg fg dv dv dv dv dv dv dv dv";
	}

	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg; }
	section div		{ grid-area: dv; }


/*  simple 3 column grid
--------------------------------------------------------------------------------------- */
	section.three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2rem auto;
		grid-column-gap: 3rem;
		grid-row-gap: .5rem;
		grid-template-areas:
		"fg hd hd"
		"fg dv dv";
	}

	section.three h3		{ grid-area: hd; }
	section.three figure	{ grid-area: fg; }
	section.three div		{ grid-area: dv; }
	
	section.three h3		{ margin-top: -0.6rem; }
	section.three div		{ margin-top: 0; }


/*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */	
	section.right {
		display: grid;
		grid-template-columns: 1fr 1fr minmax(20rem, 1fr);
		grid-template-rows: minmax(2rem, auto) auto;
		grid-column-gap: 1.5rem; grid-column-gap: 4rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd hd fg"
		"dv dv fg";
	}
	
	section.right h3		{ grid-area: hd; }
	section.right figure	{ grid-area: fg; }
	section.right div		{ grid-area: dv; }

	section.right h3		{ margin-top: 0; }
	section.right div		{ margin-top: 0; }


/*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
	section.wide {
		display: grid;
		grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg fg"
		"dv fg fg";
	}
	
	section.wide h3		{ grid-area: hd; }
	section.wide figure	{ grid-area: fg; }
	section.wide div	{ grid-area: dv; }



/*  intro
--------------------------------------------------------------------------------------- */
	section.intro {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0;
		grid-template-areas:
		"dv dv dv";
	}

	section.intro h3	{ grid-area: hd; }
	section.intro div	{ grid-area: dv; }

	section.intro div h3,
	section.intro div p	{ font-size: 2rem; }

	section.intro		{ margin-bottom: 4rem; }


/*  images-two
--------------------------------------------------------------------------------------- */
	section.images-two {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2"
		"hd hd"
		"dv dv";
	}

	section.images-two h3						{ grid-area: hd; }
	section.images-two figure					{ grid-area: f1; }
	section.images-two figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-two div 						{ grid-area: dv; }

	section.images-two div h3,
	section.images-two div p { font-size: 1.5rem; }


/*  images-three
--------------------------------------------------------------------------------------- */
	section.images-three {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 1rem;
		grid-template-areas:
		"f1 f2 f3"
		"hd hd hd"
		"dv dv dv";
	}

	section.images-three h3						{ grid-area: hd; }
	section.images-three figure					{ grid-area: f1; }
	section.images-three figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three div					{ grid-area: dv; }

	section.images-three div h3,
	section.images-three div p { font-size: 1.5rem; }


/*  images-three-plus
--------------------------------------------------------------------------------------- */
	section.images-three-plus {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: 2rem; 
		grid-row-gap: 2rem;
		grid-template-areas:
		"f1 f2 f3"
		"d1 d2 d3";
	}

	section.images-three-plus figure				{ grid-area: f1; }
	section.images-three-plus figure:nth-of-type(2)	{ grid-area: f2; }
	section.images-three-plus figure:nth-of-type(3)	{ grid-area: f3; }
	section.images-three-plus div					{ grid-area: d1; }
	section.images-three-plus div:nth-of-type(2)	{ grid-area: d2; }
	section.images-three-plus div:nth-of-type(3)	{ grid-area: d3; }

	section.images-three-plus		{ padding: 0 0 2rem; }

	section.images-three-plus div h3,
	section.images-three-plus div p { font-size: 1.5rem; }


/* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
	section.full { display: block; padding: 1rem 0 0; }

	section.full figure {
		grid-area: auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-template-areas:
		"f1"
		"im";
	}

	section.full figure img			{ grid-area: im; }
	section.full figure figcaption	{ grid-area: f1; justify-self: center; }

	section.full					{ margin-bottom: 4rem; }
	section.full figure img			{ display: block; }
	section.full figcaption h3		{ font-size: 3rem; }


/* two columns
--------------------------------------------------------------------------------------- */
	section.two {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"fg hd"
		"fg dv";
	}


/* two columns right image
--------------------------------------------------------------------------------------- */
	section.two-right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(2.5rem, auto);
		grid-column-gap: 1.5rem;
		grid-row-gap: 0;
		grid-template-areas:
		"hd fg"
		"dv fg";
	}


/* pull quote
--------------------------------------------------------------------------------------- */
	section.pull {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-row-gap: 0;
		grid-template-areas:
		"dv";
	}

	section.pull { margin-bottom: 4rem; }

	.pull p { font-size: 2rem; }


/* out of background
--------------------------------------------------------------------------------------- */
	section.colourbox {
		padding: 3rem;
		margin-bottom: 4rem;
	}

	.orange {
		background:#aaa;
	}


/*  custom section for about page
--------------------------------------------------------------------------------------- */
	section.about {
	display: grid;
	grid-template-columns: minmax(24rem, 5fr) 4fr 3fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"fg .  ."
	". dv dv";
	padding-top: 200px; /
	}

	/* Target the <figure> inside .about */
section.about figure {
    grid-area: fg; /* Places the figure in the 'fg' grid area */
    width: 50%; /* Adjust the figure width */
    margin: 0 auto; /* Center it horizontally */
	
}

/* Ensure images inside figure scale correctly */
section.about figure img {
    width: 100%; /* Makes image fill the figure */
    height: auto; /* Keeps aspect ratio */
    object-fit: cover; /* Prevents distortion */
}

/* Change font size of div elements within section.about */
section.about p {
    font-size: 21.5px; /* Adjust the font size as needed */
}

	

/*  section.video grid
--------------------------------------------------------------------------------------- */	
	section.video  {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 60px;
		background: transparent;
		grid-template-areas:
		". v1 v1 ."
		". t2 t2 .";

		margin-bottom: 27px; 
	}
	

	section.video figure	{ grid-area: v1; }
	section.video div		{ grid-area: t2; }

	section.video figure	{ padding:0; }
	section.video div		{ text-align: center; margin-left: 135px;}
	section.video p		
	section.video h3		{ padding-top: 1rem; }


	
/*  home page auto grid
--------------------------------------------------------------------------------------- */		
section.home {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1rem;
	grid-row-gap: 10rem;
	grid-template-areas:
	". h1 h1 h1 . ."
	". . h2 h2 h2 ."
	"h3 h3 h3 . . ."
	". h4 h4 h4 h4 h4";
	
}

section.home { padding: 0 .5rem 2rem; }

section.home figure.one   { grid-area: h1;  width: 90%; /* Adjust as needed for scale of image*/
	height: auto; /* Maintain aspect ratio */
	margin: 0 auto; /* Center horizontally */}

	.home a 
	{  color: black;
		
	}

	.home a:hover {
		color: #555; 
		text-decoration: underline; /* Optional */
	
	}
	
section.home figure.two   { grid-area: h2; width: 100%; /* Adjust as needed for scale of image*/
	height: auto; /* Maintain aspect ratio */
	margin: 0 auto; /* Center horizontally */}
section.home figure.three { grid-area: h3; width: 60%; /* Adjust as needed for scale of image*/
	height: auto; /* Maintain aspect ratio */
	margin: 0 auto; /* Center horizontally */}
section.home figure.four  { grid-area: h4; width: 50%; /* Adjust as needed for scale of image*/
	height: auto; /* Maintain aspect ratio */
	margin: 0 auto; /* Center horizontally */}


/*  projects page auto grid
--------------------------------------------------------------------------------------- */		
section.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"f1 f2"
	"f3 f4"
	"f5 f6"
	"f7 f8"
	"f9 f10"
	"f11 f12"
	". f13";
}

.projects figure.one   { grid-area: f1; 
	position: relative;
	max-width: 60%;
	top: 150px;
	margin-left: 222px;  }
.projects figure.two   { grid-area: f2;
	position: relative;
	max-width: 88%;
	top: -6px;
	margin-left: -56px;  }
.projects figure.three { grid-area: f3; 
	position: relative;
	max-width: 100%;
	top: 220px;
	margin-left: 50px;  /* move image to the left */
	}
.projects figure.four  { grid-area: f4; 
	position: relative;
	max-width: 100%;
	top: -494px;
	margin-left: -61px; }
.projects figure.five { grid-area: f5; 
	position: relative;
	max-width: 67%;
	top: 179px;
	margin-left: 169px; }
.projects figure.six { grid-area: f6; 
	position: relative;
	max-width: 90%;
	top: -324px;
	margin-left: 31px; }
.projects figure.seven { grid-area: f7; 
	position: relative;
	max-width: 100%;
	top: 195px;
	margin-left: 50px; }
.projects figure.eight { grid-area: f8; 
	position: relative;
	max-width: 64%;
	top: -419px;
	margin-left: 50px; }
.projects figure.nine { grid-area: f9;
	 position: relative;
	max-width: 65%;
	top: 98px;
	margin-left: 304px; }
.projects figure.ten { grid-area: f10; 
	position: relative;
	max-width: 63%;
	top: -369px;
	margin-left: 208px;  }
.projects figure.eleven { grid-area: f11; 
	position: relative;
	max-width: 59%;
	top: 155px;
	margin-left: 154px; }
.projects figure.twelve { grid-area: f12; 
	position: relative;
	max-width: 66%;
	top: -392px;
	margin-left: 112px; }
	.projects figure.thirteen { grid-area: f13; 
		position: relative;
		max-width: 59%;
		top: -464px;
		margin-left: -39px; }










/*  project page reflection section
--------------------------------------------------------------------------------------- */		
section.reflection {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"rh ."
	"d1 d2";
	margin-left: 100px;
}

section.reflection h3		{ grid-area: rh;  position: relative; top: 155px; left: -536px;/* Move itor down */  font-size: 3.2rem;}
section.reflection div		{ grid-area: d1; }
section.reflection div.two	{ grid-area: d2; }

section.reflection div p a { display: block; }

/*  project page reflection section
--------------------------------------------------------------------------------------- */		
section.reflectionweb {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 1rem;
	grid-template-areas:
	"rh ."
	"d1 d2";
	margin-left: 100px;
}

section.reflectionweb h3		{ grid-area: rh;  position: relative; top: 18px; left: -392px;/* Move itor down */  font-size: 3.2rem;}
section.reflectionweb div		{ grid-area: d1; }
section.reflectionweb div.two	{ grid-area: d2; }

section.reflectionweb div p a { display: block; }






} /* end 768px media query */


/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
	html { font-size: 24px; }
}

/*  contact section
--------------------------------------------------------------------------------------- */

section.contactpage {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: auto;
	grid-column-gap: 20rem;
    grid-template-areas: 
        "message email linkedin"
		;
    padding: 50px;
	font-size: 30px;
}

.contactpage.message {
    grid-area: message;
    
}
.contactpage.email {
    grid-area: email;
	white-space: nowrap;
    
}

.contactpage.linkedin {
	grid-area: linkedin;
    text-align: right;
}

	.contactpage a {  color: black;
		
}

.contactpage a:hover {
    color: #555; /* Dark gray hover color */
    text-decoration: underline; /* Optional */

}



.contact p { font-size: 3rem; text-align: center; }

	
/*  section.brief
--------------------------------------------------------------------------------------- */	
section.brief {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 0rem;
	grid-template-areas:
	"h3 . . . "
	"f1 f2 f3 ."
	"hd hd hd ."
	"dv dv dv ."
	"f4 f4 f5 .";
	

	margin-bottom: 100px; 
	transform: translateX(400px);
	
}

section.brief h3						{ grid-area: hd; }
section.brief figure					{ grid-area: f1; }
section.brief figure:nth-of-type(2)	{ grid-area: f2; }
section.brief figure:nth-of-type(3)	{ grid-area: f3; }
section.brief figure:nth-of-type(4)	{ grid-area: f4; }
section.brief figure:nth-of-type(5)	{ grid-area: f5; }
section.brief div					{ grid-area: dv; }

section.brief div h3,
section.brief div p { font-size: 1.5rem; }



section.brief h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 100px;
	padding-right:140px;
    padding-top: 50px;
    padding-bottom: 50px;
	
}

section.brief figure:nth-of-type(2) img {
    max-width: 50%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 200px; /* Moves second image down */
	margin-left:12px;
}



section.brief figure:nth-of-type(3) img {
    max-width: 40%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;  /* Center the image */
	margin-left:20px;
}

section.brief figure:nth-of-type(4) img {
    max-width: 75%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;  /* Center the image */
	margin-left:20px;
}

section.brief figure:nth-of-type(3) {
    grid-area: f2; /* Moves Figure 3 into Figure 2’s column */
    position: relative;
    top: 0px;   /* Adjust to move it down */
    left: 323px; /* Adjust to move it closer */
}

section.brief figure:nth-of-type(5) img {
    max-width: 22%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;  /* Center the image */
	margin-left:668px;
	
}

section.brief figure:nth-of-type(5) {
    grid-area: f4; /* Moves Figure 5 into Figure 4’s column */
    position: relative;
    top: -63px;   /* Adjust to move it down */
    left: 323px; /* Adjust to move it closer */
}

/*  section. workshops
--------------------------------------------------------------------------------------- */	

section.workshops {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	". h3"
	"f1 f2"
	". dv"
	;

	margin-bottom: -125px; 
	
}

section.workshops h3						{ grid-area: h3; }
section.workshops figure					{ grid-area: f1; }
section.workshops figure:nth-of-type(2)	{ grid-area: f2; }
section.workshops div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.workshops h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 467px;
	padding-right:140px;
    padding-top: 50px;
    padding-bottom: 86px;
	
}


section.workshops figure {
    grid-area: f1;
    position: relative;
	max-width: 100%;
	top: 50px;
	margin-left: 50px; 
}

section.workshops figure:nth-of-type(2) img {
    max-width: 60%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -109px; /* Moves second image down */
	margin-left: 45px;
}



section.workshops div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: -243px;
	margin-left: 50px; 
}

/*  section. storyboard
--------------------------------------------------------------------------------------- */	

section.storyboard {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	". h3"
	"f1 f2"
	". dv"
	;

	margin-bottom: 200px; 
	
}

section.storyboard h3						{ grid-area: h3; }
section.storyboard figure					{ grid-area: f1; }
section.storyboard figure:nth-of-type(2)	{ grid-area: f2; }
section.storyboard div					{ grid-area: dv; }

section.atoryboard div h3,
section.storybaord div p { font-size: 1.5rem; }



section.storyboard h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 467px;
	padding-right:140px;
    padding-top: 50px;
    padding-bottom: 86px;
	
}


section.storyboard figure {
    grid-area: f1;
    position: relative;
	max-width: 100%;
	top: 50px;
	margin-left: 50px; 
}

section.storyboard figure:nth-of-type(2) {
    max-width: 125%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -109px; /* Moves second image down */
	margin-left: 45px;
}



section.storyboard div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: 110px;
	margin-left: -652px; 
}

/*  section. audio
--------------------------------------------------------------------------------------- */	

section.audio {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"f1 f2 f3"
	"h3 f2 f4"
	"dv dv ."
	
	;

	margin-bottom: 80px; 
	
}

section.audio h3						{ grid-area: h3; }
section.audio figure					{ grid-area: f1; }
section.audio figure:nth-of-type(2)	{ grid-area: f2; }
section.audio figure:nth-of-type(3)	{ grid-area: f3; }
section.audio figure:nth-of-type(4)	{ grid-area: f4; }
section.audio div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.audio h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 192px;
	padding-right:140px;
    padding-top: 50px;
    padding-bottom: 86px;
	
}


section.audio figure {
    grid-area: f1;
    position: relative;
	max-width: 40%;
	top: 104px;
	margin-left: 322px; 
}

section.audio figure:nth-of-type(2) {
    max-width: 125%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -109px; /* Moves second image down */
	margin-left: 45px;
}

section.audio figure:nth-of-type(3) {
    max-width: 125%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 187px; /* Moves second image down */
	margin-left: 45px;
}

section.audio figure:nth-of-type(4) {
    max-width: 100%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 65px; /* Moves second image down */
	margin-left: -305px;
}

section.audio div {
    grid-area: dv;
    position: relative;
	max-width: 68%;
	top: -240px;
	margin-left: 35px; 
}

/*  section. style
--------------------------------------------------------------------------------------- */	

section.style {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"f1 ."
	"h3 f3"
	"f2 dv"
	
	;

	margin-bottom: 281px; 
	
}

section.style h3						{ grid-area: h3; }
section.style figure					{ grid-area: f1; }
section.style figure:nth-of-type(2)	{ grid-area: f2; }
section.style figure:nth-of-type(3)	{ grid-area: f3; }
section.style div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.style h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 192px;
	padding-right:140px;
    padding-top: 160px;
    padding-bottom: 86px;
	
}


section.style figure {
    grid-area: f1;
    position: relative;
	max-width: 70%;
	top: 60px;
	margin-left: 322px; 
}

section.style figure:nth-of-type(2) {
    max-width: 77%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -808px; /* Moves second image down */
	margin-left: 142px;
}

section.style figure:nth-of-type(3) {
    max-width: 125%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 187px; /* Moves second image down */
	margin-left: 45px;
}


section.style div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: 92px;
	margin-left: -707px; 
}

/*  section. context
--------------------------------------------------------------------------------------- */	

section.context {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"f1 f2 f3"
	"f1 h3 f3"
	". dv f3"
	
	;

	margin-bottom: 200px; 
	
}

section.context h3						{ grid-area: h3; }
section.context figure					{ grid-area: f1; }
section.context figure:nth-of-type(2)	{ grid-area: f2; }
section.context figure:nth-of-type(3)	{ grid-area: f3; }
section.context div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.context h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 192px;
	padding-right:140px;
    padding-top: 68px;
    padding-bottom: 86px;
	
}


section.context figure {
    grid-area: f1;
    position: relative;
	max-width: 70%;
	margin-top: 302px;
	margin-left: 322px; 
}

section.context figure:nth-of-type(2) {
    max-width: 77%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -82px; /* Moves second image down */
	margin-left: 142px;
}

section.context figure:nth-of-type(3) {
    max-width: 125%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 187px; /* Moves second image down */
	margin-left: 45px;
}


section.context div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	margin-top: -72px;
	margin-left: 120px; 
}

/*  section. structure
--------------------------------------------------------------------------------------- */	

section.structure {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 14rem;
	grid-template-areas:
	"h3 h3 h3"
	"f1 f1 f2"
	". dv dv"
	;

	margin-bottom: -239px;
	margin-top: -240px; 

	
}

section.structure h3						{ grid-area: h3; }
section.structure figure					{ grid-area: f1; }
section.structure figure:nth-of-type(2)	{ grid-area: f2; }
section.structure div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.structure h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: -263px;
	padding-right:1548px;
    padding-top: 23px;
    padding-bottom: -178px;
	
}


section.structure figure {
    grid-area: f1;
    position: relative;
	max-width: 83%;
	top: 53px;
	margin-left: 0px; 
}

section.structure figure:nth-of-type(2) {
	grid-area: f2;
    max-width: 144%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 308px; /* Moves second image down */
	margin-left: -126px;
}



section.structure div {
    grid-area: dv;
    position: relative;
	max-width: 53%;
	top: -63px;
	margin-left: -487px; 
}


/*  section.layout
--------------------------------------------------------------------------------------- */	

section.layout {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"f1 h3 f3"
	"f1 f2 f4"
	". . dv"
	
	;

	margin-bottom: -86px; 
	
}

section.layout h3						{ grid-area: h3; }
section.layout figure					{ grid-area: f1; }
section.layout figure:nth-of-type(2)	{ grid-area: f2; }
section.layout figure:nth-of-type(3)	{ grid-area: f3; }
section.layout figure:nth-of-type(4)	{ grid-area: f4; }
section.layout div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.layout h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 432px;
	padding-right:140px;
    padding-top: 20px;
    padding-bottom: 301px;
	
}


section.layout figure {
    grid-area: f2;
    position: relative;
	max-width: 71%;
	margin-top: -405px;
	margin-left: -344px; 
}

section.layout figure:nth-of-type(2) {
    max-width: 52%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -280px; /* Moves second image down */
	margin-left: 337px;
}

section.layout figure:nth-of-type(3) {
    max-width: 82%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 0px; /* Moves second image down */
	margin-left: 0px;
}

section.layout figure:nth-of-type(4) {
    max-width: 82%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 0px; /* Moves second image down */
	margin-left: 0px;
}

section.layout div {
    grid-area: dv;
    position: relative;
	max-width: 153%;
	top: -64px;
	margin-left: -366px; 
}

/*  section. research
--------------------------------------------------------------------------------------- */	

section.research {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"h3 h3"
	"f1 f1"
	"dv ."
	;

	margin-bottom: 304px; 
	
}

section.research h3						{ grid-area: h3; }
section.research figure					{ grid-area: f1; }
section.research figure:nth-of-type(2)	{ grid-area: f2; }
section.research div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.research h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: -263px;
	padding-right:1235px;
    padding-top: 23px;
    padding-bottom: -178px;
	
}


section.research figure {
    grid-area: f1;
    position: relative;
	max-width: 65%;
	top: 55px;
	margin-left: 323px; 
}

section.research figure:nth-of-type(2) img {
    max-width: 60%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 0px; /* Moves second image down */
	margin-left: 0px;
}



section.research div {
    grid-area: dv;
    position: relative;
	max-width: 75%;
	top: 100px;
	margin-left: 0px; 
}

/*  section. webworkshop
--------------------------------------------------------------------------------------- */	

section.webworkshop {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"h3 ."
	"f1 f2"
	". dv"
	"f3 f3"
	;

	margin-bottom: -81px; 
	
}

section.webworkshop h3						{ grid-area: h3; }
section.webworkshop figure					{ grid-area: f1; }
section.webworkshop figure:nth-of-type(2)	{ grid-area: f2; }
section.webworkshop figure:nth-of-type(3)	{ grid-area: f3; }
section.webworkshop div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.webworkshop h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: 467px;
	padding-right:140px;
    padding-top: 50px;
    padding-bottom: 86px;
	
}


section.webworkshop figure {
    grid-area: f1;
    position: relative;
	max-width: 70%;
	top: 50px;
	margin-left: 220px; 
}

section.webworkshop figure:nth-of-type(2) img {
    max-width: 239%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -117px; /* Moves second image down */
	margin-left: -10px;
}

section.webworkshop figure:nth-of-type(3) img {
    max-width: 70%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: -364px; /* Moves second image down */
	margin-left: 695px;
}



section.webworkshop div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: -413px;
	margin-left: 50px; 
}

/*  section.lushintro grid
--------------------------------------------------------------------------------------- */	
section.lushintro  {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0.5rem;
	grid-row-gap: 60px;
	background: transparent;
	grid-template-areas:
	". v1 v1 ."
	". t2 t2 .";

	margin-bottom: 27px; 
	margin-left: 10px;
}


section.lushintro figure	{ grid-area: v1; }
section.lushintro div		{ grid-area: t2; }

section.lushintro figure	{ padding:0; }
section.lushintro div		{ text-align: center; margin-left: 43px;}
section.lushintro p			
section.lushintro h3		{ padding-top: 1rem; }

/*  section. lush research
--------------------------------------------------------------------------------------- */	

section.lushresearch {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"h3 h3"
	"f1 f1"
	"f2 dv"
	;

	margin-bottom: 142px; 
	margin-left: -251px;
}

section.lushresearch h3						{ grid-area: h3; }
section.lushresearch figure					{ grid-area: f1; }
section.lushresearch figure:nth-of-type(2)	{ grid-area: f2; }
section.lushresearch div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.lushresearch h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: right;
	white-space: nowrap;/* Prevents line breaks */
    padding-left: -263px;
	padding-right:1235px;
    padding-top: 23px;
    padding-bottom: -178px;
	margin-left: 1335px;
	
}


section.lushresearch figure img {
    grid-area: f1;
    position: relative;
	max-width: 43%;
	top: 0px;
	margin-left: 637px; 
}

section.lushresearch figure:nth-of-type(2) img {
    max-width: 27%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 0px; /* Moves second image down */
	margin-left: 484px;
}



section.lushresearch div {
    grid-area: dv;
    position: relative;
	max-width: 76%;
	top: 34px;
	margin-left: -250px; 
}

/*  section. lushwork
--------------------------------------------------------------------------------------- */	

section.lushwork {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"h3 ."
	"f2 dv"
	"f1 ."
	
	;

	margin-bottom: -275px; 
	
}

section.lushwork h3						{ grid-area: h3; }
section.lushwork figure					{ grid-area: f1; }
section.lushwork figure:nth-of-type(2)	{ grid-area: f2; }
section.lushwork div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.lushwork h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: -470px;
	padding-right:296px;
    padding-top: 38px;
    padding-bottom: 47px;
	
}


section.lushwork figure img {
    grid-area: f1;
    position: relative;
	max-width: 84%;
	top: 0px;
	margin-left: 538px; 
}

section.lushwork figure:nth-of-type(2) img {
    max-width: 100%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 0px; /* Moves second image down */
	margin-left: 70px;
}

section.lushwork figure:nth-of-type(3) img {
    max-width: 100%;  /* Adjust this value as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;
	margin-top: 0px; /* Moves second image down */
	margin-left: 0px;
}



section.lushwork div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: 63px;
	margin-left: 139px; 
}

/*  section. morelushwork
--------------------------------------------------------------------------------------- */	

section.morelushwork {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 22rem;
	grid-template-areas:
	"h3 . ."
	"dv f1 f1"
	"f2 f3 f3"
	". . f4"
	
	;

	margin-bottom: -86px; 
	margin-left: -158px;
	
}

section.morelushwork h3						{ grid-area: h3; }
section.morelushwork figure					{ grid-area: f1; }
section.morelushwork figure:nth-of-type(2)	{ grid-area: f2; }
section.morelushwork figure:nth-of-type(3)	{ grid-area: f3; }
section.morelushwork figure:nth-of-type(4)	{ grid-area: f4; }
section.morelushwork div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.morelushwork h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
	white-space: nowrap;
    padding-left: 432px;
	padding-right:0px;
    padding-top: 20px;
    padding-bottom: 86px;
	
}

section.morelushwork figure {
	grid-area: f1;
	position: relative;
	width: 136%;
	margin-top: 0px;
	margin-left: 18px;
  }

  section.morelushwork figure:nth-of-type(2) img {
	max-width: 58%;
	height: auto;
	display: block;
	margin-top: 57px;
	margin-left: 3px;
  }

  section.morelushwork figure:nth-of-type(3) img {
	max-width: 40%;
	height: auto;
	display: block;
	margin-top: 25px;
	margin-left: 204px;
  }

  section.morelushwork figure:nth-of-type(4) img {
	max-width: 83%;
	height: auto;
	display: block;
	margin-top: -353px;
	margin-left: 132px;
  }

section.morelushwork div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: 0px;
	margin-left: -85px; 
}

/*  section.Aranya intro grid
--------------------------------------------------------------------------------------- */	
section.Aranyaintro  {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0.5rem;
	grid-row-gap: 60px;
	background: transparent;
	grid-template-areas:
	". v1 v1 ."
	". t2 t2 t2";

	margin-bottom: -72px; 
	margin-left: 10px;
}


section.Aranyaintro figure	{ grid-area: v1; }
section.Aranyaintro div		{ grid-area: t2; }
section.Aranyaintro h3		{ grid-area: h3; }

section.Aranyaintro figure	{ padding:0; }
section.Aranyaintro div		{ margin-left: -170px;}
section.Aranyaintro p		{  text-align: center; margin-left: 126px;}
section.Aranyaintro h3		{ padding-top: 1rem; }

section.Aranyaintro h3 {
    grid-area: h3;
    padding-top: 1rem;
    position: relative;
    top: -10px; /* Moves it up */
    left: -10px; /* Moves it left */
}

/*  section. more aranya
--------------------------------------------------------------------------------------- */	

section.morearanya {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 22rem;
	padding-bottom: 1rem;
	padding-top: 1rem;
	grid-template-areas:
	". h3"
	"f1 f2"
	"f3 dv"
	
	
	;

	margin-bottom: -86px; 
	
}

section.morearanya h3						{ grid-area: h3; }
section.morearanya figure					{ grid-area: f1; }
section.morearanya figure:nth-of-type(2)	{ grid-area: f2; }
section.morearanya figure:nth-of-type(3)	{ grid-area: f3; }
section.morearanya div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.morearanya h3 {
	
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
	white-space: nowrap;
    padding-left: 0px;
	padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
	
}

section.morearanya figure img {
	grid-area:
  f1;
	position: relative;
	width: 118%;
	margin-top: -101px;
	margin-left: -170px;
  }

  section.morearanya figure:nth-of-type(2) img {
	width: 113%;
	height: auto;
	display: block;
	top: 191px;
	margin-left: 81px;
  }

  section.morearanya figure:nth-of-type(3) img {
	width: 96%;
	height: auto;
	display: block;
	margin-top: 53px;
	margin-left: 16px;
  }

  section.morearanya div {
	grid-area:
  dv;
	position: relative;
	width: 100%;
	top: 223px;
	margin-left: 38px;
  }

  /*  section. aranya brief
--------------------------------------------------------------------------------------- */	

section.aranyabrief {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 11rem;
	grid-template-areas:
	". h3"
	"f1 f2"
	"dv dv"
	
	
	;

	margin-bottom: -355px; 
	
}

section.aranyabrief h3						{ grid-area: h3; }
section.aranyabrief figure					{ grid-area: f1; }
section.aranyabrief figure:nth-of-type(2)	{ grid-area: f2; }
section.aranyabrief div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.aranyabrief h3 {
	grid-area:
  h3;
	font-size: 3rem;
	line-height: 1.15em;
	margin:
  0 auto;
	text-align: left;
	white-space:
  nowrap;
	padding-left: 0px;
	padding-right: 38px;
	padding-top: -13px;
	padding-bottom: 42px;
  }

section.aranyabrief figure img {
	grid-area:
  f1;
	position: relative;
	width: 495%;
	margin-top: 24px;
	margin-left: 139px;
  }

  section.aranyabrief figure:nth-of-type(2) img {
	width: 49%;
	height: auto;
	display: block;
	margin-top: 122px;
	margin-bottom: 151px;
	margin-left: 731px;
  }
 

  section.aranyabrief div {
	grid-area:
  dv;
	position: relative;
	width: 48%;
	top: -218px;
	margin-left: 23px;
  }


  /*  section.video grid for animation
--------------------------------------------------------------------------------------- */	
	section.videoanimation  {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.5rem;
		grid-row-gap: 60px;
		background: transparent;
		grid-template-areas:
		". v1 v1 ."
		". t2 t2 .";

		margin-bottom: 27px; 
	}
	

	section.videoanimation  figure	{ grid-area: v1; }
	section.videoanimation  div		{ grid-area: t2; }

	section.videoanimation  figure	{ padding:0; }
	section.videoanimation  div		{ text-align: center; margin-left: 135px;}
	section.videoanimation  p			
	section.videoanimation  h3		{ padding-top: 1rem; }


	/*  section. testing
--------------------------------------------------------------------------------------- */	

section.testing {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-column-gap: 2rem; 
	grid-row-gap: 2rem;
	padding: 5rem;
	grid-template-areas:
	"h3 h3"
	"f1 f1"
	". dv"
	;

	margin-bottom: -113px; 
	
}

section.testing h3						{ grid-area: h3; }
section.testing figure					{ grid-area: f1; }
section.testing figure:nth-of-type(2)	{ grid-area: f2; }
section.testing div					{ grid-area: dv; }

section.workshop div h3,
section.workshop div p { font-size: 1.5rem; }



section.testing h3 {
    grid-area: h3;
    font-size: 3rem;
    line-height: 1.15em;
    margin: 0 auto;
    text-align: left;
    padding-left: -263px;
	padding-right:1548px;
    padding-top: 23px;
    padding-bottom: -178px;
	
}


section.testing figure {
    grid-area: f1;
    position: relative;
	width: 35%;
	top: 0px;
	margin-left: 175px; 
}




section.testing div {
    grid-area: dv;
    position: relative;
	max-width: 100%;
	top: -418px;
	margin-left: 0px; 
}

/*  section. bibliography
--------------------------------------------------------------------------------------- */	

.bibliography-container {
    width: 80%;
    max-width: 600px;
	margin-top: 10px;
	margin-left: 0px;
}

details {
    background: #eee;
    border-radius: 5px;
    padding: 10px;
	margin-left: 103px;
    cursor: pointer;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

summary {
    font-size: 43px;
    font-weight: bold;
    background-color: #eee;
    color: rgb(0, 0, 0);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    list-style: none;
	
}

summary:hover {
    background-color: #eee;
}

.bibliography-content {
    padding: 10px;
    font-size: 14px;
}

.bibliography-content ul {
    padding-left: 20px;
}

.bibliography-content li {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

.bibliography-content li:last-child {
    border-bottom: none;
}

nav, nav * {
	color: white !important;
}