/* ========================================
   RIVERSTUDIO - MODERN BLACK & BLUE THEME
   Custom Theme Overrides
   ======================================== */

/* Color Variables */
:root {
  --theme-black: #0a0a0a;
  --theme-dark-gray: #1a1a1a;
  --theme-blue: #3B82F6;
  --theme-blue-light: #60A5FA;
  --theme-blue-dark: #2563EB;
  --theme-accent: #3B82F6;
  --theme-text-light: #e5e7eb;
  --theme-text-muted: #9ca3af;
}

/* Body & Background Overrides */
body {
  background-color: var(--theme-black) !important;
  color: var(--theme-text-light) !important;
}

.page-wrapper {
  background-color: var(--theme-black) !important;
}

/* Section Backgrounds */
section {
  background-color: var(--theme-black) !important;
}

section.bg-light-gray,
section.bg-light,
.bg-light-gray {
  background-color: var(--theme-dark-gray) !important;
}

section.bg-dark,
.bg-dark {
  background-color: #000 !important;
}

/* Text Colors */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #ffffff !important;
}

p,
.fs-5,
.text-dark {
  color: var(--theme-text-light) !important;
}

.text-opacity-70 {
  opacity: 0.8 !important;
}

.text-muted,
.text-secondary {
  color: var(--theme-text-muted) !important;
}

/* Fixes for White Background Elements (Icons, Badges) */
.bg-white,
.bg-white .text-dark,
.btn-icon.bg-white {
  color: #000 !important;
}

.badge.bg-white {
  color: #000 !important;
  background-color: #fff !important;
}

/* Primary Color - Blue */
.bg-primary,
.bg-primary .text-dark,
.btn.bg-primary,
.badge.bg-primary {
  background-color: var(--theme-blue) !important;
  color: #000 !important;
}

.text-primary {
  color: var(--theme-blue) !important;
}

.border-primary {
  border-color: var(--theme-blue) !important;
}

/* Buttons */
.btn {
  transition: all 0.3s ease !important;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;
}

.btn-icon {
  background-color: #ffffff !important;
  color: #000 !important;
  /* Ensure icons on buttons are black */
}

/* Cards */
.card {
  background-color: var(--theme-dark-gray) !important;
  border: 1px solid rgba(59, 130, 246, 0.1) !important;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-5px);
}

.card.bg-primary {
  background-color: var(--theme-blue) !important;
  border-color: var(--theme-blue) !important;
}

.card.bg-dark {
  background-color: #000 !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Portfolio Items */
.portfolio-img {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}

.portfolio-img img {
  transition: transform 0.5s ease;
}

.portfolio-img:hover img {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-img:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay a {
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.portfolio-img:hover .portfolio-overlay a {
  transform: scale(1);
}

/* Badges */
.badge {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--theme-blue) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  padding: 0.5rem 1rem;
  font-weight: 600;
}

.badge.text-bg-dark {
  background-color: var(--theme-blue) !important;
  color: #000 !important;
  border-color: var(--theme-blue) !important;
}

.badge.text-dark {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--theme-blue) !important;
}

/* Section Numbers */
.section-number {
  background-color: transparent !important;
  color: var(--theme-blue) !important;
  border: 2px solid var(--theme-blue) !important;
  font-weight: 700;
}

.round-36 {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Border Lines */
.border-line {
  border-color: var(--theme-blue) !important;
  opacity: 0.3;
}

.border-top,
.border-bottom {
  border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Banner Sections */
.banner-section {
  position: relative;
  background-color: #000 !important;
}

.banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 1;
}

.banner-section .container {
  position: relative;
  z-index: 2;
}

.banner-inner-section {
  min-height: 400px;
  background-size: cover !important;
  background-position: center !important;
}

/* Services Tab */
.nav-tabs {
  border: none !important;
}

.nav-tabs .nav-link {
  color: var(--theme-text-muted) !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

.nav-tabs .nav-link.active {
  color: var(--theme-blue) !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--theme-blue-light) !important;
}

.nav-item {
  border-color: rgba(59, 130, 246, 0.1) !important;
}

/* Testimonials */
.card-body {
  color: inherit;
}

.card.bg-primary .card-body * {
  color: #000 !important;
}

.card.bg-dark .card-body h2,
.card.bg-dark .card-body h3,
.card.bg-dark .card-body h4,
.card.bg-dark .card-body h5,
.card.bg-dark .card-body p {
  color: #ffffff !important;
}

/* Accordion */
.accordion {
  background: transparent !important;
}

.accordion-item {
  background-color: transparent !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.accordion-button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--theme-blue) !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: var(--theme-blue) !important;
}

.accordion-body {
  background-color: transparent !important;
  color: var(--theme-text-light) !important;
}

/* Footer */
.footer {
  background-color: #000 !important;
  border-top: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.footer h2,
.footer p,
.footer a {
  color: var(--theme-text-light) !important;
}

.footer .text-white {
  color: #ffffff !important;
}

.footer .text-opacity-70 {
  opacity: 0.7 !important;
}

/* Links */
a {
  color: var(--theme-blue) !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--theme-blue-light) !important;
}

.link-hover:hover {
  color: var(--theme-blue-light) !important;
}

/* Header - Keep Transparent */
.header {
  background: transparent !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header.border-top {
  border-top-color: var(--theme-blue) !important;
}

/* Dropdown Menu */
.dropdown-menu {
  background-color: var(--theme-dark-gray) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-menu .text-dark {
  color: #ffffff !important;
}

.header-link {
  color: #ffffff !important;
  transition: all 0.3s ease;
}

.header-link:hover,
.header-link.active {
  color: var(--theme-blue) !important;
}

/* Scroll to Top Button */
.get-template .btn {
  background-color: var(--theme-blue) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

.get-template .btn:hover {
  background-color: var(--theme-blue-light) !important;
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6) !important;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-spin {
  animation: spin 20s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Glow Effects */
.bg-primary,
.btn.bg-primary {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.bg-primary:hover,
.btn.bg-primary:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

/* Form Elements */
input,
textarea,
select {
  background-color: var(--theme-dark-gray) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #ffffff !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
  outline: none !important;
}

/* Video Overlay */
video {
  filter: brightness(0.7);
}

/* Custom Text Classes */
.riverstudio-text-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 36px;
  text-decoration: none !important;
  color: #fff !important;
}

/* Responsive Adjustments & Alignment */
@media (max-width: 991px) {

  .gap-6,
  .gap-7,
  .gap-8,
  .gap-9,
  .gap-10,
  .gap-11 {
    gap: 1.5rem !important;
  }

  .banner-section {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .riverstudio-title h1 {
    font-size: 3rem;
  }

  .py-lg-11 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .py-xl-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .mb-lg-0 {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 768px) {
  .banner-section {
    min-height: 60vh;
  }

  .banner-inner-section {
    min-height: 300px;
  }

  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection Color */
::selection {
  background-color: var(--theme-blue);
  color: #000;
}

::-moz-selection {
  background-color: var(--theme-blue);
  color: #000;
}