/*Homepage CSS starts*/
 input::placeholder {
     color: white;
    /* Change this to your desired color */
     opacity: 1;
    /* Set opacity to 1 for full opacity */
}
/* For Firefox */
 input::-moz-placeholder {
     color: white;
    /* Change this to your desired color */
     opacity: 1;
    /* Set opacity to 1 for full opacity */
}
/* For Internet Explorer 10-11 */
 input:-ms-input-placeholder {
     color: white;
    /* Change this to your desired color */
}
/* For Edge */
 input::-ms-input-placeholder {
     color: white;
    /* Change this to your desired color */
}

.loggedin-menu .menu-item a{
    margin: 10px ;
}
ul#nav{
    margin: 0 auto;
}
 .search-icon {
     margin: 5px;
     background-color: #ebebeb;
     color: #0e2c44;
     font-size: 11px;
     width: auto;
     height: auto;
     float: left;
     text-align: center;
     border-radius: 50px;
     padding: 10px;
}
}
 .review-box{
     background-image: url(/../templates/nexus/images/home/Fay-jakson.webp);
     background-position: right bottom;
     background-repeat: no-repeat;
     background-color: #b9d7de;
     border-radius: 20px;
     height: 440px;
     padding: 40px;
     border: 10px solid white;
     width: 65%;
     overflow-x: hidden;
}
 .blog-box {
     background-color: #fff ! Important;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     padding: 20px;
}
 .btn-portfolio{
     font-family: 'Open Sans', sans-serif;
}
 .h2-heading {
     font-size: 1.45rem;
}
 img.thumbnail-only.wp-post-image {
     display: block;
     margin: 10px auto;
     max-width: 60%;
     height: auto !important;
}
 .hero-left {
     background-image: linear-gradient(to right, #126fac, #1477ba, #187fc8, #1d86d7, #248ee5, #248ee5, #248ee5, #248ee5, #1d86d7, #187fc8, #1477ba, #126fac);
     border-radius: 10px;
     border: 5px solid white;
     padding: 20px 35px 20px 35px !important;
}
 h1.h1-xl.white-color.mb-20 {
     font-size: 3em;
     font-weight: 700;
     line-height: 1em;
}
 .justify-column{
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .hero-btn{
     background-color: white !important;
     color:#196cdf!important;
}
 .hero-right{
     background-color: #e7e7e7 !important;
     border: 5px solid white;
     padding: 20px !important;
     border-radius: 10px;
}

 .get-started-tiles{
     background-color: #e5f0fb !important;
     padding: 10px;
     border-radius: 12px;
     border: 5px solid white;
}
 .reviews-tiles{
     background-color: #222d3d;
     padding: 15px 35px;
     border-radius: 12px;
     border: 5px solid white;
}
 .free-services-tiles{
     background-color: #222d3d;
     padding: 30px 15px;
     border-radius: 12px;
     border: 5px solid white;
}
 .free-services-btn{
     color: #fff;
}
 .free-services-btn:hover{
     color: #79c3ff;
}
 .review-paras{
     padding-bottom: 0px;
     margin-bottom: 5px;
}
 .get-started-btn{
     color: #000;
     float: right;
}
 .get-started-btn:hover{
     color: #79c3ff;
}
 .domain-section{
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     border:5px solid #f3f4f5;
     padding: 30px;
     border-radius: 12px;
     background-color: #f3f4f5;
}
 .dark-theme .domain-section{
     border:5px solid #333840;
     background-color: #333840;
}
 i.fbox-ico.fa-icon-solid.fa-4x {
     color: #0195ff !important;
     font-size: 3.4em;
}
 .register-column{
     background-color: white;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     padding: 10px;
     border-radius: 10px;
}
 .h-s::placeholder {
     color: #999;
    /* Replace #999 with your desired color */
}
 
 .grid-loaded {
     padding: 10px;
}
 .container-mansory {
     position: relative;
     max-width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     grid-template-rows: minmax(100px, auto);
     margin: 40px 0px;
     grid-auto-flow: dense;
     grid-gap: 35px;
}
 .our-success-moto{
     background-color: white !important;
     border-radius: 0px;
     padding: 25px 20px;
     color: #6c757d;
     box-shadow: 0px 5px 10px 5px rgba(5 5 5 / 9%);
}

 .container-mansory .box {
     background: #333;
     padding: 40px 20px 100px 40px;
     display: grid;
     text-align: left;
     color: #000;
     transition: 0.5s;
     border-radius: 10px;
     background: #dbe9ff;
     font-size: 2.1vh;
     display: flex;
     flex-direction: column;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
 .container-mansory .box:hover {
     transition: all 0.3s ease;
     transform: scale(1.05, 1.05);
}
 .container-mansory .box img {
     position: relative;
     max-width: 180px;
     margin-bottom: 10px;
}
 .container-mansory .box:nth-child(1) {
     grid-column: span 1;
     grid-row: span 1;
     background: #fff3eb;
     padding-top: 3vh 
}
 .container-mansory .box:nth-child(2) {
     grid-column: span 2;
     grid-row: span 2;
     background: #d8efef;
}
 .container-mansory .box:nth-child(3) {
     grid-column: span 1;
     grid-row: span 2;
     background: #e9f2ff;
}
 .container-mansory .box:nth-child(4) {
     grid-column: span 1;
     grid-row: span 2;
     background: #fff3eb;
}
 .container-mansory .box:nth-child(5) {
     grid-column: span 2;
     grid-row: span 1;
     background: #ebebeb;
}
 .container-mansory .box:nth-child(6) {
     grid-column: span 1;
     grid-row: span 2;
     background: #ebebeb;
}
 .container-mansory .box:nth-child(7) {
     grid-column: span 1;
     grid-row: span 1;
     background: #d8efef;
}
 
 .container-mansory .box:nth-child(8) {
     grid-column: span 1;
     grid-row: span 1;
     background: #fff3eb;
}
 .container-mansory .box:nth-child(9) {
     grid-column: span 1;
     grid-row: span 1;
     background: #d8efef;
}
 .container-mansory .box:nth-child(10) {
     grid-column: span 1;
     grid-row: span 1;
     background: #fff3eb;
}
 
 .sim-hosting-box {
     background-image: url(/../templates/nexus/images/home/sim.webp) !important;
     background-size: 55% !important;
     background-position: right bottom !important;
     background-repeat: no-repeat !important;
}
 .online-marketing-box {
     background-image: url(/../templates/nexus/images/home/seo-marketing.webp) !important;
     background-position: right bottom !important;
     background-size: 105% !important;
     background-repeat: no-repeat !important;
}
 .website-design-box {
     background-image: url(/../templates/nexus/images/home/web-designing.webp) !important;
     background-position: right bottom !important;
     background-size: 72% !important;
     background-repeat: no-repeat !important;
}
 .mobile-development-box {
     background-image: url(/../templates/nexus/images/home/mobile-development.webp) !important;
     background-size: 115% !important;
     background-position: right bottom !important;
     background-repeat: no-repeat !important;
}
 .microsoft-365-box {
     background-image: url(/../templates/nexus/images/home/ms-office.webp) !important;
     background-position: right bottom !important;
     background-size: 100% !important;
     background-repeat: no-repeat !important;
}
 .workspace-box {
     background-image: url(/../templates/nexus/images/home/g-workspace.webp) !important;
     background-position: right bottom !important;
     background-size: 80% !important;
     background-repeat: no-repeat !important;
}
 .explainer-video-box {
     background-image: url(/../templates/nexus/images/home/explainer-video.webp) !important;
     background-position: right bottom !important;
     background-size: 65% !important;
     background-repeat: no-repeat !important;
}
 .hacked-website-box {
     background-image: url(/../templates/nexus/images/home/hacked-web.webp) !important;
     background-position: right bottom !important;
     background-size: 72% !important;
     background-repeat: no-repeat !important;
}
 .server-management-box {
     background-image: url(/../templates/nexus/images/home/server-management.webp) !important;
     background-position: right bottom !important;
     background-size: 90% !important;
     background-repeat: no-repeat !important;
}
 .api-integration-box {
     background-image: url(/../templates/nexus/images/home/api-integration.webp) !important;
     background-position: right bottom !important;
     background-size: 60% !important;
     background-repeat: no-repeat !important;
}
 .managed-it-box {
     background-image: url(/../templates/nexus/images/home/managed-it-services.webp) !important;
     background-position: right bottom !important;
     background-size: 50% !important;
     background-repeat: no-repeat !important;
}
 .recent-blog {
     background-image: linear-gradient(to bottom, #3c4859, #3c4859, #3c4859, #fff, #fff, #fff);
     border-radius: 10px;
     padding: 10px 0px 0px 0px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
 .dark-theme .recent-blog{
     background-image: linear-gradient(to bottom, #333840, #333840, #333840, #454c52, #454c52, #454c52);
}
 .recent-blog:hover{
     transition: all 0.3s ease;
     transform: scale(1.05, 1.05);
}
 .home-rss{
     padding: 5px 30px;
     background-color: #fff !important;
     border-radius: 0px;
     box-shadow: none;
}
 .dark-theme .rss-item{
     background-color: #454c52 !important;
     border: 1px solid #454c52 !important;
}
 .yellow-stars{
     color: #f39c12;
     font-size: 22px;
}
 .white-star{
     color: #ccc;
     font-size: 22px;
}
 .star-half {
     position: relative;
     font-size: 22px;
     color: #ccc;
    /* Color for the unfilled half */
     display: inline-block;
}
 .hover-overlay:hover{
     transition: all 0.3s ease;
     transform: scale(1.05, 1.05);
}
 .star-half::before {
     content: '★';
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
    /* This clips half of the star */
     overflow: hidden;
     color: #f39c12;
    /* Color for the filled half */
}

/* Style for 3 columns on desktop */
 .gallery-container {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
}
 .gallery-item {
     flex: 1 1 calc(33.333% - 10px);
     box-sizing: border-box;
}

 .box-shadow{
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
 .grey-btn{
     background-color: #222d3d!important;
     border-color: #222d3d!important;
}
 .grey-btn:hover {
     color: #212529 !important;
     background-color: #e5f0fb !important;
     border-color: #e5f0fb !important;
}
 .display-flex{
     display: flex;
}
 .first-year{
     background-color: #222d3d;
     color: white!important;
     box-shadow: 0 4px 8px rgb(133 133 133 / 43%);
     border-radius: 5px 5px 0px 0px;
     margin: 0px 25px;
     text-align: center;
}
 .register-com{
     background-color: #b80404;
     box-shadow: 0 4px 8px rgb(133 133 133 / 43%);
     color: white;
     border-radius: 5px;
     margin-bottom: 0px;
     padding:8px 15px;
     text-align: center;
}
 .price-box{
     background-color: #edb22d;
     color: black!important;
     box-shadow: 0 4px 8px rgb(133 133 133 / 43%);
     text-align: center;
     padding: 4px;
     margin: 0 20px;
     border-radius: 0 0 5px 5px;
}
 .triangle{
     width: 0;
     height: 0;
     border-left: 70px solid transparent;
     border-right: 70px solid transparent;
     border-top: 22px solid #edb22d;
     text-align: center;
     margin: auto;
}
 .service-heading{
     font-size: 2rem!important;
}
 .round-box{
     border-radius: 15px;
}
 .box-border{
     border: 10px solid white !important;
}
 .portfolio-txt{
     text-align: left;
     color: black;
}
 .h-w {
     font-weight: 700;
     border-radius: 5px;
     margin: 5px;
     background-color: #0195ff;
     color: #fff;
     font-size: 20px;
     width: 15%;
     height: 55px;
     line-height: 55px;
     float: left;
     text-align: center;
}
 .h-s {
     background: #333;
     border-radius: 5px;
     padding: 15px 15px;
     border: none;
     margin: 5px;
     width: 50%;
     height: 55px;
     font-size: 18px;
     line-height: 55px;
     color: #fff;
     float: left;
}
 .h-new-btn {
     font-size: 1.125rem;
     padding: 18px 34px;
     margin: 5px 5px 5px 5px;
     width: 20%;
}
/*Homepage Dark theme starts*/
 .dark-theme .container-mansory .box:nth-child(1) {
     background: #ffdbc32e;
}
 .dark-theme .container-mansory .box:nth-child(2) {
     background: #d8efef14;
}
 .dark-theme .container-mansory .box:nth-child(3) {
     background: #e9f2ff21;
}
 .dark-theme .container-mansory .box:nth-child(4) {
     background: #ffdbc32e;
}
 .dark-theme .container-mansory .box:nth-child(5) {
     background: #ebebeb1c;
}
 .dark-theme .container-mansory .box:nth-child(6) {
     background: #e9f2ff21;
}
 .dark-theme .container-mansory .box:nth-child(7) {
     background: #d8efef2e;
}
 .dark-theme .container-mansory .box:nth-child(8) {
     background: #ffdbc32e;
}
 .dark-theme .container-mansory .box:nth-child(9) {
     background: #ebebeb1c;
}
 .dark-theme .container-mansory .box:nth-child(10) {
     background: #d8efef2e;
}
 .dark-theme .container-mansory .box:nth-child(11) {
     background: #a3ffff2e;
}
 .dark-theme .hero-left {
     background-color: rgb(84 172 241 / 26%) !important;
}
 .dark-theme .hero-right {
     background-color: var(--icon-bgcolor-dark)!important;
}
 .dark-theme .review-box{
     background-color: #454c52;
     border: 1px solid #454c52;
}
 .dark-theme .btn-portfolio{
     color: white!important;
}
 .dark-theme .btn-portfolio:hover{
     color: #0195ff !important;
}
 .dark-theme .get-started-tiles{
     background-color: #222d3d !important;
}
 .dark-theme .get-started-btn{
     color: white;
}
 .dark-theme .get-started-btn:hover{
     color: #79c3ff;
}
 .dark-theme .blog-box{
     background-color: #161c22 ! Important;
}
 .dark-theme .register-column{
     background-color: #252830!important;
}

.input-group-wrapper.dark-search {
    background-color: #222d3d;
    padding: 30px;
    border-radius: 12px;
}

.textarea-box{
        background-color: #ffffffd9;
    margin-bottom: 20px !important;
    padding: 10px;
    border-radius: 10px;
}


 .au-location {
     top:80%;
     left:77%;
}
 .ca-location {
     top:39%;
     left:20%;
}
 .cc-location {
     top:78%;
     left:68%;
}
 .fj-location {
     top:75%;
     left:86%;
}
 .in-location {
     top:61%;
     left:63%;
}
 .may-location {
     top:69%;
     left:69%;
}
 .net-location {
     top: 90%;
     left: 86%;
}
 .sg-location{
     top:70%;
     left:73%;
}
 .pk-location {
     top:56%;
     left:61%;
}
 .ae-location {
    top:61%;
     left:56%;
}
 .uk-location{
     top:50%;
     left:44%;
}
 .us-location {
     top:56%;
     left:17%;
}
 .ph-location{
     top:69%;
     left:77%;
}
 .hk-location {
     top:60%;
     left:73%;
}
 
 .footer-socials li {
     float: left;
     width: auto !important;
     display: inline-block !important;
     vertical-align: top;
     clear: none !important;
     margin: 0;
}
 .mobile-display {
     display: none;
}
 .desktop-display {
     display: flex;
}
 .outline-text {
     font-size: 66px;
     font-weight: bold;
     color: transparent !important;
     -webkit-text-stroke-width: 2px;
     -webkit-text-stroke-color: #fff;
     text-stroke-width: 2px;
     text-stroke-color: #000;
}

 #home-banner {
     position: relative!important;
     background-image: url(/../templates/nexus/images/home/main-banner.webp)!important;
     padding-top: 40px!important;
     padding-bottom: 20px!important;
     background-repeat: no-repeat!important;
     background-size: cover!important;
}

 .policies-img{
    display: flex;
     justify-content: space-around;
     align-items: center;
}
 .iso-box{
    margin-top: 370px;
}
 #h-h1 {
     font-size: 4.5rem;
     font-weight: 500;
     color: #fff;
}
 .mt-inverse-60 {
     margin-top: -60px;
}
 .home-producttitle {
     font-size: 31px;
     font-weight: 600;
}
 #order-standard_cart .products .product div.product-pricing span.price {
     font-size: 1.4rem!important;
     font-weight: 600 
}

 .footer-socials a {
     display: block;
     margin: 10px;
}
 .bottom-footer {
     padding-top: 10px;
}
 .bottom-footer-list li {
     width: auto !important;
     display: inline-block !important;
     vertical-align: top;
     clear: none !important;
     padding-left: 10px;
     font-size: 12px;
}
 .bottom-footer-list li.first-li {
     padding-left: 0;
}
 .bottom-footer-list li:after {
     content: "|";
     position: relative;
     top: 5px;
     padding: 15px;
     font-size: 12px;
}
 .bottom-footer-list li.last-li:after {
     content: " ";
     padding-left: 0;
}
 .bottom-footer-list li p {
     display: inline-block;
     float: left;
     margin-bottom: 0;
}
 .footer-socials {
     margin: 0px;
     display: inline-flex;
     list-style: none;
}
 .footer {
     padding-top: 100px;
     padding-bottom: 30px;
     padding-left: 20px;
     padding-right: 20px;
}

.form-section{
background-image: url('/templates/nexus/images/footer-character.webp') !important; 
background-position: right;  
background-repeat: no-repeat;  
background-size: contain; 
margin:auto 0px;
padding-right: 100px;
}

.need-assistance{
    text-align: right;
    padding-bottom: 25px;
}


.lets-talk{
    width: 75%;
}

.footer-heading{
    font-size: 2rem;
}

.foo-links{
color:#fff!important; 
font-size:14px; 
line-height:15px; 
font-weight:200;
font-family:'Source Sans Pro', sans-serif;
}

.foo-links:hover{
    text-decoration: none;
    color: #81AFFF !important;
}


.footer-category{
    color: white;
    font-size:18px; 
    font-family:'Source Sans Pro', sans-serif;
    font-weight:500
}


.footer-category::before {
    content: "";
    display: block;
    border-top: 2px solid white;
    width: 45%;        /* Only the line width */
    margin: 10px 0px; 
}

.brand-section{
    background-color:#0E1720; 
    border-radius:7px; 
    padding: 30px; 
    margin: 0 auto;
}


/* ---------- GALLERY LAYOUT (Desktop default) ---------- */

/* Default Desktop Layout */
.gallery {
  display: flex;
  flex-wrap: nowrap;            /* keep all images in one row */
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  width: 100%;
}

.gallery .item {
  display: flex;
  align-items: center;
}

.gallery .item img {
  height: auto;
  max-height: 80px;
  width: auto;
  object-fit: contain;
}




.brands-img img {
    height: auto;            /* keep natural proportions */
    max-height: 50px;        /* adjust logo height as needed */
    width: auto;
    object-fit: contain;
}

 .brands-img {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
}

.disclaimer{
    font-size: 12px;
}
 
 .horizontal-list {
    display: flex;            /* make it horizontal */
    list-style: none;         /* remove default bullets */
    padding: 0;
    margin: 0;
    gap: 0;                   /* spacing handled by separator */
}

.horizontal-list li {
    position: relative;
    padding: 0 10px;          /* horizontal spacing around item */
}

.horizontal-list li:not(:last-child)::after {
    content: "|";             /* separator symbol */
    position: absolute;
    right: 0;                 /* place it on the right edge of li */
    color: #999;              /* separator color */
}


 span.input-group-append.d-none.d-sm-block {
     margin-top: 3px;
}
 #order-standard_cart .cart-body {
     padding: 40px 20px;
}
 .intl-tel-input.separate-dial-code .selected-dial-code {
     font-size: 14px!important;
}
 .navbar-light {
     background-color: #e4e4e7;
}
 .d-sm-block{
     z-index: 0;
}
 .d-xl-flex{
     z-index: 0;
}
 
 a.btn.btn-logged-in-admin {
     font-size: 12px;
     padding: 2px 15px;
}
 button#login {
     background-color: #49535d;
     color: white;
}
 button#login:hover {
     background-color: #000;
     color: white;
}
 
 a.btn.btn-default-white-fill.question {
     background-color: #ffba59 !important;
     color: black !important;
     border: none;
     padding: 5px 10px;
     font-size: 10px;
     border-radius: 10px !important;
     text-transform: uppercase;
     font-weight: 700;
}
 
 ul.login-list.text-secondary.text-end {
     display: inline-block;
}
 
 
 
 
 
 
 
 .help .help-container,.services .service-wrap .service-section {
     position: relative;
     border-radius: 12px;
     box-shadow: 0 5px 15px 0 rgba(110,110,110,.1);
}
 .services .service-wrap .service-section {
     background-color: #fff;
     padding: 35px 20px;
     margin-top: 50px;
     text-align: center;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
}
 .services .service-wrap .service-section .title {
     font-weight: 700;
     font-size: 22px;
     color: #212122;
     margin-top: 20px;
     margin-bottom: 14px;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
}
 .services .service-wrap .service-section .subtitle {
     line-height: 34px;
     font-size: 16px;
     color: #4c4a47;
     margin-bottom: 0;
}
 .services .service-wrap .service-section a {
     margin-top: 30px;
}
 .services .service-wrap .service-section i {
     font-size: 60px;
}
 .services .service-wrap {
     border-bottom: 0;
}
/*MENU CSS*/
 .navbar-light .logo-black, .navbar-dark .logo-white, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-light.dark-scroll .scroll .logo-black, .tra-menu.navbar-dark.dark-scroll .scroll .logo-black {
     display: none;
}
 [data-background=dark] .col:hover,[data-background=light] .col:hover {
     background: 0 0;
}
 .h-dis {
     display: inline-block;
     vertical-align: middle;
}
 .main-drop {
     padding-left: 22px;
}
 .eupopup-body {
     background-color: black;
    /* Set a background color for contrast */
}
 .eupopup-body p {
     color: white !important;
}
 
 
 
 
 
 
 

.menu-topbar{
    background-color: #fff; margin: 0 auto;   display: block;  padding: 10px; text-align: center;
}
 
}
 
 
 
 
/*my-new-add-up*/
 
 .wsmenu>.wsmenu-list>li:hover {
     text-align: center;
     display: block;
     padding: 0;
     margin: 0;
     float: left;
     background-color: #D0E2F0;
}
/*end-my-new-add-up*/
 
 
 
 
 
 
 
 
 
 
 
 
 
 .mobile-submenu {
     color: black!important;
}
 .card1.{
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: #002c3d;
     background-clip: border-box;
     border: 1px solid rgba(0,0,0,.125);
     border-radius: .25rem;
}
 .cards2 {
     width: 100%;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     -webkit-justify-content: center;
     max-width: 420px;
     height: 440px;
}
 .card--1 .card__img, .card--1 .card__img--hover {
     background-image: url('https://it-company.azureedge.net/cdn/images/menu/development-bg.png');
}
 .card__img {
     visibility: hidden;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 350px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
}
 .card__info-hover {
     position: absolute;
     padding: 16px;
     width: 100%;
     opacity: 0;
     top: 0;
}
 .card__img--hover {
     transition: 0.2s all ease-out;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     position: absolute;
     height: 350px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
     top: 0;
}

 .card__info {
     z-index: 2;
     background-color: rgb(255, 255, 255, 0.9);
     padding: 16px 24px 24px 24px;
     height: 200px;
     margin-bottom: 120px;
}
 .card__category {
     text-transform: uppercase;
     font-size: 13px;
     letter-spacing: 2px;
     font-weight: 500;
     color: skyblue;
}
 .card__title {
     margin-top: 5px;
     margin-bottom: 10px;
     color: #0195ff;
}
 .card__by {
     font-size: 12px;
     font-weight: 500;
     color: skyblue;
}
 
 .card:hover .card__img--hover {
     height: 100%;
     opacity: 0.09;
}
 .card:hover .card__info {
     background-color: transparent;
     position: relative;
}
 .card:hover .card__info-hover {
     opacity: 1;
}
 .cards_cloud {
     width: 100%;
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     -webkit-justify-content: center;
     max-width: 820px;
     height: 440px;
}
 .card--11 .card__img2, .card--11 .card__img2--hover {
     background-image: url('https://it-company.azureedge.net/cdn/images/cloud.png');
}
 .card__img2 {
     visibility: hidden;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 350px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
}
 .card__info2-hover {
     position: absolute;
     padding: 16px;
     width: 100%;
     opacity: 0;
     top: 0;
}
 .card__img2--hover {
     transition: 0.2s all ease-out;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     position: absolute;
     height: 350px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
     top: 0;
}
 .card2:hover {
     box-shadow: 0px 30px 18px -8px rgb(0 0 0 / 10%);
     transform: scale(1.0, 1.0);
}
 .card2 {
     transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
     background-color: #fedd2f;
     width: 85%;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0px 13px 10px -7px rgb(0 0 0 / 10%);
     border: none !important;
}
 .card__info2 {
     z-index: 2;
     background-color: rgb(255, 255, 255, 0.9);
     padding: 16px 24px 24px 24px;
     height: 200px;
     margin-bottom: 120px;
}
 .card__title2 {
     margin-top: 5px;
     margin-bottom: 10px;
     color: orange;
}
 .card__by2 {
     font-size: 12px;
     font-weight: 500;
     color: orange;
}
 .card__author {
     font-weight: 600;
     text-decoration: none;
     color: #009b9c;
}
 .card2:hover .card__img2--hover {
     height: 100%;
     opacity: 1;
}
 .card2:hover .card__info2 {
     background-color: transparent;
     position: relative;
}
 .card2:hover .card__info2-hover {
     opacity: 1;
}
 .card-desc h5 {
     color: #000;
     font-style: italic;
     left: 25px;
     position: relative;
     font-size: 16px;
     font-weight: 700;
}
 a.card-link {
     text-decoration: none;
     color: #333;
}
 .wsmobileheader {
     display: none;
}
 
 
 .fbox-ico {
     width: 10%;
     display: inline-block !important;
     float: left;
     margin-top: 4px;
     text-align: left;
     margin-right: 4px;
}
 .fbox-txt {
     width: auto;
     display: block !important;
     margin-left: 10px;
}
 .fbox-menu {
     padding: 10px 8px;
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
     -o-border-radius: 0px;
     border-radius: 5x;
     border-bottom: 1px rgba(1, 149, 255, 0.4) solid;
     -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
     -moz-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
     box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
}
 .fbox-menu:hover {
     background-color: rgba(1, 149, 255, 0.4);
     border: 0;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
     -moz-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
     box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
}
 .fbox-menu-last {
     padding: 10px 8px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
}
 .fbox-menu-last:hover {
     background-color: rgba(1, 149, 255, 0.4);
     border: 0;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
     -moz-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
     box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .03);
}
 .menu-heading {
     font-size: 16px;
     font-weight: 500;
     line-height: 20px;
     color: #0E2C44;
}
 .menu-tagline {
     font-size: 13px!important;
     font-weight: 400;
     color: #212529 !important;
}
 .menu-title {
     font-size: 32px!important;
}
 .menu-description{
     font-size: 16px!important;
}
 .fa-2x {
     font-size: 32px!important;
}
 .fa-icon-solid {
     color: #0E2C44;
}

 .txt-list li i {
     position: relative;
     font-size: 1.05rem;
     line-height: 1.5rem;
     float: left;
     margin-right: 10px;
     top: 2px;
}
 .txt-list li p {
     overflow: hidden;
     margin-bottom: 10px;
}
 ul.simple-list {
     list-style: disc;
     margin-left: 15px;
     margin-bottom: 25px;
}
 .social-buttons {
     margin: 10px 0px!important;
}
 .special-note {
     position: absolute;
     padding: 10px 6px;
     color: rgba(255,255,255,.6);
     font-weight: 100;
     font-size: 11px;
}
 .pricing .wrapper {
     position: relative;
     background: #fff;
     border-radius: 15px;
     margin-top: 50px;
}
 .pricing.special .wrapper {
     position: relative;
     background-color: #fff;
}
 .pricing .wrapper .title {
     font-weight: 700;
     font-size: 26px;
}
 .period {
     font-weight: 500;
     font-size: 20px;
}
 .pricing .list-info {
     padding: 30px 60px 40px;
     border-bottom-right-radius: 12px;
     border-bottom-left-radius: 12px;
     margin-bottom: 20px;
     list-style-type: none;
     background-color: #55bde5;
}
 .pricing .list-info i {
     font-size: 42px;
     margin: 0 15px 0 0;
     color: #fff!important;
     float: left;
     padding: 5px 0;
}
 
 
 .motpath {
     background-image: url(../patterns/motpath.svg);
}
 .sec-normal, .sec-sec, .sec-up, .sec-up-slider {
     position: relative;
}
 .sec-bg4, a.plans.badge.feat {
     background-color: #55bde5;
}
 .get-support-heading {
     color: white;
     position: relative!important;
     font-size: 40px!important;
     line-height: 34px!important;
     font-weight: 700;
}
 .get-support-subheading {
     color: white;
     position: relative!important;
     font-size: 20px!important;
     line-height: 34px!important;
     font-weight: 500;
}
 .service-section {
     background-color: #fff;
     padding: 15px;
     margin: 10px;
     border-radius: 11px;
     height: 90%;
}
 .producttitle {
     font-weight: 700;
     font-size: 26px;
}
 .productsubtitle {
     font-size: 16px;
     font-weight: 400;
}
 .btn-default-fill:hover, .btn-default-yellow-fill {
     background-color: #e30404!important;
     color: #fff!important;
     border: none;
}
 .get-support {
     border-bottom: 0;
     background-color: #222D3D;
     padding: 30px;
     position: relative;
     z-index: 0;
}
 .flag-container {
     display: contents;
}
 .pricing .wrapper .top-content {
     padding: 40px 60px;
}
 .pricing .wrapper .top-content .svg,.services .service-wrap .service-section .svg {
     height: 60px;
     width: 60px;
}
 .pricing.special .wrapper a,[data-layout=frame] .box-container .menu-wrap.fixed {
     margin-top: 20px;
}
 .pricing.special .list-info li {
     padding: 10px 0;
     font-size: 16px;
     font-weight: 500;
     color: #fff;
}
 .mt-20 {
     margin-top: 20px!important;
}
 .mt-30 {
     margin-top: 30px!important;
}
 .mt-50 {
     margin-top: 50px!important;
}
 .mt-100 {
     margin-top: 100px!important;
}
 .mt-120 {
     margin-top: 120px!important;
}
 .pt-50{
     padding-top: 50px!important;
}
 
 .empty-space-menu {
     padding: 100px;
}

 
 
 .btn-menu {
     background-color: transparent;
     color: #fff;
     font-size: 1.1rem;
     line-height: 1;
     font-weight: 500;
     padding: 16px 32px;
     margin-top: 20px;
     border: 1px solid transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -ms-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
}
 
 .btn-xs {
     font-size: 12px;
     font-weight: 300;
     padding: 12px 12px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -ms-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
}
 .btn-dropdown {
     background-color: #222d3d;
     color: white;
     font-size: 15px;
     line-height: 25px;
     font-weight: 400;
     padding: 2px 15px 2px 15px;
     border: 1px solid transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition: all 400ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
     -o-transition: all 400ms ease-in-out;
     -ms-transition: all 400ms ease-in-out;
     transition: all 400ms ease-in-out;
}
 button.btn-notification {
     background-color: #495a7200;
     color: #fff;
     font-size: 1.1rem;
     line-height: 1;
     font-weight: 500;
     padding: 0px;
     border: 1px solid transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -ms-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
}
 .dropdown-notification {
     position: absolute;
     z-index: 1000;
     display: none;
     min-width: 290px!important;
     padding: .5rem 0;
     margin: 0;
     font-size: 1.35rem;
     color: #212529;
     text-align: left;
     list-style: none;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid rgba(0,0,0,.15);
     border-radius: .25rem;
     left: -70px!important;
}
 ul.client-alerts {
     padding: 0px!important;
}
 .message {
     display: inline!important;
     margin-left: 10px!important;
     font-weight: 200!important;
     color: #8b8b8b!important;
     font-size: 13px;
}
 .btn.btn-sm {
     font-size: .85rem!important;
     padding: 6px 10px!important;
}
 .btn.btn-md {
     font-size: 1.125rem;
     padding: 7px 17px;
}
 .btn.btn-lg {
     font-size: 1.15rem;
     padding: 10px 20px;
}
 .btn.btn-xl {
     font-size: 1.75rem;
     padding: 25px 40px;
     margin-left: 15px;
     margin-right: 15px;
     letter-spacing: 2px;
     font-weight: 400;
     text-transform: uppercase;
}
 .btn.btn-md.btn-transparent {
     padding: 18px 6px;
}

 .btn.btn-lg.btn-transparent {
     padding: 20px 6px;
}
 .btn.ico-left span {
     position: relative;
     top: 1px;
     right: 3px;
}
 .btn.ico-right span {
     position: relative;
     top: 1px;
     left: 3px;
}
 .btn.ico-20.ico-left span {
     top: 4px;
     right: 6px;
}
 .tra-white-hover:hover, .white-color .tra-white-hover:hover {
     color: #b80404 !important;
     background-color: transparent !important;
     border-color: #b80404 !important;
}
 .scroll .tra-white-hover:hover {
     color: #dce3e7 !important;
     background-color: transparent !important;
     border-color: #dce3e7 !important;
}
 .btn-white, .white-color .btn-white {
     color: #dce3e7;
     background-color: #fff;
     border-color: #fff !important;
}
 .btn-tra-white {
     color: #fff;
     background-color: transparent;
     border-color: #fff !important;
}
 .white-color, .white-color a, .white-color h2, .white-color h3, .white-color h4, .white-color h5, .white-color h6, .white-color i, .white-color li, .white-color p, .white-color span {
     color: #fff!important;
}
 #header {
     width: 100%;
     display: block;
     padding-top: 0;
}
 .header-wrapper {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     z-index: 1030;
}
 .strip-wrapper {
     position: sticky;
     top: 0;
     right: 0;
     left: 0;
     z-index: 100 !important;
}
 
 
 .wsmainfull {
     background-color: #fff !important;
     padding: 5px 0;

}
 
 
 .wsmenu>.wsmenu-list>li>.wsmegamenu.w-75 ul.link-list>li>a {
     color: #2c3e50;
     font-size: 16px;
     font-weight: 500;
     padding: 8px 0;
     transition: all .3s ease-in-out;
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu.w-75 ul.link-list>li>a:hover {
     padding: 8px 0 8px 8px;
}
 
 .wsmenu>.wsmenu-list>li.mg_link:hover>a:after {
     content: "";
     background-color: #d0e2f0!important;
     position: absolute;
     bottom: -2px;
     left: 34%;
     height: .9375rem;
     width: .9375rem;
     border-top: solid 1px #eee;
     border-left: solid 1px #eee;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     z-index: 9990;
     transition: all 1.4s ease-in-out;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    top: 70px;
}

/* Hide the Bootstrap 'bars' button on mobile */
@media (max-width: 991.98px) {
  .nav-item.ml-2.d-xl-none > .btn.nav-link[data-toggle="collapse"][data-target="#mainNavbar"],
  .nav-item.ml-2.d-xl-none > .btn.nav-link[data-bs-toggle="collapse"][data-bs-target="#mainNavbar"] {
    pointer-events: none;
    opacity: 0;        /* visually hidden */
    width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }
}



/* ====== EMERGENCY VISIBILITY (Mobile ≤ 991.98px) ====== */
@media (max-width: 991.98px) {
  /* Never hide WSMenu header & shell */
  .wsmobileheader { display: block !important; position: relative; z-index: 5000 !important; }
  .wsmobileheader .dropdownN { display: block !important; }

  /* WSMenu drawer – visible so we can debug */
  .wsmobileheader #prod2list {
    display: block !important;
    position: absolute !important;
    top: 60px !important; left: 0; right: 0;
    background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.15);
    border-radius: 0 0 12px 12px;
    max-height: calc(100vh - 60px); overflow-y: auto;
    z-index: 5500 !important;
  }

  /* Bootstrap collapse – make open-looking so it’s visible too */
  #mainNavbar {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
  #mainNavbar.collapsing { height: auto !important; transition: none !important; }

  /* Prevent clipping by ancestors */
  #top1, .strip-wrapper, .wsmainfull, .wsmainwp, nav.wsmenu, header.header { overflow: visible !important; z-index: 3000; }

  /* Show hamburger if it exists, to give you a handle */
  #nav-toggle { display: inline-block !important; z-index: 6000 !important; }

  .input-group.search.w-100.mb-2{display: none;}
}

@media (max-width: 991.98px) {
  #mainNavbar {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
  /* If the collapse is in "collapsing" transition, stop the animation on mobile */
  #mainNavbar.collapsing {
    height: auto !important;
    transition: none !important;
  }
}
 .h-navigation {
     display: none;
}
 .logo-white, .logo-black {
     display: block;
}
 .logo-black, .navbar-dark .logo-white, .tra-menu.navbar-light .scroll .logo-white, .tra-menu.navbar-light.dark-scroll .scroll .logo-black, .tra-menu.navbar-dark.dark-scroll .scroll .logo-black {
     display: none;
}
 .btn-2 {
     text-transform: capitalize;
     cursor: pointer!important;
     border: 1px solid #4c4a4a;
     border-radius: 50px;
     color: #4c4a4a;
     font-size: 16px;
     margin: 0;
     position: relative;
     letter-spacing: .2px;
     font-weight: 700;
     display: inline-block;
     margin-bottom: 0;
     font-weight: 400;
     text-align: center;
     padding: 6px 12px;
     font-size: 14px;
     line-height: 1.42857143;
     border-radius: 4px;
}
 .btn-sm {
     padding: .5rem 2rem!important;
     font-size: 1rem!important;
}
 .btn-default-pink-fill,.btn-default-purple-fill {
     color: #fff!important;
     border: none;
}
 .btn-default-fill,.btn-default-pink-fill:hover,.btn-default-purple-fill:hover,.btn-default-yellow-fill:hover {
     background-color: #4c4a4a!important;
     color: #fff!important;
     border: none;
}
 .btn-purple, .scroll .btn-purple, .white-color .btn-purple, .purple-hover:hover, .scroll .purple-hover:hover, .white-color .purple-hover:hover {
     color: #fff !important;
     background-color: #6a26da !important;
     border-color: #6a26da !important;
}
 .btn-tra-purple, .scroll .btn-tra-purple, .white-color .btn-tra-purple, .tra-purple-hover:hover, .scroll .tra-purple-hover:hover, .white-color .tra-purple-hover:hover {
     color: #6a26da !important;
     background-color: transparent !important;
     border-color: #6a26da !important;
}
 .btn-skyblue, .scroll .btn-skyblue, .scroll .skyblue-hover:hover, .skyblue-hover:hover, .white-color .btn-skyblue, .white-color .skyblue-hover:hover {
     color: #fff !important;
     background-color: #0195ff !important;
     border-color: #0195ff !important;
}
 .btn-tra-skyblue, .scroll .btn-tra-skyblue, .scroll .tra-skyblue-hover:hover, .tra-skyblue-hover:hover, .white-color .btn-tra-skyblue, .white-color .tra-skyblue-hover:hover {
     color: #0195ff !important;
     background-color: transparent !important;
     border-color: #0195ff !important;
}
 .blue-hover:hover, .btn-blue, .scroll .blue-hover:hover, .scroll .btn-blue, .white-color .blue-hover:hover, .white-color .btn-blue {
     color: #fff !important;
     background-color: #0f53fa !important;
     border-color: #0f53fa !important;
}
 .btn-pink, .pink-hover:hover, .scroll .btn-pink, .scroll .pink-hover:hover, .white-color .btn-pink, .white-color .pink-hover:hover {
     color: #fff !important;
     background-color: #b80404 !important;
     border-color: #b80404 !important;
}
 .btn-tra-pink, .btn-tra-pink-hover:hover, .scroll .btn-tra-pink, .scroll .tra-pink-hover:hover, .tra-pink-hover:hover, .white-color .btn-tra-pink, .white-color .tra-pink-hover:hover {
     color: #b80404 !important;
     background-color: transparent !important;
     border-color: #b80404 !important;
}
 .btn-default-fill:hover,.btn-default-yellow-fill {
     background-color: #e30404!important;
     color: #fff!important;
     border: none;
}
 .btn.question {
     transform: initial!important;
     text-transform: uppercase!important;
     padding: 2px 10px!important;
     font-size: 10px!important;
}
 .btn-group.toplang .btn+.btn,.header-main-slider .flickity-page-dots li:first-child {
     margin-left: 0;
}
 .header-main-slider .carousel-cell {
     min-height: 500px;
}
 .header-main-slider .flickity-page-dots {
     position: absolute;
     top: initial;
     text-align: center;
     margin: 0 auto;
     width: 100%;
     display: block;
     bottom: 17%;
}
 .header-main-slider .flickity-page-dots .dot {
     display: inline-grid;
     margin: 0 2px;
     background: #4c4a4a;
     width: 40px;
     height: 3px;
     border-radius: 1px;
     -webkit-transition: .1s ease-in-out;
     transition: .1s ease-in-out;
}
 .menu-wrap,.menu-wrap.line,.nav-menu .menu-toggle {
     background-color: transparent;
}
 .path-left,.path-right {
     position: absolute;
     height: 100%;
     top: 0;
}
 .path-left {
     right: 30%;
}
 .path-right {
     left: 70%;
}
 .empty-space {
     height: 25px;
}

 .empty-space3 {
     height: 35px;
}
 .empty-space2 {
     height: 0px;
}

 .topheader-list li {
     width: auto !important;
     display: inline-block !important;
     vertical-align: top;
     clear: none !important;
     padding-left: 10px;
     font-size: 12px;
     font-family: Open Sans, sans-serif;
}
 .topheader-list li.first-li {
     padding-left: 0;
     font-size: 13px;
}
 .topheader-list li:after {
     content: "|";
     padding-left: 11px;
     position: relative;
     top: 0;
}
 .topheader-list li.last-li:after {
     content: " ";
     padding-left: 0;
}
 .topheader-list li p {
     display: inline-block;
     float: left;
     margin-bottom: 0;
}
 ul.topheader-list {
     margin-top: 4px;
     text-align: center;
}
 .login_signup.h-dis {
     font-size: 12px;
     margin:5px 0;
}
 .my-top1-nav {
     text-align: center;
     vertical-align: middle;
}
 a.h6-md.black-color {
     display: flex;
     font-weight: 300;
     line-height: 20px;
     margin-bottom: 3px;
     border-bottom: 0.04px solid #515151;
     color: white!important;
}
 .combine_flags {
     width: 24px;
     height: 25px;
     margin-right: 15px;
     float: left 
}
 [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
     cursor: pointer!important;
}

 [type=button], [type=reset], [type=submit], button {
     -webkit-appearance: button;
}
 button.btn-dropdown.btn-primary:after {
     display: inline-block;
     float: right;
     margin-left: 4rem;
     margin-top: 10px;
     content: "";
     border-top: .3em solid white;
     border-right: .3em solid transparent;
     border-bottom: 0;
     border-left: .3em solid transparent;
}


 
 .nav-menu {
     position: relative;
     width: 100%;
     z-index: 9;
     background-color: #fff;
}
 .nav-menu .navigation {
     display: flex;
     height: 47px;
     align-items: center;
}
 .nav-menu .main-menu {
     display: contents;
     display: -moz-inline-stack;
     zoom: 1;
}
 .nav-menu .main-menu li {
     list-style-type: none;
}
 .blog .media .media-heading a:hover,.blog .wrap-blog .heading.blog a:hover,.blog .wrap-blog .text-blog .author:hover,.blog .wrap-blog .text-blog a:hover,.nav-menu .main-menu a:active,.nav-menu .main-menu a:focus,.nav-menu .main-menu a:hover,.nav-menu .main-menu>.menu-item a:active,.nav-menu .main-menu>.menu-item a:hover {
     text-decoration: none;
}
 .menu-wrap .logo-menu {
     max-height: 47px;
     width: 140px;
}
 .menu-wrap.fixed .logo-menu {
     max-height: 42px;
     display: grid;
     width: 125px;
}
 .nav-menu .main-menu>.menu-item {
     float: left;
     list-style-type: none;
     padding: 30px 0;
}
 .nav-menu .main-menu>.menu-item>.sub-menu {
     opacity: 0;
     font-weight: 700;
     visibility: hidden;
     position: absolute;
     z-index: 9;
     padding: 20px 30px;
     border-radius: 12px;
     background-color: #fff;
     top: 100%;
     margin-top: 10px;
     -webkit-transition: .2s;
     transition: .2s;
}
 .nav-menu .main-menu .menu-item .menu-large .service-list .service .svg {
     display: table;
     height: 44px;
     width: 44px;
     margin: 10px 15px 0 0;
}
 .nav-menu .main-menu .menu-item .menu-large .menu-item {
     padding: 10px 18px 10px 15px;
}
 .megamenu .menu-item a,.megamenu-list .menu-item a,.nav-menu .main-menu .menu-item .menu-large .menu-item a {
     color: #e8e8e8;
     font-size: 13px;
     white-space: nowrap;
}
 .blog .sidebar .tags .heading.active a,.blog .social-icons .fa:hover,.casestudy .social-icons i:hover,.footer .contact a:hover i,.footer .soc-icons a:hover i,.footer .soc-icons i:hover,.nav-menu .main-menu .menu-item .menu-large .menu-item a:hover,.nav-menu .main-menu .menu-item .menu-large .service-list .service.special .media-body a:hover,.nav-menu .main-menu .menu-item .menu-large .service-list .service.special i,.team .soc-icons-wrap i:hover {
     color: #fdd700;
}
 .megamenu .media-body,.megamenu-list .media-body,.nav-menu .main-menu .menu-item .menu-large .media-body {
     display: table-cell;
     vertical-align: top;
     padding: 20px;
}
 .nav-menu .main-menu .menu-item .menu-large .service-list .service {
     margin: 10px 0;
     display: flex;
}
 .megamenu .service-list .service .media,.megamenu-list .service-list .service .media,.nav-menu .main-menu .menu-item .menu-large .service-list .service .media {
     padding: 0 0 10px;
}
 .h-plans-info .header-wrap,.nav-menu .main-menu .menu-item .menu-large .service-list .service .media-left i {
     text-align: left;
}
 .nav-menu .main-menu .menu-item .menu-large .service-list .service .media-body a {
     padding: 0;
     line-height: 34px;
     color: #313131;
     display: inline-block;
}
 .nav-menu .main-menu .menu-item .menu-large .service-list .service .media-body p {
     color: #525252;
     font-size: 14px;
     font-weight: 400;
}
 .nav-menu .main-menu .menu-item .menu-large .service-list .service.special .media-body a {
     color: #212122;
     border: none;
}
 .blog .wrap-blog .heading.blog a,.knowledge a.category,.nav-menu .main-menu .menu-item .menu-large .service-list .service.special .media-body p,.offcanvas.offcanvas-box .os p,[data-background=dark] .box-container .getready .column-support-subtitle,[data-background=dark] .box-container .getready .column-support-title,[data-background=dark] .box-container .history-section .info-content h4,[data-background=light] .box-container .footer .heading,[data-background=light] .box-container .getready .column-support-subtitle,[data-background=light] .box-container .getready .column-support-title,[data-background=light] .box-container .history-section .info-content h4,[data-background=light] .box-container .nav-menu .main-menu a {
     color: #212122;
}
 .nav-menu .main-menu .menu-item .menu-large li.start-offer {
     display: block;
     margin-top: 20px;
     float: right;
     width: 245px;
}
 .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner {
     border: 2px dashed #fdd700;
     padding: 20px;
     text-align: center;
}
 .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner .title {
     color: #fdd700;
     font-size: 22px;
}
 .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner p {
     font-style: italic;
     color: #4c4a4a;
     font-size: 14px;
}
 .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner .val {
     font-size: 13px;
}
 .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner .dis {
     font-size: 20px;
     margin-bottom: 20px;
}
 .nav-menu .main-menu>.menu-item>.sub-menu>.menu-item {
     padding: 10px 0;
}
 .nav-menu .main-menu>.menu-item>.sub-menu>.menu-item:last-child {
     padding-bottom: 20px;
}
 .nav-menu .main-menu>.menu-item>.sub-menu>.menu-item a {
     color: #313131;
     font-size: 16px;
     white-space: nowrap;
}
 .nav-menu .main-menu>.menu-item>.sub-menu>.menu-item>.sub-menu {
     opacity: 0;
     -webkit-transition: .1s;
     -moz-transition: .1s;
     -ms-transition: .1s;
     -o-transition: .1s;
     transition: .1s;
}
 .menu.badge.feat {
     font-size: 12px;
     padding: 5px 10px;
     margin-top: 3px;
     position: absolute;
     right: -1px;
     border-bottom-left-radius: 15px;
     border-top-left-radius: 15px;
}
 .plans.badge.feat {
     color: #fff;
     font-size: 11px;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 1;
}
 .plans.badge.feat.left {
     position: absolute;
     right: auto;
     left: 10px!important;
}
 a.plans.badge.feat {
     top: -40px;
     padding: 8px 15px;
     right: 10px;
     position: absolute;
     border: none;
     color: #000;
     cursor: pointer;
}
 a.plans.badge.feat:hover {
     color: #fff;
     background-color: #4c4a4a;
     text-decoration: none;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
}
 .nav-menu .main-menu a {
     font-size: 16px;
     font-weight: 400;
     margin-right: 35px;
     color: #fff;
     position: relative;
     cursor: pointer;
     text-decoration: none;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
}
 .nav-menu .main-menu a.v-stroke:hover::after,.nav-menu .main-menu a.v-stroke:hover::before {
     height: 30px;
     transition: .2s ease-in-out;
}
 .nav-menu .main-menu a.v-stroke:before {
     content: '';
     position: absolute;
     top: 25px;
     left: 50%;
     width: 2px;
     height: 0;
     background: #fff;
     transition: .2s ease-in-out;
}
 .nav-menu .main-menu li:last-child a {
     margin-right: 0!important;
}
 .menu-wrap.fixed .nav-menu .main-menu a.v-stroke:before {
     content: none;
     transition: none;
}
 .nav-menu .main-menu a.h-stroke:hover::after,.nav-menu .main-menu a.h-stroke:hover::before {
     width: 100%;
     transition: .2s ease-in-out;
}
 .nav-menu .main-menu a.h-stroke:before {
     content: '';
     position: absolute;
     top: 55px;
     bottom: 0;
     right: 0;
     height: 2px;
     width: 0%;
     background: #fff;
     transition: .2s ease-in-out;
}
 .active2 {
     color: #ee5486!important;
}
 .nav-menu .menu-toggle {
     border: none;
     outline: 0;
     display: none;
     float: right;
}
 .nav-menu .menu-toggle .icon {
     display: block;
     width: 24px;
     height: 4px;
     border-radius: 0;
     background-color: #181b22;
     margin-top: 0;
     margin-bottom: 3px;
}
 .menu-wrap {
     position: absolute;
     padding: 15px 0;
     left: 0;
     right: 0;
     top: 40px;
     z-index: 9;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
}
 .menu-wrap.line {
     border-bottom: 1px solid #e6e7e8;
     border-top: 0;
}
 .menu-wrap.fixed {
     opacity: 1;
     animation-name: fadeInOpacity;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-duration: .3s;
     box-shadow: 0 2px 8px 0 rgba(62,62,79,.23);
     padding: 13px 0;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1000;
}
 .menu-wrap.fixed .main-menu>.menu-item>a:before {
     bottom: -12px;
}
 .menu-wrap.fixed .main-menu>.menu-item>.sub-menu {
     top: 55px!important;
}
 .menu-wrap.fixed .main-menu>.menu-item>.sub-menu.menu-large {
     box-shadow: 0 2px 8px 0 rgba(62,62,79,.23);
     top: 55px!important;
}
 .menu-wrap.light.fixed .logo-menu {
     top: -25px;
}
 #nav-toggle {
     position: relative;
     cursor: pointer;
     margin-top: 1px;
     padding: 20px 37px 20px 0;
     right: 0;
     top: 0;
     z-index: 1000;
}
 #nav-toggle span:after,#nav-toggle span:before,.menu-wrap #nav-toggle span {
     cursor: pointer;
     height: 3px;
     width: 36px;
     background: #fff;
     position: absolute;
     display: block;
     content: '';
}
 #nav-toggle span:before {
     top: -10px;
}
 #nav-toggle span:after {
     bottom: -10px;
}
 .active #nav-toggle span:after,.active #nav-toggle span:before {
     background: #fdd700!important;
}
 #nav-toggle span,#nav-toggle span:after,#nav-toggle span:before {
     transition: 250ms ease-in-out;
}
 #nav-toggle.active span:after,#nav-toggle.active span:before,[data-layout=frame] .menu-wrap.fixed {
     top: 0;
}
 #nav-toggle.active span:before {
     transform: rotate(45deg);
}
 #nav-toggle.active span:after {
     transform: rotate(-45deg);
}
 .toplang {
     position: absolute;
     display: -ms-grid;
     z-index: 2;
     right: 51px;
     top: 150px;
}
 .toplang .btn {
     font-size: 12px!important;
     padding: 6px!important;
     border-radius: 8px!important;
     height: 30px!important;
}

 .loggedin-menu {
     padding: 10px;
     margin: auto;
     text-align: left;
     display: inline;
     color: white!important;
     line-height: 2;
}
 button.btn.btn-pink.tra-white-hover.btn-default {
     height: 40px;
     margin-top: -6px;
}
 .master-breadcrumb {
     background-color: transparent;
}
 
 a.badge.badge-secondary.badge-success {
     color: white;
}

 img.countryimg {
     max-width: 210px;
}
 .google-reviews {
     background-color: #fff;
     padding: 20px;
     margin: 40px 0px;
}

 .my-container{
     padding-right: var(--bs-gutter-x,.75rem);
     padding-left: var(--bs-gutter-x,.75rem);
}

/*New Banner ITCOMPANY.COM.AU CSS*/
 .contact-button{
     border-radius: 5px;
     border: 1px solid #b80404!important;
     font-size: 16px!important;
     padding: 13px 30px!important;
     background-color: #b80404 !important;
}
 .contact-button:hover{
     border-radius: 5px;
     border: 1px solid white!important;
     font-size: 16px!important;
     padding: 13px 30px!important;
     background-color: transparent!important;
}
 .hero-7-img img {
     margin-bottom: -50px;
}
 .we-are {
     display: block;
     font-size: 32px;
     font-weight: 500;
     letter-spacing: .5px;
     margin-bottom: 0 
}
 .we-are.rounded-id {
     display: inline-block;
     padding: 6px 24px;
     text-transform: uppercase;
     -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
     border-radius: 100px;
     background-color: rgba(255, 255, 255, .15);
     font-size: 28px!important;
     margin-bottom: 10px;
}
 .waves {
     position: relative;
     width: 100%;
     height: 12vh;
     margin-bottom: -20px;
     min-height: 50px;
     max-height: 90px;
}
 #hero {
     position: relative;
     background-image: url(https://it-company.azureedge.net/cdn/images/pages/home/homepage-banner.jpg);
     padding-top: 20px;
     padding-bottom: 0px;
     background-repeat: no-repeat;
     background-size: cover;
}
 .it-company {
     font-size: 3.5rem !important;
     font-weight: 700 ;
     color: #fff;
}
 .sec-normal {
     padding: 15px 0;
     z-index: 100;
}
/* ==================================================================== MAP CSS =========================================================================*/
 .maping {
     background: linear-gradient(-60deg,#3a6173 0,#16222a 100%)!important;
     padding: 60px 20px;
     z-index: -1;
}
 .section-heading {
     font-size: 52px!important;
     padding: 0 20px;
     margin-top: 0!important;
     margin-bottom: 20px!important;
     text-transform: capitalize!important;
     position: relative!important;
     display: inline-block!important;
     color: #181b22;
     line-height: 52px!important;
}
 .section-subheading {
     position: relative!important;
     color: #fff!important;
     font-size: 20px!important;
     line-height: 34px!important;
}
 .centered {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .centered-y {
     position: absolute;
     width: 100%;
     top: 50%;
     transform: translateY(-50%);
}
 .distribution-map {
     position: initial;
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
     margin: 0 auto;
}
 .distribution-map>img {
     width: 90%;
     position: initial;
     margin: 0;
     padding: 0;
}

 .distribution-map .map-point {
     cursor: pointer;
     outline: none;
     z-index: 0;
     position: absolute;
     width: 40px;
     height: 40px;
     border-radius: 20px;
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
     opacity: 0.8;
     transform: translate(-50%, -50%);
     -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
     -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
     -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
     -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
     transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
     background: rgba(26, 26, 26, 0.85);
     border: none;
}
 .distribution-map .map-point .content {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
     width: 100%;
     height: 100%;
     left: 50%;
     transform: translateX(-50%);
     overflow: overlay;
}
 .distribution-map .map-point:active, .distribution-map .map-point:focus {
     margin: 0;
     padding: 0;
     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
     opacity: 1;
     width: 300px;
     height: 220px;
     color: #e5e5e5;
     z-index: 1;
     transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
 .distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
     opacity: 1;
     -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
     -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
     -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
     -webkit-transition-delay: 0.25s, 0s, 0s;
     transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
     overflow: hidden;
}
 .distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
     color: #afe1fa;
}
 div.photo-container {
     max-width: 25em;
     height: auto;
     position: relative;
     margin: 1.563em auto;
}
 div.photo-container a {
     text-decoration: none;
     color: black;
     cursor: default;
     font-weight: normal;
}
 div.photo-container a span {
     visibility: hidden;
     position: absolute;
     left: 1.5em;
     top: 2.3em;
     background: white;
     color: black;
     font-size: 0.8em;
     padding: 0.3em;
     cursor: default;
     line-height: 1.4;
}
 div.photo-container a:hover span {
     visibility: visible;
}

 section.services {
     display: block;
     z-index: 9;
}
 .mt-inverse-90 {
     margin-top: -90px;
}
 .mb-20 {
     margin-bottom: 20px!important;
}
 .mb-30 {
     margin-bottom: 30px!important;
}
 .mb-40 {
     margin-bottom: 40px!important;
}
 .mb-60 {
     margin-bottom: 60px!important;
}
 .help .help-container {
     height: 105px;
     margin-top: 50px;
     background-color: #343a40;
}
 .help .help-item {
     top: 0;
     right: 0;
     left: 0;
     display: block;
     border: 0;
     font-size: 0;
     padding: 0;
     overflow: hidden;
}
 .help .help-item .ico {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 55px;
     height: 55px;
     transform: translate(-50%,-50%);
}
 .help .help-item, .help .help-item:before {
     position: absolute;
     transition: .3s;
     bottom: 0;
}
 .help .help-item .img, .help .help-item .inform {
     display: inline-block;
     vertical-align: middle;
}
 .help .help-item .img {
     position: relative;
     width: 28%;
     height: 100%;
}
 .help .help-item .inform {
     width: 70%;
     padding: 0 30px;
}
 .help .help-container, .services .service-wrap .service-section {
     position: relative;
     border-radius: 12px;
     box-shadow: 0 5px 15px 0 rgba(110,110,110,.1);
     background-color: white;
}

.bg-dark-grey.service-wrap.service-section.request-a-quote {
    background-color: #111827;
}

 .btn-facebook, .btn-instagram, .btn-linkedin, .btn-youtube {
     color: #fff !important;
     width: 150px !important;
     margin: 10px 0px;
     border-radius: 10px;
     border-color: none!important;
}
 .btn-facebook{
     background-color: #0f53fa;
     color: white!important;
     border: 1px solid #0f53fa;
}
 .btn-facebook:hover{
     background-color: white;
     color: #0f53fa!important;
}
 .btn-instagram{
     background-color: #6a26da;
     color: white!important;
     border: 1px solid #6a26da;
}
 .btn-instagram:hover{
     background-color: white;
     color: #6a26da!important;
}
 .btn-linkedin{
     background-color: #0195ff;
     color: white!important;
     border:1px solid #0195ff;
}
 .btn-linkedin:hover{
     background-color: white;
     color: #0195ff!important;
}
 .btn-youtube{
     background-color: #b80404;
     color: white!important;
     border: 1px solid #b80404;
}
 .btn-youtube:hover{
     background-color: white;
     color: #b80404!important;
}
/*Affiliate Page*/
/* Add your custom styles here */
 .grid-item {
     padding: 7px;
     width: 300px;
    /* Set a fixed width for better visual consistency */
     box-sizing: border-box;
}
 .grid-item img {
     width: 100%;
    /* Make sure the image takes the full width of its container */
     height: auto;
    /* Maintain aspect ratio */
     display: block;
    /* Remove extra space under the image */
}
/* Style for custom content in modal */
 .custom-content {
     padding: 15px;
}
/* Style for code content in modal */
 .code-content {
     position: relative;
     padding: 25px 15px;
     background-color: #4b5157;
     border: 1px solid #393d41;
     border-radius: 4px;
     max-height: 500px;
     overflow-y: auto;
}
 .code-text {
     color: white;
     text-align: left;
}
/* Add the following style for text wrapping */
 .code-content pre {
     white-space: pre-wrap;
}
/* ... Your existing styles ... */
 .content-header {
     width: 80%;
     text-align: left;
}
/* Copy button styles */
 .copy-button {
     position: absolute;
     top: 15px;
     right: 15px;
     cursor: pointer;
}
/*Affiliate Page*/
 label.terms-checkbox {
     color: red;
}
 a.link-terms {
     color: #248ee5!important;
     font-weight: 700;
}
 #activateAffiliate:disabled {
     background-color: grey;
}
 #activateAffiliate {
     background-color: green;
     color: white;
}
 #activateAffiliate:hover:enabled {
     background-color: charcoal;
     color: white!important;
}

 a.btn.btn-link.btn-sm.float-right {
     display: inline-block;
     text-decoration: none;
     padding: 8px 16px;
     border: 1px solid #007bff;
     border-radius: 4px;
     text-align: center;
}

 .list-item p{
     color: #fff !important;
}

 .wsmenu>.wsmenu-list>li a.btn {
     padding: 0px 12px !important;
     vertical-align: middle;
     align-content: center;
     line-height: 25px;
}
 p.card__by {
     margin-bottom: 0px !important;
}

 .wsmenu>.wsmenu-list>li>.wsmegamenu.w-75 {
     background: transparent !Important;
}

 section#main-body {
     min-height: 0px;
     padding: 20px;
     margin-bottom: -20px;
}
 .list-group-item {
     position: relative;
     display: block;
     padding: .5rem 1rem;
     color: #212529;
     text-decoration: none;
     background-color: #fff;
     border: 1px solid rgba(0, 0, 0, .125);
}
 .client-home-cards .card-header .btn {
     color: #fff;
     border: 0;
     background-color: #5bc0de;
}
 span.label.status.status-terminated {
     background-color: #cfcfcf;
}
 div.dataTables_wrapper div.dataTables_length select {
     width: 70px;
     display: inline-block;
}
 button.btn.btn-default.btn-view-details {
     background-color: white;
}
 .tiles .tile .stat {
     margin-top: 20px;
     font-size: 40px;
     line-height: 1;
     color: black;
}
/*Header -Menu Light Mode CSS*/
/* Button used to open the contact form - fixed at the bottom of the page */
 .open-button {
     background-color: #555;
     color: white;
     padding: 16px 20px;
     border: none;
     cursor: pointer;
     opacity: 0.8;
     bottom: 0!important;
     right: 0!important;
}
/* The popup form - hidden by default */
 .form-popup {
     display: none;
     position: absolute;
     right: 0!important;
     top: 7%!important;
     left: 50%!important;
     transform: translate(-50%, -50%);
     border: 3px solid var(--background);
     z-index: 100!important;
     background-color: grey!important;
     max-width: 800px;
     min-width: 350px;
}
/* Add styles to the form container */
 .form-container {
     max-width: 300px;
     padding: 10px;
     background-color: white;
}
/* Full-width input fields */
 .form-container input[type=text], .form-container input[type=password] {
     width: 100%;
     padding: 15px;
     margin: 5px 0 22px 0;
     border: none;
     background: #f1f1f1;
}
/* When the inputs get focus, do something */
 .form-container input[type=text]:focus, .form-container input[type=password]:focus {
     background-color: #ddd;
     outline: none;
}
/* Set a style for the submit/login button */
 .form-container .btn {
     background-color: #04AA6D;
     color: white;
     padding: 16px 20px;
     border: none;
     cursor: pointer;
     width: 100%;
     margin-bottom:10px;
     opacity: 0.8;
}
/* Add a red background color to the cancel button */
 .form-container .cancel {
     background-color: red;
}
/* Add some hover effects to buttons */
 .form-container .btn:hover, .open-button:hover {
     opacity: 1;
}
 #_form_9_ {
     position: relative;
     text-align: left;
     margin: 0 50px;
     padding: 20px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     background: 0 0 !important;
     border: 0 solid #b0b0b0 !important;
     max-width: 900px;
     -moz-border-radius: 0 !important;
     -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
     color: #000 !important 
}
 #stickytypeheader {
     z-index: 100 !important 
}
 .wsmenu body, .wsmenu h1, .wsmenu h2, .wsmenu h3, .wsmenu h4, .wsmenu h5, .wsmenu h6, .wsmenu html, .wsmenu iframe {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
}
 .wsmenu img {
     border: 0 none;
     max-width: 100% 
}
 .wsmenu a:focus {
     outline: 0 
}
 .wsmenu:after, .wsmenu:before {
     content: "";
     display: table 
}
 .wsmenu:after {
     clear: both 
}

 .wsmainwp {
     margin: 0 auto;
     max-width: 1700px;
     padding: 0 5px;
     position: relative 
}
 .desktoplogo {
     padding: 0;
     margin: 0;
     float: left;
     line-height: 70px 
}
 .lighttheme-img {
     padding: 0;
     margin: 0;
     float: left;
     line-height: 70px 
}
 .desktoplogo img {
     vertical-align: middle ;
     width: auto;
     max-width: inherit;
     max-height: 53px;
}

.lighttheme-img img{
     vertical-align: middle 
}
 .wsmenu {
     padding: 0;
     float: right;
     display: block 
}
 .wsmenu>.wsmenu-list {
     text-align: left;
     margin: 0 auto 0 auto;
     width: 100%;
     display: block;
     padding: 0 
}
 .wsmenu>.wsmenu-list>li {
     text-align: center;
     display: block;
     padding: 0;
     margin: 0;
     float: left 
}
 .wsmenu>.wsmenu-list>li>a {
     display: block;
     color: #4e5360!important;
     font-size: 15px;
     font-weight: 700;
     letter-spacing: .5px;
     margin: 0 7px;
     padding: 10px 12px;
     line-height: 50px;
     text-decoration: none;
     position: relative;
}
 .wsmenu>.wsmenu-list>li>a.last-link {
     padding: 10px 0 10px 0 
}
 .white-menu .wsmenu>.wsmenu-list>li:hover>a {
     color: #171819 
}
 .wsmenu>.wsmenu-list>li>a i {
     display: inline-block;
     font-size: 16px;
     line-height: inherit;
     margin-right: 12px;
     vertical-align: top 
}
 .wsmenu>.wsmenu-list>li>a .wsarrow:after {
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 4px solid;
     content: "";
     float: right;
     height: 0;
     margin: 0 0 0 14px;
     position: absolute;
     text-align: right;
     margin-left: auto;
     right: 0;
     top: 32px;
     width: 0 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu {
     width: 100%;
     left: 0;
     position: absolute;
     top: 70px;
     color: #000;
     z-index: -1 !important;
     margin: 0;
     text-align: left;
     padding: 20px 30px;
     border: solid 0px #eee;
     background-color: #fff;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .link-list li {
     display: block;
     text-align: center;
     text-align: left;
     border-bottom: 1px dashed silver 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .link-list li.title, .wsmenu>.wsmenu-list>li>.wsmegamenu .link-list li:last-child {
     border-bottom: none 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .link-list li a {
     line-height: 22px;
     border-right: none;
     text-align: left;
     padding: 13px 0;
     background: #fff;
     background-image: none;
     border-right: 0 none;
     display: block;
     background-color: #fff;
     color: #888;
     font-size: 16px;
     font-weight: 400;
     -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -ms-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .show-grid div {
     padding-bottom: 10px;
     padding-top: 10px;
     background-color: #dbdbdb;
     border: 1px solid #e7e7e7;
     color: #6a6a6a;
     margin: 2px 0;
     font-size: 13px 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .menu_form {
     width: 100%;
     display: block 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .menu_form input[type=text] {
     width: 100%;
     border: 1px solid #e2e2e2;
     color: #000;
     font-size: 13px;
     padding: 8px 5px;
     margin-bottom: 8px 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .menu_form input[type=submit] {
     width: 25%;
     display: block;
     height: 32px;
     float: right;
     border: none;
     margin-right: 15px;
     cursor: pointer;
     background-color: #e1e1e1;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px 
}
 .wsmenu>.wsmenu-list>li>.wsmegamenu .menu_form input[type=button] {
     width: 25%;
     display: block;
     height: 32px;
     float: right;
     border: none;
     cursor: pointer;
     background-color: #e1e1e1;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px 
}

 .wsmenu .wsmenu-click {
     display: none 
}
 .wsmenu .wsmenu-click02 {
     display: none 
}
 .dropdownN {
     display: none 
}
 .shown .dropdownN {
     display: block 
}
 button::-moz-focus-inner {
     padding: 0;
     border: 0 
}
 .responsive-content {
     width: 767px;
     margin: 0 auto 
}
 .container {
     position: relative 
}
 .container-2 {
     position: relative 
}

.navbar{
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
}
 .mt-inverse-home {
     margin-top: -40px !important;
}

 .truncate{
     max-width: 280px;
}
 span.\`btn.login-button {
     color: black !important;
}
 i.fas.fa-lock.btn-question.login-button{
     color: black !important;
}
 div.product-details-tab-container{
     max-height: 100%;
}
 .pl-3{
     padding-left: 3px !important;
}
 .pl-10{
     padding-left: 10px !important;
}
 .pl-20{
     padding-left: 20px !important;
}
 .mr-5{
     margin-right: 5px !important ;
}
 p.white-paragraph {
     color: white;
}

 #order-standard_cart .products .product div.product-desc {
     margin-bottom: 2px;
     font-size: 13px !important;
     line-height: 1.4rem;
}
 .search-button {
     display: inline-block;
     width: 73%;
}
 .footer-logos{
     width: 240px !important;
     filter: grayscale(100%) brightness(75%);
}
 .mm-nav-container {
     display: flex;
     font-family: Arial, sans-serif;
     background: #f5f8fa;
     height: 470px;
     width: 950px;
}
 
 .mm-nav-item {
     display: flex;
     align-items: center;
     padding: 6px;
     margin-bottom: 4px;
     cursor: pointer;
     background: #1a2526;
     border-radius: 5px;
     transition: background 0.3s;
}
 .mm-nav-item:not(.active) + .mm-nav-item {
     border-top: 1px solid #333;
    /* Divider line between inactive tabs */
}
 .mm-nav-item:hover, .mm-nav-item.active {
     background: #007bff;
}
 
 .mm-nav-details {
     flex: 1;
}
 .mm-nav-title {
     font-weight: bold;
     font-size: 14px;
    /* Increased from 12px */
}
 .mm-nav-desc {
     font-size: 11px;
    /* Increased from 10px */
     opacity: 0.7;
}
 .mm-main-content {
     flex: 1;
     padding: 10px;
     display: flex;
     gap: 10px;
     height: 100%;
}
 .mm-content-section {
     display: none;
     flex: 2;
     overflow-y: auto;
     height: 100%;
}
 .mm-content-section.active {
     display: block;
}
 .mm-content-section h1 {
     font-size: 20px;
    /* Increased from 18px */
     font-weight: bold;
     color: #1a2526;
     text-transform: uppercase;
     margin-bottom: 2px;
}
 .mm-content-section p {
     font-size: 14px;
    /* Increased from 12px */
     color: #666;
     margin-bottom: 8px;
}
 .mm-grid {
     display: flex;
     flex-direction: column;
     gap: 8px;
}
 .mm-grid-item {
     display: flex;
     align-items: center;
     padding: 8px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
     text-decoration: none;
     color: #333;
     transition: box-shadow 0.3s;
}
 .mm-grid-item:hover {
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     text-decoration: none !important;
}
 .mm-grid-icon {
     margin-right: 15px;
     font-size: 30px;
     color: #1a2526;
     vertical-align: bottom;
     margin-top: 12px;
}
 .mm-grid-details h3 {
     font-size: 14px;
    /* Increased from 12px */
     font-weight: bold;
     color: #1a2526;
     margin-bottom: 2px;
     font-family: "Source Sans Pro", Sans-serif;
}
 .mm-grid-details p {
     font-size: 12px;
    /* Increased from 10px */
     color: #666;
     margin:0px;
     font-family: "Source Sans Pro", Sans-serif;
}
 .mm-promo-box {
     position: relative;
     width: 390px;
     height: 100%;
     border-radius: 10px;
     overflow: hidden;
     display: none;
     flex: 1;
}
 .mm-promo-box .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     padding: 20px;
     color: white;
}
 .mm-promo-box .overlay h2 {
     font-size: 24px;
     margin: 0;
     font-weight:700;
}
 .mm-promo-box .overlay p {
     font-size: 14px;
     margin: 5px 0;
}
 .mm-promo-box .overlay button {
     background: #007bff;
     border: none;
     color: white;
     padding: 8px 16px;
     border-radius: 5px;
     cursor: pointer;
}
 .mm-promo-box-dark button {
     background: #fff;
     color: black;
}
 .mm-promo-box-dark button:hover {
     background: #000;
     color: white;
}
 .mm-promo-box .overlay button:hover {
     background: #0056b3;
}
 #ad-domain {
     background: url('/templates/nexus/images/domain-1.webp') no-repeat center;
     background-size: cover;
}
 #ad-hosting {
     background: url('/templates/nexus/images/hosting-1.webp') no-repeat center;
     background-size: cover;
}
 #ad-email {
     background: url('/templates/nexus/images/email-2.webp') no-repeat center;
     background-size: cover;
}
 #ad-design {
     background: url('/templates/nexus/images/design-2.webp') no-repeat center;
     background-size: cover;
}
 #ad-development {
     background: url('/templates/nexus/images/ai-workflow-new.webp') no-repeat center;
     background-size: cover;
}
 #ad-marketing {
     background: url('/templates/nexus/images/marketing-3.webp') no-repeat center;
     background-size: cover;
}
 #ad-services {
     background: url('/templates/nexus/images/service-21.webp') no-repeat center;
     background-size: cover;
}
 #ad-security {
     background: url('/templates/nexus/images/security.webp') no-repeat center;
     background-size: cover;
}
 .mm-nav-panel {
     background: #1a2526;
     color: white;
}
 .mm-nav-icon {
     display: inline-block;
     margin-right: 8px;
     vertical-align: middle;
     width:22px;
}
 .info-box {
     text-align: left;
}
 .info-item {
     display: block;
     vertical-align: top;
     width: 32%;
     min-width: 250px;
     padding: 15px 0px;
     border-radius: 10px;
     margin: 10px 1%;
     text-decoration: none;
     color: #fff;
     backdrop-filter: blur(3px);
     transition: 0.3s;
}
 .info-icon {
     width: 50px;
     height: 50px;
     background: #fff;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     float: left;
     margin-right: 15px;
}
 .info-text h4 {
     margin: 0;
     font-size: 18px;
     font-weight: 600;
}
 .info-text p {
     margin: 2px 0 0;
     font-size: 15px;
     opacity: 0.9;
}
/* Clear float */
 .info-item::after {
     content: "";
     display: block;
     clear: both;
}

/* 5) Hamburger active state (your correction) */
#mobileMenuToggle.active span,
#mobileMenuToggle.active span:before,
#mobileMenuToggle.active span:after {
  background: #fdd700;
}

/* =========================================================
   MOBILE ACCORDION (LIGHT THEME)
   ========================================================= */
.mm-mobile-menu {
  background: #ffffff;
  padding: 8px;
  border-radius: 8px;
}

.mm-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-mobile-list > li {
  margin-bottom: 10px;
  border: 1px solid #e9ecef;             /* light border */
  border-radius: 10px;
  overflow: hidden;
  background: #f8f9fa;                    /* light card look */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Toggle button row */
.submenu-toggle {
  width: 100%;
  background: none;
  border: none;
  color: #212529;                         /* dark text */
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
}

/* Chevron indicator */
.submenu-toggle::after {
  content: "▼";
  float: right;
  font-size: 12px;
  color: #6c757d;                         /* muted chevron */
  transition: transform 0.25s ease, color 0.25s ease;
}
.has-submenu.open .submenu-toggle::after {
  transform: rotate(-180deg);
  color: #212529;
}

/* Submenu list */
.submenu {
  display: none;
  padding: 8px 14px 12px 14px;
  background: #ffffff;
  border-top: 1px solid #e9ecef;
}
.has-submenu.open .submenu { display: block; list-style:none; }

.submenu li a {
  display: block;
  color: #212529;
  font-size: 14.5px;
  padding: 8px 0;
  text-decoration: none;
}
.submenu li a:hover { color: #0d6efd; }   /* blue hover */



/* =========================================================
   1) Make the entire menu row flex and vertically centered
   ========================================================= */
nav.wsmenu {
  display: flex;                 /* ensures nav itself is a flex row */
  align-items: center;           /* vertical centering within nav */
}

/* The UL that holds all menu items, including the Login/Register buttons */
nav.wsmenu > ul.wsmenu-list {
  display: flex;
  align-items: center;           /* vertical centering of all LI children */
  gap: 0;                     /* mild spacing between items */
  padding: 0;
  margin: 0;
}

/* Each LI should align its content centrally */
nav.wsmenu > ul.wsmenu-list > li {
  display: flex;
  align-items: center;           /* centers link/button inside the LI */
}

/* =========================================================
   2) Normalize the Login/Register buttons
   ========================================================= */
/* Anchor buttons: make them inline-flex with a consistent height */
nav.wsmenu .primary-action > a,
nav.wsmenu .primary-action > button,
nav.wsmenu a.btn.btn-default-white-fill.question,
nav.wsmenu a.btn.btn-logged-in-admin {
  display: inline-flex;
  align-items: center;           /* center icon + text vertically */
  justify-content: center;
  height: 30px;                  /* pick a height that matches your header */
  line-height: 1;                /* remove baseline mismatch */
  padding: 0 14px;               /* horizontal padding */
  border-radius: 8px;            /* optional: match your visual style */
}

/* Icon inside the Login button (lock/user) */
nav.wsmenu .primary-action i,
nav.wsmenu a.btn i {
  font-size: 1rem;
  line-height: 1;
  position: relative;
  top: 0;                        /* reset any inherited offsets */
  margin-right: 8px;             /* space between icon and text */
}

/* The strange backtick class on <span> should still center fine */
nav.wsmenu span.login-button {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* If the Login button uses .btn-question, neutralize any transform/uppercase padding that misaligns it */
nav.wsmenu .btn-question {
  transform: none !important;
  text-transform: none;          /* keep label normal; change to uppercase if desired */
  padding: 0 !important;         /* the outer anchor has the horizontal padding */
}

/* =========================================================
   3) Align “Products & Services” and other text links as well
   ========================================================= */
nav.wsmenu a.prod,
nav.wsmenu a.prod .wsarrow {
  display: inline-flex;
  align-items: center;           /* arrow sits centered with label */
}

/* Optional: tighten the arrow alignment */
nav.wsmenu a.prod .wsarrow {
  position: relative;
  top: 0;
  margin-left: 6px;
}




/* Visible, inline chevron next to link text */
.wsmenu a .wsarrow {
  display: inline-block;
  width: 0;
  height: 0;
  /* triangle pointing down */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor; /* inherits link color */
  margin-left: 6px;                   /* space from text */
  vertical-align: middle;
  transform: translateY(-1px);        /* small optical center tweak */
}

/* Hover/active state arrow color sync (optional) */
.wsmenu a:hover .wsarrow,
.wsmenu a:focus .wsarrow {
  border-top-color: currentColor;
}

/* If your menu uses darker link colors on scroll or fixed header */
.menu-wrap.fixed .wsmenu a .wsarrow {
  border-top-color: currentColor;
}

/* Remove any absolute positioning from previous rules that push it out of view */
.wsmenu > .wsmenu-list > li > a .wsarrow:after,
.wsmenu > .wsmenu-list > li > a .wsarrow:before {
  content: none !important;
}


.form-group.prepend-icon {
  position: relative;
}

.form-group.prepend-icon .field-icon {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  font-size: 14px;
}

.form-group.prepend-icon .field {
  padding-left: 38px;
}

#registration .prepend-icon .field-icon {
    top: 15px;
}

.intl-tel-input .selected-flag{
    position: absolute;
}


.ul-footer-list{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart .prepend-icon .field-icon {
    top: 20px !important;
}


a.dropdown-toggle{color: white;}

 @media (min-width: 1360px) {
     .hero-image{
         width: 405px;
         margin-left: -77px;
         margin-bottom: -20px;
    }
}

 @media (max-width: 992px) {
     .hero-image{
         width: 300px;
    }
}
@media (max-width: 960px) {
     .get-started-tiles {
         margin:0 20px;
    }
     .home-section{
         padding: 0px!important;
         margin: 0px !important;
         overflow-x: hidden;
    }
     .round-box{
         border-radius: 0px!important;
    }
     .hero-left{
         border-radius: 0px;
         border: 0px;
    }
     .domain-section {
         border-radius: 0px;
         padding: 10px;
    }
     .col-md-12.col-lg-8.my-pl24.review-box {
         width: 90%;
         margin: 20px;
    }
     .container-mansory {
         grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
         grid-template-rows: minmax(auto, auto);
    }
     .container-mansory .box {
         grid-column: unset !important;
         grid-row: unset !important;
    }
}
 @media (max-width: 600px) {
     .container-mansory {
         grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
         grid-template-rows: minmax(auto, auto);
    }
     .container-mansory .box {
         grid-column: unset !important;
         grid-row: unset !important;
    }
}

 @media screen and (min-width:500px) and (max-width: 1199px) {
     .sim-hosting-box{
         background-size: 42% !important;
    }
     .online-marketing-box{
         background-size: 50% !important;
    }
     .webiste-design-box{
         background-size: 50% !important;
    }
     .mobile-development-box{
         background-size: 35% !important;
    }
     .workspace-box{
         background-size: 50%!important;
    }
     .col-md-3.get-started-tiles {
         width: 50%;
    }
     .col-md-3.reviews-tiles {
         width: 50%;
    }
     .col-md-12.col-lg-8.my-pl24.review-box {
    }
     .blog-column{
         width: 100%;
    }
}
 @media screen and (max-width:499px) {
     .sim-hosting-box{
         aspect-ratio: 4 / 4;
    }
     .text-center-mobile{
         text-align: center;
    }
     .online-marketing-box{
         background-size: 130% !important;
         background-position: -40px 350px !important;
    }
     .mobile-development-box{
         background-size: 70% !important;
         aspect-ratio: 4 / 4;
    }
     .server-management-box{
         background-size: 75% !important;
         aspect-ratio: 4 / 4;
    }
     .hacked-website-box{
         aspect-ratio: 4 / 4;
         background-size: 58%!important;
    }
     .workspace-box{
         background-size: 50% !important;
         aspect-ratio: 4 / 4;
    }
     .review-box{
         height: 840px;
    }
     .btns-group .my-call{
         width: 100%;
         margin: 5px;
    }
     img.nested-image{
         max-width: 105%;
    }
}

 @media (max-width: 768px) {
    /* Style for single column on mobile */
     .gallery-item {
         flex: 1 1 100%;
    }
     .search-btn{
         margin-left: 35px!important;
    }
}

/* Mobile: Center Items */
@media (max-width: 576px) {
  

  

  
}

/* ---------- Mobile (≤ 576px) ---------- */
@media (max-width: 576px) {
  .gallery {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;                  /* comfortable touch spacing */
  }
  .gallery .item {
    flex: 0 1 100%;             /* one column (stack vertically) */
    justify-content: center;/* left-align per common mobile UX; change to center if you prefer */
  }
  .gallery .item img {
    max-height: 60px;           /* mobile-friendly size */
  }
}

/* =========================================
   MOBILE MENU BEHAVIOR (CSS-ONLY OVERRIDES)
   ========================================= */

/* 1) Desktop wrapper remains hidden on mobile (keep your original behavior) */
@media (max-width: 1199px) {
  .wsmainfull { 
    display: none !important; 
  }
}

/* 2) Make the mobile header bar visible on mobile */
@media (max-width: 1199px) {
  
}

/* 3) Make the mobile menu panel visible and in-view on mobile */
@media (max-width: 1199px) {
  .wsmenu {
    visibility: visible !important; /* was hidden */
    z-index: 1032;                  /* above content; below modals */
  }
  .wsmenu > .wsmenu-list {
    margin-right: 0 !important;     /* was -350px off-canvas */
    box-shadow: 0 0 10px rgba(0,0,0,.12);
  }
}

/* 4) Optional: keep desktop-only header strip hidden if any appear on mobile */
@media (max-width: 1199px) {
  .h-navigation,
  .menu-wrap,
  .wsmainfull-2 {
    display: none !important;
  }
}

/* Mobile logo sizing */
@media (max-width: 1199px) {
  .wsmobileheader .smllogo img {
    height: 55px;          /* adjust to taste: 30–40px looks good */
    width: auto;
  }
  /* If your logo sits in .desktoplogo on mobile, constrain it too */
  .desktoplogo img {
    max-height: 34px;
    width: auto;
  }
}

/* =========================================================
   MOBILE HEADER + HAMBURGER (RIGHT) — LIGHT THEME
   ========================================================= */
@media (max-width: 1199px) {
  /* Mobile header bar */
  .wsmobileheader {
    display: flex !important;
    align-items: center;
    justify-content: space-between;     /* logo left, hamburger right */
    padding: 8px 12px;
    background: #ffffff;                 /* white header background */
    position: sticky;
    top: 0;
    z-index: 1034;                       /* above dropdown panel */
    border-bottom: 1px solid #e9ecef;
  }

  /* Logo sizing on mobile */
  .wsmobileheader .smllogo img,
  .desktoplogo img {
    max-height: 55px;
    width: auto;
  }

  /* Hamburger (right-aligned) */
  #nav-toggle,
  #mobileMenuToggle {
    display: inline-block !important;
    position: relative;
    width: 36px;                         /* touch-friendly */
    height: 24px;
    margin-left: auto;                   /* push to right */
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1035;                       /* keep clickable above panel */
  }

  .loggedin-menu .menu-item a {
    margin: 0px;
}

  /* Simple bars (3 lines) */
  #nav-toggle span,
  #mobileMenuToggle span,
  #nav-toggle span::before,
  #nav-toggle span::after,
  #mobileMenuToggle span::before,
  #mobileMenuToggle span::after {
    position: absolute;
    left: 0; right: 0;
    height: 2px;                         /* slim bars */
    background: #212529;                 /* dark bars on white header */
    content: '';
    display: block;
    transition: 250ms ease-in-out;
  }
  #nav-toggle span,
  #mobileMenuToggle span { top: 50%; transform: translateY(-50%); }
  #nav-toggle span::before,
  #mobileMenuToggle span::before { top: -8px; }
  #nav-toggle span::after,
  #mobileMenuToggle span::after { top: 8px; }

  /* Active state: plain "X" (bars rotate), center line hidden */
  #nav-toggle.active span,
  #mobileMenuToggle.active span {
    background: transparent;             /* hide middle bar */
  }
  #nav-toggle.active span::before,
  #mobileMenuToggle.active span::before {
    top: 0;
    transform: rotate(45deg);
  }
  #nav-toggle.active span::after,
  #mobileMenuToggle.active span::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* =========================================================
   DROPDOWN PANEL POSITIONING — WHITE BACKGROUND, NO OVERLAP
   ========================================================= */
@media (max-width: 1199px) {
  /* Your dropdown container uses dropdownN / h-hidden
     → force it to be controllable on mobile */
  #prod2list.dropdownN,
  #prod2list.h-hidden {
    display: block !important;
    visibility: visible !important;
  }

  /* Panel wrapper — sits under the mobile header */
  

  /* Show mobile menu only when .open is present */
  
  #prod2list.open .mm-mobile-menu { display: block !important; background-color:#405061 }

  /* Hide heavy desktop/mega content on mobile */
  #prod2list .mm-nav-container,
  #prod2list .mm-main-content,
  #prod2list .mm-promo-box {
    display: none !important;
  }

  /* Ensure WHMCS desktop navbar does not compete on mobile */
  .navbar, .menu-wrap, .h-navigation, .wsmainfull-2 {
    display: block;
  }
}

/* =========================================================
   OPTIONAL: PANEL SLIDE ANIMATION
   ========================================================= */
@media (max-width: 1199px) {
  #prod2list {
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  #prod2list.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    background-color: #405061;
  }

  .form-section{
    background-size: 45%;
  }

  .form-box{
    margin: 10px;
  }

  .footer-category::before{
            margin: 15px auto;
        border-top: 1px solid;
        width: 30%;
  }

  .footer-services{
      text-align: center;
  }

}

/* =========================================================
   SAFETY OVERRIDES — ENSURE DEFAULTS ARE HIDDEN
   ========================================================= */
@media (max-width: 1199px) {
  /* Hidden by default; shown via #prod2list.open */
  .mm-mobile-menu { display: none; }

  /* If any earlier CSS forced visibility, re-hide until .open */
  #prod2list:not(.open) .mm-mobile-menu { display: none !important; }
}


/* =========================================================
   5) Mobile: keep the same vertical centering
   ========================================================= */
@media (max-width: 1199px) {
  nav.wsmenu {
    align-items: center;         /* keep nav row centered in mobile header bar */
  }
  nav.wsmenu > ul.wsmenu-list {
    align-items: center;
  }
  /* Slightly smaller button height for compact headers */
  nav.wsmenu .primary-action > a,
  nav.wsmenu .primary-action > button,
  nav.wsmenu a.btn.btn-default-white-fill.question {
    height: 36px;
    padding: 0 12px;
  }
}

@media (max-width: 991px) {
    .navbar-brand {
        position: relative;
        z-index: 2000;
        pointer-events: none; /* prevents it intercepting clicks */
    }
}

/* Show WSMenu mobile header on mobile & keep above Bootstrap navbar */
@media (max-width: 991.98px) {
  .wsmobileheader { display:in-block!important; position:relative; z-index:5000; }
  /* Hamburger visible and clickable */
  #nav-toggle { display:inline-block!important; z-index:6000; }
  /* Allow mobile dropdown shells inside mobile header */
  .wsmobileheader .dropdownN { display:block!important; }
  /* Drawer panel sits below the header, not clipped */
  #prod2list {
    position:absolute!important; top:60px!important; left:0; right:0;
    max-height:calc(100vh - 60px); overflow-y:auto; background:#fff; display:none;
    box-shadow:0 12px 24px rgba(0,0,0,.15); border-radius:0 0 12px 12px; z-index:5500!important;
  }
  #prod2list.open { display:block!important; }
  /* Prevent ancestor clipping */
  #top1, .strip-wrapper, .wsmainfull, .wsmainwp, nav.wsmenu, header.header { overflow:visible!important; }
  .toggle-dropdown::after { margin-left: -0.6em;  margin-right: 0.51em;}
  .menu-item {margin:0px;}
}
/* Desktop: visibility controlled only by JS .open */
.wsmenu li.mg_link .wsmegamenu { display:none; }
.wsmenu li.mg_link .wsmegamenu.open { display:block; }


.toggle-dropdown::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.kb-article-item small {
    color: #000;
}

@media (min-width: 992px) and (max-width: 1199px) {
  #header {
    display: flex;
    flex-direction: column;
  }

  #header::after {
    content: "";
    display: block;
    clear: both;
  }
}