@import url(http://fonts.googleapis.com/css?family=AcuminPro+Thin:100);
@import url(http://fonts.googleapis.com/css?family=PT:100,200,300,400,500);
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic);
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600,700,800|Oswald:300,400,700';




/* CORE CAPABILITIES 3_COLUMN GRID */ 

.core-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 50px;      /* Set the row gap to 30px */
    column-gap: 15px;   /* Set the column gap to 15px */
    padding: 20px;
    max-width: 1290px;
	align-items: start; /* Align items at the start to allow gaps */
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Core grid item styling */
.core-grid-item {
    width: calc(270px + 1.7vw);
    background-color: #004499;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: calc(15px + .3vw);
    line-height: calc(27px + .2vw);
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    position: relative;
    transition: background-color 0.3s ease;
    opacity: 0; /* Start hidden */
    animation: fadeIn 0.5s ease forwards; /* Fade-in animation */
	height: auto; /* Allow items to determine their own height */
    min-height: 320px; /* Optional: Set a minimum height */
}

/* Animation delay for cascading effect */
.core-grid-item:nth-child(1) { animation-delay: 0s; }
.core-grid-item:nth-child(2) { animation-delay: 0.2s; }
.core-grid-item:nth-child(3) { animation-delay: 0.4s; }
.core-grid-item:nth-child(4) { animation-delay: 0.6s; }
.core-grid-item:nth-child(5) { animation-delay: 0.8s; }
.core-grid-item:nth-child(6) { animation-delay: 1s; }
.core-grid-item:nth-child(7) { animation-delay: 1.2s; }
.core-grid-item:nth-child(8) { animation-delay: 1.4s; }
.core-grid-item:nth-child(9) { animation-delay: 1.6s; }
.core-grid-item:nth-child(10) { animation-delay: 1.8s; }
.core-grid-item:nth-child(11) { animation-delay: 2s; }
.core-grid-item:nth-child(12) { animation-delay: 2.2s; }

/* Hover effect for the grid item background */
.core-grid-item:hover {
    background-color: #c7eef2;
    color: #000000;
}

/* Hide item name on hover */
.core-grid-item:hover .item-name {
    opacity: 0;
}

/* Description styling and positioning */
.core-grid-item .description {
    font-family: 'Oswald', sans-serif;
    color: #000000;
    font-size: calc(13px + .1vw);
    line-height: calc(20px + .2vw);
    font-weight: 100;
    letter-spacing: 1px;
    text-align: left;
    padding: 39px;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
}

/* Show description on hover */
.core-grid-item:hover .description {
    opacity: 1;  /* Show description */
}

/* Responsive grid for smaller screens */
@media (max-width: 1024px) {
    .core-grid-container {
        grid-template-columns: 1fr 1fr;
        justify-items: center; /* Center items horizontally */
        padding: 0; /* Optional: Adjust padding if needed */
    }
}

@media (max-width: 768px) {
    .core-grid-container {
        grid-template-columns: 1fr; /* Single column layout */
        justify-items: center; /* Center items horizontally */
        padding: 0; /* Optional: Adjust padding if needed */
		margin-top: 20px;
    }
	
	.core-grid-item:hover .description {
    font-weight: 400;
}
}