@import "globalvar.scss";
@import "mixins.scss";

$headerbg: $primary-color;

//Header Desktop Variables
$headerTextTransform:uppercase; 
$navPadding:3px 0px 3px 0px;
$navlinkColor:#000;
$navlinkPadding:10px 12px 10px 12px;
$navlinkFontSize:20px; 
 
//Header Mini Desktop Variables
$navlinkPaddingminiDesktop:10px 12px 10px 12px;
$navlinkFontSizeminiDesktop:13px;
$navPaddingminiDesktop:3px 0px 2px 0px;

//Header Burger Menu Variables
$navlinkColorPhone:#000;
$navlinkPaddingPhone:15px;
$navlinkFontSizePhone:19px; 

/* ----- Active and Hover Links ----- */

    //Desktop
    $navactiveLinkColor:#107187;;
    $navactiveBg:$bgnone; 
    $activeBgRadius:0;

    //Burger Menu 
    $navactiveLinkColorPhone:$lightGray;
    $navactiveBgPhone:$bgnone;

/* ----- Active and Hover Links End ----- */


//Dropdown Menu Variables
$dropDownPadding:10px;
$dropDownnavlinkColor:$blackColor;
$dropDownnavlinkFontSize:14px; 
$dropDownUlBg:#45829F;
$dropDownBorder:0;
$dropDownBorderRadius:0;

    //Burger Menu
    $dropDownUlBgPhone:$bgnone;
    $dropDownnavlinkColorPhone:#000;
    $dropDownPaddingPhone:8px 5px 5px 5px;
 
//Dropdown Menu Active Effects Variables
$dropDownnavlinkActiveColor:#fff;
$dropDownactiveBgColor:$logocolor;
$dropDownactiveBgRadius:0px;


//Burger Menu Variables
$mobilebg: #000; //$primary-color;
$navbarTopPaddingBurgerMenu: 20px;
$dismissWidth:35px;
$dismissHeight:35px;
$dismissLineHeight:35px;
$dismissBg: #FFC930;
$dismisColor: #0E95D9;


@mixin dropDownStyle() { 
    background: /*$dropDownUlBg*/none;padding: 0; margin: 0;min-width: 282px;
    border: $dropDownBorder;border-radius: $dropDownBorderRadius;
    transform: inherit!important;top: 100%!important; border-radius: 0px!important;
    li{ padding: 0px;
        margin-left: 0; 
        a{
            //color: $dropDownnavlinkColor;padding: $dropDownPadding; font-size: $dropDownnavlinkFontSize;
            text-transform: capitalize; background: $dropDownUlBg;
            white-space: normal; border-bottom: rgba($color: #f4f4f4, $alpha: 50%) solid 1px; font-weight: 300; display: block; color: #dddddd; font-size: 18px; padding: 16px 20px;
            &:hover{
                 background: $logocolor;
                a{color: $dropDownnavlinkActiveColor!important;}
            }
        }
        &.active{
            background: $dropDownactiveBgColor;border-radius: $dropDownactiveBgRadius;
            > a{color: $dropDownnavlinkActiveColor!important;background: $dropDownactiveBgColor;}
            @include tab{ background: #d9d9d9;
                a{background: #d9d9d9; color: #222!important;}
            }
        } 

        //For Showing 2 Step Dropdown Menu on Right Side
        &.submenu{
            .dropdown-toggle{transform: rotate(-90deg);}
            .subdropdown{ left: 100%;top: 0!important;}
            @include tab{
                .dropdown-toggle{transform: rotate(0deg);}
            }
        } 
        &:last-child{
            a{border-bottom: 0px;}
        }
    } 
    @include desktop1440{
        li{
            a{font-size: 17px; padding: 13px 20px;}
        }
    }
    @include mini-desktop{
        li{
            a{font-size: 15px; padding: 10px 15px;}
        }
    }
    @include tab{
        padding:0px 0px;background: none; border-top: rgba(255,255,255,0.50) solid 0px;border-bottom: rgba(255,255,255,0.50) solid 0px;
        li{ border-bottom: solid 1px #CBCBCB;
            text-align: center;
            a{ color: $dropDownnavlinkColorPhone;text-align: center;padding: 10px 15px; border: none; border-color: #222; font-size: 17px; font-weight: 300; text-align: left; background: none; color: #000;}
            &.dropdown{
                .dropdown-toggle{display: flex; justify-content: center; align-items: center;
                    i{
                        &::before{top: -1px;}
                    }
                }
            }
            &:last-child{
                a{border-bottom: none;}
            }
        }

        //For Showing 2 Step Dropdown Menu on Right Side to Bottom in Burger Menu
        .subdropdown{left: 0!important;}
    }
}


@mixin fullwidth {
    @include dispflex(flex,space-between,center); min-height: 80px;
    position: relative;
    .logo{ position: relative;  padding: 11px 0px;
        max-width: 174px; min-width: 174px;
        a{ 
            img{ max-width: 100%;}
        }
    }
    .navbarLink{
        ul{ position: relative;
            @include navFlex($alignCenter);
            li{padding: $navPadding; margin-right: 28px;  font-family: $fontfamily; font-weight: 300; text-transform: capitalize;  padding-top: 36px; padding-bottom: 36px; position: relative;              
                &::before{content: ''; position: absolute; left: 0px; right: 0px; bottom:0px; margin: 0px auto;  background: #34708D; opacity: 0; width: 6px; height: 30px;}
                a{position: relative;
                    //&::before{content: ''; position: absolute; left: 0px; right: 0px; bottom:0px; width: 0; height: 3px; background: #34708D; opacity: 0; @include transition(0.4s); width: 6px; height: 30px;}
                }
                &:hover,&.active{
                    &::before{ opacity: 1; height: 30px;}
                    a{
                        //&::before{ opacity: 1; width: 100%; @include transition(0.4s);}
                    }
                }
                .dropdown-toggle::after{border-top: 0.4em solid;
                    border-right: 0.4em solid transparent;
                    border-left: 0.4em solid transparent;}
                .dropdown-toggle{padding: 0px;
                    &::after{display: none;}
                }
                &.dropdown{
                    .dropdown-toggle{//@include dispflex(flex,center,center);
                        //i{display: none;}
                        i{font-size: 18px; margin-left: 9px; width: 20px; height: 13px; background: url(../images/menu_arrow.png) no-repeat left top; position: relative; top: 2px;
                            &::before{position: relative; top: 1px; font-size: 0px;}
                            @include desktop1400{top: 5px; background-size: 14px; width: 14px; height: 9px;margin-left: 5px;}
                            @include mini-desktop{top: 7px;}
                            @include tab1024{background-size: 12px; width: 12px; height: 9px;margin-left: 5px;}
                            @include tab{top: 5px; background-size: 14px; width: 14px; height: 11px;margin-left: 8px; top: 11px;}
                        }                        
                    }
                }
                ul{
                    li{ margin-right: 0px;
                        a{
                            &::before{display: none;}
                        }
                    }
                }
                @include desktop1440{ margin-right: 26px; padding-top: 38px; padding-bottom: 38px;
                    &::before{width: 5px;}
                } 
                @include desktop1400{ margin-right: 21px;} 
                @include desktop1366{padding-top: 35px; padding-bottom: 35px;}
                @include mini-desktop{padding: $navPaddingminiDesktop; margin-right: 16px; padding-top: 28px;  padding-bottom: 28px;
                    &:hover,&.active{
                        &::before{height: 25px;}
                    }                    
                }
                @include tab{ padding: 0px 0px; margin-right: 0px; width: 100%; border-bottom: solid 1px #CBCBCB; text-align: left;
                    &::before{display: none;}
                    &:first-child{border-top: solid 1px #CBCBCB;}
                    &.dropdown{
                        .dropdown-toggle{
                            i{display: block; margin-left: 6px;}
                        }
                    }
                }
                a{ 
                    color: $navlinkColor;font-size: $navlinkFontSize;/*padding: $navlinkPadding;*/display: inline-block;
                    @include desktop1600{ font-size: 19px;}
                    @include desktop1440{ font-size: 18px;}  
                    @include desktop1400{ font-size: 16px;}                  
                    @include mini-desktop{
                        font-size: 14px;/*padding: $navlinkPaddingminiDesktop;*/
                    }
                    @include tab{
                        color: $navlinkColorPhone;font-size: $navlinkFontSizePhone;padding: $navlinkPaddingPhone;
                        &:before{display: none;}
                    }  
                }
                //Main Header Navigation Hover Effect
                &.active ,&:hover{
                    a { background: $navactiveBg; border-radius: $activeBgRadius;color: $navactiveLinkColor;}
                    @include tab{ background: #EDEDED;
                        a { color: #000;}
                    }
                }  
                
                //DropDown menu Styling
                > .dropdown-menu{   @include dropDownStyle();   } 

                //For Showing Dropdown on Hover css in Desktop
                &:hover, &:focus{
                    > .dropdown-menu{
                        li{flex-direction: column;}
                        @include tab_min{
                            display: block;opacity: 1;visibility: visible;z-index: 10;transition: all .25s ease-out;
                            li{flex-direction: column;}
                        }
                    } 
                }

                //For Showing Sub Dropdown in Bottom
                &.openBottom{
                    li.submenu .dropdown-toggle{transform: rotate(0deg);}
                    .subdropdown{
                        left: 0!important;top: 100%!important;position: relative;
                        li{
                            padding-left: 20px;
                            a{font-size: 13px;padding: 0;}
                            &:hover{
                                background: none;
                                a{color: $lightGray!important}
                            }
                        }
                    }
                }
                &:last-child{margin-right: 0px;}
                @include tab_min{
                    &.dropdown{//position: static;
                        .dropdown-menu{ /*padding: 30px 30px 0px 40px;*/ box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.16);
                            width: 100%; border-radius: 10px; overflow: hidden;
                            ul{@include dispflex(flex,flex-start,flex-start); flex-wrap: wrap;
                            li{width: 30%; padding-right: 15px; padding-bottom: 26px;
                                &:last-child{padding-right: 0px;}
                                &:hover{background: none;}
                                a{padding: 2px 0px; font-size: 14px; font-weight: 500;
                                    &:hover{ color: $linkcolor!important;}
                                }
                            }                            
                            }
                            .li_none{ padding-bottom: 30px;
                                ul{ flex-direction: column;
                                    li{width: 100%; padding-bottom: 21px;}
                                }
                            }
                            .navi_box{ padding-bottom: 26px;
                                div{padding-bottom: 8px;}
                                a{ color: $blackColor;
                                    &::before{display: none;}
                                }
                                &:hover{
                                    a{color: $linkcolor;}
                                }
                            }
                        }
                    }
                }
                @include tab{
                    li{width: 100%;}
                    &.dropdown{
                        .navi_box{ text-align: center;
                            a{color: #000; font-size: 16px; border-bottom: none;}
                            div{display: none;}
                        }
                        .dropdown-menu{ background: none;
                            .none_div{ display: none;}
                            //li{ border-bottom: none!important;}
                        }
                    }
                    &.dropdown{
                        .dropdown-toggle{display: flex; justify-content: flex-start; align-items: flex-start; padding: 15px;
                            i{
                                &::before{top: -1px; }
                            }
                        }
                    }
                }
            }
            @include tab {
                flex-direction: column;margin: 6px auto;
                li > .dropdown-menu{position: relative!important;transform: none!important;}
            }
        }
        //Burger Menu CSS
        &.active {right:0;}
        @include tab {
            background: $mobilebg;   
            width: 100%;position: fixed; top: 0;right: -100%; 
            height: 100vh;z-index: 9999; transition: all 0.3s; 
            overflow-y: scroll;text-align: center;
            
            @include dispflex(flex,center,flex-end); flex-direction: column;
            .navbar-nav {   flex-direction: column; width: 100%; margin: 0px 30px;}
            #dismiss .d-md-none {display:block !important;}
            .hideclose{ background-color: $primary-color; color: $whiteColor;}
            .navi_mobile{max-width: 496px; width: 100%; height: 100%; background: #fff; padding-top: $navbarTopPaddingBurgerMenu;
                .navbarBtn{display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; margin-bottom: 30px;}
                .navbar-collapse{background: #fff;}
                .crossLine{margin-right: 35px;
                    .line{ background: $color88;
                        &.crossLine1{top:42%; transform: rotate(45deg);}
                        &.crossLine2{opacity:0;}
                        &.crossLine3{bottom:50%;transform: rotate(135deg);}
                    }                    
                }
                @include phone{
                    max-width: 100%; padding-top: 24px;
                    .crossLine{margin-right: 16px;}
                    .navbar-nav {margin: 0px;}
                }
            }
        }
        @include phone-xs{
            .navi_mobile{
                .navbarBtn{margin-bottom: 15px;}
            }
        }
        
        //Close Button in Burger Menu
        #dismiss{
            width: $dismissWidth;height: $dismissHeight;line-height: $dismissLineHeight;
            background: $dismissBg;color: $dismisColor;text-align: center;
            position: absolute;top: 0px;  right: 0px;
            cursor: pointer;transition: all 0.3s; z-index:9999;
        }
    }
}
.crossLine{
    background: /*$dismissBg*/ none; position: relative; display: inline-block; padding:0px; 
    width: 36px; height:43px; cursor: pointer;border:inherit;
    &:focus, &:hover{border: inherit;outline: none;} 
    .line{display: block;background: #000;height: 4px; width: 36px; border-radius: 50px; position: absolute; left:0px; right:0px; margin: auto;
        &.crossLine1{top:9px; transition:0.5s ease-in-out;}
      &.crossLine2{top:45%; transition:0.5s ease-in-out;}    
      &.crossLine3{bottom:10px;transition:0.5s ease-in-out;}
    }
    &.active{ 
        .line{
            &.crossLine1{top:42%; transform: rotate(45deg);}
            &.crossLine2{opacity:0;}
            &.crossLine3{bottom:45%;transform: rotate(135deg);}
        }
    }
    @include tab{ 
        &.active{background: inherit;padding:10px;
            .line{background: #8b7352;}
        } 
        &.active .line.crossLine3{bottom: 50%;}
    } 
  
    @include phone-xs{ 
        width: 36px; height: 42px;
        .line{ width: 32px; height: 3px;}
    }
}
#sidebarCollapse { z-index: 5555;} 
/*body{
    &.overflowhidden{
        .crossLine{position: absolute;
            z-index: 9999;
            top: 2px;
            right: -36px;}
    }
}*/
/* ======= Header Css Strat ======= */
/* ------- Header Area Strat ------- */
.mainHeader{ //position: fixed; z-index: 9; top: 0px; left: 0px; width: 100%; background-color: #fff;  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.16);     
    header{@include fullwidth;//padding: 11px 0px;  
        .navbarBtn{display: none;
            @include tab{display: block;}
        }      
        .navBlock{margin-left: 15px;}
		.social_link{ padding: 0px; margin: 0px 0px 15px 0px; display: flex; justify-content: flex-end; align-items: center;
            .conact_top{display: flex; flex-wrap: wrap; justify-content: flex-end; margin-right: 35px;
                span{margin-left: 20px;
                    i {margin-right: 5px; color: #048BC6; font-size: 16px;}
                    a {color: #022660; display: flex; align-items: center; line-height: 14px;
                        &:hover{color: #000;}
                    }
                }
            }
			ul{justify-content: flex-end;}
		}
    } 
    @include desktop1366{
        header{
            .logo{max-width: 154px; min-width: 154px;}
        }
    }
    @include mini-desktop{
        header{
            .logo{max-width: 118px; min-width: 118px;}
        }
    }
	@media (min-width: 768px) and  (max-width: 1000px){
		header .navBlock{@include dispflex(flex,center,flex-end); flex-direction: column;}
	}  
    @include tab{
        .header_right{}
        header{ min-height: 60px;
            .logo{ max-width: 135px; min-width: 135px; }
        }
    }
    @include phone{
        header{ min-height: 50px;
            .logo{ max-width: 125px; min-width: 125px; }
            .header_right{
                .navbarLink ul li a{ white-space: normal;}
            }
        }		
    }
    @include phone-xs{
        header{
            .logo{ max-width: 142px; min-width: 142px;}
        }		
    }
    @include phone-xs{
        header{
            .logo{ max-width: 112px; min-width: 112px;}
        }		
    }
    @include phone480{
        header{
            .logo{ max-width: 124px; min-width: 124px;}
        }		
    }
}
/* ------- Header Area End ------- */