/*fonts*/

@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&display=swap');
@import url(https://fonts.googleapis.com/css?family=Bungee);
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: #000 !important;
}
.about_title h3{
    font-size: 3rem;
    font-family: 'Bungee';
    color: #234697;
}
#navbarSupportedContent ul li{
    background-color: #FFF200;
    margin-bottom: 5px;
    border-radius: 35px;
    text-align: center;
}
body{
    background-color: #D6D7DB;
}
    .steps_card{
      border: 4px solid #000;
      transition: .5s;
    }
    .steps_card:hover img{
      transform: scale(1.2);
      transition: .5s;
      overflow: hidden;
    }
/*added for gas web*/
.contact_btn_web:hover{
    background-color: #000 !important;
    color: #fff !important;
    transition: .5s;
    border-radius: 0 !important;
    transform: translateX(10px);
}



.carousel-caption {
  background-color: rgba(0, 0, 0, .5);
  left: 5% !important;
  right: 50% !important;
  bottom: 5%;
  padding: 15px 20px 15px 20px;
}
.carousel-caption h3{
    font-size: 4rem;
    font-family: 'Bakbak One', cursive;
}
.carousel-caption p{
    font-size: 1.5rem;
}

.navbar-light .navbar-toggler {
    color: #337BB9 !important;
    border-color: #337BB9 !important;
}



.card_1_feature {
    border-style: groove;
    border-color: #ffffff;
    box-shadow: 0px 0px 10px 9px rgba(97, 206, 112, 0.5);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 15px 0px 15px;
    padding: 40px 20px 40px 20px;
}

.card_1_feature:hover {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #11a349 0%, #4054b2 100%) !important;
}

.card_2_feature {
    border-style: groove;
    border-color: #ffffff;
    box-shadow: 0px 0px 10px 9px rgba(110, 193, 228, 0.5);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 15px 0px 15px;
    padding: 40px 20px 40px 20px;
}

.card_2_feature:hover {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #23a455 0%, #4054b2 100%) !important;
}

.card_3_feature {
    border-style: groove;
    border-color: #ffffff;
    box-shadow: 0px 0px 10px 9px rgba(35, 164, 85, 0.5);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 15px 0px 15px;
    padding: 40px 20px 40px 20px;
}

.card_3_feature:hover {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #23a455 0%, #4054b2 100%) !important;
}

.card_4_feature {
    border-style: groove;
    border-color: #ffffff;
    box-shadow: 0px 0px 10px 9px rgba(110, 193, 228, 0.5);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 15px 0px 15px;
    padding: 40px 20px 40px 20px;
}

.card_4_feature:hover {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #23a455 0%, #4054b2 100%) !important;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #F5A11D;
}

.dropdown-item {
    cursor: pointer !important;
    color: #fff !important;
}

.errormodal_close {
    background-color: #000 !important;
    color: #0ff !important;
}

/*navbar*/
.navbar-light .navbar-nav .nav-link {
    color: #830A0A;
    font-weight: bold;
}
.login_btn_ul {
    margin-top: 40px !important;
}

.active_submenu {
    background-color: #EC1C24;
    color: #fff;
    font-weight: bold;
}



.active {
   
}

.nav-link {
    padding-bottom: 10px;
}



.last_section {
    margin-bottom: 30px;
}

#download {
    display: none!important;
}

#main-header {
    background-color: #FFFFFF;
    /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.20);*/
}

a.nav-link.active {
    color: #000 !important;
}

a.nav-link:hover {
    transition: .2s;
    color: #F5A11D !important;
}




.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff !important;
    text-decoration: none;
    background-color: transparent !important;
    color: #fff !important;
    transition: .3s;
}
.dropdown-menu{
	background:#000 !important;
    color: #fff !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #F5A11D !important;
  background-color: #000;
}

/*modal*/

#slideBoxModal {
    margin-top: 86px;
    margin-bottom: 100px;
}


/*breadcrumb*/


/*hero section*/

.navber_section {
    padding: 0px 0px;
}

.hero_section_pad {
    padding: 25px 0px 10px 0;
}



.second_section_hero {
    padding: 5px 15px;
}

.hero_btn {
    padding: 8px 15px;
    background: #2E3091;
    font-weight: bold;
    transition: .5s;
    color: #fff;
    text-decoration: none;
}

.hero_btn:hover {
    background: #EC1C24;
    color: #fff;
    border-radius: 30px;
    transition: .5s;
}
.readMore{
    padding: 8px 15px;
    background: #FFF200;
    font-weight: bold;
    transition: .5s;
    color: #000;
    text-decoration: none;
    border-radius: 35px;
}

.readMore:hover {
    padding: 8px 15px;
    background: #fff;
    font-weight: bold;
    transition: .5s;
    color: #000;
    border-radius: 0;
    text-decoration: none;
}

.hero_btn_readmore {
    display: inline-flex;
    float: right;
}

.hero_desc {
    text-align: justify;
}

.title h2 {
    font-family: 'Bakbak One', cursive;
    font-size: 2.6rem;
    line-height: .9;
    color: #000;
}

.trust_bank_sky h1 {
    font-family: 'Bakbak One', cursive;
    font-size: 7.6rem;
    line-height: .9;
}

.trust_bank_sky h2 {
    font-family: 'Bakbak One', cursive;
    font-size: 4.6rem;
    line-height: .9;
}

.page_title h1 {
    font-family: 'Bakbak One', cursive;
    font-size: 3.6rem;
}


/*.hero_btn_readmore:hover {
  animation: shake 0.5s;
  animation-iteration-count: 1;
}

@keyframes shake {
  0% { transform: translate(0px, 5px); }
  100% { transform: translate(-0px, -5px); }
}*/


/*modal*/

.modal-backdrop {
    background-color: transparent !important;
}

.modal-body {
    background: #000;
}


/*social */

.social_icon_sec {
    padding: 30px 10px;
}

.social_title {
    padding: 15px;
}


/*slider*/

.carousel-control-prev,
.carousel-control-next {
    z-index: 0 !important;
}

.fa_padding {
    transition: .5s;
}

.fa_padding:hover {
    transform: rotate(360deg);
    transition: .5s;
}


/*modal anim*/

#slideBoxModal {
    animation: unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.modalIn {
    transition: 1s;
    animation: unfoldIn 1s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.modalOut {
    animation: unfoldOut 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.modalZoomIn {
    animation-duration: 1s;
    animation: zoomIn 1s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.rotation {
    animation-duration: 1s;
    animation: rotation;
    animation-iteration-count: 1;
}

@keyframes unfoldIn {
    0% {
        transform: scaleY(.005) scaleX(0);
        opacity: 1;
    }
    50% {
        transform: scaleY(.005) scaleX(1);
        opacity: .5;
    }
    100% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
    }
}

@keyframes unfoldOut {
    0% {
        transform: scaleY(1) scaleX(1);
    }
    50% {
        transform: scaleY(.005) scaleX(1);
    }
    100% {
        transform: scaleY(.005) scaleX(0);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}


/*slide box*/

.to_aminate_arrow {
    padding-right: 20px;
    transition: 1s;
}

.arrow_icon {
    transition: 1s;
}

.slide_box_6:hover .arrow_icon {
    padding-right: 25px;
    transition: 1s;
}


/*blog*/

.blog_list {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.20);
}

.blog_content {
    padding: 10px;
}

.blog_list:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}


label {
	display: block;
	margin-top: 10px !important;
	font-weight: 400;
}


label {
    color: #000;
}

::placeholder {
    color: #ccc !important;
    opacity: .5 !important;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ccc !important;
	 opacity: .5 !important;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #F5A11D !important;
	 opacity: .5 !important;
}



.get_in_touch h2 {
    color: #F5A11D;
}


/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}


/*slider*/

.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 2rem;
    padding: 20px;
    transition: .5s;
}

.carousel-control-next-icon:hover {
    height: 2rem;
    padding: 30px;
    transition: .5s;
}

.carousel-control-prev-icon:hover {
    height: 3rem;
    padding: 30px;
    transition: .5s;
}

.carousel-control-prev-icon {
    background-image: url('../images/icons/arrow_right.png') !important;
    transform: rotate(180deg);
}

.carousel-control-next-icon {
    background-image: url('../images/icons/arrow_right.png') !important;
}


/*faq*/

.card_padding_faq {
    padding: 30px;
}

.faqboxcol {
    margin-top: 15px;
}

.card_padding_faq {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.20);
    transition: .5s;
}

.card_padding_faq:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
    transition: .5s;
    background-color: #2E3091;
    color: #fff;
}
img{
transition: .5s;
}
.card_padding_faq >img {
    transition: .5s;
}
.card_padding_faq:hover .img-top {
    transition: .5s;
    transform: rotate(6deg) scale(1.1);
   
}


/*error modal*/

#err_text {
    color: #fff;
}

.modal-footer {
    padding: 0!important;
}


/*faq back btn*/

.faq_backbtn:hover {
    transition: .5s;
    background-color: #ddf !important;
    color: #000 !important;
    border-radius: 30px;
}

.arrow_left {
    transition: .5s;
}

.faq_backbtn:hover .arrow_left {
    margin-left: -10px;
    transition: .5s;
}

.card_padding_faq .card-body img {
    border-radius: 50%;
}