/* Medium Layout: 1200px. */

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .header-area .header-inner .title {
        font-size: 55px;
    }
    .logo-wrapper .logo img {
        max-width: 320px;
    }
}


/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .navbar-area .navbar-collapse {
        position: absolute;
        top: 100%;
        background: #fff;
        z-index: 9;
        right: 14%;
        width: 250px;
        padding-left: 20px;
    }

    .navbar-area {
        padding: 20px;
    }

    .header-area .header-inner p {
        color: #444;
    }

    .header-area {
        border-bottom: 1px solid #ededed;
    }

    header img {
        width: 50%;
        margin-top: 32px;
    }

    .main-content-area .child-content-area {
        margin-bottom: 0px;
    }

    .main-content-area .child-content-area-img {
        margin-top: 0px;
    }

    .compact-area.area-spaced .feature-list .single-feature-list {
        width: calc(50% - 30px);
        margin: 0 15px;
        margin-bottom: 30px;
    }

    .compact-area.area-spaced {
        padding-bottom: 70px;
    }

    .feature-list .single-feature-list {
        width: calc(50% - 30px);
        border: 1px solid #ededed;
        margin: 0 15px;
        margin-bottom: 30px;
    }

    .feature-list .single-feature-list:last-child {
        border-right: 1px solid #ededed;
    }

    .feature-list {
        flex-wrap: wrap;
        border: none;
    }

    .footer-widget {
        margin-bottom: 30px;
    }

    .footer-top {
        padding-bottom: 70px;
    }

    /* new */

    .navbar-area .nav-right-content {
        display: none;
    }

    .responsive-mobile-menu {
        display: block;
        width: 100%;
        position: relative;
    }

    .responsive-mobile-menu .navbar-toggler {
        float: right;
        margin-top: 12px;
    }

    .responsive-mobile-menu .logo-wrapper {
        display: inline-block;
    }

    .navbar-area.white .nav-container .navbar-collapse .navbar-nav li a {
        color: var(--paragraph-color);
    }

    .navbar-area .navbar-collapse {
        right: 0;
    }
}

/* Tablet Layout wide: 768px. */

@media only screen and (max-width: 767px) {
    .navbar-area {
        padding: 0px 10px;
    }

    .compact-area.area-spaced .feature-list .single-feature-list {
        width: calc(50% - 30px);
        margin: 0 15px;
        margin-bottom: 30px;
    }

    .main-content-area .child-content-area {
        margin-bottom: 0px;
    }

    .main-content-area .child-content-area-img {
        margin-top: 0px;
    }

    .navbar-area .navbar-collapse {
        position: absolute;
        top: 72px;
        background: #e8f0fe;
        z-index: 9;
        right: 0;
        width: 250px;
        padding-left: 20px;
    }

    .navbar-area .container {
        position: relative;
    }
    header img {
        width: 95%;
        margin-top: 32px;
    }

    .header-area {
        border-bottom: 1px solid #e2e2e2;
    }

    .header-area .header-inner .title {
        font-size: 50px;
        line-height: 60px;
    }

    .header-area .header-inner p {
        color: #444;
    }

    .main-content-area .child-content-area .title {
        font-size: 38px;
        line-height: 48px;
    }

    .btn-wrapper .boxed-btn {
        width: 100%;
    }

    .feature-list {
        flex-wrap: wrap;
        border: none;
    }

    .feature-list .single-feature-list {
        border: 2px solid #ededed;
        margin-bottom: 30px;
    }

    .feature-list .single-feature-list:last-child {
        margin-bottom: 0;
    }

    .compact-area {
        padding-bottom: 110px;
    }

    .footer-widget {
        margin-bottom: 20px;
    }

    .about_widget .footer-logo {
        margin-bottom: 10px;
    }

    .footer-logo img {
        max-width: 280px;
    }

    .about_widget p {
        font-size: 14px;
    }

    .footer-top {
        padding-bottom: 65px;
    }

    /* new css */
    .navbar-area .nav-right-content {
        display: none;
    }

    .navbar-area .responsive-mobile-menu {
        display: block;
        width: 100%;
    }

    .navbar-area .responsive-mobile-menu .logo-wrapper {
        display: inline-block;
        padding: 8px 0px;
    }

    .navbar-area .responsive-mobile-menu .navbar-toggler {
        float: right;
        margin-top: 0px;
    }
}



/* medium tablet layout 599px */

@media only screen and (max-width: 510px) {

    .navbar-area .navbar-collapse {
        top: 72px;
        right: 0;
    }

    .header-area .header-inner .title {
        font-size: 45px;
        line-height: 55px;
    }

    .header-area .header-inner p {
        font-size: 18px;
        line-height: 30px;
    }

    .main-content-area .child-content-area .title {
        font-size: 34px;
        line-height: 44px;
    }

    .compact-area.area-spaced {
        padding-bottom: 118px;
    }

    .main-content-area .child-content-area.child-content-area-img {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .main-content-area .child-content-area {
        margin-bottom: 0px;
    }

    .compact-area.area-spaced .feature-list .single-feature-list {
        margin-bottom: 20px;
        margin-right: 20px;
        width: 100%;
        border: none;
        padding: 0 0px;
        text-align: left;
    }

    .compact-area.area-spaced .feature-list .single-feature-list:last-child {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 450px) {
    .header-area .header-inner .title {
        font-size: 40px;
        line-height: 50px;
    }

    .compact-area.area-spaced.cta-space {
        background: url(../img/right-bg-image.png) right top no-repeat, url(../img/left-bg-image.png) left bottom no-repeat;
        background-size: 90px, 90px;
        background-color: white;
    }
    .mt-60 {
        margin-top: 20px;
    }

    .main-content-area .child-content-area .title {
        font-size: 32px;
        line-height: 44px;
    }
}

/* mobile tablet layout 414px */

@media only screen and (max-width: 414px) {
    .header-area {
        padding: 120px 0 60px 0;
    }
    .parent-content-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .header-area .header-inner .title {
        font-size: 38px;
        line-height: 48px;
    }

    .header-area .header-inner .btn-wrapper .boxed-btn {
        margin: 0 5px;
        width: 320px;
    }

    .center-title {
        font-size: 35px;
        line-height: 46px;
    }

}


/* mobile tablet layout 375px */

@media only screen and (max-width: 384px) {
    .header-area .header-inner .btn-wrapper .boxed-btn {
        margin: 0 5px;
        width: 320px;
    }
    .parent-content-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .header-area .header-inner .title, .center-title {
        font-size: 35px;
        line-height: 46px;
    }

    .main-content-area .child-content-area .title {
        font-size: 29px;
        line-height: 40px;
    }
}


/* mobile tablet layout 360px */

@media only screen and (max-width: 360px) {
    .header-area .header-inner .title, .center-title {
        font-size: 32px;
        line-height: 44px;
    }
    .pt-120 {
        padding-top: 60px;
    }
    .parent-content-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .header-area .header-inner .btn-wrapper .boxed-btn {
        margin: 0px 3px;
        width: 320px;
    }

    .main-content-area .child-content-area .title {
        font-size: 27px;
        line-height: 40px;
    }

    .main-content-area .child-content-area .title {
        font-size: 28px;
        line-height: 36px;
    }
}


/* mobile tablet layout 320px */

@media only screen and (max-width: 330px) {
    .header-area .header-inner .title, .center-title {
        font-size: 32px;
        line-height: 40px;
    }
    .pt-120 {
        padding-top: 60px;
    }
    .parent-content-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .logo-wrapper .logo img {
        max-width: 200px;
    }

    .header-area.sure-style .header-inner p {
        font-size: 16px;
        line-height: 24px;
    }

    .header-area .header-inner p {
        font-size: 16px;
        line-height: 26px;
    }

    .header-area .header-inner .btn-wrapper .boxed-btn {
        margin: 0px 0px;
        width: 280px;
        font-size: 18px;
    }

    .main-content-area .child-content-area .title {
        font-size: 25px;
        line-height: 35px;
    }
}