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

@font-face {
 font-family: Amalia;
 font-style: normal;
 font-weight: 400;
 mso-font-alt: "Arial";
 src: url(https://dev.alty.co/email-assets/rbi/fonts/Amalia-Regular.ttf) format("truetype")
}

@font-face {
 font-family: Amalia;
 font-style: italic;
 font-weight: 400;
 mso-font-alt: "Arial";
 src: url(https://dev.alty.co/email-assets/rbi/fonts/Amalia-Italic.ttf) format("truetype")
}

@font-face {
 font-family: Amalia;
 font-style: normal;
 font-weight: 700;
 mso-font-alt: "Arial";
 src: url(https://dev.alty.co/email-assets/rbi/fonts/Amalia-Bold.ttf) format("truetype")
}

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-position: center right;
 background-repeat: no-repeat;
 background-size: 60% auto;
 padding: 150px 0;
 max-width: 1920px;
 margin: auto auto 100px;
 display: flex;
 justify-content: center;
 align-items: center
}

@media only screen and (max-width: 768px) {
 .jumbotron {
  background-image: none !important;
  flex-direction: column;
  padding: 0;
  margin-bottom: 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%
}

.jumbotron .jumbotron-left p {
 font-weight: 100;
 font-size: 18px;
 margin-top: 18px
}

@media only screen and (max-width: 768px) {
 .jumbotron .jumbotron-left {
  height: 100%;
  text-align: center;
  align-items: 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: 100px
}

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

.form-title p {
 margin-top: 50px;
 font-weight: 100;
 font-size: 18px
}

.form {
 padding: 0
}

.form input {
 width: 100%;
 padding: 16px 26px 18px;
 border-radius: 8px;
 border: 2px solid;
 box-shadow: none;
 outline: none;
 border-color: #fee600
}

.form button {
 margin-top: -10px
}

.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: flex;
 gap: 15px
}

@media (max-width: 992px) {
 .form .list-wrapper {
  flex-direction: column
 }
}

.form .list-wrapper .list-item {
 border-radius: 8px;
 background: #ffffff;
 position: relative;
 display: flex;
 height: 100%;
 flex: 1 0 28%
}

.form .list-wrapper .list-item:nth-child(2) {
 flex: 1 0 40%
}

.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;
 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;
 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 {
 margin-top: 10px;
 border-radius: 20px;
 background-color: #f9f9f9;
 padding: 40px;
 position: relative
}

@media (max-width: 768px) {
 .form .form-wrapper {
  padding: 20px
 }
}

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

@media (max-width: 768px) {
 .form .form-wrapper form {
  width: auto
 }
}

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

.form .form-wrapper .form-title {
 margin-top: 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
}

.flex-wrapper {
 display: flex;
 justify-content: space-between;
 align-items: center;
 max-width: 80%;
 margin: 0 auto 40px
}

@media (max-width: 768px) {
 .flex-wrapper {
  max-width: 100%
 }
}

.flex-wrapper>img {
 max-width: 20%
}

@media (max-width: 992px) {
 .flex-wrapper>img {
  display: none
 }
}

@media (max-width: 992px) {
 .flex-wrapper .mid-element {
  margin-left: auto;
  margin-right: auto
 }
}

.social-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 15px
}

.behind {
 z-index: -1
}

@media (max-width: 992px) {
 .accordions .form-title {
  margin-top: 40px
 }
}

.check {
 --borderWidth: 7px;
 --height: 24px;
 --width: 12px;
 --borderColor: #2b2d34;

 display: inline-block;
 transform: translate(-50%, -50%) rotate(45deg);
 height: var(--height);
 width: var(--width);
 border-bottom: var(--borderWidth) solid var(--borderColor);
 border-right: var(--borderWidth) solid var(--borderColor);
 opacity: 0;
 transition: all .4s ease;
 position: absolute;
 top: 50%;
 left: 50%;
}

.form-ref.animate .check {
 opacity: 1;
}

.form-ref.animate .btn svg {
 opacity: 0;
}


.form-ref button,
.form-ref button svg path {
 transition: all .3s ease;
}

.form-ref button:focus .check,
.form-ref button:hover .check,
.form-ref button:focus svg path,
.form-ref button:hover svg path {
 --borderColor: #fee600;
 fill: var(--borderColor);
}

.form-ref .btn .btn-icons {
 position: relative;
 display: inline-flex;
 width: 30px;
 justify-content: center;
 align-items: center;
 transform: translateY(2px);
}

.form-ref .btn img {
 margin-right: 6px;
 width: 16px;
}