/*  Theme Name: Hiric | Responsive Bootstrap Landing Template
    Author: Themesbrand
    Version: 2.0.0
    File Description: Main CSS file of the template
*/

/* Define primary color and icon color as variables */
:root {
    --primary-color: #3FA7D6;
    --icon-color: var(--primary-color); /* Icon color based on the primary color */
  }
  
  /* Apply the primary color to various text elements */
  .text-primary,
  .read-btn,
  .navbar-custom.navbar-white .navbar-nav li.active a,
  .navbar-custom.navbar-white .navbar-nav li a:hover,
  .navbar-custom.navbar-white .navbar-nav li a:focus,
  .navbar-custom.navbar-white .navbar-nav li a:active,
  .play-btn,
  .blog-title:hover,
  .social-icon:hover i {
    color: var(--primary-color) !important;
  }
  
  /* Apply the primary color to background elements */
  .section-title-border, 
  .bg-primary, 
  .btn-primary,
  .features-item-list li:before,
  .process-left-icon-1 i,
  .process-left-icon-2 i, 
  .account-card .form-check-input:checked {
    background-color: var(--primary-color) !important;
  }
  
  /* Apply the primary color to borders */
  .btn-primary,
  .play-btn,
  .account-card .form-check-input:checked {
    border-color: var(--primary-color) !important;
  }
  
  /* Hover and focus states with slight variation */
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active,
  .btn-primary.focus,
  .btn-primary:active,
  .btn-primary:focus,
  .btn-primary:hover,
  .open > .dropdown-toggle.btn-primary {
    background-color: #3f9dc7;
  }
  
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active,
  .btn-primary.focus,
  .btn-primary:active,
  .btn-primary:focus,
  .btn-primary:hover,
  .open > .dropdown-toggle.btn-primary {
    border-color: #3f9dc7;
  }
  
  /* Add dynamic color for icons in service boxes */
  .services-box i {
    color: var(--icon-color); /* Use the icon color based on the theme */
  }