.carousel-item {
    height: 60vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.main .wrap {
/* margin: 1rem; */

transform-style: preserve-3d;
transform: perspective(100rem);

cursor: pointer;
}

.main .container {
--rX: 0;
--rY: 0;
--bX: 50%;
--bY: 80%;


border: 1px solid var(--background-color);
border-radius: 1.6rem;
padding: 4rem;

display: flex;
align-items: flex-end;

position: relative;
transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));

background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(32, 57, 84));
background-position: var(--bX) var(--bY);
background-size: 40rem auto;
box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%);

transition: transform .6s 1s;
}

.main .container::before,
.main .container::after {
content: "";

width: 2rem;
height: 2rem;
border: 1px solid #fff;

position: absolute;
z-index: 2;

opacity: .6;
transition: .3s;
}

.main .container::before {
top: 2rem;
right: 2rem;

border-bottom-width: 0;
border-left-width: 0;
}

.main .container::after {
bottom: 2rem;
left: 2rem;

border-top-width: 0;
border-right-width: 0;
}

.main .container--active {
transition: none;
}

.main .container--2 {
filter: hue-rotate(80deg) saturate(140%);
}

.main .container--3 {
filter: hue-rotate(160deg) saturate(140%);
}

.main .container p {
/* color: hsla(0, 0%, 100%, .6); */
font-size: 0.8rem;
text-align: justify;
}

.main .wrap:hover .container::before,
.main .wrap:hover .container::after {
width: calc(100% - 4rem);
height: calc(100% - 4rem);
}

.main .abs-site-link {
position: fixed;
bottom: 20px;
left: 20px;
color: hsla(0, 0%, 0%);
font-size: 1.6rem;
} 

/*****************************************/
.solutions {
/* The image used */
background-image: url(../img/slider-2.webp);

/* Set a specific height */
min-height: 500px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.solutions .wrapper{
width: 100%;
max-width: 100%;
margin: auto;
}

.solutions h1{
color: #fff;
font-weight: normal;
text-align: center;
font-size: 48px;
}

.solutions .panels{
list-style-type: none;
padding: 0;
}

.solutions .panels li{

margin: 0;
display: block;
box-sizing: border-box;
float: left;
}

.solutions .panels li div{
padding: 10% 0;
text-align: center;
color: #fff;
font-size: 11px;
letter-spacing: 2px;
cursor: pointer;
height: 50vh;
}

/*// ANIMATION STYLES //*/

.solutions .panels div.back {
transform: rotateY(90deg);
}

.solutions .panels div.front {
position: absolute;
margin-right: 1rem;

}

.solutions .panels li:hover div.front {
animation: twirl 0.2s ease-in forwards;
}
.solutions .panels li:hover div.back {
animation: twirl 0.2s 0.2s ease-out forwards reverse;
}

@keyframes twirl {
0%{ transform: rotateY(0deg)}
100% {transform: rotateY(90deg)}
}

.why-us {
/* The image used */
background-image: url(../img/slider-2.webp);
/* Set a specific height */
min-height: 350px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}