
body{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;

}

.wrapper{

	margin: 80px 160px;
	padding: 10px;
	max-width: 1440px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(375px));

}



.nav{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding: 0;
	margin: 0;
}

.nav ul{

	list-style: none;
	display: flex;

}

.nav a{

	text-decoration: none;
	padding: 20px;
	margin: 10px;
	color: hsl(240, 100%, 5%);
}


.nav a:hover{
	color: hsl(5, 85%, 63%);
	border-bottom: solid 1px ;
}


.second-sect img{
	width: 100%;
	height: 100%;

	

}

.second-sect{
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;

}

.top-img:nth-of-type(1){
	
	grid-column: 1/3;
	grid-row: 1;
	margin-bottom: 20px;
	
}

.note:nth-of-type(2){

	grid-column: 3/4;
	grid-row: 1/3;
	background: hsl(240, 100%, 5%);
	color: hsl(36, 100%, 99%);
	padding: 15px 25px;
	
}

.bet-1:nth-of-type(3){
	grid-row: 2;
	grid-column: 1/2;
	font-weight: 800;
	margin-right: 20px;
	font-size: 25px;
	margin-top:0 ;

}

.note h2{ color: hsl(35, 77%, 62%);
	font-size: 2em;
  }

  .note a{ text-decoration: none;
  	color: hsl(36, 100%, 99%);


   }

   .note a:hover{
   	color: hsl(35, 77%, 62%);
   }




.word{
	grid-row: 2;
	grid-column: 2/3;

}

.note p{

	padding-bottom: 15px;
	color: hsl(233, 8%, 79%);
	opacity: 70%;
	font-size: 15px;
}


.btn{

	padding: 15px;
	text-decoration: none;
	margin-right: 100px;
	margin-top: 30px;
	
	background: hsl(240, 100%, 5%);
	text-align: center;
		

	}

	.btn a{

		text-decoration: none;
		text-transform: uppercase;
		color: #fff;
				
	}

	.downbelow{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 30px;
		margin-top: 50px;


	}



.section a{

	text-decoration: none;	
	color: hsl(240, 100%, 5%);
	white-space: nowrap;
	font-size: 1rem;


}

.section a:hover{
	color: hsl(5, 85%, 63%);
}

.section h2{ color: hsl(233, 8%, 79%); 


}

.section p{

	font-size: 13px;
	color: hsl(236, 13%, 42%);
	text-align: left;

}

.section img{ width: 120px;


	height: 140px; 
	margin: 10px 10px;
	float: left;

}


	/*.section img{ width: 120px;


	height: 140px; 
	margin: 10px 20px;
	float: left;
}



.section a{

	text-decoration: none;
	
	color: hsl(240, 100%, 5%);

}

.section a:hover{
	color: hsl(5, 85%, 63%);
}

.section h2{ color: hsl(233, 8%, 79%); 

}

.section p{

	font-size: 13px;
	color: hsl(236, 13%, 42%);
	text-align: left;

}

*/