/*!
Theme Name: CPL-Tech
Theme URI: 
Author: CPL-Tech
Author URI: 
Description: Our latest digital framework offers a streamlined approach to online presentation. By merging modern utility with a clean aesthetic, we provide a versatile foundation for your media. Every element is refined to ensure a seamless setup, allowing you to focus on building your vision.
Version: 26.08.231924
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cplthm
Tags: Personalized Canvas, Brand Identifier, Navigation Control, Hero Assets, Nested Dialogue, Multilingual Ready.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Credits & Licensing:
Base Framework: Derived from Underscores (https://underscores.me/). Copyright © 2012-2020 Automattic, Inc. Released under GNU GPL v2 or later.
CSS Standards: Normalization provided by Nicolas Gallagher & Jonathan Neal (https://necolas.github.io/normalize.css/).
*/
/* =========================================================
   1. ROOT DESIGN SYSTEM (Your Variables)
========================================================= */
:root {
  /* Backgrounds */
  --bg-main: #0B0F19;
  --bg-section: #0F172A;
  --bg-card: #111827;
  --bg-subcard: #1F2937;
	
  /* Text System */
  --text-primary: #FFFFFF;
  --text-secondary: #E5E7EB;
  --text-muted: #9CA3AF;
	
  /* UI & Interaction */
  --accent: #3B82F6;
  --accent-glow: #3B82F614; /* 135deg gradient start */
  --accent-hover: #2563EB;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: #1F2937;
  --shadow: rgba(0,0,0,0.5);
  --shadow-light: rgba(0,0,0,0.35);
  --card-shadow-hover: rgba(59, 130, 246, 0.15);

  /*
   * Kept for backward compatibility (cards / legacy references).
   * Page-edge spacing for .cplx-c now uses the CPL page-container rail
   * (--cpl-shell-inset / --cpl-page-container-max) — see container system below.
   */
  --c-pad-x: clamp(10px, 1.14vw + 6.4px, 20px);
}
/* =========================================================
   2. SECTION SYSTEM - PADDING (Vertical Only)
========================================================= */
[class*="cplx-s"] {
  position: relative;
  z-index: 1;
  width: 100%;
}

.cplx-s-sm { padding: clamp(2.5rem, 4vw, 3.75rem) 0; } /* SMALL (40px -> 60px) */
.cplx-s { padding: clamp(3.125rem, 5vw, 5rem) 0; } /* DEFAULT/BASE (50px -> 80px) */
.cplx-s-lg { padding: clamp(4.375rem, 6vw, 6.25rem) 0; } /* LARGE (70px -> 100px) */
.cplx-s-xl { padding: clamp(5.625rem, 8vw, 8.75rem) 0; } /* XL (90px -> 140px) */

/* Section Themes */
.cplx-s-alt { background: var(--bg-section); }
.cplx-s-cta { background: rgba(59, 130, 246, 0.04); }

/* =========================================================
   3. CONTAINER SYSTEM (Horizontal Spacing Only)
   CPL-CUSTOM-SECTION-CONTAINER-ALIGNMENT-1F
   .cplx-c follows the authoritative CPL page-container rail
   (breadcrumb-hero.css tokens) instead of 1280px + --c-pad-x.
========================================================= */
[class*="cplx-s"] .cplx-c {
  width: 100%;
  max-width: var(--cpl-page-container-max, 1200px);
  margin: 0 auto;
  padding-left: var(--cpl-shell-inset, var(--cpl-page-inline-start, 0.75rem));
  padding-right: var(--cpl-shell-inset, var(--cpl-page-inline-end, 0.75rem));
  box-sizing: border-box;
}

/* ≥1200: match 1C page rail — centered max, no extra page-edge padding */
@media (min-width: 1200px) {
  [class*="cplx-s"] .cplx-c {
    max-width: min(
      var(--cpl-page-container-max, 1200px),
      calc(100vw - 2 * var(--cpl-desktop-gutter, 30px))
    );
    padding-left: 0;
    padding-right: 0;
  }
}

[class*="cplx-c"] .cplx-c-abt { margin: 0 auto; padding: 20px 0; }

/* =========================================================
   4. CARD COMPONENTS
========================================================= */
/* ===== COMPONENT: CTA CARD (Cinematic/Spotlight) ===== */
[class*="cplx-s"] .cplx-card-cta,
.cplx-c .cplx-card-cta {
  position: relative;
  background: linear-gradient(135deg, #0b0f19 0%, #111827 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(2.5rem, 6vw, 4.5rem) 20px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 10px 30px var(--shadow-light);
  transition: 
    transform 0.35s cubic-bezier(0.2, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.cplx-s-cta::before {
  content: "";
  position: absolute;
  width: 40vw; 
  height: 40vw;
  max-width: 400px;
  max-height: 400px;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.cplx-c .cplx-card-cta:hover {
  transform: translateY(-4px);
  border-color: var(--accent);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    0 0 20px var(--card-shadow-hover);
}

/*  INNER GLOW (SUBTLE)  */
.cplx-c .cplx-card-cta::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(circle at center, var(--accent-glow), transparent 70%);
  opacity: 0;

  transition: opacity 0.4s ease;
  z-index: 0;
}

.cplx-c .cplx-card-cta:hover::before {
  opacity: 1;
}

/*  CONTENT FIX (LAYER ABOVE GLOW)  */
.cplx-c .cplx-card-cta > * {
  position: relative;
  z-index: 1;
}

/* ===== COMPONENT: INTRO CARD (Gradient/Clean) ===== */
.cplx-c .cplx-card-intro {
  position: relative;
  background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 8px 24px 0 var(--shadow);
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cplx-c .cplx-card-intro:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px 0 var(--shadow), 
              0 0 15px 0 var(--card-shadow-hover);
}

/* Optional: Adding a subtle glass-morphism effect */
.cplx-c .cplx-card-intro {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* =========================================================
   5. DECORATIVE SECTIONS OR ELEMENTS
========================================================= */

.cplx-s-ind {
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15), transparent 50%),
    var(--bg-main);
  overflow: hidden;
}

.cplx-s-ind::before {
  content: "";
  position: absolute;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.cplx-s-ind::before {
  width: 500px; height: 500px;
  top: -120px; left: -120px;
  filter: blur(100px);
}

/* =========================================================
   CARDS (Horizontal & Internal Only)
========================================================= */






/* Soulution SVG */
/* ===============================
   BASE SVG STRUCTURE
================================ */
        .security-shield {
            max-width: 520px;
        }

        .security-shield .ring-outer {
            fill: none;
            stroke-width: 6;
        }

        .security-shield .ring-inner {
            fill: none;
            stroke-width: 3;
        }

        .security-shield .shield-border {
            fill: none;
            stroke-width: 10;
        }

        .security-shield .shield-base {
            stroke-width: 4;
        }

        .security-shield .lock-shackle {
            fill: none;
            stroke-width: 12;
            stroke-linecap: round;
        }

        .security-shield .circuit-lines {
            stroke-width: 2;
        }

        .security-shield * {
            transition: all 0.35s ease;
        }

        /* ===============================
   PROFILE : CYBER (YOU MISSED THIS)
================================ */
        .security-shield.profile-cyber {
            --primary: #93c5fd;
            --secondary: #3b82f655;
            --accent: #3B82F6;
            --base: #FFFFFF0D;
            --dark: #1F2937;
        }

        .profile-cyber .ring-outer {
            stroke: var(--primary);
            opacity: 0.9;
        }

        .profile-cyber .ring-inner {
            stroke: var(--primary);
            opacity: 0.6;
        }

        .profile-cyber .tech-dots circle {
            fill: var(--primary);
        }

        .profile-cyber .shield-border {
            stroke: var(--secondary);
        }

        .profile-cyber .shield-base {
            fill: var(--base);
            stroke: var(--secondary);
            opacity: 0.95;
        }

        .profile-cyber .lock-body {
            fill: var(--primary);
        }

        .profile-cyber .lock-shackle {
            stroke: var(--primary);
        }

        .profile-cyber .keyhole {
            fill: var(--dark);
        }

        .profile-cyber .circuit-lines {
            stroke: var(--accent);
            opacity: 0.35;
        }


/* Solution Svg end */
/* ===== BUTTON ALL SECTIONS (FINAL) ==== */
.cpl-cap-btn {
  background: #1D4ED8;
  color: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;

  padding: 12px 22px; /* reduced from 14x26 */
  border-radius: 10px;
  border: none;

  display: inline-flex;
  align-items: center;
  gap: 6px; /* reduced spacing */

  box-shadow: 0 6px 20px rgba(0,0,0,0.25);

  transition: all 0.25s ease;
  text-decoration: none;
}

.cpl-cap-btn:hover {
  background: #2563EB;
  transform: translateY(-2px);
  color: #FFFFFF;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.cpl-cap-btn:active {
  transform: translateY(0);
  background: #1E40AF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.cpl-cap-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.4);
}

/* optional icon animation */
.cpl-cap-btn i {
  transition: transform 0.25s ease;
}

.cpl-cap-btn:hover i {
  transform: translateX(4px);
}

/* Solutions Page Strip*/
.solution-page-strip {
	min-height: 120px !important;
	padding: 25px 5px !important;
	border-bottom: 1px solid rgba(255,255,255,0.12)!important;
}
.solution-page-strip:hover {
	background: rgba(59,130,246,0.03);
	border-left: 2px solid #3B82F6 !important;
	padding-left: 12px;
	background: rgba(59,130,246,0.05);
	transform: translateX(4px) !important;
	transition: all 0.3s ease !important;
}

/* About Us Page Strip*/
.company-page-strip {
	min-height: 120px !important;
	padding: 28px 20px 28px 16px !important; 
	border-bottom: 1px solid rgba(255,255,255,0.12) !important;
	border-left: 2px solid transparent !important; 
	box-shadow: -8px 6px 18px rgba(0, 0, 0, 0.25) !important;
	transition: all 0.3s ease-in-out !important;
}

.company-page-strip:hover {
	background: rgba(59, 130, 246, 0.04) !important;
	border-left: 2px solid #3B82F6 !important;
	transform: translateX(4px) !important;
	box-shadow: -10px 8px 22px rgba(0, 0, 0, 0.5) !important;
}

/* Contact Us Page Strip*/
/* Contact Page Strip - Refined */
.contact-page-strip {
    min-height: 120px !important;
    padding: 28px 20px 28px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-left: 2px solid transparent !important;
    background: rgba(255,255,255,0.01) !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;

    transition: all 0.25s ease-in-out !important;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* Hover State */
.contact-page-strip:hover {
    background: rgba(59, 130, 246, 0.04) !important;
    border-left: 2px solid #3B82F6 !important;
    transform: translateX(2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30) !important;
}

/* Content Area */
.contact-page-strip .strip-content {
    max-width: 85%;
}

/* Icon Wrapper */
.contact-page-strip .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(59,130,246,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon Styling */
.contact-page-strip .icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke: #93C5FD;
    opacity: 0.9;
}

/* Optional: Active State */
.contact-page-strip.active {
    background: rgba(59,130,246,0.05);
    border-left: 2px solid #3B82F6;
}


.cta-section::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(59,130,246,0.15),
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}