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

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

p,
h1,
h2

 {
 font-weight: 700;
 color: #2b2d34
}

h3,
h5,
h6 {
 font-weight: 400;
 color: #2b2d34
}

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

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

h3 {
 font-size: 20px;
 line-height: 1.2
}

.navbar {
 padding: 24px 0
}

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

.navbar .navbar-brand {
 padding: 0
}

.space {height: 40px !important;}

.card-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #808185;
}

.jumbotron {
 background-color: #FEE600;
 overflow: hidden;
 background-image: url(https://image.sf.email.raiffeisen-kosovo.com/lib/fe3a11717564047c711d71/m/1/58be7d9e-5588-4ed5-b6a3-50809fbab14b.jpg);
 background-position: center right;
 background-repeat: no-repeat;
 background-size: 57% auto;
 padding: 150px 0;
 max-width: 1920px;
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center
}

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

   .jumbotron .jumbotron-cover {
    display: none
   }

   .jumbotron-left p {
    font-weight: 400;
   }
   
   .hero .hero-left .hero-container {
    margin: 0 auto 10vw;
    text-align: center;
    padding: 0 10px;
}

   .hero .hero-left .hero-container h1 {
       font-weight: 700;
   }
   
   .hero .hero-left .hero-container h1,
   .hero .hero-left .hero-container p,
   .hero .hero-right .hero-container h1,
   .hero .hero-right .hero-container p {
       color: #2b2d33
   }

.hero {
    max-width: 1920px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: #fee600;
    border-radius: 20px;
}

.hero .hero-cover {
    width: 50%;
}

.hero .hero-cover-mobile {
    display: none;
    width: 100%;
}

.hero .hero-left .hero-container {
    margin: 0 auto 10vw;
    text-align: center;
    padding: 10px;
}

.hero-left {
    margin-left: 20px;
    background-color: #fee600;
}

.hero-right {
    background-color: #fee600;
}

.wrapper-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    justify-content: center;
    margin-left: -20px;
}

.wrapper-text h3,
.wrapper-text h1 {
    padding: 0 10px;
    align-items: baseline;
    justify-content: center;
    vertical-align: bottom;
    margin: 0;
    color: #2b2d33;
}

.d-flex {
    align-items: center;
}


@media only screen and (max-width: 768px) {   

 .jumbotron .jumbotron-cover {
        display: block;
        max-width: 100%
       }
 .jumbotron {
  background-image: none;
  flex-direction: column;
  padding: 0
 }
 .hero {
    background-image: none;
    flex-direction: column-reverse;
    padding: 0;
    max-width: 520px;
}
.hero .hero-cover-mobile {
    display: block;
}
.hero .hero-cover {
    display: none;
}

}


@media (min-width: 768px) {
    .hero .hero-left .hero-container {
        --width: 720px;
        margin: 0;
        /* margin-left: calc(50vw - var(--width) / 2); */
        text-align: left;
    }

}

@media (min-width: 992px) {
    .hero .hero-left .hero-container {
        --width: 960px;
    }
}

@media (min-width: 1200px) {
    .hero .hero-left .hero-container {
        --width: 1140px;
    }
}

@media (min-width: 1400px) {
    .hero .hero-left .hero-container {
        --width: 1320px;
    }
}


@media (max-width: 400px) {
    .hero .hero-left .hero-container h1 {
        font-size: 24px;
        line-height: 1.4;
    }
}

@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: 160px
}

@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: #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: 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: 990px;
 max-width: 100%;
 margin: auto;
 padding: 70px 10px 50px
}

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

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-container .arrow,
.wrapper-text .arrow {
    max-width: 19px;
    width: 100%;
}

.box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.box .wrapper-text {
    margin-left: 0;
    align-items: flex-start;
}

.box .wrapper-text h3 {
    text-align: left;
    font-weight: 400;
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}


img.img-column {
    display: block;
    width: 216px;
    object-fit: contain;
    max-width: 100%;
    height:  auto;
    margin: 0 auto;
}

.button {
    display: flex;
    justify-content: center;
}

.btn {
 padding: 14px;
 background: #fee600;
 color: #2b2d34;
 font-weight: 700;
 font-size: 16px;
 line-height: 22px;
 text-align: center;
 width: 100%;
 max-width: 249px;
 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-kosovo.com/lib/fe3a11717564047c711d71/m/1/a623a7a1-1f77-4bae-ac13-6bc120e0a0e7.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;
}