/**************ROOT****************/
:root{
--orange:#f04204;
--dark:#3a3a3a;
--light:#c3c3c3;
--green:#599b00;
}

/**************BASE****************/
body {
  font-size: 13px;
  color: #0f0f0f;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  background-color: rgb(255 252 247);
}

body.dark-mode {
  color: var(--light);
  background-color: #000;
}

/*******Headers********************/
h1, h2, h3, h4, h5, h6 {
  color: var(--dark);
  font-family: "Bebas Neue", sans-serif;
  font-optical-sizing: auto;
  text-transform: uppercase;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: var(--light);
}

h1 {
  font-size: 4rem;
  line-height: 3.8rem;
}

/*******Text properties********************/
.text-bold {
  font-weight: 500;
}
.text-bolder {
  font-weight: 700;
}

.text-orange {
  color:var(--orange);
}

.text-green {
  color:var(--green) !important;
}

/*****Buttons****************/
.btn-primaryx {
  border: 1px solid var(--orange);
  box-shadow: none;
  background-color: var(--orange);
  color: #fff;
  border-radius: 5px;
  font-size: 15px;
  padding: 8px 20px;
}

.btn-primaryx:hover {
  color: #fff;
  background-color: orange;
}

.btn-primaryz {
  border: 1px solid var(--dark);
  box-shadow: none;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  font-size: 15px;
  padding: 8px 20px;
}

.btn-primaryz:hover {
  color: #fff;
  background-color: var(--dark);
}

.btn-primaryw {
  border: 1px solid var(--dark);
  box-shadow: none;
  background-color: #fff;
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  padding: 8px 20px;
  margin-top: -1px;
  background-color: var(--dark);
}

.btn-primaryw:hover {
  color: #fff;
  background-color: var(--orange);
}

.arrow-icon {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.arrow-btn:hover .arrow-icon {
  animation: bounceRight 0.3s infinite alternate;
}

img {
  width: auto;
  max-width: 100%;
}

@keyframes bounceRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(8px);
  }
}

/*******Pages*************/

  #main-header {
    background: url('/images/main_header_bg.png');
    background-repeat: no-repeat;
    background-position: right;
    background-color: #fff;
  }

  .dark-mode #main-header {
    background: url('/images/main_header_bg.png');
    background-repeat: no-repeat;
    background-position: right;
    background-color: #000;
  }

/**************Navigation***************/

.dark-mode .bg-white {
    --bs-bg-opacity: 1; background-color: rgb(14 12 12) !important;
}

.dark-mode .navbar-text a, .dark-mode .navbar-text a:hover, .dark-mode .navbar-text a:focus {
    color: var(--light);
}

.icon-btn {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:.3s;
    color:#222;
}

.icon-btn:hover{
    color: #fff !important;
    background:var(--dark);
}

.icon-btn i{
    font-size:22px;
}

.profile {
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.dark-mode .profile {
  color: var(--light);
}

.profile-avatar {

    width:46px;
    height:46px;
    border-radius:50%;
    border:2px solid #ddd;

    display:flex;
    align-items:center;
    justify-content:center;
}

.profile-avatar i{
    font-size:26px;
}

.profile-name{
    font-size:15px;
    font-weight:700;
    line-height:1.2;
}

.profile-premium {
    font-size:13px;
    color:#ff6b00;
    font-weight:600;
}

#profile-modal {
  margin-right: 0;
}

.nav-link {
  font-size: 14px;
    color: #000;
    font-weight: 500;
}

.dark-mode .nav-link {
    color: var(--light);
}

/***********Top nav search box**************/
.search-box{
  position:relative;
}

.search-box input{
  background: #f5f5f7;
  border-radius: 5px;
  /* padding: 12px 50px 12px 20px; */
  box-shadow: none;
  border: 1px solid gainsboro;
  font-size: 13px;
  padding: 8px 20px;
  width: calc(100% - 106px);
  display: inline-block;
}

.search-box input:focus{
    box-shadow:none;
    background:#f5f5f7;
}

/***********homepage div properties**************/
.content-block-wrapper {
  border:1px solid gainsboro;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  background-color: #fff;
}

.dark-mode .content-block-wrapper {
  border:1px solid var(--dark);
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  background-color: #000;
}

.content-item-wrapper {
  border:1px solid gainsboro;
  padding: 15px;
  border-radius: 5px;
  background-color: #fff;
}

.dark-mode .content-item-wrapper {
    border: 1px solid var(--dark);
    padding: 15px;
    border-radius: 5px;
    background-color: #000;
}

.dark-mode .border {
    border: 1px solid var(--dark) !important;
}


.why-cardnakama-item .content-item-wrapper {
  min-height: 122px;
}

.why-cardnakama-item .bi {
  font-size: 40px;
  color:var(--orange);
}

.process-flow-wrapper .bi {
  font-size: 40px;
  color:var(--orange);
}

.process-flow-wrapper .step{
    position:relative;
}

.process-flow-wrapper .step::after{
    content:"\F138";          /* Bootstrap Icon: arrow-right */
    font-family:"bootstrap-icons";
    position:absolute;
    right:-18px;
    top:35px;
    font-size:20px;
    color:#6c757d;
    z-index:10;
}

/* Remove arrow from last item */
.process-flow-wrapper .step:last-child::after{
    display:none;
}

/* Hide arrows on mobile */
@media (max-width: 767px){
    .process-flow-wrapper .step::after{
        display:none;
    }
}

.guarantees-item .bi {
  font-size: 40px;
  color:var(--orange);
}

/*
.content-block-wrapper .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.25);
    padding-left: calc(var(--bs-gutter-x) * 0.25);
}
*/

/************FOOTER******************/
footer a {
  color: var(--dark);
  text-decoration: none;
}

.dark-mode footer a {
  color: var(--light);
}

footer ul {
  list-style-type: none;
  padding-left: 0;
}

footer a:hover {
  text-decoration: underline;
}

/***********CUSTOM*****************/


@media (min-width: 1400px) and (max-width: 1560px) {
  .guarantees-item .bi, .why-cardnakama-item .bi {
    font-size: 30px;
  }
}

@media (max-width: 1845px) {
  #main-header {
    background: url(/images/main_header_bg_blur.png);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #fff;
  }
}

@media (min-width: 991.98px) and (max-width: 1223px) {
  .search-box {
    display: none;
  }
}