/*==========================================================
PKB KOTA BOGOR
Hero Section
==========================================================*/

/*=========================
SECTION
=========================*/

.hero-section{

    position:relative;

    min-height:760px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:#07150d;

    isolation:isolate;

}

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

.hero-background{

    position:absolute;

    inset:0;

    z-index:-3;

}

.hero-image,

.hero-video{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroZoom 25s linear infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:-2;

    background:

    linear-gradient(

        120deg,

        rgba(3,12,7,.92),

        rgba(6,33,17,.78),

        rgba(8,73,37,.58)

    );

}

/*=========================
FLOATING SHAPE
=========================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.28;

    z-index:-1;

}

.hero-shape-1{

    width:420px;

    height:420px;

    background:#00d45c;

    left:-120px;

    top:-120px;

    animation:floatShape 12s ease-in-out infinite;

}

.hero-shape-2{

    width:380px;

    height:380px;

    background:#f5c542;

    right:-120px;

    bottom:-120px;

    animation:floatShape2 14s ease-in-out infinite;

}

@keyframes floatShape{

    50%{

        transform:translateY(35px);

    }

}

@keyframes floatShape2{

    50%{

        transform:translateY(-35px);

    }

}

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

.hero-wrapper{

    min-height:760px;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:90px;

    align-items:center;

    padding:140px 0 90px;

}

/*=========================
LEFT
=========================*/

.hero-left{

    color:#fff;

}

.hero-title{

    font-size:84px;

    font-weight:900;

    line-height:.95;

    letter-spacing:-3px;

    color:rgba(255,255,255,.08);

    text-transform:uppercase;

    user-select:none;

}

.hero-subtitle{

    font-size:38px;

    font-weight:800;

    color:#73efaa;

    line-height:1.2;

}

.hero-description{

    max-width:560px;

    font-size:20px;

    line-height:1.8;

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

    margin-bottom:45px;

}

.hero-buttons .btn{

    min-width:190px;

    justify-content:center;

}

/*=========================
HIGHLIGHT
=========================*/

.hero-highlight{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

}

.hero-highlight-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:15px;

}

.hero-highlight-item i{

    color:#6ee7a0;

}

/*=========================
RIGHT
=========================*/

.hero-right{

    display:flex;

    justify-content:center;

}

.hero-photo-wrapper{

    position:relative;

    width:100%;

    max-width:650px;

}

/*=========================
PHOTO
=========================*/

.hero-photo{

    width:620px;

    max-width:100%;

    border-radius:34px;

    object-fit:cover;

}

/*=========================
GLOW
=========================*/

.hero-glow{

    position:absolute;

    inset:20%;

    background:#00d45c;

    filter:blur(130px);

     opacity:.40;

    filter:blur(170px);

    z-index:-1;

}

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

.hero-card{

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:24px;

    padding:22px 26px;

    min-width:270px;

}

.hero-card-top{

left:-70px;

top:35px;

}

.hero-card-bottom{

right:-70px;

bottom:35px;

}

.hero-card-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#0B6B35;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.hero-card strong{

    display:block;

    color:#111827;

}

.hero-card small{

    color:#64748B;

}

/*=========================
SCROLL
=========================*/

.hero-scroll{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

}

.hero-scroll a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero-scroll i{

    animation:bounceArrow 2s infinite;

}

@keyframes bounceArrow{

    50%{

        transform:translateY(8px);

    }

}

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

@media(max-width:1200px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-description{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-highlight{

justify-content:center;

}

.hero-right{

margin-top:60px;

}

.hero-card{

display:none;

}

}

@media(max-width:768px){

.hero-title{

font-size:44px;

}

.hero-subtitle{

font-size:22px;

}

.hero-description{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-photo{

border-radius:20px;

}

}

@media(max-width:576px){

.hero-wrapper{

padding-top:90px;

padding-bottom:70px;

}

.hero-title{

font-size:36px;

}

.hero-subtitle{

font-size:20px;

}

}

@media(max-width:992px){

.hero-wrapper{

    grid-template-columns:1fr;

    gap:60px;

    text-align:center;

}

.hero-right{

    order:-1;

}

.hero-photo-wrapper{

    margin:auto;

    max-width:520px;

}

.hero-card{

    display:none;

}

.hero-description{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-highlight{

    justify-content:center;

}

}

.hero-photo{

    transition:.5s;

}

.hero-photo:hover{

    transform:translateY(-8px);

}

.hero-card{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    transition:all .25s ease;
}

.hero-card:hover{
    color:inherit;
    text-decoration:none;
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.hero-card{
    cursor:pointer;
}

.hero-card:hover{
    transform:translateY(-3px);
    transition:.25s ease;
}

.hero-card{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:all .25s ease;
}

.hero-card:hover{
    color:inherit;
    text-decoration:none;
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}