/* Blue Button and Icon Theme Styling */

/* Set primary buttons to royal blue */
.btn-main,
.btn-primary,
#btn-search,
.btn-id,
.btn-rsvp,
a.btn-border:hover,
.btn-line:hover,
a.btn-line:hover,
.btn-main.bg-color,
a.btn-slider:after,
a.btn-line:after,
.widget_tags li a,
a.btn-main.bg-color-2,
a.btn-main.invert {
  background: #0047AB !important; /* Royal blue */
  color: #ffffff !important;
}

/* Set hover effects for primary buttons */
.btn-main:hover,
.btn-primary:hover,
#btn-search:hover,
.btn-id:hover,
.btn-rsvp:hover,
a.btn-slider:hover:after,
a.btn-line:hover:after {
  background: #4169E1 !important; /* Brighter royal blue */
  color: #ffffff !important;
}

/* Set icons to royal blue */
.icon-box i,
.feature-box-big-icon i,
.icon-deco i,
.feature-box-small-icon i,
.social-icons-sm i,
.btn-line:after,
.btn-line:before,
#mainmenu li a.menu-item:after,
header .info .social i,
.de_tab.tab_style_4 .de_nav li span,
.de_testi.opt-2 blockquote:before,
.h-phone i,
.de-icon,
.feature-box-small-icon-2 i,
address span i,
.mask .cover h3 i,
.pricing-table .bottom i,
.accordion a:before {
  color: #0047AB !important; /* Royal blue */
}

/* Set secondary accent icons to brighter royal blue */
.id-color-2,
.id-color-secondary,
.icon-box i.id-color-secondary,
.h-phone i.id-color-secondary,
.profile_username,
.ul-style-2 li:before,
.pricing-table.table-featured .bottom i,
.schedule-item .sc-name,
.d-card i {
  color: #4169E1 !important; /* Brighter royal blue */
}

/* Background colors for icons with background */
.social-icons-sm i:hover,
.feature-box-big-icon i,
.icon-deco i,
.feature-box-small-icon .border,
.feature-box-small-icon.style-2 .number.bg-color,
.box-icon-simple .num,
.d-card i,
.d-card:hover i {
  background: #0047AB !important; /* Royal blue */
  color: #ffffff !important;
}

/* Secondary background colors */
.bg-color-2,
.bg-color-secondary,
section.bg-color-2,
.author_list_pp i,
.profile_avatar i,
.t-circle,
.owl-dot.active,
.p_list_pp i {
  background: #4169E1 !important; /* Brighter royal blue */
}

/* Override any previously set icon colors */
.icofont-phone,
.icofont-envelope,
.icofont-wall-clock,
.icofont-location-pin,
.icofont-check-circled,
.icofont-phone-circle,
.fa-brands {
  color: #0047AB !important; /* Royal blue */
}

/* Icon color in topbar */
#topbar i {
  color: #4169E1 !important; /* Brighter royal blue */
}

/* Footer specific icon colors for visibility */
footer .social-icons i,
footer .icofont-phone-circle,
footer .icofont-location-pin,
footer .icofont-envelope {
  color: #4169E1 !important; /* Brighter royal blue for better contrast */
}

/* Important overrides for call-to-action buttons */
a.btn-main.bg-color-2,
a.btn-main.invert,
.menu_side_area .btn-main {
  background: #0047AB !important; /* Royal blue */
  color: #ffffff !important;
}

/* Schedule Now button in header */
.menu_side_area a.btn-main {
  background: #0047AB !important; /* Royal blue */
  color: #ffffff !important;
}

/* Hover effects for call-to-action buttons */
a.btn-main.bg-color-2:hover,
a.btn-main.invert:hover,
.menu_side_area .btn-main:hover,
.menu_side_area a.btn-main:hover {
  background: #4169E1 !important; /* Brighter royal blue */
  color: #ffffff !important;
}

/* Process Steps Styling */
.process-steps {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.process-step {
  position: relative;
  z-index: 1;
  padding: 0 15px;
  margin-bottom: 30px;
}

/* Desktop and large tablets - horizontal line between steps */
@media (min-width: 992px) {
  .process-step {
    flex: 1;
  }
  
  .process-step:not(:last-child):after {
    content: "";
    position: absolute;
    top: 40px;
    left: 100px;
    width: 100%;
    height: 2px;
    background: #0047AB;
    z-index: 0;
  }
}

/* Medium tablets - show only 3 steps per row */
@media (min-width: 768px) and (max-width: 991px) {
  .process-step {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .process-step:not(:last-child):after {
    width: 50%;
    right: 0;
  }
  
  .process-step:nth-child(3n):after {
    display: none;
  }
}

/* Small tablets and phones - show 2 steps per row */
@media (max-width: 767px) {
  .process-step {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .process-step:not(:last-child):after {
    display: none;
  }
  
  .process-steps:before {
    content: "";
    position: absolute;
    top: 40px;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #0047AB;
    z-index: 0;
  }
}

/* Extra small phones - stack all steps */
@media (max-width: 480px) {
  .process-step {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .process-steps:before {
    display: none;
  }
}

.step-number {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background-color: #0047AB !important;
}

.process-icon {
  display: block;
  margin-top: 15px;
  color: #0047AB !important;
}