:root {

  --primary: #335097;/*azul principal*/
  --primary-two: #0c4e9e;

  --secondary: #04503d; /*Verde oscuro*/
  --secondary-two: #034938;

  --light: #f1f1f1;/*gris claro*/
  --light-two: #efefef;

  --dark: #0a2444;/*azul oscuro*/
  --dark-two: #012041;

  --warning: #4d9ede;/*celeste claro*/
  --warning-two: #4092d1;

  --danger: #602126;
  --danger-two: #4c171b;
  
  --success: #276f55; /*btn cta schedule*/
  --success-two: #1a5a42;

  --black: #01060e;
  --black-two: #000409;

  --white: #ffffff;
  --white-two: #fdfdfd;

}

.bg-blue-dark {
    background-color: #01142a !important;/*background section extra header*/
}
.bg-dark-primary {
    background: linear-gradient(to right, #01142af9 0%, #0c4e9eec 90%);
}
.bg-dark-secondary {
    background: linear-gradient(to right, #011f17f9 0%, #032b20da 90%);
}
.bg-dark-dark {
    background: linear-gradient(to right, #01142af9 0%, #0a2444ec 75%);
}


/* Color Primary */
.text-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.border-primary {
    border-color: var(--primary) !important;
}


/* Color Secondary */
.text-secondary {
    color: var(--secondary) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
.border-secondary {
    border-color: var(--secondary) !important;
}


/* Color Light */
.text-light {
    color: var(--light) !important;
}
.bg-light {
    background-color: var(--light) !important;
}
.border-light {
    border-color: var(--light) !important;
}
.bg-light-dark {
    background-color: #bdbdbd !important;
}
.border-light-dark {
    border-color: #bdbdbd !important;
}


/* Color Dark */
.text-dark {
    color: var(--dark) !important;
}
.bg-dark {
    background-color: var(--dark) !important;
}
.bg-dark-2 {
    background-color: var(--dark-two) !important;
}
.border-dark {
    border-color: var(--dark) !important;
}


/* Color Warning */
.text-warning {
    color: var(--warning) !important;
}
.bg-warning {
    background-color: var(--warning) !important;
}
.border-warning {
    border-color: var(--warning) !important;
}

/* Color Danger */
.text-danger {
    color: var(--danger) !important;
}
.bg-danger {
    background-color: var(--danger) !important;
}
.border-danger {
    border-color: var(--danger) !important;
}

/* Color Success */
.text-success {
    color: var(--success) !important;
}
.bg-success {
    background-color: var(--success) !important;
}
.border-success {
    border-color: var(--success) !important;
}


/* Color Black */
.text-black {
    color: var(--black) !important;
}
.bg-black {
    background-color: var(--black) !important;
}
.border-black {
    border-color: var(--black) !important;
}


/* Color White */
.text-white {
    color: var(--white)!important;
}
.bg-white {
    background-color: var(--white) !important;
}
.border-white {
    border-color: var(--white) !important;
}


/****BOTONES*******/

.btn{
    border-radius: 1rem;
    padding: 0.6rem 1.2rem;
}

/* BUTTON SUCCESS*/
.btn-calls {
    color: var(--white);
    border: #3eab59 1px solid!important;
    background-color: #3eab59;
    transition: 0.3s all ease-out;
}

.btn-calls:hover, .btn-calls:active, .btn-calls:focus-visible, .btn-calls:focus  {
    color: var(--white);
    font-weight: 600;
    background-color:  #31944a!important;
    transition: 0.3s all ease-out;
}
.btn-calls:hover .icon-btn-scale{
    scale: 1.2;
    transition: 0.3s all ease;
}
.btn-calls .icon-btn-scale{
    scale: 1;
    transition: 0.3s all ease;
}
.btn-calls svg.icon-btn-end{
    transform: translateX(0);
    transition: 0.3s all ease;
}
.btn-calls:hover svg.icon-btn-end{
    transform: translateX(10px);
    transition: 0.3s all ease;
}

/* BUTTON OUTLINE WHITE*/
.btn-outline-white {
    color: var(--white)!important;
    border: var(--white) 1px solid!important;
    background-color: transparent!important;
    transition: 0.3s all ease-out;
}

.btn-outline-white:hover, .btn-outline-white:active, .btn-outline-white:focus-visible, .btn-outline-white:focus  {
    color: var(--light-two)!important;
    border: var(--white) 1px solid!important;
    background-color: #ffffff6b!important;
    transition: 0.3s all ease-out;
}
.btn-outline-white:hover .icon-btn-end{
    transform: translateX(10px);
    transition: 0.3s all ease;
}
.btn-outline-white .icon-btn-end{
    transform: translateX(0);
    transition: 0.3s all ease;
}
.btn-outline-white:hover .icon-btn-scale{
    scale: 1.2;
    transition: 0.3s all ease;
}
.btn-outline-white  .icon-btn-scale{
    scale: 1;
    transition: 0.3s all ease;
}