@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
:root{
    --text-color: #343f52;
    --bs-dark: #000000;
    --h-color:#343f52;
    --bs-body-font-size: 1rem;
    --bs-primary:#7e0095;
    --box-shadow-lg:0 .25rem 1.75rem rgba(30,34,40,.07);
    --btn-shadow:0 0.25rem 0.75rem rgb(30 34 40 / 15%);
    --translate-y:translateY(-.15rem);
    /* --font-family: "Manrope",sans-serif;  */
    --font-family: 'Roboto', sans-serif; 
    /* font-family: 'Bitter', serif;
font-family: 'Roboto', sans-serif; */

    --bs-info :#7d46dd;
    --bs-danger:#e2626b;
    --section-bg:#7e00950d;
    --h-font-family:'fangsong';
    --bs-success:#198754;
    --bs-outline-primary:#7f009523;
    --bs-outline-info:#7d46dd25;
    --bs-outline-danger:#e2626b1c;
    --bs-outline-success:#1987542f;
    --price-card-shadow:0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
    --font-size-8rem:0.8rem;
    --font-size-1rem:1.2rem;
    --font-size-1remfixed:1rem;
    --bs-white:white;
}


body{
    font-size:var(--bs-body-font-size)!important;
    font-weight: 500!important;
    /* font-family: var(--font-family)!important; */
    color:var(--text-color)!important; 
    font-family: 'Roboto', sans-serif!important;
 

}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6
{
    color: var(--h-color)!important;
    font-family:var(--h-font-family)!important;

}


/* navbar */
.w-90{
    width: 90% !important;
}


.navbar-expand-lg .navbar-nav .nav-link{
    color: var(--h-color);
}

@media (max-width: 991.98px){
    .navbar-expand-lg .navbar-collapse .nav-link
    {
        color:white!important;

    }
}

@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.offcanvas-nav-btn {
    border:none;
    background:none;
}
.navbar-light .navbar-nav .nav-link{
    font-weight: 600;

}
.nav-link:hover{
    color:var(--bs-primary)!important;
}
.offcanvas-footer .social a{
    padding:0px 5px;
}
.offcanvas-footer .social a i{
    font-size: 20px!important;
}

@media (min-width: 992px){
    .nav-link{
        padding:1.2rem 1rem!important;
    }
}
/* end navbar */




.btn-primary{
    background-color: var(--bs-primary)!important;
    border-color: var(--bs-primary)!important;
}
.btn{
    transition: all .2s ease-in-out!important;
    line-height: 1.7!important;
    font-weight: 700!important;
    padding:.5rem 1.2rem!important;
    border:none!important;
}
.btn:not(.btn-play):hover{
    transform: var(--translate-y)!important;
    box-shadow: var(--btn-shadow) !important;
}
/* bg color  */
.bg-primary{
    background-color: var(--bs-primary)!important;
    color: var(--bs-white)!important;
}
.bg-info{
    background-color: var(--bs-info)!important;
    color: white!important;
}
.bg-success{
    background-color: var(--bs-success)!important;
    color: white!important;
}
.bg-danger{
    background-color: var(--bs-danger)!important;
    color: white!important;
}
/* end bg color */


.text-primary{
    color: var(--bs-primary)!important;
}


.alert-inner{
    padding: 1rem 0!important;
}

.badge-lg {
    font-size: .8rem;
    padding: 0.35rem 0.55rem;
}

.font-weight-600{
    font-weight: 600!important;
    font-size: .8rem;
}



section::selection{
    background: rgba(226,98,107,.7)!important;
}

.display-1{
    font-family: "dm serif display"!important;
    font-weight: 400!important;
    word-spacing: normal!important;
    letter-spacing: normal!important;
}

h1.display-1{
    font-size: 2.5rem; 
    font-weight: 600!important;
    line-height: 1.7!important;
}

.custom-shadow-lg{
    box-shadow: var(--box-shadow-lg) !important;
}
.rounded{
    border-radius: 0.375rem!important;
    overflow: hidden;
}
footer .btn.rounded-pill.buy{
    padding: 15px 29px!important;
}
.btn.rounded-pill{
    padding: 12px 25px!important;
}
.mb-n18{
    margin-top: 8rem!important;
}

.btn-play{
    border-radius: 100%!important;
    overflow: hidden!important;
}

.btn-play i.bi.bi-play{
    font-size: 30px!important;
}

.btn-play:hover{
    box-shadow: var(--btn-shadow)!important;
}


.btn-circle{
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    -webkit-animation: circle 2s infinite;
        animation: circle 2s infinite;
    background-color: var(--bs-primary);

}
.btn-circle:after{

        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 80px;
        height: 80px;
        background: var(--bs-primary);
        border-radius: 50%;
        animation: circle-border 1500ms ease-out infinite;

}
 
@keyframes circle {
    0% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.2, 1.2);
    }
    100% {
      transform: scale(1, 1);
    }
  }



@keyframes circle-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }

  p{
      color: var(--text-color);
  }

  .btn-info{
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

.btn-info:hover{
    background-color: var(--bs-info)!important;
    border-color: var(--bs-info)!important;
    color: white!important;
}
.btn-success:hover{

    background-color: var(--bs-success)!important;
}


  .btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;
}

.btn-danger:hover{
    background-color: var(--bs-danger)!important;
    border-color: var(--bs-danger)!important;
    color: white!important;
}

.section-bg{
    background-color: var(--section-bg);
}

.btn-outline-primary{
    border: none !important;
    background-color: var(--bs-outline-primary)!important;
    color:var(--bs-primary)!important;

}
.btn-outline-primary:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-primary)!important;
    color:var(--bs-primary)!important;
}

.btn-outline-info{
    border: none;
    color: var(--bs-info)!important;
    background-color: var(--bs-outline-info)!important;
}
.btn-outline-info:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-info)!important;
    color: var(--bs-info)!important;
}

.btn-outline-danger{
    border: none;
    color: var(--bs-danger)!important;
    background-color: var(--bs-outline-danger)!important;
}
.btn-outline-danger:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-danger)!important;
    color: var(--bs-danger)!important;

}

.btn-outline-success{
    border: none;
    color: var(--bs-success)!important;
    background-color: var(--bs-outline-success)!important;
}
.btn-outline-success:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-success)!important;
    color: var(--bs-success)!important;

}


.bg-line-style{
    background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) 0.8px,#7e00954f 1.6px,#7e00954f 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);

}


section .title,footer .title{

    font-weight: 600!important;
    line-height: 1.1!important;
}

.mr-1{
    margin-right:1rem!important;
}

.list-unstyled li i.fa.fa-check
{
    background: #e7f2ec;
    border-radius: 50%;
    padding: 5px;
    color:var(--bs-success) ;
}
.list-unstyled li i.fa.fa-close
{
    background: var(--bs-outline-danger);
    border-radius: 50%;
    padding: 5px;
    color:var(--bs-danger) ;
    width: 26px!important;
    height: 26px!important;
    text-align: center;
}

.list-unstyled li{
    margin-top: 15px !important;
}

.typed-cursor{
    color:var(--bs-primary) !important;
    margin-left: 5px!important;
    font-weight: 100!important;
}

.fs-15{
    font-size: 15px!important;
}

.fs-1-5{
    font-size: 1.5rem!important;
}
.fs-1{
    font-size: 1rem!important;
}



/* badge */

.badge.badge-outline-primary{
    background-color: var(--bs-outline-primary)!important;
    color: var(--bs-primary)!important;
}
.badge.badge-outline-info{
    background-color: var(--bs-outline-primary)!important;
    color: var(--bs-primary)!important;
}
.badge.badge-outline-primary{
    background-color: var(--bs-outline-primary)!important;
    color: var(--bs-primary)!important;
}
.badge.badge-outline-success{
    background-color: var(--bs-outline-success)!important;
    color: var(--bs-success)!important;
}
.badge.badge-outline-danger{
    background-color: var(--bs-outline-danger)!important;
    color: var(--bs-danger)!important;
}

/* end badge  */

/*key features design */
section.key-features .card{
    border: none !important;
    box-shadow: var(--box-shadow-lg) !important;
    border-radius: 10px!important;
    transition: .3s;

}
section.key-features .card:hover{
    transform: translateY(-0.4rem);
}
section.key-features a{
    text-decoration: none!important;
    color: unset!important;
}
section.key-features .w-30{
    width: 30%;
}
 
.badge{
    border-radius: 20px!important;
}

section.bg-light{
    --bs-bg-opacity: 0.5;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
}

section.key-features h4,section.how-work-it h4{
    font-weight: 600!important;
}
section.key-features .card .key-profile,section.how-work-it .card .key-profile{
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    font-weight: 700!important;
    line-height: 1.7!important;
    letter-spacing: -.01rem!important;
    border-radius: 100%!important;
    height: 4rem!important;
    width: 4rem!important;
    text-transform: uppercase!important;
}
section.how-work-it .card .key-profile{
    width: 2rem!important;
    height: 2rem!important;
}
section.how-work-it .card .d-flex h4{
    margin-bottom: 0px;
}

.mr-15px{
    margin-right:15px!important;
}




/* end key features design */


.plyr { 
    border-radius: 10px!important;
}

.plyr__control.plyr__control--overlaid{
    background: var(--bs-primary)!important;
}
.plyr__control.plyr__control--overlaid:hover{
    background: var(--bs-primary)!important;
}

.plyr__controls__item.plyr__control:hover{
    background: var(--bs-primary)!important;
}
.plyr__controls button:hover{
    background-color: var(--bs-primary)!important;
}

.plyr__controls input{
    color: var(--bs-primary)!important;
}

.fs{
    font-size: 2rem!important;
}

section.how-work-it .card{
    border: none!important;
    box-shadow: var(--box-shadow-lg)!important;
    border-radius: 10px!important;
}


section.pricing-table .card, section.customer-feedback .card
{
    border:none!important;
    border-radius: 10px!important;
    box-shadow: var(--box-shadow-lg)!important;
}
section.pricing-table .card .card-body
{
    margin: auto!important;
}
section.pricing-table .card .currency{
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 400;
    padding-right: 0.2rem;
    padding-top: 0.4rem;
    font-family:'FontAwesome';
}

section.pricing-table .card .price{
    font-size: 3rem!important;
    font-weight: 100!important;
}

section.pricing-table .card .duration{
    margin-top: 30px!important;
    margin-left: 5px;
}

section.pricing-table .card h4.font-weight-bold{
    font-weight: 600!important;
}


section.pricing-table .card  ul li{
    margin-top:10px!important;
}


@media screen and (min-width:992px) {

    .mt-minus-20{
        margin-top: -20px!important;
    }
}

 

blockquote::before{
    content: "\201c";
    color: #aab0bc;
    opacity: .3;
    font-size: 6.5rem;
    font-weight: 400;
    top: 0;
    left: 50%;
    transform: translateX(-52%);
    line-height: 1;
    z-index: 1;
}

.customer-rate{
    display: inline-block;
    position: relative;
    width: 5rem;
    height: 0.8rem;
    font-size: 1.3rem;
    line-height: 1;
}


.customer-rate:before {
    color: rgba(38,43,50,.1);
}

.customer-rate:after, .customer-rate:before {
    display: inline-block;
    font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
    font-style: normal;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    color: #fcc032;
    content: "\2605\2605\2605\2605\2605";
    overflow: hidden;
}

.navbar-brand .logo,.footer-logo .logo{ 
    object-fit: contain;
}


.navbar-toggler-icon{
    width: 2em!important;
    height: 2em!important;
}


/* responsive  */

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

    body{
        font-size:var(--font-size-1rem)!important;
    }

    .btn,.btn.rounded-pill{
        padding:0.3rem 1rem!important;
        font-size: var(--font-size-1rem)!important;
    }

    section.key-features .card .key-profile, section.how-work-it .card .key-profile{
        width: 3rem!important;
        height: 3rem!important;
    }
    .swiper .card.m-5{
        margin: 2px!important;
        margin-bottom: 5rem!important;
    }

    .swiper .card .blockquote-box{
        padding-left:0.5rem!important;
        padding-right:0.5rem!important;
    }

    blockquote::before {
        font-size: 4rem!important;
    }

    .py-5{
        padding-top:2rem!important;
        padding-bottom: 2rem!important;
    }

     section.customer-feedback .card {
        border: none!important;
        border-radius: 10px!important;
        box-shadow: var(--price-card-shadow)!important;
    }


    .offcanvas.offcanvas-nav{
        width: 60%!important;
    }

    h1.display-1{
        font-size: 3rem!important;
    }

    .navbar.navbar-expand-lg.center-nav{
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
    .navbar.navbar-expand-lg.center-nav .container.flex-lg-row.flex-nowrap.align-items-center{
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
    h1.title.mb-5{
        margin-bottom: 2rem!important;
        margin-top: 2rem!important;
    }

    .display-6{
        font-size: calc(1.375rem + 0.5vw)!important;
    }

    .key-features .container.pb-5.mb-5{
        margin-bottom: 0px!important;
    }

    .fs-1-5 {
        font-size: calc(1rem + 0.3vw)!important;
        margin-top: 2rem!important;
    }

    section.pricing-table .card.p-5{
        padding:3rem 1rem!important;
    }
    section.pricing-table .card .card-body{
        margin:unset!important;
    }
    .pricing-table .btn.rounded-pill{
        padding:15px 29px!important;
    }

    .navbar-brand .logo{
        width: 150px;
        object-fit: contain;
    }

    .auth-btn{
        padding: 0.2rem 0.8rem!important;
        font-size: var(--font-size-1remfixed)!important;
    }

 

}

/* end responsive */
.font-weight-bold{
    font-weight: bold;
}
.font-size-25{
    font-size: 25px;
}

.dashboard-section{
    background: url(../img/responsive-application.png) no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: center;
}
.dashboard-section .dashboard-overlay{
    background: rgb(0 0 0 / 61%);
}
.dashboard-section .dashboard-content p{
  color: white!important;
}

.Industries i{
    font-size: 60px!important;
    color: var(--bs-primary);
}

.text-2rem{
    font-size: 2rem!important;
}

.banner-hilight{
    font-weight: 800!important;
    line-height: 41px!important;
    letter-spacing: 0em!important;
    text-align: left;
}
.banner-image{
    width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 991px) {
    h1.banner-hilight{
        font-size: 2rem!important;
        text-align: center;
    }
    .banner-subtitle{
        text-align: center!important;
    }
}

.tracking-form input.form-control, .tracking-form button{
    border-width: 1px, 0px, 1px, 1px; 
    border-style: solid; 
    border-color: var(--bs-primary); 
}
.tracking-form button,.subscribe-form button{
    border-radius: 0rem 0.375rem 0.375rem 0rem!important;
}
.tracking-form input.form-control:focus,.subscribe-form input.form-control:focus{
    box-shadow: none !important;
}
.subscribe-form .btn:hover{
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.service-item{
    position: relative;
    border-radius: 10px;
    transition: 0.5s;
}
.service-item .service-box{ 
    width: 113.32px;
    height: 113.32px; 
    display: inline-block;
    /* Primary */ 
    background: var(--bs-primary);
    border-radius: 20px;
    transform: rotate(-44.56deg);
}
.service-item .service-box img{
  object-fit: contain;
}
.service-item .service-box .icon-box{
    transform: rotate(44.56deg);
    width: 100%;
    height: 100%;
    padding: 30px;
}
.section-title{
    border-bottom: 2px solid var(--bs-primary);
    padding-bottom: 5px;
}

 
 .whycourier-item{ 
    height: 188px;
    margin: auto; 
    border-radius: 5px;
    box-shadow: 0px 0px 7px #00000040;
 }
.whycourier-item .whycourier-box{ 
    display: inline-block;
    margin: auto; 
}
.whycourier-item .whycourier-box img{  
    width: 66px; 
    object-fit: contain;
}

.pricing .nav-link{
    line-height: 1.7!important;
    font-weight: 700!important;
    padding: 0.5rem 1.2rem!important;
    border: none!important;
    color: var(--text-color);
}  
.pricing .nav-item{  
    border-bottom: 1px solid var(--bs-primary);
}
.pricing .nav-link.active{  
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-radius: 0.375rem 0.375rem 0rem 0rem;
}
.pricing .nav-link.active:hover{   
    color: var(--bs-white)!important;
}

.pricing.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    content: "|";
    margin-top: 10px;
}
.charge-content .charge-item{
    /* border: 1px solid var(--bs-primary); */
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 5px;
    box-shadow: 0px 0px 3px var(--bs-primary);
    border-radius: 5px;
}
.charge-content  .charge-col{
    padding: 0px !important;
}

@media screen and (max-width: 991px){
    .pricing .nav-link {
        line-height: 1.5!important; 
        padding: 0.5rem 0.5rem!important; 
        font-size: 15px!important;
    }
    .pricing.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
        margin-top: 0%!important;
    }
}

@media screen and (max-width: 768px){
    .pricing .nav-link {
        line-height: 1.5!important; 
        padding: 0.5rem 0.5rem!important; 
        font-size: 10px!important;
    }
    .pricing.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
        margin-top: 0%!important;
    }
}

.achievement{
    min-height:150px;
}
.achievement .branch-title{
    text-align: left!important;
    color: var(--bs-white)!important;
}
.achievement .icon i{
    font-size: 30px;
}
.achievement .icon-text{ 
    padding-left: 15px;
}

.partner .partner-logo{
    width: 60px;
    object-fit: contain;
}

.swiper-pagination-bullet-active{
    background: var(--bs-primary)!important;
}
.footer-logo{
    text-align: left;
}

.footer-list{
    list-style: none;
}
.footer-list li a{
    display: block;
    text-align: left!important;
    color: var(--bs-white);
    text-decoration: none;
}
.footer-list li{
    margin-top: 5px!important;
}

@media screen and (max-width: 991px){
    .justify-content-center.achievement{
        justify-content: start!important;
        min-height: 120px!important;
    }
}

.social-media i.icon{
    font-size: 30px;
    color: var(--bs-white);
}
.tracking-page.tracking-form input,
.tracking-page.tracking-form button{
    font-size: 25px;
}

.app-download i{
    color: var(--bs-white);
    font-size: 60px;
}

.font-size-1-5rem{
    font-size: 1.5rem;
}

.pagination .page-link{
    color: var(--bs-primary);
}
.pagination .active .page-link{
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}
.faq.accordion .accordion-button{ 
    font-weight: 600!important;
    background:none;
}
.faq.accordion .accordion-button:focus{ 
     background: none!important; 
     box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
 
}

.faq.accordion .accordion-button:not(.collapsed){
    box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    color: var(--bs-primary);
}

.faq.accordion .accordion-button,
.faq.accordion .accordion-body{
    padding-left: 0px;
}

@media screen and (max-width:991px) {
    .user-dropdown{
        position: absolute!important;
    }
}

.contact-form .form-control:focus{
    box-shadow: none!important;
    border:1px solid var(--bs-primary)
}

.text-white{
    color:var(--bs-white)!important;
}

.blogs .card .card-footer{
    background:none;
    border: none;
}

.blogs .card{
    border: none;
    box-shadow: 0px 0px 5px #0000002e;
}
.latest-blog .card-text i,.latest-blog .card-text small{
   font-size: 12px!important;
}
.latest-blog .card{
    border: none;
    box-shadow: 0px 0px 5px #0000002e;
}
@media screen and (max-width:991px) { 
    .latest-blog img{
        width: 130px!important;
        height: 130px!important;
    } 
}

.blogs .pagination{
    justify-content: center;
}

.language-list li{
    padding: 0.5rem;
    margin-top: 0px!important;
}

html[dir="rtl"] .navbar-nav.ms-auto{
    margin-right: auto !important;
}
html[dir="rtl"] .tracking-form button, html[dir="rtl"] .subscribe-form button{
    border-radius:  0.375rem 0rem 0rem 0.375rem !important;
}
html[dir="rtl"] .tracking-form input, html[dir="rtl"] .subscribe-form input{
   border-radius: 0px 5px 5px 0px!important;
}

.service-item:hover{
    transform: translateY(-0.4rem);
    background:var(--bs-primary); 
}
.service-item:hover h5, .service-item:hover p{
    color: var(--bs-white)!important;
}
.service-item:hover .text-primary{
    color: var(--bs-white)!important;
}

.service-details:hover{
    transform: unset;
    background:unset;
}
.service-details:hover h5, .service-details:hover p{
    color: unset!important;
}
.service-details:hover .text-primary{
    color: unset!important;
}

.why-courier-col{
    padding: 10px;
}
.whycourier-item{
    transition: 0.5s;

}
 
.whycourier-item:hover{
    transform: translateY(-0.4rem);
    background:var(--bs-primary); 
}
.whycourier-item:hover h5, .whycourier-item:hover p{
    color: var(--bs-white)!important;
}
.charge-item{
    transition: 0.5s;
}
.charge-item:hover{
    transform: translateY(-0.2rem);
    background:var(--bs-primary); 
}
.charge-item:hover h3, .charge-item:hover p{
    color: var(--bs-white)!important;
}
.navbar-nav .nav-item .nav-link.active{
    color: var(--bs-primary);
}
 
@media screen and (min-width:992px) {

    .menu .nav-item,.auth-info .login-button{
        padding:1.2rem 1rem!important;
    }
    .menu .nav-item .nav-link,.auth-info .login-button .nav-link{
        padding:0px!important;
        padding-bottom: 3px;
    } 
    .menu .navbar-nav .nav-item .nav-link::before,.auth-info .login-button .nav-link::before{
        content: "";
        background: var(--bs-primary); 
        height: 2px;
        z-index: 11;
        bottom: 0px;
        left: 0px;
        border-radius: 30px; 
        position: absolute;
        transition: 0.3s;
        width: 0px;
    } 
    .menu .navbar-nav .nav-item .nav-link,.auth-info .login-button .nav-link{
        position: relative;
        overflow: hidden;
    } 
    .menu>.navbar-nav>.nav-item>.nav-link:hover::before,.auth-info .login-button .nav-link:hover::before{
       width: 100%;
    }
    .menu>.navbar-nav>.nav-item>.nav-link.active::before{
       width: 100%;
    }

}
.blogs .card{
    transition: 0.5s;
}
.blogs .card:hover{
    transform: translateY(-0.4rem);
    background: var(--bs-primary);
}
.blogs .card:hover h4.card-title,  .blogs .card:hover p{
    color: var(--bs-white)!important;
}
.latest-blog-item{
    transition: 0.5s;
}

.latest-blog-item:hover{
    background:var(--bs-primary);
}
.latest-blog-item:hover h5,.latest-blog-item:hover p{
    color: var(--bs-white)!important;
}