/*--------------------------------------------------
    ## All responsive style
---------------------------------------------------*/
.testimonial-tab button img {
	border-radius: 50%;
}
.mega-menu .sub-menu {
	width: 100%;
	padding: 20px !important;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav > li.menu-item-has-children:before,
.navbar-area .nav-container .navbar-collapse .navbar-nav > li.menu-item-has-children:after {
	display: none !important;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav > li.menu-item-has-children {
    padding-left: 3px !important;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav > li.menu-item-has-children.mega-menu {
    position: initial;
}
@media all and (min-width: 1600px) {
	.container {
		max-width: 1280px;
	}
	.back-to-top {
	    right: 70px;
	    bottom: 50px;
	}
	.position-bottom-left {
	    position: absolute;
	    left: 90px;
	    bottom: 180px;
	}
	.case-study-area .animate-img-1 {
	    bottom: 53px;
	    left: 282px;
	}
	.contact-g-map iframe {
		height: 650px;
	}
	.banner-thumb-2 .main-img-wrap .banner-animate-img-2 {
	    right: 0;
	}
	.contact-inner-1 .section-title {
	    margin-top: 106px;
	}
	.banner-area-2 .bg-img-2 {
	    right: 0px;
	    top: -72px;
	    width: 796px;
	}
	.contact-inner-2 .section-title {
	    margin-top: 134px;
	}
	.banner-area-3 .bg-gray {
		padding: 240px 0;
	} 
	.single-service-inner-3.single-service-inner-3-left {
	    padding: 43px 70px 43px 40px; 
	} 
	.single-service-inner-3.single-service-inner-3-right {
	    padding: 43px 40px 43px 70px;
	}
	.banner-area-8 {
		margin-top: -96px;
	}
	.margin-right--150 {
		margin-right: -150px;
	}
}
@media all and (max-width: 1599px) {
	.navbar-area .nav-container .navbar-collapse .navbar-nav li a {
	    font-size: 14px;
	}
	.banner-area-1 .animate-img-1 {
		position: absolute;
		left: 30px;
		bottom: 70px;
		width: 40px;
	}
	.banner-area-1 .animate-img-2 {
		position: absolute;
		left: 50px;
		bottom: 50px;
		width: 60px;
	}
	.banner-thumb .banner-animate-img-1 {
	    width: 40px;
        left: -100px;
	}
	.mega-menu .sub-menu {
	    min-width: 1293px !important;
	    left: -718px !important;
	}
	.navbar-area-4 .navbar-top ul li {
	    font-size: 13px;
	}
	.navbar-area-4 .left-bg {
	    width: 43%;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.navbar-area .nav-container .navbar-collapse .navbar-nav > li {
	    margin-right: 0;
	}
}
@media all and (max-width: 1199px) {
	.navbar-top ul li {
	    font-size: 14px;
	}
	.navbar-area-4 {
	    padding-left: 15px;
	}
	.navbar-area-4 .navbar-top {
	    display: none;
	}
	.navbar-area-4 .left-bg {
	    width: 26%;
	}
	.single-blog-inner .details h2 {
	    font-size: 35px;
	}
	.single-work-process-inner-3 {
		padding: 20px;
	}
	.single-service-inner {
	    padding: 30px 25px;
	}
	.single-case-study-inner .details {
	    margin-left: 25px;
	}
	.single-pricing-inner {
	    padding: 25px;
	}
	.single-blog-list .details p {
	    font-size: 15px;
	}
	.single-blog-list .details .meta p {
	    font-size: 14px;
	}
	.single-list-inner li {
		font-size: 15px;
	}
	.single-service-inner-2 .details {
	    padding: 20px;
	    margin-left: 30px;
	}
	.contact-inner-1 .section-title {
	    padding: 30px;
	}
	.accordion-inner .accordion-item .accordion-button {
		font-size: 17px;
	}
	.single-testimonial-inner {
	    padding: 30px 20px;
	}
	.single-blog-list.style-2 .details .blog-meta {
	    margin-left: 12px;
	}
	.single-pricing-inner ul li {
		font-size: 15px;
	}
	.single-testimonial-inner.style-2 .ratting-inner {
	    font-size: 13px;
	}
	.single-testimonial-inner.style-2 .ratting-inner svg {
	    font-size: 11px;
	}
	.contact-page-inner {
	    padding: 50px;
	}
	.banner-area-3 .bg-gray {
	    padding: 80px 0;
	}
	.mega-menu .sub-menu {
	    min-width: 934px !important;
	    left: -434px !important;
	}
	.saller-area-inner li {
	    width: 30.7%;
	}
}
@media all and (min-width: 992px) {
	.custom-no-gutter > [class^=col-] {
	    padding-left: 0;
	    padding-right: 0;
	} 
}
@media all and (max-width: 991px) {
	.navbar-area-4 .nav-right-part.nav-right-part-mobile {
		opacity: 0;
	}
	.navbar-area-4 .left-bg {
	    width: 32%;
	}
	.mega-menu .sub-menu {
	  min-width: 100% !important;
	  left: 0 !important;
	  padding: 0 !important;
	}
	.navbar {
		padding: 14px 0;
	}
	.td-sidebar {
		margin-top: 100px;
	}
	.navbar-area .nav-container .navbar-collapse .navbar-nav {
	    padding-left: 0;
	}
	.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children {
	    padding-right: 0;
	}
	.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:after {
	    top: 26px;
	}
	.navbar-area .nav-container .navbar-collapse {
	    padding: 13px;
	    padding-left: 0;
	}
	.navbar-area .nav-container .navbar-collapse .navbar-nav {
	    margin: 0;
	}
	.navbar-area:after {
	    display: none;
	}
	.navbar-area .nav-container .navbar-collapse .navbar-nav li a {
	    font-size: 16px;
	}
	.navbar-area .nav-container.navbar-bg {
	    padding-left: 15px;
	}
	.navbar-area {
	    margin-top: 0;
	}
	.banner-area-1 {
	    padding-top: 200px;
	}
	.toggle-btn {
		top: 0;
	}
	.contact-inner-1 .section-title {
	    padding: 30px;
	    margin-left: 0;
	    margin-top: 30px;
	}
	.footer-bottom p,
	.footer-bottom a {
		font-size: 15px;
	}
	.footer-subscribe .footer-subscribe-inner h2 {
	    font-size: 30px;
	}
	.single-work-process-inner-2 {
	    margin-top: 0;
	}
	.slider-control-right-top .owl-nav {
		display: none;
	}
	.service-sidebar .widget_author .thumb img {
	    width: 100%;
	}
	.service-sidebar {
		margin-top: 0;
	}
	.td-sidebar .widget.widget_author .social-media {
		text-align: center !important;
	}
	.single-project-inner .details span {
	    margin-bottom: 0px;
	}
	.single-project-inner .details a {
	    font-size: 13px;
	}
	.single-project-inner:after {
		top: 15px;
	    bottom: 15px;
	    left: 15px;
	    right: 15px;
	}
	.career-wrap {
	    padding: 30px;
	}
	.single-service-inner-3 {
		margin-right: 40px;
		padding: 25px 60px 25px 25px !important;
	}
	.single-service-inner-3.single-service-inner-3-right .thumb {
	    left: auto;
	    right: -40px;
	}
	.footer-subscribe .footer-subscribe-inner.style-2 .border-1 {
		margin: 5px 0;
	}
	.why-choose-us-list {
	    margin-left: 17px;
	}
	.single-project-inner.style-3 .details {
	    padding: 15px 20px;
	    border-bottom: 40px solid var(--main-color);
	}
	.saller-area-inner li {
	    width: 29.7%;
	}
	.roadmap-line:before {
	    height: 91%;
	}
	.banner-thumb-2 .banner-animate-img {
	    position: static;
	}
}
@media all and (max-width: 767px) {
	.breadcrumb-area .page-title {
	    font-size: 50px;
	}
}
@media all and (max-width: 575px) {
	.back-to-top {
	    right: 15px;
	    bottom: 20px;
	}
	.navbar-top .topbar-right li {
		margin-bottom: 4px;
	}
	.breadcrumb-area .page-title {
	    font-size: 30px;
	}
	.breadcrumb-area .page-list li {
		font-size: 15px;
	}
	.single-blog-inner .details h2 {
	    font-size: 24px;
	}
	.td-page-navigation .pagination li a {
	    height: 45px;
	    width: 45px;
	    line-height: 45px;
	    font-size: 16px;
	}
	.blog-details-page-content blockquote {
		padding: 30px 20px;
	}
	.blog-comment .comment-body {
	    padding-left: 0;
	    margin-bottom: 40px;
	}
	.blog-comment .comment-body .avatar {
	    position: relative;
	    margin-bottom: 18px;
	}
	.blog-comment .comment-body .comment-metadata {
	    margin-bottom: 6px;
	}
	.blog-comment .reply a {
		margin-top: 12px;
	}
	.td-sidebar .widget {
	    padding: 25px;
	}
	.banner-inner .title {
	    font-size: 40px;
	}
	.banner-inner .subtitle {
		font-size: 13px;
	}
	.section-title .title {
		font-size: 32px;
	}
	.about-thumb-inner .animate-img-bottom-right {
	    position: absolute;
	    right: 0;
	    bottom: 30px;
	    width: 200px;
	}
	.accordion-inner .accordion-item .accordion-button {
	    font-size: 16px;
	}
	.accordion-inner.accordion-icon-left .accordion-item .accordion-button {
	    padding-left: 42px;
	}
	.footer-subscribe .footer-subscribe-inner h2 {
	    font-size: 24px;
	}
	.td-search-popup.active .search-form {
	    width: 90%;
	}
	.navbar {
	    padding: 14px 10px;
	}
	.banner-thumb-3 .banner-animate-img {
	    width: 60px;
	}
	.banner-thumb-3 .banner-animate-img-1 {
	    left: -8px;
	}
	.contact-inner-1 .section-title .title {
	    font-size: 32px;
	}
	.footer-subscribe .footer-subscribe-inner input {
	    padding: 0 20px;
	    width: 100%;
	}
	.footer-subscribe .footer-subscribe-inner .btn {
	    margin-top: 10px;
	    width: 100%;
	    position: relative;
    	right: 0;
	}
	.footer-subscribe .footer-subscribe-inner {
	    padding: 25px;
	}
	.contact-page-inner {
	    padding: 30px;
	}
	.single-contact-list {
	    padding: 25px;
	}
	.widget_author {
	    padding: 30px 20px !important;
	}
	.single-blog-inner .thumb .date {
	    height: 68px;
	    width: 65px;
	    font-size: 16px;
	    padding-top: 15px;
	}
	.blog-comment .reply a {
		margin-top: 12px;
	}
	.blog-comment .comment-body .comment-metadata {
	    margin-bottom: 5px;
	}
	.blog-admin {
	    display: block;
	    padding: 20px;
	}
	.blog-admin .media-left {
	    margin-bottom: 20px;
	}
	.blog-comment .comment-list .comment-author a {
		display: block;
	}
	.banner-area-3 .img-right {
		display: none;
	}
	.career-wrap {
	    padding: 30px;
	}
	.career-nav-tab button {
	    width: 50%;
	}
	.career-nav-tab button:nth-child(2) {
	    border-right: 0 !important;
	}
	.single-project-inner img {
		width: 100%;
	}
	.single-testimonial-inner.style-3 .thumb {
		margin-bottom: 20px;
	}
	.single-testimonial-inner.style-3 .thumb .shadow-img {
	    width: 180px;
	}
	.single-testimonial-inner.style-3 .thumb .main-img {
	    right: auto;
	    left: 130px;
	}
	.footer-subscribe .footer-subscribe-inner.style-2 {
	    display: block;
	}
	.project-nav-tab.style-2 button {
		margin-bottom: 5px;
	}
	.why-choose-us-list .media {
		display: block;
	}
	.why-choose-us-list .count {
	    left: -20px;
	}
	.mobile-media-block {
		display: block;
	}
	.saller-area-inner li {
	    width: 93%;
	}
	.roadmap-line:before {
	    height: 103%;
	}
	.footer-subscribe .footer-subscribe-inner.style-3 input {
	    height: 55px;
	}
	.footer-subscribe .footer-subscribe-inner.style-3 .btn {
	    right: 0;
	}
	.pie-chart {
	    width: 340px;
	    min-height: 340px;
	}
}
@media all and (max-width: 360px) {
	.contact-inner-1 .section-title .title,
	.section-title .title {
	    font-size: 30px;
	}
	.single-case-study-inner .details {
	    padding: 18px 60px 18px 18px;
	}
	.single-case-study-inner .details .right-arrow {
	    right: 15px;
	}
	.pie-chart {
	    width: 300px;
	    min-height: 300px;
	}
}


@media all and (min-width: 1300px) {
	.custom-container {
		max-width: 1250px;
	}
}
@media all and (min-width: 2000px) {
	.contact-inner-2 {
	    max-width: 1920px;
	    margin: 0 auto;
	}
}
@media all and (min-width: 1800px) {
	.custom-container {
		max-width: 1720px;
	}
}

/* Keep hero overlays layered on mobile */
@media all and (max-width: 991px) {
  .banner-thumb-2 { position: relative; }
  .banner-thumb-2 .main-img-wrap { position: relative; }
  .banner-thumb-2 .banner-animate-img { position: absolute !important; }
}

/* Optional fine-tuning for very small phones */
@media all and (max-width: 575px) {
  .banner-thumb-2 .main-img { max-width: 78%; height: auto; }
  .banner-thumb-2 .main-img-wrap .banner-animate-img-1 { width: 40px; left: -30px; top: 10px; }
  .banner-thumb-2 .main-img-wrap .banner-animate-img-2 { right: -10px; top: 40px; width: 50px; }
  .banner-thumb-2 .main-img-wrap .banner-animate-img-3 { left: -60px; bottom: 40px; width: 70px; }
  .banner-thumb-2 .banner-animate-img-4 { right: -10px; top: -10px; width: 85%; }
}
/* ---- Base mobile layering (<= 991px) ---- */
@media all and (max-width: 991px) {
  /* Give the phone column some breathing room on the right so it looks centered */
  .banner-thumb-2 {
    position: relative;
    padding-right: clamp(16px, 4vw, 36px);
  }

  /* Maintain a stacking context and center the image block */
  .banner-thumb-2 .main-img-wrap {
    position: relative;
    margin-inline: auto;
    max-width: 460px; /* prevents overspill on tablets; tweak if needed */
  }

  /* All floating decorations stay absolutely positioned */
  .banner-thumb-2 .banner-animate-img {
    position: absolute !important;
    pointer-events: none; /* don't block taps */
  }

  /* Ensure the phone is above the big background blob but below the small rectangle */
  .banner-thumb-2 .main-img       { position: relative; z-index: 2; height: auto; }
  .banner-thumb-2 .banner-animate-img-4 { z-index: 1; } /* big purple shape behind phone */
  .banner-thumb-2 .banner-animate-img-3 { z-index: 3; } /* small rounded rectangle in front */
}

/* ---- Fine tuning for very small phones (<= 575px) ---- */
@media all and (max-width: 575px) {
  /* Slightly bigger phone and centered */
  .banner-thumb-2 .main-img {
    max-width: 75%;
    left: 40px;
  }

  /* Left top doodles / shapes (adjust as needed for your assets) */
  .banner-thumb-2 .main-img-wrap .banner-animate-img-1 { 
    width: 60px; left: -10px; top: 8px;
  }
  .banner-thumb-2 .main-img-wrap .banner-animate-img-2 { 
    width: 54px; right: -30px; top: 38px;
  }

  /* >>> Small rounded rectangle: IN FRONT of the phone and a bit larger */
  .banner-thumb-2 .main-img-wrap .banner-animate-img-3 {
        left: -18px;
        bottom: 100px;
        width: 225px;
        transform: translateZ(0) scale(1.06);
        z-index: 3;              /* ensure it's over the phone */
  }

  /* Big purple background shape (keep mostly behind & more centered) */
  .banner-thumb-2 .banner-animate-img-4 {
    right: -6px;              /* nudges shape so the stack feels centered */
    top: -6px;
    width: 92%;
    z-index: 1;
  }
}

@media all and (max-width: 991px) {
  .pricing-steps {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}


/* ---- Ultra-small (<= 375px) for extra polish ---- */
@media all and (max-width: 375px) {
  .banner-thumb-2 { padding-right: 28px; } /* a little more right padding */
  .banner-thumb-2 .main-img { max-width: 84%; }

  .banner-thumb-2 .main-img-wrap .banner-animate-img-3 {
    left: -14px; bottom: 18px; width: 90px;
  }

  .banner-thumb-2 .banner-animate-img-4 {
    right: -2px; width: 96%;
  }
}