/* Toprate Business - HTML Template */

@media only screen and (min-width: 1200px){
    .container {
        padding: 0;
        width: 1170px;
    }
    .container-fluid{
        padding: 0;
        width: 1920px;
    }    
}

@media only screen and (min-width: 992px){
  .navbar-collapse.collapse {
      display: block!important;
      height: auto!important;
      padding-bottom: 0;
      overflow: visible!important;
      transition: all 500ms ease;
      -webkit-transition: all 500ms ease;
      -ms-transition:all 500ms ease;
      -o-transition:all 500ms ease;
  }
  .navbar-toggle {
    display: none;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
  }
}
@media only screen and (min-width: 991px){
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li > ul{
    display:block !important;
    visibility:hidden;
    opacity:0;
  }
}

@media only screen and (max-width: 1200px) {
  .fact-counter .counter-border-right:before{
    display: none;
  }
  .main-header.style-three{
    margin-bottom: -60px;
  }
  .side-bar-area,
  .side-bar-area.two{
    margin-left: 0px;
    margin-top: 20px;
  }  
  .blog-left{
    margin-right: 0px;
  }  
  .call-back-left .background-image{
    margin-right: 0px;
  }
  .main-slider .metis.tparrows{
    display: none;
  }  
  .main-header.style-two{
    margin-bottom: -60px;
  }
  .service-left-side-two{
    margin-right: 0px;
  }
  .service-image-box img{
    float: none;
  }
  .about-us-left{
    margin-left: 0px;
    margin-top: 50px;
  }
  .service-right-side-two{
    margin-bottom: 60px;
  }
  .about-us-left img{
    width: 100%;
  }
  .call-back-right{
    margin-left: 0px;
    padding: 50px;
  }  
  .call-back-left .content-text{
    left: 50px;
  }
  .call-back-right:before{
    width: 100%;
  }    
  .main-menu .navigation > li{
    margin-right: 20px;
  }
  .main-menu.style-two .navigation > li > a{
    padding: 17px 6px;
  }
  .scroll-to-top.style-two{
    right: 10px;
  }
  .scroll-to-top{
    right: 50px;
  }
  .service-item-one {
    max-width: 500px;
    margin: 0 auto 50px;
    text-align: center;
    background: #f7f7f7;
  }
  .service-right-side,
  .service-left-side {
    margin: 0;
  }
  .service-item-one:before {
    display: none;
  }
}

@media only screen and (max-width: 1024px) {
  .header-top.style-two{
    padding-bottom: 0px;
  }
  .header-upper.style-two{
    margin: 0px;
  }
  .header-upper.style-two .header-upper-area{
    padding: 30px 0px;
  }
  .main-header .header-upper-area{
    padding: 30px 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .header-upper.style-two .logo-box{
    float: none;
    text-align: center;
    margin-bottom: 30px;
  }
  .header-upper.style-two .upper-right{
    float: none;
    text-align: center;
  }
  .call-back-left .background-image{
    float: none;
    width: 100%;
  }  
}
@media only screen and (max-width: 991px) {
  .gallery-section .filters{
    padding-top: 30px;
  }
  .services-left .gallery-content{
    margin-left: 0px;
    margin-top: 20px;
  }
  .map-area .map-outer .map-canvas{
    width: 100%;
  }
  .header-upper .info-box{
    margin-left: 0px;
    text-align: center;
    padding-left: 0px;
    margin-bottom: 20px;
  }
  .header-upper .info-box .icon-box{
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
  }
  .main-header.style-three{
    margin-bottom: 0px;
  }  
  .gallery-section .sec-title-three{
    float: none;
  }
  .gallery-section .filters li:last-child{
    padding-right: 30px;
  }
  .header-lower.style-two .outer-box{
    top: 20px;
    right: 20px;
  }
  .call-back-left .background-image img{
    max-width: 100%;
  }
  .main-header.style-two{
    margin-bottom: 00px;
  }
  .nav-outer.style-two{
    padding: 0px;
  }  
  .project-tab .product-tab-btns{
    float: none;
    margin: 0px;
  }
  .call-back-left .background-image{
    float: left !important;
  }
  .service-image-box img{
    float: none;
  }
  .main-header .main-menu{
    padding-top:0px;
    width:100%;
    margin: 0px;
  }
  .main-header.fixed-header .header-lower {
    display: none;
  }  
  .main-menu .collapse {
    position:  relative;
    max-height: 300px;
    overflow:auto;
    float:none;
    width:100%;
    border:none;
    margin: 1px 0px 0px;
    -ms-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
  }   
  .main-menu .collapse.in,
  .main-menu .collapsing{
    padding:0px 0px 0px;
    border:none;
    margin: 1px 0px 0px;
    -ms-border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    border-radius:0px; 
  }  
  .main-menu .navbar-header{
    position:relative;
    float:none;
    display:block;
    text-align:right;
    width:100%;
    z-index:12;
    height: 70px;
  }  
  .main-menu .navbar-header .navbar-toggle{
    background: #00bffe;
    z-index: 9;
    cursor: pointer;
    left: 0;
    top: 10px;
    height: 50px;
    position: absolute;
  }  
  .navbar-toggle .icon-bar {
    display: block;
    width: 29px;
    height: 1px;
    background: #ffffff;
    border-radius: 1px;
    margin: 7px 15px;
  } 
  .main-menu .navbar-collapse > .navigation{
    float:none !important;
    margin: 0px !important;
    width:100% !important;
    border-top:none;
    border-radius: 0px;
  }
  .main-menu .navbar-collapse > .navigation > li{
    margin:0px !important;
    float:none !important;
    width:100%;
  }
  .main-menu .navbar-header .navbar-toggle:focus {
    border: none;
    outline: none;
  }
  .main-menu .navigation > li > a:after {
    display: none;
  }
  .main-menu .navigation > li > a,
  .main-menu .navigation > li > ul:before{
    border:none;  
  }  
  .main-menu .navbar-collapse > .navigation > li > a{
    padding:10px 10px !important;
    border:none !important;
  }  
  .main-menu .navigation li.dropdown > a:after,
  .main-menu .navigation > li.dropdown > a:before,
  .main-menu .navigation > li > ul > li > a::before,
  .main-menu .navigation > li > ul > li > ul > li > a::before{
    color:#ffffff !important;
    right:15px;
    font-size:16px;
    display:none !important;
  }
  
  .main-menu .navbar-collapse > .navigation > li > ul,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
    position:relative;
    border:none;
    float:none;
    visibility:visible;
    opacity:1;
    display:none;
    margin:0px;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100%;
    background:#fdb821;
    -webkit-border-radius:0px;
    -ms-border-radius:0px;
    -o-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
    transition:none !important;
    -webkit-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    -moz-transition:none !important;
    box-shadow:none !important;
  }
    
  .main-menu .navbar-collapse > .navigation > li > ul,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
  }
  
  .main-menu .navbar-collapse > .navigation > li,
  .main-menu .navbar-collapse > .navigation > li > ul > li,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li{
    opacity:1 !important;
    top:0px !important;
    left:0px !important;
    visibility:visible !important;
    border-top: 1px solid #676060;
  }
  .main-menu .navbar-collapse > .navigation > li > ul > li{
    border-bottom: none;
  }
  
  .main-menu .navbar-collapse > .navigation > li:first-child{
    border:none;  
  }
  
  .main-menu .navbar-collapse > .navigation > li > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{
    padding:10px 10px !important;
    line-height:22px;
    color:#ffffff;
    background: #3e3c38;
    text-align:left;
    min-height:0px;
  }
  
  .main-menu .navbar-collapse > .navigation > li > a:hover,
  .main-menu .navbar-collapse > .navigation > li > a:active,
  .main-menu .navbar-collapse > .navigation > li > a:focus{
    background: #3e3c38;
  }
  
  .main-menu .navbar-collapse > .navigation > li:hover > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a,
  .main-menu .navbar-collapse > .navigation > li.current > a,
  .main-menu .navbar-collapse > .navigation > li.current-menu-item > a{
    color:#ffffff !important;
  }
  .main-menu .navbar-collapse > .navigation li.dropdown .dropdown-btn{
    display:block;
  }
  
  .main-menu .navbar-collapse > .navigation li.dropdown:after{
    display:none !important;
  }
  /* "Our Story" home section: the justified text paragraphs above the
     video looked noticeably different from the justified paragraph
     below it on mobile, even though both use text-align:justify. Cause:
     .shoos-us-content{ margin-right:50px } (style.css) exists to gap the
     text column away from the video column when they sit SIDE BY SIDE
     on desktop (.col-lg-6 + .col-lg-6) - but Bootstrap collapses both
     columns to full-width, stacked, below the lg breakpoint (991px),
     and that margin was never reset for that stacked layout. It was
     silently shaving 50px off the RIGHT edge only of the upper
     paragraphs (332px wide) while the paragraph below the video (a
     plain full-width .col-12, no such margin) stayed at the full 382px.
     The narrower column forces fewer words per line, so justify has to
     stretch each line's word-spacing much more aggressively to fill it -
     reading as "raggedy"/inconsistent next to the wider, more evenly
     justified paragraph below. Removing the margin once stacked lets
     both paragraphs use the same width and read as one consistent style. */
  .shoos-us-content{
    margin-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .sec-title-two h2,
  .sec-title-three h2{
    font-size: 36px;
  }
  /* .sec-title-three h3 is the "What is X Registration" / "Benefits of
     X" heading used at the top of every pf-content-card across all ~50
     individual service detail pages (proprietorship, trust-registration,
     etc.) - unlike h2 above, it had NO mobile font-size reduction
     anywhere in the codebase, so it stayed at its 35px desktop size on
     phones. Combined with a narrow card column, that forced 2-3 word
     titles to wrap across 3 cramped lines (26px line-height, unchanged
     from desktop, made the wrapped lines nearly touch) and crowd the
     icon above them. Reducing size and loosening line-height here fixes
     it everywhere these detail pages are used, not just one page. */
  .sec-title-three h3{
    font-size: 26px;
    line-height: 34px;
  }
  .about-us-right{
    margin-right: 0px;
  }
  .header-top .header-top-left{
    float: none;
    text-align: center;
  }
  .header-top .header-top-right{
    float: none;
    text-align: center;
  }
  .header-top .header-top-right .link-btn .btn-style-one{
    padding: 10px 38px;
  }
  .header-top .header-top-right .link-btn, 
  .header-top .header-top-right .search-box{
    display: block;
  }
  .header-top .header-top-right .search-box{
    padding: 10px 0px;
    margin: 0px;
  }
  .header-top .header-top-right form{
    display: inline-block;
  }
  .project-tab .project-title{
    float: none;
    display: block;
  }
  .project-tab .product-tab-btns,
  .project-tab .product-tab-btns .p-tab-btn{
    display: block;
  }
  .project-tab .product-tab-btns .p-tab-btn{
    padding: 10px 0px;
    margin-bottom: 10px;
    border-bottom: 1px solid #545859;
  }
  .project-tab .product-tab-btns .p-tab-btn:before{
    display: none;
  }
  .scroll-to-top {
    right: 5px;
    bottom: 65px;
  }
  .gallery-section .filters li{
    display: block;
    text-align: left;
    padding: 10px 0px;
    margin-bottom: 10px;
    border-bottom: 1px solid #545859;
  }
  .gallery-section .filters li:before{
    display: none;
  }
  .why-choss-colmun .image-content h5{
    font-size: 16px;
  }
  .why-choss-colmun .overlay-box h5{
    font-size: 16px;
  }
  .main-header .header-upper-area {
    justify-content: center;
  }
  .header-upper .logo-box {
    margin-bottom: 20px;
  }

  /* Section wrapper classes below all carry desktop-sized padding
     (90-110px top/bottom) with no mobile override anywhere in the
     codebase. Since style.css/responsive.css load on every page via
     the shared header partial, that gap compounds on mobile between
     any two stacked sections (banner->services, content->footer,
     etc.) across the whole site, including the ~55 service detail
     pages that all share .services-details. Halving it here fixes
     the "too much blank space between two blocks" gap everywhere at
     once instead of per page. */
  .sec-title-two,
  .top-services-section,
  .shoos-us-section,
  .testimonial-section,
  .about-us,
  .services-details,
  .our-blog,
  .projects-details,
  .footer-top {
    padding-top: 40px;
  }
  .top-services-section,
  .about-section,
  .project-tab,
  .shoos-us-section,
  .testimonial-section,
  .team-section,
  .news-section,
  .about-us,
  .services-details,
  .gallery-section,
  .contact-info {
    padding-bottom: 30px;
  }
  .sec-title-two {
    margin-bottom: 30px;
  }
  .project-tab .sec-title-three,
  .service-right-side-two .sec-title-three,
  .gallery-section .sec-title-three,
  .testimonial-section.style-two .sec-title-three {
    padding-top: 40px;
  }
  .gallery-section .filters {
    padding-top: 20px;
  }
  .services-left .image-content .sec-title-three,
  .project-left-content .sec-title-three,
  .related-project .sec-title-three {
    padding-top: 20px;
  }
  .related-project {
    margin-bottom: 40px;
  }
  .header-top.style-two {
    padding-bottom: 40px;
  }
  .contact-info {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 600px) {
  .sec-title-two h2{
    line-height: 50px;
  }
  .blog-comment-one.two{
    margin-left: 0px;
  }
  .blog-comment-one .image-content .link-btn{
    position: relative;
  }
  .error-text h1{
    font-size: 160px;
  } 
  .main-slider h1{
    font-size: 30px;
    line-height: 40px;
  }
  .main-slider .text{
    font-size: 16px;
    line-height: 26px;
  }
  .shoos-us-player .title-box h6{
    font-size: 14px;
  }
  .main-header.style-two{
    margin-bottom: 0px;
  }
  .about-colmun .inner-box{
    padding: 20px 0px;
  }
}
@media only screen and (max-width: 400px) {
  .main-slider h1{
    font-size: 24px;
    line-height: 32px;
  }
  .sec-title-three h3{
    font-size: 22px;
    line-height: 30px;
  }
  .sec-title-three h2{
    font-size: 26px;
  }
  .main-slider .text{
    font-size: 14px;
    line-height: 24px;
  }
  .sec-title-four h5{
    font-size: 22px;
  }
  .why-choss-colmun .overlay-box p{
    font-size: 13px;
  }
  .blog-comment-one .image-content{
    margin-left: 80px;
  }
  .blog-comment-one.two{
    margin-left: 0px;
  }
}