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

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

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

p
{
 font-weight: 500;
 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.communication.raiffeisen.ua/lib/fe3e117175640479731570/m/1/31119fb3-e37e-457c-bf9d-570301f5941e.png);
 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: 30px
}

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

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

.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: #F9F9F9;
 position: relative;
 display: flex;
 align-items: center
}

.form .list-wrapper .list-item .list-line {
 background: #D6EEF0;
 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: #D6EEF0;
 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: 30px;
 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
}

@media (max-width: 768px) {
    .cards {
        margin: 30px 0;
    }
}

.cards .form-title {
    margin-bottom: 60px;
}

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

.cards .card .top-card {
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2b2d34;
    font-size: 28px;
    font-weight: 700;
    border: solid 4px black;
    border-radius: 4px;
}

.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;
    height: auto;
}

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

.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: px
}

.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: #fff; 
    color: #2b2d34;        
    margin-top: 10px;
}

footer .container-fluid {
    max-width: 1280px;
}

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: #fff;    
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    footer .inside-footer {
        flex-direction: column;
        font-size: 14px; 
        line-height: 1.4; 
    }

    footer .inside-footer .social-media {
        justify-content: center;
        margin-top: 20px;   
    }

    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;
}

.list-wrapper {
    --item-bg: #fdf8d5;
    --icon-bg: #fee600;
}

.list-wrapper .list-wrapper-item {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--item-bg);
    border: none;
    border-radius: 10px;
    overflow: hidden;
    min-height: 85px;
}

.list-wrapper .list-wrapper-item-img {
    flex: 0 0 16%;
    background-color: var(--icon-bg);
    width: 16%;
    min-width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}

.list-wrapper .list-wrapper-item-img svg {
    position: absolute;
    right: 0;
    bottom: 0;
}

.list-wrapper .list-wrapper-item-img svg path {
    fill: var(--item-bg);
}

.list-wrapper .list-wrapper-item-text {
    padding: 3% 5%;
}

.list-wrapper .list-wrapper-item-text p {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: #2b2d33;
}

.list-wrapper:nth-child(2) {
    --item-bg: #f2f2f3;
    --icon-bg: #d5d5d6;
}

.list-wrapper:nth-child(3) {
    --item-bg: #d0f0e5;
    --icon-bg: #67d0ab;
}

.list-wrapper:nth-child(4) {
    --item-bg: #f8f6f2;
    --icon-bg: #f1ede6;
}