/************************************/
/***      36. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1880px){
	
	.bg-section{
		max-width: calc(100% - 40px);
		margin: 0 20px;
	}

	header.main-header .container-fluid,
	.hero .container-fluid{
		padding: 0 15px;
	}

	.hero,
	.page-header{
		margin-top: 20px;
	}
	
	.main-footer{
		margin-bottom: 20px;
		margin-top: 20px;
	}

}

@media only screen and (max-width: 1480px){

	header.main-header .header-sticky{
		max-width: 100%;
	}

	header.main-header .header-sticky.active{
		border-radius: 0;
		border-left: none;
		border-right: none;
		padding: 0;
	}
}

@media only screen and (max-width: 1024px){

	.main-menu .nav-menu-wrapper{
		margin: 0 10px;
	}

	.main-menu ul li a{
		padding: 15px 10px !important;
	}
}

@media only screen and (max-width: 991px){

	.btn-default{
		padding: 14px 40px 14px 18px;
	}

	.btn-default::before{
		width: 12px;
		height: 12px;
		transform: translate(-18px, -50%);
	}

	.btn-default:hover::before{
		transform: translate(-18px, -50%) rotate(45deg);
	}

	.btn-default.border-btn{
		padding: 13px 40px 13px 18px;
	}

	.readmore-btn{
		padding-right: 22px;
	}

	.readmore-btn::before{
		width: 12px;
		height: 12px;
	}

	.navbar{
		padding: 20px 0;
	}

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.bg-section{
		max-width: 100%;
		border-radius: 0;
		margin: 0;
	}
	
	.section-row{
		margin-bottom: 40px;
	}

	.section-row .section-title.section-title-center{
		max-width: 100%;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title h3{
		margin-bottom: 10px;
	}

	.section-title h1{
		font-size: 45px;
	}

	.section-title h2{
		font-size: 36px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}
    
	.hero{
		padding: 140px 0 0;
	}

	.hero.hero-bg-image{
		padding: 170px 0 80px;
	}

	.hero-content{
		height: auto;
		margin-bottom: 30px;
	}

	.hero-content .section-title p{
		margin-top: 15px;
	}

	.hero-img{
		width: 100%;
		height: auto;
		max-width: 75%;
		margin: 0 auto;
		padding: 0 100px 0 50px;
	}

	.hero-img figure img{
		margin: 0;
	}

	.hero-rating-box{
		padding: 20px;
	}

	.hero-rating-header{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.hero-rating-star{
		margin-bottom: 10px;
	}

	.about-us{
		padding: 50px 0 20px;
	}

	.about-title-box{
		max-width: 100%;
	}

	.about-us-btn{
		margin-top: 30px;
	}

	.about-us-item{
		padding: 30px 25px;
	}

	.about-us-image{
		margin-bottom: 30px;
	}

	.about-item-content h3{
		margin-bottom: 10px;
	}

	.our-services{
		padding: 50px 0;
	}

	.service-item{
		padding: 30px;
	}

	.service-item .icon-box{
		margin-bottom: 30px;
	}

	.service-content,
	.service-item-list{
		margin-bottom: 20px;
	}

	.service-content h3{
		margin-bottom: 10px;
	}

	.service-item-list ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.service-item-list ul li::before{
		font-size: 16px;
	}
	
	.section-footer-text{
		margin-top: 10px;
	}

	.our-feature{
		padding: 50px 0;
	}

	.our-feature .section-title h2 img{
		max-width: 90px;
	}

	.feature-item{
		padding: 30px;
	}

	.feature-item-header{
		margin-bottom: 50px;
	}

	.feature-item .icon-box img{
		max-width: 80px;
	}

	.feature-list{
		max-width: 100%;
		margin-top: 20px;
	}

	.feature-list ul{
		gap: 15px 20px;
	}

	.feature-list ul li{
		padding: 8px 18px;
	}

	
	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-content{
		margin-bottom: 30px;
	}

	.why-choose-item-list{
		padding-top: 30px;
	}

	.why-choose-item{
		margin-bottom: 30px;
	}

	.why-choose-image{
		max-width: 55%;
		margin: 0 auto 50px;
		padding: 15px;
	}

	.contact-us-circle a img{
		max-width: 140px;
	}

	.our-pricing{
		padding: 50px 0;
	}

	.pricing-box{
		padding: 30px;
	}

	.pricing-box .pricing-header{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.pricing-content h2{
		font-size: 32px;
		margin-bottom: 20px;
	}

	.pricing-content h2 span{
		padding: 7px 20px;
	}

	.pricing-content{
		margin-bottom: 20px;
	}

	.pricing-btn{
		margin-bottom: 30px;
	}

	.pricing-btn .btn-default{
		padding: 14px;
	}

	.pricing-list ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.pricing-list ul li::before{
		font-size: 16px;
	}

	.pricing-benefit-list{
        margin-top: 5px;
    }

	.pricing-benefit-list ul{
        gap: 15px 30px;
    }

	.book-appointment{
		padding: 50px 0;
	}

	.appointment-image,
	.appointment-image figure,
	.appointment-image figure img{
		height: auto;
	}

	.appointment-image{
		margin-bottom: 30px;
	}

	.appointment-timing-box{
		padding: 20px;
	}

	.appointment-form{
		height: auto;
		padding: 30px;
	}

	.appointment-form .form-control{
		padding: 12px 20px;
	}

	.appointment-form form .form-group select{
		padding: 12px 30px 12px 20px;
	}

	.appointment-form .btn-default{
		padding: 14px;
	}

	.benefit-counter-list{
		gap: 30px 40px;
		margin-top: 40px;
		padding-top: 40px;
	}

	.benefit-counter-item{
		width: calc(25% - 30px);
		text-align: center;
		flex-direction: column;
	}

	.benefit-counter-item::before{
		right: -20px;
	}

	.benefit-counter-item .icon-box{
		margin: 0 0 10px 0;
	}

	.benefit-counter-content{
		width: 100%;
	}

	.benefit-counter-content h2{
		font-size: 26px;
	}

	.benefit-counter-content p{
		font-size: 14px;
	}

	

	.our-testimonials{
		padding: 50px 0;
	}

	.satisfy-client-box{
		justify-content: left;
		margin-top: 15px;
	}

	.satisfy-client-image figure{
		width: 52px;
		height: 52px;
	}

	.testimonial-image{
		margin-bottom: 30px;
	}

	.testimonial-image figure img{
		aspect-ratio: 1 / 0.6;
	}

	.goolge-rating-content .icon-rating p{
		font-size: 26px;
	}

	.testimonial-slider{
		margin-left: 0;
	}

	.testimonial-header{
		margin-bottom: 20px;
	}

	.testimonial-content{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	

	.main-footer{
		padding: 50px 0 0;
	}

	.about-footer{
		margin: 0 0 30px 0;
	}

	.about-footer-content,
	.footer-logo{
		margin-bottom: 20px;
	}

	.footer-newsletter-form{
		margin-top: 20px;
	}

	.footer-social-links{
		margin-top: 30px;
	}

	.footer-copyright{
		margin-top: 30px;
		padding: 30px 0;
	}

	.footer-links ul li{
		margin-right: 15px;
	}

	.page-header{
		padding: 160px 0 70px;
	}

	.page-header-box h1{
		font-size: 45px;
		margin-bottom: 10px;
	}

	.our-approach{
		padding: 50px 0;
	}

	.approach-content{
		margin-bottom: 30px;
	}

	.approach-image img,
	.approach-list-box .approach-image img{
        aspect-ratio: 1 / 0.58;
    }

	.approach-list-box{
		margin: 0;
	}

	.approach-list-item .icon-box{
		margin-right: 15px;
	}
	
	.approach-list-content{
		width: calc(100% - 65px);
	}

	

	.page-services{
		padding: 50px 0 20px;
	}

	.page-service-single{
 	   padding: 50px 0;
	}

	.page-single-sidebar{
		position: initial;
		margin: 0 0 30px;
	}

	.page-catagery-list{
		margin-bottom: 30px;
		padding: 20px;
	}

	.page-catagery-list h3{
		margin-bottom: 20px;
	}

	.page-catagery-list ul li a{
		padding: 12px 35px 12px 15px;
	}

	.page-catagery-list ul li a::before{
		right: 15px;
		width: 12px;
		height: 12px;
	}

	.sidebar-cta-box{
		padding: 20px;
	}

	.sidebar-cta-content h3{
		margin-bottom: 20px;
	}

	.sidebar-cta-content .btn-default{
		padding: 12px;
	}

	.sidebar-cta-image img{
		aspect-ratio: 1 / 0.5;
	}

	.page-single-image{
		margin-bottom: 20px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.service-entry ul{
		gap: 10px 20px;
	}

	.service-entry ul li{
		padding-left: 25px;
	}

	.service-entry ul li:before{
		font-size: 16px;
	}

	.service-experience-box,
	.service-results-box,
	.service-extend-box{
		margin-top: 40px;
	}

	.service-experience-info{
		gap: 30px;
		margin-top: 30px;
	}

	.service-experience-info .why-choose-item-list{
		width: calc(70% - 15px);
	}

	.service-experience-info .why-choose-item-list .why-choose-item-header{
		width: 40%;
	}

	.service-experience-info .why-choose-item-list .why-choose-item-content{
		width: calc(60% - 20px);
	}

	.service-experience-info .service-item{
		width: calc(30% - 15px);
		padding: 20px;
	}

	.service-results-counters{
		gap: 30px 40px;
		margin-top: 30px;
	}

	.service-result-counter-item{
		width: calc(25% - 30px);
	}

	.service-result-counter-item h2{
		margin-bottom: 10px;
	}

	.service-results-list{
		margin: 30px 0;
	}

	.service-extend-list{
		padding: 20px;
		margin-top: 30px;
	}

	
	.page-pricing{
		padding: 50px 0;
	}

	.page-testimonials{
    	padding: 50px 0 20px;
	}

	.page-testimonials .testimonial-item{
		padding: 20px;
	}

	.page-testimonials .testimonial-item .testimonial-content p{
		font-size: 14px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	

	.page-contact-us{
		padding: 50px 0;
	}

	.contact-us-content{
		margin: 0 0 30px 0;
	}

	.contact-info-list{
		padding: 20px;
	}

	.contact-info-item{
		padding: 20px 20px 20px 0;
	}

	.contact-info-item:nth-of-type(2n + 2){
		padding: 20px 0 20px 20px;
	}

	.contact-info-item:nth-child(-n + 2){
		padding-top: 0;
	}

	.contact-info-item:nth-last-child(-n + 2){
		padding-bottom: 0;
	}

	.contact-social-links{
		padding: 20px;
	}

	.contact-us-form{
		padding: 30px;
	}
	
	.contact-form .form-control{
		padding: 12px 15px;
		border-radius: 10px;
	}

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

	.google-map iframe{
		height: 420px;
	}

	.page-book-appointment{
		padding: 50px 0;
	}

	.error-page{
		padding: 50px 0;
	}

	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-image img{
		max-width: 80%;
	}

	.error-page-content .section-title,
	.error-page-content-body p{
		margin-bottom: 15px;
	}
}

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

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 30px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-content .section-title p{
		font-size: 16px;
	}

	.hero-btn{
		gap: 15px;
	}
	
	.hero-img{
		padding: 0 50px 0 0;
		max-width: 100%
	}
	
	.hero-rating-box{
		padding: 15px;
	}

	.hero-rating-header{
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

	.hero-rating-header img{
		max-width: 24px;
		margin-right: 10px;
	}

	.hero-rating-star i{
		font-size: 14px;
	}

	.hero-rating-header p,
	.hero-rating-counter p{
		font-size: 16px;
	}

	.about-us-item{
        padding: 20px;
    }

	.about-item-content h3{
        font-size: 18px;
    }

	.service-item{
        padding: 20px;
    }

	.service-content h3{
		font-size: 18px;
	}

	.our-feature .section-title h2 img{
        max-width: 70px;
    }

	.feature-item{
        padding: 20px;
    }

	.feature-item .icon-box{
		top: -10px;
		right: -10px;
	}

	.feature-item .icon-box img{
		max-width: 60px;
	}

	.feature-item-header{
        margin-bottom: 30px;
    }

	.feature-item-body h3{
		font-size: 18px;
	}

	.feature-list ul{
        gap: 10px;
    }

	.feature-list ul li{
		font-size: 14px;
		padding: 6px 10px;
	}

	.what-we-do-item-list{
        gap: 20px;
    }
	
	.why-choose-item-header,
	.why-choose-item-content{
		width: 100%;
	}

	.why-choose-item-content{
		border-top: 1px solid var(--divider-color);
		border-left: none;
		padding: 10px 0 0;
		margin: 10px 0 0;
	}

	.why-choose-item-title h3{
		font-size: 18px;
	}

	.why-choose-image{
		max-width: 100%;
        padding: 10px;
    }

	.pricing-box{
        padding: 20px;
    }

	.pricing-box .pricing-header h3{
		font-size: 18px;
	}

	.pricing-content h2{
		font-size: 26px;
		gap: 10px 20px;
	}
	
	.pricing-benefit-list ul{
		gap: 10px;
	}

	.pricing-benefit-list ul li{
		font-size: 14px;
	}

	.pricing-benefit-list ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.appointment-image figure img{
		aspect-ratio: 1 / 0.95;
	}

	.appointment-timing-box{
		bottom: 20px;
		left: 20px;
		padding: 15px;
	}

	.appointment-timing-box h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.appointment-timing-box ul li{
		font-size: 14px;
	}
	
	.appointment-form{
        padding: 30px 20px;
    }

	.benefit-counter-list{
		gap: 30px;
        margin-top: 30px;
        padding-top: 30px;
    }

	.benefit-counter-item{
		width: calc(50% - 15px);
	}

	.benefit-counter-item:nth-child(2n + 2):before{
		display: none;
	}

	
    .satisfy-client-image figure{
        width: 42px;
        height: 42px;
    }

	.testimonial-image figure img{
        aspect-ratio: 1 / 0.8;
    }

	.goolge-rating-box{
		bottom: 20px;
		left: 20px;
	}

    .goolge-rating-content .icon-rating p{
        font-size: 22px;
    }

	.author-content h3{
		font-size: 18px;
	}

	.author-content p{
		font-size: 14px;
	}

	.testimonial-btn{
		margin-top: 20px;
		justify-content: left;
	}

	.post-item-content h2{
		font-size: 18px;
	}

	.footer-logo{
        margin-bottom: 15px;
    }

	.footer-contact-details{
		gap: 20px;
	}

	.footer-contact-item-content h3{
		font-size: 18px;
	}

	.footer-newsletter-box h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.footer-newsletter-form .form-group .form-control{
		width: 60%;
	}

	.footer-newsletter-form .form-group .btn-default{
		width: 40%;
	}

	.footer-social-links{
		gap: 10px;
	}

	.footer-social-links h3{
		font-size: 18px;
	}

	.footer-copyright{
		justify-content: center;
		padding: 15px 0;
	}

	.footer-links ul li{
		font-size: 14px;
	}

	.page-header-box h1{
		font-size: 30px;
	}

	.page-header-box ol li.breadcrumb-item{
		font-size: 16px;
	}

	.approach-list-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	
	.page-catagery-list h3,
	.sidebar-cta-content h3{
		font-size: 18px;
	}

	.page-single-image img{
        aspect-ratio: 1 / 0.7;
    }

	.service-entry h2{
		font-size: 26px;
	}

	.service-entry ul li{
		width: 100%;
	}

	.service-experience-info .why-choose-item-list,
	.service-experience-info .why-choose-item-list .why-choose-item-header,
	.service-experience-info .why-choose-item-list .why-choose-item-content,
	.service-experience-info .service-item{
		width: 100%;
	}

	
	

	.contact-info-item{
        width: 100%;
        border-bottom: 1px solid var(--dark-divider-color);
        border-right: none;
        margin-bottom: 20px;
        padding: 0 0 20px 0;
    }
    
    .contact-info-item:nth-of-type(2n + 2){
        padding: 0 0 20px 0;
    }

    .contact-info-item:nth-last-child(-n + 2){
        border-bottom: 1px solid var(--dark-divider-color);
        padding-bottom: 20px;
    }

    .contact-info-item:last-child{
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

	.contact-item-content h3,
	.contact-social-links h3{
		font-size: 18px;
	}

	.contact-us-form{
        padding: 20px;
    }

	.google-map iframe{
        height: 320px;
    }
}