/*
Copyright (c) 2025 by CreativeSalahu (https://codepen.io/CreativeSalahu/pen/PovJqWm)
 */
.container * {
	box-sizing: border-box;
}
.creative-cards{
	margin-top: 40px;
	margin-bottom: 0;
	padding-bottom: 0;
	padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
}
.creative-cards .container {
    max-width: 1360px;
    width: 100%;
}
.creative-cards .container .row {
    display: flex;
    flex-wrap: wrap;
}
.creative-cards .container .row .card-column {
    flex: 0 0 auto;
    width: 33.33333333%;
    text-align: center;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.card-details {
    width: 80%;
    margin: auto;
    position: relative;
	z-index: 5;
    transition: .3s ease-in-out;
}
/*
.card-details:before {
    content: "";
    width: 190px;
    height: 380px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-25%, -10%) skew(-20deg, 0deg);
    z-index: -1;
    transition: .3s ease-in-out;
}
*/

.card-icons {
    width: 160px;
    height: 160px;
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-icons:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 5px solid;
    width: 100%;
    height: 100%;
    transform: skew(-20deg, 0deg);
    background: #fff;
    border-color: #f5f5f5;
    transition: .3s ease-in-out;
}
.card-details:hover .card-icons:before{
    background-color: #f5f5f5;
}
.card-icons img{
    position: relative;
    width: 90px;
    height: 90px;
}
.card-details h3{
    margin-bottom: 15px;
    margin-top: 30px;
}
.card-details h3 a {
  color: #0b3f5b;
  text-decoration: none;
}
.card-details p{
    margin-bottom: 30px;
}


/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
 .creative-cards .container .row .card-column {
    flex: 0 0 auto;
    width: 50%;
    margin-bottom: 0;
}
}

/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
 .creative-cards .container .row .card-column {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 0;
}
.card-details{
    width: 100%;
}
.read-more-btn{
        transform: translateX(0px);
    opacity: 1;
    visibility: visible;
}
}

.card-column .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight: 400;
}