.mapgrid {
    display:grid;
    grid-template-columns:4fr 10fr;
    gap:40px;


    img {
        max-width:100% !important;
        margin-bottom:20px;
    }
    h2 {
        font-size:20px;
        color:#263b5c;
    }
    
    .split {
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:40px;
    }
    .contactgrid {
        display:grid;
        grid-template-columns:1fr 10fr;
        gap:5px;
    }

    .svg {
        fill:#f15b43 !important;
    }

    .relative {
        position:relative;
        max-width:150px;
    }

        .infoicon {
        position: absolute;
        top: -10px;
        right: -20px;
    }
}





.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.grid-item {
    background-color: #01488E;
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 20px;
    border: solid 5px #FFAA46;
    position: relative; /* Required for clip-path positioning */
    overflow: hidden; /* Ensure the swoosh doesn't overflow */
}

.grid-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(255, 170, 70, 0.5), rgba(255, 170, 70, 0)); /* Adjust colors as needed */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); /* Adjust the percentage values to change the swoosh shape */
    z-index: 0; /* Place behind the content */
}

.grid-item h2{
    position: relative; /*bring the h2 above the before pseudo element*/
    z-index: 1;
}
  .grid-item h2,.grid-item p {
      color:#fff;
  }
.grid-item:hover {
  background-color: #FFAA46;
  border-color: #01488E;
}

.grid-item:hover h2,
.grid-item:hover p {
  color: rgb(58, 58, 58);
}

.grid-item h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.grid-item p {
  margin-top: 0;
  flex-grow: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Allow wrapping on smaller screens */
  }
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* Stack items on very small screens */
    gap: 1rem;
  }
}

.blink { animation-duration: 1200ms; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate; -webkit-animation:blink 1200ms infinite; /* Safari and Chrome */ } @keyframes blink { from { color:#fff; } to { color:#073236; } } @-webkit-keyframes blink { from { color:#fff; } to { color:#073236; } }



.grid-item a {
    color: #fff;
}


 
.mapcontact {
    background: #F3F3F3;
    padding: 20px;
   
}

.mapcontact h2 {
    font-size: 20px;
    margin: 20px 0 20px 0;
}


.mapcontact img:nth-of-type(2){
   width:150px;

}

.mapcontact p:last-child {
    margin-top:20px;
}


.mapcontactsq {
    background: #F3F3F3;
    padding: 20px;
   
}

.mapcontactsq h2 {
    font-size: 20px;
    margin: 20px 0 20px 0;
}


.mapcontactsq img:nth-of-type(2){
   width:150px;

}

.mapcontactsq p:last-child {
    margin-top:20px;
}