a{
 text-decoration: none;
}
i{
 margin: 10px;
 /* color: var(--themeColor); */
 font-weight: bolder;
}
.secondSection{
 width: 100%;height:fit-content;margin: 0 auto;padding: 0 auto; padding-inline: 5%;
 background-color: var(--darkThemeColor);
 display: flex; gap: 40px; flex-direction: column;
 align-items: center;justify-content:flex-start;
}
.secondSection .head{
 width: 100%; padding: 5% 0px 0px 0px; margin: 0px; display: flex;
 align-items: flex-start;height: fit-content; justify-content: flex-start; flex-direction: column; color: white;
}
.secondSection .head span{
 color: var(--secondaryThemeColor); font-weight: bold;
}
.secondSection .head h1{
 font-size:3vw; font-weight: bold;

}
.secondSection .grid{
 width: 100%; height: fit-content; margin:0px 0px 0px 0px ; padding: 0 auto;
 display: flex; gap: 10px; align-items: center; justify-content: space-evenly;
 flex-wrap:wrap;
}
.secondSection section{
 width: 30%; margin: 50px 0px 100px 0px ; padding: 0; display: flex;
  align-items: center; justify-content: center; flex-direction: column;
  background-color: white; height: 400px; gap: 5px; 
   position: relative;
}
.secondSection section img{
 width: 100%; height: auto; z-index: 1; margin-top:-30%; aspect-ratio: 3/2;
 object-fit: contain;
}
.secondSection section p{
 z-index: 5; margin-top: -115%; background-color: var(--secondaryThemeColor);
 width: fit-content; height: fit-content;  position: absolute; 
 border-radius: 50%;
}
.secondSection section p i{
 padding: 20px;  color: white; font-size: 150%;
}
.secondSection section article{
 width: 100%; padding-inline: 3%; text-align: center;
}
.secondSection section a{
 position: absolute; right: 1%;
 bottom: 0; background-color: var(--secondaryThemeColor);
 width: fit-content; height: fit-content; padding: 10px 20px; margin: 20px;
 border-radius: 20px; color: white;
}


/* media quaries */
@media screen and (max-width:900px){
 body{
  margin: 0 auto;
  padding: 0 auto;
 }
 .secondSection{
  background-color: var(--darkThemeColor); height: fit-content;
 }
 .secondSection .head{
  height: fit-content; margin: 10% 0%;
 }
 .secondSection .head h1{
  font-size: 250%; color: white;
 }
 .secondSection .head article{
  font-size: 100%; color: white;
 }
 .secondSection .grid{
  margin: 0% 0px 0px 0px ; flex-direction: column; flex-wrap: wrap;
  padding: 0% 0%;
 }
 .secondSection .grid section{
  width: 100%; margin: 0% 0% 20% 0%;

 }

}