@charset "UTF-8";
#philosophy .heading{
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}
#philosophy .heading small{
  display: block;
  margin-top: 2rem;
  margin-bottom: 8rem;

  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;
}
#philosophy .policyblockContainer{
  display: flex;
  justify-content: center;
  gap: min(3vw, 4.8rem);
  margin-bottom: 3.2rem;
}
#philosophy .policyblock{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 24rem;
  height: 24rem;

  border-radius: 50%;
  border: solid 1px #0f9c34;
}
#philosophy .policyblock h3{
  position: relative;

  padding-top: 2.4rem;
  padding-bottom: .8rem;
  margin-bottom: .8rem;
  
  font-size: 1.6rem;
  font-weight: 400;

  text-align: center;
  
  border-bottom: solid 1px  #0f9c34;
}
#philosophy .policyblock h3::before{
  content: attr(data-text);
  position: absolute;

  top: -2.4rem;
  left: 50%;
  transform: translateX(-50%);

  font-size: 3rem;
  font-weight: 700;
}
#philosophy .policyblock p{
  font-size: 1.6rem;
  font-weight: 400;
  color: #0f9c34;
}
#philosophy .img-policy{
  display: block;
  width: 40%;
  margin-inline: auto;
}
@media (max-width : 1024px){
  #philosophy .policyblock{
    width: min(20rem, 30vw);
    height: min(20rem, 30vw);
  }
}
@media (max-width : 599px){
  #philosophy .heading{
    font-size: calc(1.6rem + (1vw - 0.33rem) * 3.6496);
  }
  #philosophy .heading small{
    font-size: calc(1.5rem + (1vw - 0.33rem) * 1.0949);
  }

  #philosophy .policyblockContainer{
    flex-direction: column;
    gap:1.2rem;
  }
  #philosophy .policyblock{
    flex-direction: row;
    gap:1.2rem;

    width: 100%;
    height: auto;
  
    border-radius: 0;
    border: solid 0px #0f9c34;
  }
  #philosophy .policyblock h3{
    padding: 0;
    padding-bottom: .8rem;
  }
  #philosophy .policyblock h3::before{
    position: static;
  
    top: auto;
    left: auto;
    transform: none;

    margin-right: 1.2rem;
  }
  #philosophy .img-policy{
    width: 80%;
  }
}