/* =====================================
   HERO SECTION
===================================== */
.block-30{
    position:relative;
    overflow:hidden;
    height:100vh;
}

/* CONTENT */
.hero-content,
.block-30 .container{
    position:relative;
    z-index:2;
}
.hero-bg{
    position:absolute;
    inset:0;

    background:url('../../images/4pillars.png') center center no-repeat;
    background-size:cover;

    z-index:5;
}

/* Gradient overlay */

.block-30::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.2),
rgba(0,0,0,0.55)
);
z-index:1;
}

.block-30 .container{
position:relative;
z-index:2;
}

/* =========================================
   HERO FIX
========================================= */
.block-30::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.15),
        rgba(0,0,0,.30)
    );

    z-index:1;
}
.hero-content{

position:relative;

z-index:2;
}

.hero-title{

font-size:64px;

font-weight:800;

line-height:1.1;

color:white;

text-shadow:
0 10px 25px rgba(0,0,0,0.3);
}

.hero-subtitle{

font-size:21px;

color:rgba(255,255,255,0.92);

max-width:800px;

margin:auto;
}

.hero-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-top:25px;
}

/* COMMON */
.pillar-hover{
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;
    z-index:20;

    transition:.3s ease;
}