* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --orange: #ff6b35;
      --orange-dark: #e95825;
      --yellow: #ffd23f;
      --blue: #2563eb;
      --cyan: #0891b2;
      --purple: #7c3aed;
      --green: #059669;
      --dark: #10101a;
      --dark-2: #191927;
      --text: #171724;
      --muted: #62627a;
      --light: #f7f7fb;
      --border: #e8e8f0;
      --white: #ffffff;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      background: #fff;
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    a {
      color: inherit;
    }

    img {
      max-width: 100%;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    /* ---------------- HEADER ---------------- */

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      padding: 14px 0;
    }

    .header-inner {
      width: min(1180px, calc(100% - 30px));
      margin: auto;
    }

    .nav {
      min-height: 64px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      background: rgba(16, 16, 26, 0.92);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 18px;

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      font-weight: 800;
      white-space: nowrap;
    }

    .logo-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      font-size: 18px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 25px;
    }

    .nav-links a {
      color: rgba(255,255,255,.75);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
    }

    .nav-links a:hover {
      color: #fff;
    }

    .nav-call {
      color: #fff;
      text-decoration: none;
      background: linear-gradient(135deg, var(--orange), #ff8a00);
      padding: 10px 17px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .menu-button {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      color: #fff;
      cursor: pointer;
      display: none;
    }

    /* ---------------- MOBILE MENU ---------------- */

    .mobile-menu {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 200;
      display: none;
    }

    .mobile-menu.active {
      display: block;
    }

    .mobile-panel {
      width: min(320px, 88%);
      height: 100%;
      padding: 25px;
      background: var(--dark);
      color: #fff;
    }

    .mobile-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .mobile-close {
      border: 0;
      background: rgba(255,255,255,.1);
      color: #fff;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      cursor: pointer;
    }

    .mobile-links {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 25px;
    }

    .mobile-links a {
      padding: 13px;
      color: rgba(255,255,255,.78);
      text-decoration: none;
      border-radius: 10px;
    }

    .mobile-links a:hover {
      background: rgba(255,255,255,.08);
      color: #fff;
    }

    .mobile-call {
      display: block;
      margin-top: 25px;
      padding: 14px;
      text-align: center;
      background: var(--orange);
      color: #fff;
      text-decoration: none;
      border-radius: 12px;
      font-weight: 700;
    }

    /* ---------------- HERO ---------------- */

    .hero {
      min-height: 760px;
      padding: 150px 20px 90px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;

      background:
        radial-gradient(circle at 10% 10%, rgba(255,107,53,.23), transparent 32%),
        radial-gradient(circle at 90% 80%, rgba(124,58,237,.25), transparent 34%),
        linear-gradient(135deg, #10101a, #19052f 52%, #091827);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .35;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 55px 55px;
      pointer-events: none;
    }

    .hero-content {
      width: min(900px, 100%);
      margin: auto;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .eyebrow {
      display: inline-block;
      padding: 7px 14px;
      border: 1px solid rgba(255,107,53,.35);
      border-radius: 999px;
      color: #ff9a75;
      background: rgba(255,107,53,.1);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .hero h1 {
      color: #fff;
      font-size: clamp(38px, 7vw, 76px);
      line-height: 1.04;
      letter-spacing: -2px;
      font-weight: 800;
      margin-bottom: 22px;
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      max-width: 700px;
      margin: auto;
      color: rgba(255,255,255,.68);
      font-size: 17px;
      line-height: 1.8;
    }

    .hero-actions {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 21px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 750;
      font-size: 15px;
    }

    .button-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--orange), #ff9200);
    }

    .button-secondary {
      color: #fff;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.07);
    }

    .hero-note {
      margin-top: 28px;
      color: rgba(255,255,255,.46);
      font-size: 13px;
    }

    /* ---------------- SECTIONS ---------------- */

    section {
      scroll-margin-top: 100px;
    }

    .section {
      padding: 90px 20px;
    }

    .container {
      width: min(1180px, 100%);
      margin: auto;
    }

    .section-heading {
      max-width: 680px;
      margin-bottom: 45px;
    }

    .section-label {
      display: inline-block;
      margin-bottom: 10px;
      color: var(--orange-dark);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .section-heading h2 {
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.12;
      letter-spacing: -1px;
      margin-bottom: 15px;
    }

    .section-heading p {
      color: var(--muted);
      font-size: 16px;
    }

    /* ---------------- SERVICES ---------------- */

    .services {
      background: linear-gradient(180deg, #fff, #faf9ff);
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .service-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 25px;
      transition: .25s ease;
    }

    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 45px rgba(20,20,40,.08);
    }

    .service-icon {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      margin-bottom: 20px;
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      font-size: 20px;
    }

    .service-card:nth-child(2) .service-icon {
      background: linear-gradient(135deg, var(--purple), #a855f7);
    }

    .service-card:nth-child(3) .service-icon {
      background: linear-gradient(135deg, var(--blue), var(--cyan));
    }

    .service-card:nth-child(4) .service-icon {
      background: linear-gradient(135deg, var(--green), #34d399);
    }

    .service-card:nth-child(5) .service-icon {
      background: linear-gradient(135deg, var(--pink), #f43f5e);
    }

    .service-card:nth-child(6) .service-icon {
      background: linear-gradient(135deg, #d97706, var(--yellow));
    }

    .service-card h3 {
      font-size: 19px;
      margin-bottom: 9px;
    }

    .service-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
    }

    /* ---------------- ABOUT ---------------- */

    .about {
      background: #fff;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .about-image {
      min-height: 450px;
      border-radius: 24px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,107,53,.2), rgba(124,58,237,.15)),
        #f3f1fa;
    }

    .about-image img {
      width: 100%;
      height: 100%;
      min-height: 450px;
      object-fit: cover;
      display: block;
    }

    .about-copy h2 {
      font-size: clamp(30px, 4vw, 44px);
      line-height: 1.12;
      margin-bottom: 20px;
    }

    .about-copy > p {
      color: var(--muted);
      margin-bottom: 14px;
      font-size: 15px;
    }

    .feature-list {
      margin-top: 25px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .feature {
      padding: 15px;
      background: var(--light);
      border: 1px solid var(--border);
      border-radius: 13px;
      font-size: 14px;
      font-weight: 650;
    }

    /* ---------------- SERVICE AREA ---------------- */

    .service-area {
      background: #f8f7fc;
    }

    .area-box {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 25px;
    }

    .area-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px;
    }

    .area-card h3 {
      margin-bottom: 12px;
      font-size: 20px;
    }

    .area-card p,
    .area-card li {
      color: var(--muted);
      font-size: 14px;
    }

    .area-card ul {
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .area-card li::before {
      content: "•";
      color: var(--orange);
      font-weight: 900;
      margin-right: 8px;
    }

    /* ---------------- CONTACT ---------------- */

    .contact {
      background: #fff;
    }

    .contact-box {
      border-radius: 25px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 20px 65px rgba(40,30,70,.08);
    }

    .contact-head {
      padding: 50px 30px;
      text-align: center;
      color: #fff;
      background:
        radial-gradient(circle at 10% 20%, rgba(255,107,53,.2), transparent 30%),
        linear-gradient(135deg, #10101a, #1b0532);
    }

    .contact-head h2 {
      font-size: clamp(28px, 4vw, 42px);
      margin-bottom: 12px;
    }

    .contact-head p {
      max-width: 650px;
      margin: auto;
      color: rgba(255,255,255,.62);
      font-size: 15px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      padding: 30px;
    }

    .contact-card {
      padding: 25px;
      border: 1px solid var(--border);
      border-radius: 17px;
    }

    .contact-card h3 {
      margin-bottom: 7px;
      font-size: 18px;
    }

    .contact-card p,
    .contact-card a {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      text-decoration: none;
    }

    .contact-card a:hover {
      color: var(--orange-dark);
    }

    .contact-action {
      text-align: center;
      padding: 0 30px 30px;
    }

    /* ---------------- DISCLOSURE ---------------- */

    .disclosure {
      margin-top: 18px;
      padding: 18px;
      border-left: 4px solid var(--orange);
      background: #fff8f4;
      border-radius: 0 10px 10px 0;
      color: #5f5f70;
      font-size: 13px;
      line-height: 1.7;
    }

    /* ---------------- FOOTER ---------------- */

    footer {
      background: #10101a;
      color: #fff;
      padding: 65px 20px 20px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 45px;
      padding-bottom: 45px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 17px;
      font-size: 18px;
      font-weight: 800;
    }

    .footer p,
    .footer li,
    .footer a {
      color: rgba(255,255,255,.55);
      font-size: 14px;
    }

    footer h3 {
      margin-bottom: 15px;
      font-size: 15px;
    }

    .footer-links {
      list-style: none;
      display: grid;
      gap: 9px;
    }

    .footer-links a {
      text-decoration: none;
    }

    .footer-links a:hover {
      color: var(--orange);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.09);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap;
    }

    /* ---------------- RESPONSIVE ---------------- */

    @media (max-width: 900px) {
      .nav-links,
      .nav-call {
        display: none;
      }

      .menu-button {
        display: block;
      }

      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .about-grid,
      .area-box {
        grid-template-columns: 1fr;
      }

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

    @media (max-width: 620px) {
      .hero {
        min-height: 700px;
        padding-top: 130px;
      }

      .hero h1 {
        letter-spacing: -1px;
      }

      .services-grid,
      .contact-grid,
      .feature-list,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 65px 18px;
      }

      .about-image,
      .about-image img {
        min-height: 300px;
      }

      .contact-grid {
        padding: 18px;
      }

      .contact-head {
        padding: 40px 22px;
      }

      .contact-action {
        padding: 0 18px 18px;
      }
    }


    #callme {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 70px;
  height: 70px;
  cursor: pointer;
  z-index: 99990;
}
#callme #callmeMain {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  border-radius: 50% !important;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: rgb(207,8,8);
  width: 70px;
  height: 70px;
  -webkit-animation: zcwmini2 1.5s 0s ease-out infinite;
  -moz-animation: zcwmini2 1.5s 0s ease-out infinite;
  animation: zcwmini2 1.5s 0s ease-out infinite;
}
#callme #callmeMain:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("https://res.cloudinary.com/dglv3fims/image/upload/v1668592876/cal_swjmmc.png");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-animation: zcwphone2 1.5s linear infinite;
  -moz-animation: zcwphone2 1.5s linear infinite;
  animation: zcwphone2 1.5s linear infinite;
}
@-webkit-keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-moz-keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-webkit-keyframes zcwphone2 {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-moz-keyframes zcwphone2 {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes zcwphone2 {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-webkit-keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@-moz-keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@-webkit-keyframes zcwmini2 {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@-moz-keyframes zcwmini2 {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@keyframes zcwmini2 {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}

#social_side_links {
  position: fixed;
bottom: 73px;
  left: -21px;
padding:0px;
list-style: none;
z-index: 99;
}

#social_side_links li a {display: block;}

#social_side_links li a img {
  display: block;
  max-width:100%;
padding:7px;
-webkit-transition:  background .2s ease-in-out;
-moz-transition:  background .2s ease-in-out;
-o-transition:  background .2s ease-in-out;
transition:  background .2s ease-in-out;
}

#social_side_links li a:hover img {background: rgba(0, 0, 0, .2);}


/* ===== SERVICE CARD IMAGES ===== */
.card-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f5f5f5;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}

.service-card:hover .card-img-wrap img {
  transform: scale(1.04);
}

/* Keep images the same height on smaller screens */
@media (max-width: 600px) {
  .card-img-wrap {
    height: 210px;
  }
}