.libraryHead {width: 100%; z-index: 99; }
.libraryHead.fixed {background: var(--white);  transition: all 0.8s ease-in-out; transform: translateY(10rem); position: fixed; top: -5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);}
.libraryHead.fixed .shadow {box-shadow: none!important;}
.libraryHeadContainer {background: rgba(255, 255, 255, 0.10); }
.libraryMenu {display: flex; flex-wrap: wrap;}
.searchGroup {width: 300px;  border:1px solid rgba(217, 217, 217, 0.40); }

@media (min-width: 1640px) { 
    .searchGroup {
        width: 374px;       
    }
 }



.searchGroup .form-control { min-height: 50px; height: 100%; padding-left: 0; border-color: var(--white); text-transform: capitalize;border-radius: 0;}
.searchGroup .form-control:focus {outline: none; border-color: var(--white);}

.libraryMenu {border: 1px solid rgba(217, 217, 217, 0.34);}
.libraryMenu li {border-right: 1px solid rgba(217, 217, 217, 0.34); height: 100%;}
.libraryMenu li:last-child {border: 0;}
.libraryMenu a {display: block; padding: 1.5rem 2rem; font-size: 1.1rem; text-transform: capitalize; transition: all 0.3s ease-in-out;}
.libraryMenu a:hover {background: var(--blue); color: var(--white); border-radius: 9px;}

@media(max-width:991.99px){
    .searchGroup {width: 100%;}
/*    .libraryMenu li {width: 25%; text-align: center;}*/
    .libraryMenu li {margin: auto;}
    .libraryMenu a {padding: .5rem .5rem;; font-size: 1rem;}
    .libraryMenu li svg {display: table; margin: 0 auto .5rem;}

    .libraryHead.fixed {top: -9.2rem;}
}
@media(max-width:575.99px){
/*    .libraryMenu a {font-size: 0.80rem;}*/
.libraryMenu a {font-size: 0.75rem;}
}

.latestUpdate {border-radius: 100rem;  border: 1px solid #E7E7E7;
    background: var(--5, #FFF);
    box-shadow: 0px 4px 55px 0px rgba(0, 0, 0, 0.04);
    padding-right: 25px;}
.latestUpdate span {display: block; background: var(--gradient); color: var(--white); padding: .8rem 2.5rem; border-radius: 10px ; text-transform: uppercase; font-weight: 500;}
.latestUpdate marquee a {display: inline-block; white-space: nowrap; margin: 0 1rem;}

/* .librarySwiper {overflow: visible;} */

.libraryBox  {transform: scaleY(0.8); height: 0; position: relative; padding-top: 60%; transition: all 0.3s ease-in-out; z-index: -1;}
.libraryBox::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 80%); z-index: 1; transition: all 0.3s ease-in-out}
.libraryBox img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover;}
.swiper-slide-active .libraryBox {transform: scaleY(1);}
.swiper-slide-active .libraryBox::before {opacity: 0;}

.categoriesWrp {background: var(--grey);}
.cateBox {border: 1px solid rgba(255, 255, 255, 0.14); height: 100%; border-radius: 5px;
    background: rgba(239, 239, 239, 0.50); display: block; text-align: center; font-weight: 500; font-size: 1.1rem; padding:1.5rem 1rem; position: relative; z-index: 1; text-transform: capitalize}
    .cateBox:hover {color: var(--white);}
    .cateBox:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background: var(--gradient);
        z-index: -1;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease-in-out;
    }

    .cateBox:hover:before {
        transform: scaleX(1);
        transform-origin: left;
    }


    .processSwiper .swiper-slide {padding: 50px 50px 0 0; height: auto;}
    .processBox {text-align: center; height: 100%; background: var(--white);
        box-shadow: 4px 4px 55px 0px rgba(0, 0, 0, 0.05); position: relative; padding: 40px 20px  20px 20px;   margin: 20px;} 
        .processBox h2.title {margin:2rem 0; font-size: 1.5rem; font-weight: 700; color: var(--black);}
        .processBox h2.title span {font-size: 3rem;}
        .processBox .processdata p {color: #393939;}
        .processBox .processdata h5 {color: #393939; text-transform: capitalize;}

    .processTxt {background: var(--blue); color: var(--white); padding: 1rem; min-height: 150px; position: relative;}
    .processTxt:after {content: ''; position: absolute; top: 0; left: 100%; width: 50px;
        height: 100%; background: var(--blue); clip-path: polygon(0 0, 100% 50%, 0 100%, 0% 50%);
       }
    .processTxt p:last-child {margin: 0;}
    .stepIcon {display: flex; margin: 0 auto; justify-content: center; align-self: center; width: 70px; height: 70px; /*top: -50px;*/ background: var(--gradient); border-radius: 100rem; position: absolute; top: -40px; left: 0; right: 0;}
    .stepIcon img {width: 50%;}

    .libraryInput .input-group {width: 100%;border: 1px solid rgba(51, 51, 51, 0.10);}
.libraryInput .form-control {border: 1px solid rgba(51, 51, 51, 0.10);min-width: 200px;color: #393939;height: 45px;}
.libraryInput .form-control:focus {border-color: rgb(189, 185, 185);}
.state {box-shadow: rgba(141, 139, 139, 0.35) 0px 5px 15px;background: var(--white);padding: 30px;}
.state h5 {color: var(--blue);margin-bottom: 1rem;font-weight: 500;text-transform: uppercase;}
.stateList li {position: relative;}
.stateList li:not(:last-child)::after {content: '|';position: absolute;top: 0;right: 0;font-size: 1rem;}

@media(max-width:575px) {
.state{
      padding: 15px;  
      }
}

.librarySwiper  .swiper-button-next {border: 1px solid var(--white); --swiper-navigation-color: var(--white); right:4.5%;}

.librarySwiper  .swiper-button-next:hover {background: var(--white); --swiper-navigation-color: var(--blue); }

@media(min-width:991.99px){
    .libraryContainer {max-width: inherit;}
}