/*==================================================================
    01. ROOT VARIABLES
====================================================================*/

:root{

    --primary-color:#189dc9;
    --secondary-color:#ff7a00;
    --accent-color:#fe9d43;

    --heading-color:#1d1d1d;
    --text-color:#555555;

    --white:#ffffff;
    --light:#f8f9fa;

    --header-bg:#ffffff;
    --topbar-bg:#004080;

    --border-color:#e6e6e6;

    --transition:all .3s ease;

    --shadow:
        0 8px 30px rgba(0,0,0,.08);

}


/*==================================================================
    02. HEADER RESET
====================================================================*/

header[role="banner"]{

    position:relative;
    z-index:999;

}

.home-page-header{

    width:100%;

    position:relative;

    transition:var(--transition);

}

#top-header{

    position:relative;

    background:#fff;

    transition:var(--transition);

}

.header-menu{

    position:relative;

    width:100%;

    background:#fff;

    transition:var(--transition);

}


/*==================================================================
    03. TOPBAR
====================================================================*/

#topbar{

    background:var(--topbar-bg);

    color:#fff;

    font-size:15px;

    line-height:1.4;

    position:relative;

    z-index:1002;

}

#topbar .container{

    padding-top:12px;

    padding-bottom:12px;

}

#topbar .row{

    align-items:center;

}

#topbar i{

    color: var(--white) !important;
    margin-right: 8px !important;
    font-size: 15px !important;
}
#topbar i:hover{
    color: var(--accent-color) !important;
}

#topbar span,
#topbar span a{

    color:#fff;

    font-size:15px;

    text-decoration:none;

    transition:var(--transition);

}

#topbar span a:hover{

    /* color:var(--white); */
    color: var(--primary-color);

}

#topbar .custom-social-icons{

    margin:0;

    padding:0;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:14px;

}

#topbar .custom-social-icons li{

    list-style:none;

}

#topbar .custom-social-icons li a{

    color:#fff;

    transition:var(--transition);

}

#topbar .custom-social-icons li a:hover{

    color:var(--accent-color);

}


/*==================================================================
    04. GET A QUOTE
====================================================================*/

#vquote{

    display:inline-block;

    margin-left:18px;

    padding:7px 16px;

    border-radius:6px;

    background:var(--accent-color);

    transition:var(--transition);

}

#vquote:hover{

    background:#fff;

}

#vquote a{

    color:#111;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

}


/*==================================================================
    05. HEADER WRAPPER
====================================================================*/

#top-header{

    background:
        linear-gradient(
            to right,
            #fafafa,
            #efefef
        );

    border-bottom:1px solid var(--border-color);

}

#top-header .container{

    position:relative;

}

#top-header .row{

    align-items:center;

}


/*==================================================================
    06. COMMON TRANSITION
====================================================================*/

#top-header *,
#topbar *{

    transition:var(--transition);

}

/*==================================================================
    07. LOGO
====================================================================*/

.logo{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:120px;

    padding:12px 18px;

    background:#ffffff;

    transition:var(--transition);

    z-index:10;

}

/* Remove Old Theme Triangle */

.logo:after{

    display:none;

}

/* Logo Image */

.logo img,
.logo .custom-logo{

    display:block;

    max-width:100%;

    max-height:95px;

    width:auto;

    height:auto;

    transition:var(--transition);

}

/* Site Title */

.site-title{

    margin:8px 0 0;

    font-size:22px;

    font-weight:700;

    line-height:1.2;

}

.site-title a{

    color:var(--heading-color);

    text-decoration:none;

}

.site-title a:hover{

    color:var(--primary-color);

}

/* Tagline */

.site-description{

    margin-top:4px;

    font-size:14px;

    color:var(--text-color);

}



/*==================================================================
    08. NAVIGATION
====================================================================*/

#header{

    width:100%;

}

.main-navigation{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    height:100%;

}

.main-navigation ul{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    margin:0;

    padding:0;

    list-style:none;

}

.main-navigation ul li{

    position:relative;

    margin:0;

    padding:0;

}

.main-navigation ul li a{

    display:block;

    padding:38px 18px;

    font-size:16px;

    font-weight:600;

    color:var(--heading-color);

    text-decoration:none;

    transition:var(--transition);

    letter-spacing:.3px;

}

.main-navigation ul li:hover>a,

.main-navigation ul li.current-menu-item>a,

.main-navigation ul li.current_page_item>a{

    color:var(--primary-color);

}



/*==================================================================
    09. DROPDOWN MENU
====================================================================*/

.main-navigation ul ul{

    position:absolute;

    left:0;

    top:100%;

    min-width:240px;

    background:#ffffff;

    padding:10px 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    box-shadow:var(--shadow);

    transition:var(--transition);

    z-index:999;

}

.main-navigation ul li:hover>ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.main-navigation ul ul li{

    width:100%;

}

.main-navigation ul ul li a{
    padding:12px 22px;
    font-size:15px;
    color:var(--heading-color);
    white-space:nowrap;
}
/* .main-navigation ul ul li a {
    padding: 12px 22px !important;
    font-size: 15px !important;
    color: var(--heading-color) !important;
    white-space: nowrap !important;
} */
.main-navigation ul ul li a:hover{

    background:#f5f5f5;

    color:var(--primary-color);

}



/*==================================================================
    10. SEARCH ICON
====================================================================*/

.search-box{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100%;

}

.search-box span{

    display:flex;

    align-items:center;

    justify-content:center;

}

.search-box span a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:46px;

    height:46px;

    border-radius:6px;

    background:var(--primary-color);

    color:#ffffff;

    text-decoration:none;

    transition:var(--transition);

}

.search-box span a:hover{

    background:var(--secondary-color);

}



/*==================================================================
    11. MOBILE TOGGLE
====================================================================*/

.toggle-nav{

    display:none;

}

.toggle-nav button{

    border:none;

    background:none;

    color:var(--heading-color);

    font-size:28px;

    cursor:pointer;

    transition:var(--transition);

}

.toggle-nav button:hover{

    color:var(--primary-color);

}

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

.home-page-header{
    position:relative;
    width:100%;
    transition:all .35s ease;
    z-index:999;
}

.home-page-header.is-sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    animation:headerDown .35s ease;
    z-index:99999;
}

/* Prevent Page Jump */

body.sticky-active{
    padding-top:145px;
}

/* Sticky Logo */

.home-page-header.is-sticky .logo{

    min-height:80px;

    padding:8px 15px;

}

.home-page-header.is-sticky .logo img,
.home-page-header.is-sticky .custom-logo{

    max-height:65px;

}

/* Sticky Menu */

.home-page-header.is-sticky .main-navigation ul li a{

    padding:28px 18px;

}

/* Sticky Search */

.home-page-header.is-sticky .search-box span a{

    width:42px;
    height:42px;

}


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

@keyframes headerDown{

    from{

        opacity:0;
        transform:translateY(-100%);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



/*====================================================
    DESKTOP
====================================================*/

@media(min-width:1200px){

.main-navigation ul{

    gap:8px;

}

.main-navigation ul li a{

    font-size:16px;

}

}



/*====================================================
    TABLET
====================================================*/

@media(max-width:1199px){

#topbar{

    display:none;

}

body.sticky-active{

    padding-top:90px;

}

.logo{

    min-height:auto;

    padding:12px;

}

.logo img{

    max-height:70px;

}

.main-navigation ul li a{

    padding:20px 12px;

    font-size:15px;

}

.search-box{

    justify-content:flex-end;

}

}



/*====================================================
    MOBILE MENU
====================================================*/

@media(max-width:991px){

.toggle-nav{

    display:block;

    text-align:right;

}

.toggle-nav button{

    padding:8px;

}

#mySidenav{

    position:fixed;

    top:0;

    right:-320px;

    width:300px;

    height:100vh;

    background:#fff;

    overflow-y:auto;

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

    transition:.35s;

    z-index:999999;

}

#mySidenav .main-navigation{

    display:block;

}

#mySidenav ul{

    display:block;

    padding:25px;

}

#mySidenav ul li{

    width:100%;

    border-bottom:1px solid #eee;

}

#mySidenav ul li a{

    display:block;

    padding:15px 0;

}

.closebtn{

    position:absolute;

    top:15px;

    right:20px;

    font-size:24px;

    color:#222;

}

.search-box{

    margin-top:10px;

}

}



/*====================================================
    MOBILE
====================================================*/

@media(max-width:767px){

body.sticky-active{

    padding-top:80px;

}

.logo{

    padding:10px;

}

.logo img{

    max-height:60px;

}

.site-title{

    font-size:20px;

}

.main-navigation ul{

    display:block;

}

.main-navigation ul li a{

    padding:14px 0;

    font-size:15px;

}

.search-box span a{

    width:40px;

    height:40px;

}

}



/*====================================================
    SMALL MOBILE
====================================================*/

@media(max-width:480px){

.logo img{

    max-height:55px;

}

.site-title{

    font-size:18px;

}

body.sticky-active{

    padding-top:75px;

}

}



/*====================================================
    SMOOTH EFFECT
====================================================*/

.main-navigation a,
.search-box a,
.logo img,
.logo,
#topbar,
#top-header{

    transition:all .3s ease;

}



/*====================================================
    ACCESSIBILITY
====================================================*/

.main-navigation a:focus{

    color:var(--primary-color);

    outline:none;

}

.search-box a:focus{

    outline:none;

}

/*=========================================
    Hide Search on Tablet & Mobile
=========================================*/

@media (max-width: 991px){

    .search-box{
        display:none !important;
    }

}
/* Parent Menu Arrow */

.main-navigation .menu-item-has-children > a{
    position:relative;
    padding-right:24px;
}

.main-navigation .menu-item-has-children > a::after{

    content:"\f107";

    font-family:"Font Awesome 5 Free";
    font-weight:900;

    position:absolute;

    right:6px;

    top:50%;

    transform:translateY(-50%);

    font-size:12px;

    transition:.3s;

}

/* Rotate on Hover */

.main-navigation .menu-item-has-children:hover > a::after{

    transform:translateY(-50%) rotate(180deg);

}
/* Menu after removing search */

.main-navigation{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:100%;
}

.main-navigation ul{
    justify-content:flex-end;
    width:100%;
}

/* Search removed */

.search-box{
    display:none;
}
@media (max-width:991px){

    .logo{
        text-align:left;
    }

    .toggle-nav{
        text-align:right;
    }

}
.main-navigation ul ul{
    min-width:360px;
}
.main-navigation ul ul li a{
    white-space:normal;
    /* line-height:1.5; */
    line-height: 1;
    word-break:break-word;

}
.main-navigation ul ul ul{

    left:100%;

    top:0;

}
/*=========================================
    Scrollable Dropdown Menu
=========================================*/

.main-navigation ul ul{

    max-height: calc(100vh - 120px);

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color: var(--primary-color) #f2f2f2;

}

/* Chrome Scrollbar */

.main-navigation ul ul::-webkit-scrollbar{

    width:6px;

}

.main-navigation ul ul::-webkit-scrollbar-thumb{

    background:var(--primary-color);

    border-radius:10px;

}

.main-navigation ul ul::-webkit-scrollbar-track{

    background:#f5f5f5;

}
.home-page-header.is-sticky .main-navigation ul ul{

    max-height: calc(100vh - 90px);

}
.main-navigation ul ul{

    z-index:999999;

}

/*====================================================
    END
====================================================*/
@media (max-width:991px){

    /* Desktop Menu Hide */
    .main-navigation .main-menu{
        display:none;
    }

    /* Show only Toggle */
    .toggle-nav{
        display:flex !important;
        justify-content:flex-end;
        align-items:center;
    }

    /* Side menu open hone par */
    #mySidenav.open .main-menu{
        display:block;
    }

}