:root {
   --color-primary: #0D2633;
   --color-accent-1-light: #9ABF34;
   --color-accent-1-dark: #2E90CC;
   --color-accent-2-light: #DDDDDD;
   --color-accent-2-dark: #121212;
}



/* 

Contents

--Fonts
--Hero
--Menu
--Layouts
--Components
--Media Queries
   -- <= 1270px
   -- <= 950px


*/

body {
   font-family: "Rethink Sans", sans-serif;
   color: #0D2633;
}

:root {
   /* fluid-font 0: 8.3724px ? 16.7772px */
   --fluid-font-0: clamp(0.8rem, 0.1807rem + 1.4617vi, 1.0486rem);
   /* fluid-font 1: 10.0469px ? 20.9715px */
   --fluid-font-1: clamp(0.9rem, 0.1826rem + 1.8999vi, 1.3107rem);
   /* fluid-font 2: 12.0563px ? 26.2144px */
   --fluid-font-2: clamp(1rem, 0.1764rem + 2.4623vi, 1.6384rem);
   /* fluid-font 3: 14.4676px ? 32.768px */
   --fluid-font-3: clamp(1.15rem, 0.1583rem + 3.1827vi, 2.048rem);
   /* fluid-font 4: 17.3611px ? 40.96px */
   --fluid-font-4: clamp(1.1851rem, 0.1232rem + 4.1042vi, 2.56rem);
   /* fluid-font 5: 20.8333px ? 51.2px */
   --fluid-font-5: clamp(1.4rem, 0.0643rem + 5.2812vi, 3.2rem);
   /* fluid-font 6: 25px ? 64px */
   --fluid-font-6: clamp(1.68rem, -0.0272rem + 6.7826vi, 4rem);
   /* fluid-font 7: 30px ? 80px */
   --fluid-font-7: clamp(1.875rem, -0.163rem + 8.6957vi, 5rem);
}

main:has(#support-iframe) {
   background-color: #0D2633;
}


/* Fonts =================
================================================================================================= */
a {
   color: inherit;
}

.h1-headline {
   font-family: "Onest", sans-serif;
   font-weight: bold;
   font-size: var(--fluid-font-6);
   line-height: 65px;
}

.h2-headline {
   font-family: "Onest", sans-serif;
   font-weight: bold;
   font-size: 50px;
   line-height: 50px;
}

.h3-headline {
   font-family: "Onest", sans-serif;
   font-weight: bold;
   font-size: 35px;
   line-height: 45px;
}

.p-large {
   font-size: 20px;
   line-height: 30px;
}

.p-medium {
   font-size: 16px;
   line-height: 30px;
}

.p-small {
   font-size: 15px;
   line-height: 25px;
}

h1,h2,h3,h4 {
   font-family: "Onest", sans-serif;
}

a:hover {
   color: inherit;
}

.faq-header {
   font-size: var(--fluid-font-3);
   margin-bottom: revert;
}

.font-light {
   color: #566770;
}

.font-red {
   color: #F46E4A;
}

.gap-3 {
   gap: 3rem;
}

.link-red {
   color: #F46E4A;
   text-decoration: none;
   font-size: inherit;
}

.link-red:hover {
   color: #d33308;
}

.aos-menu-desktop, .pure-menu-link {
   color: white;
}



/* Hero ============
==================================================================================================== */

.hero-background {
   background-image: url("//img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/inphonite-supergraphic-outline-left--346.png" );
   /* color: #FFFFFF; */
   background-size: 10vw;
   background-position: left bottom;
   background-repeat: no-repeat;
}

.hero-section {
   width: 90%;
   max-width: 1500px;
   margin: 0 auto;
   padding: 1.5rem 0;
   justify-content: center;
   flex-wrap: nowrap !important;
   align-items: center;
}

.hero-header {
   font-family: "Onest", sans-serif;
   font-weight: bold;
   font-size: var(--fluid-font-4);
   padding-bottom: 1.5rem;
}

.hero-subheader {
   font-family: "Rethink Sans", sans-serif;
   font-size: var(--fluid-font-1);
   font-weight: 100;
   margin-right: 10%;
}

.hero-buttons {
   margin: 2rem 0 3rem 2rem;
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 1em;
}

.hero-image {
   margin: auto 0;
   min-width: 200px;
   width: 40vw;
   max-width: 500px;
   border-radius: .7em;
}

/* Menu ==================
================================================================================================= */

.menu-sub .pure-menu-link {
   color: #121212;
}

.menu-sub {
   display: grid;
   grid-template-columns: 2fr 1fr;
   position: fixed;
   top: 4.1rem;
   left: 0;
   right: 0;
   margin-right: 1rem;
   background-color: white !important;
   white-space: normal;
   border-bottom: 3px solid #0d2633;
   cursor: default;
}

.menu-sub > div {
   padding: 1rem;
}

.mega-menu-header {
   margin-left: 2rem;
   margin-bottom: 1em;
}

.mega-menu-link {
   display: flex;
   gap: .5rem;
   padding-right: 1rem;
   align-items: center;
}

.mega-menu-link h4 {
   font-size: 1rem;
}

.mega-menu-page-list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   margin-bottom: 2rem;
}

.mega-menu-article-list {
   background-color: #f5f6f8;
}

.mega-menu-article-list h4 {
   /* margin-bottom: 1.5em; */
   max-width: 12em;
   font-size: 1.5rem;
}

.mega-menu-article-list h4:not(:first-child) {
   font-size: 1rem;
}

.mega-menu-article-list > h4 {
   margin-bottom: 1em;
}

.mega-menu-article-list a {
   display: flex;
   gap: 1rem;
   white-space: normal;
}

.mega-menu-article-list img {
   width: 10em;
   height: 6em;
   object-fit: cover;
}

.mega-menu-view-all {
   margin-left: 2rem;
   color: #F46E4A;
   font-size: var(--fluid-font-1);
   font-weight: 500;
} 

.mega-menu-view-all::after {
   content: ">";
   margin-left: .75em;
   vertical-align:middle;
   font-size: 1.2em;
}

.menu-sub a:hover {
   color: #c93a13;
}

.menu-sub > h4 {
   display: block;
   margin-left: 2.5rem;
   margin-bottom: 2rem;
   color: #121212;
}

.menu-sub h4 {
   display: block;
   color: #121212;
}

.menu-sub p {
   color: #121212;
}

.menu-sub ul {
   right: 0;
}

.pure-menu-link:hover {
   background-color: revert;
}

.pure-menu-item:hover {
   background-color: var(--add-25-gray);
}

.pure-menu-selected:hover {
   background-color: var(--add-50-gray);
}

li.pure-menu-has-children {
   position: relative;
}

nav.pure-menu-has-children .pure-menu-link {
   background-color: white;
}

/* .pure-menu-has-children:hover .menu-sub, .pure-menu-has-children:hover .pure-menu-children, .pure-menu-has-children:hover .menu-sub h4{
   display: block;
} */

/* Layouts ==============
================================================================================================ */

.aos-article {
   align-items: flex-start;
}

.aos-article-tile {
   width: 100%;
   min-width: 310px;
   max-width: 500px;
}

.aos-article-root {
   margin: 5rem auto auto auto;
}

.aos-article-body h2 {
   font-size: var(--fluid-font-3);
}

.aos-article-body p {
   font-size: var(--fluid-font-1);
   line-height: 1.5;
}

.aos-article-widget-snippet {
   color: #0d2633;
   line-height: 1.3em;
   font-size: var(--fluid-font-1);
   font-weight: 600;
}

.aos-content-container {
   position: initial;
   overflow-y: initial;
   overflow-x: initial;
}

.aos-header-logo > img {
   height: auto !important;
}

@media(min-width: 950px){
   .aos-header-logo > img {
      margin-left: 2rem;
   }
}

.aos-header-root {
   background-color: #0D2633;
   color: white;
   position: sticky;
   padding-top: 1.3rem;
}

.aos-main-root {
   background-color: var(--color-light-0);
}

.aos-menu-desktop {
   place-self: center;
}

.aos-page-root {
   position: static;
}

.aos-footer-menu {
   justify-content: flex-start;
   gap: 4rem;
}

.aos-footer-menu li {
   max-width: 10rem;
}

.aos-section {
   padding: .5rem 0;
}

.footer-corporate-info-list {
   flex-direction: row;
   gap: 2em;
   flex-wrap: wrap;
}

.footer-corporate-info-list a:hover {
   color: var(--add-75-white);
}

.footer-links {
   margin-left: 5rem;
}

.aos-section-column-1 {
   position: relative;
}

.aos-section-controls {
   position: absolute;
   left: 40px;
   top: 80px;
}

.aos-toc {
   background-color: #f5f6f8;
   padding: 1em 1em 0.25em 0;
   border-radius: 0.5em;
}

.aos-toc > h3 {
   padding-left: 1rem;
}

.aos-toc li {
   padding-left: 1rem;
}

#toc-list {
   overflow: hidden;
}

.aos-toc-more {
   height: 4.5em;
}

/* .aos-toc-more {
   height: auto;
   overflow: inherit;
} */

.article-layout {
   display: grid;
   grid-template-columns: 3fr 1fr;
   gap: 0 calc(.3vw + 0.5em);
}

.article-category {
   background-color: #f5f6f8;
   padding: .1em 1em;
   border-radius: 0.25em;
   color: #121212;
   font-size: 0.7em;
}

.article-sidebar {
   margin-top: 1rem;
}

.article-cta {
   display: grid;
   gap: 2rem;
   border-radius: .5em;
   justify-items: center;
   padding: 0.5rem;
   text-align: center;
}

.article-cta h3 {
   font-size: var(--fluid-font-2);
}

.article-cta a {
   font-size: calc(9px + 0.390625vw);
}

.article-cta img {
   width: 90%;
}

.article-display {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   
}

.article-display > h3 {
   grid-column: 1 / span 3;
}



.background-pattern-dark {
   background-image: url("//img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/inphonite-supergraphic-dark-solid-left--344.png"), url("//img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/inphonite-supergraphic-dark-solid-right--343.png");
   /* color: #FFFFFF; */
   background-size: 25em, 25em;
   background-position: left bottom, right top;
   background-repeat: no-repeat;
}

.background-pattern-light {
   background-image: url("//img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/inphonite-supergraphic-light-solid-left--348.png"), url("//img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/inphonite-supergraphic-light-solid-right--347.png");
   background-size: 25em, 25em;
   background-position: left bottom, right top;
   background-repeat: no-repeat;
}

.hero-background {
   background-image: url("//img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/inphonite-supergraphic-outline-left--346.png" );
   background-size: 40em;
   background-position: left bottom;
   background-repeat: no-repeat;
}

.sub-menu {
   display: flex;
   margin-left: auto;
   margin-right: 3em;
}

.sub-menu > li {
   vertical-align: unset !important;
}

#sub-menu-trial-button {
   top: -3px;
}

.text-center {
   text-align: center;
}

.toc-current-article {
   color: #F46E4A;
   border-left: 3px solid #F46E4A;
   padding-left: 0.8rem !important;
}

.button-careers-postion {
   border-radius: 0.5rem;
   background-color: #F5F6F8;
}

.careers-item:hover {
   background-color: #f5f6f8;
}

.careers-item hr {
   /* margin-bottom: 1.25rem; */
   color: #fafbfc;
}

.careers-item-layout {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.careers-item-layout-icon {
   font-size: 2.5rem;
   margin-right: 2rem;
}

.container {
   margin: 0 auto;
   width: 85%;
   max-width: 1400px;
}

.container-flex {
   display: flex;
   /* justify-content: space-around; */
}

.container-flex--detail {
   padding: 1em;
   border: 1px solid #d4d9db;
   border-radius: .5em;
   display: flex;
   gap: 2em;
   align-items: center;
   margin-bottom: 1.5em;
}

.container-grid-2 {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: 1fr 1fr;
   /* grid-template-rows: 1fr 1fr 1fr; */
}

.container-grid-3-2 {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: 1fr 1fr;
   /* grid-template-rows: 1fr 1fr 1fr; */
}

.container-grid-3 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2em;
}

.industry-item {
   border-radius: .5em;
   background-color: #253c47;
   padding: 2em;
}

.industry-item >* {
   margin-bottom: 1em;
}

.background-inherit {
   background-color: inherit;
}

.container-grid-2 .aos-article-widget-item {
   width: auto;
}

.container-grid-3-2 .aos-article-widget-item {
   width: auto;
}

.flex-column ul{
   display: flex;
   flex-direction: column;
}

.flex-column a {
   display: grid;
   gap: 1em;
   grid-template-columns: 1fr 2fr;
   align-items: center;
}

.container-footer {
   display: flex;
   width: 90vw;
   max-width: 1500px;
   justify-content: space-between;
   margin: 0 auto 4rem auto;
}

.container-advantages {
   flex-wrap: wrap;
   margin-top: 3rem;
}

.container-metrics {
   background-color: #F5F6F8;
   border-radius: 1em;
   /* width: 80%; */
   padding: 3.5rem 4rem;
}

.background-teal {
   background-color: #0D2633;
   color: white;
}

.container-review {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   gap: 1rem;
}

.container-solutions {
   margin: 4rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    grid-gap: 1.5rem;
    grid-auto-flow: column;
}

.container-solutions img {
   margin-top: 1rem;
}

.advantages-item {
   margin: 1.5rem 1rem;
   width: 25rem;
}

.advantages-item h4 {
   font-size: 1.75rem;
}

.custom-banner-layout {
   margin: 3rem auto;
   display: flex;
   gap: 3rem;
}

.custom-banner-image {
   font-size: var(--fluid-font-0);
   width: 40vw;
   max-width: 650px;
   min-width: 285px;
   border-radius: 1rem;
   object-fit: contain;
}

.custom-banner-text {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: flex-start;
   max-width: 30em;
}

.custom-banner-category {
   background-color: #f5f6f8;
   padding: .1em 1em;
   border-radius: 0.25em;
   color: #121212;
   font-size: 0.7em;
}

.features-article-section {
   border: 1px solid #A9AEB0;
   border-radius: .5em;
   padding: 2em;
}

.features-article-section-left {
   padding: 1.5em;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.features-article-section-right {
   background-color: #f5f6f8;
   margin: 3em;
   padding: 1.5em;
   border-radius: .5em;
   font-size: var(--fluid-font-1);
}

.features-item {
   margin-top: 2rem;
}

.features-item picture {
   display: flex;
   align-items: center;
}

.features-text {
   align-self: center;
   text-align: left;
   padding-left: 5rem;
   padding-right: 5rem;
}

.features-text h4 {
   font-size: var(--fluid-font-4);
}

.features-reminders-list {
   margin-top: 4em;
   margin-bottom: 2rem;
   display: flex;
   justify-content: flex-start;
   padding-left: 0;
   list-style: none;
   flex-wrap: wrap;
   gap: .7em;
   font-size: 1rem;
   font-weight: 700;
}

.features-reminders-list li {
   border: 1px solid #A9AEB0;
   border-radius: .5em;
   padding: .6em .7em;
   cursor: pointer;
}

.features-reminders-list li:hover {
   background-color: #f5f6f8;
   box-shadow: -1px 1px 1px;
}

.flex-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.hide {
   display: none;
}

.industries-item {
   text-align: left;
   border: 1px solid #d4d9db;
   border-radius: .5em;
   padding-bottom: 2em;
}

.industries-item img {
   width: 100%;
   height: 15em;
   object-fit: cover;
}

.industries-item >*:not(:first-child) {
   padding: .5em 1.5em;
}

.justify-around {
   justify-content: space-around;
}

.justify-responsive {
   justify-content: space-between;
}

.knowledge-item {
   margin: 0.5rem 0;
   max-width: 400px;
   min-width: 310px;
   width: 25vw;
   height: 300px;
   border: 1px solid #e2e4e5;
   border-radius: 0.5em;
   overflow-y: hidden;
}

.knowledge-item p {
   display: inline-block;
   margin: 1rem 2rem 1rem 2rem;
   padding: 0.3rem 0.75rem;
   background-color: #EAECED;
   border-radius: 5px;
   font-size: var(--fluid-font-0);
   font-weight: 600;
}

.knowledge-item h4 {
   margin: 0 2rem 1.5rem 2rem;
   font-size: 1.2rem;
   font-weight: 400;
   line-height: 1.25;
}

.margin-top-5 {
   margin-top: 4.4rem;
}

.margin-left-lg {
   margin-left: 1.5rem;
}

.metrics-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.metric {
   text-align: center;
}

.metric-heading {
   margin-bottom: 0;
   font-size: 3.4rem;
   font-weight: bold;
   color: #9ABF34;
}

.padding-section {
   padding-top: 4rem;
   padding-bottom: 4rem;
}

.padding-section-less {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
}

.pricing-selector {
   margin: 0 auto 3em auto;
   padding: .5em .75em;
   width: 13em;
   display: flex;
   gap: .5em;
   background-color: #f5f6f8;
   justify-content: space-around;
   border-radius: .5em;
}

.pricing-selector div {
   margin: 0;
   border-radius: .5em;
   background-color: #f46e4a;
   color: white;
   font-weight: 700;
   width: 100%;
   text-align: center;
}

.pricing-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

.pricing-item {
   margin: 1rem;
   padding: 2rem 1.5rem;
   border: 1px solid #d4d9db;
   border-radius: .5em;
}

.pricing-item-list > li {
   text-indent: -2rem;
   padding-left: 2rem;
}

.pricing-item-popular {
   border: 1px solid;
   border-top: 2.5em solid;
   margin-top: -1.5em;
   padding-top: 2em;
   position: relative;
}

.pricing-item-popular-heading {
   position: absolute;
   top: -2.5em;
   left: 0;
   right: 0;
   text-align: center;
   color: white !important;
   font-weight: 600;
   font-size: var(--fluid-font-1);
}

/* .pricing-item::before {
    display: block;
    content: "hello";
    color: red;
    position: relative;
    top: -4rem;
    left: -1rem;
    background-color: black;
    width: 1fr;
    margin: 0;
    padding: 0;
} */

.pricing-item hr {
   margin: 2em 0;
}

.pricing-item p {
   color: #566770;
}

.pricing-item span {
      font-weight: bold;
      font-size: 4em;
      color: #0d2633;
}

.pricing-item ul {
   list-style: none;
   line-height: 2;
   margin-bottom: 2.5rem;
   padding-left: 0;
}

.list-careers {
   line-height: 2;
}

.list-green-check {
   list-style: none;
   font-size: var(--fluid-font-1);
   line-height: 2;
   color: #566770;
   padding-left: 0;
}

.pricing-item li::before, .list-green-check li::before{
   content: "\2713";
   color: #adcb5a;
   font-size: 1.25em;
   font-weight: 600;
   margin-right: 1em;

}

.pure-menu-has-children {
   cursor: pointer;
}

.pure-menu-horizontal {
   width: inherit;
   display: flex;
}

.pure-menu-selected>.pure-menu-link, .pure-menu-selected>.pure-menu-link:visited  {
   color: white;
   font-weight: 700;
}

.resources-blog-main li {
   width: 100% !important;
}

.resources-blog-main  .aos-article-widget-image{
   height: 20em;
}

.reverse {
   flex-direction: row-reverse;
}

.review-header {
   justify-content: space-between;
   margin-bottom: 4rem;
}

.prev,
.next,
.benefit-prev,
.benefit-next {
   display: none;
}

.review-header h3 {
   max-width: 10em;
}

.review-item {
   display: flex;
   flex-direction: column;
   width: 22rem;
   border: #dedede solid 2px;
   border-radius: 0.5em;
   padding: 2em 2em 1.5em 2em;
}

.review-signature {
   margin-top: auto;
   text-align: left;
}

div.review-signature + p {
   font-weight: bold;
}

.section-cta {
   align-items: center;
}

.section-cta img {
   width: 23vw;
   max-width: 500px;
   min-width: 300px;
}

.solutions-div {
   display: flex;
   gap: 1rem;
   padding: 1.5rem;
   line-height: 1.5;
   background-color: #253C47;
   border-radius: 0.5rem;
}

.stats-item {
   border-left: 4px solid #0D2633;
   padding: 0.4em 1em 0 2em;
   max-width: 21em;
}

.stats-percentage {
   margin: 0;
   font-size: var(--fluid-font-6);
   font-weight: 700;
}

.subheading-narrow {
   max-width: 45rem;
   margin: auto;
}

.support-trending-pages-container {
   margin: 4em auto 0 auto;
   width: 50%;
   min-width: 55em;
}

.support-trending-pages-list {
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5em;
   text-align: left;
   font-size: var(--fluid-font-2);
   font-weight: 700;
}

.support-trending-pages-list i {
   margin-right: .5em;
}

.support-trending-pages-list li:hover {
   color: #2e90cc;
}

.top-pad-2 {
   padding-top: 2rem;
}

.top-pad-4 {
   padding-top: 4rem;
}

.wrap {
   flex-wrap: wrap;
}

/* Components =============
   01 Buttons
   02 Images
   03 Other
============================================================================================================== */

/* Buttons ====================================
================================================ */

.article-image {
   margin-top: 1rem;
   width: 100%;
   border-radius: .5rem;
}

.aos-article-image {
   height: 9rem;
   background-position: top;
}

.aos-article-snippet {
   padding: 1rem;
   line-height: 1.25;
   font-size: var(--fluid-font-2);
   font-weight: 700;
   color: #0d2633; 
}

.aos-article-title {
   display: none;
}

.aos-menu-mobile-button {
   position: absolute;
   right: .5rem;
}

.button-show-more {
   margin: 0.5em 0;
   color:#F46E4A;
   text-align: center;
}

.button-show-more:hover {
   background-color: #A9AEB0;
   
}


.button-trial {
   background-color: #F46E4A;
   padding: .8em;
   border-radius: 0.5em;
   font-family: "Onest", sans-serif;
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
   list-style-type: none;
}

.button-trial:hover {
   color: #FFFFFF;
   background-color: #D6573A;
}

.button-demo {
   background-color: rgba(0, 0, 0, 0);
   padding: .8em;
   border: #FFFFFF solid 1px;
   border-radius: 0.5em;
   font-family: "Onest", sans-serif;
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}

.button-demo:hover {
   color:#F46E4A;
   border-color: #F46E4A;
   box-shadow: 1px 1px 1px #0d2633;
}

.pure-button-primary {
   background-color: #f46e4a;
}

/* Images ========================================
================================================== */

.advantages-image {
   margin-bottom: 1rem;
   width: 5rem;
}

.blog-image {
   text-align: center;
   width: 100%;
   height: 10rem;
   max-height: 10rem;
   object-fit: cover;
   object-position: left;
   border-radius: 0.5em;
}

.features-image {
   width: 25vw;
   height: auto;
   max-width: 750px;
   border-radius: 1.5rem;
   object-fit: cover;
}

.features-image--smaller {
   width: 18vw;
}

/* Other================================================
========================================================= */

.aos-required-glyph {
   color:#f46e4a;
}

/* Chalkboard display for Pricing page */
.chalkboard {
   font-size: 40px;
   color: #E8E8E8;
   font-family: "Fredericka the Great", serif;
   font-weight: 400;
   display: block;
   width: 80%;
   height: 80%;
   min-height: auto;
   margin: 30px auto 0 auto;
   background-color: #497959;
   padding: 10px 30px;
   overflow-y: auto;
   box-shadow: -1px 2px 2px 0px #555, inset 0 0 10px 0 #555;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;
   border: #B78240 solid 10px;
   background-image: url("https://img.artof.site/68e04e42e2cc4ce6a77b73fa702ef7df/image-chalkboard--448.webp?timestamp=240613082352");
   background-size: 100% auto;
}

/* Adds a chalkboard eraser effect. */
/* .chalkboard::after {

   content: "";
   display: block;
   position: fixed;
   -webkit-border-radius: 0.1em 0.1em 0 0.1em;
   -khtml-border-radius: 0.1em 0.1em 0 0.1em;
   -moz-border-radius: 0.1em 0.1em 0 0.1em;
   -ms-border-radius: 0.1em 0.1em 0 0.1em;
   -o-border-radius: 0.1em 0.1em 0 0.1em;
   border-radius: 0.1em 0.1em 0 0.1em;
   width: 50px;
   height: 8px;
   background: #f1f1f1;
   top: 80%;
   margin-top: 75px;
   margin-right: 60px;
   right: 5%;
   box-shadow: inset 0 -4px 1px rgba(0, 0, 0, 0.3), -1px -1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.3)
} */

details {
   margin: 1.25em 0;
   border: 1px solid #A9AEB0;
   border-radius: .5em;
}

details  p {
   margin: 1em 1.5em;
   font-size: var(--fluid-font-0);
}

iframe {
   width: 100%;
   height: calc(100% - 4.4rem);
   border: none;
}

summary {
   list-style: none;
   padding: 1em;
   cursor: pointer;
   font-size: var(--fluid-font-1);
   font-weight: 700;
}

summary:after {
   content: '+';
   font-size: 1.5rem;
   line-height: 1rem;
   float: right;
   /* font-weight: bold; */
}

details[open]>summary {
   padding-bottom: 0;
}

details[open]>summary::after {
   content: '-';
}


/* Used for review stars */
.checked {
   color: #FFC107;
   font-size: 1.4rem;
}

.contact-form-container {
   position: relative;
   margin-bottom: -48em;
   padding: 1rem;
   top: -53em;
   left: 60vw;
   width: 30vw;
   background-color: #ffffff;
   border-radius: 1em;
   box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
}

.referral-form-container {
   margin: 1.5em auto 1.5em auto;
   padding: 1rem;
   max-width: 30rem;
   background-color: #0D2633;
   color: white;
   text-align: left;
   border-radius: 1rem;

}

.splide:not(.is-overflow) .splide__arrows {
  display: none;
}

.subscription-form fieldset{
   margin-left: 5rem;
   padding: revert;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.subscription-form button {
   background-color: #F46E4A;
   padding: .8em;
   border-radius: 0.5em;
   font-family: "Onest", sans-serif;
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
}

.trial-form {
   border-radius: 1em;
   box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
   padding: 1rem;
}

.aos-mobile-root {
   display: block !important;
}

.pure-menu-children {
   background-color: inherit;
}

/* Media Queries ====================================================================================
==================================================================================================== */
@media(max-width: 1270px){
   .hero-section{
      flex-wrap: wrap;
   } 

   .metric-heading {
      font-size: var(--fluid-font-5);
   }

   #sub-menu-trial-button {
      display: none;
   }
}

@media(max-width: 1060px){
   .article-display {
         display: grid;
         grid-template-columns: 1fr 1fr;
   
      }
   
      .article-display>h3 {
         grid-column: 1 / span 2;
      }
}

@media(max-width: 950px)
{

   /* Mobile Menu ====================================
   ================================================ */

   .aos-menu-mobile {
      width: 100%;
      height: var(--height-100);
      top: 0;
      background-color: #ffffff;
   }

   .aos-menu-mobile .pure-menu-link {
      color: #0D2633;
   }

   .mobile-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 1rem 2rem 1rem .5rem;
      color: #0D2633;
   }

   .mobile-menu-header-img {
      width: 9rem;
   }

   .mobile-menu-parent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 2.2rem;
      max-height: 2.5rem;
      color: #0D2633;
   }

   .mobile-menu-child {
      display: flex;
      margin-bottom: .5rem;
      font-weight: 700;
      font-size: 1.1rem;
   }

   .mega-menu-view-all {
      font-size: 1.2rem;
      margin-left: 1rem;
      line-height: 2;
   }

   /* ============================================= */

   .hero-header {
      font-size: 2.7rem;
      line-height: 1em;
      padding-left: 0;
      padding-right: 0;
   }

   .hero-subheader {
      font-size: var(--fluid-font-2);
      line-height: 1.5em;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
   }

   .hero-buttons {
      margin-left: 0;
      /* justify-content: center; */
   }
   
   .h1-headline {
         font-family: "Onest", sans-serif;
         font-weight: bold;
         font-size: var(--fluid-font-6);
         line-height: 1.5;
      }
   
      .h2-headline {
         font-family: "Onest", sans-serif;
         font-weight: bold;
         font-size: var(--fluid-font-5);
         line-height: 1em;
      }
   
      .h3-headline {
         font-family: "Onest", sans-serif;
         font-weight: bold;
         font-size: var(--fluid-font-4);
         line-height: 1.25em;
      }
   
      .p-large {
         font-size: var(--fluid-font-2);
         line-height: 1.5em;
      }
   
      .p-medium {
         font-size: var(--fluid-font-1);
         line-height: 1.5em;
      }
   
      .p-small {
         font-size: var(--fluid-font-0);
         line-height: 1.5em;
      }

      .advantages-item {
         margin: 0 0 1.5rem 0;
         width: 100%;
         max-width: 25em;
         height: 12rem;
      }

      .aos-article-body {
         grid-column: 1 / span 2;
      }

      .aos-article-widget-snippet {
         font-size: var(--fluid-font-3);
      }

      .aos-article-widget-title {
         font-size: .8rem;
      }

      .pure-menu-horizontal {
         display: none;
      }

      .aos-menu-mobile-root {
         display: block;
      }

      .background-pattern-dark, .background-pattern-light {
         background-size: 10rem, 10rem;
      }

      .button-trial,
      .button-demo {
         font-size: .8rem;
      }

      .chalkboard {
         font-size: 25px;
      }

      .contact-form-container {
         margin: 0 .5rem;
         top: unset;
         left: unset;
         width: unset;
      }

      .container {
         width: 90%;
      }

      .container-flex {
         flex-wrap: wrap;
      }

      .container-footer {
         flex-wrap: wrap;
         gap: 1.5rem;
      }

      .container-grid-2 {
         grid-template-columns: 1fr;
         gap: 0;
      }

      .container-grid-3-2 {
         grid-template-columns: 1fr;
         gap: 0;
      }

      .container-grid-3 {
         grid-template-columns: 1fr;
      }

      .custom-banner-layout {
         flex-wrap: wrap;
      }

      .container-metrics {
         padding: 1rem;
         /* margin-left: -10px; */
      }

      .container-solutions {
         grid-template-columns: 1fr;
         grid-auto-flow: row;
      }

      .features-article-section-right {
         margin: .5em;
      }

      .features-image {
         width: 15rem;
      }

      .features-image--smaller {
         width: 11rem;
      }

      .features-text {
         padding: 0 2vw;
         margin-top: 1rem;
      }

      .footer-links {
         margin-left: 0;
      }

      .justify-responsive {
         flex-direction: column;
         text-align: center;
      }

      .margin-top-5 {
         margin-top: 4.1rem;
      }

      .metrics-grid {
         grid-template-columns: repeat(2, 1fr);
      }

      .pricing-grid {
         grid-template-columns: 1fr;
      }

      .pricing-item {
         margin: 1rem 0;
      }

      .pricing-item-popular-heading {
         font-size: 1.5rem;
         top: -3.6rem;
      }

      .resources-blog-main .aos-article-widget-image {
            height: 7em;
      }

      .solutions-div {
         flex-wrap: wrap;
      }

      section:has(div.subscription-text) {
         justify-content: space-evenly;
      }

      .subscription-form fieldset {
         margin-left: 0;
      }

      .subscription-form div:has(input) {
         width: 100%;
      }

      .subscription-form div:has(button) {
         margin: 0;
         width: 100%;
      }

      .subscription-form button {
         width: 100%;
      }

      .subscription-text {
         text-align: center;
      }

      .text-center-mobile {
         text-align: center;
      }

      /* 
      Image Slider
      =========================================   
       */

        .review-slides {
        display: none
      }

      .review-item {
         width: initial;
      }

      img {
        vertical-align: middle;
      }
      .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
      }
      /* Next & previous buttons */
      .prev,
      .next, .benefit-prev, .benefit-next {
         display: block;
        cursor: pointer;
        position: absolute;
        bottom: -20%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
      }

      .benefit-prev, .benefit-next {
         bottom: -14px;
      }
      /* Position the "next button" to the right */
      .next, .benefit-next {
        right: 0;
        border-radius: 3px 0 0 3px;
      }

      .benefit-prev {
         left: 0;
         border-radius: 3px 0 0 3px;
      }
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover,
      .next:hover {
        background-color: rgba(0, 0, 0, 0.6);
      }
      /* Caption text */
      .text {
        color: #ffffff;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
      }
      /* Number text (1/3 etc) */
      .numbertext {
        color: #ffffff;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }
      /* The dots/bullets/indicators */
      .dot, .benefit-dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #999999;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }
      .active,
      .dot:hover {
        background-color: #111111;
      }
      /* Fading animation */
      .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
      }
      @-webkit-keyframes fade {
        from {
          opacity: .4
        }
        to {
          opacity: 1
        }
      }
      @keyframes fade {
        from {
          opacity: .4
        }
        to {
          opacity: 1
        }
      }
}

@media(max-width: 413px){
   iframe {
      height: 430px;
   }
}

@media(max-width: 600px){
   .hero-header{
      font-size: 1.5rem;
   } 
   .hero-section {
      flex-direction: column;
   }
}

@media(max-width: 720px){
   .article-display {
         display: grid;
         grid-template-columns: 1fr;
   
      }
   
      .article-display>h3 {
         grid-column: 1;
      }
}