*{
 margin: 0;
 padding :0;
 box-sizing: border-box;
 font-family: 'Poppins',sans-serif;
}
:root{
  --themeRed: #ffffff;
  --gray: #efefef;
}
body
{
 background: linear-gradient(90deg,#ffb300 10%,#ffffff 30%,#ffffff 60%, #048832 100%);
}
.fullC
{
width: 100%;
}
header{
    width: 100%;
    height: 75px;
    background-color: rgba(60, 60, 60, 0.6);
    position:relative;
    z-index: 2;
}

header .container{
    display: flex;
    justify-content: space-between;
}
header nav ul{
    list-style-type: none;
   
}
    
header nav ul li{
display: inline-block;
 }
 header nav ul li a{
    display: inline-block;
    line-height: 75px;
    padding:0 15px ;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 16px;
    color: rgb(0, 0, 0);
    transition: 0.3s;
}
header nav ul li a:hover{
background-color:var(--themeRed) ;
}

.container
{
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 padding: 50px 125px;
 gap: 50px;
 
} 
.containerBG
{
justify-content: center;
background: rgb(0, 0, 0);
border-radius: 15px;
padding: 50px 10px;
margin-top: 100px;
}
.container .box
{ 
  position: relative;
  width: 400px;
  height: 450px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
 }  
 .container .box .content
 {
 position: relative ;
 display: flex;
 justify-content: center;
 flex-direction: column;
 text-align: center;
 gap: 40px;
 padding: 0 70px;
 width: 100%;
 height: 100%;
 overflow: hidden;
 
}
.container .box .content .img
{
 color: var(--clr);
 align-items: center;
 width: 250px;
 border-radius:  5px;
 height: 250px;
 box-shadow: 0 0 0 5px #2e2e2e;
 display: flex;
 justify-content: center;
 font-size: 2.5em;
 background: #2e2e2e;
 transition: 0.3s ease-in-out;
}

.container .box:hover .content .img
{
 box-shadow: 0 0 0 5px #2e2e2e,
 0 0 0 300px var(--clr);
}