@media screen and (min-width:1440px) {
    .un-sec::after {
        right: 50px
    }
    #usa-un-sec.un-sec::after {
        right: 50px
    }
}

@media screen and (min-width:1366px) and (max-width:1439px) {
    .ban-desc {
        position: absolute;
        top: 114px;
        width: 500px;
        left: 200px
    }
    footer::before {
        content: "";
        position: absolute;
        background-image: url(../img/footer-bg.png);
        background-repeat: no-repeat;
        height: 294px;
        width: 280px;
        background-size: 100%;
        right: 15px;
        top: 0
    }
}

@media screen and (min-width:1280px) and (max-width:1365px) {}

@media screen and (min-width:1025px) and (max-width:1279px) {
    .ban-btn-blk a {
        margin: 0 0 0 18px;
        padding: 9px 14px;
        font-weight: 500;
        font-size: 16px
    }
    .ban-btn-blk {
        top: -15px
    }
    .brn-blk p {
        font-size: 14px;
        margin: 0 0 8px
    }
    .act-in-blk h4,
    .act-in-blk-mid h4 {
        font-size: 20px
    }
    .four-b::after {
        width: 218px
    }
    .un-sec::after {
        height: 284px;
        width: 222px;
        bottom: 0;
        right: 0
    }
    .seven-b::after {
        width: 48px;
        right: 25px
    }
    .one-b::after {
        height: 137px;
        width: 220px;
        top: -51px;
        right: -4px
    }
    .bsb-ex-desc p {
        height: 139px;
        line-height: 22px
    }
    footer::before {
        height: 193px;
        width: 180px;
        right: 20px;
        top: 0
    }
}

@media screen and (min-width:992px) and (max-width:1024px) {
    footer::before {
        height: 195px;
        width: 182px
    }
    .volunt-sect input {
        width: 230px!important
    }
    .ban-btn-blk {
        top: -12px;
        left: 319px
    }
    .btn-btn .col-md-12 {
        max-width: 370px
    }
    .ban-btn-blk a {
        margin: 0 0 0 18px;
        padding: 8px 19px;
        font-weight: 500;
        font-size: 16px
    }
    #usa-un-sec .one-b::after {
        height: 104px;
        width: 109px;
        position: absolute;
        top: -51px;
        right: 126px
    }
    #usa-un-sec .four-b::after {
        width: 208px;
        height: 62px
    }
    #usa-un-sec.un-sec::after {
        height: 208px;
        width: 192px
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .act-in-blk {
        padding: 70px 15px 20px
    }
    #usa-un-sec.un-sec::after {
        height: 197px;
        width: 182px;
        bottom: 0;
        right: 0
    }
    .orange::before,
    .red::before,
    .violet::before {
        height: 115px;
        width: 115px;
        top: -62px;
        left: -5px
    }
    .w-b-p {
        margin: 60px 0 0
    }
    .w-b-p p {
        font-size: .7rem;
        line-height: 15px
    }
    .w-b-p {
        padding: 70px 25px 15px
    }
    .four-b::after {
        height: 112px;
        width: 108px;
        top: -52px;
        right: 0
    }
    .one-b::after {
        height: 307px;
        width: 59px;
        top: -51px;
        right: 110px
    }
    .un-sec::after {
        height: 234px;
        width: 182px;
        bottom: 0;
        right: 0
    }
    .seven-b::after {
        width: 47px
    }
    .volunt-sect input {
        width: 210px!important
    }
    .bsb-ex-desc p {
        padding: 20px 30px;
        font-size: 14px;
        height: 129px;
        line-height: 16px
    }
    .volunt-sect .custom-control {
        padding: 0 30px
    }
    .ft-mb br {
        display: none
    }
    .bsb-ex-img img {
        width: 30px;
        margin: 0 0 0
    }
    .act-in-blk p {
        font-size: 13px
    }
    .act-in-blk-mid {
        padding: 30px 15px 18px
    }
    .act-in-blk h4,
    .act-in-blk-mid h4 {
        font-size: 18px
    }
    .brn-blk button {
        padding: 1px 6px;
        top: 15px;
        font-size: 10px
    }
    .why-d-blk::before {
        height: 256px;
        width: 118px;
        top: -53px;
        left: -140px
    }
    .why-d-blk::after {
        height: 159px;
        width: 140px;
        top: 19px;
        left: -194px
    }
    .brn-blk p {
        font-size: 13px;
        margin: 0 0 8px
    }
    .brn-blk a {
        color: #000;
        font-size: 13px
    }
    p.i-c-p {
        font-size: 13px;
        line-height: 18px
    }
    .c-p,
    .i-c-p {
        padding: 0
    }
    .navbar-brand img {
        width: 135px
    }
    .sustain-navbar .navbar-nav li a {
        margin: 0 0 0 5px;
        font-size: 13px
    }
    .sas-tit {
        font-size: 30px;
        line-height: 40px
    }
    .partner-sec .pb-blk img {
        width: 70px
    }
    footer::before {
        height: 148px;
        width: 152px;
        background-size: 56%;
        z-index: 9;
        right: 6px;
        top: 0;
        background-position: right 0;
        bottom: 0
    }
    .ban-btn-blk a {
        margin: 0 0 0 18px;
        padding: 12px 18px;
        font-weight: 500;
        font-size: 14px
    }
    .ban-btn-blk {
        top: -17px;
        left: 289px
    }
    .btn-btn .col-md-12 {
        max-width: 370px
    }
    .address-blk-list li a {
        color: #fff;
        text-decoration: none;
        font-size: 11px;
        margin: 0 0 10px;
        display: inline-block
    }
    .partner-sec img {
        width: 80px!important
    }
    footer {
        padding: 40px 0
    }
}

@media screen and (max-width:767px) {
    .banner-section {
        display: none
    }
    .home-banner-blk img {
        width: 100%
    }
    .mb-banner-inner {
        padding: 40px 0
    }
    .mb-banner-inner ul {
        display: block;
        width: 55%;
        padding: 0 0 0 100px;
        float: left
    }
    .btn-blk {
        width: 40%;
        float: left;
        padding: 0 15px;
        margin: 148px 0 0
    }
    .mb-banner-inner ul li {
        margin: 0 0 12px;
        position: relative;
        font-size: 12px;
        line-height: 16px
    }
    .mb-banner-inner ul li.one::before {
        content: "";
        background: url(../img/banner/s-1.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 31px;
        width: 25px;
        position: absolute;
        top: 0;
        left: -43px
    }
    .mb-banner-inner ul li.one::after {
        content: "";
        background: url(../img/banner/top-li.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 106px;
        width: 18px;
        position: absolute;
        top: -84px;
        left: -77px;
    }
    .mb-banner-inner ul li.two::before {
        content: "";
        background: url(../img/banner/s-2.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 29px;
        width: 29px;
        position: absolute;
        top: 0;
        left: -45px
    }
    .mb-banner-inner ul li.two::after {
        content: "";
        background: url(../img/banner/sm-li.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 10px;
        width: 3px;
        position: absolute;
        top: -32px;
        left: -32px
    }
    .mb-banner-inner ul li.three::before {
        content: "";
        background: url(../img/banner/s-3.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 20px;
        width: 28px;
        position: absolute;
        top: 9px;
        left: -45px
    }
    .mb-banner-inner ul li.three::after {
        content: "";
        background: url(../img/banner/sm-li.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 10px;
        width: 3px;
        position: absolute;
        top: -19px;
        left: -32px
    }
    .btn-blk a {
        font-size: 10px!important;
        padding: 4px 2px!important;
        margin: 0 0 10px
    }
    header {
        padding: 0;
    }
    .navbar {
        padding: .5rem 1rem !important;
    }
    .fixed-header {
        padding: 5px 0;
    }
    #navbarResponsive {
        position: absolute;
        background: #fff;
        width: 100%;
        top: 71px;
        z-index: 9;
        left: 0;
        padding: 15px
    }
    .volunt-sect input {
        width: 100%!important;
        margin: 0 0 15px!important
    }
    .btn-green {
        width: 100%
    }
    .ham-icon {
        color: #000;
        font-size: 24px;
        position: relative;
        top: -6px
    }
    .navbar-brand img {
        width: 200px
    }
    .sustain-navbar .navbar-nav li a:hover,
    .sustain-navbar .navbar-nav li a:focus {
        background: #6faa43;
        color: #fff
    }
    .sustain-navbar .navbar-nav li a.active {
        background: #6faa43;
        color: #fff
    }
    .sustain-navbar .navbar-nav li a {
        color: #fff
    }
    .sustain-navbar .navbar-nav li:first-child a {
        margin: 0
    }
    .sustain-navbar .navbar-nav li a {
        text-transform: uppercase;
        padding: 10px!important;
        margin: 5px 0 0
    }
    .fixed-header .navbar-nav li a {
        background-color: #6faa43
    }
    .sas-tit {
        font-size: 16px !important;
        line-height: 24px
    }
    .m-sas-tit {
        font-size: 24px !important;
        line-height: 30px;
    }
    .ss-sec, .multi-sec {
        padding: 40px 0 0px;
    }
    .ss-sec .mt-5 {
        margin-top: 0 !important;
    }
    .volunt-sect {
        height: auto
    }
    footer::before {
        background-size: 100%;
        z-index: 9;
        right: 20px;
        top: 0;
        width: 70px;
        height: 88px
    }
    .ft-menu {
        margin: 20px 0 0
    }
    .banner-section {
        display: none
    }
    header {
        position: inherit
    }
    .one-b::after,
    .four-b::after,
    .un-sec::after,
    .seven-b::after {
        display: none
    }
    .bsb-img {
        position: relative;
        margin: 0 0 12px
    }
    .w-b-p p {
        text-align: left
    }
    .w-b-p {
        padding: 20px 20px 20px 80px;
        margin: 80px 0 0;
        height: auto;
        border-bottom-left-radius: 0;
        border-top-left-radius: 150px
    }
    .orange::before,
    .red::before,
    .violet::before {
        height: 75px;
        width: 74px;
        top: inherit;
        left: -4px;
        bottom: -22px
    }
    .act-in-blk {
        margin: 0 0 15px
    }
    .act-in-blk-mid {
        padding: 15px
    }
    .tra-section sup {
        font-size: 9px;
        top: -6px
    }
    .un-sec h6 {
        font-size: 16px;
        margin: 0 0 30px
    }
    .bcj-blk {
        margin: 0 0 22px
    }
    .partner-sec img {
        width: 60px!important
    }
    .volunt-sect p {
        font-size: 13px;
        line-height: 16px;
        margin: 0 0 18px!important
    }
    .volunt-sect p br {
        display: none
    }
    .ft-mb {
        display: none
    }
    footer {
        padding: 10px 0
    }
    .owl-next span {
        right: -13px
    }
    .owl-prev span {
        left: -8px
    }
    .social-links li {
        display: inline-block
    }
    .un-sec h3 br {
        display: none
    }
    .why-d-blk h2 {
        text-align: center
    }
    .un-sec h2 {
        font-size: 16px !important;
        margin: 0 0 30px;
    }
    .volunt-sect h2 {
        font-size: 13px;
        line-height: 16px;
        margin: 0 0 18px !important;
    }
    .volunt-sect h2 br {
        display: none;
    }
    .tra-p {
        font-size: 14px
    }
    .tra-p br {
        display: none
    }
    .act-in-blk {
        padding: 50px 15px 20px
    }
    .act-section .btn-green,
    .un-sec .btn,
    .btn-green {
        font-size: 14px!important
    }
    .bsb-ex-desc p {
        font-size: 14px;
        height: auto;
        line-height: 20px
    }
    .volunt-sect .custom-control {
        padding: 0 20px
    }
    .w-b-p {
        margin: 44px 0 0
    }
    .bs-bock .bs-p br,
    .tra-p br {
        display: none
    }
    .banner-section_mb {
        display: block;
        width: 100%;
        float: left;
    }
    .flag-list {
        margin: 10px 0 0
    }
    .flags {
        justify-content: flex-start;
        width: 100%;
        padding: 8px 12px!important
    }
    .sustain-navbar .flag-list .dropdown-item {
        padding: 9px 12px!important
    }
    .flag-list .dropdown-divider {
        margin: 0
    }
    .flag-list .dropdown-menu {
        padding: 0
    }
    .bwf {
        background: 0 0;
        padding: 40px 0;
        height: auto;
    }
    #m-bwf {
        display: block !important;
        height: auto;
    }
    .bwf .banner-form {
        max-width: 100%;
        flex: 0 0 100%;
        margin-left: 0;
        margin-top: 0;
        padding: 0;
    }
    .hiw-blk {
        height: auto;
        margin: 0 0 40px;
    }
    .sc-blk {
        margin: 48px 0 0;
        text-align: center;
    }
    .r-line::after, .r-line::before, .l-line::after, .l-line::before {
        display: none;
    }
    .bg-yellow::after {
        display: none;
    }
    .r-two {
        padding-left: 0;
    }
    .ss-blk {
        margin: 0 0 40px;
    }
    .ss-blk h4 {
        font-size: 20px;
        color: #424143;
    }
    .r-align {
        align-items: center;
    }
    .sc-img-circle {
    width: 80px;
    display: inline-flex;
    margin: 0 0 25px;
}
}

@media screen and (min-width:320px) and (max-width:359px) {
    .why-d-blk::before {
        height: 37px;
        width: 30px;
        top: -8px;
        left: 18px
    }
    .why-d-blk::after {
        height: 60px;
        width: 44px;
        top: 9px;
        left: -3px
    }
}

@media screen and (min-width:360px) and (max-width:400px) {
    .why-d-blk::before {
        height: 37px;
        width: 30px;
        top: -8px;
        left: 38px
    }
    .why-d-blk::after {
        height: 60px;
        width: 44px;
        top: 9px;
        left: 8px
    }
    .mb-banner-inner ul li.one::after {
        left: -73px
    }
    .mb-banner-inner ul li.two::after {
        top: -23px
    }
    .mb-banner-inner ul li.three::after {
        top: -12px
    }
    .btn-blk {
        margin: 99px 0 0
    }
}

@media screen and (min-width:401px) and (max-width:767px) {
    .why-d-blk::before {
        height: 37px;
        width: 30px;
        top: -8px;
        left: 68px
    }
    .why-d-blk::after {
        height: 60px;
        width: 44px;
        top: 9px;
        left: 38px
    }
    .mb-banner-inner ul li.one::after {
        left: -67px
    }
    .mb-banner-inner ul li.two::after {
        top: -15px
    }
    .mb-banner-inner ul li.three::after {
        top: -9px
    }
    .btn-blk {
        margin: 50px 0 0
    }
}