/*------------------------------------*\
         Media Queries
\*------------------------------------*/



@media (max-width:1300px) {
    p {
        font-size: 18px;
        line-height: 28px;
    }
    .nav-list li a {
        font-size: 16px;
    }
    .banner-txt h1 {
        font-size: 80px;
    }
}

@media (max-width:1200px) {

    .logo,
    .banner-txt {
        width: 42%;
    }
    .banner-txt {
        padding-left: 35px;
    }
    .banner-txt h1 {
        line-height: 100px;
    }
    .areaOperation-grid-text,
    .areaOperationThumb {
        max-width: 400px;
    }
}

@media (max-width:1100px) {

    .logo,
    .banner-txt {
        width: 42%;
    }
    .banner-txt {
        padding-left: 35px;
    }
    .banner-txt h1 {
        line-height: 100px;
        font-size: 60px;
    }
    .nav-list li {
        padding: 11px 2px;
    }
    .nav-list li a {
        font-size: 15px;
    }
    .logo {
        min-height: 90px;
    }
    .logo,
    .banner-txt {
        width: 38%;
    }
    .constableTeam {
        padding: 100px 0
    }
    .mediaDtail {
        padding: 100px 0 0px 0;
    }
}


@media (max-width:991px) {
    h2 {
        font-size: 42px;
        line-height: 50px;
    }
    .nav-list li a {
        font-size: 12px;
    }
    .banner-txt {
        padding: 0px 0 0 30px;
    }
    .banner-txt h1 {
        font-size: 46px;
        line-height: 60px;
        padding: 25px 0;
    }
    .logo {
        padding: 0 10px 0 0;
        min-height: 70px;
    }
    .banner-txt {
        padding: 10px;
    }
    .featured-img {
        margin-left: 15px;
        margin-top: 25px;
    }
    .roleGrid {
        flex-wrap: wrap;
        max-width: 500px;
    }
    .role-grid-text {
        margin-top: 50px;
    }
    .areaOperation {
        flex-wrap: wrap;
        max-width: 500px;
        margin: auto;
    }
    .areaOperation-grid-text,
    .areaOperationThumb {
        margin-top: 120px;
    }

}

@media (max-width:767px) {
    h2 {
        font-size: 36px;
        line-height: 40px;
    }
    h3 {
        font-size: 30px;
        line-height: 36px;
    }
    p {
        font-size: 15px;
        line-height: 24px;
    }
    header {
        background: #0D2B54;
    }
    .headerWrapper,
    .featured-banner {
        flex-wrap: wrap;
    }
    .logo {
        width: 100%;
    }
    .logo img {
        max-width: 250px;
    }
    .logo::before,
    .banner-txt::before {
        display: none;
    }
    .featured .container {
        padding: 0;
    }
    .banner-txt {
        padding: 50px;
        width: 100%;
    }
    .featured-img {
        margin: 0;
        flex: auto;
    }
    .banner-txt h1 {
        padding: 0 0 10px 0;
    }
    .ourRole {
        padding: 50px 0;
    }
    .roleGrid {
        padding: 30px 0;
    }
    .constableTeam {
        padding: 50px 0;
    }
    .teamDetail {
        margin-top: 50px;
    }
    .teamThumb img {
        width: 100%;
    }

}

@media (max-width:575px) {

    .roleThumb {
        max-width: 280px;
    }
    .roleNumber {
        font-size: 150px;
        left: -40px;
        top: -80px;
    }
    .rightGrid .roleNumber {
        right: -40px;
    }
    .role-grid-text p {
        max-width: 300px;
    }
    .areaOperation-grid-text p {
        max-width: 320px;
    }
    .areaOperationThumb {
        max-width: 250px;
    }
    .areaOperationImg::after {
        top: -22px;
    }
    .footer-logo img {
        max-width: 100%;
    }
    .roleImg img {
        height: 280px;
    }

}