/* The page is NOT responsive. You can implement responsiveness yourself if you wanna have some fun 😃 */

:root {
  --color-primary: #5ec576;
  --color-secondary: ;
  --color-tertiary: #ff585f;
  --color-primary-darker: #4bbb7d;
  --color-secondary-darker: #ffbb00;
  --color-tertiary-darker: #fd424b;
  --color-primary-opacity: #5ec5763a;
  --color-secondary-opacity: #ffcd0331;
  --color-tertiary-opacity: #ff58602d;
  --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
  --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);
}

/*
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*/
/*
html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #444;
  line-height: 1.9;
  background-color: #f3f3f3;
}
*/
html,
body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    /* background-color: blue;*/
    /* background-color: rgb(185, 220, 255); */
    background-color: rgb(185 220 255);
    /*width: 100%;  
    */
}

hr {
  color: purple;
  height: 10px;
  /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
}

/* GENERAL ELEMENTS */
/* NAVIGATION */
.nav1 {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Top to Bottom */
  height: 6rem;
  /* width: 100%; */
  padding: 0rem 0rem 0rem 0rem; /* top right bottom left*/
  z-index: 100;
  background-color: white;
  color:#aa0614bb;
}
.nav2 {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Top to Bottom */
  height: 30px;
  /* width: 550px; */
  /* padding: 0rem 0rem 0rem 11rem; top right bottom left */
  z-index: 100;
  /* background-color: white; */
  /* color:#aa0614bb; */
  list-style-type: none;
  /* border: 2px solid blue; */
}
/* .nav3 {
  display: flex;
  justify-content: left;
  align-items: first baseline;
  height: 230px;
  list-style-type: none;
} */
/* .nav3 {
  display: grid;
  list-style-type: none;
} */
.nav3 {
  display: grid;
  width: 300px;
  grid-template-columns: 90px 90px 90px;
  list-style-type: none;
}
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 9rem;
    width: 100%;
    padding: 0 6rem;
    z-index: 100;
}

.nav__header--div {
    max-width: 80rem;
    margin: 0 auto 0rem auto;
}


.nav__links {
    display: flex;
    align-items: center;
    list-style: none;
  }
  
  .nav__item {
    margin-left: 4rem;
  }

.nav__link:link,
.nav__link:visited {
  font-size: 1.7rem;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

.nav__link:link:hover,
.nav__link--link:active {
  color: inherit;
  background-color: var(--color-primary-darker);
  color: #333;
}

/*
.nav__link--btn:link{
    height: 2rem;
    padding: 0.8rem 2.5rem;
    border-radius: 3rem;
    background-color: #ffc403bd;
    color: #222;  
    font-size: .5rem;
    font-weight: 400;
  }
  */

.nav__link--btn:link,  
.nav__link--btn:visited {
  height: 2rem;
  font-size: 1rem;
  font-weight: 600;
  padding: .2rem 2rem;
  border-radius: 3rem;
  background-color: var(--color-primary-darker);
  color: #222;
}

.nav__link--btn:hover,
.nav__link--btn:active {
  color: inherit;
  background-color: #ffc403bd;
  color: #333;
}

.nav__logo {
    height: 4.5rem;
    transition: all 0.3s;
  }

/* section 1 */
/* FEATURES */
.features {
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    gap: 1rem;
    margin: 0 5rem;
}

.features__feature {
    align-self: center;
    justify-self: center;
  }

  .features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-opacity);
    height: 5.5rem;
    width: 5.5rem;
    border-radius: 50%;
    margin-bottom: 2rem;
  }

.features__img {
    width: 100%;
}

.lazy-img {
    filter: blur(20px);
}

.section {
    /*padding: 0rem 3rem;*/
    border-top: 1px solid rgb(75, 2, 2);
  
    transition: transform 1s, opacity 1s;
  }

.section__title {
    max-width: 80rem;
    margin: 0 auto 0rem auto;
    /* border: 1px solid rgb(75, 2, 2); */
}

.section__header {
  /*font-size: 2rem;*/
  line-height: 1.3;
  font-weight: 500;
}

.section__description {
    height: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary);
    /*margin-bottom: 0rem;
    margin: 2rem 2rem 2rem 2rem;
    padding: 1.25rem 4.5rem;*/
  }

/* .btn {
    display: inline-block; */
    /* background-color: var(--color-primary); */
    /* font-size: 1.0rem;
    font-family: inherit;
    font-weight: 500;
    border: none; */
    /* padding: 1.25rem 4.5rem; */
    /* padding: 0rem .0rem .0rem .0rem;
    border-radius: 10rem;
    cursor: pointer;
    transition: all 0.3s;
    height: 2.0rem;
    width: 8.0rem;
  } */

  .btn-fc {
    display: inline-block;
    color: white;
    background-color: var(--color-primary);
    font-size: .8rem;
    font-family: inherit;
    /* font-weight: 500; */
    border: none;
    /* padding: 1.25rem 4.5rem; */
    padding: 0rem .5rem .2rem .5rem;
    border-radius: 10rem; 
    cursor: pointer;
    /* transition: all 0.3s; */
    height: 1.2rem;
    /* width: 4.0rem;  */
  }

  .accordionBtn {
    /* max-width: 25.0rem; */
    width: 90%;
    background-color:#ffbb00;
  }
  .accordion-header-fc {
    margin-bottom: 0;
    width: 100%;
    /* margin-right: 0; */
    /* background-color: lawngreen; */
  }
  .anchor-response {
    /* visibility: hidden; */
    width: 0px;
  }

  .queryRespSpan {
    /*
    font-size: 1.4rem;
    font-family: inherit;
    */
    color: blue;
    font-weight: 500;
    padding: 0rem 0rem 0rem 1rem;
  }

  .startText {
    font-size: 1.4rem;
    font-family: inherit;
    font-weight: 500;
  }

  .startRulesText {
    font-size: 1.2rem;
    font-family: inherit;
    font-weight: 500;
  }

  .rulesText {
    font-size: 1.1rem;
    font-family: inherit;
    text-decoration-line: underline;
  }

  /* .ddText {
    font-size: 1.0rem;
    font-family: inherit;
    color:black;
    text-decoration-line: underline; 
  } */

  .custom-popover {
    --bs-popover-max-width: 400px;
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
  }
  
  .modal-width{
    --bs-modal-width: 1025px;
  }

  .modal-su-inp{
    height: .8rem;
    width: 16rem;
  }
  /*
  .modal-su-inp-sm{
    height: .6rem;
    width: 10rem;
  }
*/
  
  .modal-su-form{
    width: 800px;
  }

  .modal-su-btn{
    padding: 2rem 0rem 0rem 5rem; /* top right bottom left*/
    /* width: 700px; */
    width: 300px;
  }  

  
  .modal-rb-btn{
    padding: 0rem 0rem 0rem 0rem; /* top right bottom left*/
    /* width: 700px; */
    width: 100px;
  }
  
  .pad-left{
    padding: 0rem 0rem 0rem 4rem; /* top right bottom left*/
  }
  
  .carousel-span-left-pad{
    padding: 1rem 12rem 0rem 0rem; /* top right bottom left*/
    border: 0;
  }
  .carousel-span-right-pad{
    padding: 1rem 0rem 0rem 10rem; /* top right bottom left*/
    border: 0;
  }
  .carousel-su-btn{
    /*padding: 0rem 0rem 0rem 0rem;*/ /* top right bottom left*/
    background-color: #0b6f8d;
    /* width: 700px; */
    /* width: 400px; */
  }  
  .carousel-su-td{
    /*padding: 0rem 0rem 0rem 0rem;*/ /* top right bottom left*/
    /* background-color: #0b6f8d; */
    width: 525px;
  }
  .carousel-su-td1{
    /*padding: 0rem 0rem 0rem 0rem;*/ /* top right bottom left*/
    /* background-color: #0b6f8d; */
    width: 25px;
  }
  .carousel-su-td2{
    /*padding: 0rem 0rem 0rem 0rem;*/ /* top right bottom left*/
    /* background-color: #0b6f8d; */
    width: 500px;
  }
  
  .carousel-su-td2-blk{
    /*padding: 0rem 0rem 0rem 0rem;*/ /* top right bottom left*/
    /* background-color: #0b6f8d; */
    color: black;
    width: 500px;
  }
  
  .btn-pad-left{
    width: 380px;
    height: 20px;
  }

  /*
  .container-sm-fc {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 35%;
    height: 8rem;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
*/

.span-nw-hdr {
  white-space: nowrap;   
  color:orangered;
  /* border: 2px solid purple; */
  width: 60%;
  height: 2rem;
  text-align:center;
  font-weight: bold;
  font-style: italic;
  font-size: 1.2em;
}

.show-me-border {
  /* border: 1px solid red; */
  width: 180px;
}

.mycol {
  padding: 0rem 1rem 0rem 1rem; /* top right bottom left*/
}

.section-cnvs {
  /* background: #98d6f3; */
  /* width: 80%; */
  padding:  2rem 0rem 2rem 2rem; /* top right bottom left*/
  /* border: 4px solid #158543; */
}
.cnvs-mmdd {
  border: 4px solid #3123f3;
  width: 250px;
  background: #0584aa;
  color: white;
}

.grid {
  display: grid;
  /* width: 70%; */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 4px solid #158543;
  padding:  2rem 0rem 2rem 2rem; /* top right bottom left*/
  /* color: white; */
}
.gridCol0 {
  grid-column: 1;
}
.gridCol1 {
  grid-column: 2;
}
.gridCol2 {
  grid-column: 3;
}
.anchor-btn {
  display: inline-block;
  padding: 0em 1em;
  /* border-radius: 5px; */
  text-decoration: none;
  color: white;
  background-color: #4e9caf;
  height: 20px;
  width: 235px;
}

/* FOOTER */
.footer {
  padding: 10rem 3rem;
  background-color: #37383d;
}

.footer__nav {
  list-style: none;
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}

.footer__item {
  margin-right: 4rem;
}

.footer__link {
  font-size: 1.6rem;
  color: #eee;
  text-decoration: none;
}

.footer__logo {
  height: 5rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 5rem;
}

.footer__copyright {
  font-size: 1.0rem;
  color: #aaa;
  text-align: center;
}

.footer__copyright .footer__link {
  font-size: 1.4rem;
}

  
.custom-popover {
  --bs-popover-max-width: 250px;
  --bs-popover-border-color: black;
  --bs-popover-header-bg: black;
  --bs-popover-header-color: white;
  --bs-popover-header-font-size: 10px;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
  /* --bs-popover-body-color: yellow; */
  --bs-popover-bg: #fbecb4fb;
  --bs-popover-font-size: 12px;
}

/*
.modal
{
  color: white;
  border: 5px solid #156b85;
  background-color: #0b6f8d;
  box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);
  width: 70%;
  padding: 0rem 0rem 0rem 10rem;
  top: 10%;
  left: 10%;
  --bs-modal-width: 90%;
}

.modal-fc
{
  color: white;
  border: 5px solid #156b85;
  background-color: #0b6f8d;
  box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);
  width: 650px;
  height: 650px;
  padding: 0rem 5rem 0rem 0rem;
  top: 10%;
  left: 10%;
}

.modal-content-fc {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    padding: 0rem 0rem 0rem 0rem;
} 
.modal-content-fc-conn {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-clip: padding-box;
  outline: 0;
  padding: 0rem 0rem 0rem 0rem;
} 
*/

/* .menu-button {
  background: gold;
} */

/* .paypal-button.paypal-button-color-black, .paypal-button-row.paypal-button-color-black .menu-button {
  background: gold;
} */
/* .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 60rem;
  background-color: #f3f3f3;
  padding: 5rem 6rem;
  box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: all 0.5s;
} */
  
  /* .modal-dialog{
      margin-right: 0;
      margin-left: 0;
  } */
  /* .modeless{
      top:10%;
      left:50%;
      bottom:auto;
      right:auto;
      margin-left:-300px;
  } */

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
  }

  .b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }
  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .w3-button:hover{color:#000!important;background-color:rgba(238, 225, 109, 0.911)!important}
  .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0;}

  /* .select .select:focus {
    border-color: #158543;
  } */