@charset "UTF-8";
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Regular.eot');
    src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Regular.woff') format('woff'),
        url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Semibold.eot');
    src: url('../fonts/SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Semibold.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Semibold.woff') format('woff'),
        url('../fonts/SourceSansPro-Semibold.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Semibold.svg#SourceSansPro-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Bold.eot');
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Bold.woff') format('woff'),
        url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
--globelfontsize:16px;
--globlefont:'Source Sans Pro';
--globlelineheight:1.5;

--black:#000000;
--white:#ffffff;
--whitelight:#F8F8F8;
--yellow:#F9B000;
--blue:#003770;
--greenyblue:#39B4AA;
--gray:#747474;
--lightbg:#F9FAFB;
--bs-warning:#F9B000;
--bs-secondary:#39B4AA;
--bs-danger:#E65C3C;
--bs-primary:#003770;
--fontweight400:400;
--fontweight600:600;
--fontweightbold:bold;
}

body{
    font-family: var(--globlefont);
    font-size: var(--globelfontsize);
    color: var(--black);
}

h1{
    font-weight: var(--fontweightbold);
    font-size: 40px;
    text-transform: uppercase;
}
h2{
    font-weight: var(--fontweightbold);
    font-size: 34px;
    text-transform: uppercase;
}
a{
    color: var(--blue);
}
.btn-primary {
    background-color: var(--yellow);
    border-radius: 10px;
    font-size: 18px;
    padding: 14px 20px;
    color: var(--black);
    border-color: var(--yellow);
    min-width: 162px;
    text-align: center;
}

.btn-primary:hover, .btn-primary:focus,.btn-primary:active, .btn:first-child:active  {
    background-color: var(--white);
    color: var(--yellow);
    border-color: var(--yellow);
    box-shadow: none;
}
.btn-primary-white {
    background-color: var(--white);
    border-radius: 10px;
    font-size: 18px;
    padding: 14px 20px;
    color: var(--black);
    border-color: var(--white);
    min-width: 162px;
    text-align: center;
}
.btn-primary-white:hover, .btn-primary-white:focus, .btn-primary-white:active {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}
.btn-blue {
    background-color: var(--blue);
    border-radius: 10px;
    font-size: 18px;
    padding: 14px 20px;
    color: var(--white);
    border-color: var(--blue);
     min-width: 162px;
    text-align: center;
}

.btn-blue:hover, .btn-blue:focus, .btn-blue:active {
    background-color: var(--white);
    color: var(--blue);
    border-color: var(--blue);
}

.form-control{
    border-color:#707070;
    min-height: 56px;
    border-radius: 10px;
    padding: 5px 20px;
    font-size: 18px;
}
.form-control:focus{
    box-shadow: none;
    border-color: var(--blue);
}
.bg-blue { background-color: var(--blue); color: var(--white); }
.text-primary { color: var(--blue) !important }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
header { border-bottom: 1px solid #CCCCCC; }



.main-banner{
    background-color:var(--blue);
    color: var(--white);
}
.main-banner h1{
    font-size: 50px;
}
.main-banner-cont {
    max-width: 670px;
    margin-left: auto;
    padding: 100px 30px 100px 20px;
    font-size: 18px;
}
.banner-btn{
    padding: 15px 0;
}
.banner-btn .btn{
    margin-right: 15px;
}
.main-banner-cont-inner{
    max-width: 460px;
}
.main-banner-right{
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.secure-list{
    padding:15px 0 0 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    gap: 10px;
}
.secure-list li{
    width: 33.33%;
    display: flex;
    font-size: 12px;
}
.b-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(249,176, 0, 0.20);
    color: var(--yellow);
    border-radius: 50%;
}

.secure-list li h5{
    font-size: 16px;
    font-weight: var(--fontweight400);
    margin-bottom: 4px;
}
.secure-list-cont{
    padding-left: 10px;
}

.navbar-nav .nav-item{
    padding: 0 10px;
    font-size: 18px;
}
.navbar-nav .nav-item a{
    color: var(--black);
}
.navbar-nav .nav-item a:hover{
    color: var(--yellow);
}



.header-right .btn{
    min-width: 100px;
    font-size: 18px;
    padding: 6px 20px;
    line-height: normal;
    border:1px solid var(--blue);
    color: var(--blue);
    border-radius: 0;
}
.header-right .login-btn {
    background-color: var(--white);
}
.header-right .sign-btn {
    background-color: var(--blue);
    color: var(--white);
    margin-left: 16px;
}
.header-right .btn:hover{
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}


.payment-management {
    padding: 60px 0;
}


.feature-card {
      border: 1px solid #d6d6d6;
      padding: 40px;
      border-radius: 5px;
          min-height: 100%;
}
.feature-card h5{
    font-size: 20px;
    font-weight: var(--fontweightbold);
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 15px;
    padding-top: 5px;
}
.feature-icon {
      width: 72px;
      height: 72px;
      background-color: var(--blue);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      font-size: 30px;
      color: var(--white);
}


.get-started-sec {
    background-color: var(--yellow);
    padding: 60px 0 50px 0;
    font-size: 26px;
}
.get-started-sec h2{
    padding-bottom: 10px;
}
.get-started-sec .btn-two{
    padding-top: 10px;
}
.btn-two .btn{
    margin: 5px 7px;
    min-width: 185px;
}
.btn-two .btn-primary-white:hover{
    background-color: var(--white);
    color: var(--blue);
    border-color: var(--blue);
}
.benefits-sec{
    padding: 90px 0;
}
.benefits-card {
      box-shadow: 0 3px 6px rgba(0,0, 0, 0.16);
      padding: 40px 20px;
      border-radius: 5px;
      min-height: 100%;
      text-align: center;
}
.benefits-card h5{
    font-size: 20px;
    font-weight: var(--fontweightbold);
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 15px;
    padding-top: 20px;
}


.faqs-sec{
    padding-bottom: 70px;
}
.faq-info .accordion-item{
    border: none;
    border-bottom: 1px solid rgba(0,0, 0, 0.16);
}
.faq-info .accordion-button:not(.collapsed){
    background-color: var(--white);
    color: var(--blue);
    box-shadow: none;
}
.faq-info .accordion-button {
    padding: 20px 0;
    border: none;
    font-weight: var(--fontweightbold);
    font-size: 18px;
    color: var(--black);
    text-transform: uppercase;
}
.faq-info .accordion-body {
    padding: 0 0 20px 0;
}
.faq-info .accordion-button:focus {
    box-shadow: none;
}
.faq-info .accordion-button::after{
    content: "\2b";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    background-image: none;
}
.faq-info .accordion-button:not(.collapsed)::after {
    content: "\f068";
    background-image: none;
}
.footer-top {
    background-color: var(--blue);
    padding: 40px 0;
    color: var(--white);
}
ul.social-icon {
    padding:10px 0 0 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    gap: 10px;
}
ul.social-icon li a{
    background-color: var(--yellow);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content:center;
    align-items: center;
    color: var(--black);
    text-decoration: none;
}
ul.social-icon li a:hover{
    background-color: var(--white);
    color: var(--black);
}
.footer-nav li {
    padding-bottom: 12px;
}
.footer-nav li a{
    color: var(--white);
    text-decoration: none;
}
.footer-nav li a:hover{
    color: var(--yellow);
}
.footer-nav h4{
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: var(--fontweightbold);
}
.footer-logo-cont img{
    margin-bottom: 20px;
}
.footer-bottom {
    padding: 8px 0;
}
.find-invoice{
    padding-top: 70px;
    padding-bottom: 20px;
}
.find-invoice-info {
    background: var(--greenyblue);
    border-radius: 5px;
    text-align: center;
    padding:45px 100px 30px 100px;
    color: var(--white);
}
.find-invoice-info form{
    padding-top: 10px;
}
.find-invoice-info .form-control {
    min-height: 56px;
    border: none;
    font-size: 18px;
    padding: 10px 25px;
}
.find-invoice-info .btn {
    min-width: 226px;
}
.font18{
    font-size: 18px;
}
.invoice-info-text {
    padding-top: 10px;
    padding-bottom: 20px;
}
ul.invoice-secure-point {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
}
ul.invoice-secure-point i{
    padding-right: 5px;
}


/***********inner-banner-cont*************/

.inner-banner{
    padding: 70px 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.inner-banner-cont {
    background-color: rgba(255,255,255,0.9);
    padding: 50px;
    max-width: 490px;
    margin-left: auto;
    font-size: 20px;
    border-radius: 5px;
}
.inner-banner-cont h1{
    padding-bottom: 10px;
}
.inner-banner-cont p:last-child{
    margin-bottom: 0;
}
.enter-your-details{
    max-width: 950px;
    margin: 0 auto;
    padding: 65px 0 45px 0;
}
.your-details-heading{
    text-align: center;
}

.enter-your-details .btn{
    min-width: 226px;
}

.or {
    font-size: 20px;
   font-weight: var(--fontweightbold);
    line-height: 56px;
}

.invoice-list h4{
    font-size: 18px;
    font-weight: var(--fontweightbold);
    text-transform: uppercase;
}

.invoice-list-row {
    background-color: var(--lightbg);
    border:1px solid #CCCCCC;
    border-radius: 10px;
    padding:10px 20px;
    margin-bottom: 20px;
}
.invoice-list-cont {
    padding: 8px 0;
}
.invoice-list-cont .invoice-info{
    font-size: 18px;
    font-weight: var(--fontweightbold);
}
.invoice-pay-btn{
    text-align: center;
    padding: 10px 0;
}
.invoice-pay-btn .btn{
    min-width: 126px;
    min-height: 46px;
    padding: 8px 20px;
}

.badge{
    font-size: 14px;
    font-weight: var(--fontweight400);
    border-radius: 20px;
}
.s-bg-warning {
    background-color: var(--bs-warning);
    color: var(--black);
}
.s-bg-success {
    background-color: #28a745;
    color: var(--white);
}
.s-bg-secondary {
    background-color: var(--bs-secondary);
}
.s-bg-danger {
    background-color: var(--bs-danger);
}
.s-bg-primary {
    background-color: var(--bs-primary);
}

.note-block{
    background-color: var(--bs-danger);
    color: var(--white);
    padding: 25px 30px;
    border-radius: 10px;
    font-size: 14px;
    margin-top: 20px;
    display: inline-block;
    width: 100%;
}
.note-block h5{
    font-size: 16px;
    font-weight: var(--fontweightbold);
}
.note-block ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.note-block ul li{
    padding-bottom: 5px;
}
.note-block ul li:last-child{
    padding-bottom: 0;
}



.invoice-filter {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    
}
.invoice-list-head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 10px;
    align-items: flex-end;
}
.invoice-list-head h4{
    margin: 0;
    padding-right: 20px;
}
.form-select {
    border-color: #CCCCCC;
    font-size: 14px;
}
.form-select:focus {
    border-color: #CCCCCC;
    box-shadow: none;
}

.payment-status {
    width: 162px;
}
.invoice-type {
    width: 122px;
}

.invoice-view-btn {
    background-color: var(--blue);
    color: var(--white);
    border-radius: 5px;
    padding: 8px 8px;
    font-size: 12px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    display: inline-block;
}
.invoice-view-btn:hover {
    background-color: var(--yellow);
    color: var(--black);
}


.login-signup-image{
    background-image:url(../images/login-signup.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.login-block {
    padding: 130px;
    max-width: 700px;
}
.account-info {
    text-align: center;
    padding-top: 20px;
}
.remember-forgot{
    justify-content: space-between;
    padding-bottom: 20px;
}

.card-summary{
    background-color: #fff;
    border: 1px solid #E2E2E2;
    padding: 30px 30px 15px 30px;
    box-shadow: 0 3px 6px rgba(0,0, 0, 0.10);
    margin-bottom: 30px;
}
.card-summary h3{
    font-size: 22px;
    font-weight: var(--fontweightbold);
    padding-bottom: 15px;
}
.inv-summary {
    padding-bottom: 20px;
}

.inv-summary-text {
    font-weight: var(--fontweightbold);
    font-size: 20px;
}

.status-color .inv-summary-text{
    color: var(--bs-secondary);
}

.card-amount-s{
    color: var(--white);
    padding: 30px;
    background-color: var(--bs-secondary);
    border: none;
}

.card-amount-s h3{
    font-size: 22px;
    font-weight: var(--fontweightbold);
    padding-bottom: 15px;
}
.amount-info{
    font-weight: var(--fontweightbold);
    font-size: 20px;
}
.total-amount{
    padding: 15px 0;
     border-top: 1px solid #FFFFFF;
     margin: 0;
}
.total-amount-info{
    font-size: 20px;
    font-weight: var(--fontweightbold);
}
.tpl{
    padding-left: 0;
}

.my-payments h4{
    font-size: 34px;
    font-weight: var(--fontweightbold);
    text-transform: uppercase;
    padding-bottom: 10px;
}

.payments-col-1{
    width: 20%;
}
.payments-col-2{
    width: 18%;
}
.payments-col-3{
    width: 15%;
}
.payments-col-4{
    width: 17%;
}
.payments-col-5{
    width: 12%;
}
.payments-col-6{
    width: 18%;
}

.payments-list-row {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.payments-list-cont{
    padding: 8px 0;
}

.payments-list-cont .payments-info {
    font-size: 18px;
    font-weight: var(--fontweightbold);
}

.account-nav{
    padding-bottom: 20px;
}

.my-account h3{
    font-size: 28px;
    font-weight: var(--fontweightbold);
    text-transform: uppercase;
    padding-bottom: 20px;
}
.my-account h4{
    font-size: 24px;
    font-weight: var(--fontweightbold);
    text-transform: uppercase;
    margin-bottom: 3px;
}
.account-nav .nav-pills .nav-link{
    color: var(--black);
    padding: 10px 20px;
}
.account-nav .nav-pills .nav-link i{
    min-width: 32px;
}
.account-nav .nav-pills .nav-link.active, .account-nav .nav-pills .show>.nav-link {
    color: var(--black);
    background-color: var(--yellow);
}


.my-account .form-control{
    min-height: 48px;
    border-color: #e1e7f0;
}

.personal-details {
    box-shadow: 0 2px 5px rgba(0,0, 0, 0.10);
    border: 1px solid #e1e7f0;
    padding: 25px;
    border-radius: 10px;
}

.personal-details h5{
    font-weight: bold;
    text-transform: uppercase;
}
.personal-details h5 i{
    color: var(--yellow);
}
.light-background{
    background-color: #f8fafc;
}

hr{
    border-color: #afafaf;
}
.card-no{
    font-weight: bold;
    font-size: 18px;
}

.card-icon {
    background-color: hsl(217deg 91% 60% / 10%);
    border-radius: 10px;
    padding: 17px 15px;
    font-size: 22px;
}
.trash-icon {
    border: 1px solid var(--bs-danger);
    padding:5px;
    border-radius: 5px;
    color: var(--bs-danger);
}
.trash-icon:hover {
    background-color: var(--bs-danger);
    color: var(--white);
}

.add-card {
    border-color: var(--blue);
    color: var(--blue);
    width: 100%;
    padding: 10px 20px;
}

.add-card:hover, .add-card:focus, .add-card.btn:first-child:active{
    color: var(--white);
    background-color: var(--blue);
    border-color: var(--blue);
}

.h-profile-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-right: 10px;
}

.header-right .dropdown-toggle {
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/**********8-12-25***********/
.get-touch{
    padding-top: 50px;
}
.get-touch textarea.form-control {
    height: 130px;
    color: #000;
}
.contact-info-block{
    padding-top: 50px;
}
.contact-info-block ul{
    list-style-type: none;
    padding:30px 0 0 0;
    margin: 0;
}
.contact-info-block ul li{
    padding-bottom: 30px;
    display: flex;
    font-size: 20px;
}
.contact-info-block ul li .c-icon{
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yellow);
    color: var(--black);
    border-radius: 10px;
    font-size: 20px;
}
.contact-info-block .c-info-text{
    padding-left: 20px;
}
.contact-info-block .c-info-text a{
    color: var(--black);
    text-decoration: none;
}
.contact-info-block .c-info-text a:hover{
    color: var(--blue);
}

.static-page {
    padding-top: 50px;
}




/* ===== BASKET / SHOPPING CART ===== */
.basket-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 18px;
    color: var(--blue);
    font-size: 22px;
    text-decoration: none;
}
.basket-icon-link:hover { color: var(--yellow); }

.basket-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--yellow);
    color: var(--black);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: var(--fontweightbold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-add-basket {
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    border-radius: 10px;
    font-size: 14px;
    padding: 8px 12px;
    min-width: auto;
    white-space: nowrap;
    border:none;
        margin-right: 10px;
    margin-bottom: 5px;
}
.btn-add-basket:hover, .btn-add-basket:focus, .btn-add-basket.btn:first-child:active {
    background-color: var(--yellow);
    color: var(--black);
    border-color: var(--blue);
}
.btn-add-basket.added {
    background-color: var(--greenyblue);
    border-color: var(--greenyblue);
    color: var(--white);
}

.basket-page { padding: 50px 0; }

.basket-summary-card {
    background-color: var(--white);
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    overflow: hidden;
}
.basket-summary-header {
    background-color: var(--blue);
    color: var(--white);
    padding: 18px 25px;
}
.basket-summary-header h4 { margin: 0; font-size: 20px; }

.basket-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 25px;
    border-bottom: 1px solid #EEEEEE;
    gap: 10px;
}
.basket-item-row:last-child { border-bottom: none; }
.basket-item-invoice { font-weight: var(--fontweightbold); font-size: 16px; }
.basket-item-amount { font-weight: var(--fontweightbold); font-size: 16px; color: var(--blue); white-space: nowrap; }

.basket-remove-btn {
    background: none;
    border: 1px solid var(--bs-danger);
    color: var(--bs-danger);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.basket-remove-btn:hover { background-color: var(--bs-danger); color: var(--white); }

.basket-total-row {
    background-color: var(--greenyblue);
    color: var(--white);
    padding: 16px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: var(--fontweightbold);
}

.basket-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray);
}
    .basket-empty-state .empty-basket { font-size: 60px; color: #CCCCCC; margin-bottom: 20px; }

.checkout-invoice-list {
    background-color: var(--lightbg);
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.checkout-invoice-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #EEEEEE;
    font-size: 16px;
}
.checkout-invoice-row:last-child { border-bottom: none; }
.checkout-total-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    background-color: var(--blue);
    color: var(--white);
    font-weight: var(--fontweightbold);
    font-size: 18px;
    border-radius: 0 0 10px 10px;
}