.breadcrumb {
    padding: 10px !important;
    justify-content: flex-end;
    text-transform: capitalize
}

.disableClass {
    visibility: hidden
}

.portfolio-nav-btn {
    margin-left: 20px;
    text-decoration: none;
    color: #000;
    font-size: larger
}

.portfolio-nav-bar {
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 1rem;
    border-bottom: .2rem solid #d7d7d7
}

.portfolio-nav-bar a {
    color: #595858;
    padding-bottom: 1.2rem;
    border-bottom: .2rem solid #d7d7d7
}

div#primeagile__18214 {
    color: #000
}

#primeagile__18203,#primeagile__14502 {
    color: #000 !important
}

#pagelist>div:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr)
}

#pagelist>div:nth-child(2)>div {
    margin: 2rem auto
}

#pagelist>div:nth-child(2)>div button {
    margin: 0 4px;
    font-weight: 800
}
#pagelist>div:nth-child(2)>div button:hover {
    color: #fff;
    background: #e62a2a
}

#pagelist>div:nth-child(2)>div button.edGXoR {
    color: #fff;
    background: #c31919
}

#pagelist>div>a {
    text-decoration: none
}

#pagelist>div>a:nth-child(1) {
    grid-area: 1/1/3/3;
    color: inherit
}

#pagelist>div>a:nth-child(1)>div>div,#pagelist>div>a:nth-child(6)>div>div {
    display: grid;
    grid-template-rows: 1fr min-content min-content 8rem
}

#pagelist>div>a:nth-child(1) p,#pagelist>div>a:nth-child(6) p,#pagelist>div>a h1 {
    background: #db2020;
    color: white;
    margin-left: 1rem;
    padding: .5rem;
    width: max-content
}

#pagelist>div>a:nth-child(1)>div>div>div,#pagelist>div>a:nth-child(6)>div>div>div {
    grid-row: 1/-1;
    grid-column: 1/2;
    height: 100%;
    z-index: -1
}

#pagelist>div>a h1 {
    transition: all 1s ease-in-out
}

#pagelist>div>a p {
    transition: all .8s ease-in-out
}

#pagelist>div>a:nth-child(1) h1,#pagelist>div>a:nth-child(6) h1 {
    grid-row: 2/3;
    grid-column: 1/2;
    font-size: 1.5rem
}

#pagelist>div>a:nth-child(1) p,#pagelist>div>a:nth-child(6) p {
    grid-row: 3/4;
    grid-column: 1/2
}

#pagelist>div>a:nth-child(2) {
    display: block;
    grid-area: 1/3/2/5;
    height: 100%
}

#pagelist>div>a:nth-child(2)>div>div,#pagelist>div>a:nth-child(3)>div>div,#pagelist>div>a:nth-child(4)>div>div,#pagelist>div>a:nth-child(5)>div>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: #f7f5eb
}

#pagelist>div>a:nth-child(2)>div>div>p,#pagelist>div>a:nth-child(2)>div>div>h1,#pagelist>div>a:nth-child(3)>div>div>p,#pagelist>div>a:nth-child(3)>div>div>h1,#pagelist>div>a:nth-child(4)>div>div>p,#pagelist>div>a:nth-child(4)>div>div>h1,#pagelist>div>a:nth-child(5)>div>div>p,#pagelist>div>a:nth-child(5)>div>div>h1 {
    margin-left: 3rem
}
#pagelist>div>a:hover p,
#pagelist>div>a:hover h1 {
    transform: translateY(-0.3rem);
    transition: all 0.4s;
}
#pagelist>div>a img {
    transition: all 0.4s;
}
#pagelist>div>a:hover img {
    transform: scale(1.1);
    transition: all 0.3s;
}

#pagelist>div a>div>div>div {
    height: 49vh
}

#pagelist>div>a:nth-child(1)>div>div>div,#pagelist>div>a:nth-child(6)>div>div>div {
    height: 98vh
}

#pagelist>div>a:nth-child(2)>div>div>div,#pagelist>div>a:nth-child(4)>div>div>div {
    grid-column: 2/3;
    grid-row: 1/3
}

#pagelist>div>a:nth-child(3)>div>div>div,#pagelist>div>a:nth-child(5)>div>div>div {
    grid-row: 1/3
}

#pagelist>div>a:nth-child(2)>div>div>p,#pagelist>div>a:nth-child(3)>div>div>p,#pagelist>div>a:nth-child(4)>div>div>p,#pagelist>div>a:nth-child(5)>div>div>p {
    padding-top: 3rem;
    width: 70%;
    margin-bottom: 0;
    align-self: flex-end;
    color: #0b3046;
    font-weight: bolder
}

#pagelist>div>a:nth-child(2)>div>div>h1,#pagelist>div>a:nth-child(4)>div>div>h1 {
    font-size: 1rem;
    align-self: flex-start
}

#pagelist>div>a:nth-child(3)>div>div>h1,#pagelist>div>a:nth-child(5)>div>div>h1 {
    font-size: 1rem;
    align-self: flex-start;
    grid-column: 2/3
}

#pagelist>div>a:nth-child(3) {
    display: block;
    grid-area: 2/3/3/5
}

#pagelist>div>a:nth-child(4) {
    display: block;
    grid-area: 3/1/4/3
}

#pagelist>div>a:nth-child(5) {
    display: block;
    grid-area: 4/1/5/3
}

#pagelist>div>a:nth-child(6) {
    display: block;
    grid-area: 3/3/5/5
}

.listContainer {
    position: relative
}

#primeagile__18197 .sort-dropdown {
    position: absolute !important;
    margin-top: 25px !important;
    margin-right: 154px !important
}

.card-title {
    text-transform: capitalize;
    margin: .75rem 0
}

.card-title {
    text-transform: capitalize;
    margin: .75rem 0
}

.breadcrumb-item.active {
    color: #202123 !important
}

button#primeagile__22251 {
    margin-top: 20px
}

@media only screen and (max-width: 768px) {
    .portfolio-card {
        margin:1rem;
        padding: .3rem;
        width: 95vw;
        display: flex
    }

    #pagelist>div>a:nth-child(1) {grid-area: 1/1/3/2}
    #pagelist>div>a:nth-child(2) {grid-area: 3/1/4/2}
    #pagelist>div>a:nth-child(3) {grid-area: 4/1/5/2}
    #pagelist>div>a:nth-child(4) {grid-area: 5/1/6/2}
    #pagelist>div>a:nth-child(5) {grid-area: 6/1/7/2}
    #pagelist>div>a:nth-child(6) {grid-area: 7/1/9/2}

    #pagelist>div a>div>div>div, #pagelist>div>a:nth-child(1)>div>div>div,#pagelist>div>a:nth-child(6)>div>div>div  {
    height: 100%;
}
    
#pagelist>div>a:nth-child(1)>div>div,#pagelist>div>a:nth-child(6)>div>div {
    display: grid;
    grid-template-rows: 1fr min-content min-content 3rem;
    height: 20rem
}
    #pagelist>div>a:nth-child(2)>div>div,#pagelist>div>a:nth-child(3)>div>div,#pagelist>div>a:nth-child(4)>div>div,#pagelist>div>a:nth-child(5)>div>div {
    grid-template-columns: 50vw 1fr;
        height: 10rem;
}
     #pagelist>div a>div>div h1,  #pagelist>div a>div>div p {
         font-size: .6rem !important;
     }
    #pagelist>div>a:nth-child(2)>div>div>p,#pagelist>div>a:nth-child(2)>div>div>h1,#pagelist>div>a:nth-child(3)>div>div>p,#pagelist>div>a:nth-child(3)>div>div>h1,#pagelist>div>a:nth-child(4)>div>div>p,#pagelist>div>a:nth-child(4)>div>div>h1,#pagelist>div>a:nth-child(5)>div>div>p,#pagelist>div>a:nth-child(5)>div>div>h1 {
    margin-left: 1rem
}
    

    #primeagile__18207 {
        display: flex;
        gap: 1rem;
        padding: 0
    }

    #primeagile__18207 a {
        margin: 0
    }
}