/* ==================== [ 1500px ] ==================== */
@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container {
        max-width: calc(1400px + 40px);
    }
    /* ==================== [ Common End ] ==================== */
}

@media (max-width: 1499px) {
/* customer-story */
.customer-story-block .customer-story-main-detail { gap: 42px; padding: 0 35px; }
/* customer-story */
}

/* ==================== [ 1399px ] ==================== */
@media (max-width:1399px){

    /* ==================== [ Typography Start ] ==================== */

    h1, .h1 { font-size: 54px; line-height: 65px; }
	h2, .h2 { font-size: 42px; line-height: 54px; }
	h3, .h3 { font-size: 26px; line-height: 34px; }
    h4, .h4 { font-size: 24px; line-height: 29px; }
    h5, .h5 { font-size: 22px; line-height: 26px; }
    h6, .h6 { font-size: 20px; line-height: 24px; }

    /* ==================== [ Typography End ] ==================== */

    /* ==================== [ Banner Css Start ] ==================== */
    .home-banner { padding: 95px 0 100px 0; }
    .banner .banner-bottom .banner-block {padding: 0 60px;}
    /* ==================== [ Banner Css End ] ==================== */

    /* ==================== [ Commercial Start ] ==================== */
    .commercial .right-block .img-1 ,
    .commercial .right-block .img-2 ,
    .commercial .right-block .img-3 { max-width: 220px; }
    
    .commercial .right-block .img-2 { bottom: 135px; }
    
    .commercial .commercial-block .right-block { padding-block: 80px; }
    /* ==================== [ Commercial End ] ==================== */


    /* ==================== [ How-It-Work Css Start ] ==================== */
    .how-it-works { padding: 100px 0 100px 0; }
    /* ==================== [ How-It-Work Css End ] ==================== */


    /* customer-story */
    .customer-story-section { padding-top: 75px; padding-bottom: 40px; }
    .customer-story-block .customer-story-main-detail .customer-story-image { width: 400px; }
    .customer-story-block .customer-story-main-detail .customer-story-image .image-block { height: 400px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail { gap: 35px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail .detail { font-size: 30px; }
    .customer-story-block .customer-story-main-detail { gap: 42px; padding: 0 35px; }
    .customer-story-carousel .swiper-button-prev,
    .customer-story-carousel .swiper-button-next { width: 50px; height: 50px; }
    .customer-story-carousel .swiper-button-prev { left: 20px; }
    .customer-story-carousel .swiper-button-next { right: 20px; }
    /* customer-story */

    /* license-free */
    .license-free-list .license-free-block .license-title .price-text { font-size: 48px; }
    /* license-free */

    /* pricing page */
    .license-free-section .license-free-main-title .section-title h1 { font-size: 42px; }

    .boxpod-features-section { padding-top: 100px; padding-bottom: 55px; }
    .boxpod-features-section .boxpod-features-main-title { margin-bottom: 55px; }
    .boxpod-features-list > .row { margin: 0 -30px; }
    .boxpod-features-list > .row > * { padding: 0 30px; }
    .boxpod-features-list .features-block { margin-bottom: 60px; }
    /* pricing page */

}

@media (max-width:1299px){

    /* ==================== [ Banner Css Start ] ==================== */
    .banner .banner-bottom .banner-block { padding: 0 15px; }
    .banner-content .heading .disc * {margin-bottom: 30px;}
    .banner .banner-bottom .banner-block .content .number * { font-size: 28px; line-height: 34px; }
    /* ==================== [ Banner Css End ] ==================== */


}

/* ==================== [ 1199px ] ==================== */
@media (max-width: 1199px) {

    /* ==================== [ Commercial Start ] ==================== */
    .commercial { padding-block: 80px; }
    .commercial .right-block .img-1 ,
    .commercial .right-block .img-2 ,
    .commercial .right-block .img-3 { max-width: 180px; }
    
    .commercial .right-block .img-2 { bottom: 110px; }
    
    .commercial .commercial-block .right-block { padding-block: 50px; }
    .commercial .heading .disc * { font-size: 24px; }
    /* ==================== [ Commercial End ] ==================== */


     /* ==================== [ How-It-Work Css Start ] ==================== */
    .how-it-works { padding: 64px 0 64px 0; }
    /* ==================== [ How-It-Work Css End ] ==================== */


    /* customer-story */
    .customer-story-section { padding-top: 65px; padding-bottom: 25px; }
    .customer-story-carousel .customer-story-block { padding-bottom: 45px; }
    .customer-story-block .customer-story-main-detail .customer-story-image { width: 267px; }
    .customer-story-block .customer-story-main-detail .customer-story-image .image-block { height: 355px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail { gap: 20px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail .detail { font-size: 24px; }
    .customer-story-block .customer-story-main-detail { gap: 32px; padding: 0 35px; }
    .customer-story-carousel .swiper-button-prev,
    .customer-story-carousel .swiper-button-next { width: 44px; height: 44px; }
    .customer-story-carousel .swiper-button-prev { left: 20px; }
    .customer-story-carousel .swiper-button-next { right: 20px; }
    .customer-story-carousel .swiper-button-prev:after,
    .customer-story-carousel .swiper-button-next:after { font-size: 18px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail .customer-name { font-size: 16px; }
    /* customer-story */

    /* license-free */
    .license-free-section { padding: 70px 0 85px; }
    .license-free-section .license-free-main-title { margin-bottom: 50px; }
    /* license-free */

     /* pricing page */
    .boxpod-features-section { padding-top: 85px; padding-bottom: 45px; }
    .boxpod-features-section .boxpod-features-main-title { margin-bottom: 40px; }
    .boxpod-features-list > .row { margin: 0 -12px; }
    .boxpod-features-list > .row > * { padding: 0 12px; }
    .boxpod-features-list .features-block { margin-bottom: 44px; }
    .boxpod-features-list .features-block .features-icon { width: 44px; height: 44px; margin-bottom: 25px; }
    .boxpod-features-list .features-block .title * { font-size: 20px; line-height: 120%; }
    /* pricing page */
        
    /* footer */
    .footer .f-top .f-content .f-mail-social-icons,
    .footer .f-top .f-content .f-privacy-terms { width: 250px; }
    /* footer */

}

/* ==================== [ 991px ] ==================== */
@media (max-width: 991px) {
    body { padding-top: 48px; }
    .container {max-width: 100%;}
    /* ==================== [ Typography Start ] ==================== */

    h1, .h1 { font-size: 52px; line-height: 62px; }
    h2, .h2 { font-size: 40px; line-height: 48px; }
    h3, .h3 { font-size: 24px; line-height: 29px; }
    h4, .h4 { font-size: 24px; line-height: 29px; }
    h5, .h5 { font-size: 22px; line-height: 26px; }
    h6, .h6 { font-size: 20px; line-height: 24px; }

    /* ==================== [ Typography End ] ==================== */

    /* ==================== [ Header CSS Start ] ==================== */
    .header.show {padding-bottom: 20px;}
    .header.show::before{ content: ""; position: absolute; top: 48px; left: 0; width: 100%; height: 1px; background: var(--primary); z-index: 1;}
    .header .navbar .navbar-brand { max-width: 48px; }
    .header.show .navbar { background: var(--dark); }
    .header .navbar-expand-lg .navbar-collapse { margin-left: 0; }
    .header .navbar-nav { align-items: flex-start; justify-content: flex-start; padding: 30px 0; gap: 28px; position: relative; z-index: 1;}
    .header .header-btn .btn-primary-outline{ width: 100%; }
    .header .navbar-nav .nav-link { font-size: 24px; line-height: 36px; letter-spacing: 0.24px; }
    /* ==================== [ Header CSS End ] ==================== */



    /* ==================== [ Banner CSS Start ] ==================== */
    .home-banner {padding: 120px 0 150px;}
    .banner-content .heading .title * {margin-bottom: 16px;}
    .banner-content .heading .disc * {margin-bottom: 64px ;}
    .banner .banner-bottom {padding: 20px;}
    .banner .banner-bottom .banner-block .icon { width: 32px; height: 32px; margin-right: 0; margin-bottom: 12px; }
    .banner .banner-bottom .banner-block {padding: 0 20px}
    .banner .banner-bottom .banner-block { flex-direction: column; }
    .banner .banner-bottom .banner-block:nth-child(3) {padding-right: 0;}
    .banner .banner-bottom .banner-block .content .disc * {white-space: nowrap;}
    /* ==================== [ Banner CSS End ] ==================== */


    /* ==================== [ Commercial Start ] ==================== */
    .commercial { padding-block: 64px; }
    .commercial .commercial-block .left-block { max-width: 100%; width: 100%; }

    .commercial .commercial-block { flex-direction: column; gap: 40px; }
    .commercial .image-block { max-width: 508px; width: calc(100% - 44px); }
    .commercial .commercial-block .right-block { padding-block: 42px 23px; max-width: 770px; width: 100%; }

    .commercial .right-block .img-1 { max-width: 278px; width: 100%; }
    .commercial .right-block .img-2 { bottom: 174px; }

    .commercial .right-block .img-2 ,
    .commercial .right-block .img-3 { max-width: 290px; }

    .commercial .feature-list ul { margin-block: 24px 36px; flex-direction: row; flex-wrap: wrap; }
    .commercial .feature-list ul li { max-width: calc(50% - 12px); width: 100%; }
    /* ==================== [ Commercial End ] ==================== */



    /* ==================== [ How-It-Work Css Start ] ==================== */
    .how-it-works { padding: 64px 0 64px 0; }
    .how-it-works-wrp {padding: 0 12px;}
    /* ==================== [ How-It-Work Css End ] ==================== */


    /* license-free */
    .license-free-section { padding: 65px 0; }
    .license-free-list .license-free-block .license-title { padding: 15px; height: 131px; }
    .license-free-section .license-free-main-title { margin-bottom: 50px; }
    .license-free-section .annual-save-options { margin-bottom: 25px; }
    .license-free-list > .row { margin: 0 -4px; }
    .license-free-list > .row > * { padding: 0 4px; }
    .license-free-list .license-free-block .license-main-detail { padding: 15px; height: calc(100% - 131px); }
    /* license-free */

    .customer-story-block .customer-story-main-detail {padding: 0 60px;}

    /* pricing page */
    .license-free-section .license-free-main-title .section-title h1 { font-size: 40px; }

    .boxpod-features-section { padding-top: 65px; }
    .boxpod-features-section .boxpod-features-main-title .boxpod-main-detail { max-width: 560px; }
    /* pricing page */

    /* footer */
    .footer .f-top .f-content { padding: 32px 0 5px; align-items: flex-start; font-size: 14px; }
    .footer .f-top .f-content > * { margin-bottom: 15px; }
    .footer .f-top .f-content .f-mail-social-icons { width: 192px; }
    .footer .f-top .f-content .f-privacy-terms { width: auto; }
    /* footer */

}

/* ==================== [ 767px ] ==================== */
@media (max-width: 767px) {

    /* ==================== [ Typography Start ] ==================== */

    body {font-size: 16px; line-height: 20px;}

    h1, .h1 { font-size: 40px; line-height: 48px; }
    h2, .h2 { font-size: 32px; line-height: 38px; }
    h3, .h3 { font-size: 24px; line-height: 29px; }
    h4, .h4 { font-size: 22px; line-height: 29px; }
    h5, .h5 { font-size: 20px; line-height: 26px; }
    h6, .h6 { font-size: 18px; line-height: 24px; }


    .btn-primary {padding: 16px 76px 16px 26px; }
    /* ==================== [ Typography End ] ==================== */


    /* ==================== [ Header Css Start ] ==================== */
    .header .navbar-nav .nav-link { font-size: 20px; line-height: 34px; }
    .header .navbar-nav {padding: 26px 0; gap: 20px;}
    /* ==================== [ Header Css End ] ==================== */

    /* ==================== [ Banner CSS Start ] ==================== */
    .home-banner {padding: 122px 0 125px;}
    .home-banner .home-banner-wrp {padding: 0 7px;}
    .banner-content .heading .disc * {font-size: 18px; line-height: 23px; margin-bottom: 48px;}
    .banner-content .search-wrapper { flex-wrap: wrap; max-width: 380px; margin-left: auto; margin-right: auto; }
    .banner-content .search-wrapper .search-group { flex: 1 1 100%; }
    .banner-content .search-wrapper .search-group input { width: 100%; }
    .banner-content .search-wrapper .btn.btn-search { flex: 1; }
    .banner-content .banner-btn .btn { padding: 18px 80px 18px 28px; font-size: 15px; }
    .banner-content .banner-btn { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }
    .banner-content .banner-btn .btn { width: 100%; }
    .banner .banner-bottom .banner-block .icon {width: 24px; height: 24px;}
    .banner .banner-bottom .banner-block {align-items: center; justify-content: center; text-align: center;}
    .banner .banner-bottom .banner-block .content .disc * { font-size: 14px; line-height: 17px;}
    .banner .banner-bottom .banner-block { padding: 0 16px; border: none; }
    /* ==================== [ Banner CSS End ] ==================== */


     /* ==================== [ Commercial Start ] ==================== */
    .commercial .commercial-block .right-block { padding-block: 50px 40px; }
    .commercial .right-block .img-2, .commercial .right-block .img-3 { max-width: 230px; }
    .commercial .right-block .img-2 { bottom: 138px; }
    .commercial .right-block .img-1 { max-width: 230px; }
    /* ==================== [ Commercial End ] ==================== */



    /* ==================== [ How-It-Work Css Start ] ==================== */
    .how-it-works { padding: 48px 0 48px 0; }
    .how-it-works-wrp {padding: 0;}
    .how-it-works-wrp .heading { margin-bottom: 32px; }
    .how-it-works-wrp .how-it-works-block .icon { width: 64px; height: 64px; margin-bottom: 20px; }
    /* ==================== [ How-It-Work Css End ] ==================== */


    /* common */    
    .common-tag-mark { font-size: 20px; }
    /* common */

    /* customer-story */
    .customer-story-section { padding-top: 32px; padding-bottom: 25px; }
    .customer-story-block .customer-story-main-detail { flex-direction: column; gap: 24px; padding: 0; }
    .customer-story-block .customer-story-main-detail > * { flex: 0 0 auto !important; width: 100% !important; }
    .customer-story-block .customer-story-main-detail .customer-story-image .image-block { height: auto; }
    .customer-story-block .customer-story-main-detail .common-small-tag-mark { margin-bottom: 20px; }
    .customer-story-block .customer-story-main-detail .story-rating ul li { font-size: 16px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail .detail { font-size: 20px; }
    .customer-story-carousel .swiper-button-prev,
    .customer-story-carousel .swiper-button-next { top: auto; bottom: 0; }
    .customer-story-carousel .swiper-pagination { bottom: 12px; }
    .customer-story-block .customer-story-main-detail .customer-story-detail .customer-name { margin-top: 20px; }
    /* customer-story */

    /* license-free */
    .license-free-section { padding: 48px 0; }
    .license-free-list .license-free-block .license-title { height: auto; }
    .license-free-list .license-free-block .license-main-detail { height: auto; }
    /* license-free */

    /* pricing page */
    .license-free-section .license-free-main-title .section-title h1 { font-size: 35px; }

    .boxpod-features-section { padding-top: 48px; padding-bottom: 15px; }
    .boxpod-features-section .boxpod-features-main-title { margin-bottom: 30px; }
    .boxpod-features-list .features-block { margin-bottom: 35px; }
    /* pricing page */

    /* footer */
    .footer .f-top .f-content { padding: 32px 0 15px; align-items: flex-start; }
    .footer .f-top .f-content > * { flex: 0 0 auto !important; width: calc(50% - 16px) !important; margin: 0; }
    .footer .f-navigation { order: 1; }
    .footer .f-navigation ul li { width: 100%; }
    .footer .f-top .f-content .f-mail-social-icons { order: 2; text-align: right; }
    .footer .f-top .f-content .f-privacy-terms { order: 3; text-align: left; }
    .footer .f-bottom .f-content { padding-top: 15px; padding-bottom: 5px; flex-direction: column; gap: 0; text-align: left; align-items: flex-start; }
    .footer .f-bottom .f-content ul { margin: 0 -7px; }
    .footer .f-bottom .f-content ul li { margin-left: 7px; margin-right: 7px; margin-bottom: 15px; }
    /* footer */



}

/* ==================== [ 575px ] ==================== */
@media (max-width: 575px) {

    /* ==================== [ Header Css Start ] ==================== */
    .header .navbar-nav .nav-link { font-size: 18px; line-height: 27px; letter-spacing: 0.18px; }

    /* ==================== [ Header Css End ] ==================== */

    /* ==================== [ Home-Banner Css Start ] ==================== */
    .home-banner {padding: 122px 0 125px;}
    /* ==================== [ Home-Banner Css End ] ==================== */

    /* ==================== [ Commercial Start ] ==================== */
    .commercial { padding-block: 48px; }
    .commercial .right-block .img-1 { display: none; }

    .commercial .right-block .img-2 { bottom: clamp(130px, -38.00px + 40.00vw, 138px); } /* bottom : 138px to 130px (440 to 420) */
    .commercial .right-block .img-2,
    .commercial .right-block .img-3 { max-width: 230px; width: 57.5%; }

    .commercial .feature-list ul { margin-block: 20px 32px; gap: 8px; }
    .commercial .feature-list ul li { width: 100%; max-width: 100%; font-size: 15px; line-height: 18px; }
    .commercial .feature-list ul li::before { height: 16px; width: 16px; margin-top: 2px; }

    .commercial .heading .disc * { font-size: 20px; line-height: 120%; }
    /* ==================== [ Commercial End ] ==================== */

}

/* ==================== [ 420px ] ==================== */
@media (max-width:420px) {
    
    /* ==================== [ Banner CSS Start ] ==================== */
    .home-banner .home-banner-wrp {padding: 0;}
    .banner .banner-bottom .block-container{ flex-direction: column; gap: 20px;}
    .banner .banner-bottom .banner-block { padding: 0; border: none;  }
    /* .banner .banner-bottom .banner-block:first-child {border-top: none;} */
    .banner-content .search-wrapper { max-width: 100%; }
    .banner-content .search-wrapper .btn.btn-search { padding: 12px 20px; }
    .banner-content .banner-btn { max-width: 100%; }
    .banner-content .banner-btn .btn { padding: 16px 60px 16px 20px; font-size: 14px; }
    /* ==================== [ Banner CSS End ] ==================== */


     /* ==================== [ Commercial Start ] ==================== */
    .commercial .heading .disc * { font-size: 18px; }
    .commercial .heading .title * { font-size: 26px; line-height: 34px; }
    .commercial .commercial-block { gap: 20px; }
    .commercial .image-block { max-width: 100%; width: calc(100% - 20px); }

    .commercial .right-block .img-2 { bottom: clamp(98px, -4.40px + 32.00vw, 130px); } /* bottom: 130px to 98px (420 to 320) */
    .commercial .commercial-block .right-block { padding-block: 30px; }
    /* ==================== [ Commercial End ] ==================== */
}

@media (max-width: 389px) {
/* common */
.common-tag-mark { font-size: 18px; padding: 10px 15px; }
/* common */

/* license-free */
.license-free-section { padding: 35px 0; }
.license-free-section .license-free-main-title { margin-bottom: 35px; }
.license-free-list .license-free-block .license-title .common-small-tag-mark { font-size: 14px; padding-top: 6px; margin-bottom: 20px; }
.license-free-list .license-free-block .license-title .price-text { font-size: 38px; }
.license-free-list .license-free-block .license-title .price-text .month { font-size: 20px; }
/* license-free */

/* pricing page */
.boxpod-features-section .boxpod-features-main-title { margin-bottom: 15px; }
.boxpod-features-list > .row > * { width: 100%; }
/* pricing page */


/* footer */
.footer .f-top .f-content > * { width: calc(100% - 16px) !important; }
.footer .f-top .f-content .f-mail-social-icons { text-align: left; }
/* footer */
}