/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Navigation
# Content
## Custom Element
### Accordion
# Gravity Forms
# Footer
# Media - Max
# Media - Min
--------------------------------------------------------------*/
:root {
  --white: #fff;
  --black: #000;
  --navy: #141631;
  --white-off: #f5f5f5;
  --maroon: #670c25;
  --pink: #d21459;
  --orange: #ff7b00;
  --orange-burnt: #a72c1e;
  --orange-alt: #eb4c39;
  --yellow: #ffaa00;
  --shadow: rgba(16, 24, 40, 0.05) 0px 6px 15px -2px;

  --font-primary: 'Roboto Flex', sans-serif;
  --font-h1: 56px;
  --font-body: 18px;
}
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
.screenreader-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.d-none{
  display: none!important;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
header .elementor-widget-off-canvas .e-off-canvas .e-off-canvas__content {
  margin-right: 20px;
  margin-top: 30px;
}
.caret-links li.menu-item a{
    position: relative;
}
.caret-links li.menu-item a::after{
  content: '\f0da';
  position: relative!important;
  display: inline-block;
  font-family: "Font Awesome 5 FREE";
  font-weight: 900;
  color: var(--orange);
  padding-left: 5px;
  right: 0;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
html{
  font-size: var(--font-body);
  font-family: var(--font-primary);
}
p {
    margin-block-start: 0;
    margin-block-end: 0;
}
.text-center{
  text-align: center;
}

.roboto-flex-<uniquifier> {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}
.list-checkmark ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-checkmark li {
  position: relative;
  padding-left: 1.75em; /* room for the icon + gap */
  margin-top: 1rem;
}

.list-checkmark li::before {
  content: '\f00c';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--orange);
  position: absolute;
  left: 0;
  top: 0;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.btn{
  position: relative;
  display: inline-block;
  padding: 15px 28px 13px 28px;
  font-size: 18px!important;
  line-height: normal!important;
  font-weight: 600!important;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  text-align: center;
  border: 0;
  text-decoration: unset !important;
  overflow: hidden;
  border-radius: 999px;

  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 8px 8px 0 rgba(255, 60, 0, 0.25)!important;
  
  &:hover,
  &:focus{
    color: var(--black);
    background-color: var(--white);
    border-color: var(--black);
  }
}

.btn.transparent{
  padding: 0;
  background: transparent;
  box-shadow: unset!important;
  color: var(--orange);
  text-align: left;
  border-radius: 0;

  & .fa-arrow-right{
    transform: rotate(-45deg);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  }
  &:hover,
  &:focus{
    color: var(--white);
    & .fa-arrow-right{
      transform: rotate(0deg);
    }
  }
}


table {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 18px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white)!important;
}
table td, 
table th{
  border-color: rgba(0, 0, 0, 0.2);
  border-bottom: 0!important;
  border-right: 0!important;
}
table tr > :first-child {
  border-left: 0!important;
}
table th {
  background: var(--navy);
  color: var(--orange);
  border-color: rgba(255, 255, 255, 0.2);
}
table tbody > tr:nth-child(2n+1) > td, 
table tbody > tr:nth-child(2n+1) > th{
  background-color: var(--white-off)!important;
}
table .fa-check-circle{
  font-size: 24px;
  color: #91B10B;
}
table .fa-times{
  border: 2px solid #000;
  padding: 3px 5px;
  border-radius: 50%;
}
table .d-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  -ms-flex-line-pack: center;
  align-content: center;
}
table tbody tr:hover > td,
 table tbody tr:hover > th{
  background: var(--white)!important;
 }
 table tbody > tr:hover:nth-child(2n+1) > td, 
table tbody > tr:hover:nth-child(2n+1) > th{
  background-color: var(--white-off)!important;
}
/*--------------------------------------------------------------
## Blog
--------------------------------------------------------------*/
.single-post #sandbox .elementor-element .elementor-widget-container > *{
  margin-bottom: 1.5rem;
}
.single-post #sandbox  .wp-element-button{
  position: relative;
  display: inline-block;
  padding: 15px 28px 13px 28px;
  font-size: 18px!important;
  line-height: normal!important;
  font-weight: 600!important;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  text-align: center;
  border: 0;
  text-decoration: unset !important;
  overflow: hidden;
  border-radius: 999px;

  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 8px 8px 0 rgba(255, 60, 0, 0.25)!important;
  
  &:hover,
  &:focus{
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
  }
}
.single-post #sandbox .wp-block-table table{
  border-radius: 0!important;
  border-color: #000;
}
@media only screen and (max-width: 552px) {
  .single-post #sandbox .wp-block-image.alignleft,
  .single-post #sandbox .wp-block-image.alignright{
    text-align: center;
    float: unset!important;
  }
}
/*--------------------------------------------------------------
# Gravity forms
--------------------------------------------------------------*/
.gform_required_legend{
  display: none!important;
}
.gform-body .gform_fields {
  row-gap: 18px!important;
}
.gfield_required .gfield_required_asterisk{
  font-size: 16px;
  color: var(--black);
}
.gform-body label.gfield_label,
.gform-body legend.gfield_label{
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: var(--black);
}
.gform-body input[type="text"], .gform-body input[type="number"], .gform-body input[type="email"], .gform-body input[type="url"], .gform-body input[type="password"], .gform-body input[type="search"], .gform-body input[type="reset"], .gform-body input[type="tel"], .gform-body input[type="date"], .gform-body select, .gform-body textarea {
  text-align: left !important;
  line-height: normal !important;
  padding: 15px 20px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  border: none !important;
  box-shadow: none !important;
  height: unset !important;
  outline: none !important;
  border-radius: 12px !important;
  border: 1px solid var(--black)!important;
  background: var(--white)!important;
}
#book .gform_wrapper.gform-theme--foundation form .gform-footer .gform_button[type="submit"]{
  position: relative;
  display: inline-block;
  padding: 15px 28px 13px 28px;
  font-size: 18px!important;
  line-height: normal!important;
  font-weight: 600!important;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  text-align: center;
  border: 0;
  text-decoration: unset !important;
  overflow: hidden;
  border-radius: 999px;

  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 8px 8px 0 rgba(255, 60, 0, 0.25)!important;
  
  &:hover,
  &:focus{
    color: var(--black);
    background-color: var(--white);
    border-color: var(--black);
  }
}


/*--------------------------------------------------------------
# Media - MAX
@media only screen and (min-width: 769px) and (max-width: 992px) {}
--------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
  :root {
    --font-h1: 52px;
  }
}

@media only screen and (max-width: 992px) {
  :root {
    --font-h1: 45px;
  }
  /*--Nav --*/ 
  #spice-mega-menu .e-n-menu-heading{
    background-color: #050A20;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  #spice-mega-menu .elementor-widget-n-menu .e-n-menu-content{
    padding: 0!important;
  }
  #spice-mega-menu .elementor-widget-n-menu .e-n-menu-title-text{
    font-size: 20px;
  }
}
/*--------------------------------------------------------------
# Media - MIN
--------------------------------------------------------------*/
@media only screen and (min-width: 993px) {

  #spice-mega-menu .e-n-menu-dropdown-icon{
    display: none!important;
  }
  #spice-mega-menu .treefrog-btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
}