/*=========================================
            PAGE HEADER
==========================================*/

.page-header{

    position:relative;

    height:520px;

    display:flex;

    align-items:center;

    background:url(../images/hq3.jpg) center center/cover no-repeat;

    overflow:hidden;

}

.page-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0.65)
    );

}

.page-header-content{

    position:relative;

    z-index:2;

    max-width:720px;

    color:#fff;

    animation:fadeUp 1s ease;

}

.page-header-content h1{

    color:#fff;

    font-size:54px;

    margin:15px 0;

}

.page-header-content p{

    color:#f4f4f4;

    font-size:18px;

    line-height:1.8;

    margin-bottom:30px;

}

.breadcrumb{

    display:flex;

    gap:10px;

    align-items:center;

    font-size:15px;

}

.breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--yellow);

}

.breadcrumb span{

    color:#ddd;

}



/* ANIMATION  */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* RESPONSIVENESS */

@media(max-width:768px){

.page-header{

height:320px;

}

.page-header-content h1{

font-size:36px;

}

.page-header-content p{

font-size:16px;

}

}