/* Covers small to large laptops including full HD 901px and 1600px */
@media screen and (min-device-width: 901px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {

    h1  {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 0;
   }

h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 58px;
    line-height: 84px;
    letter-spacing: 0;
}

h3 {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 39px;
    letter-spacing: 0;
}

h4 {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
}

h5 {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
}


.panel-change-wrapper .card
 {
    width: 100%;
    height: 650px;
   
}

   li.nav-item a {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    color: #303030;
    text-decoration: none;
   }

   .primary {
  background: #fff;
  border: none;
  padding: 13px 24px !important;
  border-radius: 50px;
  font-weight: 500;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
}

.outline {
  background: #fff;
  border: none;
  padding: 13px 24px;
  border-radius: 50px;
  font-weight: 500;
  cursor: pointer;
   font-size: 13px;
  line-height: 18px;
}

.circle {
    background: transparent;
    border: 2px solid #fff;
    padding: 13px 24px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
       font-size: 13px;
  line-height: 18px;
}

li.nav-item {
    margin-right: 40px;
}

.desktop-header {
    position: absolute;
    top: 62px;
    left: 66px;
    right: 66px;
    padding: 15px 0px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
}


 .banner-box {
    position: absolute;
    bottom: 20px;
    display: flex;
    padding-left: 120px;
    padding-right: 120px;
}

   /* home */

   .home-testimonials-anit {
       margin-top: 265px;
       margin-left: 40px;
   }

   .home-cta-image-new img {
    width: 100%;
    height: 332px;
    object-fit: cover;
    border-radius: 30px;
}

.home-cta-text {
    background: #FEF6D2;
    padding-left: 64px;
    border-radius: 30px;
    width: 100%;
    height: 332px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.home-cta-image img {
    width: 100%;
    height: 332px;
    border-radius: 30px;
    object-fit: cover;
}

.panels{
  position: relative;
  width: 100%;
  height: 500px;         
}

.ServiceCleaning-banner-text {
    text-align: left;
}

.ServiceCleaning-banner {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 520px;
    margin-top: 154px;
    border-radius: 30px;
}

}

 /* For ultra-wide laptops, large desktops, 2K, and 4K monitors 1601px and above */
@media (min-width: 1601px) {

}

 /* For most 15" and 16" laptops, some desktops 1281px to 1600px */
@media (min-width: 1281px) and (max-width: 1600px) {

}

 /* For slightly narrower range of medium-large screens 1370px to 1605px */ 
@media only screen and (min-width: 1370px) and (max-width: 1605px) {

}



/* Portrait 6, 7,8 */
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
   
    h1 {
        font-family: "Outfit", sans-serif;
        font-weight: 500;
        font-size: 38px;
        line-height: 50px;
        letter-spacing: 0;
    }

    .banner-box {
        position: absolute;
        bottom: 60px !important;
        left: 0;
        right: 0;
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }


}

/* Portrait 7+ 8 +  */
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
        h1 {
        font-family: "Outfit", sans-serif;
        font-weight: 500;
        font-size: 38px;
        line-height: 50px;
        letter-spacing: 0;
        }
        .banner-box {
        position: absolute;
        bottom: 60px !important;
        left: 0;
        right: 0;
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }
}

/* mobile */
@media only screen and (max-width: 767px) {

    /* header */

    .desktop-header,.sub-desktop-header{
        display: none !important;
    }

    .mobile-header,.sub-mobile-header{
        display: block !important;
    }

.mobile-header {
    position: fixed;
    top: 40px;
    left: 40px;
    right: 40px;
    padding: 10px 0px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    z-index: 99999;
}

.sub-mobile-header{
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    padding: 10px 0px;
     background: rgba(249, 209, 32, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    z-index: 9999;

}

.modal {
    z-index: 99999;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 32px;
    pointer-events: none;
    margin-top: 120px;
}

button.btn-close img {
    margin-left: -25px;
    width: 20px;
    height: 20px;
}

.order-card .order-details-lists {
    margin: 0px 0px;
}

.order-card .order-detail-box h5 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-top: 0px !important;
    padding-top: 10px;
}

.order-detail-box p {
    margin-left: 0px;
}

.ServiceCleaning .pricing-card {
    background: url('/images/PriceList/Matto-Carpet-Cleaning-Price-Background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
}

.order-detail-box h5 {
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    margin-top: -3px !important;
}

.pricing-card {
    position: relative;
    max-width: 868px;
            background: rgba(253, 237, 166, 1) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    padding-top: 32px;
    padding-right: 160px;
    padding-left: 160px;
    padding-bottom: 32px;
}

.search-box-book i {
    font-size: 20px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(249, 209, 32, 1);
    border-radius: 30px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.search-box-book {
    background: rgba(255, 255, 255, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    border-radius: 60px;
    padding: 5px 15px 5px 15px;
}

.contact-us-callback-col{
    display: flex !important;
    flex-direction: column !important;
}

input#promoCode {
    border: none !important;
}

.promo-input-group .btn-apply {
    border-radius: 25px;
    background: var(--brand-yellow);
    border: 0;
    font-weight: 600;
    padding: 10px 40px 10px 40px;
}

.promocode-col-first h3{
    text-align: center !important;
}

.promo-input-group {
    
    margin-top: 20px;
    margin-bottom: 20px;
}

.promo-check-box {
    max-width: 90%;
    margin: auto;
}

.enjoy-text p {
    width: 100%;
    margin: auto;
}

.callback-text {
    width: 95%;
}

    .price-list .price-table-btn a {
        width: 100%;
        text-align: center;
    }

    .home-cta-text h4 {
    margin-bottom: 20px;
}

.search-box-book h3 {
    margin-bottom: 0px !important;
    font-size: 20px;
}

.price-list  .border-yellow-button {
    padding: 12px 24px 16px 24px;
}  

.cta-description-box {
    margin-bottom: 20px;
    width: 100%;
}

.mobile-header-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-Toggle-icon {
    cursor: pointer;
}

.sidepanel-header {
    background: rgb(156 156 156);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    align-items: center;
    border-radius: 50px;
}

.sub-mobile-header .sidepanel-header {
    background: #F9D120;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    align-items: center;
    border-radius: 50px;
}

.sidepanel  {
  width: 100%;
  position: fixed;
  z-index: 99999;
  height:0;
  top: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 0px;
  overflow-y: hidden !important;
}

.sidepanel.open {
  height: 100vh;       /* Expand full screen */
  overflow-y: hidden !important;
}

.sidepanel-body {
     z-index: 100000;
     position: relative;
    background: rgb(156 156 156);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 100%;
    border: 1px solid white;
    border-radius: 30px;
    margin-top: 5px;
    padding: 84px 56px;
    display: flex;
    align-items: center;
    justify-content: center;

}

#quoteModal .modal-dialog {
    max-width: 630px;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
}

.border-yellow-button {
    padding: 12px 24px 12px 24px;
    color: #303030;
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    background: #FFFFFF;
    border-radius: 50px;
    text-decoration: none;
    border: 1px solid #F9D120;
}

.mobile-model-a-lists {
    display: flex;
    flex-direction: column;
}


.sub-mobile-header .sidepanel-body {
     z-index: 100000;
     position: relative;
    background: #F9D120;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 100%;
    border: 1px solid white;
    border-radius: 30px;
    margin-top: 5px;
    padding: 84px 56px;
    display: flex;
    align-items: center;
    justify-content: center;

}

ul.navbar-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

li.nav-item {
    margin-right: 0px;
    margin-bottom: 32px;
}

.header-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.header-buttons {
    gap: 10px;
}
.primary {
    background: #fff;
    border: none;
    padding: 12px 50px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
}

.outline {
    background: #fff;
    border: none;
    padding: 12px 50px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
}

.language-model a {
    background: transparent;
    border: 2px solid #fff;
    padding: 16px 24px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 3px;
    margin-right: 3px;
    color: #303030 !important;
    text-decoration: none !important;
}

.language-model {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

/* home */

.home-form-image-text {
    margin-bottom: 40px;
    margin-left: 20px;
    width: 70%;
}

.home-form-box {
    border: 1px solid #F9D120;
    padding: 40px 16px 20px 16px;
    border-radius: 30px;
    background: #FEF6D2;
    margin-top: 16px;
}

.step-one-form, .step-two-form, .step-three-form{
    width: 100%;
    padding-bottom: 40px;
}

div#individualForm .col-md-6, div#corporateForm .col-md-6{
    padding: 0px !important;
}

.order-number h3 {
    font-size: 20px !important;
    line-height: 25px !important;
}

.confirmation-wrapper h3 {
    font-size: 18px !important;
    line-height: 46px;
}

.order-detail-box li {
    margin-left: 0px;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: rgba(0, 0, 0, 1);
    margin-top: -10px;
}

.footer-main-logo img {
    width: 80%;
}


.form-check-input.pickup-toggle {
    margin-top: -3px;

}    

.iti.iti--allow-dropdown.iti--show-flags {
    width: 100%;
}

.mobile-p-flex {
    margin-top: 15px;
}

.home-form-left-col{
    padding-left: 15px !important;
}

.home-form {
    background: transparent !important;
    border: inherit !important;
    border-radius: 30px;
    margin-bottom: 20px;
    padding-bottom: 0px;
}

.home-form-header {
    padding-top: 0;
    padding-bottom: 40px;
    width: 85%;
}

.home-form-image {
    height: 520px;
}

.home-form-right-col{
    padding-right: 15px !important;
}
 .home-banner .banner-image{
    display: none !important;
}

.home-banner .banner-image-mobile{
    display: block !important;
}
.home-cta-image{
    display: none !important;
}

.home-cta-image-mobile{
    display: block !important;
}

.home-section {
    margin-left: 16px;
     margin-right: 16px;
}

.banner-image {
    padding-top: 16px;
}

.home-banner .banner-image-mobile{
    margin-top: 16px;
}

.banner-box {
        position: absolute;
        bottom: 60px;
        left: 0;
        right: 0;
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
}

.mobile-start {
    justify-content: flex-start !important;
  }

  .banner-text-box h1 {
    width: 100%;
    margin-bottom: 20px;
}

.banner-image-mobile img {
    width: 100%;
    height: 100vh;
   
}


.banner-card {
    width: 100%;
    margin-top: 50px;
}

.about-image img {
    width: 100%;
}

.home-about-view .row {
    display: flex;
    flex-direction: column-reverse !important;
    align-items: center;
}

.about-image {
    position: inherit !important;
    margin-top: 0px !important;
}

.about-text h4 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.about-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.home-about .home-about-view {
    padding-bottom: 30px;
    border-radius: 30px;
}

.home-about{
    margin-top: 16px;
}

.home-service {
    padding-top: 60px;
    padding-bottom: 60px;
}
.service-item-row {
    padding-top: 40px;
}

.home-service .container,.service-item-row .col-md-4  {
    padding-left: 0px !important;
       padding-right: 0px !important;
}

.banner-text-box  p {
    margin-bottom: 0 !important;
}

.home-payment-process {
    
    padding-top: 60px;
    padding-bottom: 60px;

}

.home-payment-process-item {
    padding-bottom: 50px;
}

.home-payment-box {
    margin-top: 20px;
}

.home-pyament-icon-box p {
    margin-top: 16px;

}

.home-payment-process {
    padding-bottom: 0px;
   
}

.home-faq-box {
        padding: 60px 16px 60px 16px;
        margin-top: 5px;
        margin-bottom: 5px;
        height: auto !important;
}

.faq-main-image {
    display: none !important;
}

.home-faq-box-col {
    padding-left: 10px;
    padding-right: 10px !important;
}

.home-faq-btn {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-testimonials {
    padding-top: 60px;
    padding-bottom: 60px;
}

.home-testimonials-header p {
    text-align: center;
    margin-bottom: 5px !important;
}

.home-testimonials-header h2 {
    text-align: center;
}

.home-testimonials-slider {
    margin-top: 60px;
}

.home-testimonials-anit {
    background: url('/images/Home/Matto-Home-Testimonials-Img-Bg-Mobile.png');
    background-repeat: no-repeat;
    position: absolute;
    height: 60%;
    width: 85%;
    background-size: contain;
    margin-top: 140px;
    margin-left: 30px;
    left: 0;
    right: 0;
}

.carousel-indicators {
    margin-bottom: -50px;
}

.home-testimonials-reviews {
    padding-left: 0px;
    height: auto;
    overflow-y: hidden;
    margin-bottom: 40px;
    padding-right: 0px;
    margin-top: 20px;
}

.review-body-col{
    display: flex;
    flex-direction: column;
    align-items: center;
  
}

.review-btn {
    margin-left: 0px;
}

.mobile-testimonials{
    display: none;
}

.home-testimonials-item {
    border-bottom: none !important;
    padding-bottom: 0px;
    padding-top: 40px;
}

.home-cta-text-col {
    background: #FEF6D2;
    padding-left: 0px;
    border-radius: 30px;
    margin-top: 16px;
}

.home-cta-text {
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    height: inherit;
}

.home-cta-text h3 {
    width: 100%;
    margin-bottom: 25px;
}

.home-cta .gx-5 {
    --bs-gutter-x: inherit !important;
}

.home-cta-image-mobile img{
    width: 100%;
}

.home-cta {
    margin-top: 16px;
}

.home-testimonials {
    margin-top: 16px;
}

.home-faq {
    margin-top: 16px;
}


/* footer */



.footer-main-row {
    padding-top: 40px;
    padding-bottom: 0px;
    border-bottom: 1px solid #FFFFFF66;
}

.footer-main-logo p {
    margin-top: 10px;
}

.footer-main-media {
    margin-top: 24px;
}

.footer-main-icons-lists {
    margin-top: 16px;
}

.footer-main-navlists {
    margin-top: 32px;
}

.footer-main-newslatter-text h4 {
    text-align: left;
    width: 75%;
}

.footer-main-newslatter-box
 {
    margin-top: 16px;
 }

 .footer-main-navItems-col-one{
    justify-content: flex-start !important;
    width: 50% !important;
 }

 .footer-main-navItems-col-two{
     justify-content: flex-start !important;
     width: 50% !important;

 }

 .footer-main-navItems-col-three{

     justify-content: flex-start !important;

 }

 .footer {
    margin-top: 16px;
    border-radius: 30px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.footer-main-newslatter-box p {
    margin-bottom: 10px !important;
}


/* service page */

.service-banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: inherit !important;
    margin-top: 105px;
    border-radius: 30px;
    padding-top: 80px;
    background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%) !important;
}

.mobile-service-banner{
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 245px;
    border-radius: 30px; 
    margin-top: 40px;
}

.service-home {
    margin-left: 16px;
    margin-right: 16px;
}

.service-banner .container {
    padding: 0px !important;
}

.service-banner-text p{
    margin-bottom: 0px !important;
}

.service-items-1,.service-items-2 {
    margin-top: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.service-items-1 .row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.service-item-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    padding-top: 20px;
}

.service-item-body h4,.service-item-body h3 {
    text-align: center;
}

.service-item-body a {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.service-cleaning-img img {
    width: 100%;
    height: 466px;
    object-fit: cover;
    border-radius: 30px;
}

.cta-col{
    padding: 0px !important;
}

.service-cleaning-text-col {
    background: #FEF6D2;
    border-radius: 30px;
    padding: 32px 16px 32px 16px;
}

.service-cleaning-text a {
    margin-top: 16px;
}

.home-cta-image-new img {
    width: 100%;
    height: 446px;
    object-fit: cover;
    border-radius: 30px;
}


.step-one-cleaning, .step-two-cleaning, .step-three-cleaning {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 100px;
    border-radius: 30px;
}

.wrapper .header ul li {
    margin-right: 60px;
    position: relative;
}

.wrapper .header ul li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 60px;
    width: 170%;
    height: 2px;
    background: rgba(255, 255, 255, 1);
}
    
.step-one-form-wrapper, .step-two-form-wrapper, .step-three-form-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

.wrapper .header {
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
    background: rgba(249, 209, 32, 1);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 80px;
    padding-right: 80px;
    border-radius: 30px;
}

.wrapper .header {
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
    background: rgba(249, 209, 32, 1);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 80px;
    padding-right: 80px;
    border-radius: 30px;
}

.step-one-cleaning .container, .step-two-cleaning .container{
    padding: 0px !important;
}

.step-one-cleaning .col-md-12, .step-two-cleaning .col-md-12{
    padding: 0px !important;
}

.form-card {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid rgba(249, 209, 32, 1);
    border-radius: 30px !important;
    padding: 32px !important;
}

.p-3 {
    padding: 12px !important;
}

.px-3 {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.post-code-col{
    margin-top: 15px;
}

.step-one-btn, .step-two-btn, .step-three-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}


/* pricelist */

.price-list {
    margin-left: 16px;
    margin-right: 16px;
}

.price-list-banner.d-flex.align-items-center {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: inherit !important;
    margin-top: 105px;
    border-radius: 30px;
    padding-top: 80px;
    background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%) !important;
}

.mobile-pricelist-banner{
    background: url('/images/PriceList/Matto-Price_list-Banner-Image.jpg') !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        height: 245px;
        border-radius: 30px;
        margin-top: 40px;
}

.contact-address-list{
    margin-left: 40px !important;
}
.Track-delivery-desktop{
display: none !important;
}
.Track-delivery-mobile{
display: block !important;
border-radius: 20px;
}

.order-card
 {
    background: #F3C623;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    color: #1a1a1a;
    max-width: 540px;
    width: 90%;
    margin: 0 auto;
}

.service-itmes-box {
    background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%);
    border: 1px solid #F9D120;
    border-radius: 30px;
    box-shadow: 0px 44px 30px -30px #00000026;
    padding: 16px;
}

.blog-page-full-wrap .hero-section input {
  width: 100%;  
}

.footer-main-icons a {
    padding-right: 4px;
}

.number-of-carpets, div#carpet-sizes{
    margin-bottom: 10px !important;
}


.service-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.end-section-order h4 {
    margin-top: 20px;
    margin-bottom: -10px;
}
.service-itmes-box .col-md-4{
    justify-content: center !important;
}

.service-itmes-box  .col-md-2 {
    display: block !important;
}
.service-items-box-text h3 {
    text-align: center;
}

.service-items-box-text {
    margin-top: 16px;
    margin-bottom: 16px;
}

#panel-change-wrap{
display: none !important;
}

#panel-change-wrap-mobile{
display: block !important;
}

.pricing-card {
    padding-top: 32px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 32px;
    width: 86%;
}

.price-table .head {
    font-weight: 400;
    padding: .5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    font-size: 16px;
    line-height: 22px;
    color: #303030;
}

.price-table .cell {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    font-weight: 400;
    font-size: 16px;
    color: #303030;
    line-height: 22px;
}

.price-table-btn {
    flex-direction: column;
    align-items: center;
    padding-left: 0px;
    padding-right: 0px;
}

.price-table-btn a {
    width: 70%;
}

/* about */

.about-timeline-section {
    display: none !important;
}
.about-timeline-section-mobile {
    display: block !important;
}


.about-banner.d-flex.align-items-center {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: inherit !important;
    margin-top: 105px;
    border-radius: 30px;
    padding-top: 80px;
    background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%) !important;
}

.mobile-about-banner{
        background-repeat: no-repeat !important;
        background-size: cover !important;
        height: 245px;
        border-radius: 30px;
        margin-top: 40px;
}

.about-timeline-section-mobile{
    background: #F9D120;
    padding: 40px 16px;
    border-radius: 30px;
    margin-top: 16px;

}

.about-banner-top {
    margin-left: 16px;
    margin-right: 16px;
    overflow: hidden;
}

.timeline-image img {
    border-radius: 20px;
}

.timeline-text-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 32px;
}

.approach {
    padding-top: 60px;
    padding-bottom: 0px;
}

.approach-header p {
    margin-bottom: 0px !important;
}
.approach-row{
    margin-top: 40px;
}

.approach-box {
    margin-bottom: 16px;
}

.approach-box {
    padding: 40px 32px;
}

.about-faq-box {
    padding: 60px 16px;
    height: auto;
    width: 100%;
    background: #F9D120;
    border-radius: 30px;
}
.about-faq-col{
    padding: 0px !important;
}

.about-main-image {
    display: none !important;
}


/* contact */

.contact {
    padding-left: 16px;
    padding-right: 16px;
}

.contact-banner {
        background-position: center;
        height: inherit !important;
        margin-top: 105px;
        border-radius: 30px;
        padding-top: 80px;
        background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%) !important;
}

.mobile-contact-banner{
         display: block !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        height: 245px;
        border-radius: 30px;
        margin-top: 40px;
}

.address-box {
    padding: 40px 16px;
    background: url(/images/Contact/Matto-Contact-Social-Background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.main-icon-box {
    background: #FFFFFF;
    border-radius: 30px;
    padding: 32px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.contact-form-image {
    background: url(/images/Contact/Matto-Contact-Form-Image.jpg);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    height: 520px;
    border-radius: 30px;
    object-fit: cover;
}

.form-box-header h2 {
    text-align: center;
}

.iframe-map iframe {
    height: 358px;
}

.google-map {
    margin-top: 16px;
}


/* carpet cleaning */

.ServiceCleaning-banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: inherit !important;
    margin-top: 105px;
    border-radius: 30px;
    padding-top: 80px;
    background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%) !important;
}

.mobile-ServiceCleaning-banner{
    display: block !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 245px;
    border-radius: 30px; 
    margin-top: 40px;
}


.ServiceCleaning {
    padding-left: 16px;
    padding-right: 16px;
}

.ServiceCleaning-gallery .gallery-image img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.btn-summery-page {
    margin-top: 20px;
    margin-bottom: 20px;
}

.crad-header-summery {
    background: transparent;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 0px !important;
}

.order-number {
    background: rgba(149, 255, 123, 0.34);
    border-radius: 30px;
    padding: 10px !important;
    width: 100%;
    margin-bottom: 20px;
}

.summery-page .form-card {
    padding: 20px !important;
}

.order-number-card h3 {
    padding-bottom: 0px;
}

.summery-page .order-number-card {
                background: rgba(253, 237, 166, 1);
        border-radius: 15px;
        text-align: center;
        padding: 20px;
    }

.order-number h3 {
    font-size: 18px;
}


#xcarpet-overlay.gallery-image-box {
    position: absolute !important;
    top: 0px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-align: center;
    z-index: 1;
    bottom: 16px;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.ServiceCleaning-pricelist {
    background: url('/images/CarpetInner/Matto-Carpet-Cleaning-Price-Full-Background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.price-list-header {
    margin-bottom: 40px;
}

div#xcarpet-overlay h1 {
    padding-left: 20px;
    padding-right: 20px;
}




.carpet-breadth-col{
        margin-top: 10px;
}

input.form-control, textarea.form-control, select {
    padding: 12px 16px !important;
    border: 1px solid #999999 !important;
    border-radius: 20px !important;
}


.subscription {
    background: transparent;
    border: none !important;
    border-radius: 30px;
    padding: clamp(20px, 4vw, 48px);
}

.carpet-form-image
 {
    height: 520px;
}


/* model */

.model{
    z-index: 999999 !important;  
}
.orderModel-col a {
    margin-bottom: 10px;
}



.ServiceCleaning-banner-text input.subscribe {
    background: #FFFFFF;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 30px;
    width: 100%;
    border: 1px solid white;
    border: 1px solid #999999;
    width: 90%;
}


.trackOrder-faq-box {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.home-faq-text {
    margin-top: 20px;
}

.faq-order-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.TrackOrderDetail-page {
    padding-left: 16px;
    padding-right: 16px;
}

.order-summery-box-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.TrackOrderDetails {
    margin-top: 125px;
}

.order-details-text{
    margin-bottom: 20px;
}

.order-track{ padding: 1.25rem .75rem 1.25rem 1.25rem; }
    .track{ display: block; }
    .track-rail{
              left: 44px;
        top: 90px;
        bottom: 90px;
        width: 4px;
        height: auto;
    }
    .track-rail::after{
      width: 4px;
      height: calc(var(--progress-ratio,0) * 100%);
    }
    .step {
        display: flex;
        gap: 5px;
        text-align: left;
        align-items: center;
        padding: 15px;
        position: relative;
    }
    .step + .step{ margin-top: 4px; }
    .step-figure{ 
        margin: 0; 
    }

    .step-figure img{ 
        width: 60px; 
        height: 60px; 
        object-fit: cover;
    }
    .step-figure i{ font-size: 28px; }
    .step-dot{
              left: 26px;
        bottom: auto;
        top: 75px;
        transform: translate(-50%, -50%);
    }

.timeScheduleDesktop {
    display: flex;
    flex-direction: column;
    align-items: center;
}


button#prevWeek {
    position: absolute;
    left: 20px !important;
    top: 210px !important;
    width: 42%;
    padding: 10px;
}

button#nextWeek {
    position: absolute;
    right: 20px !important;
    top: 210px !important;
    width: 42%;
    padding: 10px;
}

.bottom-side-btn {
    width: 100% !important;
}
    

.selectMoths-module {
    width: 100%;
    margin-top: 50px !important;
}

.mg-btn {
    width: 100%;
}

.badge-class{
    font-size: 16px !important;
}



.time-slot {
    font-size: 12px;
}

.timeBlock-row .col-2 {
    width: 25% !important;
}

.mg-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    padding: 18px;
    display: none;
    z-index: 1000;
    width: 100%;
}

.mg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 0px;
    justify-items: stretch;
    justify-content: space-between;
}

.mg-item {
    background: transparent;
    border: 0;
    padding: 8px 6px;
    border-radius: 10px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
}

.btn-list-process {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.btn-list-process .step-two-btn.back {
    margin-top: 20px;
    margin-bottom: 20px;
}

.step-three-cleaning .container, .step-three-cleaning .col-md-12{
    padding: 0;
}

.step-three-form {
    margin-top: -30px;
}

.confirmation-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 1.5rem;
}

.order-number-card {
    background: white;
    border-radius: 15px;
    text-align: center;
    padding: 45px;
}

.footer-note {
    background-color: rgba(255, 233, 132, 1);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.variant-button img {
    width: 30px;
    height: auto;
    object-fit: cover;
}

.variant-options button {
    border-radius: 10px;
    padding: 10px;
    margin-right: 5px;
    background: white;
    border: 1px solid #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.variant-button p {
    font-size: 12px !important;
    text-align: center;
}

.order-details-lists {
    margin: 0;
}

.confirmation-card h3 {
    text-align: center;
}

#OrderModelHeader{
z-index: 9999999999999999;
}


/* privacy-policy */

.privacy-policy {
    margin-top: 105px;
    padding-left: 16px;
    padding-right: 16px;
}

.privacy-header {
    border-radius: 30px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(249, 209, 32, 0.2) 0%, rgba(255, 255, 255, 0) 111.39%);
    padding-top: 60px;
    padding-bottom: 60px;
}

.privacy-contents {
    border: 1px solid #F9D120;
    border-radius: 30px;
    padding-top: 24px;
    padding-bottom: 24px;
}


/* blog */

.blog-stories-order-nw-btn-wrap {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.blog-stories-order-nw-btn-wrap .blog-btn{
    width: 100%;
}

.blog-page-full-wrap .about-bottom-two-wrapper {
    padding-top: 0px;
}

.blog-page-full-wrap .circle-filters {
    margin-top: -20px;
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    flex-direction: row;
            overflow-x: scroll;
        width: 200%;
}

.blog-page-full-wrap .toggle-btn {
    font-size: 14px;
    border: none;
    background: transparent;
    padding: 10px 30px;
    font-weight: 600;
    color: #b58900;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}

.home-from-sucess .order-details-lists {
    margin: 40px 10px !important;
}
.home-from-sucess {
    margin-top: 16px;
}

.home-from-sucess .crad-header-summery {
    margin-top: 20px;
}


.blog-page-full-wrap .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff8d6;
    border: 2px solid #ffd633;
}
.blog-page-full-wrap .circle.active {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff8d6;
    border: 2px solid #E6E6E6;
}

.blog-page-full-wrap .toggle-buttons {
    display: flex;
    justify-content: center;
    margin: 50px 0 50px;
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
}


.blog-page-full-wrap .blog-btn {
    width: 100%;
}

.toggle-buttons .container {
    padding: 0px !important;
}

/* blog Inner */

.blog-inner {
    margin-top: 105px;
    padding-left: 16px;
    padding-right: 16px;
}

.blog-inner-header {
    border-radius: 30px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    padding-top: 60px;
    padding-bottom: 60px;
}

.blog-inner-body {
    border: 1px solid #F9D120;
    border-radius: 30px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.BlogInner-body-main-image {
    padding-top: 16px;
    padding-bottom: 16px;
}

.BlogInner-body-main-image img {
    height: 520px;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
}


.related-article {
    margin-top: 60px;
    margin-bottom: 0px;
}

.related-article-header {
    padding-bottom: 40px;
}

.blog-inner-end {
    padding-left: 16px;
    padding-right: 16px;
}

.form-check-input.pickup-toggle {
    width: 50px;
    height: 30px;
    background-color: rgba(254, 246, 210, 1);
    border: 2px solid #ffd43b;
    transition: all 0.3s 
ease-in-out;
    cursor: pointer;
    margin-top: 10px;
}

.form-switch{
    padding: 15px !important;
}



.form-check-input.pickup-toggle::before {
    content: "";
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    top: 3.3px;
    left: 3.4px;
    transition: transform 0.3s 
ease-in-out;
}

.form-check-input.pickup-toggle:checked::before {
    transform: translateX(18px);
}

.carpets_json-error{
        margin-top: -20px !important;
    margin-bottom: 20px;
}

.form-check.form-switch.d-flex.justify-content-between h5 {
    width: 60%;
}



    
}


/* iPhone 5, 5s, SE (1st gen) — Portrait */
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    
    .form-card {
        background-color: rgba(255, 255, 255, 1);
        border: 2px solid rgba(249, 209, 32, 1);
        border-radius: 30px !important;
        padding: 16px !important;
    }

    .p-3 {
        padding: 8px !important;
    }

    .check-label {
    border: 1px solid rgba(153, 153, 153, 1) !important;
    border-radius: 15px;
    background-color: #fff;
    padding: 8px 8px;
    cursor: pointer;
    transition: all 0.2s 
     ease-in-out;
    font-weight: 500;
}






}


 /* Styles for tablets in portrait mode */
@media only screen and (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
 
    
}