/*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) {
    .header {
        padding: 10px 0;
    }
    .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: 16px;
    }
    .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) {
    
    
        
    .mission-img{
        width: 70vw;
    }
    
    .vision-img{
        width: 70vw;
    }
    .circle--rotate>li .icon span {
    
    font-size : 11px;
    }
    .text-center-in-img h1{
        font-size: 28px;
        width: 120%;
    }
    
    .text-center-in-img h3{
        font-size: 16px;
        width: 120%;
    }
    .phi-img{
    width:100vw;
    height:70vw;
    }
    .about-img{
    width:100vw;
    height:40vw;
    }
}
    
    
    body {
        font-size: 14px;
    }
    .logo a::before {
        inset: -1.75rem 0;
    }
    .mbMenuContainer {
        padding-top: 85px;
    }
    .mbMenuContainer .mbMenu {
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
    }
    .mbMenuContainer .mbMenu>.container-fluid>.row {
        height: 100%;
    }
    .mbMenuContainer .mbMenu .leftOne ul li a {
        font-size: 3.1vw;
    }
    .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: 18px;
        font-size: 11px;
        width     : 80px;
    }
    .circle-logo {
        width: 65%;
        height: 65%;
    }
    .circle-logo img {
        width: 90px;
    }
    .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;
    }
    .footer-area {
        background: url(../images/footer-img.png) bottom center / 160% no-repeat, linear-gradient(to top, #eaffcd 0%, #c4ffde 100%);
    }
    .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;
    }
    .footer-area {
        background: url(../images/footer-img.png) bottom center / 240% no-repeat, linear-gradient(to top, #eaffcd 0%, #c4ffde 100%);
    }
    .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 {
        padding-top: 0;
        padding-bottom: 6rem;
        color: inherit;
    }
    .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%;
    }
}