/* =========================================================
   MAGIC iCREATIVE
   VISITOR DAY - HEADER
   ========================================================= */


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

.magic-header {

    width:
        100%;

    min-height:
        260px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background-image:
        url('../../../img/visitor-themes/day/header-day-bg.webp');

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}


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

.header-center {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        transparent;

    padding:
        10px;

}


/* =========================================================
   MAGIC iCREATIVE LOGO
   ========================================================= */

.magic-logo {

    display:
        block;

    width:
        180px;

    max-width:
        180px;

    height:
        auto;

    object-fit:
        contain;

}


/* =========================================================
   TAGLINE
   ========================================================= */

.magic-header .tagline-day,
.magic-header p {

    margin:
        10px 0 6px;

    color:
        #40255f;

    font-weight:
        700;

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.magic-header nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    margin-top:
        8px;

}


.magic-header nav a {

    margin:
        0;

    color:
        #40255f;

    font-size:
        15px;

    font-weight:
        800;

    text-decoration:
        none;

}


.magic-header nav a:hover {

    color:
        #8a4de8;

}