.breadcrumb-section{
    background-color: #000;
    padding: 30px 40px;
}
.breadcrumb-section .content-inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    color: #fff;
}

.breadcrumb-section .title h1{
    text-transform: uppercase;
    font-size: 48px;
    line-height: 1.5;
    color: rgb(255, 255, 255);
    font-family: Caudex, "Caudex Fallback";
    font-weight: 400;
    font-style: normal;
}
.breadcrumb-section .sub-title h2{
    text-transform: capitalize;
    font-size: 30px;
    line-height: 1.5;
    color: rgb(255, 255, 255);
    font-family: Caudex, "Caudex Fallback";
    font-weight: 400;
    font-style: normal;
}

/* ===============================
   Large Tablet / Small Laptop (max-width: 922px)
=================================*/
@media (max-width: 922px) {

    .breadcrumb-section {
        padding: 25px 30px;
    }

    .breadcrumb-section .title h1 {
        font-size: 40px;
    }

    .breadcrumb-section .sub-title h2 {
        font-size: 26px;
    }
}


/* ===============================
   Tablet (max-width: 768px)
=================================*/
@media (max-width: 768px) {

    .breadcrumb-section {
        padding: 20px 20px;
    }

    .breadcrumb-section .content-inner {
        text-align: center;
    }

    .breadcrumb-section .title h1 {
        font-size: 32px;
        line-height: 1.4;
    }

    .breadcrumb-section .sub-title h2 {
        font-size: 22px;
        line-height: 1.4;
    }
}


/* ===============================
   Mobile (max-width: 480px)
=================================*/
@media (max-width: 480px) {

    .breadcrumb-section {
        padding: 15px 15px;
    }

    .breadcrumb-section .title h1 {
        font-size: 24px;
    }

    .breadcrumb-section .sub-title h2 {
        font-size: 18px;
    }

}