.diamond-container {
    display: flex;
    align-items: center;
    gap: 3px; /* Adjust the gap between the diamonds */
    margin-top:40px;
    margin-bottom:40px;
justify-content:center;


}

.diamond {
	align-items:center;
    display: grid;
    grid-template-columns: repeat(3, 110px); /* Adjust size as needed */
    grid-template-rows: repeat(3, 110px); /* Adjust size as needed */
    gap: 3px;
    transform: rotate(45deg);
    margin-right:-28px;

}

.square {
    width: 110px; /* Adjust size as needed */
    height: 110px; /* Adjust size as needed */
    background-color: #ffffff;
    display:flex;
	position:relative;
    justify-content: center;
    align-items: center;
    border: solid 2px #163963;

   
}

.square:hover {
	
transform: scale(1.2);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  z-index:900;
  cursor: default;
font-weight:bold;
}


.square p {
padding-right:8px;
padding-top:5px;
      transform: rotate(-45deg);
}

.icon:hover {
	transform: scale(1.2);
	  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  cursor: default;
}

.article:hover {
color:#163963;
	  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
font-weight:bold;
}

.light {
    color:#ffffff;
    border: 1px #ffffff solid;  
  
}
    .light:hover {
      color: #163963;
      border: 1px #163963 solid;  
      border-radius: 3px;
      outline: 0;
    }
    .light:before {
      content: "";
      position: absolute;
      background: linear-gradient(to right, rgb(250, 252, 255, .9), rgb(213, 223, 255, .9) );
      bottom: 0;
      left: 0;
      right: 100%;
      top: 0%;
      z-index: -1;
      -webkit-transition: right 0.23s ease-in;
      transition-timing-function: cubic-bezier(0.03, 0.3, 0.46, 0.26);      
      border: 1px #163963 solid;  
      border-radius: 3px;
      outline: 0;
      
    }
    .light:hover:before {
      right: 0;
      border: 1px #163963 solid;  
      border-radius: 3px;
      outline: 0;
    
    }
    
    
    
     @media (max-width: 768px) {
     	.diamond-container {
        flex-wrap:wrap;
            align-items: center;
            gap: 1px; /* Adjust the gap between the diamonds */
            margin-top:40px;
            margin-bottom:40px;
        justify-content:center;
        width:auto;
}
        .diamond {
        width:auto;
        transform: rotate(135deg);
        align-items:center;
        display: grid;
        grid-template-columns: repeat(3, 85px); /* Adjust size as needed */
        grid-template-rows: repeat(3, 85px); /* Adjust size as needed */
        gap: 1px;
        flex-wrap:wrap;
        margin-top:-12x;
        margin-right:7px;
        justify-content: center;
}   

        .square {
            width: 85px; /* Adjust size as needed */
            height: 85px; /* Adjust size as needed */
            background-color: #ffffff;
            justify-content: center;
            align-items: center;
            border: solid 2px #163963;
            display:flex;
            position:relative;

        }

        .square p {
            font-size:8px;

        transform: rotate(-135deg);
            }


.fill {
	width:90%;
}

     }