/*You can add your won color also */
@media (min-width: 767px) and (max-width: 1024px) {
.navbar-top .elementor-widget-social{padding-left:200px;}
.section-title {font-size: 40px;}
.small-title {font-size: 20px;}
.social-links-bordered a i {width: 40px;height: 40px;line-height: 40px;}
.input-lg {font-size: 14px;}
.full-search input[type='text'] {width: 96%;}
#roof .quick-contacts span {padding: 0 10px;}
#roof .social-links a {margin: 0 2px;}
.navbar-engage .navbar-nav > li > a,
.navbar-engage.affix .navbar-nav > li > a,
.navbar-engage .navbar-nav > li > a:focus,
.navbar-engage.affix .navbar-nav > li > a:focus {font-size: 12px;padding: 0;margin: 20px 10px;}
.navbar-engage .navbar-brand img,
.navbar-engage.affix .navbar-brand img {width: 100px;}
.navbar-engage .dropdown-menu > li > a,
.navbar-engage.affix .dropdown-menu > li > a {font-size: 12px;}
.navbar-engage .navbar-nav > li > a:before,
.navbar-engage.affix .navbar-nav > li > a:before {bottom: 0;}
.navbar-engage.affix .navbar-brand {padding: 15px;}
.top_search_con{display: none;}
#carousel-area .item {height: 400px;}
#carousel-area .item .carousel-caption h2 {font-size: 50px;}
#carousel-area .item .carousel-caption h3 {font-size: 20px;}
#carousel-area .carousel-control i {width: 40px;height: 40px;padding: 12px 0;font-size: 15px;}
#service-block-main .service-item {margin: 60px 0;}
#service-block-main .service-item h2 {font-size: 24px;}
#service-block-1 .service-item .service-content h2 {font-size: 26px;}
#portfolio .portfolio-items .mix,
#portfolio .portfolio-items .gap {width: 50%;}
#portfolio .portfolio-items figure figcaption {padding: 32px;}
#portfolio .portfolio-items.col-3 .mix,
#portfolio .portfolio-items.col-3 .gap {width: 50%;}
#other-services .other-service-item .service-content h3 {font-size: 18px;}
#progress {overflow-x: hidden;}
#progress .our-progress:before {background: none;}
#progress .progress-bottom {padding-bottom: 0;padding-top: 0;}
#progress .progress-item {margin: 30px 0;}
#notice h4 {font-size: 30px;}
#notice p {font-size: 20px;}
#notice .notice-button {margin-top: 15px;}
#cool-facts .fact-block {margin: 30px 0;}
#cool-facts .section-subtitle {padding-bottom: 30px;font-size: 24px;}
#blog .blog-item-wrapper {margin: 30px 0;}
#blog .blog-item-text .blog-item-info a {padding-right: 6px;}
#team .team-item {margin: 30px 0;}
.pricing-table {margin: 60px 0;}
.pricing-table h3 {font-size: 24px;}
footer .footer-widget {margin: 30px 0;}
#service-block-2 .service-inner h3 {font-size: 24px;}
#why-choose h2 {font-size: 24px;}
#why-choose .tab-container h2 {font-size: 24px;}
.social-icons-fill li {margin-right: 1px;}
.massage-box .massage-box-icon {height: 60px;}
#tabs .tab-content h1 {font-size: 24px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.navbar-top .elementor-widget-social{display: none;}
.section-title {font-size: 36px;}
.page-header .page-subtitle {font-size: 18px;}
.navbar-header{width: 100%;}
.navbar-engage .dropdown .sub-menu {top: 0;left: 0 !important;padding: 0;border: none;-webkit-animation: fadeInUpMenu 0.4s;-moz-animation: fadeInUpMenu 0.4s;-ms-animation: fadeInUpMenu 0.4s;-o-animation: fadeInUpMenu 0.4s;animation: fadeInUpMenu 0.4s;}
#carousel-area{padding-top: 64px;}
#carousel-area .item {height: 300px;}
#carousel-area .item .carousel-caption h2 {font-size: 30px;}
#carousel-area .item .carousel-caption h3 {font-size: 18px;}
#carousel-area .item .carousel-caption .btn {margin: 5px;}
#carousel-area .carousel-control i {width: 40px;height: 40px;padding: 12px 0;font-size: 15px;}
#carousel-area .carousel-indicators {display: none;}
#service-block-main .service-item {margin: 60px 0;}
#service-block-main .service-item h2 {font-size: 24px;}
#portfolio .portfolio-items .mix,
#portfolio .portfolio-items .gap {width: 50%;}
#portfolio .portfolio-items .mix figure h4,
#portfolio .portfolio-items .gap figure h4 {display: none;}
#portfolio .portfolio-items .mix figure figcaption::after,
#portfolio .portfolio-items .gap figure figcaption::after,
#portfolio .portfolio-items .mix figure figcaption::before,
#portfolio .portfolio-items .gap figure figcaption::before {display: none;}
#portfolio .portfolio-items figure figcaption {padding: 10px;}
#portfolio .controls .btn {margin: 5px 2px;}
#portfolio .portfolio-items.col-3 .mix,
#portfolio .portfolio-items.col-3 .gap {width: 50%;}
#portfolio .portfolio-items.col-3 .mix figure h4,
#portfolio .portfolio-items.col-3 .gap figure h4 {display: none;}
#portfolio .portfolio-items.col-3 .mix figure figcaption::after,
#portfolio .portfolio-items.col-3 .gap figure figcaption::after,
#portfolio .portfolio-items.col-3 .mix figure figcaption::before,
#portfolio .portfolio-items.col-3 .gap figure figcaption::before {display: none;}
#portfolio .portfolio-items figure figcaption {padding: 25px;}
#portfolio .controls .btn {margin: 5px 2px;}
#progress {overflow-x: hidden;}
#progress .our-progress:before {background: none;}
#progress .progress-bottom {padding-bottom: 0;padding-top: 0;}
#progress .progress-item {margin: 30px 0;}
#cool-facts .fact-block {margin: 30px 0;}
#testimonial #testimonial-carousel p {font-size: 20px;}
#testimonial #testimonial-carousel .carousel-control.left {left: 15px;}
#testimonial #testimonial-carousel .carousel-control.right {right: 15px;}
#testimonial .item blockquote small span {display: block;line-height: 40px;}
#blog .blog-item-wrapper {margin: 30px 0;}
#clients #clients-scroller img {width: 80%;margin-left: 34px;}
#team .team-item {margin: 30px 0;}
.pricing-table {margin: 60px 0;}
.pricing-table h3 {font-size: 24px;}
#tabs .nav-tabs li a {font-size: 12px;padding: 10px 12px;}
#why-choose .tab-container h2 {font-size: 26px;}
#why-choose .tab-menu .list-group {width: 536px;margin: 40px 8px;float: left;}
#why-choose .tab-menu .list-group > a {float: left;margin: 0px 8px;}
.page-header-content h2 {text-align: center;}
}
@media (min-width: 320px) and (max-width: 480px) {
.navbar-top .elementor-widget-social{display: none;}
.navbar-top .elementor-widget-language{display:none;}
.section-title {font-size: 26px;line-height: 45px;}
.section-title:before {display: none;}
.small-title {font-size: 25px;}
#portfolios .btn{padding: 6px 13px;margin-bottom: 5px;}
.social-links-bordered a i {width: 40px;height: 40px;line-height: 40px;}
.navbar-header{width: 100%;}
.page-header .page-title {font-size: 20px;}
.page-header .page-subtitle {font-size: 18px;}
.input-lg {font-size: 14px;}
#roof .quick-contacts span {padding: 0 10px;}
#roof .social-links a {margin: 0 2px;}
.justify-content-end{justify-content: flex-start !important;}
.row {padding: 30px 0px 40px;}
.section-title {padding: 30px 0px 15px;}
.section-title + .row {padding: 0px 0px 30px;}
#carousel-area{padding-top: 64px;}
#carousel-area .item {height: 300px;}
#carousel-area .item .carousel-caption h2 {font-size: 30px;}
#carousel-area .item .carousel-caption h3 {font-size: 20px;}
#carousel-area .item .carousel-caption .btn {margin: 5px;}
#carousel-area .carousel-control i {width: 40px;height: 40px;padding: 12px 0;font-size: 15px;}
#carousel-area .carousel-indicators {display: none;}
#service-block-main .service-item {margin: 60px 0;}
#service-block-main .service-item h2 {font-size: 24px;}
#service-block-1 .service-item .service-content h2 {font-size: 22px;}
#portfolio .portfolio-items .mix,
#portfolio .portfolio-items .gap {width: 100%;}
#portfolio .portfolio-items .mix figure h4,
#portfolio .portfolio-items .gap figure h4 {display: none;}
#portfolio .portfolio-items .mix figure figcaption::after,
#portfolio .portfolio-items .gap figure figcaption::after,
#portfolio .portfolio-items .mix figure figcaption::before,
#portfolio .portfolio-items .gap figure figcaption::before {display: none;}
#portfolio .portfolio-items figure figcaption {padding: 36px;}
#portfolio .controls .btn {margin: 5px 2px;}
#portfolio .portfolio-items.col-3 .mix,
#portfolio .portfolio-items.col-3 .gap {width: 100%;}
#portfolio .portfolio-items.col-3 .mix figure h4,
#portfolio .portfolio-items.col-3 .gap figure h4 {display: none;}
#portfolio .portfolio-items.col-3 .mix figure figcaption::after,
#portfolio .portfolio-items.col-3 .gap figure figcaption::after,
#portfolio .portfolio-items.col-3 .mix figure figcaption::before,
#portfolio .portfolio-items.col-3 .gap figure figcaption::before {display: none;}
#portfolio .portfolio-items figure figcaption {padding: 25px;}
#portfolio .controls .btn {margin: 5px 2px;}
#other-services .other-service-item .service-content h3{font-size: 15px;}
#progress {overflow-x: hidden;}
#progress .our-progress:before {background: none;}
#progress .progress-bottom {padding-bottom: 0;padding-top: 0;}
#progress .progress-item {margin: 30px 0;}
#notice h4 {font-size: 18px;}
#notice p {font-size: 16px;}
#notice .notice-button {margin-top: 15px;}
#cool-facts .fact-block {margin: 30px 0;}
#cool-facts .section-subtitle {padding-bottom: 30px;font-size: 24px;}
#cool-facts .wrapper h2 {font-size: 20px;}
#testimonial #testimonial-carousel p {font-size: 20px;}
#testimonial #testimonial-carousel .carousel-control.left {left: 15px;}
#testimonial #testimonial-carousel .carousel-control.right {right: 15px;}
#testimonial .item blockquote small span {display: block;line-height: 40px;}
#cool-facts .fact-block h4 {font-size: 30px;line-height: 40px;}
#blog .blog-item-wrapper {margin: 30px 0;}
#blog .blog-item-text .blog-item-info a {padding-right: 6px;}
#clients #clients-scroller .client-item-wrapper {padding: 0 45px;}
#clients #clients-scroller .owl-controls {display: none;}
.pricing-table {margin: 60px 0;}
.pricing-table h3 {font-size: 24px;}
#team .team-item {margin: 30px 0;}
footer .footer-widget {margin: 30px 0;}
.copyright-text {float: left!important;}
.social-icons-fill li {margin: 0px 16px 0 0;}
#why-choose .tab-container h2 {font-size: 28px;}
#why-choose .list-group-item {width: 362%;margin: 40px 15px;}
.navbar-nav .nav-item + .nav-item {margin-left: 0;}
#main-menu {clear: both;}
.page-header-content h2 {text-align: center;}
}

/* mobile or only mobile */
@media (max-width: 767px) {
.navbar-top .elementor-widget-social{display: none;}
.carousel-item > img{height:100%;width:100%;}
#carousel-area .carousel-item{height: 200px;}
#carousel-area{padding-top: 64px;}
#carousel-area .carousel-item .carousel-caption h2 {font-size:16px;}
#carousel-area .carousel-item .carousel-caption h3 {font-size:12px;}
#carousel-area .carousel-item .carousel-caption .btn {margin:auto;font-size: 9px;margin-top: 5px;padding: 8px 12px;}
#carousel-area .carousel-control {top: 58%;display: none;}
#carousel-area:hover .carousel-control {display: block;}
#carousel-area .carousel-indicators {bottom: -8px;}
#carousel-area i {margin-right: 0;}
#carousel-area .carousel-item .carousel-caption {top: 14%;}
}