:root{
    --primary-background-color: #020230;
    --primary-color : #ffffff;
    --custom-link-hover-color: #ff2525;
    --light-gray: #767676;
    --primary-body-bg : #f8f8f8;
    --primary-body-color: #0c0c0c;
    --light-text-color: rgb(255, 255, 255);

    --primary-text-color: #ffffff;
    --secondary-bg-color: #5f0172;
    --secondary-text-color: #ffffff;
    --dark-bg-color: rgb(56, 56, 56);
    --dark-text-color: rgb(56, 56, 56);
    --light-bg-color: rgb(255, 255, 255);
    --light-text-color: rgb(255, 255, 255);
    --darkblue: rgb(2, 2, 138);
    --midnightblue: rgb(25, 25, 109);
    --deepperinkle : #735DA5;
    --tearl : rgb(2, 122, 122);
   --deepnavy: #002C54;
   --skyblue: #90AFC5;
   --lightgray: #F1F1F2;
   --lightdarkgray: #d8d8d8;
   --lightdarkergray: #000000;
   --lilac: #D3C5E5;
   --yellow: #f4d03f;
   --primary-hover-color: #f3f3f3;
   --secondary-hover-color: #acacac;
   --primary-border-color: #d1d1d1;
   --accent-color: #C58A4A;
   --accent-hover-color: #a96f36;
    --white: #fff;
}

:root {
    --xsmall-font-size: 10px;
    --small-font-size: 13px;
    --medium-font-size: 14px;
    --xmedium-font-size: 15px;
    --xxmedium-font-size: 16px;
    --large-font-size: 18px;
    --xlarge-font-size: 20px;
    --xxlarge-font-size: 22px;
    --xxxlarge-font-size: 24px;
}

:root{
    --line-height-base: 1.6;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-summer-bold: 700;
}

:root{
    --primary-font: "Merriweather Sans", sans-serif;
    --secondary-font : "Roboto", sans-serif;
    --tertiary-font: "Open Sans", sans-serif;
}


*{
    box-sizing: border-box;
    box-shadow: none;
}


body{
    margin: 0;
    padding: 0;
    font-family: var(--secondary-font);
    color: var(--primary-body-color);
    background-color: var(--primary-body-bg );
}


#app{
 display: flex;
 flex-direction: column;
 height: 100vh;
}

#main
{
    flex-grow: 1;
}


a{
    text-decoration: none;
    color: inherit;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
   
}

a.btn{
    padding: 5px 10px !important;
}


ul, ol{
    list-style: none;
    margin: 0;
    padding: 0;
}

.btn,
.btn:focus,
.form-control,
.form-control:focus{
    outline: none;
    box-shadow: none;
}

.btn,
.btn:focus{
    border: none;
    font-weight: normal;
}

button.btn{
    /*min-width: 48px;*/
    /*min-height: 48px;*/
    /* line-height: 48px; */
    box-sizing: border-box;
    text-align: center;
    border-radius: 2px;
}

.animation .ani-item{
    position: absolute;
    width: 60px;
    height: 60px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    transform: rotate(45deg);
    mix-blend-mode: multiply;
    background-color: var(--light-text-color);
}

.animation .ani-item:nth-last-child(1)
{
    right: 50px;
    bottom: 20px;
    animation: animate_background 16s linear infinite;
    -webkit-animation: animate_background 16s linear infinite;
}

.animation .ani-item:nth-last-child(2)
{
    right: 25%;
    bottom: 50%;
    animation: animate_background 12s linear infinite;
    -webkit-animation: animate_background 12s linear infinite;
}

.animation .ani-item:nth-last-child(3)
{
    right: 50px;
    top: 180px;
    animation: animate_background 18s linear infinite;
    -webkit-animation: animate_background 18s linear infinite;
}

.animation .ani-item:nth-child(1)
{
    left: 50%;
    top: 50%;
    animation: animate_background 12s linear infinite;
    -webkit-animation: animate_background 12s linear infinite;
}

.animation .ani-item:nth-child(2)
{
    left: 20px;
    top: 180px;
    animation: animate_background 13s linear infinite;
    -webkit-animation: animate_background 13s linear infinite;
}

.animation .ani-item:nth-child(3)
{
    left: 15%;
    bottom: 50%;
    animation: animate_background 16s linear infinite;
    -webkit-animation: animate_background 16s linear infinite;
}

.animation .ani-item:nth-child(4)
{
    left: 20px;
    bottom: 20px;
    animation: animate_background 12s linear infinite;
    -webkit-animation: animate_background 12s linear infinite;
}


.loading-icon{
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
}

.form-control::placeholder{
    text-transform: capitalize;
    color: #bdbdbd !important;
}

.form-control,
.form-check-input,
.form-select{
    box-shadow: none;
    border: 1px solid #626262;
}
.form-control:focus,
.form-check-input:focus,
.form-select:focus{
    box-shadow: none;
    border: 1px solid #626262;
}

.btn,
.btn:focus{
    box-shadow: none;
    text-transform: capitalize;
    border: none;
}

.loading-text,
.loading-icon{
    display: none;
}


.loading-text::after {
    content: '';
    animation: loading_text_dots 1.5s steps(3, end) infinite;
}


.col-form-label,
.form-check-label,
.form-label{
    font-size: 14px;
    font-weight: normal;
    font-family: "Public Sans", sans-serif;
    margin-bottom: 2px !important;
}

.form-label{
    text-transform: capitalize;
}

.col-form-label::first-letter,
.form-check-label::first-letter
{
    text-transform: capitalize;
}

.col-form-label.astar::after,
.form-check-label.astar::after,
.form-label.astar::after
{
    content: '\2a';
    font-weight: 900;
    color: red;
    font-size: 14px;
    margin-left: 5px;
}

/*.form-check-input{*/
/*    float: none !important;*/
/*    margin-right: 0 !important;*/
/*}*/


.create-btn{
    background-color: var(--deepnavy) !important;
    color: var(--primary-text-color) !important;
    font-size: var(--medium-font-size) !important;
    padding: 6px 25px;
    transition: all 0.3s ease;
    display: block;
    margin: auto;
}

.create-btn:hover{
    background-color: var(--midnightblue) !important;
    color: var(--primary-text-color) !important;
}


.alert-container{
    overflow: hidden;
}

.alert-container .alert{
    position: fixed;
    top: 25px;
    right: 10px;
    width: 300px;
    z-index: 2000;
    min-height: max-content;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0px 4px 4px 0px rgba(0 , 0 , 0 ,0.2);
    transition: 0.2s ease;
    display: none;
}

.alert-container .alert.show{
    display: block;
    animation: fromLeft 1s forwards;
    -webkit-animation: fromLeft 1s forwards;
}

.alert-container .alert .btn.close.alert-btn{
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 0px;
}

.alert-container .alert .inner-content{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.alert-container .alert .inner-content .fa-solid{
    margin-right: 10px;
    font-size: 22px;
}

.alert-container .alert .inner-content .right-content{
    width: 100%;
}

.alert-container .alert.alert-success{
    border-left: 7px solid green;
}


.alert-container .alert.alert-danger{
    border-left: 7px solid rgb(179, 59, 59);
}


.alert-container .alert.alert-warning{
    border-left: 7px solid rgb(179, 151, 59);
}



.alert-container .alert .inner-content .title{
    text-transform: capitalize;
    text-align: left;
    font-weight: 700;
    font-family: var(--primary-font);
    margin-bottom: 2px;
    font-size: 14px;
    margin-left: 10px;
}

.alert-container .alert .inner-content .text{
    font-weight: normal;
    font-family: var(--primary-font);
    margin-bottom: 2px;
    font-size: 13px;
    margin-left: 10px;
}

.alert-container .alert .inner-content .text::first-letter{
    text-transform: capitalize;
}

.is-invalid{
 border: 1px solid #cd5959 !important;
}


.spinner{
    animation: spinBtn 2s infinite;
    -webkit-animation: spinBtn 2s infinite;
    margin-right: 5px;
    display: none;
}

.btn .loading-text{
    text-transform: capitalize;
    font-weight: normal;
    font-size: 13px;
    display: none;
}

.iti{
    width: 100%;
}



.iti{
    display: block;
}


.chosen-container,
.chosen-container-single .chosen-single,
.chosen-container-single .chosen-drop,
.chosen-container-single .chosen-single span
{
    background-color: var(--light-bg-color) !important;
    background: var(--light-bg-color) !important;
    color: var(--light-gray) !important;
    font-weight: normal;
}


.chosen-container-single .chosen-single{
    height: 35px !important;
    border-radius: 0;
    padding: .375rem .75rem;
}

.chosen-container-single .chosen-single span{
    line-height: 35px;
    text-align: left !important;
}

.chosen-container-single .chosen-single::first-letter,
.chosen-container-single .chosen-single span::first-letter{
    text-transform: capitalize !important;
}

.chosen-container-single .chosen-single div b{
    margin-top: 6px;
    background-color: transparent !important;
}

.chosen-container .chosen-results li.active-result{
    color: var(--lightdarkergray) !important;
}

.chosen-container-active{
    border: 1px solid var(--primary-border-color) !important;
}


input[readonly]{
    background-color: rgba(229, 229, 229, 0.76);
}


.dismiss-btn.btn{
    background-color: #ae2727;
    color: #ffffff;
    padding: 6px 25px;
    transition: all 2s ease;
}


.dismiss-btn.btn:hover{
    background-color: #ae2727;
    color: #ffffff;
    opacity: 0.6;
}


#content-list .form-element-wrapper{
    margin: 1.5rem 0;
}


#content-list .form-element-wrapper .card,
#content-list .form-element-wrapper .card .card-header,
#content-list .form-element-wrapper .card .card-body,
#content-list .form-element-wrapper .card .card-footer{
    background-color: var( --light-bg-color);
    border: none;
    border-radius: 0;
}


#content-list .form-element-wrapper .card{
    padding: 20px 15px;
    margin-bottom: 12px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#content-list .form-element-wrapper .card .card-header{
    border-bottom: 1px solid var(--lightgray);
    padding: 8px;
}


#content-list .form-element-wrapper .card .card-header .title{
   font-size: var(--xmedium-font-size);
    font-weight: var(--font-weight-bold);
}

#content-list .form-element-wrapper .card .card-header .title::first-letter{
    text-transform: capitalize;
}


#content-list .form-element-wrapper .card .card-footer .btn{
    display: block;
    margin: auto;
}


form .form-control,
form .form-select,
form .input-group-text{
    border: 1px solid var(--lightdarkgray);
    border-radius: 4px;
   font-size: 14px;
    color: var(--light-gray);
}

form .form-label{
    color: var(--light-gray);
    font-size: var(--small-font-size);
}

.form-control::placeholder{
    color: var( --lightdarkgray);
}

\form .input-group .form-control{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

form.input-group-text{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: transparent;
    position: relative;
}

form.input-group.left-position .input-group-text{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

form.input-group.left-position .form-control{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none;
    padding-left: 10px;
    padding-right: 10px;
}


form.input-group.right-position .input-group-text{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}

form.input-group.right-position .form-control{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none;
    padding-left: 10px;
    padding-right: 10px;
}

/*form.input-group-text::after{*/
/*    content: '/';*/
/*    position: absolute;*/
/*    right: 0;*/
/*    margin-right: 3px;*/
/*    color: var(--lightdarkgray);*/
/*}*/

form .card.seo-card .title{
    color: var(--darkblue);
    font-weight: bold;
    font-size: var(--medium-font-size);
    text-transform: capitalize;
    margin-bottom: 1px;
}

form .card.seo-card .seo-content .temp-text,
form .card.seo-card .seo-content .seo-title,
form .card.seo-card .seo-content .seo-link,
form .card.seo-card .seo-content .seo-description{
    color: var(--dark-text-color);
    font-size: var(--small-font-size);
    margin-bottom: 1px;
}

form .card.seo-card .seo-content .seo-link{
    color: var(--tearl);
}


form .form-control:focus,
form .form-select:focus,
form .form-check-input:focus{
    outline: none;
    box-shadow: none;
}


#content-list .form-element-wrapper .card .client-flex-box{
    display: flex;
    flex-direction: row;
    align-items: center;
}


#content-list .form-element-wrapper .card .client-flex-box .chosen-container-single .chosen-single{
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

#content-list .form-element-wrapper .card .client-flex-box .btn{
    min-width: 110px;
    border: 1px solid rgb(218, 218, 218);
    background-color: var(--deepnavy);
    color: var(--white);
    text-transform: capitalize;
    font-size: var(--small-font-size);
    transition: all 0.5s ease;
    padding: 8px;
}

#content-list .form-element-wrapper .card .client-flex-box .btn:hover{
    color: var(--lilac);
}
/*for new image and video upload*/

.fl-wrapper .upload-wrapper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.fl-wrapper .thumbnail-wrapper{
    width: 150px;
    height: 60px;
    border: 2px solid var(--lightdarkgray);
    overflow: hidden;
    margin: 5px 10px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fl-wrapper .thumbnail-wrapper .form-control{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.fl-wrapper .thumbnail-wrapper .icon{
    color: var(--lightdarkgray);
}

.fl-wrapper .thumbnail-wrapper .text{
    margin-bottom: 1px;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: normal;
    font-family: "Public Sans", sans-serif;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content .element{
    width: 80px;
    height: 80px;
    border-radius: 0;
    position: relative;
    border: 1px solid #acacac;
    margin: 10px;
    overflow: hidden;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content .element .form-control{
    position: absolute;
    display: none;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content .element .rm-button{
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgb(255, 55, 55);
    color: #ffffff;
    padding: 5px;
    height: 20px;
    font-size: 13px;
    line-height: 10px;
    text-align: center;
    z-index: 1;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content .element .text{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.31);
    font-size: 13px;
    font-weight: normal;
    font-family: Raleway, "sans-serif";
    padding: 3px;
    text-align: center;
    margin-bottom: 0;
    color: #ffffff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    z-index: 1;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content{
    display: none;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content.active{
    display: flex;
}

.fl-wrapper .thumbnail-element .thumbnail-preview-content .element .img-fluid{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.fl-wrapper .thumbnail-element .error-text{
    font-size: 13px;
    color: red;
    font-family: "Public Sans", sans-serif;
    display: none;
}

.fl-wrapper .thumbnail-element .error-text.image-error,
.fl-wrapper .thumbnail-element .error-text.video-error{
    display: block;
}



@keyframes spinBtn{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}



@keyframes loading_text_dots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}
.app-main #content-list .list-nav{
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.app-main #content-list .app-content-header h3,
.app-main #content-list .list-nav .title{
    text-transform: capitalize;
    font-size: var(--xlarge-font-size);
    font-weight: bold;
    margin-bottom: 0;
}

.app-main #content-list .list-nav .breadcrumb{
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-main #content-list  .breadcrumb .breadcrumb-item,
.app-main #content-list  .breadcrumb .breadcrumb-item .link,
.app-main #content-list .list-nav .breadcrumb .breadcrumb-item .link{
    text-transform: capitalize;
    font-weight: normal;
    padding: 2px 6px;
    font-size: var(--xmedium-font-size);
    color : inherit;
    transition: all 0.5s ease;
}



.app-main #content-list  .breadcrumb .breadcrumb-item+.breadcrumb-item:before,
.app-main #content-list .list-nav .breadcrumb .breadcrumb-item+.breadcrumb-item:before{
    padding: 0px;
    color: black;
    content: "/\00a0";
}

.app-main #content-list .breadcrumb .breadcrumb-item:hover .link{
    text-decoration: underline;
}

.app-main #content-list .list-header-wrapper{
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.app-main #content-list .list-header-wrapper .create-button{
    font-size: var(--medium-font-size);
    background-color: var(--deepnavy);
    color: var(--primary-text-color);
    border-radius: 0;
}

.app-main #content-list .list-header-wrapper .create-button .icon{
    margin-right: 6px;
}

.app-main #content-list .list-header-wrapper .right-content .btn{
    background-color: var(--lightdarkgray);
    font-size: var(--medium-font-size);
    border-radius: 0;
}

.app-main #content-list .table-responsive{
    background-color: var(--light-bg-color);
}

.app-main #content-list .table-responsive .table thead th{
    font-size: var(--xmedium-font-size);
    text-transform: capitalize;
    font-weight: bold;
    background-color: var(--lightdarkgray);
}

/**********/
.app-main #content-list .table-responsive .table{
    vertical-align: middle;
}


.app-main #content-list .table-responsive .table, tbody, td, tfoot, th, thead, tr{
    border-color: var(--lightgray);
}



.app-main #content-list .table-responsive .table thead th{
    font-size: 12px;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    /*background-color: rgb(4, 4, 84);*/
    /*color: #ffffff;*/
    padding: 5px;
    text-align: left;
}

.app-main #content-list .table-responsive .table tbody td{
    font-size: 13px;
    text-transform: capitalize;
    font-weight: normal;
    padding: 5px;
    text-align: left;
}


.app-main #content-list .table-responsive .table tbody td .body-link{
    text-decoration: none;
    color: rgb(13, 13, 143);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

body.dark-mode .app-main #content-list .table-responsive .table tbody td .body-link
{
    color: rgb(108, 108, 154);
}


.app-main #content-list .table-responsive .table tbody td .body-link:hover{
    text-decoration: underline;
}

.app-main #content-list .table-responsive .table tbody td .body-link.edit{
    background-color: var(--yellow);
    color: #ffffff;
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 5px;
    border: none;
    margin-left: 4px;
}

.app-main #content-list .table-responsive .table tbody td .body-link.view{
    background-color: rgb(116, 72, 170);
    color: #ffffff;
    padding: 3px 5px;
    border-radius: 5px;
    border: none;
    margin-left: 4px;
}

.app-main #content-list .table-responsive .table tbody td .body-link.delete{
    background-color: rgb(205, 59, 59);
    color: #ffffff;
    padding: 3px 5px;
    border-radius: 5px;
    border: none;
    margin-left: 4px;
}


.app-main #content-list .table-responsive .table tbody td .body-link:hover{
    opacity: 0.8;
}



/*.app-main #content-list .table-responsive .table tbody td .status.status-active{*/
/*    background-color: green;*/
/*    color: #ffffff;*/
/*}*/


/*.app-main #content-list .table-responsive .table tbody td .status.status-draft{*/
/*    background-color: rgba(255, 200, 0, 0.901);*/
/*    color: #000000;*/
/*}*/

/*.app-main #content-list .table-responsive .table tbody td .status.status-pending{*/
/*    background-color: rgba(21, 0, 255, 0.901);*/
/*    color: #ffffff;*/
/*}*/

/*.app-main #content-list .table-responsive .table tbody td .status.status-cancelled{*/
/*    background-color: rgba(255, 0, 0, 0.901);*/
/*    color: #ffffff;*/
/*}*/


/*.app-main #content-list .table-responsive .table tbody td .status.status-inactive{*/
/*    background-color: rgba(205, 42, 42, 0.9);*/
/*    color: #ffffff;*/
/*}*/


/*.app-main #content-list .table-responsive .table tbody td .status{*/
/*    padding: 5px 10px;*/
/*    border-radius: 5px;*/
/*    font-size: 12px;*/
/*    text-transform: capitalize;*/
/*    font-weight: normal;*/
/*    min-width: 120px;*/
/*}*/


.app-main #content-list .table-responsive .table tbody td .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    min-width: max-content;
}

.status.status-pending {
    background-color: rgba(21, 0, 255, 0.901);
    color: #ffffff;
}
.status.status-pending::before {
    content: "\f017";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status.status-processing {
    background-color: rgba(0, 123, 255, 0.85);
    color: #fff;
}
.status.status-processing::before {
    content: "\f110";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    animation: spin 1s linear infinite;
}

.status.status-paid,
.status.status-approved{
    background-color: green;
    color: #ffffff;
}
.status.status-paid::before,
.status.status-approved::before{
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status.status-partially_paid {
    background-color: #f59e0b;
    color: #000;
}
.status.status-partially_paid::before {
    content: "\f56e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status.status-failed {
    background-color: #dc2626;
    color: #fff;
}
.status.status-failed::before {
    content: "\f057";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


.status.status-overdue {
    background-color: #ef4444;
    color: #fff;
}
.status.status-overdue::before {
    content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


.status.status-rejected,
.status.status-cancelled {
    background-color: rgba(255, 0, 0, 0.901);
    color: #ffffff;
}


.status.status-rejected::before,
.status.status-cancelled::before {
    content: "\f05e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


.status.status-under_review {
    background-color: #3b82f6;
    color: #fff;
}
.status.status-under_review::before {
    content: "\f002"; /* search */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status.status-defaulted {
    background-color: #7f1d1d;
    color: #fff;
}
.status.status-defaulted::before {
    content: "\f00d"; /* x */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status.status-disbursed {
    background-color: #0ea5e9;
    color: #fff;
}
.status.status-disbursed::before {
    content: "\f0d6"; /* money bill */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status.status-refunded {
    background-color: #6b7280;
    color: #fff;
}
.status.status-refunded::before {
    content: "\f2ea";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.status::before {
    margin-right: 4px;
}


.app-main #content-list .table-responsive .table tbody td .img-fluid{
    width: 50px;
    height: 40px;
    object-fit: cover;
}


@media screen and (max-width : 580px) {
    #page-list-container .filter-content-wrapper .filter-wrapper .filter-tab .tab-content .col-form-label{
        text-align: left;
    }
}

@media screen and (max-width: 900px) {
    #page-list-container .page-list-header .flex-wrap-content {
        display: flex;
        margin-bottom: 10px;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    #page-list-container .page-list-header .flex-wrap-content .form-control
    {
        margin: 15px 4px;
        max-width: 400px;
    }
}


#page-list-container .page-list-header .flex-wrap-content .left-content-menu .menu-list .item.dropdown:hover .dropdown-content{
    margin-left: -60px;
}

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  /* =========================
       COLORS
    ========================== */

    --primary-color: #0F4C81;      /* Deep Finance Blue */
    --secondary-color: #1B262C;    /* Rich Dark Slate */
    
    --success-color: #2E8B57;      /* Elegant Green */
    --danger-color: #D7263D;       /* Premium Red */
    --warning-color: #F4B400;      /* Gold Accent */
    --info-color: #3AAFA9;         /* Soft Teal */

    --light-color: #F8FAFC;        /* Clean Background */
    --dark-color: #111827;         /* Luxury Dark */

    --accent-color: #C8A96B;       /* Premium Gold */
    --text-color: #2D3748;         /* Soft Dark Text */
    --border-color: #E5E7EB;       /* Minimal Border */
    --light-gray : #e5e5e5;

    /* =========================
       FONT FAMILY
    ========================== */

    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-secondary : "Merriweather", serif;


    /* =========================
       FONT SIZES
    ========================== */

    --fs-xs: 0.75rem;      /* 12px */
    --fs-sm: 0.875rem;     /* 14px */
    --fs-md: 1rem;         /* 16px */
    --fs-lg: 1.125rem;     /* 18px */
    --fs-xl: 1.25rem;      /* 20px */
    --fs-2xl: 1.5rem;      /* 24px */
    --fs-3xl: 1.875rem;    /* 30px */
    --fs-4xl: 2.25rem;     /* 36px */
    --fs-5xl: 3rem;        /* 48px */
    --fs-6xl: 4rem;        /* 64px */


    /* =========================
       FONT WEIGHTS
    ========================== */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;


    /* =========================
       LINE HEIGHTS
    ========================== */

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.8;


    /* =========================
       SPACING
    ========================== */

    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */


    /* =========================
       BORDER RADIUS
    ========================== */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-full: 999px;


    /* =========================
       SHADOWS
    ========================== */

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);


    /* =========================
       TRANSITIONS
    ========================== */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;


     /* =========================
       BUTTON SIZES
    ========================== */

    --btn-height-sm: 40px;
    --btn-height-md: 48px;
    --btn-height-lg: 56px;

    --btn-width-sm: 120px;
    --btn-width-md: 160px;
    --btn-width-lg: 220px;

    --btn-padding-x: 24px;
    --btn-padding-y: 12px;

    --lima-padding-x : 24px;
    --lima-padding-y  : 12px;
}

html,body{
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    scroll-behavior: smooth;
}

*{
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: black;
}

p{
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}

button{
    border: none;
    background: none;
    cursor: pointer;
}

ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}


body {
     background-color: var(--light-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    margin: 0;
    padding: 0;
}

h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
}

.lima-btn-primary {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi-bold);
    border-radius: var(--radius-md);
}

.lima-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: var(--btn-height-md);
    width: var(--btn-width-md);

    padding: var(--btn-padding-y) var(--btn-padding-x);

    border: none;
    border-radius: var(--radius-md);

    font-size: var(--fs-md);
    font-weight: var(--fw-semi-bold);

    cursor: pointer;
    transition: var(--transition-normal);
}


.lima-btn-primary {
    background: linear-gradient(135deg, #0F4C81, #145DA0);
    color: white;

    box-shadow: var(--shadow-md);
}

.lima-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}


.lima-btn-sm {
    height: var(--btn-height-sm);
    width: var(--btn-width-sm);
    font-size: var(--fs-sm);
}

.lima-btn-lg {
    height: var(--btn-height-lg);
    width: var(--btn-width-lg);
    font-size: var(--fs-lg);
}

.lima-container{
    max-width: 1300px;
      margin: 0 auto;
    width: 100%;
     padding-inline: 20px;
}


.lima-container-fluid{
    max-width: 100%;
    margin: 0 auto; 
    padding-inline: 20px;
}

/* FLEX */
.lima-flex {
    display: flex;
}

.section{
    padding: var(--space-lg) 0;
}

body .scroll-page-btn{
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: var(--space-sm);
    position: fixed;
    right: 5px;
    bottom: 5px;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
      animation: bounce 2s infinite;
      z-index: 3;
}

body .scroll-page-btn:hover{
  animation: none;
  transform: translateY(0);
}


.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.card,
.card .card-header,
.card .card-body,
.card .card-footer
{
    background-color: transparent;
}
#lima-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    justify-content: space-between;
    background-color: var(--primary-color);
    color: var(--light-color);
}

#lima-main {
    flex: 1;
    flex-grow: 1;
}


#lima-header {
    background-color: var(--light-color);
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
    padding: var(--lima-padding-y) var(--lima-padding-x);
}

#lima-header .close-menu-button,
#lima-header .menu-button{
    display: none;
}

#lima-header .lima-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



#lima-header .logo.img-fluid {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    display: block;
    margin: auto;
    margin-left: 0;
}



#lima-header .lima-navbar .lima-nav-item {
    display: inline-block;
    margin: 6px;
    padding: 6px;
    transition: var(--transition-slow);
}


#lima-header .lima-navbar .lima-nav-item:hover {
    border-bottom: 2px solid var(--secondary-color);
}

#lima-header .lima-navbar .lima-nav-item .lima-nav-link {
    text-transform: capitalize;
    font-size: var(--fs-md);
    color: var(--secondary-color);
    font-family: var(--font-secondary);
}

#lima-header .lima-navbar .lima-nav-item.cl {
    border: 1px solid var(--border-color);
    margin-right: 0;
    margin-left: 0;
    padding-left: var(--lima-padding-x);
    padding-right: var(--lima-padding-x);
    transition: var(--transition-normal);
}

#lima-header .lima-navbar .lima-nav-item.primary-cl {
    background-color: var(--primary-color);
    color: var(--light-color);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}


#lima-header .lima-navbar .lima-nav-item.cl .lima-nav-link {
    color: inherit;
}


#lima-header .lima-navbar .lima-nav-item.secondary-cl {
    background-color: var(--success-color);
    color: var(--light-color);
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

#lima-header .lima-navbar .lima-nav-item.cl:hover {
    opacity: 0.7;
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown {
    position: relative;
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    min-width: 250px;
    height: max-content;
    border-radius: var(--radius-sm);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* SHOW STATE */
#lima-header .lima-navbar .lima-nav-item.nav-dropdown.active .lima-dropdown-navbar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    z-index: 3;
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar::after {
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 5px solid transparent;
    border-bottom: 8px solid var(--border-color);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar .lima-nav-item {
    display: block;
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar .lima-nav-item .lima-nav-link {
    font-size: var(--fs-sm);
    display: block;
    width: 100%;
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar .lima-nav-item {
    margin: 0;
    transition: var(--transition-slow);
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar .lima-nav-item:hover {
    border-bottom: none;
    background-color: var(--border-color);
}

#lima-header .lima-navbar .lima-nav-item.nav-dropdown .lima-dropdown-navbar .lima-nav-item .lima-nav-link {
    padding: var(--space-xs);
}


#lima-main {
    background-color: var(--light-color);
    padding: var(--space-md) 0;
    padding-bottom: 0;
    color: var(--dark-color);
}

#lima-main .lima-hero {
    min-height: 580px;
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#lima-main .lima-hero::before {
    content: '';
    background: linear-gradient(90deg,
            rgb(10, 60, 93) 0%,
            rgba(2, 45, 73, 0.696) 25%,
            rgba(255, 255, 255, 0.092) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    inset: 0;
}

#lima-main .lima-hero .lima-lf-content {
    position: relative;
    z-index: 2;
    min-height: 100%;
    padding: var(--lima-padding-y) var(--lima-padding-x);
}


#lima-main .lima-hero .lima-lf-content .title.hero-text {
    text-transform: capitalize;
    margin: 0;
    padding: var(--space-sm) var(--space-xs);
    font-weight: var(--fw-extra-bold);
    font-size: var(--fs-5xl);
    color: var(--light-color);
}

#lima-main .lima-hero .lima-lf-content .text.tagline {
    text-transform: capitalize;
    font-size: var(--fs-xl);
    margin: var(--space-sm) 0;
    color : var(--light-color);
}

#lima-main .lima-hero .lima-lf-content .button-group-wrapper {
    display: flex;
    margin: var(--space-md) 0;
}

#lima-main .lima-hero .lima-lf-content .button-group-wrapper .link {
    color: inherit;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    width: var(--btn-width-md);
    margin: auto var(--space-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-slow);
}

#lima-main .lima-hero .lima-lf-content .button-group-wrapper .link:nth-child(1) {
    background-color: var(--primary-color);
    color : var(--light-color);

}


#lima-main .lima-hero .lima-lf-content .button-group-wrapper .link:nth-child(2) {
    background-color: var(--light-color);
    color: var(--text-color);
}

#lima-main .lima-hero .lima-lf-content .button-group-wrapper .link:hover {
    opacity: 0.7;
}


#lima-main .lima-hero .lima-hero-features {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 11;
    padding: var(--lima-padding-x) var(--lima-padding-x);
    background-color: var(--light-color);
    min-width: 550px;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    clip-path: polygon(0 0, 100% 0%, 93% 99%, 0% 100%);
    box-shadow: var(--shadow-lg);
    border-top-right-radius: var(--radius-lg);
}

#lima-main .lima-hero .lima-hero-features .lima-flex {
    position: relative;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

#lima-main .lima-hero .lima-hero-features .lima-flex+.lima-flex {
    border-left: 2px solid var(--primary-color);
}

#lima-main .lima-hero .lima-hero-features .lima-flex .icon {
    margin-right: var(--space-sm);
}

#lima-main .lima-hero .lima-hero-features .lima-flex .text {
    font-weight: var(--fw-bold);
    text-transform: capitalize;
    font-size: var(--fs-md);
    margin-bottom: 0;
}

#lima-main .feature-ls {
    margin: var(--space-md) 0;
}

#lima-main .feature-ls .card {
    background-color: var(--light-gray);
    margin: 0 var(--space-md);
    padding: var(--fs-sm);
    box-shadow: var(--shadow-md);
    color: var(--dark-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    isolation: isolate;
    width: 650px;
}


#lima-main .feature-ls .card::before{
    content: '';
    position: absolute;
    inset: -50px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.7), transparent 35%),
        radial-gradient(circle at 60% 80%, rgba(255,255,255,0.6), transparent 30%),
        radial-gradient(circle at 40% 60%, rgba(255,255,255,0.5), transparent 40%);

    filter: blur(30px);
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0;
}

#lima-main .feature-ls .lima-container {
    justify-content: center;
    align-items: center;
}



#lima-main .feature-ls .card .card-header .title{
    text-transform: capitalize;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
}

#lima-main .feature-ls .card .card-body{
    justify-content: space-between;
}

#lima-main .feature-ls .card .card-body .content{
    width: 70%;
    flex: 1;
    margin-bottom: var(--space-md);
}

#lima-main .feature-ls .card .card-body .content
.text::first-letter{
    text-transform: capitalize;
}

#lima-main .feature-ls .card .card-body .content
.text{
    font-size: var(--fs-md);
}


#lima-main .feature-ls .card .card-body .img-fluid {
    max-width: 180px;
    height: auto;
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    transition: var(--transition-slow);
    margin-left: var( --space-xs);
}



#lima-main .feature-ls .card:hover .card-body .img-fluid{
    transform: scale(1.01);
}


#lima-main .feature-ls .card .card-body .features
.item p::first-letter{
text-transform: capitalize;
}


#lima-main .feature-ls .card .card-footer .link{
    background-color: var(--primary-color);
    color: var(--light-color);
    font-size: var( --fs-md);
    text-transform: capitalize;
    padding: var(--space-sm) var(--space-md);
    font-weight: var(--fw-bold);
    transition: var(--transition-slow);
    text-align: start;
}

#lima-main .feature-ls .card .card-footer .link:hover{
    opacity: 0.7;
}

#lima-main .lima-pre-ln{
    margin: var(--space-lg) 0;
}


#lima-main .lima-pre-ln .lima-container
{
     background-color: var(--light-gray);
     padding: var(--space-md);
     color: var(--text-color);
}


#lima-main .lima-pre-ln .lima-container .title
{
    text-transform: capitalize;
    text-align: center;
    font-weight: var(--fw-extra-bold);
    letter-spacing: var(--space-xs);
    margin-bottom: var(--space-xs);
      display: flex;
    align-items: center;
}

#lima-main .lima-pre-ln .lima-container .title::before,
#lima-main .lima-pre-ln .lima-container .title::after{
    content: '';
    flex: 1;
    height: 1px;
    background: var(--text-color);
}

#lima-main .lima-pre-ln .lima-container .input-group-wrapper {
    align-items: center;
}

#lima-main .lima-pre-ln .lima-container .input-group-wrapper .lima-col-label
{
    text-transform: capitalize;
    margin-right: var(--space-xs);
    font-size: var(--fs-sm);
}

#lima-main .lima-pre-ln .lima-container .wrapper.lima-flex{
    justify-content: space-around;
    align-items: center;
    margin: var(--space-md);
}

#lima-main .lima-pre-ln .lima-container .lima-form-input
{
    padding: var(--space-sm);
    outline: none;
    border: none;
    font-size: var(--fs-sm);
}

#lima-main .lima-pre-ln .lima-container .btn{
    background-color: var(--success-color);
    text-transform: capitalize;
    font-size: var(--fs-md);
    color: var(--light-color);
    display: block;
    font-weight: var(--fw-bold);
    margin: var(--space-md) auto;
}



#lima-main .lima-pre-ln .input-group-flex .input-group-span
{
    background-color: var(--light-color);
    text-transform: capitalize;
    padding: 0.6rem var(--space-sm);
    outline: none;
    border: none;
    font-size: var(--fs-sm);
    height: var(--space-md);
}


#lima-main .lima-pre-ln .result-wrapper 
{
    padding: var(--space-sm);
    border-radius: var(--radius-md);
}

#lima-main .lima-pre-ln .result-wrapper .text
{
    text-align: center;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    margin: var(--space-sm);
    text-transform: capitalize;
}

#lima-main .lima-pre-ln .result-wrapper .text .value{
    color: var(--success-color);
    font-size: var(--fs-xl);
    font-weight: var(--fw-extra-bold);
}

#lima-main .feature-pl .title.main{
    text-align: center;
    text-transform: capitalize;
       font-weight: var(--fw-extra-bold);
    letter-spacing: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-size: var(--fs-lg);
}

#lima-main .feature-pl .btn.main
{
    background-color: var(--primary-color);
    color: var(--light-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    text-transform: capitalize;
    margin: var(--space-lg) auto;
}

#lima-main .feature-pl .text::first-letter
{
    text-transform: capitalize;
}

#lima-main .feature-pl .text
{
    font-size: var(--fs-md);
    text-align: center;
    margin: var(--space-md) auto;
}

#lima-main .feature-pl .button-group-wrapper{
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#lima-main .feature-pl .button-group-wrapper .link
{
    background-color: var(--light-gray);
    color: var(--dark-color);
    min-width: var(--btn-width-md);;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-transform: capitalize;
    font-size: var(--fs-md);
    transition: var(--transition-slow);
    width: max-content;
    padding-inline: var(--space-sm);
}

#lima-main .feature-pl .button-group-wrapper .link.active,
#lima-main .feature-pl .button-group-wrapper .link:hover{
    background-color: var(--dark-color);
    color: var(--light-color);
}

#lima-main .feature-pl .button-group-wrapper:hover .link.active,
#lima-main .feature-pl .button-group-wrapper .link.active:hover
{
     background-color: var(--light-gray);
    color: var(--dark-color);
}

#lima-main .feature-pl .wrapper-content{
    display : grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}


#lima-main .feature-pl .wrapper-content .card{
    background-color: var(--light-gray);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-normal);
}

#lima-main .feature-pl .wrapper-content .card:hover {
    transform: translateY(-5px);
}



#lima-main .feature-pl .wrapper-content .card .card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#lima-main .feature-pl .wrapper-content .card .card-header
.lf-content .title{
    text-transform: capitalize;
    font-size: var(--fs-lg);
    font-weight: var(--fw-extra-bold);
    margin: var(--space-xs) 0;
}

#lima-main .feature-pl .wrapper-content .card .card-header
.lf-content .tagline
{
    margin: 0;
    font-size: var(--fs-sm);
}

#lima-main .feature-pl .wrapper-content .card .card-header
.lf-content .tagline::first-letter
{
    text-transform: capitalize;
}

#lima-main .feature-pl .wrapper-content .card .card-header
.lr-content
{
    background-color: var(--light-color);
    color: var(--dark-color);
    padding: var(--space-sm);
    width: max-content;
    border-radius: var(--radius-md);
}


#lima-main .feature-pl .wrapper-content .card .card-header
.lr-content .text:nth-child(1)
{
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    margin: var(--space-sm) 0;
    text-align: center;
    margin-bottom: 0;
}

#lima-main .feature-pl .wrapper-content .card .card-header
.lr-content .text.tagline
{
    margin: 0 auto;
    text-transform: capitalize;
    font-size: var(--fs-sm);
}


#lima-main .feature-pl .wrapper-content .card 
.card-body {
    padding: var(--space-xs) var(--space-sm);
}

#lima-main .feature-pl .wrapper-content .card 
.card-body .list .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: capitalize;
    font-size: var(--fs-md);
    padding: var(--space-sm) 0;
}


#lima-main .feature-pl .wrapper-content .card .card-footer .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: var(--primary-color);
    width: 100%;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--light-color);
    transition: var(--transition-normal);
}

#lima-main .feature-pl .wrapper-content .card 
.card-footer .btn .icon{
    margin-bottom: 0;
    display: flex;
    align-items: center;
    margin-left: var(--space-sm);
}


#lima-main .lima-chosen {
    margin: var(--space-lg) 0;
}

#lima-main .lima-chosen .title{
     text-align: center;
    text-transform: capitalize;
       font-weight: var(--fw-extra-bold);
    letter-spacing: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-size: var(--fs-lg);
    text-transform: capitalize;
    display: flex;
    align-items: center;
}

#lima-main .lima-chosen .title::before,
#lima-main .lima-chosen .title::after{
    content: '';
    flex: 1;
    height: 1px;
    background: var(--text-color);
}


#lima-main .lima-chosen .content-wrapper
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
}

#lima-main .lima-chosen .content-wrapper .flex-wrap
{
    margin: 0 var(--space-md);
    justify-content: center;
    align-items: center;
}

#lima-main .lima-chosen .content-wrapper .flex-wrap .icon{
    display: flex;
    justify-content: center;
     margin-bottom: var(--space-md);
}


#lima-main .lima-chosen .content-wrapper .flex-wrap  .text{
    font-size : var(--fs-md);
    margin-bottom: 0;
    font-weight : var(--fw-bold);
}

#lima-main .lima-chosen .content-wrapper .flex-wrap  .text::first-letter
{
    text-transform: capitalize;
}


#lima-main .feature-pl .accordion{
    position: relative;
    width: 70%;
    display: block;
    margin: var(--space-sm) auto;
}

#lima-main .feature-pl .accordion .accord-btn{
    border: 1px solid var(--border-color);
    width: 100%;
    padding: var(--space-md);
    text-align: start;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    position: relative;
}

#lima-main .feature-pl .accordion .accord-btn::after{
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
  background-color: var(--primary-color);
  color : var(--light-color);
  padding: var(--space-sm);
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}


#lima-main .feature-pl .accordion.active .accord-btn::after
{
 content: "\2212";
}


#lima-main .feature-pl .accordion .accord-btn::first-letter
{
    text-transform: capitalize;
}

#lima-main .feature-pl .accordion .accordion-body{
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: var(--transition-slow);
    display: none;
}

#lima-main .feature-pl .accordion.active .accordion-body
{
    padding: var(--space-md);
    height: max-content;
    overflow: visible;
    opacity: 1;
    color: var(--text-color);
    display: block;
}

#lima-footer{
    background: var(--secondary-color);
    color: var(--light-color);
    padding: var(--space-md) var(--space-sm);
}

#lima-footer .footer-row{
    display: flex;
    flex-direction: row;
    align-items: center;
}


#lima-footer .footer-row .column.fs{
    flex-grow: 1;
    flex: 1;
}

#lima-footer .footer-row .column.fs .row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


#lima-footer .footer-row .column.fs .row .title{
    text-transform: capitalize;
    padding: var(--space-sm);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: inherit;
}



#lima-footer .footer-row .column.fs .row .menu-item{
    list-style: none;
    padding: 0;
    margin: 0;
}

#lima-footer .footer-row .column.fs .row .menu-item .item .link{
    text-decoration: none;
    display: block;
    width: 100%;
    text-transform: capitalize;
    padding: var(--space-sm);
    transition: var(--transition-slow);
    font-size: var(--fs-sm);
    color: inherit;
    text-align: start;
}


#lima-footer .footer-row .column.fs .row .menu-item .item .link:hover{
    color: var(--light-gray);
    opacity: 0.8;
}


#lima-footer .footer-row .column.ls{
    max-width: 30%;
    padding: var(--space-sm);
}


#lima-footer .footer-row .column.ls .title{
    font-size: var(--fs-md);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    padding: var(--space-sm) 0;
    margin-bottom: 0;
}


#lima-footer .footer-row .column.ls .text{
    font-size: var(--fs-sm);
    margin-bottom: var(--space-md);
    font-weight: normal;
}

#lima-footer .footer-row .column.ls .icon-wrapper{
    padding: var(--space-sm) 0;
}

#lima-footer .footer-row .column.ls .icon-wrapper a{
    text-decoration: none;
    margin:var(--space-sm);
    font-size: var(--fs-lg);
    color: inherit;
}

#lima-footer .footer-row .column.ls .icon-wrapper a:hover{
    opacity: 0.8;
}

#lima-footer .footer-row .column.ls .link.btn{
    font-size: var(--fs-md);
    text-decoration: none;
    text-transform: capitalize;
    font-weight: bold;
    padding: var(--space-sm);
    background-color: rgb(3, 3, 31);
    color: var(--white);
    margin: var(--space-sm) 0;
    transition: var(--transition-slow);
}


#lima-footer .footer-row .column.ls .link.btn .icon{
    margin-right: var(--space-sm);
    color: inherit;
}

#lima-footer .footer-row .column.ls .link.btn:hover{
    text-decoration: underline;
}

#lima-footer .lw-footer-wrapper{
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
}

#lima-footer .lw-footer-wrapper .text{
    margin-bottom: 0;
    font-size: var(--fs-md);
    text-align: center;
}


#main.article-wrapper
{
    background-color: var(--light-color);
    color: var(--text-color);
}

#main.article-wrapper .breadcrumb-container h3{
    text-transform: capitalize;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
}

#main.article-wrapper .breadcrumb-container .breadcrumb-item{
    text-transform: capitalize;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-xs);
}
/* @keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
} */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-12px);
  }
  50% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-6px);
  }
}
@media screen and (max-width: 950px) {
  #lima-header .menu-button
  {
    display: block;
    font-size: var(--fs-lg);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
  }
 
 
    #lima-header .menu-container
 {
    position: fixed;
        background-color: var(--light-color);
        top: 0;
        left: 0;
        height: 100%;
        z-index: 999;
        width: 0;
        overflow: hidden;
        transition: var(--transition-slow);
        
 }

    #lima-header .menu-container.active
    {
         width: 70%;
         box-shadow: var(--shadow-lg);
        padding: var(--lima-padding-x) var(--lima-padding-y);
    }


        #lima-header .lima-navbar .lima-nav-item
        {
            display: block;
        }

        #lima-header .lima-navbar .lima-nav-item.cl
        {
            width: max-content;
            border-radius: var(--radius-md);
            min-width: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #lima-header .close-menu-button
        {
            display: block;
            position: absolute;
            right: 10px;
            top: 10px;
            background-color: var(--danger-color);
            padding: var(--space-md);
            color: var(--light-color);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-md);
            font-size: var(--fs-lg);
        }


        #lima-main .lima-hero .lima-lf-content .title.hero-text
        {
            font-size: var(--fs-xl);
        }

        #lima-main .feature-ls .lima-container{
            flex-direction: column;
            gap: var(--space-md);
        }

        #lima-main .feature-ls .card{
            width: 100%;
        }

        #lima-main .lima-pre-ln .lima-container .wrapper.lima-flex
        {
            flex-wrap: wrap;
            gap: var(--space-md);
            justify-content: center;
        }

        #lima-main .feature-pl .wrapper-content
        {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }

        #lima-main .lima-chosen .content-wrapper{
            flex-wrap: wrap;
            gap: var(--space-lg);
        }
}



@media screen and (max-width: 770px)
{
    
    #lima-main .feature-pl .accordion
    {
        width: 100%;
    }


       #lima-footer .footer-row{
        flex-direction: column;
     }

     #lima-footer .footer-row .column.fs,
      #lima-footer .footer-row .column.ls{
        flex: 1;
        width: 100%;
        max-width: 100%;
     }

     #lima-footer .footer-row .column.ls .title{
        font-size: var(--fs-md);
     }
}


@media screen and (max-width: 570px)
{
    #lima-main .lima-hero .lima-hero-features
    {
        flex-direction: column;
        gap: var(--space-sm);
        min-width: 100%;
        max-width: 100%;
        display: none;
    }

    #lima-main .lima-hero{
        min-height: 380px;
        max-height: 380px;
    }

    #lima-main .lima-hero .lima-hero-features .lima-flex+.lima-flex
    {
            border-left: none;
            border-top: 2px solid var(--primary-color);
                padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    }


    #lima-main .lima-hero .lima-lf-content
    {
        padding: var(--space-md);
    }

     #lima-main .feature-ls .card .card-body{
        flex-direction: column;
    }

      #lima-main .feature-ls .card .card-header .title{
        text-align: center;
      }

      #lima-main .feature-ls .card .card-body .content{
        width: 100%;
        text-align: center;
      }

      #lima-main .feature-ls .card .card-body .img-fluid
      {
        max-width: 100%;
      }

       #lima-main .feature-ls .card .card-footer
       {
        padding: var(--space-md);
        text-align: center;
       }

       #lima-footer .footer-row .column.fs .row
       {
        flex-direction: column;
        gap: var(--space-md);
       }
}

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

    #lima-main .lima-pre-ln .lima-container .input-group-flex,
 #lima-main .lima-pre-ln .lima-container .input-group-wrapper{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
    }

     #lima-main .lima-pre-ln .lima-container .input-group-wrapper .lima-form-input{
        width: 100%;
     }
}


@media screen and (max-width: 300px)
{
    #lima-main .lima-hero .lima-lf-content .button-group-wrapper
    {
        flex-direction: column;
        gap: var(--space-md);
    }

   

   
}
#main .contact-us-pg{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100%;
    width: 100%;
    position: relative;
    padding: 20px;
    padding-bottom: 3rem;
}

#main .contact-us-pg::before{
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 75%);
    position: absolute;
}

#main .contact-us-pg .container{
    position: static;
    z-index:1;
}

#main .contact-us-pg .ctc-header{
    margin-bottom: 3rem;
}

#main .contact-us-pg .ctc-header{
    text-align: center;
    color: var(--light-color);
    position: relative;
}


#main .contact-us-pg .ctc-header .title{
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
    padding: 5px;
    color: var(--light-color);
}


#main .contact-us-pg .ctc-header .text{
    font-size: 15px;
    margin-bottom: 0;
    padding: 5px;
}

#main .contact-us-pg .ctc-body .address-line{
    color: var(--light-color);
    position: relative;
    z-index: 1;
    margin-top: 40px;
    display: flex;
}


#main .contact-us-pg .ctc-body .address-line .contact-info{
    flex: 1;
}

#main .contact-us-pg .ctc-body .address-line .icon{
    margin-right: 15px;
    color: var( --dark-color);
    height: max-content;
    border-radius: 100%;
    padding: 8px 10px;
    background-color: var(--light-color) !important;
    text-align: center;
}


#main .contact-us-pg .ctc-body form#data-form .card,
#main .contact-us-pg .ctc-body form#data-form .card .card-header,
#main .contact-us-pg .ctc-body form#data-form .card .card-body,
#main .contact-us-pg .ctc-body form#data-form .card .card-footer{
    background-color: var(--light-color);
    border-radius: 0;
    padding: 0;
    border: none;
}

#main .contact-us-pg .ctc-body form#data-form .card{
    padding: 24px;
}

#main .contact-us-pg .ctc-body form#data-form{
    background-color: var(--light-color);
    border-radius: 0;
}

#main .contact-us-pg .ctc-body form#data-form .card .card-header .title{
    font-weight: 700;
    letter-spacing: 0px !important;
    margin-bottom: 5px;
    text-transform: capitalize;
    font-size: 22px;
    margin-bottom: 1rem;
}

#main .contact-us-pg .ctc-body form#data-form .card .card-body .form-label{
    margin-bottom: 1px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color);
}

#main .contact-us-pg .ctc-body form#data-form .card .card-body  .form-control::placeholder
{
        color: var(--text-color);
}

#main .contact-us-pg .ctc-body form#data-form .card .card-body  .form-control{
    border:none;
    border-bottom: 2px solid var(--text-color);
    color: var(--text-color);
}


#main .contact-us-pg .ctc-body form#data-form .card .card-body  .form-control:focus{
    border: 1px solid var(--light-gray);
}


#main .contact-us-pg .ctc-body form#data-form .card .card-footer .send-msg-btn.create-btn
{
    background-color: var(--primary-color) !important;
    color: var(--light-color) !important;
    padding: 12px 26px;
    min-width: 120px;
    display: block;
    margin: auto;
    transition: all 0.5s ease;
}

#main .contact-us-pg .ctc-body form#data-form .card .card-footer .send-msg-btn.create-btn:hover{
    opacity: 0.6;
}


@media screen and (max-width: 790px) {
    #main .contact-us-pg .ctc-body form#data-form{
        margin: 2rem 0;
    }

    #main .contact-us-pg .ctc-body form#data-form .card{
        padding: 10px;
    }

    #main .contact-us-pg .ctc-body .address-line{
        margin-top:20px;
    }
}


@media screen and (max-width: 350px) {
    #main .contact-us-pg{
        padding: 20px 0;
    }


    #main .contact-us-pg .ctc-header .title{
        font-size: 20px;
    }


    #main .contact-us-pg .ctc-header .title,
    #main .contact-us-pg .ctc-header .text
    {
        padding: 1px;
    }

    #main .contact-us-pg .ctc-body .address-line .icon{
        margin-right: 5px;
        color: var( --dark-color);
        height: max-content;
        border-radius: 100%;
        padding: 4px 6px;
        background-color: var(--light-color);
        text-align: center;
    }

    #main .contact-us-pg .ctc-body .address-line .icon i{
        font-size: 14px;
    }

    #main .contact-us-pg .ctc-body .address-line {
        font-size: 14px;

    }
}