/*responsive*/
@media (min-width: 1300px) {
  .container {
    max-width: 1240px;
  }
}

@media (min-height: 1024px) {
}

@media (min-height: 1280px) {
}

@media (max-width: 1180px) and (max-height: 820px) {
  .rotate--circle {
    width: 45vw;
    max-width: initial;
    height: 45vw;
    max-height: initial;
  }
}

@media (max-width: 1180px) {
  .glory-section .glory-text .recycle-img {
    width: 12vw;
  }

  .insideBanner {
    height: auto;
  }

  .pageHead {
    position: static;
  }
  .bg-image.vh-100{
    height: auto !important;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .mbMenuContainer .mbMenu .leftOne ul li a {
    font-size: 4vw;
  }
  .mbMenuContainer .mbMenu .rightOne h6 {
    font-size: 13px;
  }
  .mbMenuContainer .mbMenu .socialBox li a i{
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .successBox {
    width: calc(100% / 3);
  }
  .footerAbout .footerSocial {
    gap: 5px;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 15px;
  }
  .mbMenuContainer .mbMenu .leftOne ul li a {
    font-size: 4.5vw;
  }
  .banner {
    height: 60vh;
  }
  .scrollDown {
    display: none;
  }
  .cloud {
    height: 210px;
  }
  .rotate--circle {
    width: 70vw;
    height: 70vw;
    margin-top: 4rem;
  }
  .glory-section .glory-text {
    width: 100%;
    padding: 0 2rem;
    transform: none;
    position: static;
    margin-bottom: -9rem;
  }
  .overview-heading {
    font-size: 1.25rem;
  }

  .overview-text p {
    max-width: 100%;
  }
  .benefitBox .inner {
    padding: 1.125rem;
  }
  .heading h2 {
    font-size: 1.5rem;
  }
  .h5,
  h5 {
    font-size: 1.25rem;
  }
  .h6,
  h6 {
    font-size: 0.75rem;
  }
  .readmore .button {
    font-size: 13px;
    letter-spacing: normal;
    padding: 10px 16px 7px;
  }
  .success_Text .success_Stuff {
    padding: 1.5rem 0.75rem;
  }
  .success_Stuff h6 {
    font-size: 12px;
  }
  .success_Stuff h5 {
    font-size: 1rem;
  }
  .success_Stuff h4 {
    font-size: 2rem;
  }
  .footerContact {
    order: 1;
  }

  .partners-tab ul {
    justify-content: left;
  }

  .pageLink a {
    padding: 13px 10px 10px;
  }

  .pageLink a::before {
    inset: -5px 0;
  }
  .wasteSlider .swiper-slide {
    width: 50%;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 13px;
  }
  .logo a::before {
    inset: -1.75rem 0;
  }
  .mbMenuContainer {
    padding-top: 85px;
  }
  .mbMenuContainer .mbMenu {
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
	padding-top:40px;
  }

  .mbMenuContainer .mbMenu > .container-fluid > .row {
    height: 100%;
  }
  .mbMenuContainer .mbMenu .leftOne ul li a {
    font-size: 6vw;
  }
  .mbMenuContainer .mbMenu .rightOne {
    display: block;
  }
  .bannerText .h1 {
    font-size: 2rem;
  }
  .successBox {
    height: auto;
  }
  .successBox .inner,
  .success_Text {
    height: 100%;
  }
  .benefitBox .inner.d-flex .img-fluid {
    max-width: 60px;
    flex: 0 0 60px;
  }
  .col.benefitBox {
    flex-basis: 50%;
  }
  .imgBox .inner iframe{
    height: 300px;
  }
  .newsBox .inner article{
    padding: 1.75rem 1.5rem 1.5rem;
  }
  .newsBox .inner .img-fluid img{
    height: 240px;
  }
  .newsBox .inner article h4{
    font-size: 1.25rem;
  }
}

@media (max-height: 540px) {
  .header {
    padding: 5px 0;
  }
  .logo {
    width: 90px;
  }
  .logo a::before {
    inset: -0.75rem 0;
  }
  .menuBtn,
  .topSideMenu li a {
    font-size: 12px;
  }
  .mbMenuContainer {
    padding-top: 65px;
  }
  .mbMenuContainer .mbMenu .leftOne ul li a {
    font-size: 4vw;
  }
  .banner {
    height: 100vh;
  }
}

@media (max-width: 767px) {
}

@media (max-width: 576px) {
  .header {
    width: 100%;
    left: 0;
    padding: 5px 2rem;
  }
  .header.menufixed,
  .header.fixed.menufixed,
  .header.fixed {
    padding: 0px 2rem;
  }
  .logo {
    width: 90px;
  }
  .header.fixed .logo a::before,
  .logo a::before {
    inset: -0.75rem 0;
  }
  .menuBtn,
  .topSideMenu li a {
    font-size: 12px;
  }
  .mbMenuContainer {
    padding-top: 65px;
  }
  .mbMenuContainer .mbMenu .leftOne ul li a {
    font-size: 4vw;
  }
  .banner {
    height: 100vh;
  }
  .bannerText {
    bottom: 22%;
  }
  .scrollDown {
    display: block;
    bottom: 10px;
  }
  .bannerSocial,
  .bannerBottom {
    bottom: 3rem;
  }
  .circle--rotate > li .icon span {
    bottom: calc(100% + 10px);
    margin-top: 0;
    font-size: 14px;
  }
  .circle-logo {
    width: 65%;
    height: 65%;
  }
  .circle-logo img {
    width: 120px;
  }
  .overview-heading {
    font-size: 1.125rem;
  }
  .heading h2 {
    font-size: 1.25rem;
  }
  .benefitBox .inner .img-fluid,
  .inner.myBox .img-fluid {
    padding: 14px;
  }
  .successBox {
    width: 50%;
  }
  .spiral-pattern {
    background-size: 50%;
  }
  .brand-logos {
    width: calc(100% / 4);
  }
  .brand-logos img{
    max-width: 70%;
    max-height: 70%;
  }
  .footerAbout,
  .footerBox {
    font-size: inherit;
    width: 50%;
  }
  .footerAbout .footer-title {
    margin-bottom: 8px;
  }
  
  .pageHead {
    flex-direction: column;
  }
  .col.pageLink {
    flex-basis: content;
  }
  .pageLink a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pageLink a::before{
    inset: 0;
  }
  .testim-card .inner {
    padding: 2rem;
  }
  .newsBox .inner article {
    padding: 1.25rem 1rem 1rem;
  }
  .boxContainer > .row > div > .inner {
    padding: 1.5rem;
  }
  .benefitBox .inner p br {
    display: none;
  }
  div[class^="col"].benefitBox.indusBox{
    width: 50%;
  }
  .partners-tab ul li button{
    font-size: 11px;
    width: max-content;
  }
}

@media (max-width: 575px) {
}

@media (max-width: 480px) {
  .header,
  .header.menufixed,
  .header.fixed.menufixed,
  .header.fixed {
    padding: 0 12px;
  }
  .mbMenuContainer .mbMenu .leftOne ul li a {
    font-size: 1.75rem;
  }
  .banner{
    height: 80vh;
  }
  .bannerText {
    width: 80%;
    bottom: 50%;
    transform: translate(-50%,50%);
  }
  .bannerText .h1 {
    font-size: 1.7rem;
  }
  .bannerSocial, .bannerBottom{display: none;}
  .bannerControlsContainer .bannerControl > span {
    width: 40px;
  }
  .bannerControlsContainer .bannerControl .carousel-control-next.banner-next,
  .bannerControlsContainer .bannerControl .carousel-control-prev.banner-prev,
  .successContainer .swiper-button-next,
  .successContainer .swiper-button-prev {
    width: 30px;
    height: 30px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    background-size: 20px;
  }
  .successContainer .swiper-button-next {
    right: calc(50% - 35px);
  }
  .successContainer .swiper-button-prev {
    left: calc(50% - 35px);
  }
  .circle--rotate > li .icon {
    width: 50px;
    height: 50px;
    margin: -25px auto;
  }
  .circle--rotate > li .icon span{
    bottom: calc(100% + 25px);
  }
  .glory-section .glory-text {
    margin-bottom: -4rem;
  }
  .glory-section .glory-text .recycle-img {
    width: 80px;
  }
  .brand-logos {
    height: 70px;
    width: calc(100% / 3);
  }
  .successBox {
    width: 100%;
  }
  .footerAbout,
  .footerBox {
    width: 100%;
  }
  .footerBox {
    margin-bottom: 2rem;
  }
  .footer-area .bottom {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .footer-area .bottom p:last-child {
    width: 100%;
    flex-basis: 100%;
    justify-content: center;
  }
  .footer-area .bottom ul {
    justify-content: flex-end;
  }
  
  .footerAddress p br {
    display: none;
  }
  .button-top {
    bottom: 60px;
  }
  .pageHeader {
    display: none;
  }
  .pageHead {
    background-color: var(--primary-color);
  }
  .page-title {
    color: #fff;
  }
  .breadcrumb {
    padding-bottom: 0;
  }
  .pageHeader + .animate-section1 .animate {
    transform: none !important;
    opacity: 1 !important;
  }
  .testim-card .inner .client-img {
    width: 70px;
    height: 70px;
  }
  .testim-card .inner {
    padding: 1.7rem;
  }
  .testim-card .inner p {
    font-size: inherit;
    margin-bottom: 1.25rem;
  }
  .wasteSlider .swiper-slide {
    width: 80%;
  }
  .contactList h3{
    font-size: 1.25rem;
  }
  .contactFormContainer section{
    padding: 1.5rem;
  }
  .contactFormContainer section iframe{
    height: 300px;
  }
  .hollow-us img {
    width: 28px;
  }
}

@media (max-width: 425px) {
  .pageHead {
    padding: 10px 1.5rem;
  }
  .page-title {
    font-size: 20px;
  }
  .benefitBox.indusBox .inner {
    padding: 20px 10px;
  }
  .imgBox .inner iframe{
    height: 250px;
  }
}

@media (max-width: 375px) {
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .bannerControlsContainer .carousel-indicators li {
    margin: 0 10px;
  }
  .h5,
  h5,
  .overview-heading {
    font-size: 1rem;
  }
  .heading h2 {
    font-size: 1.125rem;
  }
  .rotate--circle {
    width: 60vw;
    height: 60vw;
    margin-bottom: 1.5rem;
  }
  .circle--rotate > li .icon {
    width: 50px;
    height: 50px;
    margin: -25px auto;
  }
  .circle--rotate > li .icon span {
    bottom: calc(100% + 30px);
    width: 110px;
    font-size: 13px;
    background-color: #fff;
    padding: 5px 8px;
    border-radius: 50px;
    box-shadow: 0 8px 32px 0 rgb(135 31 31 / 35%);
  }
  .circle-logo {
    width: 70%;
    height: 70%;
  }
  .circle-logo img{
    width: 100px;
  }

  .glory-text .overview-heading {
    font-size: 14px;
  }

  svg#glory {
    width: 120% !important;
    margin-left: -10%;
  }
  .footer-area .bottom {
    flex-direction: column;
  }
  .footer-area .bottom li a {
    color: inherit;
  }
  .footer-area .bottom p:last-child {
    margin-top: 10px;
  }
  .button-top {
    bottom: 20px;
    width: 30px;
    height: 30px;
    line-height: 32px;
  }
  .bar-controls .bar-arrows > div {
    width: 30px;
    height: 30px;
    background-size: 14px;
  }
  .testimonial-slider.pb-3 {
    padding-bottom: 0 !important;
  }
  .bar-controls {
    padding: 10px 0 4px;
  }
}

@media (max-width: 320px) {
  .header {
    padding: 0 10px;
  }
  .menuBtn {
    gap: 4px;
  }
  .bannerText .h1 {
    font-size: 1.5rem;
  }
  .bannerSocial {
    left: 1rem;
  }
  .bannerBottom,
  .button-top {
    right: 1rem;
  }
  .heading h2 {
    font-size: 1rem;
  }
  .rotate--circle {
    width: 60vw;
    height: 60vw;
    margin-bottom: 2.5rem;
  }
  .circle-logo {
    width: 65%;
    height: 65%;
  }
  .circle-logo img {
    width: 80px;
  }

  .col.benefitBox {
    flex-basis: 100%;
  }
  
  div[class^="col"].benefitBox.indusBox{
    width: 100%;
  }
}