:root{
	--base-color: #ffffff;
	--text-color: #000000;
	-primary-color: #ffc06e;
	--secondary-color: #8D8DFF;
	--color-1: #F9F6F3;
	--color-2: #F3F7F9;
	--color-3: #F6F3F9;
}
/*  *: selects all elements */
/*padding makes sure space between element and border is 0*/
/*margin makes sure space between this element and other elements is 0*/
/*boxsizing borderbox include padding and border withing specified width and height*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*styles html page*/
/*color sets text color to --text-color*/
html {
	color: var(--text-color);
}
/*styles body tag*/
/*padding sets spaccing between border and element to be 1em*/
/*set background-color to --base-color*/
body {
	padding: 1em;
	background-color: var(--base-color);
}
/*styles navagation anchor*/
/*text decoration: add underline when hovered over*/
nav a:hover{
	text-decoration: underline;
}
/*styles heading and grid*/
/*max width doesn't let width of container go bigger than 1200pixes*/
/*margin auto centers block-level element inside container*/
/*padding spaces top and bottom 10rem. Also, left and right 1 rem.*/
/*text-align centers text heeading text and centers grid texts*/
.section-container{
	max-width: 1200px;	
	margin: auto;
	padding: 10rem 1rem;
	text-align: center;
}
/*styles testimonial text*/
/*font size set to 1.5rem*/
/*font weight changes boldness to 600*/
/*set color of text to --text-color*/
.section-container h2{
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-color);
}
/*styles "what our customer have to say" text*/
/*position styles relative to other elements*/
/*bottom margin space of 2 rem*/
/*font size changes text size to 2.5rem*/
/*font weight changes boldness to 600*/
/*color of text should be --text-color*/
.section-container h1{
	position: relative;
	margin-bottom: 2rem;
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--text-color);
}
/*styles after the section container*/
/*position set to absolute ignores regular flow of document*/
/*content "" is for decorative element*/
/*left push element to 50% of screen from the left*/
/*bottom has 0 spacing*/
/*transform moves element 50% of its own width to the left*/
/*height styles a decortive of 2pixels high*/
/*width styles a decortive of 5rem*/
/*background-color mean the color of decorative element set to black*/
.section-container h1::after{
	position: absolute;
	content: "";
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	height: 2px;
	width: 5rem;
	background-color: black;
}
/*styles the grid of testimonial*/
/*displays a grid layout*/
/*repeat specifies the column should be repeated 3 times. 1fr unit ensures columns share remaining space equally.*/ 
/*gap sets space between grid items*/
.section-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
/*styles individual grid items*/
/*position relative places element in  normal document flow*/
/* isolation creates a new stacking context for the grid item ensuring grid item doesn't interfere with element outside the grid item*/
/*overflow hidden hide text that overflows outside the grid item*/
/*padding provides space between element and border in order of top right bottom left*/
/*background color of grid item is white*/
/*border radius rounds the edges of grid elements*/
/*box: shadow places a shadow offset 5pixels horizontally and vertically with a blur radius of 10pixels and semi transparent black*/

.section-card{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 5rem 2rem 2rem;
	background-color: white;
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
	
}

/*styles grid item titles*/
/*margin top set to 4rem*/
/*margin bottom spaces 1rem*/
/*font size set to 1rem*/
/*font weight or boldness set to 600*/
/*color of grid titles set to --text-color*/
/*trasition changes to bluish color in .3seconds*/
.section-card h4{
	margin-top: 4rem;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-color);
	transition: 0.3s;
}

/*styles grid item paragraphs*/
/*margin bottom spaces 2rem*/
/*color of text set to --text-color*/
/*trasition changes to bluish color in .3seconds*/
.section-card p{
	margin-bottom: 2rem;
	color: var(--text-color);
	transition: 0.3s;
}
/*styles customer names*/
/*font size set to 1.25rem*/
/*color set to --text-color*/
/*trasition changes to bluish color in .3seconds*/
.section-card h5{
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-color);
	transition: 0,3s;
}
/*styles feedback title and name on hover*/
/*sets color to bluish color*/
.section-card:hover :is(h4,h5){
	color: var(--secondary-color);
}
/*styles grid item paragraph*/
/*sets color to bluish color*/
.section-card:hover :is(p,h5){
	color: var(--secondary-color);
}
/*styles star id*/
/*sets color to gold*/
#stars{
	color: #FFD700;
}
/*media all creates media query that applies styles to all media types and the styles work when screen is smaller than 768px*/
@media all and (max-width: 768px){
	/*styles the grid*/
	/*display set to grid layout*/
	/*grid template columns creates a single column that takes up 3 available spaces*/
	.section-grid {
    	display: grid;
      	grid-template-columns: 3fr; 
  	}
}