/*==========================================
  FK & Partner - Modern Color Scheme
  Sky Blue & Cerulean - Based on #0284C7
===========================================*/

/*==========================================
  1. CSS Color Variables Override
===========================================*/

:root {
  /* Primary Colors - Sky Blue Base #0284C7 */
  --main-color: #0284C7 !important;
  --main-color-light: #38BDF8 !important;
  --main-color-dark: #0369A1 !important;
  --main-color-rgb: 2, 132, 199 !important;
  
  /* Accent Colors - Cyan & Teal */
  --accent-color: #0EA5E9;
  --accent-light: #7DD3FC;
  --accent-dark: #0284C7;
  
  /* Secondary Accent - Soft Teal */
  --secondary-accent: #06B6D4;
  --secondary-light: #67E8F9;
  
  /* Dark Colors - Navy Slate */
  --black-color: #0C4A6E !important;
  --black-color-2: #075985 !important;
  --black-color-3: #0EA5E9 !important;
  
  /* Light Colors - Clean White/Blue-Gray */
  --white-color: #ffffff !important;
  --white-color-2: #F0F9FF !important;
  --white-color-3: #E0F2FE !important;
  
  /* Body Text */
  --body-color: #334155 !important;
  --body-color-2: #475569 !important;
  
  /* Gradients - Based on #0284C7 */
  --gradient-primary: linear-gradient(135deg, #0284C7 0%, #0EA5E9 50%, #38BDF8 100%);
  --gradient-dark: linear-gradient(135deg, #0C4A6E 0%, #075985 50%, #0369A1 100%);
  --gradient-light: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #BAE6FD 100%);
  --gradient-warm: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
  --gradient-ocean: linear-gradient(135deg, #0284C7 0%, #0369A1 50%, #0C4A6E 100%);
  --gradient-sky: linear-gradient(180deg, #E0F2FE 0%, #F0F9FF 50%, #FFFFFF 100%);
  
  /* Shadows with blue tint */
  --shadow-sm: 0 1px 2px 0 rgba(2, 132, 199, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(2, 132, 199, 0.1), 0 2px 4px -1px rgba(2, 132, 199, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(2, 132, 199, 0.1), 0 4px 6px -2px rgba(2, 132, 199, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(2, 132, 199, 0.1), 0 10px 10px -5px rgba(2, 132, 199, 0.04);
  --shadow-glow: 0 0 20px rgba(2, 132, 199, 0.3);
  --shadow-glow-lg: 0 0 40px rgba(2, 132, 199, 0.4);
}

/*==========================================
  2. Global Background Updates
===========================================*/

/* Body Background */
body {
  background-color: #F8FAFC;
}

/* Main Slider - Sky Blue Gradient */
.arck-main-slider-item {
  background: linear-gradient(135deg, 
    rgba(2, 132, 199, 0.92) 0%, 
    rgba(14, 165, 233, 0.88) 40%,
    rgba(56, 189, 248, 0.85) 100%
  ), url('assets/img/slider/main1.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

.arck-main-slider-item[data-background="assets/img/slider/main2.png"] {
  background: linear-gradient(135deg, 
    rgba(3, 105, 161, 0.92) 0%, 
    rgba(2, 132, 199, 0.88) 40%,
    rgba(14, 165, 233, 0.85) 100%
  ), url('assets/img/slider/main2.png') !important;
}

.arck-main-slider-item[data-background="assets/img/slider/main3.png"] {
  background: linear-gradient(135deg, 
    rgba(12, 74, 110, 0.90) 0%, 
    rgba(3, 105, 161, 0.87) 40%,
    rgba(2, 132, 199, 0.85) 100%
  ), url('assets/img/slider/main3.png') !important;
}

/* Service Section - Light Sky Gradient */
.arck-service-section {
  background: linear-gradient(180deg, 
    #FFFFFF 0%, 
    #F0F9FF 20%,
    #E0F2FE 50%,
    #F0F9FF 80%,
    #FFFFFF 100%
  ) !important;
}

/* About Section - Clean White with subtle blue tint */
.arck-about-section {
  background: linear-gradient(180deg, 
    #FFFFFF 0%, 
    #F8FAFC 30%,
    #F0F9FF 70%,
    #FFFFFF 100%
  ) !important;
}

/* Project Section - Deep Ocean Blue */
.arck-project-section {
  background: linear-gradient(135deg, 
    #0C4A6E 0%, 
    #075985 25%,
    #0369A1 50%,
    #075985 75%,
    #0C4A6E 100%
  ) !important;
}

/* Stats Section - Vibrant Sky Blue */
.stats-section {
  background: linear-gradient(135deg, 
    #0284C7 0%, 
    #0EA5E9 30%,
    #38BDF8 70%,
    #0EA5E9 100%
  ) !important;
}

/* Contact Section - Soft Sky Gradient */
.arck-appointment-video-section {
  background: linear-gradient(180deg, 
    #FFFFFF 0%, 
    #F0F9FF 30%,
    #E0F2FE 70%,
    #F0F9FF 100%
  ) !important;
}

/* Footer - Deep Navy Blue */
.arck-footer-section {
  background: linear-gradient(135deg, 
    #0C4A6E 0%, 
    #082F49 30%,
    #0C4A6E 70%,
    #075985 100%
  ) !important;
}

/* Breadcrumb Sections - Rich Blue */
.arck-breadcrumb-section,
.arck-breadcrumb-section-2 {
  background: linear-gradient(135deg, 
    #075985 0%, 
    #0369A1 30%,
    #0284C7 60%,
    #0EA5E9 100%
  ) !important;
}

/*==========================================
  3. Component Color Updates
===========================================*/

/* Buttons */
.arck-btn a,
.submit-btn {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%) !important;
}

.arck-btn a:hover,
.submit-btn:hover {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%) !important;
}

/* Section Subtitles */
.arck-section-title .sub-title {
  color: #0284C7;
}

/* Service Cards - White with Blue Accent */
.arck-service-item {
  background: #FFFFFF;
  border: 1px solid #BAE6FD;
}

.arck-service-item:hover {
  border-color: #0284C7;
  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.15);
}

/* Black Service Cards - Dark Blue */
.col-lg-3:nth-child(2) .arck-service-item,
.col-lg-3:nth-child(4) .arck-service-item {
  background: linear-gradient(135deg, #075985 0%, #0369A1 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Project Cards */
.arck-project-item .item-category {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

.view-more-btn a {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

/* Team Cards */
.arck-team-item {
  background: #FFFFFF;
  border: 1px solid #BAE6FD;
}

.arck-team-item:hover {
  border-color: #0284C7;
}

/* Project Info Cards */
.project-info-card {
  background: #FFFFFF;
  border: 1px solid #E0F2FE;
  border-left: 4px solid #0284C7;
}

.project-info-card:hover {
  border-color: #0284C7;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.1);
}

/* Scope Highlight */
.scope-highlight {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border-left: 4px solid #0284C7;
}

/* Image Container */
.project-image-container {
  background: #FFFFFF;
  border: 1px solid #E0F2FE;
}

/* Applications Section - Deep Blue */
.applications-section {
  background: linear-gradient(135deg, #075985 0%, #0369A1 50%, #0C4A6E 100%);
}

/* Contact Cards */
.contact-info-card-v2 {
  background: #FFFFFF;
  border: 1px solid #E0F2FE;
}

.contact-info-card-v2:hover {
  border-color: #0284C7;
}

.contact-info-icon-v2 {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

/* Footer Widgets */
.arck-footer-widget .widget-title::after {
  background: linear-gradient(90deg, #0284C7 0%, #0EA5E9 100%);
}

/* Links */
a {
  color: #0284C7;
}

a:hover {
  color: #0EA5E9;
}

/* Navigation Active */
.arck-header-section .main-navigation li a.active,
.arck-header-section .main-navigation li:hover a {
  color: #0284C7;
}

/* Social Icons */
.footer-social-links a {
  background: rgba(2, 132, 199, 0.1);
  color: #0284C7;
}

.footer-social-links a:hover {
  background: #0284C7;
  color: #FFFFFF;
}

/* Stats Icons */
.stat-item .stat-icon {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.stat-item:hover .stat-icon {
  background: #FFFFFF;
  color: #0284C7;
}

/* Form Inputs Focus */
.arck-appointment-form-wrap form input:focus,
.arck-appointment-form-wrap form textarea:focus {
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Table Header */
.project-specs-table thead {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

/* Next/Prev Buttons */
.arck-project-next-prev-btn a:hover {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

/* Scroll Up Button */
.scrollup {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
}

/* Client Badge - Light blue background, white text */
.arck-breadcrumb-content .client-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(2, 132, 199, 0.3);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.arck-breadcrumb-content .client-badge i {
  color: #ffffff;
}

/* Breadcrumb Links */
.arck-breadcrumb-content a {
  color: #7DD3FC;
}

.arck-breadcrumb-content a:hover {
  color: #BAE6FD;
}

/* Applications List Icons */
.applications-section li::before {
  color: #38BDF8;
}

/* Serial Numbers */
.arck-service-item .serial-no {
  color: rgba(2, 132, 199, 0.08);
}

.col-lg-3:nth-child(2) .arck-service-item .serial-no,
.col-lg-3:nth-child(4) .arck-service-item .serial-no {
  color: rgba(255, 255, 255, 0.1);
}

/* Experience Counter */
.arck-year-experience h3 {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section Title Underline */
.arck-section-title .sub-title::before {
  background: linear-gradient(90deg, #0284C7 0%, #0EA5E9 100%);
}

/* Hover Glow Effects */
.arck-service-item:hover .inner-icon,
.arck-team-item:hover .inner-social a:hover,
.contact-info-card-v2:hover .contact-info-icon-v2 {
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.4);
}

/*==========================================
  4. Trust Badges Section
===========================================*/

.trust-badges {
  background: linear-gradient(180deg, 
    #FFFFFF 0%, 
    #F8FAFC 50%,
    #FFFFFF 100%
  );
  border-top: 1px solid #E0F2FE;
  border-bottom: 1px solid #E0F2FE;
}

.trust-badge:hover {
  transform: translateY(-3px);
}

.trust-badge img {
  filter: grayscale(100%) opacity(0.6);
  transition: all 0.3s ease;
}

.trust-badge:hover img {
  filter: grayscale(0%) opacity(1);
}

/*==========================================
  5. Animation Keyframes with New Colors
===========================================*/

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(2, 132, 199, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.6);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/*==========================================
  6. Preloader with New Colors
===========================================*/

#preloader {
  background: linear-gradient(135deg, #075985 0%, #0369A1 50%, #0284C7 100%);
}

/*==========================================
  7. Additional Modern Touches
===========================================*/

/* Smooth transitions for interactive elements */
.arck-service-item,
.arck-team-item,
.project-info-card,
.contact-info-card-v2 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced focus states */
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: 2px solid #0EA5E9;
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background: rgba(2, 132, 199, 0.2);
  color: #0C4A6E;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F0F9FF;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0284C7 0%, #0EA5E9 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0EA5E9 0%, #38BDF8 100%);
}


/*==========================================
  SERVICE CARDS - All look like Card 1
===========================================*/

/* ALL cards white background */
.arck-service-section .arck-service-item,
.arck-service-section .col-lg-3:nth-child(1) .arck-service-item,
.arck-service-section .col-lg-3:nth-child(2) .arck-service-item,
.arck-service-section .col-lg-3:nth-child(3) .arck-service-item,
.arck-service-section .col-lg-3:nth-child(4) .arck-service-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
}

/* ALL cards - light icon background */
.arck-service-section .arck-service-item .inner-icon,
.arck-service-section .col-lg-3:nth-child(1) .arck-service-item .inner-icon,
.arck-service-section .col-lg-3:nth-child(2) .arck-service-item .inner-icon,
.arck-service-section .col-lg-3:nth-child(3) .arck-service-item .inner-icon,
.arck-service-section .col-lg-3:nth-child(4) .arck-service-item .inner-icon {
  background: rgba(2, 132, 199, 0.1) !important;
}

/* ALL cards - normal icon colors */
.arck-service-section .arck-service-item .inner-icon img,
.arck-service-section .col-lg-3:nth-child(1) .arck-service-item .inner-icon img,
.arck-service-section .col-lg-3:nth-child(2) .arck-service-item .inner-icon img,
.arck-service-section .col-lg-3:nth-child(3) .arck-service-item .inner-icon img,
.arck-service-section .col-lg-3:nth-child(4) .arck-service-item .inner-icon img {
  filter: none !important;
}

/* ALL cards - dark text */
.arck-service-section .arck-service-item .arck-inner-text h3,
.arck-service-section .col-lg-3:nth-child(1) .arck-service-item .arck-inner-text h3,
.arck-service-section .col-lg-3:nth-child(2) .arck-service-item .arck-inner-text h3,
.arck-service-section .col-lg-3:nth-child(3) .arck-service-item .arck-inner-text h3,
.arck-service-section .col-lg-3:nth-child(4) .arck-service-item .arck-inner-text h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.arck-service-section .arck-service-item .arck-inner-text p,
.arck-service-section .col-lg-3:nth-child(1) .arck-service-item .arck-inner-text p,
.arck-service-section .col-lg-3:nth-child(2) .arck-service-item .arck-inner-text p,
.arck-service-section .col-lg-3:nth-child(3) .arck-service-item .arck-inner-text p,
.arck-service-section .col-lg-3:nth-child(4) .arck-service-item .arck-inner-text p {
  color: #334155 !important;
}

/* ALL cards - serial numbers visible */
.arck-service-section .arck-service-item .serial-no,
.arck-service-section .col-lg-3:nth-child(1) .arck-service-item .serial-no,
.arck-service-section .col-lg-3:nth-child(2) .arck-service-item .serial-no,
.arck-service-section .col-lg-3:nth-child(3) .arck-service-item .serial-no,
.arck-service-section .col-lg-3:nth-child(4) .arck-service-item .serial-no {
  color: rgba(2, 132, 199, 0.12) !important;
}

/*==========================================
  LOGO FIX - Ensure visibility
===========================================*/

.brand-logo img,
.m-brand-logo img {
  max-width: 180px;
  height: auto;
  display: block;
}

/* Header logo specific - make sure it shows on all pages */
.arck-header-section .brand-logo img,
.arck-header-section.header-style-one .brand-logo img {
  filter: brightness(1.2);
  max-width: 180px;
  height: auto;
}

/*==========================================
  CALL US BUTTON - White text on all pages
===========================================*/

.header-cta,
.header-cta a,
.arck-header-section .header-cta,
.arck-header-section.header-style-one .header-cta,
.arck-header-section .header-cta a,
.arck-header-section.header-style-one .header-cta a {
  color: #ffffff !important;
}

.header-cta i,
.arck-header-section .header-cta i,
.arck-header-section.header-style-one .header-cta i {
  color: #ffffff !important;
}

.header-cta a:hover,
.arck-header-section .header-cta a:hover {
  color: #ffffff !important;
}


/*==========================================
  SOCIAL ICONS FIX - Make visible
===========================================*/

.header-social ul li a {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-social ul li a i {
  color: #ffffff;
}

.header-social ul li a:hover {
  background: #0284C7;
  border-color: #0284C7;
}