/* ===================================================================
   C R E A T U S  —  HEADER, NAV & HERO  (23-Jun-2025)
   =================================================================== */

/* ----------  1.  DESKTOP HEADER LAYOUT  ---------- */
.header-creatus .header-area{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0;
    position:relative;                 /* anchors burger */
}
.header-creatus .logo img{
    max-height:60px;
    height:auto;
    width:auto;
}

/* ----------  2.  DESKTOP PRIMARY MENU  ---------- */
.header-creatus .primarymenu{
    display:flex;
    align-items:center;
}
.header-creatus .primarymenu .sf-menu{
    display:flex;
    list-style:none;
    gap:40px;
    margin:0;
    padding:0;
}
.header-creatus .primarymenu .sf-menu>li{position:relative;}
.header-creatus .primarymenu .sf-menu>li>a{
    display:block;
    padding:28px 0;
    font:500 15px/1 "Poppins",sans-serif;
    text-transform:uppercase;
    color:#1b1b1b;
    text-decoration:none;
    transition:color .25s;
}
.header-creatus .primarymenu .sf-menu>li:hover>a{color:#0056ba;}

/* ----- first-level dropdown ----- */
.header-creatus .primarymenu .sf-menu li ul{
    display:none;
    position:absolute;
    top:100%;left:0;
    min-width:220px;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    list-style:none;
    margin:0;padding:0;
    z-index:999;
}
.header-creatus .primarymenu .sf-menu li:hover>ul{display:block;}
.header-creatus .primarymenu .sf-menu li ul li a{
    display:block;
    padding:12px 20px;
    color:#333;
    text-decoration:none;
    transition:color .25s;
    white-space:nowrap;
}
.header-creatus .primarymenu .sf-menu li ul li a:hover{color:#0056ba;}

/* ----- second-level fly-out ----- */
.header-creatus .primarymenu .sf-menu li ul li{position:relative;}
.header-creatus .primarymenu .sf-menu li ul li ul{
    display:none;
    position:absolute;
    top:0;left:100%;
    min-width:220px;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.header-creatus .primarymenu .sf-menu li ul li:hover>ul{display:block;}

/* ----------  3.  MOBILE NAV (<992 px)  ---------- */
#iva-mobile-nav-icon{display:none;}           /* hidden desktop */

@media (max-width:992px){
    /* burger */
    #iva-mobile-nav-icon{
        display:inline-block;
        width:32px;height:22px;
        cursor:pointer;
        position:relative;
        z-index:1001;
    }
    #iva-mobile-nav-icon span{
        position:absolute;left:0;
        width:100%;height:4px;
        background:#1b1b1b;
        transition:transform .35s,top .35s,opacity .35s;
    }
    #iva-mobile-nav-icon span:nth-child(1){top:0;}
    #iva-mobile-nav-icon span:nth-child(2){top:9px;}
    #iva-mobile-nav-icon span:nth-child(3){top:18px;}

    /* burger → X */
    #iva-mobile-nav-icon.open span:nth-child(1){transform:rotate(45deg);top:9px;}
    #iva-mobile-nav-icon.open span:nth-child(2){opacity:0;}
    #iva-mobile-nav-icon.open span:nth-child(3){transform:rotate(-45deg);top:9px;}

    /* collapsed menu */
    .header-creatus .primarymenu .sf-menu{
        flex-direction:column;
        background:#fff;
        width:100%;
        max-height:0;
        overflow:hidden;
        padding:10px 0;
        transition:max-height .35s;
    }
    .header-creatus .primarymenu .sf-menu.active{max-height:1600px;}

    /* stack dropdowns */
    .header-creatus .primarymenu .sf-menu li ul,
    .header-creatus .primarymenu .sf-menu li ul li ul{
        position:static;
        box-shadow:none;
    }
    .header-creatus .primarymenu .sf-menu li ul a{padding-left:35px;}
}

/* ===================================================================
   4.  HERO FLEXSLIDER
   =================================================================== */
#featured_slider{position:relative;overflow:hidden;}
.flexslider .slides li{
    position:relative;
    height:100vh;
    overflow:hidden;
}
.flexslider .slides img{
    width:100%;height:100%;
    object-fit:cover;object-position:center;
}

/* caption overlay */
.flex-caption{
    position:absolute;inset:0;
    padding:60px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    color:#fff;
}
.flex-caption .flex-title{
    max-width:700px;
    text-align:right;
    margin:0 0 20px;
}
.flex-caption .flex-title h2{
    font-size:38px;
    font-weight:800;
    margin:0 0 10px;
}
.flex-caption .flex-content{
    font-size:18px;
    line-height:1.6;
    color:#eee;
}

@media (max-width:768px){
    .flex-caption{
        padding:30px 20px;
        align-items:center;
        text-align:center;
    }
    .flex-caption .flex-title{text-align:center;}
    .flex-caption .flex-title h2{font-size:24px;}
    .flex-caption .flex-content{font-size:16px;}
}