/*Desktop*/


/*Tablet*/
@media (max-width:1199px) {
.pricing-row .price-box h2 {font-size: 130px;}
#marketplace-section .card-box {
        flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    }
    #marketplace-section .card-box .text-end.ms-3 {margin-left: 0 !important}
    .bloghero h1 { font-size: 200px;}
    .bloghero p { font-size: 26px;}
    .blog-grid .blog-item .post-category {font-size: 20px;}
    .blog-grid .blog-item h3 a {font-size: 30px;}
    .blog-grid .blog-item .post-date {font-size: 18px;}
    .blog-grid .blog-item p { font-size: 18px;}
    .pricing-row .price-box .theme-btn {min-width: auto;line-height: 30px;}
}

@media (max-width:1024px) {
    [class*="sec-"] .main-heading, .main-heading, [class*="sec-"] .form-box .main-heading, #dashboard-section .card-box h3, 
    #billing-section p .plan-name, .dashboard-panel .main-heading {
        font-size: 60px;
    }
    
    .hero-sec {
        padding: 200px 0 100px;
        height: 600px;
    }
    .hero-sec h1, .counter-sec h2, .sec-page-hero h1 {
        font-size: 72px;
    }
    
    .hero-sec .text-end img {
        position: relative;
        right: auto;
        width: 50%;
        top: auto;
        transform:none;
    }
    .services-sec .box h3, .leftbar-links ul li a, .bottom-link a, #settings-section label, #settings-section input, 
    #settings-section textarea {
        font-size: 22px;
    }
    .counter-sec .card p, #billing-section h4, #settings-section h4 {
        font-size: 34px;
        margin: 0;
    }
    .sec-page-hero {
        padding: 100px 0px;
    }
    .pricing-row {
        padding: 220px 0 0;
    }
    .pricing-row p {
        margin: 0px 40px 25px;
    }
    .pricing-row .price-box h2 {
       font-size: 100px;
   }
   .pricing-row .price-box ul li, .legal-doc .features p {
        font-size: 24px;
        padding-bottom: 15px;
        line-height: 30px;
    }
    .pricing-row .price-box .price h3 {
        font-size: 60px;
    }
    .whychoose-row {
        padding: 60px 0;
    }
    .right-panel {
        padding: 30px;
    }
    [class*="widget-footer-"] li a {
    font-size: 16px;}
    .bloghero h1 {
        font-size: 200px;
    }
}

@media (min-width: 992px) {
      #mobileMenu, .mobile-menu-btn {
        display: none;
      }
      .services-sec .col-lg-2-4 {
      flex: 0 0 auto;
      width: 14%;
    }
}


@media (max-width:991px){
    #collapsibleNavbar {
        background: var(--black);
        padding: 15px;
        text-align: center;
    }
    button.navbar-toggler:focus { 
        box-shadow:0 0 0 0px;
    }
    button.navbar-toggler[aria-expanded="false"] { 
        background-color: var(--white); 
        border-color: var(--white); 
    }
    button.navbar-toggler[aria-expanded="true"] { 
        background-color: var(--yellow); 
        border-color: var(--yellow); 
    }    
    .compare-process-list .step-menu .step-items {
        display: inline;
        margin-right: 10px;
        width: 27%;
    }
    .navbar-nav {
        gap: 10px;
    }
    .section-before-footer .service-area .card {
        margin-top: 15px;
        margin-bottom: 15px;
    }    
    .section-before-footer p, #dashboard-section .card-box small, #billing-section p, #billing-section table {
        font-size:24px;
    }
    .sec-main-footer .footer-logo, .sec-main-footer .after-logo, .sec-main-footer .footer-social, .sec-main-footer .copyrights{
        text-align: center;
    }
    .newcta p { max-width: 100%;}
    .newcta { padding: 110px 0;}
    .whychoose-row h3 {
        font-size: 30px;
    }
    h2.h2-stl {font-size: 100px;}
    .sec1.pricing-row .price-box ul {padding-bottom: 0;padding-top: 0; margin: 20px 0;}
    [class*="widget-footer-"] li a {
    font-size: 18px;}
    #dashboard-section .card-box p.lead-p {
    font-size: 30px;
    line-height: 30px;}
    #billing-section h4, #settings-section h4, #marketplace-section h4 { font-size: 32px;}
.dashboard-panel .top-part .username {  margin: 35px 0 0px 0;}
#marketplace-section .card-box .price {font-size: 40px;}
#dashboard-section .card-box button.theme-btn, #settings-section button.theme-btn, #billing-section a.theme-btn, #marketplace-section button.theme-btn, #leads-section button.theme-btn {height: 50px;padding: 7px 20px; font-size: 20px;}
.right-panel {padding: 20px;}
.leftbar-links ul li a, .bottom-link a, #billing-section .card p {padding: 15px 20px;}
.dashboard-panel .top-part { padding: 30px 20px 30px;}
[class*="sec-"] .main-heading, .main-heading, [class*="sec-"] .form-box .main-heading, #dashboard-section .card-box h3, #billing-section p .plan-name, .dashboard-panel .main-heading {font-size: 50px;}
.dashboard-panel .top-part .username {padding: 15px;}
.dashboard-panel .top-part .username h3 {text-align: center;}
#billing-section .plan-name { font-size: 60px;line-height: 60px;}
.dashboard-panel .main-logo img { width: 200px;}
.dashboard-panel .mobile-menu-btn {position: absolute;top: 20px;left: 20px;}
.dashboard-panel .offcanvas-body {background-color: rgb(32 32 33) !important;}
.sidebar-top-btns .help-icon ul {justify-content: center !important;padding: 0 20px !important;}
.sidebar-top-btns .help-icon ul .dropdown-menu {padding: 0 !important;}
.sidebar-top-btns .help-icon ul .dropdown-menu .dropdown-item {color: var(--black);}
.right-panel .help-icon {display: none;}
.bloghero h1 { font-size: 160px;}
.blog-grid { grid-template-columns: repeat(2, 1fr);}
.admin-side.left-bar {height: auto;overflow: auto;background-color: transparent;}

}

/*Mobile*/

@media (max-width:767px) {
    [class*="sec-"] .main-heading, .main-heading, [class*="sec-"] .form-box .main-heading {
        font-size: 40px;
    }    
    .hero-sec {
        padding: 200px 0 50px;
        height: 100vh;
    }
    .hero-sec h1, .counter-sec h2, .sec-page-hero h1, .dashboard-panel h1 {
        font-size: 56px;
        text-align: center;
    }
    .counter-sec .feature-wid-icon h5 {
        font-size: 32px;
    }
    .counter-sec p, .sec-user-register p.lead {
        font-size: 24px;
    }
    .counter-sec .card {
        margin: 70px 20px 0;
    }
    .counter-sec .card h3 {
        font-size: 75px;
        margin-top: -50px;
    }
    .counter-sec .card p {
        font-size: 35px;
    }

    .compare-field-container {
        padding: 40px 38px;
    }
    .compare-field-container .input-group-text {
        padding: 10px;
    }
    .review-testimonials-area .RT-Slide {
        padding: 0px;
    }
   /* .sec-main-footer .footer-logo, .sec-main-footer .footer-social, .sec-main-footer .after-logo, .sec-main-footer .copyrights,
    .sec-before-footer {
        text-align: center;
    }*/
    .compare-process-list .main-logo {
        text-align: center;
        margin: 10px auto 30px;
        display: block;
    }
    .sec-page-hero {
        padding: 60px 10px;
    }
    .sec-main-footer .footer-logo, .sec-main-footer .after-logo, .sec-main-footer .footer-social, .sec-main-footer .copyrights{
        text-align: left;
    }


/*Mobile - New Changes 29-04-2025*/

 .sec-main-footer .footer-logo {
    text-align: center;
 } 

 .sec-main-footer .footer-social {
    text-align:center;
 }

  .copy-mobile {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  .after-logo {
    text-align: center !important;
  }

.mission-mobile {
    align-items: center !important;
    display: flex;
    padding-left:20px;
    padding-right:20px;
}

.mission-pera {
    padding-bottom:20px;
}

.post-your-job {
    padding-left:20px;
    padding-right:20px;
}

.compare-process-list .step-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    float: none !important;
}

.compare-process-list .step-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px;
}

.compare-process-list .step-items a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px !important;
    text-align: center;
}

.compare-process-list .number {
    margin-bottom: 8px !important;
    font-size: 20px;
}
.loginform-sec .compare-process-list h3 {text-align: center;}
.formbtn-group {  flex-direction: column;gap: 15px;align-items: center;}
.loginform-sec .compare-field-container .theme-btn {width: 100%;}
.pricing-row {  padding: 180px 0 0;  }
.pricing-row p { margin: 0px 0px 25px; }
.pricing-row .price-box h2 { font-size: 90px;  }
.pricing-row .price-box .price h3, #billing-section p .plan-name, .dashboard-panel .main-heading, 
#dashboard-section .card-box h3 { font-size: 50px; }
.leftbar-links ul li a, .bottom-link a {padding: 15px 20px;}
.dashboard-panel .top-part { padding: 40px 20px 30px;}
.dashboard-panel .col-md-3, .dashboard-panel .col-md-9 { width: 100%; }
#dashboard-section .card-box.d-flex {flex-direction: column;text-align: center;gap: 20px}
#dashboard-section .card-box p.lead-p { font-size: 32px;line-height: 32px;}
.pricing-row .price-box ul li, #dashboard-section .card-box p {font-size: 26px;}
#leads-section table th:first-child, #leads-section table td:first-child { padding-left: 25px;}
#leads-section table th:last-child, #leads-section table td:last-child {padding-right: 25px;}
#billing-section table th, #dashboard-section .card-box small, #billing-section p, #billing-section table {font-size: 20px;}
#dashboard-section .card-box button.theme-btn, #settings-section button.theme-btn {width: auto !important;}
h2.h2-stl {font-size: 70px;}
.sec1 .price p { font-size: 30px;padding-bottom: 12px; padding-top: 5px;}

#business-view div.d-flex, #service-view div.d-flex , #business-edit div.d-flex, #service-edit div.d-flex, #documents-view div.d-flex, #documents-edit div.d-flex, #auto-buy-view div.d-flex, #auto-buy-edit div.d-flex {flex-direction: column; gap: 10px;}
#business-view div.d-flex label, #business-view div.d-flex div, #business-edit div.d-flex label, #business-view div.d-flex div, #business-edit div.d-flex input, #service-view div.d-flex label, #business-view div.d-flex div, #service-view div.d-flex div, #service-edit div.d-flex div, #service-edit div.d-flex input, #service-edit div.d-flex label, #documents-view div.d-flex label, #documents-view div.d-flex div, #documents-edit div.d-flex label, #documents-edit div.d-flex div, #auto-buy-view div.d-flex label, #auto-buy-view div.d-flex span, #settings-section .cstmw-75, #auto-buy-view div.d-flex .w-75, #auto-buy-edit div.d-flex label, #auto-buy-edit div.d-flex span, #auto-buy-edit div.d-flex .w-75 {width: 100% !important;}
#auto-buy-view div.d-flex.cat-stl, #auto-buy-edit div.d-flex.cat-stl {flex-direction: row;}
#auto-buy-view div.d-flex.cat-stl span, #auto-buy-edit div.d-flex.cat-stl span {width: auto !important;}
.dashboard-panel .top-part .username {padding: 20px;}
.bloghero {height: auto; padding: 250px 0 150px;}
.bloghero h1 { font-size: 130px;text-align: left;}
.bloghero p { font-size: 24px;}
.btn-stl {padding: 10px;}
.btn-stl:hover, .btn-stl:focus {background-color: transparent !important;}
.blog-grid { grid-template-columns: repeat(1, 1fr);}
.single-post main h1 {font-size: 40px;}
.single-post main p { font-size: 20px;}
.single-post main { padding: 160px 15px 0px;}
.errorpage h1 { font-size: 200px;}
.errorpage h2 {font-size: 40px;}
.errorpage p, .contractors-table th, .contractors-table td { font-size: 20px;}
.contractors-table td { font-size: 16px !important;}

}
                               
@media (max-width:576px) {

    .compare-field-container .custom-radio-group label {
        font-size: 18px;
    }
    .navbar-brand img {
        width: 120px;
    }
    .zip-field {
        /*display: none;
        transition: all 0.3s ease;
        width: 0;
        padding: 0;
        margin-left: 0;*/
      }

    .zip-field.active {
        display: inline-block;
        width: 100px;
        margin-left:-5px;
        padding: 0.375rem 0.75rem;
    }

    #serviceInput.zip-open {
        flex: 1 1 auto;
        max-width: calc(100% - 140px); /* adjust based on your layout */
    }

    .vr {
        display: none;
    }

    .compare-field-container {
        padding:40px 22px;
    }
    .compare-process-list .step-menu .step-items a {
        font-size: 14px;
    }
    .compare-process-list .number {
        margin-right:0px;
    }
    .services-sec .box a h3 {
        font-size: 22px;
    }
    .services-sec .box img {
        max-width: 50px;
    }
    .popular-services-slider .slick-arrow{
        display: none !important;
    }
    .contrectors {
        padding: 10px;
    }
    .contrectors label {
      font-size: 24px;
    }
    .contrectors-bio ul {
        font-size: 12px;
    }
    .slick-slider {
        margin-bottom: 0px;
    }
    [class*="widget-footer-"] {
    text-align: center;
    }
    [class*="widget-footer-"] ul {
        padding-left: 0px;
        list-style: none;
        margin: 0px;
    }
    .sec-user-register .step-box {
        width: 90px;
      }
    #footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

   .footer-left, .footer-right {
        text-align: center;
        width: 100%;
      }

    .compare-field-container .theme-btn
     {
        width: 130px;
    }
    .sec-user-register .form-box .form-control, .sec-user-register .form-box .form-select {
        font-size: 20px;
    }
    h2.h2-stl {font-size: 50px;}
    .sec1.pricing-row .price-box h2 { font-size: 50px; line-height: 1;}
    footer .widget-footer-5 li a {justify-content: center;}
    .sec-reviews .section-content .btn-group {flex-direction: column;align-items: center;}
    #billing-section .card-box {flex-direction: column; gap: 15px;}
    .bloghero h1 { font-size: 90px;}
    .mob-first {width: 100%}
    #dateFilter, #statusFilter, #applyFilters {width: 30% !important}
    .single-post main h1 {padding: 0 !important;}
    .newcta {background-position: 23% center;}
}