.elementor-8326 .elementor-element.elementor-element-378cf233{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.69;--padding-top:205px;--padding-bottom:202px;--padding-left:0px;--padding-right:0px;}.elementor-8326 .elementor-element.elementor-element-378cf233:not(.elementor-motion-effects-element-type-background), .elementor-8326 .elementor-element.elementor-element-378cf233 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.netmonservices.com/wp-content/uploads/2025/06/it-service-and-man-fixing-a-pc.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8326 .elementor-element.elementor-element-378cf233::before, .elementor-8326 .elementor-element.elementor-element-378cf233 > .elementor-background-video-container::before, .elementor-8326 .elementor-element.elementor-element-378cf233 > .e-con-inner > .elementor-background-video-container::before, .elementor-8326 .elementor-element.elementor-element-378cf233 > .elementor-background-slideshow::before, .elementor-8326 .elementor-element.elementor-element-378cf233 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8326 .elementor-element.elementor-element-378cf233 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-cb2a111 );--background-overlay:'';}.elementor-8326 .elementor-element.elementor-element-40ce4c2d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8326 .elementor-element.elementor-element-2641d9de{text-align:center;}.elementor-8326 .elementor-element.elementor-element-2641d9de .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:60px;font-weight:900;line-height:60px;color:var( --e-global-color-52d4b74 );}.elementor-8326 .elementor-element.elementor-element-145927ca{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:-45px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8326 .elementor-element.elementor-element-47390686{--display:flex;border-style:solid;--border-style:solid;border-width:6px 6px 6px 6px;--border-top-width:6px;--border-right-width:6px;--border-bottom-width:6px;--border-left-width:6px;border-color:var( --e-global-color-52d4b74 );--border-color:var( --e-global-color-52d4b74 );--border-radius:40px 40px 40px 40px;box-shadow:0px 6px 20px 0px rgba(0, 59.999999999999936, 143, 0.1);--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-8326 .elementor-element.elementor-element-47390686:not(.elementor-motion-effects-element-type-background), .elementor-8326 .elementor-element.elementor-element-47390686 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2461AA;}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(4px/2);}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(4px/2);}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(4px/2);}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-4px/2);}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-4px/2);}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-icon i{color:var( --e-global-color-52d4b74 );transition:color 0.3s;}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-icon svg{fill:var( --e-global-color-52d4b74 );transition:fill 0.3s;}.elementor-8326 .elementor-element.elementor-element-29932d32{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-8326 .elementor-element.elementor-element-29932d32 .elementor-icon-list-text{color:var( --e-global-color-52d4b74 );transition:color 0.3s;}.elementor-8326 .elementor-element.elementor-element-e7c5fa7{--display:flex;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8326 .elementor-element.elementor-element-c6b735d{--display:flex;--margin-top:75px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8326 .elementor-element.elementor-element-d59a729{--display:flex;}.elementor-8326 .elementor-element.elementor-element-ed13781 > .elementor-widget-container{padding:0px 0px 40px 0px;}.elementor-8326 .elementor-element.elementor-element-2b97005{--display:flex;}.elementor-8326 .elementor-element.elementor-element-b113490{--display:flex;}.elementor-8326 .elementor-element.elementor-element-900da4d{--e-image-carousel-slides-to-show:5;}.elementor-8326 .elementor-element.elementor-element-900da4d > .elementor-widget-container{padding:0px 0px 50px 0px;}.elementor-8326 .elementor-element.elementor-element-900da4d .swiper-wrapper{display:flex;align-items:center;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-8326 .elementor-element.elementor-element-145927ca{--content-width:260px;}.elementor-8326 .elementor-element.elementor-element-e7c5fa7{--content-width:1174px;}}@media(max-width:767px){.elementor-8326 .elementor-element.elementor-element-2641d9de .elementor-heading-title{font-size:45px;}.elementor-8326 .elementor-element.elementor-element-900da4d{--e-image-carousel-slides-to-show:2;}}/* Start custom CSS for container, class: .elementor-element-e7c5fa7 */:root {
  --netmon-blue:   #2461AA;
  --netmon-light:  #EEF5FF;
}

.intro-text {
  /* Text + background */
  color: var(--netmon-blue);
  background-color: var(--netmon-light);

  /* Highlight bar */
  border-left: 4px solid var(--netmon-blue);

  /* Spacing & shape */
  padding: 1.5rem 2rem;
  border-radius: 8px;

  /* Typography */
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;

  /* Subtle shadow */
  box-shadow: 0 4px 12px rgba(36, 97, 170, 0.15);
}

/* Optional: emphasize keywords */
.intro-text strong {
  color: var(--netmon-blue);
  font-weight: 600;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ed13781 *//*────────────────────────────── Glass Container ──────────────────────────────*/
#service-details.glass {
  --blue: #2461AA;
  max-width: 900px;
  margin: 80px auto;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(36,97,170,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .3s ease;
}
#service-details.glass:hover {
  transform: translateY(-4px);
}

/*────────────────────────────── Tabs Base ──────────────────────────────*/
.tabs { display: flex; flex-direction: column; }
.tabs input { display: none; }

/*────────────────────────────── Tab Labels ──────────────────────────────*/
.tabs-labels {
  display: flex;
  background: rgba(36,97,170,0.1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* round both top corners */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.tabs-labels::-webkit-scrollbar { display: none; }
.tabs-labels label {
  flex: 1;
  flex-shrink: 0;
  min-width: 150px;
  padding: 16px 0;
  text-align: center;
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  transition: background .3s, color .3s;
  border-bottom: 3px solid transparent;
  background: rgba(255,255,255,0.1);
}
.tabs-labels label:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.2);
}
.tabs-labels label:hover {
  background: rgba(36,97,170,0.15);
}

/*────────────────────────────── Active Tab ──────────────────────────────*/
#tab1:checked ~ .tabs-labels label[for="tab1"],
#tab2:checked ~ .tabs-labels label[for="tab2"],
#tab3:checked ~ .tabs-labels label[for="tab3"],
#tab4:checked ~ .tabs-labels label[for="tab4"] {
  background: var(--blue);
  color: #fff;
  border-bottom-color: #fff;
  font-weight: 600;
}

/*────────────────────────────── Tab Content ──────────────────────────────*/
.tabs-content > div {
  display: none;
  padding: 32px 40px;
  background: rgba(255,255,255,0.08);
  color: #222;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
#tab1:checked ~ .tabs-content #content1,
#tab2:checked ~ .tabs-content #content2,
#tab3:checked ~ .tabs-content #content3,
#tab4:checked ~ .tabs-content #content4 {
  display: block;
}

/*──────────────────────────── Button Styling ─────────────────────────────*/
#service-details .primary-btn {
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  padding: 12px 24px;
  display: inline-block;
  transition: box-shadow .3s ease, transform .2s ease;
  margin-top: 24px;
}
#service-details .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/*────────────────────────────── Responsive ──────────────────────────────*/
@media (max-width: 768px) {
  #service-details.glass {
    width: calc(100vw - 32px);
    max-width: none;
    margin: 20px 16px;
    overflow-x: hidden;
  }
  .tabs-labels {
    width: 100%;
    flex-wrap: wrap;
    overflow-x: hidden;
  }
  .tabs-labels label {
    flex: 1 1 50%;
    min-width: 0;
    padding: 12px 0;
    font-size: 0.9rem;
  }
  .tabs-labels label:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.2);
  }
  .tabs-labels label:nth-child(even) {
    border-right: none;
  }
  .tabs-content > div {
    padding: 24px 16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e765a30 */:root {
  --netmon-blue:  #2461AA;
  --netmon-light: #EEF5FF;
}

/* 1) Section wrapper & background */
.how-it-works {
  background: rgba(36, 97, 170, 0.05);
  padding: 4rem 1rem 2rem;
  box-sizing: border-box;
}

/* 2) Title with underline accent */
.how-it-works__title {
  font-family: 'Segoe UI', sans-serif;
  font-size: 2.5rem;
  color: var(--netmon-blue);
  text-align: center;
  margin-bottom: 0.5rem;
  position: relative;
}
.how-it-works__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--netmon-blue);
  margin: 0.5rem auto 2rem;
}

/* 3) Intro/subheading */
.how-it-works__intro {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #1A2F5B;
  text-align: center;
  margin-bottom: 3rem;
}

/* 4) Equal-height grid & cards */
.how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.step-card {
  background: var(--netmon-light);
  border: 1px solid rgba(36,97,170,0.15);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Step icon */
.step-card__icon {
  font-size: 2.5rem;
  color: var(--netmon-blue);
  margin-bottom: 1rem;
}


/* Step title & text */
.step-card__title {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  color: var(--netmon-blue);
  margin-bottom: 0.75rem;
}
.step-card__text {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.how-it-works__cta {
  display: inline-block;
  margin: 3rem auto 0;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #2461AA 0%, #2F7ACB 100%);
  color: #fff !important;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(36,97,170,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  text-align: center;
}

/* Hover state: brighten & lift */
.how-it-works__cta:hover {
  background: linear-gradient(135deg, #2F7ACB 0%, #2461AA 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(36,97,170,0.4);
}


/* 6) Responsive tweaks */
@media (max-width: 768px) {
  .how-it-works__steps { gap: 1.5rem; }
  .step-card { padding: 1.5rem 1rem; }
  .step-card__icon { font-size: 2rem; }
  .step-card__title { font-size: 1.125rem; }
  .how-it-works__title { font-size: 2rem; }
  .how-it-works__intro { font-size: 1rem; margin-bottom: 2rem; }
  .how-it-works__cta { padding: 0.75rem 1.5rem; }
}
.how-it-works {
  text-align: center;    /* all inline/inline-block children will center */
}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-900da4d *//* 1. Keep your wrapper styling but add box‐sizing */
.netmon-logos-carousel .elementor-image-carousel-wrapper {
  background-color: var(--netmon-light);
  border: 1px solid rgba(36,97,170,0.2);
  border-radius: 8px;
  padding: 2rem;
  box-sizing: border-box;            /* ← ensure padding doesn’t change the width used by Swiper */
}


/* 3. Use margins on each slide instead of gap */
.netmon-logos-carousel .swiper-slide {
  margin: 0 1rem;                    /* ← 2rem total gap (1rem each side) */
}

/* 4. Your existing greyscale + hover tint */
.netmon-logos-carousel .swiper-slide img {
  max-height: 60px;
  width: auto;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.netmon-logos-carousel .swiper-slide:hover img {
  filter: grayscale(0%) opacity(1);
}/* End custom CSS */
/* Start custom CSS *//*───────────────────── Responsive ─────────────────────*/
    @media (max-width:1024px) {
      #services-grid { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width:768px) {
      #services-grid { grid-template-columns: 1fr; }
      #cta-banner { flex-direction: column; text-align: center; }
      #cta-banner .btn { margin-top: 16px; }
    }/* End custom CSS */