/* Fonts */
:root {
  --default-font: 'Poppins', sans-serif;
  --heading-font: "Jost",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #F0F0FD; /* Background color for the entire website, including individual sections */
  --default-color: #020202; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #0000D7; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0000D7; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #47b2e4; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #47b2e4; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
  --hero-background-color: #808080;
  --hero-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-image: url('../img/fondo_mesa-de-trabajo-1.png');
  font-family: var(--default-font);
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  /* background-color: var(--background-color); */
  padding: 40px 0;
  scroll-margin-top: 88px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

input, textarea{
  /* width: 100% !important; */
  /* padding: .375rem 2.25rem .375rem .75rem !important; */
  font-size: 12px !important;
  /* font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--bs-body-color) !important; */
  /* -webkit-appearance: none !important;
  -moz-appearance: none !important; */
  /* appearance: none !important; */
  /* background-color: var(--bs-body-bg) !important;
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important; */
  /* background-repeat: no-repeat !important; */
  /* background-position: right .75rem center !important;
  background-size: 16px 12px !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important; */
  /* transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important; */
  /* height: 56px !important; */
}

label{ color: #333333 !important; }

.form-control{
  padding: 1rem .75rem !important;
  background-color: #fff !important;
  border: 1px solid rgba(13, 110, 253, 0.25) !important;
  border-radius: 15px !important;
}

.divStyleSpinner{
  background: #8080801a;
  height: 100% !important;
  width: 100% !important;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner-grow{
  color: #0546C0;
}