@import 'vars.css';
body {
  font-size: 16px;
  font-size: 1rem;
    color:--heading-color;

}
html {
  scroll-behavior: smooth;
}
h1, h2, h3, h4, h5 {
  margin-top: 0.5em;
  margin-bottom: 1em;
}
.card-header {
  margin-bottom: 1em;
    padding-inline:0 !important;
    background:transparent;
}
.container-header {
  z-index: 10;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  
  #navigation {
    padding: 1rem 0;
      
      .mod-menu {
          flex-flow:row nowrap;
          gap:2rem;
          & > li {
              font-size:clamp(1.1rem, 1.2rem, 1.4rem);
          }
      }
  }
  .container-nav {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 1em;
    position: relative;
    z-index: 11;
  }
  .navbar-brand {
    padding: 0;
    font-size: 2rem;
      display:flex;
      align-items:center;
      gap:1rem;
      font-size:var(--size-3);
      margin-right:1.5rem;
      
    .brand-logo {
            img {
                max-width:120px;
            }        
        }
  }
  .menu-search-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
      flex-flow:row wrap;
      gap:1rem;
        
    a {
      color: var(--white-1);
    }
    .socialIcons {
      display: flex;
      gap: 5px;
      a {
        svg {
          height: 24px;
          width: 24px;
        }
      }
    }
  }
   &.nav-active {
            animation:navFadeIn 0.3s linear forwards;
        }
   &.nav-inactive{
            animation:navFadeOut 0.3s linear forwards;
        }
}
.site-grid {
    padding-bottom:3rem;
}
#heroWrap {
  margin-bottom: 4rem;
    color:var(--white-1);
  .heroBox {
    min-height: 60vh;
    display: grid;
    place-content: center;
    background: url('../../../../../images/elements/hero-bg.png') center center no-repeat;
    background-size: cover;
    margin-top: -152px;
      position:relative;
      &::after {
          content:'';
          position:absolute;
          inset:0;
         background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 10%, rgba(0,0,0,0.5438550420168067) 50%, rgba(0,0,0,0.50) 90%, rgba(0,0,0,0.50) 100%);
          z-index:1;
      }     
      
    .heroContent {
        h1,h2 {
            color:var(--white-1);
        }
      margin-top: 152px;
        position:relative;
        z-index:2;
        text-align:center;
        display: grid;
    place-content: center;
    row-gap: 2rem;
    padding: 1rem;
        p {
            font-size:var(--size-3);
        }
        .btn.btn-primary {
            line-height: 1.15;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    background: #fff;
    padding: 1.1rem 2.725rem;
    border-radius: 100vh;
    color: var(--blue-2) !important;
    font-weight: bold;
    font-size: clamp(1.1rem, 1.2vw, 1.4rem);
            border:none;
            &:hover, &.active {
                background: var(--blue-2);
    color: var(--white-1) !important;
            }
        }
    }
  }
}
.itemid-101 {
  .page-header h1 {
    display: none;
  }
}
.btn-secondary {
    --btn-color: var(--gray-800);
    --btn-bg: var(--white);
    --btn-border-color: var(--gray-400);
    --btn-hover-color: var(--gray-800);
    --btn-hover-bg: var(--gray-100);
}
ul {
  margin-left: 0px;

  list-style: none;
  margin-bottom: 2rem;
  &.checked li {
    position: relative;
    padding-left: 28px;
    &::before {
      position: absolute;
      content: '';
      height: 20px;
      width: 20px;
      background: url('../../../../../images/elements/ListCheck.svg') center center no-repeat;
      background-size: contain;
      left: 0;
      top: 2px;
    }
  }
}
.fullwidthModule {
    
}
.card.accordions {
    background:var(--white-1) !important;
    .card-header {
        font-size:1.55rem;
    }
    h3, p, .panel-content {
        color:var(--heading-color);
    }
    [role="button"], [data-rlta-element="panel"] {
        border:none !important;
    }
    [role="button"] {
        cursor:pointer;
    }
   [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=lines][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=open], [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=lines][data-rlta-type=accordions]>[data-rlta-element=button][data-rlta-state=opening] {
    background-color: transparent;
    }
    h3 {
        position:relative;
        font-size:1.5rem;
    }
    [data-rlta-element="heading"],[data-rlta-element="panel-content"] {
        padding-left:24px;
    }
    [data-rlta-state="closed"], [data-rlta-state="open"] {
       
    }
    [data-rlta-element="button"][data-rlta-state="closed"],
    [data-rlta-element="button"][data-rlta-state="open"] {
        &:before {
            position:absolute;
            content:'';
            height:20px;
            width:20px;
            font-size:1rem;
            color:var(--grey-1);            
            top:5px;
        }
    }
    [data-rlta-element="button"][data-rlta-state="closed"] {
        position:relative;
        
        &:before {            
            background: url(../../../../../images/elements/MdiArrowDown.svg) center center no-repeat;
            background-size:contain;
        }
    }
    [data-rlta-element="button"][data-rlta-state="open"] {
        position:relative;
        
        &:before {  
            background: url(../../../../../images/elements/MdiArrowUp.svg) center center no-repeat;
            background-size:contain;
        }
    }
}
.main-bottom {
  margin-top: 2rem;
  .card-body {
    padding: 0px;
  }
}
.card {
  border: none !important;
}
.cube-articles-item {
  background: var(--blue-1);
}
#cubeArticle {
        padding:0;
}
.grid-child {
  gap: 1rem;
}
#below-1, #below-2, #below-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
  .card {
    margin: 0.625rem;
    padding: 0.938rem;
      width:100%;
      .card-header {
          background-color:transparent;
      }
    .card-body {
      padding: 0;
        border: none;
    }
  }
}
#below-1 {
  background: url('../../../../../images/elements/hero-bg.png') center center no-repeat;
  background-size: cover;
  padding-top: 3rem;
  padding-bottom: 3rem;
    position:relative;
    
      &::after {
          content:'';
          position:absolute;
          inset:0;
          background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 10%, rgba(0,0,0,0.5438550420168067) 50%, rgba(0,0,0,0.50) 90%, rgba(0,0,0,0.50) 100%);
          z-index:1;
      }
  .card {
    background: transparent;
    border-radius: 0px;
    border: none;
    color: var(--white-1);
      position:relative;
        z-index:2;
      width:auto;
  }
    .container-below-1 {
        display:block;
    }
}
#below-2 {
    .card {
        margin:0;
    }
}
#below-3 {
    background: url('../../../../../images/elements/hero-bg.png') center center no-repeat;
    background-attachment:fixed;
    .card {
        background:var(--white-1);
      
        
    }
}
#below-4 {
    padding-top:3rem;
    padding-bottom:3rem;
    .card {
        margin-inline:auto;
    }
}
.jmm-pricing.default .jmm-item {
    background: var(--white-1);
    color: var(grey-1);
    padding: 0 0 45px;
    margin-top: 60px;
    box-shadow: 0px 0px 40px 0px #dce1fd;
}
.jmm-pricing-in {
    .jmm-price {
        
        .jmm-currency, .jmm-number {
            color:var(--white-1) !important;
        }
    }
    .highlight {
        .jmm-price {
       .jmm-currency, .jmm-number {
            color:var(--grey-1) !important;
        }
    }
    }
}
.footer {
  background-color: var(--grey-1);
  background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.24693627450980393) 100%);
  margin-top: 0;
}
.card-header {
  padding: 0px;
  border-bottom: none !important;
}
.com-contact {
    .com-contact__thumbnail {
        img {
            max-width:300px;
            min-width:250px;
            width:100%;
        }
    }
    .contactInfo {
        display:flex;
        flex-direction:column;
        justify-content: center;
    }
}
.anchorDiv {
    visibility: hidden !important;
    padding:0px !important;
    margin:0px 0px 0px -1rem !important;
    height:0px !important;
    width:0px !important;
        left: 0px;
    position: absolute;
}
#Advantages  {
    scroll-margin-top:8rem;
}
#About-Us {
    scroll-margin-top:12rem;
}
#Our-Partners {
    scroll-margin-top:6rem;
}
#Pricing {
    scroll-margin-top:8rem;
}
.btn-secondary {
    --btn-color: var(--white-1);
    --btn-bg: var(--blue-2);
    --btn-border-color: var(--blue-2);
    --btn-hover-color: var(--blue-2);
    --btn-hover-bg: var(--white-1);
    border-radius:100vh;
}
.btn-primary {
    background-color: var(--cassiopeia-color-primary);
    color:var(--white-1);
    border-color: var(--cassiopeia-color-primary);
    border-radius:100vh;
}
.com-contact__container {
    display:block;
    .contactTop {
        display:flex;
        gap:2rem;
        flex-flow: row wrap;
    }
}
@keyframes navFadeIn {
  0% {
    background: transparent;
  }
  100% {
    background: var(--nav-bg);
  }
}
@keyframes navFadeOut {
  0% {
    background: var(--nav-bg);
  }
  100% {
    background: transparent;
  }
}
@media screen and (width <= 1374px) {
    .container-header {
        position: relative !important;
        padding:0rem 2rem;
    }
}
@media screen and ( width > 992px ) and ( width < 1375px ){
 #heroWrap {
    .heroBox {
        margin-top: -155px;
        .heroContent {
            margin-top:155px;
        }
    }
}
}
@media (width >= 992px) {
    .container-header .mod-menu>li+li {
        margin-left: 0;
    }
}
@media screen and (width <= 991.98px) {
    .container-header {
        position: sticky !important;
    }
   /* #heroWrap {
    .heroBox {
        margin-top: -290px;
        .heroContent {
            margin-top:290px;
        }
    }
}*/

}
@media screen and (width < 768px) {
    .container-header {
        position: relative !important;
        background:var(--nav-bg) !important;
        
            .menu-search-social {
        gap: 2rem;
        }
            
       
    & #navigation {
        .mod-menu {
            flex-flow: row wrap;
            gap: 1rem;
        }
    }
}
    #heroWrap {
    .heroBox {
        min-height: 50vh;
        margin-top: 0px;
        .heroContent {
            margin-top:0px;
            padding-top:3rem;
            padding-bottom:3rem;
        }
    }
}
    .leMenu {
        .mod-menu {
            flex-flow:row wrap !important;
        }
    }
    @keyframes navFadeIn {
  0% {
    background: var(--nav-bg);
  }
  100% {
    background: var(--nav-bg);
  }
}
@keyframes navFadeOut {
  0% {
    background: var(--nav-bg);
  }
  100% {
    background: var(--nav-bg);
  }
}
    
}