:root {
          --primary-blue: #0b63f6;
          --primary-hover: #0050cc;
          --accent-cyan: #38bdf8;
          --dark-navy: #050b14;
          --card-glass: rgba(18, 26, 36, 0.72);
          --card-border: rgba(255, 255, 255, 0.12);
          --input-bg: rgba(15, 23, 42, 0.58);
          --input-border: rgba(255, 255, 255, 0.16);
          --light-section-bg: #eaf1f9;
          --solutions-bg: #eaf1f7;
      }

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

      body {
          font-family: 'Plus Jakarta Sans', sans-serif;
          background-color: var(--dark-navy);
          color: #1e293b;
          overflow-x: hidden;
      }

      /* ---------------- Navbar Styling ---------------- */
      .navbar {
          background: rgba(5, 11, 20, 0.85);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          z-index: 1000;
          transition: all 0.3s ease;
      }

      .brand-logo {
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          text-decoration: none;
      }

      .brand-logo img {
          width: 334px;
      }

      .brand-name {
          font-size: 1.8rem;
          font-weight: 800;
          letter-spacing: -0.5px;
          color: #ffffff;
      }

      .nav-link {
          font-weight: 500;
          font-size: 0.95rem;
          color: #cbd5e1 !important;
          padding: 0.5rem 1rem !important;
          transition: color 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 5px;
      }

      .nav-link:hover,
      .nav-link.active {
          color: #38bdf8 !important;
      }

      .nav-link .dropdown-arrow {
          font-size: 0.75rem;
          transition: transform 0.2s ease;
      }

      .nav-item.dropdown:hover .dropdown-arrow {
          transform: rotate(180deg);
      }

      .dropdown-menu-dark-custom {
          background: rgba(13, 22, 35, 0.96);
          backdrop-filter: blur(16px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 0.5rem;
          box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
      }

      .dropdown-menu-dark-custom .dropdown-item {
          color: #cbd5e1;
          padding: 0.55rem 1rem;
          border-radius: 8px;
          font-size: 0.9rem;
          transition: all 0.2s ease;
      }

      .dropdown-menu-dark-custom .dropdown-item:hover {
          background: rgba(11, 99, 246, 0.22);
          color: #ffffff;
      }

      .btn-nav-contact {
          background-color: var(--primary-blue);
          color: #ffffff !important;
          font-weight: 600;
          font-size: 0.92rem;
          padding: 0.38rem 0.45rem 0.38rem 1.3rem;
          border-radius: 50px;
          border: none;
          display: inline-flex;
          align-items: center;
          gap: 0.65rem;
          transition: all 0.25s ease;
          box-shadow: 0 4px 14px rgba(11, 99, 246, 0.4);
          text-decoration: none;
      }

      .btn-nav-contact:hover {
          background-color: var(--primary-hover);
          box-shadow: 0 6px 20px rgba(11, 99, 246, 0.6);
          transform: translateY(-1px);
      }

      .icon-badge-round {
          width: 30px;
          height: 30px;
          background: #ffffff;
          color: var(--primary-blue);
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 0.85rem;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      }

      /* ---------------- Section 1: Hero ---------------- */
      .hero-section {
          position: relative;
          min-height: 740px;
          display: flex;
          align-items: center;
          padding: 2.5rem 0 2.5rem;
          background:
              linear-gradient(180deg, rgba(5, 11, 20, 0.68) 0%, rgba(5, 11, 20, 0.76) 65%, rgba(5, 11, 20, 0.98) 100%),
              radial-gradient(circle at 50% 20%, rgba(11, 99, 246, 0.16), transparent 70%),
              url('1.webp') center center / cover no-repeat;
          overflow: visible;
          color: #ffffff;
      }

      .network-canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
      }

      .hero-content {
          position: relative;
          z-index: 2;
      }

      .hero-tag {
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          color: var(--accent-cyan);
          font-size: 0.95rem;
          font-weight: 600;
          margin-bottom: 1.25rem;
          text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
      }

      .hero-title {
          font-size: clamp(2.4rem, 4.4vw, 3.185rem);
          font-weight: 800;
          line-height: 1.14;
          letter-spacing: -1.3px;
          margin-bottom: 1.35rem;
          color: #ffffff;
          text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
      }

      .hero-desc {
          font-size: clamp(0.95rem, 1.25vw, 1.05rem);
          line-height: 1.68;
          color: #cbd5e1;
          max-width: 640px;
          margin-bottom: 2.25rem;
          text-align: justify;
      }

      .hero-actions {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 1.75rem;
      }

      .btn-get-started {
          background-color: var(--primary-blue);
          color: #ffffff !important;
          font-size: 1.05rem;
          font-weight: 700;
          padding: 0.5rem 0.55rem 0.5rem 1.75rem;
          border-radius: 50px;
          border: none;
          display: inline-flex;
          align-items: center;
          gap: 0.9rem;
          box-shadow: 0 8px 24px rgba(11, 99, 246, 0.4);
          transition: all 0.25s ease;
          text-decoration: none;
      }

      .btn-get-started:hover {
          background-color: var(--primary-hover);
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(11, 99, 246, 0.55);
      }

      .btn-get-started .hero-arrow-badge {
          width: 36px;
          height: 36px;
          background: #ffffff;
          color: var(--primary-blue);
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 1rem;
      }

      .call-us-link {
          display: inline-flex;
          align-items: center;
          gap: 0.85rem;
          text-decoration: none;
          color: #ffffff;
          transition: transform 0.2s ease;
      }

      .call-us-link:hover {
          transform: translateY(-1px);
      }

      .call-btn-circle {
          width: 48px;
          height: 48px;
          background: var(--primary-blue);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          font-size: 1.2rem;
          box-shadow: 0 4px 16px rgba(11, 99, 246, 0.45);
          transition: background-color 0.2s ease;
      }

      .call-us-link:hover .call-btn-circle {
          background-color: var(--primary-hover);
      }

      .call-label {
          font-size: 0.78rem;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          font-weight: 600;
          color: #94a3b8;
          line-height: 1.2;
      }

      .call-phone {
          font-size: 1.05rem;
          font-weight: 700;
          color: #ffffff;
          line-height: 1.2;
      }

      .glass-form-card {
          background: var(--card-glass);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid var(--card-border);
          border-radius: 24px;
          padding: 2.25rem 2rem;
          box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15);
          position: relative;
          z-index: 10;
      }

      .form-card-title {
          font-size: 1.55rem;
          font-weight: 700;
          text-align: center;
          color: #ffffff;
          margin-bottom: 0.6rem;
          letter-spacing: -0.3px;
      }

      .form-card-subtitle {
          font-size: 0.88rem;
          color: #cbd5e1;
          text-align: center;
          margin-bottom: 1.75rem;
          line-height: 1.5;
      }

      .custom-pill-input {
          background-color: var(--input-bg);
          border: 1px solid var(--input-border);
          border-radius: 50px;
          color: #ffffff;
          font-size: 0.88rem;
          padding: 0.75rem 1.25rem;
          transition: all 0.2s ease;
      }

      .custom-pill-input::placeholder {
          color: #94a3b8;
      }

      .custom-pill-input:focus {
          background-color: rgba(15, 23, 42, 0.88);
          border-color: var(--accent-cyan);
          box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
          color: #ffffff;
          outline: none;
      }

      .btn-submit-check {
          background-color: var(--primary-blue);
          color: #ffffff;
          border: none;
          border-radius: 50px;
          font-weight: 700;
          font-size: 1rem;
          padding: 0.82rem 1.5rem;
          width: 100%;
          transition: all 0.25s ease;
          box-shadow: 0 6px 20px rgba(11, 99, 246, 0.4);
      }

      .btn-submit-check:hover {
          background-color: var(--primary-hover);
          box-shadow: 0 8px 26px rgba(11, 99, 246, 0.55);
          transform: translateY(-1px);
      }

      .fiber-cables-corner {
          position: absolute;
          right: -25px;
          bottom: -65px;
          width: 220px;
          height: 220px;
          z-index: 12;
          pointer-events: none;
          filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
      }

      /* ---------------- Section 2: Intermediate Features ---------------- */
      .features-section {
          background-color: var(--light-section-bg);
          position: relative;
          padding: 4.5rem 0 5.5rem;
          z-index: 5;
          overflow: hidden;
      }

      .floating-router {
          position: absolute;
          top: -65px;
          left: 17%;
          width: 170px;
          z-index: 15;
          filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.4));
          transition: transform 0.3s ease;
      }

      .floating-router:hover {
          transform: translateY(-4px);
      }

      .character-wrap {
          position: relative;
          text-align: center;
          margin-top: -95px;
      }

      .character-img {
          max-width: 100%;
          height: auto;
          filter: drop-shadow(0 18px 24px rgba(30, 41, 59, 0.25));
      }

      .feature-card {
          background: #ffffff;
          border-radius: 20px;
          padding: 2.75rem 1.65rem 1.75rem;
          position: relative;
          box-shadow: 0 10px 30px rgba(0, 40, 100, 0.06);
          border: 1px solid rgba(226, 232, 240, 0.8);
          height: 100%;
          transition: transform 0.25s ease, box-shadow 0.25s ease;
      }

      .feature-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 16px 36px rgba(11, 99, 246, 0.12);
      }

      .card-badge-icon {
          position: absolute;
          top: -24px;
          left: 24px;
          width: 48px;
          height: 48px;
          background-color: var(--primary-blue);
          color: #ffffff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.35rem;
          box-shadow: 0 6px 16px rgba(11, 99, 246, 0.35);
          transition: transform 0.25s ease;
      }

      .feature-card:hover .card-badge-icon {
          transform: scale(1.08);
      }

      .feature-title {
          color: #0f172a;
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 0.65rem;
          letter-spacing: -0.2px;
      }

      .feature-text {
          color: #64748b;
          font-size: 0.92rem;
          line-height: 1.6;
          margin-bottom: 0;
      }

      /* ---------------- Section 3: High-Speed Solutions ---------------- */
      .solutions-section {
          background-color: var(--solutions-bg);
          padding: 2rem 0 2rem;
          position: relative;
      }

      .section-pill-tag {
          display: inline-flex;
          align-items: center;
          gap: 0.45rem;
          color: var(--primary-blue);
          font-size: 0.92rem;
          font-weight: 700;
          letter-spacing: 0.2px;
          margin-bottom: 0.8rem;
      }

      .section-heading-title {
          font-size: clamp(2rem, 3.2vw, 2.75rem);
          font-weight: 800;
          color: #111827;
          letter-spacing: -0.8px;
          line-height: 1.2;
      }

      .solutions-header-desc {
          color: #475569;
          font-size: 0.98rem;
          line-height: 1.65;
          max-width: 490px;
          margin-bottom: 1.25rem;
      }

      .btn-explore-services {
          background-color: var(--primary-blue);
          color: #ffffff !important;
          font-size: 0.95rem;
          font-weight: 700;
          padding: 0.48rem 0.5rem 0.48rem 1.45rem;
          border-radius: 50px;
          border: none;
          display: inline-flex;
          align-items: center;
          gap: 0.85rem;
          box-shadow: 0 6px 20px rgba(11, 99, 246, 0.35);
          transition: all 0.25s ease;
          text-decoration: none;
      }

      .btn-explore-services:hover {
          background-color: var(--primary-hover);
          box-shadow: 0 8px 24px rgba(11, 99, 246, 0.5);
          transform: translateY(-2px);
      }

      .btn-explore-services .arrow-circle {
          width: 32px;
          height: 32px;
          background: #ffffff;
          color: var(--primary-blue);
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 0.88rem;
      }

      /* Solution Cards */
      .solution-card {
          background: #ffffff;
          border-radius: 24px;
          padding: 3rem 1.8rem 1.8rem;
          position: relative;
          box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
          border: 1px solid rgba(226, 232, 240, 0.9);
          display: flex;
          flex-direction: column;
          height: 100%;
          transition: all 0.3s ease;
      }

      .solution-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 42px rgba(11, 99, 246, 0.12);
      }

      .solution-top-badge {
          position: absolute;
          top: -24px;
          left: 50%;
          transform: translateX(-50%);
          width: 52px;
          height: 52px;
          background: #f0f7ff;
          border: 2px solid #ffffff;
          color: var(--primary-blue);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.45rem;
          box-shadow: 0 6px 16px rgba(11, 99, 246, 0.18);
          transition: transform 0.25s ease;
      }

      .solution-card:hover .solution-top-badge {
          transform: translateX(-50%) scale(1.08);
          background-color: var(--primary-blue);
          color: #ffffff;
      }

      .solution-card-title {
          font-size: 1.35rem;
          font-weight: 700;
          color: #111827;
          text-align: center;
          margin-bottom: 0.65rem;
          letter-spacing: -0.3px;
      }

      .solution-card-subtitle {
          font-size: 0.88rem;
          color: #64748b;
          text-align: center;
          line-height: 1.55;
          margin-bottom: 1.35rem;
      }

      .solution-divider {
          border: none;
          height: 1px;
          background-color: #e2e8f0;
          margin: 0 auto 1.35rem;
          width: 80%;
      }

      .solution-checklist {
          list-style: none;
          padding-left: 0;
          margin-bottom: 1.75rem;
          display: flex;
          flex-direction: column;
          gap: 0.65rem;
          align-items: center;
      }

      .solution-checklist li {
          font-size: 0.88rem;
          font-weight: 500;
          color: #334155;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }

      .solution-checklist .chevron-icon {
          color: var(--primary-blue);
          font-weight: 800;
          font-size: 1.05rem;
          line-height: 1;
      }

      .solution-img-wrapper {
          position: relative;
          margin-top: auto;
          border-radius: 18px;
          overflow: hidden;
          background-color: #f1f5f9;
      }

      .solution-img-wrapper img {
          width: 100%;
          height: 185px;
          object-fit: cover;
          display: block;
          transition: transform 0.4s ease;
      }

      .solution-card:hover .solution-img-wrapper img {
          transform: scale(1.05);
      }

      /* Step number tab cutout over bottom image */
      .solution-step-badge {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          background: #ffffff;
          padding: 0.25rem 1.15rem 0.35rem;
          border-bottom-left-radius: 14px;
          border-bottom-right-radius: 14px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
          font-weight: 800;
          font-size: 1.15rem;
          color: #94a3b8;
          letter-spacing: -0.5px;
          z-index: 2;
      }

      /* ---------------- Toast Notification ---------------- */
      .custom-toast {
          position: fixed;
          bottom: 25px;
          right: 25px;
          background: rgba(15, 23, 42, 0.95);
          border: 1px solid var(--accent-cyan);
          color: #ffffff;
          border-radius: 14px;
          padding: 1rem 1.35rem;
          box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(12px);
          z-index: 9999;
          transform: translateY(140%);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          display: flex;
          align-items: center;
          gap: 0.85rem;
      }

      .custom-toast.show {
          transform: translateY(0);
      }

      /* ---------------- Responsive Adjustments ---------------- */
      @media (max-width: 991.98px) {
          .navbar-collapse {
              background: rgba(10, 16, 26, 0.98);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 16px;
              padding: 1.25rem;
              margin-top: 0.85rem;
          }

          .btn-nav-contact {
              width: 100%;
              justify-content: center;
              margin-top: 0.85rem;
          }

          .hero-section {
              padding: 6.5rem 0 4rem;
              text-align: center;
          }

          .hero-desc {
              margin-left: auto;
              margin-right: auto;
          }

          .hero-actions {
              justify-content: center;
              margin-bottom: 3.5rem;
          }

          .floating-router {
              position: relative;
              top: 0;
              left: 0;
              margin: 0 auto 1.5rem;
              display: block;
          }

          .solutions-header-desc {
              margin-top: 1rem;
          }
      }


      .footer-bottom {
          background-color: #ffffff;
          border-top: 1px solid #eef2f6;
          padding: 22px 0;
          font-family: 'Inter', sans-serif;
          font-size: 14px;
          color: #334155;
      }

      .footer-bottom p {
          margin: 0;
          color: #334155;
      }

      .footer-links {
          display: flex;
          align-items: center;
          gap: 16px;
      }

      .footer-links a {
          color: #1e293b;
          text-decoration: none;
          transition: color 0.2s ease;
          font-weight: 400;
      }

      .footer-links a:hover {
          color: #0d6efd;
      }

      .footer-links .divider {
          width: 1px;
          height: 16px;
          background-color: #0dcaf0;
          /* Accent vertical line */
          display: inline-block;
      }

      /* Mobile alignment */
      @media (max-width: 767.98px) {
          .footer-bottom {
              padding: 16px 0;
          }

          .footer-links {
              margin-top: 10px;
              justify-content: center;
          }
      }


      /* Heading Styling */
      .section-title {
          font-size: 2.25rem;
          font-weight: 800;
          color: #0f172a;
          line-height: 1.25;
          letter-spacing: -0.02em;
          margin-bottom: 28px;
      }

      /* Image Container with Rounded Corners */
      .support-image-card {
          position: relative;
          border-radius: 18px;
          overflow: visible;
          /* Allows the floating card to overlap cleanly */
          margin-bottom: 70px;
          /* Space for the overlapping card */
      }

      .support-image-card img {
          width: 100%;
          height: 380px;
          object-fit: cover;
          border-radius: 18px;
          display: block;
      }

      /* Floating Contact Information Card */
      .contact-overlay-card {


          background: #eef4f9;

          padding: 24px 26px;
          box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.12);
      }

      /* Blue Circular Icon Styling */
      .icon-badge {
          width: 48px;
          height: 48px;
          background-color: #0066ff;
          color: #ffffff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.25rem;
          flex-shrink: 0;
          box-shadow: 0 4px 10px rgba(0, 102, 255, 0.3);
      }

      /* Text & Label Styling */
      .contact-title {
          font-size: 1.05rem;
          font-weight: 700;
          color: #0f172a;
          line-height: 1.3;
          margin-bottom: 2px;
      }

      .contact-subtext {
          font-size: 0.88rem;
          color: #475569;
          margin: 0;
          font-weight: 500;
          word-break: break-all;
      }

      .contact-subtext a {
          color: inherit;
          text-decoration: none;
          transition: color 0.2s ease;
      }

      .contact-subtext a:hover {
          color: #0066ff;
      }

      /* Divider */
      .card-divider {
          border: 0;
          border-top: 1px solid #d8e3ed;
          margin: 16px 0;
      }

      /* Responsive adjustments */
      @media (max-width: 575.98px) {
          .section-title {
              font-size: 1.75rem;
          }

          .support-image-card img {
              height: 290px;
          }

          .contact-overlay-card {
              position: relative;
              bottom: 0;
              right: 0;
              width: 100%;
              margin-top: -40px;
              padding: 20px 18px;
          }

          .support-image-card {
              margin-bottom: 0;
          }

          .icon-badge {
              width: 42px;
              height: 42px;
              font-size: 1.1rem;
          }
      }