/* InfinitiCloud.in Theme Override Styles */

/* Apply Poppins font globally */
* {
  font-family: 'Poppins', sans-serif !important;
}

body {
  font-family: 'Poppins', sans-serif !important;
  background-color: transparent !important; /* Changed to transparent so banner shows */
  color: #ffffff !important;
}

/* Update dark background color to be darker */
.bg-dark,
.bg-\[\#0c1222\] {
  background-color: #121418 !important;
}

.bg-\[\#0c1222\]\/50 {
  background-color: rgba(18, 20, 24, 0.5) !important;
}

.bg-\[\#0c1222\]\/80 {
  background-color: rgba(18, 20, 24, 0.8) !important;
}

.bg-\[\#0f1429\] {
  background-color: #121418 !important;
}

.bg-\[\#101631\] {
  background-color: #121418 !important;
}

.bg-\[\#101631\]\/80 {
  background-color: rgba(18, 20, 24, 0.8) !important;
}

/* Update button styles to match infiniticloud.in */
.btn-primary {
  background-color: #0284c7 !important; /* Blue button color */
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.btn-primary:hover {
  background-color: #0369a1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(2, 132, 199, 0.3) !important;
}

/* Update blue accent colors to match infiniticloud.in */
.text-blue-400,
.text-blue-500 {
  color: #60a5fa !important; /* Lighter blue for better visibility */
}

.text-blue-600 {
  color: #3b82f6 !important;
}

.bg-blue-500 {
  background-color: #3b82f6 !important;
}

.bg-blue-600 {
  background-color: #2563eb !important;
}

.bg-blue-600\/20 {
  background-color: rgba(37, 99, 235, 0.2) !important;
}

.bg-blue-600\/10 {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

.border-blue-500 {
  border-color: #3b82f6 !important;
}

.border-blue-600 {
  border-color: #2563eb !important;
}

.border-blue-900\/20 {
  border-color: rgba(30, 58, 138, 0.2) !important;
}

/* Update glass effect to match infiniticloud.in */
.glass {
  background-color: rgba(18, 20, 24, 0.8) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(16px) !important;
}

/* Update hover effects */
.hover\:bg-blue-600\/10:hover {
  background-color: rgba(37, 99, 235, 0.15) !important;
}

.hover\:text-blue-400:hover {
  color: #60a5fa !important;
}

.hover\:text-blue-300:hover {
  color: #93c5fd !important;
}

/* Update focus ring colors */
*:focus-visible {
  --tw-ring-color: rgb(59 130 246 / 0.5) !important;
  --tw-ring-offset-color: #121418 !important;
}

/* Update input styles */
.input {
  background-color: rgba(18, 20, 24, 0.8) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.input:focus {
  border-color: #3b82f6 !important;
  --tw-ring-color: rgb(59 130 246 / 0.5) !important;
}

/* Update text colors for better contrast */
.text-gray-300 {
  color: #d1d5db !important;
}

.text-gray-400 {
  color: #9ca3af !important;
}

.text-gray-500 {
  color: #6b7280 !important;
}

/* Update gradient colors */
.from-blue-500\/20 {
  --tw-gradient-from: rgb(59 130 246 / 0.2) !important;
}

.from-blue-600\/20 {
  --tw-gradient-from: rgb(37 99 235 / 0.2) !important;
}

.to-purple-500\/20 {
  --tw-gradient-to: rgb(168 85 247 / 0.2) !important;
}

/* Update shadow colors */
.hover\:shadow-blue-500\/20:hover {
  --tw-shadow-color: rgb(59 130 246 / 0.2) !important;
}

/* Ensure all headings use Poppins */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

/* Update link colors */
a {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: #60a5fa !important;
}

/* Smooth transitions */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Update card/box styles */
.card,
.glass {
  background-color: rgba(18, 20, 24, 0.6) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Update navigation styles */
nav {
  background-color: rgba(18, 20, 24, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

/* Footer styling */
footer {
  background-color: #121418 !important;
}

/* Update any remaining dark backgrounds */
[class*="bg-"] {
  background-color: inherit;
}

/* Ensure proper contrast for readability */
.text-white {
  color: #ffffff !important;
}

.text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.text-white\/50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Homepage Banner Background */
/* Remove banner from body - it will be applied to specific section instead */
body {
  background-color: #121418 !important;
}

/* Apply banner ONLY to the hero section containing "Professional Server Management" */
/* Target ONLY the section with the hero-banner-section class added by JavaScript */
.hero-banner-section {
  background-image: url('/assets/banner.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  min-height: 70vh !important;
  padding: 6rem 2rem !important;
}

/* Overlay for better text readability on banner section */
.hero-banner-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(15, 17, 21, 0.3) 0%,
    rgba(18, 20, 24, 0.4) 50%,
    rgba(15, 17, 21, 0.5) 100%
  ) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Ensure text appears above overlay */
.hero-banner-section > * {
  position: relative !important;
  z-index: 1 !important;
}