/* =========================
   MODERN UI SYSTEM
   Creative Martin Studios
   Gradient Obsidian Update
   ========================= */

/* Load Manrope */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* New Gradient Variables */
  --grad-start: #00BCD4;
  --grad-end: #007bff;
  --main-gradient: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  
  --dark: #1a1d23; /* Obsidian dark */
  --light: #f8f9fa;
  --card-bg: #ffffff;
  --border: #e9ecef;
  --radius: 14px;
  --transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Force font everywhere */
html, body, button, input, select, textarea, .form-control, .form-select, .btn, .navbar, .card, .dropdown-menu {
  font-family: var(--bs-font-sans-serif) !important;
}

/* Utility Class for Text Gradient */
.text-gradient {
  background: var(--main-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* =========================
   GLOBAL
   ========================= */

body {
  background: #f5f7f6;
  color: var(--dark);
  font-weight: 400;
}

.container {
  max-width: 1080px;
}

/* =========================
   TYPOGRAPHY
   ========================= */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

.hero-title {
  font-size: 44px;
  font-weight: 800;
}

/* Apply gradient to spans in titles */
.hero-title span {
  background: var(--main-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   CARDS
   ========================= */

.card, .portfolio-item-inner, .blog-card, .service-card {
  background: var(--card-bg);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  transition: var(--transition);
  overflow: hidden;
}

.card:hover, .portfolio-item-inner:hover, .blog-card:hover, .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
}

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

.btn {
  border-radius: 10px;
  padding: 10px 22px;
  font-weight: 600;
  transition: var(--transition);
  border: none; /* Gradients don't play well with borders */
}

.btn-primary {
  background: var(--main-gradient);
  color: #fff !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3);
}

/* Gradient border effect for Outline Buttons */
.btn-outline-primary {
  background: #fff;
  color: var(--grad-end);
  border: 2px solid var(--grad-end);
}

.btn-outline-primary:hover {
  background: var(--main-gradient);
  color: #fff;
  border-color: transparent;
}

/* =========================
   BADGES
   ========================= */

.badge {
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 600;
}

.badge-primary, .bg-primary {
  background: var(--main-gradient) !important;
}

/* =========================
   NAVBAR
   ========================= */

.navbar .nav-link {
  font-weight: 600;
  color: var(--dark);
}

.navbar .nav-link:hover {
  background: var(--main-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   LINKS
   ========================= */

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

a:hover {
  color: var(--grad-start);
}

/* =========================
   FORMS
   ========================= */

.form-control:focus, .form-select:focus {
  border-color: var(--grad-start);
  box-shadow: 0 0 0 3px rgba(0, 188, 212, .15);
}

/* =========================
   SPECIAL ELEMENTS
   ========================= */

.editorial-line {
  height: 2px;
  width: 60px;
  background: var(--main-gradient);
  display: inline-block;
}

.overlay {
  background: linear-gradient(transparent, rgba(26, 29, 35, .8));
}

#load-more-button {
  background: var(--main-gradient);
  border: none;
  color: #fff;
}

#load-more-button:hover {
  filter: brightness(1.1);
}

.footer-links a:hover {
  background: var(--main-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:768px) {
  .hero-title {
    font-size: 32px;
  }
}