/* min width 320 */
@media screen and (min-width: 320px) {
    h1 {
      font-size: calc(32px + 18 * ((100vw - 320px) / 880));
    }
    h2 {
        font-size: calc(30px + 10 * ((100vw - 320px) / 880));
    }
    h3 {
        font-size: calc(18px + 10 * ((100vw - 320px) / 880));
    }
  }
/* min width 576 */
@media screen and (min-width: 576px) {
    .nice-select {
        width: 270px;
        height: 50px;
    }
    .font-sm-60 {
        font-size: 60px;
    }
    .mt-sm-0 {
        margin-top: 0px;
    }
    .owl-dots {
        bottom: 0;
        left: 50%;
        position: absolute;
        text-align: center;
        transform: translateX(-50%);
        position: relative;
    }
    .owl-dots button {
        position: relative;
        width: 150px;
        height: 5px;
        display: inline-block;
        background: #e2d5fd !important;
        border: 1px solid transparent !important;
        border-radius: none;
        margin-left: 0px;
    }
    .owl-dots button.active {
        width: 150px;
        height: 5px;
        background: #925afa !important;
        border: 1px solid transparent !important;
    }
    .owl-dots button:focus {
        outline: none;
    }
    .container {
        max-width: 540px;
    }
    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .banner .banner-shap {
        display: block;
    }
    .banner-area-2 .banner-content {
        margin-top: 50px;
    }
    .testimonial-area .testimonial-numder-left {
        transform: translateX(-150px);
    }
    .testimonial-area .testimonial-numder-right {
        transform: translateX(150px);
    }
    .blog-single-page .post-control .post-shier h4 {
        font-size: 18px;
    }
    .blog-single-page .post-control .social-link ul li a {
        margin-right: 10px;
    }
    .blog-single-page .comments .comment {
        padding-left: 30px;
        padding-top: 15px;
    }
    .blog-single-page .comments .comment-child {
        margin-left: 80px;
    }
    .blog-single-page .comments .comment-body .comment-avater {
        width: auto;
    }
}

/* min width 768 */
@media (min-width: 768px) {
    .section-title-center h2 {
        margin-top: -11px;
    }
    .d-md-flex {
      display: flex !important;
    }
    .font-md-40 {
        font-size: 40px;
    }
    .font-md-60 {
        font-size: 60px;
    }
    .mt-md-0 {
        margin-top: 0px;
    }
    .mt-md-30 {
        margin-top: 30px;
    }
    .mt-md-60 {
        margin-top: 60px;
    }
    .mt-md-130 {
        margin-top: 130px;
    }
    .mt-md-150 {
        margin-top: 150px;
    }
    .pl-md-0 {
        padding-left: 0px !important;
    }
    .pl-md-30 {
        padding-left: 30px !important;
    }
    .pl-md-80 {
        padding-left: 80px !important;
    }
    .pl-md-100 {
        padding-left: 100px !important;
    }
    .p-md-50 {
        padding: 50px !important;
    }
    .p-md-40 {
        padding: 40px !important;
    }
    .pt-md-0 {
        padding-top: 0px !important;
    }
    .pt-md-100 {
        padding-top: 100px !important;
    }
    .pb-md-100 {
        padding-bottom: 100px !important;
    }
    .text-md-left {
        text-align: left;
    }
    .text-md-right {
        text-align: right;
    }
    .container {
        max-width: 720px;
    }
    .col-md-2 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-md-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .col-md-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%;
    }
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-md-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%;
    }
    .col-md-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .banner-area {
        height: 100vh;
    }
    .banner-area .banner-content {
        height: 100vh;
        text-align: left;
    }
    .banner-area .banner-content p {
        width: 65%;
    }
    .banner-area .video-icon {
        margin-left: 0;
    }
    .banner-area .banner-form {
        height: 100vh;
    }
    .banner-area-2 {
        height: 100vh;
    }
    .banner-area-2 .banner-content {
        margin-top: 0;
        padding-bottom: 0;
    }
    .banner-area-2 .banner-video {
        height: 100vh;
    }
    .banner-area-2 .video-icon {
        margin-left: auto;
    }
    .page-banner .banner-content {
        margin-top: 0;
    }
    .business-area .business-content h2 {
        margin-top: -12px;
    }
    .pta-area .pta-check .pta-box h3 {
        text-align: left;
        width: 90%;
    }
    .pta-area .pta-check .pta-btn {
        text-align: right;
    }
    .pta-area-3 .pta-box h3 {
        line-height: 1.5 !important;
        margin-top: -13px !important;
    }
    .video-area .video-content h2 {
        margin-top: -11px;
    }
    .video-area .video-icon {
        height: 100%;
    }
    .video-area .video-icon a {
        width: 70px;
        height: 70px;
    }
    .video-area .video-icon a img {
        width: 25px;
    }
    .process-area .process-content h2 {
        margin-top: -11px;
    }
    .testimonial-area .testimonial-content p {
        width: 60%;
    }
    .count-area .section-title-center h2 {
        margin-top: -11px;
    }
    .contact-area .contact-form h2 {
        margin-top: -11px;
    }
    .about-page .about-content h2 {
        margin-top: -11px;
    }
    .service-page.service-area .section-title-center {
        width: 55%;
    }
    .service-page.manager-area .manager-content h2 {
        margin-top: -11px;
    }
    .cases-page .cases-content {
        padding: 40px;
    }
    .price-page.price-area .price-control-btn {
        text-align: left;
    }
    .portfolio-single-page.banner-area {
        height: 100vh;
    }
    .portfolio-single-page.banner-area .banner-content span {
        margin-left: 0;
    }
    .portfolio-single-page.pta-area-4 .pta-socile {
        text-align: right;
        margin-bottom: 0px;
    }
    .portfolio-page.image-slide .section-title-center h2 {
        width: 60%;
    }
    .blog-page.banner-area {
        height: 400px;
    }
    .blog-page.banner-area .banner-content {
        height: 400px;
        padding-top: 60px;
    }
    .blog-single-page .blog-single-post .post-tag {
        padding-top: 0;
        padding-left: 30px;
    }
    .blog-single-page .blog-single-post-pre {
        height: 322px;
        display: flex;
    }
    .blog-single-page .blog-single-post-pre .content {
        width: 60%;
    }
    .blog-single-page .blog-single-post-pre .img {
        top: 0;
        right: 0;
        position: absolute;
    }
    .blog-single-page .post-control .social-link {
        margin-top: -5px;
    }
    .contact-page .contact-form {
        padding: 50px 40px;
    }
    .footer-subscribe {
        width: 48%;
    }
}

/* min width 992 */
@media screen and (min-width: 992px) {
    .section-padding {
      padding-top: 70px !important;
      padding-bottom: 70px !important;
    }
    .d-lg-block {
        display: block !important;
    }
    .d-lg-flex {
        display: flex !important;
    }
    .font-lg-40 {
        font-size: 40px;
    }
    .font-lg-60 {
        font-size: 60px;
    }
    .mt-lg-0 {
        margin-top: 0px;
    }
    .px-lg-40 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .py-lg-100 {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
    .pl-lg-0 {
        padding-left: 0px !important;
    }
    .pl-lg-30 {
        padding-left: 30px !important;
    }
    .pl-lg-50 {
        padding-left: 50px !important;
    }
    .pl-lg-80 {
        padding-left: 80px !important;
    }
    .pl-lg-100 {
        padding-left: 100px !important;
    }
    .p-lg-50 {
        padding: 50px !important;
    }
    .pt-lg-70 {
        padding-top: 70px !important;
    }
    .pt-lg-80 {
        padding-top: 80px !important;
    }
    .pb-lg-70 {
        padding-bottom: 70px !important;
    }
    .menu li ul {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        width: 200px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px 0;
        transition: 0.3s;
        top: 100px;
    }
    .menu li ul li {
        display: block;
    }
    .menu li ul li a {
        color: #000000;
        text-align: left;
        padding: 10px 20px;
        font-weight: 500;
    }
    .menu li ul li a:hover {
        color: #925afa;
        background-color: #efedf3;
    }
    .menu-2 li ul {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        width: 200px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px 0;
        transition: 0.3s;
        top: 100px;
    }
    .menu-2 li ul li {
        display: block;
    }
    .menu-2 li ul li a {
        color: #000000;
    }
    .container {
        max-width: 960px;
    }
    .col-lg-2 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-lg-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .col-lg-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%;
    }
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%;
    }
    .col-lg-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .page-banner-2 .banner-content {
        margin-top: 15px;
    }
    .business-area .business-content {
        padding-right: 50px;
    }
    .skill-area .skill-img {
        width: 94%;
        position: relative;
        top: 30px;
        left: 30px;
        margin-bottom: 30px;
    }
    .skill-area .skill-img::after {
        display: block;
    }
    .skill-area .skill-content h2 {
        margin-top: -12px;
    }
    .skill-area-2 .skill-box {
        text-align: left;
    }
    .skill-area-2 .skill-icon {
        margin: unset;
    }
    .creative-area .creative-img {
        margin-top: -135px;
    }
    .manager-area .manager-img {
        width: 94%;
    }
    .pta-area-3 .pta-box h3 {
        width: 65% !important;
        line-height: 48px !important;
        text-align: left !important;
    }
    .video-area .video-content p {
        width: 85%;
    }
    .testimonial-area .testiomnial-shap-left {
        display: block;
    }
    .testimonial-area .testiomnial-shap-right {
        display: block;
    }
    .count-area .section-title-center h2 {
        width: 50%;
    }
    .service-page-2.pta-area-3 .pta-box h3 {
        width: 70% !important;
    }
    .cases-page .cases-content {
        padding: 80px 40px 80px 0px;
        margin-left: -5px;
    }
    .price-banner.banner-area .banner-content {
        padding-top: 65px;
    }
    .portfolio-single-page.banner-area .banner-content {
        width: 50%;
        margin-top: 50px;
    }
    .blog-single-page .blog-single-post .social-link {
        margin-left: auto;
        padding-top: 0;
        align-self: flex-end;
    }
    .blog-single-page .blog-single-post-pre .content {
        width: 65%;
    }
    .blog-single-page .post-control .social-link {
        margin-left: 40px;
        margin-top: -5px;
    }
    .blog-single-page .recent-post {
        width: 50%;
    }
    .sidebar .archive-post {
        width: 80%;
    }
    .sidebar .social {
        width: 90%;
    }
    .footer-area-2 .footer-subscribe {
        width: 80%;
    }
}

/* min width 1200 */
@media screen and (min-width: 1200px) {
    h1 {
        font-size: 50px;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 28px;
    }
    .section-padding {
      padding-top: 100px !important;
      padding-bottom: 100px !important;
    }
    .mt-xl-40 {
        margin-top: 40px;
    }
    .px-xl-60 {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    .py-xl-100 {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
    .pl-xl-100 {
        padding-left: 100px !important;
    }
    .pt-xl-100 {
        padding-top: 100px !important;
    }
    .pb-xl-100 {
        padding-bottom: 100px !important;
    }
    .container {
        max-width: 1200px;
    }
    .col-xl-2 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xl-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xl-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%;
    }
    .col-xl-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .col-xl-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%;
    }
    .offset-xl-2 {
        margin-left: 16.6666666667%;
    }
    .page-banner-2 {
        height: 500px;
    }
    .business-area .business-content {
        padding-right: 100px;
    }
    .skill-area .skill-shap-left {
        display: block;
    }
    .creative-area .creative-img {
        margin-top: 30px;
        outline: 10px solid #f3eff7;
    }
    .creative-area .creative-img {
        margin-top: -150px;
    }
    .creative-area .creative-img::after {
        display: block;
    }
    .video-area .video-icon a {
        width: 100px;
        height: 100px;
    }
    .contact-area .contact-news {
        margin-left: 60px;
    }
    .service-page.service-area-2 .service-shap-left {
        display: block;
    }
    .service-page.service-area-2 .service-shap-right {
        display: block;
    }
    .service-page-2.service-cloud .service-box {
        padding: 40px 20px 40px 50px !important;
    }
    .cases-page .cases-box:not(:first-child) {
        margin-top: 95px;
    }
    .cases-page .cases-box:last-child {
        margin-bottom: 40px;
    }
    .cases-page .cases-img {
        transform: scale(1.15);
        margin-left: 85px;
    }
    .cases-page .cases-img img {
        width: auto;
    }
    .portfolio-single-page.banner-area .banner-content {
        width: 50%;
    }
    .portfolio-single-page .portfolio-single-details .portfolio-img::after {
        display: block;
    }
    .blog-page .blog-content {
        margin-top: -8px;
    }
    .blog-single-page .blog-single-post-pre .content {
        width: 60%;
    }
    .sidebar .archive-post {
        width: 50%;
    }
    .sidebar .social {
        width: 70%;
    }
}