.site-header{
  .main-nav-wrap{
      .mega-menu-wrap{
          &#mega-menu-wrap-primary{
              ul.mega-menu{
                  &#mega-menu-primary{
                      position: relative;
                      >li{
                          position: static;
                          &.mega-menu-flyout{
                              position: relative;
                          }
                          >ul{
                              &.mega-sub-menu{
                                  .mega-menu-row{
                                      .menu{
                                        padding: 0;
                                        list-style: none;
                                        >li{
                                            >a{
                                                display: block;
                                                padding: 3px 0;
                                            }
                                        }
                                        .sub-menu{
                                            list-style: none;
                                            padding-left: 5px;
                                        }
                                      }
                                      &.menu_service{
                                          padding-top: 5px;
                                          .menu{
                                              >li{
                                                  >a{
                                                      &::before{
                                                        content: '\e916';
                                                        font-family: 'fontello';
                                                        display: inline-block;
                                                        margin-right: 15px;
                                                        font-size: 8px;
                                                        transform: rotate(-90deg);
                                                      }
                                                  }
                                              }
                                          }
                                      }
                                      &.menu_link_title{
                                         // padding: 0 30px;
                                          .menu{
                                            >li{
                                                >a{
                                                   padding: 10px 0;
                                                   border-bottom: 1px solid #cccccc;
                                                   @include media-breakpoint-down(lg){
                                                       border-bottom: 1px solid #444;
                                                   }
                                                   font-size: 1.3em;
                                                }
                                            }
                                            .sub-menu{
                                                padding-top: 15px;
                                                >li{
                                                    >a{
                                                        display: block;
                                                        padding: 3px 0;
                                                        &::before{
                                                            content: '\e916';
                                                            font-family: 'fontello';
                                                            display: inline-block;
                                                            margin-right: 15px;
                                                            font-size: 8px;
                                                            transform: rotate(-90deg);
                                                          }
                                                    }
                                                }
                                            }
                                          }
                                      }
                                      &.menu_about{
                                          padding-top: 15px;
                                          .about_title{
                                              font-size: 1.3em;
                                              display: block;
                                              padding-bottom: 30px;
                                          }
                                          .about_des1{
                                              display: block;
                                              padding-bottom: 20px;
                                          }
                                          .about_des2{
                                              display: block;
                                              padding-bottom: 20px;
                                          }
                                          .about_readmore{
                                              display: block;
                                              &::after{
                                                  content: '\f101';
                                                  font-family: 'fontello';
                                                  margin-left: 5px;
                                              }
                                          }
                                      }
                                      &.menu_contact{
                                          padding-top: 15px;
                                          .contact_title{
                                              font-size: 1.3em;
                                              padding-bottom: 10px;
                                              display: block;
                                                line-height: 1;
                                          }
                                          .contact_address{
                                              padding-bottom: 30px;
                                          }
                                          .contact_open{
                                            .open_title{
                                                font-size: 1.3em;
                                                display: block;
                                                padding-bottom: 5px;
                                                line-height: 1;
                                              }
                                              >div{
                                                  padding: 8px 0;
                                                  line-height: 1;
                                              }
                                          }
                                         
                                      }

                                      .mega-sub-menu {
                                          width: 100%;
                                      }
                                  }
                              }
                          }
                          &.mega-menu-flyout{
                            .mega-sub-menu{
                                >li{
                                    >a{
                                        &::before{
                                          content: '\e916';
                                          font-family: 'fontello';
                                          display: inline-block;
                                          margin-right: 15px;
                                          font-size: 8px;
                                          transform: rotate(-90deg);
                                        }
                                    }
                                }
                            }
                             }
                          
                            &.mega-toggle-on{
                                >a{
                                    &::before{
                                       // border-top-color: #ccc;
                                    }
                                }
                            }
                      }
                      .menu-label-new   {
                        position: relative;
                        display: table;
                          &::before{
                            content: 'NEW';
                            position: absolute;
                            right: -30px;
                            top: -5px;
                            color: #FFF;
                            letter-spacing: .3px;
                            font-weight: 600;
                            font-size: 9px;
                            line-height: 12px;
                            background-color: #D41212;
                            padding: 2px 5px 1px;
                          }
                          &::after{
                            content: "";
                            position: absolute;
                            right: 0;
                            width: 0;
                            height: 0;
                            border-style: solid;
                            border-top-width: 4px;
                            border-bottom-width: 0;
                            border-right-width: 7px;
                            border-left-width: 0;
                            border-color: #D41212;
                            top: 9px;
                            right: -18px;
                            border-left-color: transparent!important;
                            border-right-color: transparent!important;
                            border-bottom-color: transparent!important;
                          }
                      }
                  }
              }
          }
      }
  }
  &.teepro-header-2{

  }
  &.header-desktop{
    .main-nav-wrap{
        .mega-menu-wrap{
            &#mega-menu-wrap-primary{
                ul.mega-menu{
                    &#mega-menu-primary{
                        >li{
                            &:first-child{
                                >a{
                                    padding-left: 70px;
                                }
                            }
                            >a{
                                // &::before{
                                //     content: '';
                                //     position: absolute;
                                //     display: block;
                                //     border-style: solid;
                                //     border-color: transparent;
                                //     border-top-color: transparent;
                                //     border-width: 10px;
                                //     left: 50%;
                                //     transform: translateX(-50%);
                                //     z-index: 10000;
                                //     transition: all 1s ease-in-out;
                                // }
                              }
                            >ul{
                                &.mega-sub-menu{
                                    margin-top: 0px;
                                    left:0px;
                                    top: calc(100% + 25px);
                                    &::before{
                                        content: '';
                                        position: absolute;
                                        left: 0px;
                                        bottom: 100%;
                                        top: -3px;
                                        right: 0;
                                        display: block;
                                      }
                                      .mega-menu-row{
                                        &.menu_contact{
                                            .contact_title{
                                                color: #000;
                                            }
                                            .contact_open{
                                                .open_title{
                                                color: #000;
                                                }
                                            }
                                        }
                                        &.menu_about{
                                            .about_title{
                                                color: #000;
                                            }
                                        }
                                    }
                                }
                            }

                        
                        }
                    }
                }
            }
        }
    }
  }
  &.header-mobile{
    .main-nav-wrap{
        .mega-menu-wrap{
            &#mega-menu-wrap-primary{
                ul.mega-menu{
                    &#mega-menu-primary{
                        >li{
                            >ul{
                                &.mega-sub-menu{
                                   background-color: #0c0c0c;
                                   padding: 0;
                                   .mega-menu-row{
                                    &.menu_link_title{
                                        padding: 0;
                                    }
                                    &.menu_contact{
                                        padding: 0;
                                    }
                                    .mega-menu-column {
                                        .mega-menu-item{
                                            padding-top: 0;
                                            padding-bottom: 0;
                                        }
                                    }
                                   }
                                }
                            }
                            &:not(:last-child){
                                border-bottom: 1px solid #444;
                            }
                            &.mega-menu-flyout{
                                .mega-sub-menu{
                                    >li{
                                        >a{
                                            background-color: #0c0c0c;
                                            color: #fff;
                                        }
                                    }
                                }
                            }
                            &.mega-menu-grid {
                                a{
                                    color: #fff;
                                }
                                div{
                                    color: #fff;
                                    
                                }
                                span{
                                    color: #fff;
                                }
                                i{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
  }
  &.teepro-header-3{
      &.header-desktop{
        .main-nav-wrap{
            .mega-menu-wrap{
                &#mega-menu-wrap-primary{
                    ul.mega-menu{
                        &#mega-menu-primary{
                            text-align: left;
                            >li{
                                &:first-child{
                                    >a{
                                        padding-left: 0;
                                    }
                                }
                                >ul{
                                    &.mega-sub-menu{
                                        top: calc(100% + 10px);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        } 
      }
  }
    &.teepro-header-4,&.teepro-header-2{
        &.header-desktop{
        .main-nav-wrap{
            .mega-menu-wrap{
                &#mega-menu-wrap-primary{
                    ul.mega-menu{
                        &#mega-menu-primary{
                            >li{
                                >ul{
                                    &.mega-sub-menu{
                                        top: calc(100% + 20px);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        } 
        }
    }
}