@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap";

body {
 font-family: Roboto, sans-serif
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight: 700;
 color: #2b2d34
}

h1 {
 font-size: 44px;
 line-height: 1.4
}

h2 {
 font-size: 34px;
 line-height: 1.6
}

.navbar {
 padding: 24px 0
}

.navbar .logo-image {
 height: 40px
}

.navbar .navbar-brand {
 padding: 0
}

.jumbotron {
 background-color: #f9f9f9;
 overflow: hidden;
 background-image: url(https://image.sf.email.raiffeisen.ba/lib/fe3e11717564047f711772/m/1/82aeb591-fe8f-4237-9d16-033079a602b2.jpg);
 background-position: center right;
 background-repeat: no-repeat;
 background-size: 60% auto;
 padding: 150px 0;
 max-width: 1920px;
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center
}

@media only screen and (max-width: 768px) {
 .jumbotron {
  background-image: none;
  flex-direction: column;
  padding: 0
 }
}

.jumbotron .jumbotron-cover {
 display: none
}

@media only screen and (max-width: 768px) {
 .jumbotron .jumbotron-cover {
  display: block;
  max-width: 100%
 }
}

.jumbotron .jumbotron-left {
 display: flex;
 justify-content: center;
 align-items: flex-start;
 flex-direction: column;
 height: 100%
}

@media only screen and (max-width: 768px) {
 .jumbotron .jumbotron-left {
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 30px
 }

 .jumbotron .jumbotron-left h1 {
  font-size: 34px
 }
}

.jumbotron .arrow {
 height: 246px
}

@media only screen and (max-width: 768px) {
 .row-gap {
  gap: 40px
 }
}

.form-title {
 text-align: center;
 font-size: 20px;
 line-height: 28px;
 font-weight: 700;
 margin-top: 10px
}

@media only screen and (max-width: 768px) {
 .form-title {
  margin-top: 100px
 }
}

.form-title h3,
.form-title h2 {
 margin-bottom: 50px
}

.form-title p {
 margin-top: 50px
}

.form {
 padding: 0
}

.form h3 {
 text-align: left
}

@media only screen and (max-width: 768px) {
 .form h3 {
  text-align: center
 }
}

@media only screen and (max-width: 768px) {
 .form {
  padding: 40px 0
 }

 .form .form-title {
  margin-top: 0
 }
}

.form .list-wrapper {
 display: grid;
 gap: 50px
}

.form .list-wrapper .list-item {
 border-radius: 8px;
 background: #fdf8d5;
 position: relative;
 display: flex;
 align-items: center
}

.form .list-wrapper .list-item .list-line {
 background: #f9bb30;
 width: calc(100% + 20px);
 height: 20px;
 position: absolute;
 left: 0;
 top: 10px;
 z-index: -1;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 18px
}

.form .list-wrapper .list-item .list-icon {
 background: #fee600;
 height: calc(100% + 5px);
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 30px;
 margin-left: 36px;
 margin-top: -5px;
 position: relative
}

.form .list-wrapper .list-item p {
 padding: 16px 46px;
 margin: 0;
 font-weight: 100;
 font-size: 18px
}

.form .iti {
 display: block
}

.form label {
 font-size: 14px;
 line-height: 20px;
 font-weight: 700
}

.form label.form-check-label {
 font-size: 16px
}

.form .form-check-input[type=checkbox] {
 border: 1px solid;
 border-color: #bfc0c2;
 border-radius: 2px;
 background: #f9f9f9;
 width: 18px;
 height: 18px;
 margin-bottom: 4px
}

.form .form-check-input[type=checkbox]:checked {
 background: #fee600;
 border: none
}

.form .form-control {
 font-weight: 700;
 padding: 12px 16px;
 border: 1px solid;
 border-color: #bfc0c2;
 box-shadow: 0 1px 2px #1018280d;
 border-radius: 4px
}

.form .form-control::placeholder {
 color: #bfc0c2
}

.form .form-wrapper {
 border-radius: 20px;
 background-color: #f9f9f9
}

.form .form-wrapper form {
 width: 588px;
 max-width: 100%;
 margin: auto;
 padding: 70px 10px 50px
}

.form .form-wrapper .form-check {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px
}

.cards .form-title {
 margin-top: 90px
}

.cards .card {
 padding: 40px 20px 20px;
 border-color: #dadada;
 border-radius: 12px;
 height: 100%
}

.cards .card .top-card {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: #fee600;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #2b2d34;
 font-size: 32px;
 font-weight: 700;
 margin: -70px auto auto
}

.cards .card .card-body {
 padding: 20px 0 0
}

.cards .card .bottom-card {
 height: 5px;
 width: 100%;
 background: #fee600;
 border-radius: 12px;
 margin-top: 20px
}

.cards .card.one .bottom-card {
 background: linear-gradient(to right, #fee600 20%, #f9bb30 20%)
}

.cards .card.two .bottom-card {
 background: linear-gradient(to right, #fee600 40%, #f9bb30 40%)
}

.cards .card.three .bottom-card {
 background: linear-gradient(to right, #fee600 60%, #f9bb30 60%)
}

.cards .card.four .bottom-card {
 background: linear-gradient(to right, #fee600 80%, #f9bb30 80%)
}

.cards .card.five {
 margin-top: 40px
}

.svg-pop {
 width: 100%;
 height: auto;
 padding: 30px 0 20px;
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 position: relative
}

.svg-pop p {
 font-size: 30px;
 line-height: 24px;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%)
}

.btn {
 padding: 14px;
 background: #fee600;
 color: #2b2d34;
 font-weight: 700;
 font-size: 16px;
 line-height: 22px;
 text-align: center;
 width: 100%;
 border: none
}

.btn:hover,
.btn:active,
.btn:focus {
 background: #2b2d34;
 color: #fee600;
 background-color: #2b2d34
}

:not(.btn-check)+.btn:active {
 background: #2b2d34;
 color: #fee600;
 background-color: #2b2d34
}

.accordion {
 display: grid;
 gap: 10px;
 margin-top: 50px
}

.accordion .accordion-body {
 padding-top: 0
}

.accordion .accordion-item {
 border-radius: 10px;
 overflow: hidden;
 background-color: #f9f9f9;
 border: none
}

.accordion .accordion-item .accordion-button {
 background: #f9f9f9;
 box-shadow: none;
 font-weight: 700;
 font-size: 20px;
 color: #2b2d34
}

.accordion .accordion-item .accordion-button:not(.collapsed) {
 color: #2b2d34;
 background: #f9f9f9
}

footer {
 background-color: #2b2d34;
 color: #fff;
 margin-top: 50px
}

footer .container-fluid {
 max-width: 1544px
}

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

footer .inside-footer .social-media {
 list-style: none;
 padding: 0;
 display: flex;
 gap: 20px;
 margin: 0
}

footer .inside-footer .social-media a {
 padding: 10px;
 border: 1px solid;
 border-color: #808185;
 width: 64px;
 height: 64px;
 display: flex;
 justify-content: center;
 align-items: center
}

@media only screen and (max-width: 768px) {
 footer .inside-footer .social-media a {
  width: 34px;
  height: 34px;
  border: none
 }

 footer .inside-footer .social-media a img {
  width: 28px;
  height: 24px
 }
}

a {
 text-decoration: none;
 color: #20a3e5
}
.rf-modal {
 display: none;
 position: fixed;
 justify-content: center;
 align-items: center;
 margin: auto;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 z-index: 99999;
    background: rgba(170, 170, 170, .3);
}

.rf-modal.show {
 display: flex;
}

.rf-modal-container {
 width: 600px;
 max-width: 100%;
 background-color: #fff;
 border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

.rf-modal-header {
 border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
    border-radius: 0;
    background: #f3f4ee;
    font-weight: bold;
 display: flex;
 justify-content: space-between;
 padding: 0.4em 1em;
 position: relative;
}

.rf-modal-header h5 {
 font-size: 12px;
 margin: 0.1em 0;
}

.rf-modal-header .close {
 border: 0;
 background: none;
 font-size: 1em;
 position: absolute;
 right: 0.3em;
 top: 50%;
 width: 20px;
 height: 20px;
 margin: -10px 0 0 0;
 padding: 1px;
 text-indent: -9999px;
 white-space: nowrap;
}

.rf-modal-header .close span {
 background-image: url(https://image.sf.email.raiffeisen.ba/lib/fe3e11717564047f711772/m/1/a8796e50-124f-4a66-a04d-ea53a16aa69f.png);
 background-position: -96px -128px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -8px;
 margin-left: -8px;
 width: 16px;
 height: 16px;
}

.rf-modal-body {
 padding: 0.5em 1em;
 margin: 0.5em 0;
 color: #333;
 font-size: 12px;
}