/*

 * Custom CSS File for Explore CTE

 */



:root {

    --red: #992c1e;

    --blue: #1c2336;

}





/*? ==== Home Page ==== */



/* Sector Cards */



.sector-card {

    background-size: cover;

    background-position: center center;

    min-height: 600px;

    overflow: hidden;

    border-radius: 10px;

    transition: all .25s ease;

}



.sector-card-info {

    position: absolute;

    z-index: 3;

    bottom: 20px;

    left: 20px;

    margin-right: 20px;

    transition: all .5s ease;

}



.sector-card-title {

    font-size: 28px;

    color: #fff;

    text-shadow: 0px 3px 3px #000;

    /* text-transform: uppercase; */

}



.sector-card-icon>img {

    filter: drop-shadow(0px 3px 1px rgb(0 0 0 / 0.5));

}



.sector-card-hover {

    height: 100%;

    width: 100%;

    opacity: 1;

    background: linear-gradient(0deg, #000, transparent);

    transition: all .5s ease;

    transform-origin: bottom;

    /* transform: translateY(100%); */

    z-index: 1;

    position: relative;

}



.sector-card-ripple {

    height: 100%;

    width: 550px;

    animation: ripple;

    animation-duration: 3s;

    transform-origin: center;

    transition: ease;

    opacity: 0;

    z-index: 2;

    position: absolute;

    top: 0px;

}



.sector-card:hover .sector-card-hover {

    opacity: 1;

    /* transform: translateY(0); */

    background: linear-gradient(0deg, var(--blue), transparent);

}



.sector-card:hover .sector-card-ripple {

    opacity: 1;

}



.sector-card:hover .sector-card-info {

    bottom: 40px;

}



.sector-card:hover {

    transform: scale3d(.95, .95, .95);

    box-shadow: 9px 17px 11px #00000028;

}