*,
*::before,
*::after {
	box-sizing: border-box; /* prevents padding from affecting height and width */
}

/* Custom Properties */
/*-------------------*/

:root {
	/* font family */
	--ff-one: 'Open Sans', sans-serif; 
	--ff-two: 'Inter', sans-serif;
	--ff-three: 'Raleway', sans-serif;
	--ff-four: 'Roboto Slab', sans-serif;
	--ff-five: 'Lora', sans-serif;

	/* font weight */
	--fw-reg: 400; 
	--fw-bold: 600;
	--fw-bolder: 700;

	/* font colors */ 
	--clr-light: #fff; 
	--clr-light-gray: #f2f2f2; 
	--clr-dark: #434a4b; /* #186a7e; */
	--clr-dark-sub: #186a7e;
	--clr-dark-brown: #47280b;
	--clr-black: #111;
	--clr-accent: #2a8f99; /* blue */
	--clr-accent-secondary: #36aab5; /* light blue */

	/* bkg colors */
	--clr-bkg-one: #f5f7f7; /* light gray */
	--clr-bkg-two: #dce3e4; /* gray blue */
	--clr-bkg-three: #93c8cc; /* dark gray blue #79a9ad; */
	--clr-bkg-four: #12b7d7; /* light blue */
	--clr-bkg-five: #33c7e4; /* lighter blue */
	--clr-gradient-blue: linear-gradient(rgba(45, 139, 173, 0) 65%, rgba(42, 143, 153, 0.3) 0px) 50%/100% 3px;
	--clr-gradient-blues: linear-gradient(#2a8f99, #2d8bad);

	/* font size */
	--fs-h1: 2rem; /* 2.5rem; */
    --fs-h2: 1.8rem;
    --fs-h3: 1.4rem;
    --fs-body: 1.05rem;
    --fs-nav: .85rem;
    --fs-footer: .82rem;
    /* --fs-body: clamp(.9rem, 1rem, 1.125rem); */

    /* img box shadow */
    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
    	  0.125em 0.125em 0.25em rgba(0,0,0,.15);

    /* padding */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; /* 60px - 100px top and bottom */
}

/* desktop - font size */
@media (min-width: 800px) {
	:root {
		--fs-h1: 3.2rem;
        --fs-h2: 2rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.1rem;
        --fs-nav: .8rem;
        --fs-footer: .9rem;
	}
}

/* General Styles */
/*-------------------*/
html {
	scroll-behavior: smooth;
	/* text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; */
}
body {
	background: var(--clr-bkg-one);
	color: var(--clr-dark);
	font-family: var(--ff-two);
	font-size: var(--fs-body);
	line-height:  1.6;
	letter-spacing:.3px;
	margin: 0;
	padding: 0;
}
section {
	padding: 4em 2em;
}
img {
	display: block;
	max-width: 100%;
	padding: 0;
	margin:0;
}
strong { font-weight: var(--fw-bold); }

:focus {
	/*
	outline: 3px solid var(--clr-accent);
	outline-offset: 5px;
	*/
}

/* Buttons */
/*-------------------*/
/* Round Gradient Button */
.btnround {
	position: relative;
	overflow: hidden;
	height: 3rem;
	padding: 0 2rem;
	border-radius: 1.5rem;
	background: var(--clr-gradient-blues);
	background-size: 400%;
	color: var(--clr-light);
	text-transform: uppercase;
	border: none;
	cursor: pointer;
}
.btnround::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	width: 100%;
	height: inherit;
	border-radius: inherit;
	background: linear-gradient(82.3deg,
	rgba(57, 137, 250, 1) 10.8%,
	rgba(73, 138, 230, 1) 94.3%);
	transition: all 0.3s;
} 
.btnround:hover::before {
  	transform: scaleX(1);
}
.btnround-content {
  	position: relative;
  	z-index: 1;
}

/* Solid, Light + Transparent Buttons */
.btn-solid, .btn-solid-light, .btn-transparent {
	position: relative;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 0 3rem;
    max-width: 18rem;
    box-sizing: border-box; /* prevents padding from adding to the width */
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s;
    border-radius: 2rem; 
}
.btn-solid:before, .btn-solid-light:before, .btn-transparent:before {
    content: "";
    width: 0;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
}
.btn-solid:hover, .btn-solid-light:hover, .btn-transparent:hover {
    color: var(--clr-light);
}
.btn-solid:hover:before, .btn-solid-light:hover:before, .btn-transparent:hover:before {
    width: 100%;
}

/* Solid Light Button */
.btn-solid-light {
	background-color: var(--clr-bkg-four);
	color: var(--clr-light);
	line-height: clamp(3.5em, 5.5vw, 3.5em); /* 46px - 56px */	
	display: inline-block;
}
.btn-solid-light:before {
	background-color: var(--clr-bkg-five);
}

/* Solid Button */
.btn-solid {
	color: var(--clr-light);
	line-height: clamp(3.5em, 5.5vw, 3.5em); /* 46px - 56px */	
	background-color: var(--clr-accent);
	display: inline-block;
}
.btn-solid:before {
	background: var(--clr-accent-secondary);
}

/* Transparent Button */
.btn-transparent {
	color: var(--clr-accent);
	line-height: clamp(3.3em, 4vw, 3.3em);
	background-color: rgba(255, 255, 255, 0.82) ;
	/* background-color: transparent; */
	border: 1.5px solid var(--clr-accent);
	display: inline-flex;
	justify-content: center;
    align-items: center;
}
.btn-transparent:before {
	background: var(--clr-accent-secondary);
}
.btn-transparent:hover .btn-img {
	filter: invert(1) grayscale(100%) brightness(2);
}
.btn-img {
    display: block;
    margin-right: 0.75rem;
}

/* Typography */
/*-------------------*/
h1,
h2,
h3 {
	line-height: 1;
	margin: 0;
	text-size-adjust: 100%;
	text-rendering: geometricPrecision;
	font-size: 100%;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* hero text: title + subtitle */
.section__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	line-height: 1.15em;
	color: var(--clr-dark);
	margin-top: .25em;
	margin-bottom: .25em;
	text-align: left;
}
.section__subtitle {
	font-family: var(--ff-one);
	font-size: var(--fs-h3);
	font-weight: var(--fw-reg);
	line-height: 1.5em;
	color: var(--clr-dark-sub);
	text-align: left;
	margin-top: .5em;
	margin-bottom: 1.1em;
	padding: .25em 0em;
}

/* body text: body title + body */
.section__title__body-big {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1.35em;
	letter-spacing:.3px;
	color: var(--clr-dark);
	margin-top: .35em;
	margin-bottom: .35em;
	text-align: left;
}
.section__title__body {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: 1.3em;
	letter-spacing:.3px;
	color: var(--clr-dark);
	margin-top: .25em;
	margin-bottom: .25em;
	text-align: left;
}

/* blue text: body subtitle + blue text */
.section__subtitle__body {
	font-size: var(--fs-nav);
	font-weight: var(--fw-reg);
	line-height: 1.9em;
	letter-spacing: 1px;
	margin-bottom: -.5em;
	text-transform: uppercase;
}
.section__title__blue {
	font-size: var(--fs-h3);
	font-weight: var(--fw-reg);
	line-height: 1.6em;
	letter-spacing:.3px;
	color: var(--clr-accent);
	margin-top: .25em;
	margin-bottom: .25em;
	text-align: left;
}

/* nav text */
.nav__link {
	position: relative;
	font-size: var(--fs-nav); /* font-size: clamp(0.875rem, 1vw, 1rem); */ /* 14px - 16px */
    font-weight: var(--fw-reg); /* var(--fw-bold); */
    line-height: 1.5em;
    text-decoration: none;
    display: block;
    margin: 0;
}

/* pads + desktop - font size */
@media (min-width: 800px) {
	.section__title--intro {
		line-height: 1.2em;
	}
}


/* header */
/*-------------------*/
header {
	position: relative;
	/* top: 2%; */
	/* 
	background: url(../imgs/header-2.jpg);
	background-size: cover;
	background-position: center;
    background-repeat: no-repeat;
	background-blend-mode: multiply; 
	*/
}
.logo {
	position: absolute;
	width: 100%;
	max-width: 330px;
	padding-top: 2.35em;
	padding-left: 2.8em;
	z-index: 11;
}
.body-no-scroll { /* to prevent body from scrolling when hamburger menu is open */
    height: 100vh;
    width: 100vw;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
}


/* mobile */
@media (max-width: 1299px) { 
	header {
	    display: flex;
	    justify-content: flex-start;
	}
	.nav { 
	    position: fixed;
	    background: linear-gradient(190deg, var(--clr-bkg-two), 50%, var(--clr-light)); 
	    /* background: var(--clr-dark); */
	    color: var(--clr-black); /* var(--clr-accent-secondary); */
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    z-index: 100;
	    transform: translateX(100%);
	    transition: transform 200ms cubic-bezier(.5, 0, .5, 1);
	    padding: 2em;
	    height: 100%;
	    overflow-y: scroll;
	    overflow-x: hidden;
	}
	.nav__container {
	    display: flex;
	    height: 20em;
	    min-height: 550px;
	    flex-direction: column;
	    justify-content: flex-start; /* space-evenly; */
	    align-items: center;
	    margin: 0;
	    padding-top: 6em;
	}
	.nav__item {
		padding-bottom: 0.5em;
	}
	.nav__list .btnround {
		margin-top: 3em;
	}
	.nav__container .logo {
		position: relative;
		width: 220px;
		padding: 0;
		margin-bottom: 3em;
		margin-left: -2em;
	}
	.logo {
		max-width: 270px;
		padding-left: 2em;
	}
}

.nav__list { 
	position: relative;
	list-style: none;
	text-align: left;
	z-index: 5;
	/* position: fixed; */
}

.nav__item {
	flex: none; /* to prevent flexbox from squishing it */
	justify-content: flex-start;
    align-items: flex-start;
}

.nav__link {
	position: relative;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}

.nav__link:hover {
   /* color: var(--clr-accent); */
}

.nav__link:hover::before { /* underline nav link when hovered over */
	width: 100%;
}

.nav__link::before { /* underline */
    content: "";
    height: 1.5px;
    background: var(--clr-accent);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: -.3rem;
    left: 0;
    transition: width 0.3s;
}
.nav__link::before { /* active state has no underline */
	width: 0%;
}
.nav-active::before { /* active state has underline */
    width: 100% !important;
}

.nav-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: 2.5em;
    top: 2.5em;
    width: 35px;
    height: 30px;
    z-index: 101;
}

.nav-open .nav {
    transform: translateX(0);
}

.nav-open .nav-toggle {
    position: fixed;
}

.nav-open .hamburger {
    transform: rotate(.625turn);
}

.nav-open .hamburger::before {
    transform: rotate(90deg) translateX(-7px);
}

.nav-open .hamburger::after {
    opacity: 0;
}

/*
.nav-open .hamburger,
.nav-open .hamburger::before,
.nav-open .hamburger::after {
    background: var(--clr-accent);
}
*/

.hamburger {
    display: block;
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    background: var(--clr-accent);
    width: 2em;
    height: 3px;
    border-radius: 1em;
    transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

.hamburger::before { top: 7px; }
.hamburger::after { bottom: 7px; }


/* pads */
/*
@media (min-width: 1100px) and (max-width: 1299px) {
}
*/

/* pads + desktop */
@media (min-width: 1300px) {
	header {
	    display: grid;
	}
	.nav { 
	    color: var(--clr-dark);
	    transform: none;
	    transition: none;
	}
	.nav__container {
	    grid-template-columns: 100px 100%;
	    padding-top: 2.5em;
	    padding-right: 4em;
	}
	.nav__list {
		display: flex;
	    flex-direction: row;
	    justify-content: flex-end;
    	align-items: center;
    	gap: 2rem;
	    margin: 0;
	    width: 100%;
	}
	.nav__item {
		text-align: right;
	}
	.nav-toggle, .nav__container .logo {
	    display: none;
	}	
}


/* Intro section */
/*-------------------*/
/* Hero Section */
.top-header {
	position: relative; 
	width: 100vw;
	height: 100vh;
	/* background: linear-gradient(180deg, var(--clr-bkg-grad1), 40%, var(--clr-bkg-top)); */
}
.intro {
	position: relative;
	width: 95vw;
	height: 100%;
	/* max-width: clamp(60vw, 70vw, 80vw); */ /* 464px - 562px */ 
    /* margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem); */ /* 60px - 220px */
  	display: flex;
	align-items: left; /* center for mobile perhaps, be sure then to text-align center title and subtitle */
	flex-wrap: nowrap;
	box-sizing: border-box;
	flex-direction: column;
	margin: 0 auto;
  	/*
    align-items: flex-start;
    column-gap: 1.25rem;
    */
}
.hero {
	position: absolute;
	width: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
    
}
#home {
	justify-content: flex-start;
}
#home-header .hero {
	background-image: url(../imgs/header-4_tablet.jpg);
	background-position-y: 0rem !important;
}
/* Color Overlay on Hero */
#home-header .hero:before,
#tech-header .hero:before, /* technology page */
#eco-header .hero:before, /* economics page */
#sust-header .hero:before { /* sustainability page */
    content: '';
    width: 100%;
    height: 100%;
    background: #FFF; /* white color overlay */
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
}
/* Left Line */
/*
#home-header:before {
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%); */ /* FF3.6-15 */
    /* background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%); */ /* Chrome10-25,Safari5.1-6 */
    /* opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 10%;
} */
/* Right Line */
/*
#home-header:after {
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%); */ /* FF3.6-15 */
    /* background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%); */ /* Chrome10-25,Safari5.1-6 */
    /* opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 10%;
  } */

.btn-group {
	display: flex;
    align-items: left;
    justify-content: left;
}

/* Body Sections */
.bodyintro {
	position: relative;
	margin: 0 auto;
    /* margin-left: clamp(2rem, 11vw, 20rem); */
}
.section__img img {
	border-top: 0.2rem double var(--clr-accent); /* var(--clr-gradient-blue) */
	padding-top: 0.2rem;
	opacity: 1;
	z-index: 3;
	border-radius: 1rem;
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
	/* hero section */
	#home-header, #home-header .hero {
		min-height: 600px;
	}
	#home-header .hero {
		background-position-x: 40%;
		height: 100vh;
	}
	#home {
		top: 9%;
	}
	.btn-group {
	    flex-direction: column;
	    gap: clamp(1rem, 2.3vw, 1.25rem); /* 16px - 20px */
	}
	/* body sections */
	.bodyintro {
		width: 95vw;
		padding: 1.8em 1.5em;
	}
	#bodyintro1 .section-text {
		padding-top: 2em;
		margin-bottom: -.5em;
	}
	#bodyintro2 .section-container,
	#bodyintro3 .section-container {
		width: 100%;
	    /* max-width: 50rem; */ /* changes to 1280px on tablet */
	    padding: 0;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    /* 48px - 108px */
	    gap: 6vw; /* clamp(2rem, 8vw, 6.75rem); */
	    position: relative;
	    margin-top: -.5em;
	    margin-bottom: 0em;
	}
	#bodyintro2 .section-text,
	#bodyintro3 .section-text {
		/* set text align to left if content needs to be left aligned */
	    text-align: left;
	    width: 100%;
	    /* changes at tablet */
	    /* max-width: 27.125rem; */
	    display: flex;
	    flex-direction: column;
	    /* centers content horizontally, set to flex-start to left align */
	    align-items: flex-start;
	}
	#bodyintro4 {
		width: 100vw;
	    padding: 1.8em 3em;
	    margin-top: 2em;
	    background: var(--clr-gradient-blues);
	    position: relative;
	    z-index: 1;
  	}
  	#bodyintro4 .section-container {
	    width: 100%;
	    max-width: 80rem;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: clamp(3rem, 6vw, 4rem); /* 48px - 64px */
	}
	#bodyintro4 .section-text {
	    text-align: center; /* set text align to left if content needs to be left aligned */
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center; /* centers content horizontally, set to flex-start to left align */
	    gap: 4vw;
	    /* gap: clamp(3rem, 6vw, 4rem); */ /* 48px - 64px */
	 }
	#bodyintro4 .section__title__body-big {
		color: var(--clr-light);
		font-size: var(--fs-h3);
	}
	#bodyintro4 .section-bkg {
	    width: 100%;
	    height: 100%;
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -1;
	    object-fit: cover; /* makes it act like a background image */
	}
	.bodyintro .img_border {
		width: 100%;
	}
}

/* Tablet + Desktop - 768px */
@media only screen and (min-width: 48rem) { /* 768px */
	/* hero section */
	.intro {
		width: 80vw;
		margin-left: clamp(2rem, 11vw, 20rem);
	}
	#home {
		top: 11%;
		/* padding-top: 15vh; */
	}
	.btn-group {
	    flex-direction: row;
	}
	/* body sections */
	.bodyintro {
		width: 90vw;
		padding: 2em 1.5em;
	}
	#bodyintro1 {
		width: 100vw;
		padding: 1.5em 0;
		margin: 0;
	}
	#bodyintro1 .section-container:before {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		width: 9vw;
		height: 21rem;
		margin-top: 8.5rem;
		z-index: 2;
		background: var(--clr-gradient-blue);
	}
	#bodyintro1 .section-container {
		width: 90vw;
		padding: 1.2em 1.5em;	
	}
	#bodyintro1 .section-text {
		width: 50vw;
		margin: 0 auto;
		padding: 4.5em 0 1.8em 0;
	}
    #bodyintro2 .section-container,
    #bodyintro3 .section-container {
        /* max-width: 80rem; */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5vw;
    }
    #bodyintro2 .section__img,
    #bodyintro3 .section__img {
        /* 344px - 434px */
        width: 40vw; /* clamp(21.5rem, 80.5vw, 27.125rem); */
        max-width: 40rem;
        flex: none;
    }
    #bodyintro2 .section__img {
    	order: 2;
    }
    #bodyintro2 .section-text,
    #bodyintro3 .section-text {
        margin: 0;
        width: 55%;
        max-width: 35rem;
        padding: 2em 1em;
    }
    #bodyintro4 {
    	margin-top: 5em;
    }
    #bodyintro4 .section-text {
    	text-align: center;
	    flex-direction: column;
	    justify-content: flex-start;
	    gap: 2vw;
    }
    .bodyintro .img_border {
		width: 40vw;
	}
}

/* Desktop */
@media (min-width: 88rem) { /* 1408px */
	.intro {
		width: 70vw;
		/* max-width: lamp(29rem, 60vw, 33.125rem); */ /* 464px - 562px */ 
	}
	#home {
		top: 9%;
	}
	.btn-group {
	    flex-direction: row;
	    align-items: center;
	}
	.bodyintro {
		width: 95vw;
		padding: 4em 1.5em;
	}
	#bodyintro1 .section-container:before {
		height: 17rem;
		margin-top: 10rem;
	}
	#bodyintro1 .section-container {
		padding: 2.5em 1.5em 1.2em 1.5em;	
	}
	#bodyintro2 .section-text,
    #bodyintro3 .section-text {
        width: 50%;
        max-width: 35rem;
        padding: 2em 3em;
    }
    #bodyintro2 h3, #bodyintro2 p,
    #bodyintro3 h3, #bodyintro3 p {
    	width: 90%;
    }
    #bodyintro2 .section__img,
    #bodyintro3 .section__img {
        padding: 0 1vw;
    }
    #bodyintro4 {
    	margin-top: 5em;
    	padding: 5em 3em;
    }
    #bodyintro4 .section-text {
    	text-align: left;
	    flex-direction: row;
	    justify-content: space-between;
    }
    .bodyintro .img_border {
		padding: 0 1vw;
	}
}



/* 1. Technology section */
/*-------------------*/
#tech-header .hero {
	background-image: url(../imgs/ocean-data.jpg);	
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
	/* hero section */
	#tech-header, #tech-header .hero {
		height: 100%;
		min-height: 540px;
	}
	#tech {
		padding-top: 28%;
	}
	/* body sections */
	#bodytech1 .section-text {
		padding-top: 2.2em;
	}
	#bodytech2 .section-container,
	#bodytech3 .section-container {
		position: relative;
		width: 100%;
	    padding: 0;
	    margin: auto;
	    display: flex;
	    align-items: flex-start;
	}
	#bodytech2 .section-container {
		flex-direction: column;
	    gap: 2em; 
	    margin-top: -1em;
	}
	#bodytech3 .section-container {
		flex-direction: row;	
	}
	#bodytech2 .section-text,
	#bodytech3 .section-text {
	    text-align: left;
	    width: 100%;
	    display: flex;
	}
	#bodytech2 .section-text {
		flex-direction: column;
	    align-items: flex-start; /* centers content horizontally, set to flex-start to left align */
	}
	#bodytech3 .section-text {
		flex-direction: row;
	    align-items: center;
	    margin-top: -1em;
	}
	#bodytech4 {
		width: 100vw;
		padding: 0;
	    margin-top: 1em;
	    background: var(--clr-gradient-blues);
	    position: relative;
	    z-index: 1;
  	}
  	/*
  	#bodytech4 .section-container {
	    width: 100%;
	    max-width: 80rem;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: clamp(3rem, 6vw, 4rem);
	}
	#bodytech4 .section-text {
	    text-align: center; 
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: 4vw;
	}
	#bodytech4 .section__title__body-big {
		color: var(--clr-light);
		font-size: var(--fs-h3);
	}
	*/ 
	#bodytech4 .section-bkg {
	    width: 100%;
	    height: 100%;
	    display: block;
	    position: relative;
	    top: 0;
	    left: 0;
	    z-index: 0;
	    /* object-fit: cover; */ /* makes it act like a background image */
	}
}

/* Tablet + Desktop - 768px */
@media only screen and (min-width: 48rem) { /* 768px */
	/* hero section */
	#tech-header, #tech-header .hero {
		height: 100vh;
		min-height: 550px;
	}
	#tech {
		justify-content: center;
		padding-top: 12%;
		/* padding-top: 12%; */
	}
	/* body sections */
	#bodytech1 {
		width: 100vw;
		padding: 0em 0;
		margin: 0;
	}
	#bodytech1 .section-container:before {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		width: 9vw;
		height: 17rem;
		margin-top: 7rem;
		z-index: 2;
		background: var(--clr-gradient-blue);
	}
	#bodytech1 .section-container {
		width: 90vw;
		padding: 1.2em 1.5em 1em 1.5em;	
	}
	#bodytech1 .section-text {
		width: 50vw;
		margin: 0 auto;
		padding: 4.8em 0 2.2em 0;
	}
    #bodytech2 .section-container,
    #bodytech3 .section-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #bodytech2 .section-container {
    	gap: 5%;	
    	margin-top: 0rem;
    	padding-top: 0;
    }
    #bodytech2 .section__img {
        width: 40vw; 
        max-width: 40rem;
        flex: none;
    }
    #bodytech2 .section__img {
    	/* order: 2; */
    }
    #bodytech2 .section-text,
    #bodytech3 .section-text {
        margin: 0;
    }
    #bodytech2 .section-text {
    	width: 55%;
        max-width: 35rem;
        padding: 1em 1em;
    }
    #bodytech3 .section-text {
    	width: 80%;
        max-width: 55rem;
        padding-top: 1em;
        padding-bottom: 0;
    }
    #bodytech4 {
    	margin-top: 1.2em;
    }
    /*
    #bodytech4 .section-text {
    	text-align: center;
	    flex-direction: column;
	    justify-content: flex-start;
	    gap: 2vw;
    }
    */
}

/* Desktop */
@media (min-width: 88rem) { /* 1408px */
	#tech {
		padding-top: 0%;
		margin-top: -12%;
	}
	/* body sections */
	#bodytech1 .section-container:before {
		height: 15rem;
		margin-top: 8em;
	}
	#bodytech1 .section-container {
		padding: 3em 1.5em;	
	}
	#bodytech2 .section-text{
        width: 50%;
        max-width: 35rem;
        padding: 2em 3em;
    }
    #bodytech2 h3, #bodyintro2 p {
    	width: 90%;
    }
    #bodytech2 .section__img {
        padding: 0 1vw;
    }
    #bodytech3 .section-text {
        width: 70%;
        max-width: 50rem;
        padding-top: 2em;
        padding-bottom: 0;
    }
    #bodytech4 {
    	margin-top: .6em;
    }
    /*
    #bodytech4 .section-text {
    	text-align: left;
	    flex-direction: row;
	    justify-content: space-between;
    }
    */
}




/* 2. Economics section */
/*-------------------*/
#eco-header .hero {
	background-image: url(../imgs/fishwater.jpg);	
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
	/* hero section */
	#eco-header, #eco-header .hero {
		height: 450px;
		min-height: 450px;
	}
	#eco {
		justify-content: center;
	}
	/* body sections */
	#bodyeco1 .section-text {
		padding-top: 2em;
	}
	#bodyeco2 .section-container,
	#bodyeco3 .section-container {
		width: 100%;
	    padding: 0;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    position: relative;
	}
	#bodyeco2 .section-container {
		gap: 8vw; 
		margin-top: -1.5em;
		margin-bottom: -1.5em;
	}
	#bodyeco3 .section-container {
		padding: 2rem 0rem;
	}
	#bodyeco2 .section-text,
	#bodyeco3 .section-text {
	    text-align: left;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start; /* centers content horizontally, set to flex-start to left align */
	}
	#bodyeco4 {
		width: 100vw;
	    padding: 3em 2em;
	    margin-top: 2.5em;
	    background: var(--clr-gradient-blues);
	    position: relative;
	    z-index: 1;
  	}
  	#bodyeco4 .section-container {
	    width: 100%;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: clamp(3rem, 6vw, 4rem); /* 48px - 64px */
	}
	#bodyeco4 .section-text {
	    text-align: center; /* set text align to left if content needs to be left aligned */
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center; /* centers content horizontally, set to flex-start to left align */
	    /* gap: 4vw; */
	    /* gap: clamp(3rem, 6vw, 4rem); */ /* 48px - 64px */
	    padding: 2rem 0rem;
	 }
	#bodyeco4 .section__title__body-big {
		color: var(--clr-light);
		font-size: var(--fs-h3);
	}
	#bodyeco4 .section-bkg {
	    width: 100%;
	    height: 100%;
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -1;
	    object-fit: cover; /* makes it act like a background image */
	}
}

/* Tablet + Desktop - 768px */
@media only screen and (min-width: 48rem) { /* 768px */
	/* hero section */
	#eco-header, #eco-header .hero {
		height: 100vh;
		min-height: 450px;
	}
	#eco {
		justify-content: center;
		padding-top: 0%;
	}
	/* body sections */
	#bodyeco1 {
		width: 100vw;
		padding: 1.5em 0;
		margin: 0;
	}
	#bodyeco1 .section-container:before {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		width: 9vw;
		height: 17rem;
		margin-top: 6rem;
		z-index: 2;
		background: var(--clr-gradient-blue);
	}
	#bodyeco1 .section-container {
		width: 90vw;
		padding: 1.2em 1.5em;	
	}
	#bodyeco1 .section-text {
		width: 50vw;
		margin: 0 auto;
		padding: 4.8em 0 2.2em 0;
	}
    #bodyeco2 .section-container,
    #bodyeco3 .section-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5vw;
    }
    #bodyeco2 .section__img {
        /* 344px - 434px */
        width: 40vw; /* clamp(21.5rem, 80.5vw, 27.125rem); */
        max-width: 40rem;
        flex: none;
    }
    #bodyeco2 .section__img {
    	order: 2;
    }
    #bodyeco2 .section-text {
        margin: 0;
        width: 55%;
        max-width: 35rem;
        padding: 2em 1em;
    }
    #bodyeco3 .section-text {
        margin: 0;
        width: 68%;
        max-width: 55rem;
        padding: 3em 1em;
    }
    #bodyeco4 {
    	margin-top: 7em;
    }
    #bodyeco4 .section-text {
    	text-align: center;
	    flex-direction: column;
	    justify-content: flex-start;
	    padding: 4.5rem 3rem;
    }
}

/* Desktop */
@media (min-width: 88rem) { /* 1408px */
	#eco {
		margin-top: -6%;
	}
	/* body sections */
	#bodyeco1 .section-container:before {
		height: 15rem;
		margin-top: 7rem;
	}
	#bodyeco1 .section-container {
		padding: 3em 1.5em;	
	}
	#bodyeco2 .section-text {
        width: 50%;
        max-width: 35rem;
        padding: 2em 3em;
    }
    #bodyeco3 .section-text {
        width: 60%;
        max-width: 45rem;
        padding: 2em 3em;
    }
    #bodyeco2 h3, #bodyintro2 p,
    #bodyeco3 h3, #bodyintro3 p {
    	width: 90%;
    }
    #bodyeco2 .section__img,
    #bodyeco3 .section__img {
        padding: 0 1vw;
    }
    #bodyeco4 {
    	margin-top: 5em;
    	padding: 5em 3em;
    }
    #bodyeco4 .section-text {
    	text-align: left;
	    flex-direction: row;
	    justify-content: space-between;
	    width: 65%;
	    text-align: center;
	    margin: 0 auto;
	    /* padding-left: 12rem;
	    padding-right: 4rem; */
    }
}


/* 3. Sustainability section */
/*------------------------*/
#sust-header .hero {
	background-image: url(../imgs/sustainability.jpg);	
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
	/* hero section */
	#sust-header, #sust-header .hero {
		/* height: 100%; */
		height: 450px;
		min-height: 450px;
	}
	#sust {
		justify-content: center;
		/* padding-top: 30%; */
	}
	/* body sections */
	#bodysust1 .section-text {
		padding-top: 2em;
	}
	#bodysust2 .section-container,
	#bodysust3 .section-container {
		position: relative;
		width: 100%;
	    padding: 0em 0;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: 7vw; 
	}
	#bodysust3 .section-container {
		padding-bottom: 2em;
		margin-top: -1em;
	}
	#bodysust2 .section-text,
	#bodysust3 .section-text {
	    text-align: left;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start; /* centers content horizontally, set to flex-start to left align */
	}
	#bodysust4 {
		width: 95vw;
	    padding-top: 0em;
	    padding-bottom: 1.5em;
	    margin-top: -.3em;
	    /* background: var(--clr-gradient-blues); */
	    position: relative;
	    z-index: 1;
  	}
  	#bodysust4 .section-container {
	    width: 100%;
	    max-width: 80rem;
	    margin: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: clamp(3rem, 6vw, 4rem); /* 48px - 64px */
	}
	#bodysust4 .section-text {
	    text-align: center; /* set text align to left if content needs to be left aligned */
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center; /* centers content horizontally, set to flex-start to left align */
	    gap: 4vw;
	    /* gap: clamp(3rem, 6vw, 4rem); */ /* 48px - 64px */
	 }
	#bodysust4 .section__title__body-big {
		color: var(--clr-dark);
		font-size: var(--fs-h2);
	}
	/*
	#bodysust4 .section-bkg {
	    width: 100%;
	    height: 100%;
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -1;
	    object-fit: cover; */ /* makes it act like a background image */
	/*}
	*/
}

/* Tablet + Desktop - 768px */
@media only screen and (min-width: 48rem) { /* 768px */
	/* hero section */
	#sust-header, #sust-header .hero {
		height: 100vh;
		bottom: 0;
	}
	#sust {
		justify-content: center;
		padding-top: 0%;
	}
	/* body sections */
	#bodysust1 {
		width: 100vw;
		padding: 1.5em 0;
		margin: 0;
	}
	#bodysust1 .section-container:before {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		width: 9vw;
		height: 15rem;
		margin-top: 7rem;
		z-index: 2;
		background: var(--clr-gradient-blue);
	}
	#bodysust1 .section-container {
		width: 90vw;
		padding: 1.2em 1.5em;	
	}
	#bodysust1 .section-text {
		width: 50vw;
		margin: 0 auto;
		padding: 4.8em 0 2.2em 0;
	}
    #bodysust2 .section-container,
    #bodysust3 .section-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5vw;
    }
    #bodysust3 .section-container {
    	padding-bottom: 6.8em;
    }
    #bodysust2 .section__img,
    #bodysust3 .section__img {
        /* 344px - 434px */
        width: 40vw; /* clamp(21.5rem, 80.5vw, 27.125rem); */
        max-width: 40rem;
        flex: none;
    }
    #bodysust2 .section__img {
    	order: 2;
    }
    #bodysust2 .section-text,
    #bodysust3 .section-text {
        margin: 0;
        width: 55%;
        max-width: 35rem;
        padding: 2em 1em;
    }
    #bodysust4 {
    	margin-top: 1em;
    	margin-bottom: 1em;
    	width: 80%;
    }
    #bodysust4 .section-text {
    	text-align: center;
	    flex-direction: column;
	    justify-content: flex-start;
	    /* gap: 2vw; */
    }
}

/* Desktop */
@media (min-width: 88rem) { /* 1408px */
	#sust {
		margin-top: -6%;
	}
	/* body sections */
	#bodysust1 .section-container:before {
		height: 13rem;
		margin-top: 9rem;
	}
	#bodysust1 .section-container {
		padding: 3em 1.5em;	
	}
	#bodysust2 .section-text,
    #bodysust3 .section-text {
        width: 50%;
        max-width: 35rem;
        padding: 2em 3em;
    }
    #bodysust2 h3, #bodyintro2 p,
    #bodysust3 h3, #bodyintro3 p {
    	width: 90%;
    }
    #bodysust2 .section__img,
    #bodysust3 .section__img {
        padding: 0 1vw;
    }
    #bodysust4 {
    	margin-top: -2em;
    	margin-bottom: 2em;
    	padding: 2em 3em;
    }
    #bodysust4 .section-text {
    	text-align: left;
	    flex-direction: row;
	    justify-content: center;
	    width: 60%;
	    /* padding-left: 15%; */
	    margin: 0 auto;
	    
    }
}


/* Experience section */
/*-------------------*/

/*
.my-experience {
	background-color: var(--clr-dark);
	background-image: url(../img/services-bg.jpg);
	background-size: cover;
	color: var(--clr-light);
	text-align: center;
}

.section__title--experience {
	color: var(--clr-accent);
	position: relative;
}

.section__title--experience::after {
	content: '';
	display: block;
	width: 2em;
	height: 1px;
	margin: 0.5em auto 1em;
	background: var(--clr-light); 
	opacity: 0.25;
}

.experiences {
	margin-bottom: 4em;
}

.experience {
	max-width: 500px;
	margin: 0 auto;
}
*/
/* desktop */
/*
@media (min-width: 800px) {
	.experiences {
		display: flex;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	.experience + .experience {
		margin-left: 2em;
	}
}
*/

/* Contact Page */
/*-------------------*/
#contact-header {
	position: relative;
	width: 100%;
	height: 100%;
}
.contact, .contact-form {
	position: relative;
	width: 90vw;
	/* margin-left: clamp(2rem, 11vw, 20rem); */
}
.contact {
	padding-top: 3rem;
	padding-bottom: 1rem;
	width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}
.contact-form {
	padding-top: 1rem;
	padding-bottom: 2rem;
}
/*
.contact-form__img {
	max-width: 250px;
	width: 100%;
	margin: 0 auto;
}
*/
.contact-form__body {
	margin-bottom: 30px;
}

/* mobile */
@media (max-width: 1299px) { 
	.contact {
		padding-top: 8rem;
		width: 95%;		
	}
	.contact-form {
		padding-bottom: 4rem;
	}
}
/* pad + desktop */
@media (min-width: 1300px) { 
	.contact {
	}
}

/* Contact Form */
/*-------------------*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-form {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: 1vw; /* clamp(3rem, 6vw, 4rem); */
        /* padding-bottom: 23vw; */
    }
    /*
    #contact-form .cs-content {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    */
    #contact-form #contactForm {
        width: 100%;
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 5.3vw, 2.5rem);
        /* 20px - 40px */
        padding: clamp(1.25rem, 4.5vw, 2.5rem);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        border: 1px solid #dad9e3;
        border-radius: .8rem;
    }
    #contact-form .cs-label {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.3vw, 1rem);
        line-height: 1.5em;
        font-weight: 700;
        /* 16px - 20px */
        margin-bottom: clamp(1rem, 1em, 1.25rem);
        color: var(--headerColor);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    #contact-form .cs-label-message {
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 4.5vw, 2.5rem);
    }
    #contact-form .cs-input,
    #contact-form .cs-textarea {
        font-size: 1rem;
        width: 100%;
        height: 4rem;
        margin-top: 0.25rem;
        padding-left: 1.25rem;
        /* set transparent border so on hover border doesn't make it glitch */
        border: 1px solid transparent;
        border-bottom: 1px solid #b4b2c7;
        /* prevents border & padding from affecting height */
        box-sizing: border-box;
        transition: border 0.3s;
    }
    #contact-form .cs-input:hover,
    #contact-form .cs-textarea:hover {
        border: 1px solid var(--clr-accent-secondary);
    }
    #contact-form .cs-input::placeholder,
    #contact-form .cs-textarea::placeholder {
        color: #7d799c;
    }
    #contact-form .cs-textarea {
        font-family: inherit;
        margin: 0;
        padding-top: 1.25rem;
        min-height: 7.5rem;
    }
    #contact-form .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--clr-accent);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #contact-form .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--clr-accent-secondary);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #contact-form .cs-button-solid:hover:before {
        width: 100%;
    }
    #contact-form .cs-submit {
        width: 100%;
        border: none;
        border-radius: 0.25rem;
    }
    #contact-form .cs-submit:hover {
        cursor: pointer;
    }
    #contact-form .cs-right-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        /* 28px - 40px */
        gap: clamp(1.75rem, 4vw, 2.5rem); /* gap: clamp(1.75rem, 4vw, 2.5rem); */
        position: relative;
    }
    #contact-form .cs-ul {
        padding: 0;
        /* 16px - 32px */
        padding-left: clamp(1rem, 3vw, 2rem);
        margin: 0;
        width: 100%;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    #contact-form .cs-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #contact-form .cs-li:hover .cs-icon-wrapper {
        transform: scale(1.08);
    }
    #contact-form .cs-li:nth-of-type(3) {
        padding-bottom: 1.25rem;
        border-bottom: none; /* border-bottom: 1px solid #dad9e3; */
    }
    #contact-form .cs-header {
        /* 16px - 20px */
        font-size: var(fs-body);
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.5rem;
        /* color: var(--headerColor); */
        display: block;
    }
    #contact-form .cs-link {
        /* 16px - 20px */
        font-size: var(fs-body);
        line-height: 1.2em;
        text-decoration: none;
        color: var(--bodyTextColor);
        position: relative;
    }
    #contact-form .cs-link:hover:before {
        width: 100%;
    }
    #contact-form .cs-link:before {
        /* top right box */
        content: "";
        width: 0%;
        height: 2px;
        /* current color of parent */
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #contact-form .cs-block {
        /* drop the address to two lines */
        display: block;
    }
    #contact-form .cs-icon-wrapper {
        /* 32px - 36px */
        margin-right: 1.2em;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition: transform 0.3s;
    }
    #contact-form .cs-icon {
        /* 32px -36px */
        width: 1.5em;
        height: auto;
        display: block;
    }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #contact-form #contactForm {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        /* sends it to the right in the 2nd position */
        /* order: 2; */
        width: 80vw; 
    }

    #contact-form .cs-label:nth-child(1) { /* name input field */
    	flex-grow: 1;
    	width: 100%;
    }
    /*
    #contact-form #email, #contact-form .cs-label #phone {
    	flex-grow: 0.5; // flex-basis
    	width: 100%;
    }
    */
    #contact-form .cs-label {
        width: 48%;
    }
    #contact-form .cs-label-message {
        width: 100%;
    }
    #contact-form .cs-button-solid {
        margin-left: 0;
    }
    #contact-form .cs-right-section {
        flex-direction: row;
        align-items: center;
        width: 80vw;
        padding-bottom: 3em;
        margin-top: -2em;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 75rem) {
    #contact-form {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        column-gap: 1.25em;
        row-gap: 4rem;
        padding-bottom: 3.5em;
    }
    #contact-form #contactForm {
        width: 75vw;
        max-width: 47.625rem;
        order: 2;
    }
    #contact-form .cs-label {
        width: 100%;
    }
    #contact-form .cs-right-section {
        width: 25%;
        max-width: 21.875rem;
        /* prevents flexbox from squishing it */
        flex: none;
        flex-direction: column;
    }
    #contact-form .cs-block {
        /* sets address stay in one line */
        display: inline-block;
    }
}

#success {
	/* color: white;
	background: rgba(91, 171, 159, .9); */
  	width: 100%;
  	margin: 0 auto;
  	text-align: center;
}

/* success/error message on home contact page */
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
/*
.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}
*/
.alert-success {
  color: #ededed;
  background-color: #436b5c; /* #4e4e4e */
  border-color: #171717;
}
.alert-danger {
  color: #842029;
  background-color: #999797; /* #888888 */
  border-color: #717171;
}
.close {
  float: right;
  font-size: 21px;
  /*font-weight: 700;*/
  line-height: 1;
  color: #fff;
  /*text-shadow: 0 1px 0 #fff;*/
  filter: alpha(opacity=50);
  opacity: .5;
  background: 0 0;
  border: 0;
}
.close:hover {
  opacity: .8;
}



/* Footer section */
/*-------------------*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer {
        padding: var(--sectionPadding);
        background: linear-gradient(190deg, var(--clr-bkg-two), 50%, var(--clr-light));
    }
    #footer .footer-container {
        width: 100%;
        max-width: 43rem; /* reset on desktop */
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 2.5rem;
        padding: 0 1.5rem;
    }
    #footer .footer-logo-group {
    	position: relative;
        width: 100%; /* takes up all the space, lets the other ul's wrap below it */
    }
    #footer .footer-logo {
        width: 12.5rem;
        height: auto;
        display: block;
        margin-bottom: 1.5rem;
    }
    #footer .footer-logo-img {
        width: 100%;
        height: auto;
    }
    /* #footer .footer-logo-img.dark {
        display: none;
    } */
    #footer .footer-text {
        /* 14px - 16px */
        font-size: var(--fs-footer); /* clamp(0.875rem, 2.5vw, 1rem); */
        line-height: 1.5em;
        margin: 0;
        width: 78%;
        max-width: 26.25rem; /* changes to 305px at desktop */
        color: var(--clr-black);
    }
    #footer .footer-nav {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }
    #footer .footer-nav-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    #footer .footer-header {
        font-size: var(--fs-body);
        line-height: 1.2em;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: var(--clr-accent);
        position: relative;
        display: block;
    }
    #footer .footer-nav-link, #footer .footer-nav-nolink {
        font-size: var(--fs-footer);
        line-height: 1.5em;
        text-decoration: none;
        color: var(--clr-black);
        position: relative;
        display: inline-block;
        transition: color 0.3s;
    }
    #footer .footer-nav-link:before { /* underline */
        content: "";
        width: 0%;
        height: 0.095rem;
        background: var(--clr-accent);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width 0.3s;
    }
    #footer .footer-nav-link:hover {
        color: var(--clr-black);
    }
    #footer .footer-nav-link:hover:before {
        width: 100%;
    }
    #footer .footer-nav-nolink {
    	cursor: unset;
    }
    #footer .footer-icon {
        width: 1.2rem;
        height: auto;
        margin-right: 0.75rem;
    }
    #footer .footer-bottom {
        max-width: 80rem;
        margin: auto;
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: .5px solid #d0d5d5;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #footer .footer-copyright,
    #footer .footer-copyright-link {
        font-size: var(--fs-nav);
        line-height: 1.5em;
        color: #8a8a8a;
    }
    #footer .footer-copyright-link {
        text-decoration: none;
        transition: color 0.3s;
    }
    #footer .footer-copyright-link:hover {
        color: var(--clr-black);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #footer .footer-container {
        row-gap: 0;
        flex-direction: row;
        justify-content: space-between;
        row-gap: 2.5rem;
    }
    #footer .footer-nav {
        width: auto;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #footer .footer-container {
        max-width: 80rem;
        flex-wrap: nowrap;
        justify-content: flex-end; /* align everything to the right */
        column-gap: 8.25rem;
        padding: 0 3.5rem;
    }
    #footer .footer-logo-group {
        width: 20%;
        max-width: 24.1875rem;
        margin-right: auto; /* pushes away from everything to the right */
    }
    #footer .footer-text {
        width: 100%;
    }
    /*
    #footer .footer-nav {
        width: 100%;
    }
    */
    #footer .footer-bottom {
    	justify-content: left;
        align-items: center;
        padding-left: 3.5rem;
    }
}

/* Footer section */
/*-------------------*/

/*
.footer {
	background: var(--clr-bkg-one);
	color: var(--clr-dark);
	text-align: center;
	padding: 2.5em 0;
	font-size: var(--fs-h3);
}

.footer a { 
	color: inherit;
	text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
	opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
    color: var(--clr-accent);
}

.social-list__item {
    margin: 0 .5em;
}

.social-list__link {
    padding: .5em;
}
*/