/*
Theme Name: Webrise Technologies
Theme URI: https://webrisetech.com/
Author: Rohit Kashyap
Author URI: https://rohitkashyap.com/
Description: A premium, modern, and high-performance WordPress theme for technology companies and digital agencies.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webrise-technologies
Tags: custom-menu, featured-images, full-width-template, theme-options, translation-ready, block-styles

This theme is built for Webrise Technologies.
*/

/* =============================================
   WEBRISE TECHNOLOGIES — BRAND COLOR SYSTEM
   Extracted from official brand logo
   ============================================= */

:root {
  /* --- Brand Primary: Orange --- */
  --primary: #f97316; /* Main orange — logo "Rise" text, R lettermark, swoosh */
  --primary-dark: #ea6c0a; /* Darker orange — hover states, depth */
  --primary-light: #fb923c; /* Lighter orange — highlights, accents */
  --primary-xlight: #fed7aa; /* Pale orange — tints, badges, soft backgrounds */
  --primary-gradient: linear-gradient(
    135deg,
    #fb923c 0%,
    #f97316 50%,
    #ea6c0a 100%
  );

  /* --- Brand Charcoal/Black --- */
  --dark: #1c1c1c; /* Deep charcoal — "Web" text, W lettermark */
  --dark-secondary: #2d2d2d; /* Slightly lighter charcoal — cards, sections */
  --dark-muted: #444444; /* Muted dark — secondary dark text */
  --dark-gradient: linear-gradient(135deg, #2d2d2d 0%, #1c1c1c 100%);

  /* --- Neutral Palette --- */
  --white: #ffffff;
  --off-white: #f9f9f9; /* Very subtle warm white — page backgrounds */
  --light-bg: #f5f5f5; /* Light grey — section alternates */
  --border-color: #e5e5e5; /* Default border / divider */

  /* --- Text Colors --- */
  --text-main: #1c1c1c; /* Primary body text — matches brand dark */
  --text-secondary: #444444; /* Secondary / supporting text */
  --text-muted: #777777; /* Muted / caption text */
  --text-light: #aaaaaa; /* Disabled / placeholder text */

  /* --- Brand Accent: Pixel Orange Dots --- */
  --accent: #ff8c38; /* Pixel dots in logo top-left */
  --accent-glow: rgba(
    249,
    115,
    22,
    0.25
  ); /* Glow / shadow for orange elements */

  /* --- Status Colors --- */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* --- Glass / Overlay --- */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --overlay-dark: rgba(28, 28, 28, 0.75);
  --overlay-orange: rgba(249, 115, 22, 0.1);

  /* --- Typography --- */
  --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;

  /* --- Spacing & Radii --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 4px rgba(28, 28, 28, 0.08);
  --shadow-md: 0 4px 16px rgba(28, 28, 28, 0.12);
  --shadow-lg: 0 8px 32px rgba(28, 28, 28, 0.16);
  --shadow-orange: 0 4px 20px rgba(249, 115, 22, 0.35);

  /* --- Transitions --- */
  --transition: all 0.3s ease;
  --transition-fast: all 0.15s ease;
}

/* ==============================================
   RESET & BASE
   ============================================== */

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

body {
  font-family: var(--font-body);
  color: var(--text-main);
  line-height: 1.6;
  background-color: var(--off-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}

a {
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==============================================
   UTILITY — TEXT COLORS
   ============================================== */

.text-primary {
  color: var(--primary) !important;
}
.text-dark {
  color: var(--dark) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
.text-secondary {
  color: var(--text-secondary) !important;
}
.text-white {
  color: var(--white) !important;
}
.text-accent {
  color: var(--accent) !important;
}
.text-success {
  color: var(--success) !important;
}
.text-warning {
  color: var(--warning) !important;
}
.text-error {
  color: var(--error) !important;
}
.text-info {
  color: var(--info) !important;
}

/* ==============================================
   UTILITY — BACKGROUND COLORS
   ============================================== */

.bg-primary {
  background-color: var(--primary) !important;
  color: var(--white);
}
.bg-primary-dark {
  background-color: var(--primary-dark) !important;
  color: var(--white);
}
.bg-primary-light {
  background-color: var(--primary-xlight) !important;
  color: var(--primary-dark);
}
.bg-dark {
  background-color: var(--dark) !important;
  color: var(--white);
}
.bg-dark-secondary {
  background-color: var(--dark-secondary) !important;
  color: var(--white);
}
.bg-white {
  background-color: var(--white) !important;
}
.bg-light {
  background-color: var(--light-bg) !important;
}
.bg-off-white {
  background-color: var(--off-white) !important;
}
.bg-orange-tint {
  background-color: var(--overlay-orange) !important;
}

.bg-gradient-primary {
  background: var(--primary-gradient) !important;
  color: var(--white);
}
.bg-gradient-dark {
  background: var(--dark-gradient) !important;
  color: var(--white);
}
.bg-gradient-brand {
  background: linear-gradient(
    135deg,
    var(--dark) 0%,
    var(--dark-secondary) 50%,
    var(--primary-dark) 100%
  ) !important;
  color: var(--white);
}

/* ==============================================
   UTILITY — BORDER COLORS
   ============================================== */

.border-primary {
  border-color: var(--primary) !important;
}
.border-dark {
  border-color: var(--dark) !important;
}
.border-light {
  border-color: var(--border-color) !important;
}

/* ==============================================
   COMPONENTS — BUTTONS
   ============================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

/* Primary — orange gradient */
.btn-primary {
  background: var(--primary-gradient);
  color: var(--white);
  border-color: transparent;
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.45);
  color: var(--white);
}

/* Dark — charcoal */
.btn-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.btn-dark:hover {
  background: var(--dark-secondary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Outline orange */
.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-orange);
}

/* Outline dark */
.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn-outline-dark:hover {
  background: var(--dark);
  color: var(--white);
  transform: translateY(-2px);
}

/* Outline white */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--dark);
  transform: translateY(-2px);
}

/* Sizes */
.btn-sm {
  padding: 0.4rem 1.1rem;
  font-size: 0.8rem;
}
.btn-lg {
  padding: 0.85rem 2.2rem;
  font-size: 1rem;
}

/* ==============================================
   COMPONENTS — BADGES
   ============================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.badge-primary {
  background: var(--primary-xlight);
  color: var(--primary-dark);
}
.badge-dark {
  background: var(--dark);
  color: var(--white);
}
.badge-white {
  background: var(--white);
  color: var(--dark);
}
.badge-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

/* ==============================================
   COMPONENTS — BRAND DIVIDER LINE
   ============================================== */

.brand-divider {
  width: 56px;
  height: 3px;
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
  margin: 0.75rem 0;
}
.brand-divider.center {
  margin: 0.75rem auto;
}

/* ==============================================
   COMPONENTS — INLINE HIGHLIGHT SPANS
   ============================================== */

.highlight {
  color: var(--primary);
}
.highlight-dark {
  color: var(--dark);
}

div#block-2 {
  display: none;
}