.elementor-592 .elementor-element.elementor-element-38e5fed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-592 .elementor-element.elementor-element-38e5fed:not(.elementor-motion-effects-element-type-background), .elementor-592 .elementor-element.elementor-element-38e5fed > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#08293B;}.elementor-592 .elementor-element.elementor-element-70e51ce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-592 .elementor-element.elementor-element-70e51ce.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-site-logo .hfe-site-logo-container .hfe-site-logo-img{border-color:var( --e-global-color-primary );}.elementor-widget-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-592 .elementor-element.elementor-element-630bff1 .hfe-site-logo-container, .elementor-592 .elementor-element.elementor-element-630bff1 .hfe-caption-width figcaption{text-align:center;}.elementor-592 .elementor-element.elementor-element-630bff1 .widget-image-caption{margin-top:0px;margin-bottom:0px;}.elementor-592 .elementor-element.elementor-element-630bff1 .hfe-site-logo-container .hfe-site-logo-img{border-style:none;}.elementor-592 .elementor-element.elementor-element-f118545{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-navigation-menu .menu-item a.hfe-menu-item.elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-navigation-menu .menu-item a.hfe-menu-item.elementor-button:hover{background-color:var( --e-global-color-accent );}.elementor-widget-navigation-menu a.hfe-menu-item, .elementor-widget-navigation-menu a.hfe-sub-menu-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-navigation-menu .menu-item a.hfe-menu-item, .elementor-widget-navigation-menu .sub-menu a.hfe-sub-menu-item{color:var( --e-global-color-text );}.elementor-widget-navigation-menu .menu-item a.hfe-menu-item:hover,
								.elementor-widget-navigation-menu .sub-menu a.hfe-sub-menu-item:hover,
								.elementor-widget-navigation-menu .menu-item.current-menu-item a.hfe-menu-item,
								.elementor-widget-navigation-menu .menu-item a.hfe-menu-item.highlighted,
								.elementor-widget-navigation-menu .menu-item a.hfe-menu-item:focus{color:var( --e-global-color-accent );}.elementor-widget-navigation-menu .hfe-nav-menu-layout:not(.hfe-pointer__framed) .menu-item.parent a.hfe-menu-item:before,
								.elementor-widget-navigation-menu .hfe-nav-menu-layout:not(.hfe-pointer__framed) .menu-item.parent a.hfe-menu-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-navigation-menu .hfe-nav-menu-layout:not(.hfe-pointer__framed) .menu-item.parent .sub-menu .hfe-has-submenu-container a:after{background-color:var( --e-global-color-accent );}.elementor-widget-navigation-menu .hfe-pointer__framed .menu-item.parent a.hfe-menu-item:before,
								.elementor-widget-navigation-menu .hfe-pointer__framed .menu-item.parent a.hfe-menu-item:after{border-color:var( --e-global-color-accent );}
							.elementor-widget-navigation-menu .sub-menu li a.hfe-sub-menu-item,
							.elementor-widget-navigation-menu nav.hfe-dropdown li a.hfe-sub-menu-item,
							.elementor-widget-navigation-menu nav.hfe-dropdown li a.hfe-menu-item,
							.elementor-widget-navigation-menu nav.hfe-dropdown-expandible li a.hfe-menu-item,
							.elementor-widget-navigation-menu nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-592 .elementor-element.elementor-element-35ae63d .menu-item a.hfe-menu-item{padding-left:15px;padding-right:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d .menu-item a.hfe-sub-menu-item{padding-left:calc( 15px + 20px );padding-right:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 40px );padding-right:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 60px );padding-right:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 80px );padding-right:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d .menu-item a.hfe-menu-item, .elementor-592 .elementor-element.elementor-element-35ae63d .menu-item a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d ul.sub-menu{width:220px;}.elementor-592 .elementor-element.elementor-element-35ae63d .sub-menu a.hfe-sub-menu-item,
						 .elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown li a.hfe-menu-item,
						 .elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown li a.hfe-sub-menu-item,
						 .elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown-expandible li a.hfe-menu-item,
						 .elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-592 .elementor-element.elementor-element-35ae63d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-592 .elementor-element.elementor-element-35ae63d .hfe-nav-menu__toggle{margin:0 auto;}.elementor-592 .elementor-element.elementor-element-35ae63d .menu-item a.hfe-menu-item, .elementor-592 .elementor-element.elementor-element-35ae63d .sub-menu a.hfe-sub-menu-item{color:#0F0F0F;}.elementor-592 .elementor-element.elementor-element-35ae63d .sub-menu,
								.elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown,
								.elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown-expandible,
								.elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown .menu-item a.hfe-menu-item,
								.elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown .menu-item a.hfe-sub-menu-item{background-color:#fff;}.elementor-592 .elementor-element.elementor-element-35ae63d .sub-menu li.menu-item:not(:last-child),
						.elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown li.menu-item:not(:last-child),
						.elementor-592 .elementor-element.elementor-element-35ae63d nav.hfe-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#08293B;border-bottom-width:1px;}.elementor-592 .elementor-element.elementor-element-35ae63d div.hfe-nav-menu-icon{color:#FFFFFF;}.elementor-592 .elementor-element.elementor-element-35ae63d div.hfe-nav-menu-icon svg{fill:#FFFFFF;}.elementor-592 .elementor-element.elementor-element-35ae63d .menu-item a.hfe-menu-item.elementor-button{color:#FFFFFF;}@media(min-width:768px){.elementor-592 .elementor-element.elementor-element-70e51ce{--width:25%;}.elementor-592 .elementor-element.elementor-element-f118545{--width:25%;}}@media(max-width:767px){.elementor-592 .elementor-element.elementor-element-38e5fed{--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-592 .elementor-element.elementor-element-38e5fed.e-con{--order:-99999 /* order start hack */;}.elementor-592 .elementor-element.elementor-element-70e51ce{--width:56.76%;--min-height:0px;}.elementor-592 .elementor-element.elementor-element-630bff1 .hfe-site-logo .hfe-site-logo-container img{width:98%;}.elementor-592 .elementor-element.elementor-element-f118545{--width:30%;}.elementor-592 .elementor-element.elementor-element-35ae63d{width:var( --container-widget-width, 136px );max-width:136px;--container-widget-width:136px;--container-widget-flex-grow:0;}}/* Start custom CSS for navigation-menu, class: .elementor-element-35ae63d */<!-- HOME -->

<a href="#"
class="mobile-link">

```
<div class="flex items-center gap-4">

    <!-- ICON -->
    <div class="menu-icon">
        🏠
    </div>

    <!-- TEXT -->
    <span>
        Home
    </span>

</div>
```

</a>

<!-- HOSTING -->

<button
@click="hosting = !hosting"
class="mobile-link w-full">

```
<div class="flex items-center gap-4">

    <!-- ICON -->
    <div class="menu-icon">
        ☁️
    </div>

    <!-- TEXT -->
    <span>
        Hosting
    </span>

</div>

<!-- ARROW -->
<svg
class="w-5 h-5 transition duration-300"
:class="{ 'rotate-180': hosting }"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24">

    <path stroke-linecap="round"
    stroke-linejoin="round"
    d="M19 9l-7 7-7-7"/>

</svg>
```

</button>

<!-- HOSTING SUBMENU -->

<div
x-show="hosting"
x-transition
class="pl-10 pt-3 space-y-3">

```
<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        💠 Shared Hosting

    </span>

</a>

<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        🚀 Cloud Hosting

    </span>

</a>

<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        🖥️ VPS Hosting

    </span>

</a>

<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        🔒 Dedicated Server

    </span>

</a>
```

</div>

<!-- DOMAINS -->

<a href="#"
class="mobile-link">

```
<div class="flex items-center gap-4">

    <div class="menu-icon">
        🌐
    </div>

    <span>
        Domains
    </span>

</div>
```

</a>

<!-- MANAGED SERVER -->

<a href="#"
class="mobile-link">

```
<div class="flex items-center gap-4">

    <div class="menu-icon">
        🛠️
    </div>

    <span>
        Managed Server
    </span>

</div>
```

</a>

<!-- COMPANY -->

<button
@click="company = !company"
class="mobile-link w-full">

```
<div class="flex items-center gap-4">

    <div class="menu-icon">
        🏢
    </div>

    <span>
        Company
    </span>

</div>

<svg
class="w-5 h-5 transition duration-300"
:class="{ 'rotate-180': company }"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24">

    <path stroke-linecap="round"
    stroke-linejoin="round"
    d="M19 9l-7 7-7-7"/>

</svg>
```

</button>

<!-- COMPANY SUBMENU -->

<div
x-show="company"
x-transition
class="pl-10 pt-3 space-y-3">

```
<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        ℹ️ About Us

    </span>

</a>

<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        📞 Contact Us

    </span>

</a>

<a href="#" class="mobile-sub-link">

    <span class="flex items-center gap-3">

        🎧 Support Center

    </span>

</a>
```

</div>

<!-- =========================================================
     TAILWIND STYLE
     ========================================================= -->

<style>

/* MAIN MENU */
.mobile-link{

    @apply flex items-center justify-between py-5 border-b border-gray-100 text-[#08293B] text-[22px] font-medium transition-all duration-300 hover:text-[#A6FF00];
}

/* SUBMENU */
.mobile-sub-link{

    @apply block text-gray-500 text-[17px] transition hover:text-[#A6FF00];
}

/* ICON BOX */
.menu-icon{

    @apply w-11 h-11 rounded-xl bg-[#F4FCE4] flex items-center justify-center text-[20px];
}

</style>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-38e5fed *//* =========================================================
HOSTINGMV FULLSCREEN PREMIUM MOBILE MENU
Fixed Screen + Icons + Logo + Back Menu
========================================================= */

@media(max-width:1024px){

/* FULLSCREEN MENU */
.elementor-nav-menu--dropdown{

```
position:fixed !important;

top:0;

left:0;

width:100vw !important;

height:100vh !important;

overflow-y:auto;

background:#ffffff !important;

z-index:999999 !important;

padding:0 !important;

border-radius:0 !important;

animation:
hostingmvMenu .35s ease;

display:flex;

flex-direction:column;
```

}

/* MENU OPEN EFFECT */
@keyframes hostingmvMenu{

```
0%{

    opacity:0;

    transform:
    translateX(-40px);
}

100%{

    opacity:1;

    transform:
    translateX(0px);
}
```

}

/* TOP HEADER */
.mobile-menu-top{

```
display:flex;

align-items:center;

justify-content:space-between;

padding:22px 24px;

border-bottom:
1px solid rgba(0,0,0,0.06);

position:sticky;

top:0;

background:#ffffff;

z-index:20;
```

}

/* LOGO */
.mobile-menu-logo img{

```
height:42px;

width:auto;
```

}

/* CLOSE BUTTON */
.elementor-menu-toggle{

```
background:none !important;

border:none !important;

box-shadow:none !important;

padding:0 !important;
```

}

/* CLOSE ICON */
.elementor-menu-toggle i{

```
font-size:34px !important;

color:#08293B !important;
```

}

/* MENU BODY */
.elementor-nav-menu--dropdown .elementor-nav-menu{

```
padding:18px 26px 30px;
```

}

/* MAIN MENU ITEMS */
.elementor-nav-menu--dropdown a{

```
display:flex !important;

align-items:center;

justify-content:space-between;

gap:14px;

font-family:'Poppins', sans-serif !important;

font-size:22px !important;

font-weight:500 !important;

color:#08293B !important;

padding:18px 0 !important;

border-bottom:
1px solid rgba(0,0,0,0.06);

background:none !important;

transition:all .3s ease;
```

}

/* ICON SPACE */
.elementor-nav-menu--dropdown a::before{

```
margin-right:14px;

font-size:20px;
```

}

/* MENU HOVER */
.elementor-nav-menu--dropdown a:hover{

```
color:#A6FF00 !important;

padding-left:8px !important;
```

}

/* ACTIVE */
.elementor-item-active{

```
color:#08293B !important;

font-weight:700 !important;
```

}

/* SUBMENU */
.elementor-nav-menu--dropdown .sub-menu{

```
padding-left:18px;

margin-top:10px;
```

}

/* SUBMENU LINKS */
.elementor-sub-item{

```
font-size:17px !important;

color:#64748B !important;

border:none !important;

padding:12px 0 !important;
```

}

/* SUBMENU HOVER */
.elementor-sub-item:hover{

```
color:#A6FF00 !important;
```

}

/* DROPDOWN ARROW */
.elementor-item.has-submenu{

```
position:relative;
```

}

/* ACCOUNT AREA */
.mobile-account-box{

```
margin-top:auto;

padding:24px;

border-top:
1px solid rgba(0,0,0,0.06);

background:#F8FAFC;
```

}

/* ACCOUNT TITLE */
.mobile-account-title{

```
font-family:'Poppins', sans-serif;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#64748B;

margin-bottom:18px;
```

}

/* ACCOUNT BUTTONS */
.mobile-account-btn{

```
display:flex;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

padding:18px;

border-radius:18px;

font-family:'Poppins', sans-serif;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:all .3s ease;

margin-bottom:14px;
```

}

/* USER LOGIN */
.mobile-user-btn{

```
background:#EEF2F7;

color:#08293B;
```

}

/* PARTNER LOGIN */
.mobile-partner-btn{

```
background:#FFF7ED;

color:#9A3412;
```

}

/* HOVER */
.mobile-account-btn:hover{

```
transform:translateY(-2px);
```

}

/* REMOVE OVERLAY */
.dialog-lightbox-widget{

```
background:
rgba(255,255,255,0.98) !important;
```

}

/* FIX SCREEN */
body.elementor-editor-active .elementor-nav-menu--dropdown{

```
height:100vh !important;
```

}

}/* End custom CSS */