/*--------------------------------------------------------------
TABLE OF CONTENT
----------------------------------------------------------------
1.0 VARIABLE
|  1.1 COLOR
|  1.2 TYPOGRAPHY
|  1.3 LAYOUT
2.0 FOUNDATION
3.0 TYPOGRAPHY
4.0 IMAGE
5.0 LAYOUT
6.0 COMPONENT
|  6.1 CTA
|  6.2 BUTTON
|  6.3 TOGGLE
|  6.4 CARD
|  6.5 LIST
7.0 SECTION
|  7.1 HEADER
|  7.2 HERO
|  7.3 CUSTOMER
|  7.4 FEATURE
|  7.5 PRICING
|  7.6 TESTIMONIAL
|  7.7 CLOSE
|  7.8 FOOTER
8.0 MEDIA
|  8.1 768PX
|  8.2 1024PX
|  8.3 1200PX
--------------------------------------------------------------*/
:root {
  --text-for-light: black;
  --bkg-for-light: #f7fbff;
  --link-for-light: black;
  --text-for-dark: #c9d1d9;
  --bkg-for-dark: #0d1117;
  --link-for-dark: #c9d1d9;
  --sep-for-light: #cecece;
  --sep-for-dark: #0f1115;
  --card-for-light: #fff;
  --card-for-dark: #161b22;

  --bkg-header-for-light: #ffffff;
  --bkg-header-for-dark: #161b22;

  --copyright-for-light: #f9fafb;
  --copyright-for-dark: #000;

  --modal-for-light: #ffffff;
  --modal-for-dark: #2c2c2c;
}

body {font-family: "Noto Sans", sans-serif !important; color: var(--text-for-light); background-color: var(--bkg-for-light); transition: all 200ms linear;}
a {color: var(--link-for-light);}
p {color: var(--text-for-light);}
.dark-mode p {color: var(--text-for-dark);}

.dark-mode {color: var(--text-for-dark); background-color: var(--bkg-for-dark);}
.dark-mode a {color: var(--link-for-dark);}
.light-mode {color: var(--text-for-light); background-color: var(--bkg-for-light);}
.light-mode a {color: var(--text-for-light);}

.light-mode .ui-section-header{ background-color: var(--bkg-header-for-light); }
.dark-mode .ui-section-header{ background-color: var(--bkg-header-for-dark); }
.ui-section-sub{ background-color: var(--bkg-header-for-light); border-color: var(--sep-for-light); }
.light-mode .ui-section-sub{ background-color: var(--bkg-header-for-light); border-color: var(--sep-for-light); }
.light-mode .ui-section-dark{ background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark); }
.dark-mode .ui-section-feature{ background-color: var(--bkg-for-dark); border-color: var(--sep-for-dark);}
.dark-mode .ui-section-sub{ background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark);}
.ui-section-custom{  background-color: var(--bkg-header-for-light);border-color: var(--sep-for-light);}
.dark-mode .ui-section-custom{ background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark);}
.light-mode .ui-text-title {color: var(--text-for-light);}
.dark-mode .ui-text-title {color: var(--text-for-dark);}
.light-mode .ui-section-footer { background-color: var(--copyright-for-light); border-color: var(--sep-for-light)}
.dark-mode .ui-section-footer { background-color: var(--copyright-for-dark); border-color: var(--sep-for-dark)}
.dark-mode .modal-content { background-color: var(--modal-for-dark); border: 1px solid var(--sep-for-dark)}
.modal-content { background-color: var(--modal-for-light); border: 1px solid var(--sep-for-light)}
.light-mode .modal-content { background-color: var(--modal-for-light); border: 1px solid var(--sep-for-light)}
.light-mode .CloseBtn {fill:var(--text-for-light);}
.dark-mode .CloseBtn {fill:var(--text-for-dark);}

.light-mode .card-inside{background-color: var(--card-for-light); border-color: var(--sep-for-light);}
.dark-mode .card-inside { background-color: var(--card-for-dark); border-color: var(--sep-for-dark);}
.ui-section-close { background-color: var(--bkg-header-for-light); border-color: var(--sep-for-light)}
.dark-mode .ui-section-close { background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark)}    .ui-section-footer--copyright p {color: var(--ui-color-typography-note);}
.details-modal-content-winget {border-top: 1px solid var(--sep-for-light);}
.light-mode .details-modal-content-winget {border-top: 1px solid var(--sep-for-light);}
.dark-mode .details-modal-content-winget {border-top: 1px solid var(--sep-for-dark);}
.details-modal-content {border-top: 1px solid var(--sep-for-light);}
.light-mode .details-modal-content {border-top: 1px solid var(--sep-for-light);}
.dark-mode .details-modal-content {border-top: 1px solid var(--sep-for-dark);}
.details-modal-content-winget {
    border: 1px solid var(--sep-for-light);
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.ui-section-header--nav { 
  background-color: var(--bkg-header-for-light); 
  border-color: var(--sep-for-light);
}
.dark-mode .ui-section-header--nav { 
  background-color: var(--bkg-header-for-dark); 
  border-color: var(--sep-for-dark);
}
.light-mode .ui-section-header--nav { 
  background-color: var(--bkg-header-for-light); 
  border-color: var(--sep-for-light);
}

@media (prefers-color-scheme: dark) {
    body {color: var(--text-for-dark); background-color: var(--bkg-for-dark); transition: all 200ms linear;}
    a {color: var(--link-for-dark);}
    p {color: var(--text-for-dark);}
    .light-mode p{color: var(--text-for-light);}
    .dark-mode p{color: var(--text-for-dark);}
    .ui-section-header { background-color: var(--bkg-header-for-dark); transition: all 200ms linear;}
    .light-mode .ui-section-header { background-color: var(--bkg-header-for-light); transition: all 200ms linear;}
    .dark-mode .ui-section-header { background-color: var(--bkg-header-for-light); transition: all 200ms linear;}
    .ui-section-feature { background-color: var(--bkg-for-dark); border-color: var(--sep-for-dark)}
    .ui-section-sub { background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark)}
    .ui-section-sub .dark-mode{ background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark)}
    .ui-section-sub .light-mode{ background-color: var(--bkg-header-for-light); border-color: var(--sep-for-light)}
    .ui-section-custom { background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark);}
    .ui-section-custom .dark-mode{ background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark);}
    .ui-section-custom .light-mode{ background-color: var(--bkg-header-for-light); border-color: var(--sep-for-light);}
    .ui-section-footer { background-color: var(--copyright-for-dark); border-color: var(--sep-for-dark);}
    .ui-section-footer .light-mode{ background-color: var(--copyright-for-light); border-color: var(--sep-for-light);}
    .ui-section-footer .dark-mode{ background-color: var(--copyright-for-dark); border-color: var(--sep-for-dark);}
    .ui-text-title {color: var(--text-for-dark);}
    .ui-section-close { background-color: var(--bkg-for-light); border-color: var(--sep-for-light)}
    .light-mode .ui-section-close { background-color: var(--bkg-for-light); border-color: var(--sep-for-light)}
    .dark-mode .ui-section-close{ background-color: var(--bkg-for-dark); border-color: var(--sep-for-dark)}
    .card-inside { background-color: var(--card-for-dark); border-color: var(--sep-for-dark)}
    .card-inside .light-mode { background-color: var(--card-for-light); border-color: var(--sep-for-light)}
    .card-inside .dark-mode{ background-color: var(--card-for-dark); border-color: var(--sep-for-dark)}
    .ui-section-close { background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark)}
    .ui-section-footer--copyright p {color: var(--ui-color-typography-note);}
    .ui-component-cta a {color:#fff !important}
    .modal-content { background-color: var(--modal-for-dark); border: 1px solid var(--sep-for-dark)}
    .modal-content .dark-mode { background-color: var(--modal-for-dark); border: 1px solid var(--sep-for-dark)}
    .modal-content .light-mode { background-color: var(--modal-for-light); border: 1px solid var(--sep-for-light)}
    .CloseBtn {fill: var(--text-for-dark);}
    .CloseBtn .dark-mode {fill: var(--text-for-dark);}
    .CloseBtn .light-mode {fill: var(--text-for-light);}
    .details-modal-content-winget {border-top: 1px solid var(--sep-for-dark);}
    .light-mode .details-modal-content-winget {border-top: 1px solid var(--sep-for-light);}
    .dark-mode .details-modal-content-winget {border-top: 1px solid var(--sep-for-dark);}
    .details-modal-content {border-top: 1px solid var(--sep-for-dark);}
    .light-mode .details-modal-content {border-top: 1px solid var(--sep-for-light);}
    .dark-mode .details-modal-content {border-top: 1px solid var(--sep-for-dark);}
    .ui-section-header--nav { 
      background-color: var(--bkg-header-for-dark); 
      border-color: var(--sep-for-dark)
    }
    .dark-mode .ui-section-header--nav { 
      background-color: var(--bkg-header-for-dark); 
      border-color: var(--sep-for-dark)
    }
    .light-mode .ui-section-header--nav { 
      background-color: var(--bkg-header-for-light); 
      border-color: var(--sep-for-light)
    }
}

.ui-component-cta a:hover{
  border: 1px solid transparent;
  background: dodgerblue;
}
.modal-sep {  
  width:100%;
  border : 0;;
  border-top: 1px solid #aaa;
}

.swiper .swiper-pagination-bullet {
  background-color: dodgerblue;
}
/* Scrollbar */

/* custom scrollbar */
/* ::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
} */


.hide-button { /* toggle Dark */
  display:none;
}

  /*------------------------------------------------------------
  |
  | Slider
  |
  ------------------------------------------------------------*/
  
.swiper-button-next, .swiper-button-prev {
    visibility:collapse !important;
}
.swiper-slide{
  padding:0;
}
.swiper {
  width: 100%;
  height: 29.5rem;
}
.swiper-slide h5{
  font-size:14pt;
  font-weight:500;
  margin:0px;
}
.card-icon {
  position:absolute !important;
  background-color:rgba(255, 255, 255, 0.917);
  padding:5px;
  top:44%;
  right:12px;
  border-radius: 8px;
  margin: 0px 0px 4px 0px;
  height:32px;
}
.card-inside{
  overflow:hidden;
  background-color: var(--card-for-light); border-color: var(--sep-for-light);
  border-radius: 8px;
  height:26rem;
  border:1px solid #cccccc;
  padding:0px;
}

.author {
  font-size:13px;
  vertical-align: center;
  margin-left:10px;
}
.screenshot{
  padding:10px;
  height:15rem;
  border-radius:8px 8px 0 0;
}
.screenshot img{
  object-fit: contain;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
.card-details{
  padding:20px;
}
.name {
  font-weight:500;
}

@media (prefers-color-scheme: dark) {
  .card-inside { background-color: var(--card-for-dark); border-color: var(--sep-for-dark)}
}
.card-inside p {
  font-size:14px;
}
.card-inside img{
  position:sticky;
  bottom:0;
}

  /*------------------------------------------------------------
  |
  | Download Button
  |
  ------------------------------------------------------------*/
  *,
*::before,
*::after {
  box-sizing: border-box;
}


.details-modal-content a{
  color:#fff;
}


.downloadBtn {
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  background-color: DodgerBlue;
  border: none;
  border-radius: 6px;
  color: white;
  padding: 14px 30px;
  cursor: pointer;
  font-size: 20px;
  transition: all 200ms linear;
}

/*.installerBtn i, span, p{color:White}
.portableBtn i, span, p{color:White}*/

/* Darker background on mouse-over */
.downloadBtn:hover {
  background-color: RoyalBlue;
}
code {
  font-size:1em;
  font-family: "Source Code Pro", monospace;
}
.installerBtn {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  text-align:center;
  display:inline-block;
  background-color: DodgerBlue;
  border: none;
  border-radius: 6px;
  color: white;
  width:100%;
  align-content: center;
  padding: 20px 20px;
  cursor: pointer;
  font-size: 20px;
}

.installerBtn:hover {
  background-color: RoyalBlue;
}
.portableBtn {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  text-align:center;
  display:inline-block;
  background-color: rgb(49, 81, 176); 
  border: none;
  width:100%;
  margin-top: 6px;
  border-radius: 6px;
  color: white;
  padding: 20px 20px;
  cursor: pointer;
  font-size: 20px;
}

.portableBtn:hover {
  background-color: rgb(31, 60, 146);
}

.is-unselectable{
  user-select: none;
}

.cmdInstallDiv {
  background-color: rgba(0, 0, 0, 0.849);
  margin-top: 6px;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  text-align: left;

  left: -2;
}
.cmdInstallDiv p {
  font-size: 0.75em;
  margin-left: 8px;
  color: #ffffffbb !important;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 0.5;
  white-space: nowrap;
}

.supportText {
  margin:0px 0px 0px 8px; font-size:11px; text-align:left;
}
.cmdInstallDiv .btn {
  position: relative;
  right: .5em;
  top: 50%;
  transform: translate(20%,-5%);
  display:none;
  border: solid 0px #cecece;
  padding: 4px 8px; 
  border-radius: 4px;
  background-color: #4f4f4f;
  float: right;
}

.cmdInstallDiv .btn:hover {
  background-color: #7e7e7e;
}
.cmdInstallDiv .btn:active {
  background-color: #131313;
}

.btn p {
 margin:0px;
 font-size:11px !important;
}
.cmdInstallDiv i {
  font-size:16px;
  color:#fff;
}
.cmdInstallDiv i:hover{
  color:rgba(223, 223, 223, 0.566);
}

/*------------------------------*/

.tooltipped {
  position: relative
}
.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font: normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background: rgba(0,0,0,0.8);
  border-radius: 3px;
  -webkit-font-smoothing: subpixel-antialiased
} 

.tooltipped:before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: rgba(0,0,0,0.8);
  pointer-events: none;
  content: "";
  border: 5px solid transparent
}

.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after {
  display: inline-block;
  text-decoration: none
}

.tooltipped-s:after {
  top: 100%;
  right: 50%;
  margin-top: 5px
}

.tooltipped-s:before {
  top: auto;
  right: 50%;
  bottom: -5px;
  margin-right: -5px;
  border-bottom-color: rgba(0,0,0,0.8)
}

.tooltipped-s:after {
  transform: translate3d(0,-10px,0);
  transition: all .15s ease-in-out;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%)
}
/*------------------------------*/

a {
  position: relative;
  color: #fff;
  transition: all 200ms linear;
  font-family: "Noto Sans", sans-serif !important;
  font-weight: 400;
  font-size: 15px;
  border-radius: 2px;
  margin: 2px 0;
  text-align: left;
  text-decoration: none;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
    -ms-flex-pack: distribute;
}

.ui-section-header--nav a {
  color: inherit;
  text-decoration: underline 0.1em rgba(0, 0, 0, 0);
  transition: text-decoration-color 300ms;
}

.ui-section-header--nav a:hover {
  text-decoration-color: var(--link-for-light);
}

.dark-mode .ui-section-header--nav a:hover {
  text-decoration-color: var(--link-for-dark);
}

@media (prefers-color-scheme: dark) {
  .ui-section-header--nav a:hover {
    text-decoration-color: var(--link-for-dark);
  }
}


.sec-center a:hover {
  color: #000;
  background-color: #f5f5f5;
}
.dark-light:checked ~ .sec-center .section-dropdown a:hover {
  color: #ffeba7;
  background-color: #102770;
}
a .uil {
  font-size: 22px;
}

.logo:hover {
  background-color: transparent;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
  transition: all 200ms linear;
}
.dark-light:checked ~ .logo img{
  filter: brightness(10%);
}

@media screen and (min-width: 400px) {
  .cmdInstallDiv .btn {
    display:block;
  }
  .supportText {
    margin:0px 0px 0px 8px; font-size:11px; text-align:center;
  }
.logo {
	top: 30px;
	left: 20px;
}
.dark-light:checked + label,
.dark-light:not(:checked) + label{
  top: 20px;
  right: 20px;
}
}

/* ---------------------------------*/


/* The Modal (background) */

.modal {
  backdrop-filter: blur(50px);
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  z-index:999;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  position: relative;
  Width:86%;
  Max-width:450px;
  border-radius: 6px;
  left: 50%;
  margin-top:5%;
  /* bring your own prefixes */
  transform: translateX(-50%);
  padding: 0px;
}

/* Modal Content/Box */
.videomodal-content {
  position: relative;
  background-color:var(--modal-for-light);
  Width:86%;
  Max-width:600px;
  border-radius: 6px;
  left: 50%;
  margin-top:5%;
  /* bring your own prefixes */
  transform: translateX(-50%);
  padding: 0px;
  border: 0px solid #888;
}
@media (prefers-color-scheme: dark) {
  .videomodal-content {background-color:var(--modal-for-dark);}
}

.details-modal {
  background: #ffffff;
  border-radius: 0.5em;
  box-shadow: 0 10px 20px rgba(black, 0.2);
  left: 50%;
  max-width: 90%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30em;
  text-align: left;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.details-modal-title {
  padding: 1em 2em;
  pointer-events: all;
  position: relative;
  width: calc(100% - 4.5em);
}


.infolink p:hover{text-decoration: underline;}

.details-modal-content {
  padding: 10px 2em 1em 2em;
  pointer-events: all;
  overflow: auto;
}

.details-modal-content-winget {
  padding: 1.2em 2em 2em 2em;
  pointer-events: all;
  overflow: auto;
}


/* The Close Button */
.close {
  position:relative;
  color: #aaa;
  float: right;
  top:0;
  margin: 1.4rem;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* ---------------------------------*/



/* ---------------------------------*/
/* ---------------------------------*/
/* ---------------------------------*/

.grid {
  list-style: none;
  margin-left: -40px;
 }

.gc {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 40px;
  vertical-align: top;
 }
 
 .gc--1-of-3 {
  width: 40%;
 }
 
 .gc--2-of-3 {
  width: 60%;
 }
 
 .naccs {
  position: relative;
  margin: 0px auto 0;
 }
 
 .naccs .menu div {
  padding: 15px 20px 15px 20px;
  margin-bottom: 10px;
  color: #000;
  background: #ffffff;
  text-align:left;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);*/
  cursor: pointer;
  border:1px solid #cecece;
  border-radius: 4px;
  position: relative;
  font-size:13pt;
  vertical-align: middle;
  font-weight: 400;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 .naccs .menu div:hover {
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
 }
 
 .naccs .menu div span.light {
  height: 10px;
  width: 0px;
  position: absolute;
  top: 24px;
  left: 0px;
  list-style: none;
  background-color: #ffffff;
  border-radius: 0%;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 .naccs .menu div.active span.light {
  background-color: #4278e2;
  left: 0;
  height: 100%;
  width: 0px;
  top: 0;
  border-radius: 3;
 }
 
 .naccs .menu div.active {
  color: #4278e2;
  border:solid #4278e2 2px;
  padding: 15px 20px 15px 40px;
 }
 .naccs .menu .subtext 
 {
  font-size:14px;
  color:#5e5e5e;

 }
 .naccs .menu .itemlist {
  height:auto;
 }

 ul.nacc {
  position: relative;
  height: 0px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 ul.nacc li {
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 ul.nacc li.active {
  transition-delay: .3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
 }
 
 ul.nacc li p {
  margin: 0;
 }


/* Dropdown */


/*--------------------------------------------------------------
1.0 VARIABLE
--------------------------------------------------------------*/

:root {

  /*------------------------------------------------------------
  |
  | 1.1 COLOR
  |
  ------------------------------------------------------------*/

  --ui-color-brand: #000;

  /* COLOR PALETTE */

  --ui-color-n-000: #fff;
  --ui-color-n-050: #f5f5f5;
  --ui-color-n-100: #ebebeb;
  --ui-color-n-300: #aeaeae;
  --ui-color-n-500: #353535;
  --ui-color-n-700: #282828;
  --ui-color-n-900: #1a1a1a;

  /* BACKGROUND COLOR */
  
  --ui-color-background-primary  : var(--ui-color-n-000);
  --ui-color-background-secondary: var(--ui-color-n-050);
  --ui-color-background-tertiary : var(--ui-color-n-100);

  /* BORDER COLOR */

  --ui-color-border: var(--ui-color-n-100);

  /* TYPOGRAPHY COLOR */

  --ui-color-typography-heading: var(--ui-color-n-500);
  --ui-color-typography-body   : var(--ui-color-n-900);
  --ui-color-typography-note   : var(--ui-color-n-300);
  --ui-color-typography-button : var(--ui-color-n-000);

  /*------------------------------------------------------------
  |
  | 1.2 TYPOGRAPHY
  |
  ------------------------------------------------------------*/

  --ui-typography-typeface: "Segoe UI", "Inter", sans-serif;

  /* FONT SIZE */

  --ui-typography-h1: 1.9375rem;
  --ui-typography-h2: 1.5625rem;
  --ui-typography-h3: 1.00rem;
  --ui-typography-p : 1rem;
  --ui-typography-s : .8125rem;

  /* LEADING */

  --ui-typography-h1-leading: 1.2;
  --ui-typography-h2-leading: 1.2;
  --ui-typography-p-leading : 1.5;

  /* MARGIN */

  --ui-typography-margin-heading: .75rem;
  --ui-typography-margin-body   : 1.125rem;

  /*------------------------------------------------------------
  |
  | 1.3 LAYOUT
  |
  ------------------------------------------------------------*/
  
  --ui-layout-container: 1.25rem;
  --ui-layout-grid     : 3.625rem;
  --ui-layout-gutter   : 1rem;

  /* GAP */
  
  --ui-gap-header     : 1rem;
  /*--ui-gap-cta        : .75rem;*/
  --ui-gap-cta        : 0px;
  --ui-gap-hero       : 2rem;
  --ui-gap-customer   : 0.5rem;
  --ui-gap-feature    : 1rem;
  --ui-gap-card       : 1.25rem;
  --ui-gap-pricing    : 2rem;
  --ui-gap-testimonial: 3rem;

  /* BORDER RADIUS */
  
  --ui-radius-avatar: 5rem;
  --ui-radius-button: 5rem;
  --ui-radius-card  : .5rem;

}

/*--------------------------------------------------------------
2.0 FOUNDATION
--------------------------------------------------------------*/

html { box-sizing: border-box; }

*,
*:before,
*:after { box-sizing: inherit; }

body {
  font-family: var(--ui-typography-typeface);
  font-feature-settings: "liga", "kern";
  font-size: var(--ui-typography-p);
  font-weight: 400;
  line-height: var(--ui-typography-p-leading);
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/*--------------------------------------------------------------
3.0 TYPOGRAPHY
--------------------------------------------------------------*/

h1,
h2,
p,
ul { margin-top: 0; }

h1,
h2 {
  /*color: var(--ui-color-typography-heading);*/
  margin-bottom: var(--ui-typography-margin-heading);
}

h1 {
  font-size: var(--ui-typography-h1);
  line-height: var(--ui-typography-h1-leading);
}

h2 {
  font-size: var(--ui-typography-h2);
  line-height: var(--ui-typography-h2-leading);
}

p,
ul { margin-bottom: var(--ui-typography-margin-body); }

p:last-child,
ul:last-child { margin-bottom: 0; }

ul { padding-left: 0; }

strong { font-weight: 700; }

small { font-size: var(--ui-typography-s); }

.ui-text-note {
  color: var(--ui-color-typography-note);
  line-height: 1;
}

/*--------------------------------------------------------------
4.0 IMAGE
--------------------------------------------------------------*/

img,
svg {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

/*--------------------------------------------------------------
5.0 LAYOUT
--------------------------------------------------------------*/

.ui-layout-container {
  padding-left: var(--ui-layout-container);
  padding-right: var(--ui-layout-container);
}

.ui-layout-flex,
.ui-layout-grid {
  align-items: center;
  justify-content: center;
}

.ui-layout-flex { display: flex; }

.ui-layout-grid { display: grid; }

/*--------------------------------------------------------------
6.0 COMPONENT
--------------------------------------------------------------*/

/*--------------------------------------------------------------
|
| 6.1 CTA
|
--------------------------------------------------------------*/

.ui-component-cta {
  flex-direction: column;
  row-gap: var(--ui-gap-cta);
}

/*--------------------------------------------------------------
|
| 6.2 BUTTON
|
--------------------------------------------------------------*/

.ui-component-button {
  border: .0625rem solid var(--ui-color-brand);
  border-radius: var(--ui-radius-button);
  display: block;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.ui-component-button-primary {
  background-color: var(--ui-color-brand);
  color: var(--ui-color-typography-button);
}

.ui-component-button-secondary {
  background-color: var(--ui-color-background-primary);
  color: var(--ui-color-brand);
}

.ui-component-button-big,
.ui-component-button-normal { padding: .75rem 1rem .875rem; }

.ui-component-button-big { width: 100%; }

.ui-component-button-normal { width: fit-content; }

/*--------------------------------------------------------------
|
| 6.3 TOGGLE
|
--------------------------------------------------------------*/

input[name="toggle"] { display: none; }

.ui-component-toggle {
  background-color: var(--ui-color-background-tertiary);
  border-radius: var(--ui-radius-button);
  color: var(--ui-color-typography-note);
  font-size: var(--ui-typography-s);
  font-weight: 700;
  line-height: 1;
  margin: var(--ui-gap-pricing) auto .5rem;
  padding: .25rem;
  width: max-content;
}

.ui-component-toggle--label {
  border-radius: var(--ui-radius-button);
  cursor: pointer;
  padding: .5rem .625rem;
}

#ui-component-toggle__monthly:checked ~
div label[for=ui-component-toggle__monthly],
#ui-component-toggle__yearly:checked ~
div label[for=ui-component-toggle__yearly] {
  background-color: var(--ui-color-background-primary);
  color: var(--ui-color-typography-body);
}

/*--------------------------------------------------------------
|
| 6.4 CARD
|
--------------------------------------------------------------*/

.ui-component-card {
  border: .0625rem solid var(--ui-color-border);
  border-radius: var(--ui-radius-card);
  overflow: hidden;
  width: 100%;
}

/*--------------------------------------------------------------
|
| 6.5 LIST
|
--------------------------------------------------------------*/

.ui-component-list {
  grid-template-columns: 1fr;
  row-gap: .75rem;
}

.ui-component-list--item {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 1.125rem;
  list-style: none;
  padding-left: 1.875rem;
}

.ui-component-list--item-check {
  background-image: url(https://res.cloudinary.com/uisual/image/upload/assets/icons/check.svg);
}

.ui-component-list--item-cross {
  background-image: url(https://res.cloudinary.com/uisual/image/upload/assets/icons/cross.svg);
}

/*--------------------------------------------------------------
7.0 SECTION
--------------------------------------------------------------*/

/*--------------------------------------------------------------
|
| 7.1 HEADER
|
--------------------------------------------------------------*/

.ui-section-header {
  background-color: var(--bkg-header-for-light);
  width: 100%;
  position:fixed;
  z-index:200;
  /* transition: all 200ms linear;*/
  padding-bottom: 1.2rem;
  padding-top: 1.2rem;
  filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 1px 4px);
}

@media (prefers-color-scheme: dark) {
  .ui-section-header { background-color: var(--bkg-header-for-dark); }
}


.ui-section-header__layout { justify-content: space-between; }

/* LOGO */

.ui-section-header--logo { z-index: 1; }

/* HAMBURGER */

#ui-section-header--menu-id { display: none; }

.ui-section-header--menu-icon {
  cursor: pointer;
  display: block;
  height: 1.125rem;
  padding-bottom: .25rem;
  padding-top: .25rem;
  position: relative;
  width: 1.125rem;
  z-index: 1;
}

.ui-section-header--menu-icon::before,
.ui-section-header--menu-icon::after {
  background: var(--ui-color-brand);
  content: "";
  height: .125rem;
  left: 0;
  position: absolute;
  transition: all 250ms cubic-bezier(.785, .135, .15, .86);
  width: 1.125rem; transition: all 200ms linear;
}

@media (prefers-color-scheme: dark) {
  .ui-section-header--menu-icon::before,
  .ui-section-header--menu-icon::after {
    background: rgb(119, 119, 120);
  }
}

.dark-mode .ui-section-header--menu-icon::before,
.dark-mode .ui-section-header--menu-icon::after {
  background: rgb(119, 119, 120);
}

.ui-section-header--menu-icon::before { top: .3125rem; }

.ui-section-header--menu-icon::after { top: .6875rem; }

#ui-section-header--menu-id:checked ~
.ui-section-header--menu-icon::before {
  transform: translateY(3px) rotate(135deg);
}

#ui-section-header--menu-id:checked ~
.ui-section-header--menu-icon::after {
  transform: translateY(-3px) rotate(45deg);
}

/* MENU */

.ui-section-header--nav {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
  flex-direction: column;
  gap: 0;
  left: 0;
  opacity: 0;
  /*padding: 7.375rem var(--ui-layout-container) 5rem;*/
  padding:3.9rem 0 0rem;
  position: absolute;
  right: 0;
  top: -1rem;
  visibility: hidden;
}


#ui-section-header--menu-id:checked ~
.ui-section-header--nav {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.ui-section-header--nav-link {
  font-weight: 500;
  font-size: var(--ui-typography-h3);
  padding: .5rem;
  text-decoration: none;
}

/*--------------------------------------------------------------
|
| 7.2 HERO
|
--------------------------------------------------------------*/

.ui-section-hero {
  padding-bottom: 5rem;
  padding-top: 9rem;
  text-align: center;
}

.ui-section-hero__layout { 
  row-gap: var(--ui-gap-hero); 
}

/*--------------------------------------------------------------
|
| 7.3 CUSTOMER
|
--------------------------------------------------------------*/
.SponsorTitle{
  font-size:14px; color:#898989; text-align: center; margin-bottom:1rem;
}
.ui-section-customer__layout {
  flex-direction: row;
  column-gap: var(--ui-gap-customer);
  margin-bottom:3em;
}

.ui-section-customer--logo {
  height: 2.5rem;
  width: auto;
}

.ui-section-customer--logo-str { height: 1.75rem; }
  
.ui-section-customer--logo-bhn { height: 1.375rem; }

/*--------------------------------------------------------------
|
| 7.4 FEATURE
|
--------------------------------------------------------------*/

.ui-section-sub {
  border-width:1px  0px 0px 0;
  border-style:solid;
  padding-bottom: 1rem;
  padding-top: 1rem;
}


.ui-section-feature {
  background-color: var(--bkg-for-light);
  border-color: var(--sep-for-light);
  border-style:solid;
  border-width:1px  0px 0px 0;

  padding-bottom: 2rem;
  padding-top: 2rem;
}

@media (prefers-color-scheme: dark) {
  .ui-section-feature { background-color: var(--bkg-for-dark); border-color: var(--sep-for-dark)}
}

.ui-section-feature__layout { row-gap: var(--ui-gap-feature); }

.ui-section-feature__layout:first-of-type div {
  grid-row-start: 1;
}

.ui-section-feature__layout:last-of-type { /*margin-top: 5rem;*/ }

/*--------------------------------------------------------------
|
| 7.5 PRICING
|
--------------------------------------------------------------*/

.ui-section-pricing {
  background-color: var(--ui-color-background-secondary);
  padding-bottom: 5rem;
  padding-top: 5rem;
  text-align: center;
}

.ui-section-pricing__layout {
  justify-content: initial;
  margin-bottom: var(--ui-gap-pricing);
  margin-top: var(--ui-gap-pricing);
  row-gap: var(--ui-gap-card);
}

/* CARD */

.ui-component-card--pricing {
  background-color: var(--ui-color-background-primary);
  padding: 0.5rem 0.5rem 0.75rem;
  text-align: left;
}

.ui-component-card--pricing-price {
  line-height: 1;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.ui-component-card--pricing-amount {
  font-size: var(--ui-typography-h1);
  font-weight: 700;
}

/* AMOUNT */

.ui-component-card--pricing-amount-1::before { content: "$5"; }

#ui-component-toggle__yearly:checked ~ div
.ui-component-card--pricing-amount-1::before { content: "$3"; }

.ui-component-card--pricing-amount-2::before { content: "$15"; }

#ui-component-toggle__yearly:checked ~ div
.ui-component-card--pricing-amount-2::before { content: "$13"; }

.ui-component-card--pricing-amount-3::before { content: "$25"; }

#ui-component-toggle__yearly:checked ~ div
.ui-component-card--pricing-amount-3::before { content: "$23"; }

/* LIST */

.ui-component-list--pricing {
  margin-bottom: 1.5rem;
  margin-top: 1.25rem;
}

/*--------------------------------------------------------------
|
| 7.6 TESTIMONIAL
|
--------------------------------------------------------------*/

.ui-section-testimonial {
  padding-bottom: 5rem;
  padding-top: 5rem;
  text-align: center;
}

.ui-section-testimonial__layout {
  row-gap: var(--ui-gap-testimonial);
}

.ui-section-testimonial--avatar {
  border-radius: var(--ui-radius-avatar);
  height: 5rem;
  width: 5rem;
}

.ui-section-testimonial--quote {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.ui-section-testimonial--author { line-height: 1.25; }

/*--------------------------------------------------------------
|
| 7.7 CLOSE
|
--------------------------------------------------------------*/

.ui-section-custom {
  border-style:solid;
  border-width:1px  0px 0px 0;
  padding-bottom: 4rem;
  padding-top: 4rem;
  text-align: center;
}


.ui-section-close {
  border-style: solid;
  border-width: 1px  0px 0px 0;  
  padding-bottom: 5rem;
  padding-top: 5rem;
  text-align: center;
}



/*--------------------------------------------------------------
|
| 7.8 FOOTER
|
--------------------------------------------------------------*/

.ui-section-footer {
  padding-bottom: 2rem;
  padding-top: 2rem;
  border-style:solid;
  border-width:1px  0px 0px 0;
}

.ui-section-footer__layout {
  column-gap: var(--ui-layout-gutter);
}

.ui-section-footer--copyright {
  margin-bottom: 0;
  margin-right: auto;
}

.darkbtnSvg {
  width:32px;
}
.darkmode-btn {
  height:0;
  visibility: collapse;
}

.ui-section-header--nav a{
  width:100%;
  border-radius: 0;
  margin:0;
  border-top:1px solid #82828226;
  padding-left:20px;
  height:70px;
  padding:14x;
}

.ui-section-header--nav a:hover{
  background-color: #7676760c;
}

#myBtn3 {
  height:0; padding:0;
  visibility:collapse;
}

.gif-image {
  border:0px solid red; border-radius: 12px; overflow: hidden;
  grid-row-start:2 !important;
}
.gif-text {
  grid-row-start:1 !important;
}
/*--------------------------------------------------------------
8.0 MEDIA
--------------------------------------------------------------*/

@media screen and (min-width: 640px) {
  
  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/
  .swiper-button-next, .swiper-button-prev {
    visibility:visible !important;
  }
  .ui-layout-grid-gif {
    padding-left: var(--ui-layout-gutter);
    column-gap: var(--ui-layout-gutter);
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  .gif-image {
    grid-column-start:1 !important;
    grid-row-start:1 !important;
  }
  .gif-text {
    grid-column-start:2 !important;
    grid-row-start:1 !important;
  }
}
/*--------------------------------------------------------------
|
| 8.1 768PX
|
--------------------------------------------------------------*/

@media screen and (min-width: 54rem) { /*Default was 48rem*/

  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/
  .ui-layout-grid-gif {
    /*padding-left: var(--ui-layout-gutter);*/
    column-gap: var(--ui-layout-gutter);
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

   #mobile-darkbtn {
    height:0;
    width:0; margin:-1rem;
    visibility:collapse; 
    padding:0;
  }
  .ui-section-header--nav{
    gap: var(--ui-gap-header);
  }

  .ui-section-header--nav a{
    border:0px;
    background-color: transparent;
    height:auto;
    width:auto;
    text-align:right;
  }
  .ui-section-header--nav a:hover{
    background-color: transparent;
  }

  #myBtn {
    padding:0;
    height:0; width:0;
    visibility:collapse;
  }

  #myBtn3 {
    transition: all 200ms linear;
    padding:20px 30px;
    margin-left:10px;
    background-color:dodgerblue;
    border:1px;
    float:right;
    border-radius: 64px;
    visibility:visible;
  }
  #myBtn3:hover {
    background-color:#4278e2;
  }

  a.pc-download {
    font-size:16px;
    color:white;
    text-decoration: none;
  }
  
  .darkmode-btn {
  border-radius:50%;
  z-index:999;
  margin:0;
  height:auto;
  background-color:rgba(224, 224, 224, 0.227);
  padding:8px;
  visibility: visible;
  transition: all 200ms linear;
  border: none;
}

.darkmode-btn:hover {
  border-radius:64px;
  z-index:999;
  margin:0;
  height:auto;
  background-color:rgba(31, 31, 31, 0.315);
  padding:8px;
  visibility: visible;

}

.darkmode-btn svg {
  max-width: unset;
}


  :root {

    /*----------------------------------------------------------
    |
    | TYPOGRAPHY
    |
    ----------------------------------------------------------*/

    /* FONT SIZE */

    --ui-typography-h1: 2.1875rem;
    --ui-typography-h2: 1.75rem;
    --ui-typography-p : 1.125rem;
    --ui-typography-s : .875rem;

    /* MARGIN */

    --ui-typography-margin-body: 1.25rem;

    /*----------------------------------------------------------
    |
    | LAYOUT
    |
    ----------------------------------------------------------*/

    --ui-layout-container: 4.25rem;
    --ui-layout-gutter   : 1.5rem;

    /* GAP */

    --ui-gap-header: 1.5rem;
    --ui-gap-card  : 1.5rem;

  }

  /*------------------------------------------------------------
  IMAGE
  ------------------------------------------------------------*/

  .ui-image-half-left {
    margin-right: 1rem;
  }

  /*------------------------------------------------------------
  LAYOUT
  ------------------------------------------------------------*/

  .ui-layout-container,
  .ui-layout-column-center {
    margin-left: auto;
    margin-right: auto;
  }

  .ui-layout-grid-2,
  .ui-layout-grid-3 {
    padding-left: var(--ui-layout-gutter);
    column-gap: var(--ui-layout-gutter);
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: 260px 1.2fr;
    justify-items: center;
  }

  .ui-layout-grid-custom {
    column-gap: var(--ui-layout-gutter);
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  .ui-layout-grid-3 div:nth-of-type(3) {
    left: calc(50% + (var(--ui-layout-gutter) / 2));
    position: relative;
  }

  .ui-layout-column-4 {
    width: calc((var(--ui-layout-grid) * 4) +
           (var(--ui-layout-gutter) * 3));
  }

  /*------------------------------------------------------------
  COMPONENT
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  |
  | LIST
  |
  ------------------------------------------------------------*/

  .ui-component-list--item {
    background-size: 1.25rem;
    padding-left: 2rem;
  }

  /*------------------------------------------------------------
  SECTION
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  |
  | HEADER
  |
  ------------------------------------------------------------*/

  .ui-section-header {
    /*
    padding-bottom: 2rem;
    padding-top: 2rem;*/
  }

  /* ICON */

  .ui-section-header--menu-icon { display: none; }

  /* NAV */
  .light-mode .ui-section-header--nav{
    background-color: transparent;
  }
  
  .ui-section-header--nav {
    background-color: transparent;
    box-shadow: none;
    flex-direction: row;
    opacity: 1;
    padding: 0;
    position: static;
    visibility: visible;
  }
  
  .ui-section-header--nav-link {
    font-size: var(--ui-typography-p);
    padding: 0;
  }

  /*------------------------------------------------------------
  |
  | HERO
  |
  ------------------------------------------------------------*/

  .ui-section-hero { text-align: left; }

  .ui-section-hero .ui-component-cta { align-items: start; }

  /*------------------------------------------------------------
  |
  | CUSTOMER
  |
  ------------------------------------------------------------*/

  .ui-section-customer__layout {
    flex-direction: row;
  }
  
  .ui-section-customer--logo {
    margin-left: 0;
    margin-right: 0;
    height:3rem;
  }

  /*------------------------------------------------------------
  |
  | FEATURE
  |
  ------------------------------------------------------------*/

  .ui-section-feature__layout:first-of-type div {
    grid-row-start: initial;
  }

  /*------------------------------------------------------------
  |
  | PRICING
  |
  ------------------------------------------------------------*/

  .ui-component-card--pricing { padding: 2rem 2rem 2.25rem; text-align: center;}

  /*------------------------------------------------------------
  |
  | FOOTER
  |
  ------------------------------------------------------------*/

  .ui-section-footer {
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  
}

/*--------------------------------------------------------------
|
| 8.2 1024PX
|
--------------------------------------------------------------*/

@media screen and (min-width: 64rem) {

  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/

  :root {

    /*----------------------------------------------------------
    |
    | LAYOUT
    |
    ----------------------------------------------------------*/

    --ui-layout-container: 0;
  
  }

  /*------------------------------------------------------------
  LAYOUT
  ------------------------------------------------------------*/
  
  .ui-layout-container { width: 60rem; }


  .ui-layout-grid-3 div:nth-of-type(3) { position: static; }

  .ui-layout-grid-2,
  .ui-layout-grid-3 {
    padding-left: var(--ui-layout-gutter);
    column-gap: var(--ui-layout-gutter);
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: 1fr 620px;
    justify-items: center;
  }

  /*------------------------------------------------------------
  SECTION
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  |
  | HERO
  |
  ------------------------------------------------------------*/

  .ui-section-hero .ui-component-cta {
    align-items: center;
    column-gap: var(--ui-gap-cta);
    flex-direction: row;
    justify-content: start;
  }

}

/*--------------------------------------------------------------
|
| 8.3 1200PX
|
--------------------------------------------------------------*/

@media screen and (min-width: 75rem) {

  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/

  :root {

    /*----------------------------------------------------------
    |
    | TYPOGRAPHY
    |
    ----------------------------------------------------------*/

    /* FONT SIZE */

    --ui-typography-h1: 2.75rem;
    --ui-typography-h2: 2.1875rem;
    --ui-typography-h4: 1.4375rem;

    /* MARGIN */

    --ui-typography-margin-heading: 1rem;
    --ui-typography-margin-body   : 1.75rem;

    /*----------------------------------------------------------
    |
    | LAYOUT
    |
    ----------------------------------------------------------*/

    --ui-layout-grid  : 4rem;
    --ui-layout-gutter: 2rem;

    /* GAP */

    --ui-gap-header  : 2rem;
    --ui-gap-customer: 0.5rem;
    --ui-gap-card    : 2rem;
    --ui-gap-pricing : 3rem;
    
  }

  /*------------------------------------------------------------
  TYPOGRAPHY
  ------------------------------------------------------------*/
  .ui-text-title {
  }
  .ui-text-intro { 
    color:#797979;
    font-size: var(--ui-typography-h4); 
    font-family: 'Roboto', sans-serif;
    margin-top:-12px;
  }

  /*------------------------------------------------------------
  LAYOUT
  ------------------------------------------------------------*/
  
  .ui-layout-container { width: 70rem; }

  /*------------------------------------------------------------
  COMPONENT
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  |
  | BUTTON
  |
  ------------------------------------------------------------*/

  .ui-component-button-big,
  .ui-component-button-normal {
    padding-bottom: 1.125rem;
    padding-top: 1rem;
  }

  /*------------------------------------------------------------
  SECTION
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  |
  | HEADER
  |
  ------------------------------------------------------------*/

  .ui-section-header { padding-top: 1rem; padding-bottom:1rem;}

  /*------------------------------------------------------------
  |
  | HERO
  |
  ------------------------------------------------------------*/

  .ui-section-hero {
    padding-top: 10rem;
    padding-bottom: 5.5rem;
  }

  /*------------------------------------------------------------
  |
  | CUSTOMER
  |
  ------------------------------------------------------------*/

  .ui-section-customer--logo { height: 3.5rem; }
  
  .ui-section-customer--logo-str { height: 2.25rem; }
  
  .ui-section-customer--logo-bhn { height: 1.75rem; }

  /*------------------------------------------------------------
  |
  | FEATURE
  |
  ------------------------------------------------------------*/

  .ui-section-feature {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

  .ui-section-feature__layout:last-of-type {
    /* margin-top: 7.5rem;*/
  }

  /* LIST */

  .ui-component-list-feature {
    column-gap: var(--ui-layout-gutter);
    grid-template-columns: repeat(2, 1fr);
  }

  /*------------------------------------------------------------
  |
  | PRICING
  |
  ------------------------------------------------------------*/

  .ui-section-pricing {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }

  .ui-component-card--pricing { padding: 1.5rem; }

  /*------------------------------------------------------------
  |
  | TESTIMONIAL
  |
  ------------------------------------------------------------*/

  .ui-section-testimonial {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
  }

  /*------------------------------------------------------------
  |
  | CLOSE
  |
  ------------------------------------------------------------*/

  .ui-section-close {
    border-style: solid;
    border-width: 1px 0px 0px 0;
    background-color: var(--bkg-header-for-light);
    border-color: var(--sep-for-light);
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
  }
  
  @media (prefers-color-scheme: dark) {
    .ui-section-close { background-color: var(--bkg-header-for-dark); border-color: var(--sep-for-dark)}
  }
  /*------------------------------------------------------------
  |
  | FOOTER
  |
  ------------------------------------------------------------*/

  .ui-section-footer {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

  /*---*/
  .column {
    float: left;
    width: 50%;
    padding: 0 10px;
  }
  
  /* Remove extra left and right margins, due to padding in columns */
  .row {margin: 0 -5px;}
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Style the counter cards */
  .card {
    padding: 16px;
    text-align: center;
    
  }


  /* Responsive columns - one column layout (vertical) on small screens */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }
  }
}