/*globle*/
@import url('https://fonts.googleapis.com/css2?family=Rasa:wght@300&display=swap');

/*   variables */
:root {
	--light: rgb(222, 223, 207);
	--mediumL: rgb(197, 197, 183);
	--mediumD: rgb(159, 159, 148);
	--dark: rgb(95, 95, 88);
	--dark2: #343432;
}

/*golbal*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Rasa', serif;
	font-size: 16px;
	color: #fff;
	letter-spacing: 0.1em;
}

/*
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*/

body {
	min-height: 100vh;
	/* mobile viewport bug fix */
	min-height: -webkit-fill-available;
}

/*end golbal*/

.header_web {
	background: linear-gradient(
		210deg,
		rgba(11, 188, 190, 1) 7.69%,
		rgba(5, 128, 64, 1) 20.05%,
		rgba(71, 166, 221, 1) 35.14%,
		rgba(1, 85, 67, 1) 46.36%,
		rgba(1, 92, 76, 1) 48.9%,
		rgba(1, 109, 102, 1) 53.13%,
		rgba(0, 138, 143, 1) 58.49%,
		rgba(0, 172, 191, 1) 63.85%,
		rgba(4, 87, 106, 1) 77.44%,
		rgba(0, 134, 148, 1) 86.16%,
		rgba(0, 110, 171, 1) 98.48%
	);
	/*    float: left;*/
	/*    top: 0px;*/
	width: 100%;
	height: 370px;
}

/* .graphicsHeader {
	background: linear-gradient(
		210deg,
		rgba(27, 20, 100, 1) 7.72%,
		rgba(41, 171, 226, 1) 26.52%,
		rgba(0, 113, 188, 1) 44.04%,
		rgba(6, 121, 193, 1) 79.69%,
		rgba(0, 0, 255, 1) 94.81%,
		rgba(40, 59, 153, 1) 100%
	);
	
	width: 100%;
	height: 370px;
} */
/* remove padding between nav and header*/
.container {
	margin: 0;
	padding: 0;
}

#aniContainer {
	visibility: hidden;
	position: relative;
	display: grid;
	height: 100vh;
	grid-gap: 10px;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 1fr);
}

/*end grid container*/
/*
#imgContainer {
    visibility: hidden;
}
*/
/*   web icons   */

.iconContainer {
	grid-column: 1/ 5;
	grid-row: 1/5;
	padding-left: 5%;
}

.iconContainerNested {
	max-height: 370px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-gap: 5.75px;
	justify-items: center;
	align-items: center;
}

svg-container,
h3 {
	font-size: 1.25em;
	text-align: center;
	text-shadow: 0.25px 0.25px 0.75px #000000;
}

.icon1 {
	grid-row: 4/5;
	width: 2.75em;
}

.icon2 {
	grid-column: 2;
	grid-row: 2/3;
	width: 3em;
}

.icon3 {
	grid-column: 3;
	grid-row: 2/5;
	width: 2.75em;
	margin-left: 25%;
}

/*   text container   */
#textContainer {
	grid-column: 4/ 9;
	grid-row: 1/5;
	/*    padding-bottom: 5em;*/
}

.bannerTextNested {
	max-height: 370px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(1, 1fr);
	grid-gap: 5px;
	justify-items: center;
	align-items: end;
}

.heading {
	font-size: 2em;
	text-transform: uppercase;
	text-shadow: 0.25px 0.25px 0.75px #000000;
}

.statement {
	font-size: 1.25em;
	font-style: italic;
	text-align: center;
	text-shadow: 0.25px 0.25px 0.75px #000000;
}

.slogan {
	font-size: 1em;
	font-style: italic;
	text-align: center;
	text-shadow: 0.25px 0.25px 0.75px #000000;
}

/*   workspace container   */
.workspace {
	grid-column: 7/ -1;
	grid-row: 1/5;
}

.workspaceNested {
	max-height: 370px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(1, 1fr);
	grid-gap: 5px;
	justify-items: center;
	padding-top: 3em;
	padding-right: 5%;
}

.wsW {
	width: 12em;
}

.web-h2 {
	background: rgb(95, 95, 88);
	text-align: center;
}

/*   =*=*=*=*=*=*= MEDIA QURIES =*=*=*=*=*=*= =============   */

/* Small devices (landscape phones, 576px and up) */

@media screen and (min-width: 576px) {
	/*
    body {
        color: red;
        
    }
*/

	svg-container,
	h3 {
		font-size: 1em;
	}

	.icon1 {
		width: 2.5em;
	}

	.icon2 {
		width: 2.75em;
	}

	.icon3 {
		width: 2.5em;
	}

	.wsW {
		width: 1em;
	}

	.heading {
		font-size: 1.75em;
	}

	.statement {
		font-size: 1em;
	}

	.slogan {
		font-size: 0.75em;
	}
}

/* Medium devices (tablets, 768px and up) */

@media screen and (min-width: 768px) {
	/*
 body {
        color: yellow;
    }
*/

	.icon1 {
		width: 3em;
	}

	.icon2 {
		width: 3.25em;
	}

	.icon3 {
		width: 3em;
	}

	.wsW {
		width: 15em;
	}

	.heading {
		font-size: 2.25em;
	}

	.statement {
		font-size: 2em;
	}

	.slogan {
		font-size: 1.25em;
	}
	.wsW {
		width: 15em;
	}
}

/*  Large devices (desktops, 992px and up) */

@media screen and (min-width: 992px) {
	/*
   body{
        color: green;   
       
}
*/
	.icon1 {
		width: 3em;
	}

	.icon2 {
		width: 3.25em;
	}

	.icon3 {
		width: 3em;
	}

	.wsW {
		width: 15em;
		padding-left: 5%;
	}

	.heading {
		font-size: 2.5em;
	}

	.statement {
		font-size: 2.25em;
	}

	.slogan {
		font-size: 1.5em;
	}
}

/* Extra large devices (large desktops, 1200px and up) */

@media screen and (min-width: 1200px) {
	/*
    body{
        color: purple;
    }
*/
	svg-container,
	h3 {
		font-size: 1.08em;
	}

	.icon1 {
		width: 3.5em;
	}

	.icon2 {
		width: 3.75em;
	}

	.icon3 {
		width: 3.25em;
	}

	.wsW {
		width: 22em;
	}

	.heading {
		font-size: 3.25em;
	}

	.statement {
		font-size: 3em;
	}

	.slogan {
		font-size: 2em;
	}
}