/*
====================================
large Screen - Others
====================================
*/
@media screen and (min-width: 1921px){
    .helping-area {
        position: relative;
        background-image: none;
        padding: 0;
        margin-top: -14% 0 0 0;
    }
    .relative-content-header{
        position: absolute;
        top: 25%;
        left: 15%;
    }
    .header-image{
        width: 100%;
        display: block;
    }
}
@media screen and (min-width: 1201px) and (max-width: 1400px) {
    /*=== helping area start ===*/
    .helping-area {
        background-size: cover;
        margin-top: -300px;
        background-position: 90% 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    /*=== banner area start ===*/
    .carousel-cell.is-selected .banner-item2 img {
        max-width: 260px;
    }
    /*=== helping area start ===*/
    .helping-area {
        background-size: cover;
        margin-top: -300px;
        background-position: 90% 0;
    }
    /*=== subscribe area start ===*/
    .subscribe-item-inner {
        width: calc(100% - 600px);
    }
    .subscribe-item-inner h2 {
        font-size: 55px;
    }
    .subscribe-item-inner2 {
        width: 600px;
    }
    .subscribe-item-inner2 form div {
        width: calc(100% - 220px);
    }
    .subscribe-item-inner2 form button {
        width: 220px;
    }
    .subscribe-item-inner2 img {
        display: none;
    }
}
/*
====================================
Small Screen - Tablet
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .header-area {
        padding: 35px 0 30px;
    }
    .header-item-inner2 ul li a {
        margin-left: 10px;
    }
    /*=== banner area start ===*/
    .main-carousel {
        padding: 0 80px;
    }
    .carousel-cell {
        padding: 0 20px;
    }
    .carousel-cell.is-selected .banner-item2 img {
        max-width: 200px;
    }
    /*=== helping area start ===*/
    .helping-area {
        background-size: cover;
        margin-top: -300px;
        background-position: 90% 0;
    }
    .helping-item h2 {
        font-size: 36px;
    }
    /*=== island area start ===*/
    .island-item2 h2 {
        font-size: 42px;
        margin: 0 0 35px;
    }
    /*=== subscribe area start ===*/
    .subscribe-item-inner {
        width: 100%;
        margin-bottom: 20px;
    }
    .subscribe-item-inner h2 {
        font-size: 42px;
    }
    .subscribe-item-inner h2 small {
        font-size: 26px;
    }
    .subscribe-item-inner h2 span {
        font-size: 27px;
    }
    .subscribe-item-inner2 {
        width: 100%;
    }
    .subscribe-item-inner2 form div input {
        font-size: 21px;
        height: 60px;
    }
    .subscribe-item-inner2 form button {
        font-size: 21px;
        height: 60px;
    }
    .subscribe-item-inner2 img {
        display: none;
    }
    /*=== footer area start ===*/
    .footer-item ul li a {
        font-size: 15px;
        margin: 0 10px;
    }
}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (max-width: 767px) {
    .header-area {
        padding: 25px 0 20px;
    }
    .header-item {
        flex-direction: column;
    }
    .header-item-inner img {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .header-item-inner2 ul li a {
        margin: 0 5px;
    }
    /*=== banner area start ===*/
    .banner-area-inner {
        padding: 170px 0 200px;
        margin-top: -150px;
        background-size: cover;
    }
    .banner-item2 img {
        max-width: 200px;
    }
    .main-carousel {
        padding: 0 60px;
        max-width: 500px;
    }
    .carousel-cell {
        padding: 0 0px;
        width: 100%;
    }
    .carousel-cell.is-selected .banner-item2 img {
        max-width: 200px;
    }
    .banner-item2-inner {
        height: 100%;
        margin-bottom: 20px;
    }
    .flickity-prev-next-button {
        top: 70px;
        width: 44px;
        height: 51px;
        margin: 0 20px 0;
    }
    .banner-item3 {
        margin: 40px auto 40px;
    }
    /*=== helping area start ===*/
    .helping-area {
        background-size: cover;
        padding: 170px 0 100px;
        margin-top: -220px;
        background-position: 100% 0;
        background-color: rgb(0, 0, 0 .2);
    }
    .helping-item h2 {
        font-size: 32px;
    }
    /*=== island area start ===*/
    .island-item2 h2 {
        font-size: 32px;
        margin: 30px 0 25px;
    }
    .island-area{
        padding: 40px 0 40px;
    }
    /*=== image area start ===*/
    .image-area-inner {
        padding: 40px 0;
    }
    /*=== subscribe area start ===*/
    .subscribe-item-inner {
        width: 100%;
        margin-bottom: 20px;
    }
    .subscribe-item-inner h2 {
        display: block;
    }
    .subscribe-item-inner h2 small {
        font-size: 20px;
    }
    .subscribe-item-inner h2 span {
        font-size: 21px;
    }
    .subscribe-item-inner2 {
        width: 100%;
    }
    .subscribe-item-inner2 form div {
        width: 100%;
        margin-bottom: 15px;
        padding: 0;
    }
    .subscribe-item-inner2 form div input {
        font-size: 20px;
        height: 55px;
    }
    .subscribe-item-inner2 form button {
        width: 100%;
        font-size: 20px;
        height: 55px;
    }
    .subscribe-item-inner2 img {
        display: none;
    }
    /*=== contact area start ===*/
    .contact-item h2 {
        margin: 0 0 25px;
    }
    .contact-item input,
    .contact-item textarea,
    .contact-item button {
        font-size: 21px;
        height: 55px;
    }
    .contact-item textarea {
        height: 120px;
    }
    /*=== footer area start ===*/
    .footer-item {
        flex-direction: column-reverse;
    }
    .footer-item div {
        margin: 0 auto 20px;
    }
    .footer-item ul {
        margin: 0 auto;
        flex-direction: column;
    }
    .footer-item ul li a {
        margin: 0 0 15px;
    }
}