@charset "UTF-8";
/* 
Theme Name: Design Rangers - Hello Elementor Child Theme
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.2
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/********************* Atoms – Variables, Typography, Buttons, Body Copy Etc. *********************/
/****************************************

ATOMS

Atoms are the smallest core component of any design and are combined to make most elements in the site.

Table of Contents

1. VARIABLES
2. TYPOGRAPHY
3. ANIMATION
4. LINKS
5. BUTTONS
6. DIVIDERS

*****************************************/
/*********************

1. VARIABLES

*********************/
:root {
  --base-font-size: 18px;
  --base-line-height: 1.8em; }

:root {
  --base-text-color: #647082;
  --base-accent-color: #647082;
  --base-link-color: #647082;
  --base-hover-color: #647082;
  --base-divider-color: #647082; }

/*********************

2. TYPOGRAPHY

Baseline typography in Elementor is based on a 1.25 type scale:
https://www.modularscale.com/?16&px&1.25

*********************/
.elementor-widget-heading h1.elementor-heading-title {
  margin-bottom: 0; }

.elementor-widget-heading h2.elementor-heading-title {
  margin-bottom: 0; }

.elementor-widget-heading h3.elementor-heading-title {
  margin-bottom: 0; }

.elementor-widget-heading h4.elementor-heading-title {
  margin-bottom: 0; }

.elementor-widget-heading h5.elementor-heading-title {
  margin-bottom: 0; }

.elementor-widget-text-editor ul, .elementor-widget-text-editor ol {
  margin-bottom: 24px; }
html, body {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

/*********************

3. ANIMATION

Default animation properties

*********************/
.elementor-button-c-warning .elementor-button:after, .elementor-button-c-info .elementor-button, .elementor-widget-button .elementor-button {
  transition: all .5s ease; }

/*********************

4. LINKS

This could include any type of special links or link overrides
Default links are styled in Elementor's Global Site Styles

*********************/
/*********************

5. BUTTONS

Used to override Elementor's button styles
Perfect for changing button styles using Elementor's built-in button types
Comment code out to remove changes

*********************/
.elementor-button-c-info .elementor-button, .elementor-widget-button .elementor-button {
  color: #fff;
  background: var(--base-link-color);
  font-size: 1em; }

.elementor-widget-button .elementor-button {
  font-weight: bold; }
  .elementor-widget-button .elementor-button:hover {
    background: var(--base-hover-color); }

.elementor-button-c-info .elementor-button {
  background: transparent;
  border: 1px solid var(--base-link-color);
  color: var(--base-link-color); }
  .elementor-button-c-info .elementor-button:hover {
    background: var(--base-link-color);
    color: #fff; }

.elementor-button-c-success .elementor-button {
  font-weight: bold;
  fill: var(--base-link-color);
  color: var(--base-link-color);
  background-color: transparent;
  border-style: dotted;
  border-width: 0 0 2px;
  border-color: transparent;
  padding: 8px 0;
  position: relative; }
  .elementor-button-c-success .elementor-button:hover {
    background: transparent;
    border-color: var(--base-link-color); }

.elementor-button-c-warning .elementor-button {
  fill: var(--base-link-color);
  color: var(--base-link-color);
  background-color: transparent;
  border-style: dotted;
  border: none;
  padding: 8px 0;
  position: relative; }
  .elementor-button-c-warning .elementor-button:hover {
    color: var(--base-link-color);
    background: transparent; }
    .elementor-button-c-warning .elementor-button:hover:after {
      right: -24px; }
  .elementor-button-c-warning .elementor-button:after {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: -20px;
    top: 50%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%); }

.elementor-button-c-danger .elementor-button {
  border: 1px solid var(--base-link-color);
  border-radius: 4px;
  background-color: transparent;
  color: var(--base-link-color);
  padding: 4px 8px;
  font-size: 0.8em;
  font-weight: normal;
  letter-spacing: 0.2;
  text-transform: uppercase; }
  .elementor-button-c-danger .elementor-button:hover {
    background: var(--base-link-color);
    color: #fff; }

/****************************************

6. DIVIDERS
Used to override bulit-in HR and Elementor divider styles

*****************************************/


/********************* Design Rangers Elementor Spacing *********************/
/****************************************

SECTION PADDING – DEFAULTS
Default padding for sections.

*****************************************/
:root {
  --section-padding-side: 24px;
  --section-padding-default: 96px;
  --section-padding-small: 48px;
  --section-padding-medium: 160px;
  --section-padding-large: 200px;
  --section-padding-xl: 280px;
  --section-padding-xxl: calc(280px + 5%); }
  @media (max-width: 1024px) {
    :root {
      --section-padding-default: 80px;
      --section-padding-small: 36px;
      --section-padding-medium: 96px;
      --section-padding-large: 160px;
      --section-padding-xl: 200px;
      --section-padding-xxl: calc(200px + 5%); } }
  @media (max-width: 767px) {
    :root {
      --section-padding-default: 32px;
      --section-padding-small: 24px;
      --section-padding-medium: 32px;
      --section-padding-large: 32px;
      --section-padding-xl: 32px;
      --section-padding-xxl: 32px; } }
.section-pbxxl, .section-pbxl, .section-pbl, .section-pbm, .section-pbs, .section-pbn, .section-ptxxl, .section-ptxl, .section-ptl, .section-ptm, .section-pts, .section-ptn {
  padding-left: var(--section-padding-side);
  padding-right: var(--section-padding-side); }

.section-default-pad {
  padding: var(--section-padding-default) 24px; }

/****************************************

SECTION PADDING – TOP
Used to change default spacing on sections.
Applied by using custom dropdown elements added to Elementor sections.

*****************************************/
.section-ptn {
  padding-top: 0px !important; }

.section-pts {
  padding-top: var(--section-padding-small); }

.section-ptm {
  padding-top: var(--section-padding-medium); }

.section-ptl {
  padding-top: var(--section-padding-large); }

.section-ptxl {
  padding-top: var(--section-padding-xl); }

.section-ptxxl {
  padding-top: var(--section-padding-xxl); }

.elementor-section.elementor-inner-section {
  padding-left: 0;
  padding-right: 0; }

/****************************************

SECTION PADDING – BOTTOM
Used to change default spacing on sections.
Applied by using custom dropdown elements added to Elementor sections.

*****************************************/
.section-pbn {
  padding-bottom: 0px !important; }

.section-pbs {
  padding-bottom: var(--section-padding-small); }

.section-pbm {
  padding-bottom: var(--section-padding-medium); }

.section-pbl {
  padding-bottom: var(--section-padding-large); }

.section-pbxl {
  padding-bottom: var(--section-padding-xl); }

.section-pbxxl {
  padding-bottom: var(--section-padding-xxl); }

/********************* Helper Classes *********************/
/****************************************

HELPER CLASSES

Helper classes are common, global classes that can be applied to elements to change their behavior.
These are typically items that we would apply multiple times throughout a project.

Table of Contents

1. TYPOGRAPHY
2. MARGINS

*****************************************/
/****************************************

1. TYPOGRAPHY

Helper classes to help control text sizes and line width.

*****************************************/
/**** SMALLER BODY FONT ****/
.text-small p, p.text-small {
  font-size: 0.888em;
  line-height: 1.8; }
  @media (max-width: 767px) {
    .text-small p, p.text-small {
      font-size: 1em; } }
/**** LARGER BODY FONT FOR INTRO TEXT ****/
.text-large p, p.text-large {
  font-size: 1.25em;
  line-height: 1.8; }
  @media (max-width: 767px) {
    .text-large p, p.text-large {
      font-size: 1em; } }
/**** NARROW TEXT – DECREASES LINE WIDTH FOR BETTER READABILITY ****/
.text-narrow {
  max-width: 800px; }

/**** NARROW TEXT CENTERED – CENTER THE NARROW TEXT WIDGET ****/
.text-narrow-centered {
  max-width: 800px;
  margin: 0 auto; }

/****************************************

2. MARGINS

Classes to add or remove margin below headlines and text globally.

m = margin
t = top
r = right
b = bottom
l = left

Example: mbn = Margin Bottom None

*****************************************/
.mbn, .mbn.elementor-widget, .mbn.elementor-widget:not(:last-child), .mbn h1, .mbn h2, .mbn h3, .mbn h4, .mbn h5, .mbn h6, .mbn p {
  margin-bottom: 0 !important; }

.mbs, .mbs.elementor-widget, .mbs h1, .mbs h2, .mbs h3, .mbs h4, .mbs h5, .mbs h6, .mbs p {
  margin-bottom: 8px; }

.mbm, .mbm.elementor-widget, .mbm h1, .mbm h2, .mbm h3, .mbm h4, .mbm h5, .mbm h6, .mbm p {
  margin-bottom: 16px; }

.mbl, .mbl.elementor-widget {
  margin-bottom: 24px; }

.mbxl, .mbxl.elementor-widget {
  margin-bottom: 48px; }

@media (max-width: 1024px) {
  .mbl, .mbl.elementor-widget {
    margin-bottom: 16px; }
  .mbxl, .mbxl.elementor-widget {
    margin-bottom: 24px; } }


/********************* Elementor Widgets *********************/
/****************************************

ELEMENTOR WIDGETS

Global settings to override default Elementor widget styles.

Table of Contents

1. ICON LISTS
2. TOGGLES AND ACCORDIONS

*****************************************/
/****************************************

1. ICON LISTS

Used to override Elementor's icon list widget styles
Uncomment to effect all default icon lists
The styles below add horizontal dividers, extra padding, and a vertical divider after the icon

*****************************************/
li.elementor-icon-list-item {
  padding: inherit;
  border-top: inherit; }
  li.elementor-icon-list-item:first-child {
    border-top: inherit; }
  li.elementor-icon-list-item a {
    color: inherit; }
    li.elementor-icon-list-item a:hover {
      color: inherit; }
  li.elementor-icon-list-item i {
    color: inherit; }
  li.elementor-icon-list-item .elementor-icon-list-icon {
    padding: inherit; }
  li.elementor-icon-list-item .elementor-icon-list-text {
    padding: inherit; }

/****************************************

2. TOGGLES & ACCORDION ELEMENTS

Used to override Elementor's toggle and accordion widgets
Add code to each element to make changes

*****************************************/
.elementor-toggle .elementor-tab-title {
  padding: inherit;
  border-bottom: inherit; }
  .elementor-toggle .elementor-tab-title a {
    color: inherit; }

.elementor-toggle .elementor-active a, .elementor-toggle .elementor-toggle-icon-opened {
  color: inherit; }

.elementor-accordion .elementor-accordion-item {
  border-color: var(--base-divider-color); }
  .elementor-accordion .elementor-accordion-item .elementor-tab-title {
    padding: inherit; }
    .elementor-accordion .elementor-accordion-item .elementor-tab-title a {
      color: inherit; }
    .elementor-accordion .elementor-accordion-item .elementor-tab-title .elementor-accordion-icon {
      color: inherit; }
  .elementor-accordion .elementor-accordion-item .elementor-active a, .elementor-accordion .elementor-accordion-item .elementor-accordion-icon-opened {
    color: inherit; }

/********************* Theme Specific Custom Styling *********************/
/****************************************

CUSTOM CSS

Custom CSS for any additoinal global site attributes.

*****************************************/

body .elementor-animation-grow:hover {
    transform: scale(1.05);
}