/*-----------------------------------------------------------------------------------
    COMPONENT-SPECIFIC FIXES
    
    This file contains targeted fixes for specific components that aren't
    responding to the general overrides.
    
    Include this LAST, after all other CSS files.
-----------------------------------------------------------------------------------*/

/* ====================== NAVBAR COMPLETE FIX ====================== */

.navbar,
.navbar-default,
.topnav {
  background: #0A2540 !important;
  border-bottom: 1px solid #16213E !important;
}

/* Navbar when scrolling */
.navbar.nav-scroll,
.navbar.scrolled,
.navbar.change,
.navbar.sticky {
  background: #070F1A !important;
  box-shadow: 0 2px 20px rgba(10, 37, 64, 0.5) !important;
}

/* Navbar brand/logo area */
.navbar .navbar-brand,
.navbar-brand {
  background: transparent !important;
}

/* All navbar links */
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar a,
.topnav a {
  color: #FFFFFF !important;
}

/* Navbar links hover/active */
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: #45B7D1 !important;
}

/* Dropdown menus */
.navbar .dropdown-menu {
  background: #0A2540 !important;
  border: 1px solid #16213E !important;
}

.navbar .dropdown-item {
  color: #FFFFFF !important;
}

.navbar .dropdown-item:hover {
  background: #16213E !important;
  color: #45B7D1 !important;
}

/* Mobile menu */
/* .navbar-collapse {
  background: #0A2540 !important; */
}

/* Hamburger icon */
.navbar-toggler,
.navbar-toggler-icon {
  border-color: #45B7D1 !important;
}

/* ====================== STATS/NUMBERS BOXES - CRITICAL FIX ====================== */

/* Container for stat boxes */
.numbers,
.numbers-box,
.feat-numbers {
  background: transparent !important;
}

/* Individual stat items */
.numbers .item,
.numbers-box .item,
.feat-numbers .item,
.stats-item,
.number-box {
  background: #16213E !important;
  border: 1px solid #0F3460 !important;
  border-radius: 8px !important;
  padding: 30px !important;
  margin: 10px !important;
  transition: all 0.3s ease !important;
}

/* Stat boxes hover */
.numbers .item:hover,
.numbers-box .item:hover,
.feat-numbers .item:hover {
  background: #0F3460 !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(69, 183, 209, 0.3) !important;
}

/* The big numbers */
.numbers .item h3,
.numbers .item .count,
.numbers .item h2,
.feat-numbers h3,
.stats-item h3,
[class*="count"] {
  color: #45B7D1 !important;
  font-weight: 700 !important;
}

/* The "+" or other symbols */
.numbers .item h3 span,
.numbers .item .count span {
  color: #45B7D1 !important;
}

/* Labels like "Years", "Projects", etc */
.numbers .item span,
.numbers .item p,
.feat-numbers span,
.stats-item span,
.stats-item p {
  color: #FFFFFF !important;
}

/* SPECIFIC FIX for bord-box layout */
.bord-box {
  border: none !important;
  background: transparent !important;
}

.bord-box > [class*="col"] {
  background: #16213E !important;
  border: 1px solid #0F3460 !important;
  border-radius: 8px !important;
  padding: 30px !important;
  margin-bottom: 20px !important;
}

/* ====================== SERVICES5 COMPONENT FIX ====================== */

/* Services section background */
.services-col,
.services-section,
section.services {
  background: #0A2540 !important;
  padding: 100px 0 !important;
}

/* Services header */
.services-col .main-header,
.services .main-header {
  margin-bottom: 60px !important;
}

.services-col .main-header h3,
.services .main-header h3 {
  color: #FFFFFF !important;
  font-size: 42px !important;
  margin-bottom: 20px !important;
}

.services-col .main-header .tex-bg,
.services .main-header .tex-bg {
  color: rgba(69, 183, 209, 0.05) !important;
  -webkit-text-stroke: 1px rgba(69, 183, 209, 0.15) !important;
}

/* Service item boxes */
.services-col .item-bx,
.services .item-bx,
.service-box {
  background: #16213E !important;
  border: 1px solid #0F3460 !important;
  border-radius: 12px !important;
  padding: 40px 30px !important;
  margin-bottom: 30px !important;
  transition: all 0.4s ease !important;
  min-height: 320px !important;
}

/* Service item hover */
.services-col .item-bx:hover,
.services .item-bx:hover {
  background: #0F3460 !important;
  transform: translateY(-10px) !important;
  box-shadow: 0 10px 40px rgba(69, 183, 209, 0.3) !important;
  border-color: #45B7D1 !important;
}

/* Service icons */
.services-col .item-bx .icon,
.services-col .item-bx span[class*="flaticon"],
.services-col .item-bx span[class*="icon"],
.services .item-bx .icon,
.services .item-bx span[class*="flaticon"] {
  color: #45B7D1 !important;
  font-size: 52px !important;
  display: block !important;
  margin-bottom: 25px !important;
  transition: all 0.3s ease !important;
}

/* Icon hover effect */
.services-col .item-bx:hover .icon,
.services-col .item-bx:hover span[class*="flaticon"],
.services .item-bx:hover .icon {
  color: #5ED4F4 !important;
  transform: scale(1.1) !important;
}

/* Service titles */
.services-col .item-bx h6,
.services .item-bx h6,
.service-box h6 {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  letter-spacing: 1px !important;
}

/* Service descriptions */
.services-col .item-bx p,
.services .item-bx p,
.service-box p {
  color: #B8D4E0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}

/* "Read More" links */
.services-col .item-bx .more,
.services-col .item-bx a.more,
.services .item-bx .more,
.services .item-bx a.more {
  color: #45B7D1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.services-col .item-bx .more:hover,
.services .item-bx .more:hover {
  color: #5ED4F4 !important;
  transform: translateX(5px) !important;
}

/* Add arrow to read more */
.services-col .item-bx .more:after,
.services .item-bx .more:after {
  content: " →";
  transition: transform 0.3s ease;
}

.services-col .item-bx .more:hover:after,
.services .item-bx .more:hover:after {
  transform: translateX(5px);
}

/* ====================== ABOUT SECTION ====================== */

.about,
.about-section {
  background: #070F1A !important;
}

.about .section-head h3,
.about h2,
.about h3 {
  color: #FFFFFF !important;
}

.about p {
  color: #B8D4E0 !important;
}

/* About features/items */
.about .feat,
.about .item {
  background: #16213E !important;
  border: 1px solid #0F3460 !important;
  border-radius: 8px !important;
  padding: 30px !important;
}

/* ====================== FOOTER ====================== */

footer,
.footer {
  background: #070F1A !important;
  border-top: 1px solid #16213E !important;
}

footer h6,
footer h5 {
  color: #FFFFFF !important;
}

footer p,
footer li,
footer span {
  color: #B8D4E0 !important;
}

footer a {
  color: #B8D4E0 !important;
  transition: color 0.3s ease !important;
}

footer a:hover {
  color: #45B7D1 !important;
}

/* Footer social icons */
footer .social a {
  color: #B8D4E0 !important;
  border: 1px solid #16213E !important;
  background: transparent !important;
}

footer .social a:hover {
  color: #45B7D1 !important;
  border-color: #45B7D1 !important;
  background: rgba(69, 183, 209, 0.1) !important;
}

/* Copyright section */
footer .copyrights {
  border-top: 1px solid #16213E !important;
  background: #070F1A !important;
}

/* ====================== SECTION ALTERNATION ====================== */

/* You can manually add these classes to sections for control */

.section-darkest {
  background: #070F1A !important;
}

.section-dark {
  background: #0A2540 !important;
}

.section-medium {
  background: #0F3460 !important;
}

.section-card {
  background: #16213E !important;
}

/* ====================== OTHER COMPONENTS ====================== */

/* Portfolio/Works */
.works,
.portfolio {
  background: #0A2540 !important;
}

.works .item .cont {
  background: rgba(10, 37, 64, 0.95) !important;
}

/* Blog */
.blog {
  background: #0F3460 !important;
}

.blog .item {
  background: #16213E !important;
  border: 1px solid #0F3460 !important;
}

/* Contact Form */
.contact-form input,
.contact-form textarea,
.form input,
.form textarea {
  background: #16213E !important;
  border: 1px solid #0F3460 !important;
  color: #FFFFFF !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #45B7D1 !important;
  box-shadow: 0 0 0 3px rgba(69, 183, 209, 0.15) !important;
}

/* Buttons */
.butn,
.btn,
button[type="submit"] {
  background: #45B7D1 !important;
  color: #FFFFFF !important;
  border: 2px solid #45B7D1 !important;
}

.butn:hover,
.btn:hover,
button[type="submit"]:hover {
  background: #5ED4F4 !important;
  border-color: #5ED4F4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(69, 183, 209, 0.4) !important;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 991px) {
  /* Mobile navbar */
  .navbar {
    background: #0A2540 !important;
  }
  
  /* Mobile service items */
  .services-col .item-bx {
    margin-bottom: 30px !important;
  }
  
  /* Mobile stats */
  .numbers .item,
  .bord-box > [class*="col"] {
    margin-bottom: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Smaller padding on mobile */
  .services-col {
    padding: 60px 0 !important;
  }
  
  .services-col .item-bx {
    padding: 30px 20px !important;
    min-height: auto !important;
  }
}

/* ====================== UTILITY CLASSES ====================== */

/* Add these classes to any element for quick fixes */

.bg-navy { background: #0A2540 !important; }
.bg-navy-card { background: #16213E !important; }
.bg-navy-darkest { background: #070F1A !important; }

.text-aqua { color: #45B7D1 !important; }
.text-white { color: #FFFFFF !important; }
.text-light-blue { color: #B8D4E0 !important; }

.border-aqua { border-color: #45B7D1 !important; }
.border-navy { border-color: #0F3460 !important; }

/* Hover effects */
.hover-lift:hover {
  transform: translateY(-5px) !important;
}

.hover-glow:hover {
  box-shadow: 0 8px 25px rgba(69, 183, 209, 0.3) !important;
}