*{box-sizing: border-box;}
body {
  margin: 0 auto;
  line-height: normal;
  position: relative;
  background-color: #fff;
  width: 100%; max-width: 2100px;
  font-size: 50px;
  color: #000;
  font-family: 'Poppins', sans-serif;
}
a:focus{outline: none;}
img, iframe{max-width: 100%; height: auto;}
.text-right{text-align: right;}

.mobile-header{display: none;}
.navbar{ width: auto; display: inline-block;}
.navbar > ul{margin: 0; padding: 0;}
.navbar > ul > li{list-style: none; display: inline-block; color: #000; font-size: 15px; font-weight: 400; position: relative; margin: 0 15px; vertical-align: middle; font-family: 'Poppins', sans-serif; text-transform: capitalize;}
.navbar > ul > li > a{transition:all .3s; color:#000; text-decoration: none; padding: 0; position: relative; display: block;}
.navbar > ul > li > a:after{content: ""; transition: 0.3s ease-in-out; width: 0; height: 2px; background: #000; display: inline-block; position: absolute; top: 100%; left: 0;}
.navbar > ul > li > a:hover:after, .navbar > ul > li.active > a:after{width: 100%;}
/*submenu css*/
.navbar > ul > li > ul {position: absolute; background: #fff; padding: 0px 0 0; left: 0%; top: 100%; width: 200px; display: none; box-shadow: 0 3px 5px rgb(0 0 0 / 20%);  border-radius: 0 0 4px 4px; margin: 0; z-index: 9;}
.navbar > ul > li:hover > ul {display: block;}
.navbar > ul > li > ul > li {list-style: none; display: block; text-transform: capitalize; color: #000; font-size: 15px; font-weight: 400; position: relative; padding: 0; border-bottom: 1px solid #ccc; line-height: 1.5;}
.navbar > ul > li > ul > li > a{text-decoration: none;  color: #000; position: relative; display: block; padding: 7px 10px;}
.navbar > ul > li > ul > li:hover > a, .navbar > ul > li > ul > li > a:hover{
 background: #000; color: #fff; transition: all .5s;}
.navbar > ul > li > ul > li:last-child{border-bottom: none;}
.navbar > ul > li > ul > li > ul{position: absolute; background: #fff; padding:0; left: 100%; top: 0%; width: 200px; display: none; box-shadow: 0 0 5px rgb(0 0 0 / 20%);  border-radius: 0 4px 4px 0; z-index: 9;}
.navbar > ul > li > ul > li:hover > ul {display: block;}
.navbar > ul > li > ul > li > ul > li {list-style: none; display: block; text-transform: capitalize; color: #000; font-size: 15px; font-weight: 400; position: relative; padding: 0; border-bottom: 1px solid #ccc; line-height: 1.5;}
.navbar > ul > li > ul > li > ul > li:last-child{border-bottom: none;}
.navbar > ul > li > ul > li > ul > li > a {text-decoration: none;  color: #000; position: relative; padding: 7px 10px; display: block;}
.navbar > ul > li > ul > li > ul > li > a:hover { background: #000; color: #fff;}
.navbar > ul > li.has-menu > a:after {
    content: " ";
    position: absolute;
    background: url(../images/menu-arrow.png) no-repeat bottom;
    width: 11px;
    height: 10px;
    right: -15px; left: inherit;
    top: 6px;
}
.navbar > ul > li.has-menu > a:hover:after {
/*    background: url(../images/menu-arrow.png) no-repeat bottom;*/
}
.navbar > ul > li.has-menu ul li.has-menu > a:after {
    content: " ";
    background: url(../images/menu-arrow-active.png) no-repeat bottom;
    transform: rotate(270deg); width: 11px; height: 10px; display: inline-block; position: absolute;
    right: 6px; top: 14px;
}
.navbar > ul > li.has-menu ul li.has-menu > a:hover:after{
  background: url(../images/menu-arrow-white.png) no-repeat bottom;
}

#nav-icon {
  width: 25px;
  height: 15px;
  position: relative;
  margin: 0 0 0 30px; float: right; z-index: 9999;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 6px;
}

#nav-icon span:nth-child(3) {
  top: 12px;
}
#nav-icon.open span {background: #fff;}
#nav-icon.open span:nth-child(1) {
  top: 5px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon.open span:nth-child(3) {
  top: 5px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

@media(min-width:1220px) {
    #nav-icon{display: none;}
}
@media(max-width:1220px) {
    .main-bar{display: none;}
    .mobile-header{display: block; padding: 15px 0;}
    .mobile-header .wrapper{display: flex; justify-content: space-between; align-items: center;}
    .mobile-header .brand{ display: inline-block; margin-right: 0;}
    .mobile-header .brand img{display: block;}
    #nav-icon.open ~ .navbar{height: 100vh; visibility: visible; overflow-y: auto;}
    .mobile-header .navbar{
        height: 0px; visibility: hidden; overflow: hidden; transition: all 0.3s ease-in-out;
        position: fixed; margin: 0; padding: 70px 0 0;
        width: 100%;
        background: #000;
        left: 0; z-index: 99;
        top: 0;
    }
    .mobile-header .navbar > ul > li{ display: block; padding: 10px 0; text-align: center; font-size: 18px; margin: 0; }
    .mobile-header .navbar ul li a{color: #fff; display: inline-block;}
    
    .mobile-header .navbar > ul > li > ul {
        position: relative;
        width: 100%; padding:0; margin-top: 30px;
        box-shadow: none; background: none;
        border-radius: 0; transform: translateY(0px);
    }
    .mobile-header .navbar > ul > li > ul > li > a {
        padding: 10px 10px;
    }
    .mobile-header .navbar > ul > li > ul > li > ul {
        position: static; background: none;
        width: 100%;
        box-shadow: none;
        border-radius: 0; margin-top: 20px;
    }
    .mobile-header .navbar > ul > li > ul > li > ul > li {

    }
    .mobile-header .navbar > ul > li > a:hover:after{display: none;}
    
    
    .navbar > ul > li:hover > ul, .navbar > ul > li > ul > li:hover > ul {display: none;}
    .mobile-header .navbar > ul li.has-menu > a:after{background: url(../images/menu-arrow-white.png) no-repeat bottom; }
    .mobile-header .navbar > ul li.has-menu ul li.has-menu > a:after{right: -10px; background: url(../images/menu-arrow-white.png) no-repeat bottom; top: 18px;}
}

@media(max-width: 800px){
    .navbar > ul {}
    .navbar > ul > li {    margin: 0 0 15px;    font-size: 28px;}
}