header{background:rgba(255,255,255, 0.5); min-height: 120px; position: relative; z-index: 1; padding: 0 100px;}
.brand a{display: block; position: absolute; z-index: 3; top: 10px;}
.brand .logo{width: 14%; display: inline-block;}
.brand .mahe-logo{width: 19%; display: inline-block;}
.brand-name{color: #df5624; display: inline-block; margin-left: 15px; margin-right: 50px;}
ul.xtra-tMenu{margin: 65px -65px 0 0; padding: 0; list-style: none; z-index: 1; position: relative; text-align: right;}
ul.xtra-tMenu li{display: inline-block; margin: 0 20px;}
ul.xtra-tMenu li.top-login a{color:#1f4746;}
ul.xtra-tMenu li.top-login a:hover{color:#fff;}
ul.xtra-tMenu li.top-signup a{color:#25868c; border: 1px solid #25868c; padding: 10px 20px;}
ul.xtra-tMenu li.top-signup a:hover{color:#25868c; border: 1px solid #fff; padding: 10px 20px;}

.menu-container{ position: relative;}
.menu-container .section{ width: 100%;  height: 500px;}
.menu-container .section:nth-of-type(1){ background: #2c6c6b;}
.menu-container .section:nth-of-type(2){ background: #ff9800;}
.menu-container ul.toggle{ position: fixed; top: 8%;  right: 6%; width: 40px;  height: 33px; cursor: pointer; z-index: 4; }
.menu-container ul.toggle::before{ content: ''; position: absolute; top: 0;   left: -150%; color: #262626; font-size: 27px; line-height: 50px; transition: .5s;}
.menu-container ul.toggle li{ list-style: none; background: #1f4746; position: absolute; left: 5%; width: 100%; height: 4px; transform: translate(0,-50%); transition: .9s; border-radius: 20px;}
.menu-container ul.toggle li:nth-of-type(1){ top: 20%; left: 35%;}
.menu-container ul.toggle li:nth-of-type(2){ top: 50%; left: 35%;}
.menu-container ul.toggle li:nth-of-type(3){ top: 80%; left: 35%; width: 60%;}
.menu-container ul.toggle.active li{ background: #fff;}
.menu-container ul.toggle.active::before{ content: 'Close'; color: #fff; left: -75px; top: -10px;}
.menu-container ul.toggle.active li:nth-of-type(1){ top: 50%; left: 5%; transform: translate(0,-50%) rotate(45deg);}
.menu-container ul.toggle.active li:nth-of-type(2){ top: 50%; opacity: 0;}
.menu-container ul.toggle.active li:nth-of-type(3){ top: 50%; left:5%; width: 100%; transform: translate(0,-50%) rotate(-45deg);}
.menu-container .fullscreen-menu{ position: fixed; left: 100%; top: 0; width: 100%;  height: 100%; background: #000; transition: .9s; z-index: 3;}
.menu-container .fullscreen-menu.active{ left: 20%; padding: 0 10px 0 80px;}
.menu-container .fullscreen-menu.active:before{content: ""; position: absolute; top: 0; left: -20%; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5);}

.menu-container .fullscreen-menu ul.menu{ position: absolute; top: 50%; width: 40%; padding-left: 0; text-align: left;  transform: translateY(-50%);}
.menu-container .fullscreen-menu ul.menu li{ list-style: none; position: relative;}
.menu-container .fullscreen-menu ul.menu li a{ display: inline-block; position: relative; padding: 5px 20px; background: transparent; color: #fff; text-decoration: none; font-size: 22px; font-weight: 500;}
.menu-container .fullscreen-menu ul.menu li .topItem{ display: inline-block; position: relative; padding: 5px 20px; background: transparent !important; color: #fff; text-decoration: none; font-size: 22px; font-weight: 500;}
.menu-container .fullscreen-menu ul.menu li .topItem button{background: transparent; color: #fff; outline: none; border: none; font-weight: 500;padding:0px;}
.menu-container .fullscreen-menu ul.menu li a:hover{ background: #000; color: #2c6c6b;}

.sub-menu{margin-bottom: 20px;}
.sub-menu li a{font-size: 20px !important;}

.menu-container .fullscreen-menu .menu-content{ position: absolute; top: 40%; right: 10%; width:35%; text-align: left;  transform: translateY(-50%);}
.menu-container .fullscreen-menu .menu-content .menu-contact{margin-top: 20px;}
.menu-container .fullscreen-menu .menu-content .menu-contact a{color: #fff; margin-bottom: 5px;}



/*==============================================================================
                              Start Mobile CSS
===============================================================================*/
/* ================== Mobile Menu Change Brake Point ================== */
/* @media only screen and (max-width: 991px) { */
@media(min-width:320px) and (max-width:1080px){
  /* ================== Mobile Base CSS ================== */
.menu-container-out{position: relative;}
.menu-container ul.toggle {position: fixed; right: 25px; top: 10px;}
header{background: #fff !important; padding: 0 10px;}
.brand-name{font-size: 16px; margin: 0;}
.brand img{margin: 0 auto 0 0; width: 50%;}
.brand {padding: 20px 0px 0 0px;}
.brand .mahe-logo{position: absolute; left:70px; bottom: -36px;}
.menu-container .fullscreen-menu .menu-content .menu-contact{display: none;}
.menu-container .fullscreen-menu ul.menu{ width: 100%; height: 80%; overflow-y: scroll; padding: 0; text-align: right; top: 8%; right: 3%; transform: translateY(-0%);}
.menu-container .fullscreen-menu.active{padding: 0 10px; left: 0;}
.menu-container .fullscreen-menu .menu-content{bottom: 0; right: 0; top: unset; width: 100%; text-align: center;}
.menu-container .fullscreen-menu ul.menu li a{font-size: 18px !important;}
.menu-container .fullscreen-menu ul.menu li .topItem{font-size: 18px;}
.sub-menu{padding-left: 0;}
.menu-container ul.toggle.active::before{display: none;}


}