/* =====================================================
   TRUCKPRO
   HEADER STYLES
   ===================================================== */

/* ==============================
   Top Bar
================================ */

.top-bar{
    width:100%;
    background:#0f172a;
    color:#ffffff;
    font-size:14px;
}

.top-content{
    max-width:1200px;
    margin:0 auto;
    padding:10px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:25px;
}

.top-left span,
.top-right span{
    display:flex;
    align-items:center;
    gap:8px;
}

.top-bar a{
    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.top-bar a:hover{
    color:#ff8c00;
}

.top-bar i{
    color:#ff8c00;
}

/* ==============================
   Main Header
================================ */

#site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    background:#ffffff;
    z-index:9999;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.header-wrapper{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:18px 20px;
    display:flex;
    align-items:center;
}

/* ==============================
   Logo
================================ */

.site-logo{
    flex:0 0 auto;
}

.site-logo img{
    max-height:65px;
    width:auto;
}

.site-title{
    text-decoration:none;
    font-size:32px;
    font-weight:800;
    color:#0057B8;
}

/* ==============================
   Navigation
================================ */

#main-navigation{
    margin-left:auto;
}

.primary-menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:35px;
}

.primary-menu li{
    list-style:none;
    position:relative;
    margin:0;
    padding:0;
}

.primary-menu a{
    display:block;
    text-decoration:none;
    color:#1f2937;
    font-size:16px;
    font-weight:600;
    padding:8px 0;
    transition:.3s ease;
}

.primary-menu a:hover{
    color:#0057B8;
}

.current-menu-item>a,
.current_page_item>a,
.current-menu-ancestor>a{
    color:#0057B8;
}

/* ==============================
   Dropdown
================================ */

.primary-menu ul{
    position:absolute;
    top:100%;
    left:0;
    min-width:230px;
    list-style:none;
    margin:0;
    padding:15px 0;
    background:#ffffff;
    border-radius:10px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.3s;
}

.primary-menu li:hover>ul{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.primary-menu ul li{
    width:100%;
}

.primary-menu ul a{
    padding:10px 20px;
}

/* ==============================
   Header Button
================================ */

.header-actions{
    margin-left:35px;
}

.quote-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#ff8c00;
    color:#ffffff;
    padding:14px 30px;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}

.quote-btn:hover{
    background:#0057B8;
    color:#ffffff;
}

/* ==============================
   Mobile Button
================================ */

#mobile-menu-toggle{
    display:none;
    background:none;
    border:none;
    margin-left:20px;
    cursor:pointer;
}

#mobile-menu-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:6px 0;
    background:#1f2937;
    border-radius:10px;
    transition:.3s;
}

/* ==============================
   Tablet
================================ */

@media (max-width:991px){

    .top-content{
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }

    .top-left,
    .top-right{
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    .header-wrapper{
        flex-wrap:wrap;
        justify-content:space-between;
    }

    #mobile-menu-toggle{
        display:block;
    }

    .header-actions{
        display:none;
    }

    #main-navigation{
        display:none;
        width:100%;
        margin-top:20px;
    }

    #main-navigation.active{
        display:block;
    }

    .primary-menu{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
    }

    .primary-menu li{
        width:100%;
    }

    .primary-menu a{
        padding:16px 0;
        border-bottom:1px solid #ececec;
        width:100%;
    }

    .primary-menu ul{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        display:none;
        box-shadow:none;
        border-radius:0;
        padding-left:20px;
        background:#f7f7f7;
    }

    .primary-menu li:hover>ul{
        display:block;
    }

}

/* ==============================
   Mobile
================================ */

@media (max-width:768px){

    .site-title{
        font-size:26px;
    }

    .site-logo img{
        max-height:55px;
    }

    .top-bar{
        display:none;
    }

}


/*==================================================
FOOTER
==================================================*/


.site-footer{

    background:#111827;

    color:#fff;

    padding-top:80px;

}


.footer-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

    padding-bottom:60px;

}


.footer-column h4{

    color:#fff;

    font-size:20px;

    margin-bottom:25px;

}


.footer-logo{

    color:#fff;

    font-size:32px;

    margin-bottom:20px;

}


.footer-column p{

    color:#9ca3af;

    line-height:1.8;

}


.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}


.footer-column li{

    color:#9ca3af;

    margin-bottom:14px;

}


.footer-column li i{

    color:#0057B8;

    margin-right:10px;

}


.footer-menu li{

    margin-bottom:14px;

}


.footer-menu a{

    color:#9ca3af;

    text-decoration:none;

}


.footer-menu a:hover{

    color:#fff;

}


.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}


.footer-social a{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#0057B8;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}


.footer-social a:hover{

    background:#ff8c00;

}


.footer-bottom{

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

    padding:25px 0;

    text-align:center;

}


.footer-bottom p{

    margin:0;

    color:#9ca3af;

}



@media(max-width:992px){

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:600px){

    .footer-grid{

        grid-template-columns:1fr;

    }

}
/* =====================================================
   HEADER SEARCH
   ===================================================== */

#site-header{

    position:sticky;
    overflow:visible;

}

.header-wrapper{

    position:relative;

}

.header-actions{

    display:flex;
    align-items:center;
    gap:15px;
    margin-left:35px;

}

.search-toggle{

    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:#0057B8;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    transition:.3s;

}

.search-toggle:hover{

    background:#ff8c00;

}

.header-search{

    position:absolute;
    top:100%;
    right:20px;

    width:420px;

    background:#ffffff;

    padding:20px;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:99999;

}

.header-search.active{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.truckpro-search-form{

    display:flex;
    width:100%;

}

.truckpro-search-form input{

    flex:1;

    height:52px;

    border:1px solid #dcdcdc;

    border-right:none;

    border-radius:8px 0 0 8px;

    padding:0 18px;

    font-size:15px;

    outline:none;

}

.truckpro-search-form button{

    width:60px;

    border:none;

    background:#0057B8;

    color:#ffffff;

    border-radius:0 8px 8px 0;

    cursor:pointer;

    transition:.3s;

}

.truckpro-search-form button:hover{

    background:#ff8c00;

}

@media(max-width:768px){

    .header-search{

        width:90%;
        left:5%;
        right:5%;

    }

}