/* =========================================================
   CARD
========================================================= */

.csc-card{
    --csc-radius:30px;
    --arrow-size:78px;

    width:100%;

    min-height:350px;
    height:100%;

    position:relative;

    font-family:Arial,sans-serif;
}

/* =========================================================
   LINK
========================================================= */

.csc-link{
    position:relative;

    width:100%;
    height:100%;

    display:block;

    overflow:hidden;

    border-radius:var(--csc-radius);

    text-decoration:none;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.csc-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    transition:0.6s ease;
}

/* =========================================================
   OVERLAY
========================================================= */

.csc-overlay{
    position:absolute;
    inset:0;
    background: rgb(27, 58, 84, 0.6);
    z-index:1;
}

/* =========================================================
   FRONT CONTENT
========================================================= */

.csc-front{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    padding:50px 35px 38px;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;

    justify-content:space-between;
}


/* =========================================================
   ICON
========================================================= */

.csc-icon{
    flex-shrink:0;
}

.csc-icon img{
    width:90px;
    height:auto;

    display:block;

    object-fit:contain;

    margin-bottom:28px;
}

/* =========================================================
   TITLE
========================================================= */

.csc-title{
    color:#ffffff;

    font-size:48px;
    line-height:0.95;

    font-weight:700;

    letter-spacing:-1px;

    margin:0;
}

/* =========================================================
   NUMBER
========================================================= */

.csc-number{
    margin-top:auto;

    align-self:flex-end;

    color:#ffbf00;

    font-size:76px;
    font-weight:700;
    line-height:1;

    max-width:100%;
}

/* =========================================================
   HOVER
========================================================= */

/* =========================================================
   HOVER
========================================================= */

.csc-hover{
    position:absolute;

    inset:0;

    background:#f3f3f3;

    z-index:5;

    border-radius:var(--csc-radius);

    padding:50px 38px;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    justify-content:center;

    transform:translateY(100%);

    transition:transform 0.45s ease;
}

/* =========================================================
   HOVER CONTENT
========================================================= */

.csc-hover-content{
    width:100%;
}

/* =========================================================
   HOVER TITLE
========================================================= */

.csc-hover-title{
    color:#0d3b66;

    font-size:48px;
    line-height:0.95;

    font-weight:700;

    letter-spacing:-1px;

    margin:0;
}

/* =========================================================
   LINE
========================================================= */

.csc-line{
    width:36px;
    height:3px;

    background:#ffbf00;

    margin:26px 0;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.csc-description{
    color:#6d6d6d;

    font-size:20px;
    line-height:1.8;

    margin:0;
}


/* =========================================================
   HOVER EFFECT
========================================================= */

.csc-card:hover .csc-hover{
    transform:translateY(0%);
}

.csc-card:hover .csc-bg{
    transform:scale(1.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767px){

    .csc-card{
        height:360px;
    }

    .csc-front{
        padding:28px 24px;
    }

    .csc-title,
    .csc-hover-title{
        font-size:36px;
    }

    .csc-number{
        font-size:58px;
    }

    .csc-hover{
        padding:35px 24px;
    }

    .csc-description{
        font-size:16px;
        line-height:1.6;
    }

    .csc-arrow{
        --arrow-size:64px;

        font-size:28px;
    }

}

/* =========================================================
   LAPTOPS GRANDES
========================================================= */

@media(min-width:1400px){

    .csc-front{
        padding-top:55px;
    }

    .csc-icon img{
        width:100px;
    }

}