/*shake animation*/

@keyframes shake {
    0% {
      transform: rotate(0deg); }
    10% {
      transform: rotate(-1deg); }
    20% {
      transform: rotate(1deg); }
    30% {
      transform: rotate(0deg); }
    40% {
      transform: rotate(2deg); }
    50% {
      transform: rotate(1deg); }
    60% {
      transform: rotate -1deg; }
    70% {
      transform: rotate(2deg); }
    80% {
      transform: rotate(1deg); }
    90% {
      transform: rotate(0); }
    100% {
      transform: rotate(1deg); } }
  

  
  .element {
   
   
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: shake;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite; }

    /*shake animation*/



    .containerm {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 1px;
      max-width: 1600px;
      margin: auto;
    }

    .box, .image-box {
      padding: 30px;
      min-height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .box h2 {
      margin-bottom: 15px;
      color: white;
    }

    .box p {
      color: #eee;
      font-size: 14px;
      line-height: 1.5;
    }

    .mission {
      background: #8B0000;
      grid-column: span 1;
    }

    .vision {
      background: #FF7F00;
      grid-column: span 1;
    }

    .values {
      background: #2F9D9D;
      grid-column: span 1;
    }

    .image-box {
      background: white;
      align-items: center;
        background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  
     .mission-image {
      
       background-image: url('/assets/img/mission.jpg');
    }

    .vision-image {
      
       background-image: url('/assets/img/vision.jpg');
    }

    .image-box img {
      max-width: 80px;
      max-height: 80px;
      filter: grayscale(100%);
    }

    /* Responsive for tablets and phones */
    @media (max-width: 1024px) {
      .containerm {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .containerm {
        grid-template-columns: 1fr;
      }
    }



/*font*/
@font-face {
  font-family: 'Bredan';
  src: url('/assets/necfonts/Bredan.otf') format('truetype');
  /* Optional: Add other formats for browser compatibility */
  font-weight: normal;
  font-style: normal;
}