/* ==================================================
   MIKRODTECH SERVICES.CSS
   Updated to match homepage hero background style
   + Improved readability & typography system
================================================== */

html,
body{
  background:#ffffff !important;
  padding-top: 30px;
}


@media (max-width:420px){

  body{
    padding-top: 0;
  }

}
/* ==========================================
   SERVICES GRID
========================================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  padding:5rem 1rem;
}


/* ==========================================
   SERVICE CARDS
========================================== */
.service-card{
  background:#fff;
  border-radius:18px;
  padding:2rem;
  text-decoration:none;
  color:#111;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  border:1px solid rgba(0,114,206,.08);
  transition:all .28s ease;
  position:relative;
  overflow:hidden;
}


.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.10);
}

.service-card h2{
  font-size:1.5rem;
  color:#0072ce;
  margin-bottom:.8rem;
  font-weight:500;
}

.service-card p{
  font-size:1.3rem;
  color:#444;
  line-height:1.75;
}


/* ==========================================
   CTA SECTION
========================================== */
.services-cta,
.explore-services{
  background:#000;
  color:#fff;
  text-align:center;
  padding:5rem 1rem;
  margin-top:2rem;
}

.services-cta h2,
.explore-services h2{
  font-size:1.7rem;
  font-weight: 400;
  margin-bottom:1rem;
  line-height:1.3;
}

.services-cta p,
.explore-services p{
  font-size:1.3rem;
  opacity:.92;
  margin-bottom:2rem;
  line-height:1.8;
}


/* ==========================================
   BUTTONS
========================================== */
.services-cta .btn-primary,
.explore-services .btn-secondary,
.service-content .btn-primary{
  display:inline-block;
  background: #0072ce;
  color:#fff;
  text-decoration:none;
  padding:1rem 2.2rem;
  border-radius:10px;
  font-weight:500;
  transition:.25s ease;
  font-size:1.3rem;
}

.services-cta .btn-primary:hover,
.explore-services .btn-secondary:hover,
.service-content .btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(0,114,206,.25);
}


/* ==========================================
   ACTIVE NAV ITEM
========================================== */
.nav-list a.active{
  color:#0072ce;
  font-weight:700;
}



/* ==========================================
   FEATURE GRID
========================================== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-top:2rem;
}

.feature-card{
  background:#fff;
  border-radius:16px;
  padding:1.6rem;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  border:1px solid rgba(0,114,206,.07);
}

.feature-card h3{
  color:#0072ce;
  margin-bottom:.6rem;
  font-size:1.3rem;
}

.feature-card p{
  margin:0;
  font-size:1.3rem;
  line-height:1.7;
}


/* ==========================================
   MOBILE
========================================== */
@media(max-width:900px){

  .services-grid{
    grid-template-columns:1fr;
  }

  .services-hero,
  .service-page-hero{
    padding:100px 20px 90px;
  }

  .services-hero h1,
  .service-page-hero h1{
    font-size:2.4rem;
  }

}


@media(max-width:600px){

  .services-hero,
  .service-page-hero{
    padding:110px 20px 80px;
  }

  .services-hero h1,
  .service-page-hero h1{
    font-size:2rem;
  }

  .services-hero p,
  .service-page-hero p{
    font-size:1.05rem;
  }

  .service-card{
    padding:1rem;
  }

  .services-cta h2,
  .explore-services h2{
    font-size:1.7rem;
  }

}

/* ==================================================
   MIKRODTECH SERVICES.CSS (CLEAN VERSION)
================================================== */


/* =========================
   SERVICES HERO (MODERN SYSTEM)
========================= */
.services-hero,
.service-page-hero{
  background: linear-gradient(
    180deg,
    rgba(0,114,206,0.08) 0%,
    rgba(0,114,206,0.03) 100%
  );
  text-align:center;

  /* 👇 THIS CONTROLS TOP SPACE */
  padding: 100px 20px 120px;

  position:relative;
}


.services-hero > *,
.service-page-hero > *{
  position:relative;
  z-index:1;
}

/* Heading */
.services-hero h1,
.service-page-hero h1{
  font-size:3rem;
  font-weight:590;
  line-height:1.15;
  margin-bottom:16px;
  color:var(--primary);
}

/* Description */
.services-hero p,
.service-page-hero p{
  max-width:760px;
  margin:auto;
  font-size:1.2rem;
  line-height:1.7;
  color:#374151;
}

/* =========================
   SERVICES GRID
========================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  padding:5rem 1rem;
}

/* =========================
   SERVICE CARDS
========================= */
.service-card{
  background:#fff;
  border-radius:18px;
  padding:2rem;
  text-decoration:none;
  color:#111;
  border:1px solid rgba(0,114,206,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  transition:.28s ease;
  position:relative;
  overflow:hidden;
}


.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.10);
}

.service-card h2{
  font-size:1.5rem;
  color:#0072ce;
  margin-bottom:.8rem;
}

.service-card p{
  font-size:1.3rem;
  color:#444;
  line-height:1.75;
}

/* =========================
   SERVICE CONTENT
========================= */
.service-content{
  max-width:1100px;
  margin:auto;
  padding:5rem 1rem;
}

.service-content h2{
  color:#0072ce;
  font-size:1.5rem;
  margin:2rem 0 1rem;
  font-weight: 450;
}

.service-content p{
  font-size:1.3rem;
  color:#333;
  line-height:1.85;
}

/* FIXED LIST CONSISTENCY */
.service-content ul{
  padding-left:1.2rem;
}

.service-content li{
  margin-bottom:.8rem;
  font-size:1.3rem;
  color:#444;
}

/* =========================
   CTA SECTIONS
========================= */
.services-cta,
.explore-services{
  background:#0f172a;
  color:#fff;
  text-align:center;
  padding:5rem 1rem;
  margin-top:2rem;
}

.services-cta h2,
.explore-services h2{
  font-size:1.7rem;
  font-weight:400;
  margin-bottom:1rem;
}

.services-cta p,
.explore-services p{
  font-size:1.3rem;
  opacity:.92;
  margin-bottom:2rem;
  line-height:1.8;
}

/* =========================
   BUTTONS (UNIFIED)
========================= */
.btn-primary,
.btn-secondary{
  display:inline-block;
  padding:1rem 2.2rem;
  border-radius:10px;
  font-size:1.3rem;
  font-weight:400;
  text-decoration:none;
  transition:.25s ease;
}

.btn-primary{
  background:linear-gradient(135deg,#0072ce,#004aad);
  color:#fff;
}

.btn-secondary{
  background:linear-gradient(135deg,#0072ce,#004aad);
  color:#fff;
}

.btn-primary:hover,
.btn-secondary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(0,114,206,.25);
}

/* =========================
   FEATURE GRID
========================= */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-top:2rem;
}

.feature-card{
  background:#fff;
  padding:1.6rem;
  border-radius:16px;
  border:1px solid rgba(0,114,206,.07);
  box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.feature-card h3{
  color:#0072ce;
  font-size:1.3rem;
  margin-bottom:.6rem;
}

.feature-card p{
  font-size:1.3rem;
  line-height:1.7;
}


/* =========================
   MOBILE FIXES
========================= */
@media(max-width:900px){
  .services-grid{
    grid-template-columns:1fr;
  }

  .services-hero,
  .service-page-hero{
    padding:90px 20px 70px;
  }

  .services-hero h1,
  .service-page-hero h1{
    font-size:2.4rem;
  }
}

@media(max-width:600px){
  .services-hero p,
  .service-page-hero p{
    font-size:1.05rem;
  }

  .service-card{
    padding:1.4rem;
  }
}

/* ==================================================
   FORCE MOBILE RESPONSIVENESS FIX (MICRODTECH)
   Add at END of services.css
================================================== */

/* ================= GLOBAL SAFETY ================= */
img, video {
  max-width: 100%;
  height: auto;
}

.container {
  width: 92%;
  max-width: 1200px;
  margin: auto;

}
 
/* Prevent horizontal scroll issues */
html, body {
  overflow-x: hidden;
}

/* ================= HERO MOBILE FIX ================= */
@media (max-width: 768px) {

  .service-hero {
    padding: 70px 15px;
    text-align: center;
  }

  .service-hero h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .service-hero p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ================= CONTENT MOBILE FIX ================= */
@media (max-width: 768px) {

  .service-content {
    padding: 50px 15px;
  }

  .service-content h2 {
    font-size: 1.4rem;
  }

  .service-content p,
  .service-content li {
    font-size: 1rem;
    line-height: 1.7;
  }

  .service-content ul {
    padding-left: 18px;
  }

  .service-content ul li {
    margin-bottom: 10px;
  }
}

/* ================= BUTTON FIX ================= */
@media (max-width: 600px) {

  .btn,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ================= CHATBOT FIX ================= */
@media (max-width: 600px) {

  .chatbot-box {
    width: 92%;
    right: 4%;
    left: 4%;
    bottom: 80px;
  }

  .chatbot-btn {
    width: 55px;
    height: 55px;
    font-size: 1.2rem;
  }
}


/* ==================================================
   EXPLORE SERVICES MOBILE FIX (MICRODTECH)
================================================== */

@media (max-width: 768px) {

  .explore-services {
    padding: 60px 15px;
    text-align: center;
  }

  .explore-services h2 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .explore-services p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .explore-services .btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
  }
}



/* ==================================================
   SERVICES HOME PAGE MOBILE FIX (MIKRODTECH)
================================================== */

/* ================= GLOBAL SAFETY ================= */
html, body {
  overflow-x: hidden;
}



/* ================= HERO ================= */
@media (max-width: 768px) {

  .services-hero {
    padding: 70px 15px;
    text-align: center;
  }

  .services-hero h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .services-hero p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ================= SERVICES GRID ================= */
@media (max-width: 768px) {

  .services-grid {
    display: grid;
    grid-template-columns: 1fr; /* force stack */
    gap: 16px;
    padding: 40px 15px;
  }

  .service-card {
    padding: 20px 18px;
    border-radius: 14px;
  }

  .service-card h2 {
    font-size: 1rem;
  }

  .service-card p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .service-card:active {
    transform: scale(0.98);
  }
}

/* ================= SEO CONTENT ================= */
@media (max-width: 768px) {

  section.container[style] {
    padding: 30px 15px !important;
  }

  section.container h2 {
    font-size: 1.rem;
    line-height: 1.3;
  }

  section.container p {
    font-size: 1rem;
    line-height: 1.7;
  }
}





/* ================= CTA ================= */
@media (max-width: 768px) {

  .services-cta {
    padding: 60px 15px;
    text-align: center;
  }

  .services-cta h2 {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .services-cta .btn-primary {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: auto;
  }
}


/* ==================================================
   GLOBAL MOBILE FIX PATCH
   Fixes all service pages + sections responsiveness
================================================== */

/* Prevent horizontal scrolling issues */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ================= CONTAINER FIX ================= */
.container {
  width: 92%;
  max-width: 1320px;
  margin: auto;
}

@media (max-width: 768px) {
  .container {
    width: 94%;
  }
}

/* ================= HERO TEXT FIX ================= */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.6rem !important;
  }

  p {
    font-size: 1rem !important;
  }
}

/* ================= GRID FIX (CRITICAL) ================= */
@media (max-width: 768px) {

  .service-grid,
  .why-grid,
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

}

/* ================= SERVICES CARDS FIX ================= */
@media (max-width: 768px) {
  .service-card {
    width: 100%;
    min-height: auto !important;
    padding: 20px;
  }
}

/* ================= WHY US CARDS ================= */
@media (max-width: 768px) {
  .why-card {
    padding: 20px;
    text-align: center;
  }
}

/* ================= CTA SECTIONS FIX ================= */
@media (max-width: 768px) {

  .services-cta,
  .explore-services,
  .contact-cta,
  .trust-strip {
    padding: 40px 15px;
    text-align: center;
  }

  .services-cta h2,
  .explore-services h2,
  .contact-cta h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .services-cta p,
  .explore-services p,
  .contact-cta p {
    font-size: 1rem;
  }
}

/* ================= BUTTON FIX ================= */
@media (max-width: 768px) {

  .btn-primary,
  .btn-secondary,
  .btn {
    width: 100%;
    max-width: 320px;
    display: block;
    text-align: center;
    margin: 10px auto;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ================= HERO FIX ================= */
@media (max-width: 768px) {
  .hero,
  .services-hero,
  .service-page-hero {
    padding: 70px 15px !important;
  }
}

/* ================= TRUST STRIP ================= */
@media (max-width: 768px) {
  .trust-strip p {
    font-size: 1rem;
    padding: 0 10px;
  }
}


/* ================= CHAT BUTTON FIX ================= */
@media (max-width: 768px) {
  .chatbot-btn {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    right: 16px;
    bottom: 16px;
  }
}
/* ==================================================
   SERVICE DETAIL PAGES MOBILE FIX
   (Cloud, Cybersecurity, DevOps pages)
================================================== */

/* Prevent horizontal overflow */
body {
  overflow-x: hidden;
}

/* ================= HERO FIX ================= */
@media (max-width: 768px) {

  .service-hero {
    width: 100%;
    padding: 70px 16px !important;
    text-align: center;
  }



  .service-hero p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ================= CONTENT SECTION FIX ================= */
@media (max-width: 768px) {

  .service-content {
    padding: 40px 16px !important;
  }

  .service-content h2 {
    font-size: 1rem;
    margin-top: 20px;
  }

  .service-content p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .service-content ul {
    padding-left: 18px;
  }

  .service-content ul li {
    font-size: 1rem;
    margin-bottom: 10px;
    line-height: 1.6;
  }
}

/* ================= EXPLORE SERVICES FIX ================= */
@media (max-width: 768px) {

  .explore-services {
    padding: 45px 16px;
    text-align: center;
  }

  .explore-services h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .explore-services p {
    font-size: 1rem;
    margin-bottom: 20px;
  }
}

/* ================= BUTTON FIX ================= */
@media (max-width: 768px) {

  .service-content .btn,
  .service-content .btn-primary,
  .explore-services .btn,
  .explore-services .btn-secondary {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 12px auto;
    text-align: center;
  }
}

/* ================= GLOBAL TYPOGRAPHY ================= */
@media (max-width: 768px) {

  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  p, li {
    font-size: 1rem !important;
  }
}

/* ================= SAFE WIDTH FIX ================= */
@media (max-width: 768px) {

  .container {
    width: 94%;
  }

  .service-hero.container,
  .service-content.container {
    width: 94% !important;
  }
}

/* ================= CHAT BUTTON FIX ================= */
@media (max-width: 768px) {

  .chatbot-btn {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    right: 14px;
    bottom: 14px;
  }
}



.services-hero h1,
.service-page-hero h1{
  margin-bottom:18px;
}

/* ==================================================
   PREMIUM MOBILE SERVICE CARDS
   ADD AT VERY END OF CSS
================================================== */

@media screen and (max-width: 768px){

  .services-grid{
    gap:20px;
    padding:35px 16px;
  }

  .service-card{
    position:relative;

    padding:22px 20px;
    border-radius:20px;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.96),
        rgba(255,255,255,1)
      );

    border:1px solid rgba(0,114,206,.10);

    box-shadow:
      0 10px 25px rgba(0,0,0,.05),
      0 4px 10px rgba(0,114,206,.04);

    transition:
      transform .25s ease,
      box-shadow .25s ease;

    overflow:hidden;
  }



  /* SOFT BACKGROUND GLOW */
  .service-card::after{
    content:"";
    position:absolute;
    inset:auto -40px -40px auto;

    width:120px;
    height:120px;

    background:rgba(0,114,206,.05);

    border-radius:50%;

    filter:blur(10px);
  }

  /* TOUCH EFFECT */
  .service-card:active{
    transform:scale(.98);
  }

  .service-card:hover{
    transform:translateY(-4px);

    box-shadow:
      0 18px 40px rgba(0,0,0,.08),
      0 8px 20px rgba(0,114,206,.08);
  }

  /* TITLE */
  .service-card h2{
    font-size:1.25rem !important;
    line-height:1.35;
    margin-bottom:12px;

    color:#0066c2;
    font-weight:400;

    letter-spacing:-0.3px;
  }

  /* DESCRIPTION */
  .service-card p{
    font-size:0.98rem !important;
    line-height:1.75;

    color:#4b5563;

    margin:0;
  }

  /* OPTIONAL ICON STYLE */
  .service-card i,
  .service-card svg{
    font-size:1.8rem;
    margin-bottom:14px;
    color:#0072ce;
  }

}
/* ==========================================
   SERVICE CARD LINK
========================================== */

.card-link{
  margin-top:1.5rem;

  display:inline-flex;
  align-items:center;
  gap:.55rem;

  font-size:1rem;
  font-weight:600;

  color:#0072ce;

  transition:all .25s ease;
}

/* Arrow animation */
.card-link span{
  transition:transform .25s ease;
}

/* Hover effect */
.service-card:hover .card-link{
  color:#004aad;
  letter-spacing:.2px;
}

.service-card:hover .card-link span{
  transform:translateX(6px);
}

/* Mobile optimization */
@media(max-width:768px){

  .card-link{
    margin-top:1.2rem;
    font-size:.95rem;
  }

}

/* ==========================================
   SERVICE CARD BUTTON LINK
========================================== */

.card-link{
  margin-top:1.5rem;

  display:inline-flex;
  align-items:center;
  gap:.55rem;

  padding:.75rem 1.2rem;

  background:rgba(0,114,206,.08);

  border:1px solid rgba(0,114,206,.15);

  border-radius:999px;

  color:#0072ce;

  font-size:.95rem;
  font-weight:600;

  transition:all .28s ease;
}

/* Arrow animation */
.card-link span{
  transition:transform .28s ease;
}

/* Hover effect */
.service-card:hover .card-link{
  background:#0072ce;
  color:#fff;

  box-shadow:
    0 10px 25px rgba(0,114,206,.20);
}

.service-card:hover .card-link span{
  transform:translateX(5px);
}

/* Mobile */
@media(max-width:768px){

  .card-link{
    padding:.7rem 1.1rem;
    font-size:.9rem;
  }

}
/* ==========================================
   MOBILE SIZE REDUCTION
========================================== */

@media(max-width:768px){

  /* SEO section heading */
  section.container h2{
    font-size:1.35rem !important;
    line-height:1.35;
  }

  /* CTA section smaller */
  .services-cta{
    padding:45px 16px !important;
  }

  .services-cta h2{
    font-size:1.4rem !important;
    line-height:1.3;
    margin-bottom:18px;
  }

  /* Smaller CTA button */
  .services-cta .btn-primary{
    max-width:220px;

    padding:.8rem 1.2rem;

    font-size:.95rem;

    margin:auto;
  }

}


/* ==========================================
   SEO SECTION + CTA BUTTON FIX
========================================== */

/* Extra spacing for that heading section */
section.container[style]{
  padding:40px 20px 60px !important; /* added bottom padding */
}

/* Optional: spacing under heading */
section.container[style] h2{
  margin-bottom:20px;
}

/* CTA button theme override */
.services-cta .btn-primary{
  background:#0072ce !important;
  box-shadow:0 10px 25px rgba(0,114,206,.25);
}

/* Button spacing (bottom breathing room) */
.services-cta .btn-primary{
  margin-bottom:10px;
  margin-top: 20px;
}

/* Mobile fine-tune */
@media(max-width:768px){

  section.container[style]{
    padding:30px 16px 70px !important;
  }

  .services-cta .btn-primary{
    margin-bottom:14px;
  }

}
/* ==========================================
   SERVICES HERO TITLE MOBILE SIZE FIX
========================================== */

@media (max-width:768px){

  .services-hero h1,
  .service-page-hero h1{
    font-size:1.3rem !important;
    line-height:1.2;
  }

}

@media (max-width:480px){

  .services-hero h1,
  .service-page-hero h1{
    font-size:1.4rem !important;
    line-height:1.2;
  }

}



/* ==================================================
   PHONE SIZE REDUCTION FIX
   Add at VERY END of services.css
================================================== */

@media screen and (max-width:768px){

 



  /* ================= CONTENT ================= */

  .service-content{
    padding: 30px 5px !important;
  }

  .service-content p,
  .service-content li{
    font-size: 0.8rem !important;
    line-height: 1.65;
  }

  .service-content ul{
    padding-left: 18px;
  }

  /* ================= BUTTONS ================= */

  .btn,
  .btn-primary,
  .btn-secondary{
    font-size: 0.9rem !important;

    padding: .8rem 1rem !important;

    max-width: 230px;

    margin-top: 18px;
  }

  /* ================= EXPLORE SECTION ================= */

  .explore-services{
    padding: 38px 14px !important;
  }

  .explore-services h2{
    font-size: 1rem !important;
    margin-bottom: 8px;
  }

  .explore-services p{
    font-size: 0.8rem !important;
    margin-bottom: 18px;
  }

  /* ================= CHATBOT ================= */

  .chatbot-btn{
    width: 40px;
    height: 40px;
    font-size: 1rem;

    right: 12px;
    bottom: 12px;
  }

  .chatbot-box{
    width: 92%;
    left: 4%;
    right: 4%;
    bottom: 68px;
  }

}

/* ================= EXTRA SMALL PHONES ================= */

@media screen and (max-width:480px){


  .service-hero h1{
    font-size: 1.2rem !important;
  }

  .service-hero p{
    font-size: 0.8rem !important;
  }

  .service-content h2{
    font-size: 0.9rem !important;
  }

  .service-content p,
  .service-content li{
    font-size: 0.8rem !important;
  }

  .explore-services h2{
    font-size: 0.65rem !important;
  }

}

/* Mobile spacing */
@media (max-width:768px){

  .service-hero{
    padding-top:140px !important;
  }

}
/* ==========================================
   SPACE BELOW FIXED HEADER
========================================== */

.service-hero{
  padding-top:50px !important;
}

/* ==========================================
   RESTORE BULLET POINTS
========================================== */

.service-content ul{
  list-style-type: disc;
  padding-left: 25px;
  margin-top: 12px;
}

.service-content ul li{
  display: list-item;
  list-style-position: outside;
  margin-bottom: 10px;
}
.service-content ul li::marker{
  color:#0072ce;
}

/* Smaller / lighter hero title weight */
.service-hero h1{
  font-weight:400;
  color: #0072ce;
  font-size: 2.2rem;
}


/* ==========================================
   MOBILE HEADER SPACING FIX
========================================== */
@media (max-width:768px){

  .services-hero,
  .service-page-hero{
    padding-top:100px !important;
  }
}

.btn-primary{
  margin-top: 30px;
}

/* ==========================================
   SEO CONTENT SECTION
========================================== */

.seo-section{
  padding:40px 20px;
}

.seo-section h2{
  font-size:1.8rem;
  font-weight:450;
  color:#0072ce;
  margin-bottom:20px;
  line-height:1.3;
}

.seo-section p{
  font-size:1.3rem;
  line-height:1.8;
  color:#444;
  margin-bottom:18px;
}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

  .seo-section{
    padding:35px 16px;
  }

  .seo-section h2{
    font-size:1.5rem;
    line-height:1.35;
    margin-bottom:16px;
  }

  .seo-section p{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:16px;
  }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:480px){

  .seo-section{
    padding:30px 14px;
  }

  .seo-section h2{
    font-size:1.3rem;
  }

  .seo-section p{
    font-size:0.9rem;
    line-height:1.65;
  }

}

/* ==========================================
   SERVICES INTRO
========================================== */

.services-intro{
  text-align:center;
  padding:70px 20px 20px;
}

.services-tag{
  display:inline-block;

  background:rgba(0,114,206,.08);
  color:#0072ce;

  padding:.55rem 1rem;
  border-radius:999px;

  font-size:.9rem;
  font-weight:600;

  margin-bottom:18px;
}

.services-intro h2{
  font-size:1.8rem;
  line-height:1.2;
  margin-bottom:18px;

  color:#111;
  font-weight:500;
}

.services-intro p{
  max-width:760px;
  margin:auto;

  font-size:1.3rem;
  line-height:1.8;

  color:#555;
}

/* Mobile */
@media(max-width:768px){

  .services-intro{
    padding:50px 16px 10px;
  }

  .services-intro h2{
    font-size:1.1rem;
  }

  .services-intro p{
    font-size:0.9rem;
  }

}

/* ==================================================
   FINAL MOBILE TYPOGRAPHY SYSTEM
   Mirrors contact.css phone sizing
   ADD AT VERY END OF services.css
================================================== */

/* =========================
TABLETS
========================= */
@media (max-width:768px){

  /* HERO */
  .services-hero,
  .service-page-hero{
    padding:80px 16px 65px !important;
  }

  .services-hero h1,
  .service-page-hero h1{
    font-size:1.5rem !important;
    line-height:1.2;
  }

  .services-hero p,
  .service-page-hero p{
    font-size:1rem !important;
    line-height:1.6;
  }

  /* SERVICES INTRO */
  .services-intro h2{
    font-size:1.4rem !important;
    line-height:1.3;
  }

  .services-intro p{
    font-size:1rem !important;
    line-height:1.6;
  }

  /* SERVICE CARDS */
  .service-card{
    padding:20px !important;
    border-radius:14px;
  }

  .service-card h2{
    font-size:1rem !important;
  }

  .service-card p{
    font-size:1rem !important;
    line-height:1.6;
  }

  .card-link{
    font-size:.95rem !important;
  }

  /* SERVICE CONTENT */
  .service-content{
    padding:55px 16px !important;
  }

  .service-content h2{
    font-size:1.5rem !important;
  }

  .service-content p,
  .service-content li{
    font-size:1rem !important;
    line-height:1.7;
  }

  /* FEATURES */
  .feature-card{
    padding:20px;
    border-radius:14px;
  }

  .feature-card h3{
    font-size:1rem;
  }

  .feature-card p{
    font-size:1rem;
  }

  /* SEO SECTION */
  .seo-section{
    padding:55px 16px !important;
  }

  .seo-section h2{
    font-size:1.5rem !important;
    line-height:1.3;
  }

  .seo-section p{
    font-size:1rem !important;
    line-height:1.7;
  }

  /* CTA */
  .services-cta,
  .explore-services{
    padding:55px 16px !important;
  }

  .services-cta h2,
  .explore-services h2{
    font-size:1.3rem !important;
    line-height:1.3;
  }

  .services-cta p,
  .explore-services p{
    font-size:0.8rem !important;
  }

  /* BUTTONS */
  .btn-primary,
  .btn-secondary{
    font-size:0.65rem !important;
    padding:12px 18px !important;
  }

}

/* =========================
SMALL PHONES
========================= */
@media (max-width:480px){

  body{
    font-size:14px;
  }

  /* HERO */
  .services-hero,
  .service-page-hero{
    padding:100px 14px 55px !important;
  }

  .services-hero h1,
  .service-page-hero h1{
    font-size:1.4rem !important;
    line-height:1.2;
  }

  .services-hero p,
  .service-page-hero p{
    font-size:0.8rem !important;
    line-height:1.5;
  }

  /* INTRO */
  .services-intro h2{
    font-size:1rem !important;
  }

  .services-intro p{
    font-size:0.9rem !important;
  }

  /* CARDS */
  .service-card{
    padding:16px !important;
    border-radius:12px;
  }

  .service-card h2{
    font-size:0.9rem !important;
  }

  .service-card p{
    font-size:0.9rem !important;
    line-height:1.5;
  }

  .card-link{
    font-size:0.65rem !important;
  }

  /* CONTENT */
  .service-content{
    padding:45px 14px !important;
  }

  .service-content h2{
    font-size:1rem !important;
  }

  .service-content p,
  .service-content li{
    font-size:0.8rem !important;
    line-height:1.6;
  }

  /* FEATURES */
  .feature-card{
    padding:16px;
    border-radius:12px;
  }

  .feature-card h3{
    font-size:0.9rem;
  }

  .feature-card p{
    font-size:0.8rem;
  }

  /* SEO */
  .seo-section{
    padding:45px 14px !important;
  }

  .seo-section h2{
    font-size:0.9rem !important;
    font-weight: 450;
    line-height:1.25;
  }

  .seo-section p{
    font-size:0.9rem !important;
    line-height:1.6;
  }

  /* CTA */
  .services-cta,
  .explore-services{
    padding:45px 14px !important;
  }

  .services-cta h2,
  .explore-services h2{
    font-size:0.9rem !important;
    line-height:1.25;
  }

  .services-cta p,
  .explore-services p{
    font-size:0.8rem !important;
  }

  /* BUTTONS */
  .btn-primary,
  .btn-secondary{
    font-size:0.7rem !important;
    padding:12px 16px !important;
    max-width:220px;
  }

}

/* ==================================================
   CYBERSECURITY PAGE MOBILE SPACING FIX
   ADD AT VERY END OF services.css
================================================== */

@media (max-width:768px){

  /* ================= HERO ================= */

  .service-hero{
    padding:95px 18px 55px !important;
    text-align:center;
  }



  .service-hero p{
    max-width:100%;
    margin:auto;
  }

  /* ================= CONTENT ================= */

  .service-content{
    padding:40px 18px 50px !important;
  }

  .service-content h2{
    margin-top:0;
    margin-bottom:14px;

    padding-top:22px;
  }

  /* First heading no extra top spacing */
  .service-content h2:first-child{
    padding-top:0;
  }

  .service-content p{
    margin-bottom:18px;
  }

  /* ================= LISTS ================= */

  .service-content ul{
    padding-left:20px;
    margin-top:10px;
    margin-bottom:10px;
  }

  .service-content li{
    margin-bottom:12px;
    line-height:1.7;
  }

  /* ================= BUTTON ================= */

  .service-content .btn-primary{
    margin-top:28px !important;
    margin-bottom:0;

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    max-width:240px;

    margin-left:auto;
    margin-right:auto;
  }

  /* ================= EXPLORE SECTION ================= */

  .explore-services{
    padding:45px 18px !important;
  }

  .explore-services h2{
    margin-bottom:12px;
  }

  .explore-services p{
    margin-bottom:22px;
  }

}

/* ==================================================
   EXTRA SMALL PHONES
================================================== */

@media (max-width:480px){

  .service-hero{
    padding:85px 14px 50px !important;
  }

  .service-content{
    padding:35px 14px 45px !important;
  }

  .service-content h2{
    padding-top:20px;
    margin-bottom:12px;
  }

  .service-content p{
    margin-bottom:12px;
  }

  .service-content li{
    margin-bottom:10px;
  }

  .explore-services{
    padding:40px 14px !important;
  }

}



/* ==========================================
   FIXED HEADER (ALL DEVICES)
========================================== */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  z-index: 9999;
  background: #000;
  backdrop-filter:blur(10px);

  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}



/* ==========================================
   FINAL HERO TOP SPACING FIX
========================================== */

.services-hero,
.service-page-hero{
  padding: 120px 20px 90px;
}

@media (max-width:768px){

  .services-hero,
  .service-page-hero{
    padding: 65px 16px 55px !important;
  }

}


/* ==========================================
   FINAL PHONE TYPOGRAPHY FIX
   ADD THIS AT THE VERY END
========================================== */

@media screen and (max-width:420px){

  /* Main hero heading */
  .service-hero h1{
    font-size:1rem !important;
    line-height:1.2 !important;
    padding-bottom:8px !important;
  }

  /* Hero paragraph */
  .service-hero p{
    font-size:0.78rem !important;
    line-height:1.55 !important;
  }

  /* Content headings */
  .service-content h2{
    font-size:0.9rem !important;
    line-height:1.3 !important;
  }

  /* Paragraphs + list items */
  .service-content p,
  .service-content li{
    font-size:0.78rem !important;
    line-height:1.6 !important;
  }

  /* Explore section heading */
  .explore-services h2{
    font-size:0.9rem !important;
    line-height:1.3 !important;
  }

  /* Explore section paragraph */
  .explore-services p{
    font-size:0.78rem !important;
    line-height:1.5 !important;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary{
    font-size:0.72rem !important;
    padding:10px 14px !important;
  }

}

/* =========================
FINAL H2 MOBILE SIZE FIX
========================= */

@media (max-width:768px){

  h2{
    font-size:1.1rem !important;
    line-height:1.3 !important;
  }

}

@media (max-width:480px){

  h2{
    font-size:1rem !important;
    line-height:1.25 !important;
  }

}

/* =========================
   MOBILE FIX: SERVICE CARD H2
========================= */

@media (max-width:768px){
  .service-card h2{
    font-size:1rem !important;
    line-height:1.3 !important;
  }
}

@media (max-width:480px){
  .service-card h2{
    font-size:0.95rem !important;
    line-height:1.25 !important;
  }
}

/* =========================
   MOBILE FIX: SEO SECTION H2
========================= */

@media (max-width:768px){
  .seo-section h2{
    font-size:1rem !important;
    line-height:1.3 !important;
  }
}

@media (max-width:480px){
  .seo-section h2{
    font-size:0.95rem !important;
    line-height:1.25 !important;
  }
}

/* =========================
   MOBILE FIX: SERVICES INTRO H2
========================= */

@media (max-width:768px){
  .services-intro h2{
    font-size:1rem !important;
    line-height:1.3 !important;
  }
}

@media (max-width:480px){
  .services-intro h2{
    font-size:0.95rem !important;
    line-height:1.25 !important;
  }
}

/* ==========================================
   420PX SERVICES INTRO FIX
========================================== */

@media screen and (max-width:420px){

  .services-intro{
    padding:40px 14px 18px !important;
  }

  .services-intro h2{
    font-size:0.8rem !important;
    line-height:1.3 !important;

    max-width:260px;
    margin:auto auto 14px;

    font-weight:500 !important;
  }

}

@media screen and (max-width:420px){

  body .services-intro h2{
    font-size:1rem !important;
    line-height:1.3 !important;
    color: #0072ce;
    font-weight: 400;
  }

  body .services-intro p{
    font-size: 0.8rem;
  }
}

/* ==========================================
   420PX SERVICE CARD H2 FIX
========================================== */

@media screen and (max-width:420px){

  body .service-card h2{
    font-size:0.95rem !important;
    line-height:1.25 !important;
  }

}

/* ==========================================
   420PX SEO SECTION H2 FIX
========================================== */

@media screen and (max-width:420px){

  body .seo-section h2{
    font-size:0.95rem !important;
    line-height:1.25 !important;
    font-weight:500 !important;
  }

}

/* ==========================================
   420PX CYBERSECURITY PAGE HEADLINES (FORCE FIX)
========================================== */

@media screen and (max-width:420px){

  /* FORCE ALL TYPOGRAPHY IN THIS PAGE SCOPE */
  body .service-hero h1{
    font-size:1.15rem !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    text-align:center !important;
    
  }

  body .service-content h2{
    font-size:0.95rem !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    margin-top:18px !important;
  }

  body .explore-services h2{
    font-size:0.95rem !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    text-align:center !important;
  }

}

/* ==========================================
   MOBILE HERO → CONTENT GAP FIX (420px)
========================================== */

@media screen and (max-width:420px){

  /* Reduce space under hero section */
  .service-hero{
    padding-bottom:20px !important;
  }

  /* Reduce space above content section */
  .service-content{
    padding-top:20px !important;
  }

  /* Remove default paragraph spacing inside hero */
  .service-hero p{
    margin-bottom:8px !important;
  }

  /* Remove extra spacing above first heading */
  .service-content h2:first-child{
    margin-top:0 !important;
    padding-top:0 !important;
  }

}

@media (max-width: 420px){


 .nav-list a{
    font-size: 0.9rem;
    font-weight: 350;
  }

}

.services-intro h2{
  color: #0072ce;
}