/* =========================================
   WRAPPER
========================================= */

.hsp-wrapper{
    display:flex;
    gap:20px;
    height:650px;
    padding:40px;
    overflow:hidden;
}


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

.hsp-card{
    position:relative;

    flex:1;

    min-width:80px;

    border-radius:30px;

    overflow:hidden;

    cursor:pointer;

    transition:all 0.5s ease;

    background-size:cover;

    background-position:center;
}


/* ACTIVE CARD DESKTOP */
.hsp-card.active{
    flex:5;
}


/* HOVER EFFECT */
.hsp-card:hover{
    flex:5;
}


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

.hsp-overlay{
    position:absolute;

    inset:0;

    background:rgba(61, 61, 255, 0.50);

    transition:0.4s ease;

    z-index:1;
}


/* DARK OVERLAY */
.hsp-card:hover .hsp-overlay,
.hsp-card.active .hsp-overlay{
    background:rgba(0,0,0,0.45);
}


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

.hsp-vertical-title{
    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%) rotate(180deg);

    writing-mode:vertical-rl;

    color:#fff;

    font-size:24px;

    font-weight:700;

    z-index:2;

    transition:0.4s ease;

    text-align:center;
}


/* HIDE TITLE */
.hsp-card:hover .hsp-vertical-title,
.hsp-card.active .hsp-vertical-title{
    opacity:0;
}


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

.hsp-content{
    position:absolute;

    left:40px;

    bottom:40px;

    z-index:5;

    color:#fff;

    opacity:0;

    width:80%;

    transform:translateY(30px);

    transition:all 0.5s ease;
}


/* SHOW CONTENT */
.hsp-card:hover .hsp-content,
.hsp-card.active .hsp-content{
    opacity:1;

    transform:translateY(0);
}


/* =========================================
   HEADING
========================================= */

.hsp-content h2{
    font-size:30px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:700;
}


/* =========================================
   BUTTON
========================================= */

.hsp-btn{
    display:inline-block;

    padding:10px 30px;

    border:2px solid #fff;

    border-radius:60px;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    transition:0.3s ease;
}


.hsp-btn:hover{
    background:#fff;

    color:#000;
}


/* =========================================
   IMAGE ZOOM
========================================= */

.hsp-card::after{
    content:'';

    position:absolute;

    inset:0;

    background:inherit;

    background-size:cover;

    background-position:center;

    transition:transform 0.6s ease;

    z-index:-1;
}


.hsp-card:hover::after,
.hsp-card.active::after{
    transform:scale(1.05);
}


/* =========================================
   LARGE TABLET
========================================= */

@media(max-width:1024px){

    .hsp-wrapper{
        height:550px;

        padding:25px;

        gap:15px;
    }

    .hsp-content h2{
        font-size:26px;
    }

    .hsp-vertical-title{
        font-size:24px;
    }

}

.hsp-content h2 {
    font-size: 30px !important;
    color: #fff !important;
}

/* =========================================
   MOBILE + TABLET
========================================= */

@media(max-width:768px){

    .hsp-wrapper{

        display:flex;

        flex-wrap:wrap;

        gap:15px;

        height:auto;

        padding:15px;

        overflow:visible;
    }

    /* TWO CARDS */
    .hsp-card{

        width:calc(50% - 8px);

        min-width:auto;

        height:260px;

        flex:none !important;

        border-radius:22px;
    }

    /* ALL ACTIVE ON MOBILE */
    .hsp-card .hsp-content{

        opacity:1;

        transform:translateY(0);
    }

    .hsp-card .hsp-overlay{

        background:rgba(0,0,0,0.45);
    }

    .hsp-card .hsp-vertical-title{

        display:none;
    }

    .hsp-content{

        left:18px;

        bottom:18px;

        width:85%;
    }

    .hsp-content h2{

        font-size:20px;

        line-height:1.3;

        margin-bottom:10px;
    }

    .hsp-btn{

        padding:10px 18px;

        font-size:13px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

    .hsp-wrapper{

        gap:12px;

        padding:12px;
    }
    
    .hsp-btn {
    padding: 6px 25px;
    font-size: 13px;
}

    /* ONE CARD PER ROW */
    .hsp-card{

        width:100%;

        height:240px;
    }

   .hsp-content h2 {
    font-size: 22px !IMPORTANT;
    color: #fff !important;
    font-weight: 600 !important;
    margin-bottom: 20px;
}

}