@media (min-width: 320px) and (max-width: 767px) {
    .headerInner{ padding: 16px;}
    .headerLogo__text{ font-size: 14px; line-height: 18px; margin-top: 5px;}
    .logoSeparator{ height: 15px; margin: 6px 10px 0 10px;}
    .headerLogo{ width: 90px;}
    .hamburger{ display: block; z-index: 10;}
    .topNav{ width: 100%; height: 100%; background-color: #fff; position: fixed; top: 0; left: -100%; flex-direction: column; gap: 10px; padding: 60px 0; opacity: 0;}
    .topNav > li{ padding: 0 20px;}
    .topNav > li > a{ padding: 5px 0;}
    .subNav{ display: flex; position: unset; padding: 10px 0 0 15px; flex-direction: column; gap: 20px; border-top: 0; box-shadow: none;}
    .subNav__col>p{ font-size: 14px;}
    .subNav__list>li{ font-size: 16px; line-height: 22px;}
    .topNav>li>a > img{ top: -6px;}

    .hero__section{ padding: 50px 0 0 0;}
    .hero__cupWhite { width: 44px; bottom: 0; left: 0px;}
    .hero__3dotBottom { width: 24px; bottom: 36px; left: 36px;}
    .hero__section--inner { max-width: 100%; padding: 20px;}
    .lottie__wrapper {position: absolute; width: 100%; top: 170px; z-index: 1;}
    .hero__header { font-size: 16px; line-height: 20px; margin-bottom: 8px;}
    .hero__circleImg { height: 46px; width: 173px; left: 0; top: -16px;}
    .hero__header--main {font-size: 26px; line-height: 26px; margin: 0 auto 20px;}
    .hero__section--imgWrapper {gap: 10px;}
    .hero__section--imgInner2{ gap: 10px;}
    .hero__section--imgWrapper .grayscaleImg{ border-radius: 6px;}
    .hero__noPlaticAnimation {top: -44px; right: -10px; width: 60px;}
    .hero__squiggleAnimation {bottom: -30px; right: -4px; width: 40px;}
    .hero__noCupAnimation2 { width: 40px; left: -14px;}
    .heroDesc__3lineAnimation {top: -20px; right: -20px; width: 40px;}
    .hero__info {font-size: 16px; line-height: 24px;}
    .hero__info--desc { font-size: 14px; line-height: 20px;}
    .empower__section--innerLabel{ font-size: 16px; line-height: 24px;}
    .empower__section--innerDesc{ font-size: 14px; line-height: 20px;}

    .foundationBanner{ margin: 30px 0 0 0;}
    .foundationDesc{ margin-top: 30px;}
    .hero__header--mainImg{ max-width: 200px; display: block; margin: 0 auto;}
    .hero__section--imgWrapper{ gap: 10px;}
    .hero__desc{ font-size: 14px; line-height: 20px; margin-top: 30px;}
    .empower__section--innerTitle{ font-size: 14px; line-height: 20px; margin-bottom: 20px;}
    .hero__3lineGreenAnimation{ display: none;}
    .hero__cupAnimation{ display: none;}

    .sustainable__section {padding: 0 0 30px;}
    .sustainable__noPlastic {width: 60px; top: 0; left: 0;}
    .sustainable__fish { width: 60px; top: 60px; left: -20px;}
    .sustainable__recycleWhite { width: 30px; top: 32px; left: 0px;}
    .sustainable__section--inner {flex-direction: column; padding: 30px;}
    .sustainable__left {margin-left: unset;}
    .sustainable__header { max-width: 100%; text-align: center; font-size: 18px; line-height: 24px;}
    .sustainable__right { display: none;}
    .sustainable__right--mobile { display: block; margin: 0 -30px;}
    .swiperMobile { width: 100%; overflow: hidden;}
    .swiper-slide--mobile { background-position: center; background-size: cover; width: 240px; height: 340px; border-radius: 16px; overflow: hidden;}
    .swiper-slide-active .swiper-slide-info {display: flex;}
    .swiper-slide-info {position: absolute; width: 100%; height: 100%; display: none; justify-content: flex-end; padding: 20px 16px; flex-direction: column; border-radius: 0 0 16px 16px;}
    .swiper-slide-infoHeader { font-size: 12px; text-transform: uppercase;}
    .swiper-slide-infoDesc { font-size: 16px; line-height: 22px;}
    .sustainable__circleImg{ display: none;}
    .purpose__section { padding: 30px 0;}
    .purpose__section--inner { padding: 0 20px; align-items: unset;}
    .purpose__header { font-size: 14px; line-height: 18px; text-align: center;}
    .purpose__header--main { font-size: 18px; line-height: 24px; margin-bottom: 18px;}
    .purpose__desc { font-size: 14px; line-height: 20px; margin-bottom: 30px;}
    .purpose__desc--bold { font-size: 14px; line-height: 20px;}
    .purpose__circleImg{ display: none;}
    .purpose__list{ flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; margin-top: 0; padding: 0 20px; width: unset; gap: 12px; justify-content: flex-start;}
    .purpose__list--item{ width: 260px; flex-shrink: 0;}
    .swiperBtn__cont{ display: none;}

    .mainTitle{ font-size: 18px; line-height: 22px;}
    .mainSubTitle{ font-size: 18px; line-height: 22px;}
    .subTitle{ font-size: 14px; line-height: 20px;}
    .description{ font-size: 14px; line-height: 20px;}
    .smallDescription{ font-size: 14px; line-height: 20px;}
    .learnMoreCta.home{ display: none;}

    .climateList { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
    .climateList > li { padding: 16px; }
    .climateList > li p:first-child { font-size: 18px; line-height: 22px; margin-bottom: 5px; }
    .climateList > li p:last-child { font-size: 14px; line-height: 18px; }
    .contentSection { gap: 16px; margin-top: 20px; }
    .contentSection__item { padding: 16px; }
    .imagesList { margin-bottom: 16px; gap: 10px; }
    .imagesList > li { height: 100px; }
    .contentSection__itemHdr { font-size: 18px; line-height: 22px; }
    .contentSection__itemDtl { gap: 16px; }

    .socialHelp{ gap: 10px; margin-bottom: 20px;}
    .socialHelp > li{ padding: 16px;}
    .socialHelp > li p{ font-size: 14px; line-height: 18px;}

    .diversityFtrList li{ font-size: 14px; line-height: 20px;}

    .empower__section { padding: 30px 0;}
    .empower__circleImg{ display: none;}
    .empower__noplastic--img{ display: none;}
    .empower__section--inner { padding: 0 20px; flex-direction: column;}
    .empower__section--left { width: 100%;}
    .empower__header { font-size: 18px; line-height: 22px; text-align: center;}
    .empower__desc { font-size: 14px; line-height: 20px; text-align: center; max-width: 70%; margin: 0 auto 20px;}
    .empower__section--right { width: 100%;}
    .empower__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
    .empower__list--itemInner{ height: unset; width: 100%;}

    .cs__section {padding: 30px 0;}
    .cs__globe--img{ display: none;}
    .cs__section--inner { flex-direction: column; padding: 0 20px; gap: 0;}
    .cs__section--left { width: 100%;}
    .cs__header--desc { font-size: 14px; line-height: 18px; text-align: center; margin-bottom: 6px;}
    .cs__header { font-size: 18px; line-height: 22px; margin-bottom: 8px; text-align: center;}
    .cs__circleImg{ display: none;}
    .cs__desc { font-size: 14px; line-height: 20px; text-align: center;}
    .cs__section--right { width: 100%; margin-top: 0;}
    .cs__list{ display: none;}
    .cs__list--mobile { display: block;}
    .initiative__mobileCardImg{ height: 180px; border-radius: 14px 14px 0 0;}
    .initiative__section { padding: 30px 0;}
    .initiative__sunImg{ display: none;}
    .foundation__section{ padding: 0 16px 20px 16px;}

    .initiative__gridWrapper{ display: none;}
    .initiative__mobileWrapper{ display: block; padding: 20px;}

    .heroSection{ height: 200px;}
    .heroSection__inner{ padding: 0 16px 16px 16px;}
    .heroSection__inner h2{ font-size: 24px; line-height: 32px;}
    .contentWrapper{ padding: 30px 16px;}

    .initiative__section--main-desc{ font-size: 14px; line-height: 20px; margin-bottom: 16px;}
    .initiative__header{ max-width: 70%; font-size: 18px; line-height: 22px; margin-bottom: 10px;}
    .initiative__header--desc{ font-size: 14px; line-height: 20px; margin-bottom: 16px;}
    .aboutus__featureList{ display: grid; grid-template-columns: 1fr; gap: 30px;}
    .aboutus__featureListItem{margin-bottom: unset; flex-direction: column; gap: 20px;}
    .aboutus__featureListItemHeader{ font-size: 18px; line-height: 24px;}
    .aboutus__featureListItemDesc{ font-size: 14px; line-height: 20px;}
    .aboutus__featureListItemImg{ width: 100%;}
    .initiative__socImg{ margin-bottom: 16px; height: 130px;}
    .initiative__header--descMain{ font-size: 18px; line-height: 22px;}
    .initiative__header--desc.endLine{ margin-bottom: 30px;}

    .initiative__mobileCardHeader{ font-size: 18px; line-height: 22px;}
    .initiative__mobileBottomCount{ font-size: 18px; line-height: 22px;}

    .climate__list{ flex-direction: column; gap: 16px; margin-bottom: 30px;}
    .climate__list--item{ padding: 30px; gap: 5px;}
    .climate__list--itemHeader{ font-size: 24px; line-height: 28px;}
    .climate__list--itemDesc{ font-size: 12px; line-height: 16px;}

    .initiative__hr-list--itemDesc{ font-size: 14px; line-height: 20px;}
    .initiative__hr-list--item::before{ width: 6px; height: 6px; top: 8px;}

    .initiative__socImgList{ display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px;}
    .initiative__socImgListItem{ height: 300px; width: 100%;}
    .swiper-slide-moreInfo{ font-size: 12px; line-height: 16px;}

    .news__section--header{ font-size: 20px; line-height: 28px;}
    .news__section--subheader{ font-size: 18px; line-height: 28px;}
    .governance-desc{ font-size: 14px; line-height: 20px; margin-bottom: 16px;}
    .governance-listItem{ font-size: 14px; line-height: 24px;}

    .news__list{ gap: 20px; margin-bottom: 40px; flex-direction: column;}
    .news__list--item{ width: 100%;}
    .news__list--img{ height: 160px;}
    .news__list--contentWrapper{ padding: 16px;}
    .news__list--content--header{ font-size: 18px; line-height: 22px;}
    .news__list--content--desc{ font-size: 14px; line-height: 20px;}

    .pgHeader{ font-size: 14px; line-height: 20px; margin-bottom: 6px;}
    .pgDesc{ font-size: 14px; line-height: 20px; margin-bottom: 20px;}

    .caseStudy__img{ height: 160px; margin-bottom: 12px;}
    .pgDesc.endLine{ margin-bottom: 30px;}
    
    .initiative__list{ gap: 16px; grid-template-columns: 1fr; margin-bottom: 30px;}
    .initiative__listItem{ width: 100%;}
    .initiative__listItem--imgWrapper{ height: 160px;}
    .initiative__listItem--contentWrapper{ padding: 16px;}
    .initiative__listItem--header{ font-size: 18px; line-height: 24px;}
    .initiative__listItem--desc{ font-size: 14px; line-height: 20px;}

    .footerCont{ padding:0 16px 30px 16px;}
    .footerInner{ flex-direction: column; padding-top: 24px;}
    .ftrLeft{ width: 100%; max-width: unset; text-align: center; gap: 20px;}
    .ftrLeft__title{ font-size: 14px; line-height: 20px; margin-bottom: 0;}
    .addressEmailMob{ display: block; color: #fff; font-size: 16px;}
    .ftrLeft__logo{ margin-bottom: 20px;}
    .ftrLeft__logo img{ width: 120px;}
    .ftrRight__top{ display: none;}
    .ftrRight__social{ gap: 30px; justify-content: center; border-top: 1px solid #d8d8d8; padding-top: 24px;}
    .ftrRight__social a{ width: 28px;}

}
@media (min-width: 768px) and (max-width: 1199px) {
    .headerInner{ padding: 16px;}
    .headerLogo__text{ font-size: 14px; line-height: 18px; margin-top: 5px;}
    .logoSeparator{ height: 15px; margin: 6px 10px 0 10px;}
    .headerLogo{ width: 90px;}
    .hamburger{ display: block; z-index: 10;}
    .topNav{ width: 100%; height: 100%; background-color: #fff; position: fixed; top: 0; left: -100%; flex-direction: column; gap: 10px; padding: 60px 0; opacity: 0;}
    .topNav > li{ padding: 0 20px;}
    .topNav > li > a{ padding: 5px 0;}
    .subNav{ display: flex; position: unset; padding: 10px 0 0 15px; flex-direction: column; gap: 20px; border-top: 0; box-shadow: none;}
    .subNav__col>p{ font-size: 14px;}
    .subNav__list>li{ font-size: 16px; line-height: 22px;}
    .topNav>li>a > img{ top: -6px;}

    .hero__section{ padding: 50px 0 0 0;}
    .hero__cupWhite { width: 44px; bottom: 0; left: 0px;}
    .hero__3dotBottom { width: 24px; bottom: 36px; left: 36px;}
    .hero__section--inner { max-width: 100%; padding: 20px;}
    .lottie__wrapper {position: absolute; width: 100%; top: 300px; z-index: 1;}
    .hero__header { font-size: 16px; line-height: 20px; margin-bottom: 8px;}
    .hero__circleImg { height: 46px; width: 173px; left: 0; top: -16px;}
    .hero__header--main {font-size: 26px; line-height: 26px; margin: 0 auto 20px;}
    .hero__section--imgWrapper {gap: 10px;}
    .hero__section--imgInner2{ gap: 10px;}
    .hero__section--imgWrapper .grayscaleImg{ border-radius: 6px;}
    .hero__noPlaticAnimation {top: -44px; right: -10px; width: 60px;}
    .hero__squiggleAnimation {bottom: -30px; right: -4px; width: 40px;}
    .hero__noCupAnimation2 { width: 40px; left: -14px;}
    .heroDesc__3lineAnimation {top: -20px; right: -20px; width: 40px;}
    .hero__info {font-size: 22px; line-height: 36px;}
    .hero__info--desc { font-size: 16px; line-height: 22px;}
    .hero__3lineGreenAnimation{ display: none;}

    .hero__header--mainImg{ max-width: 200px; display: block; margin: 0 auto;}
    .hero__section--imgWrapper{ gap: 10px;}
    .hero__desc{ font-size: 18px; line-height: 26px; margin-top: 30px;}

    .sustainable__section {padding: 0 0 30px;}
    .sustainable__noPlastic {width: 60px; top: 0; left: 0;}
    .sustainable__fish { width: 60px; top: 60px; left: -20px;}
    .sustainable__recycleWhite { width: 30px; top: 32px; left: 0px;}
    .sustainable__section--inner {flex-direction: column; padding: 30px;}
    .sustainable__left {margin-left: unset;}
    .sustainable__header { max-width: 100%; text-align: center; font-size: 24px; line-height: 32px;}
    .sustainable__right { display: none;}
    .sustainable__right--mobile { display: block; margin: 0 -30px;}
    .swiperMobile { width: 100%; overflow: hidden;}
    .swiper-slide--mobile { background-position: center; background-size: cover; width: 240px; height: 340px; border-radius: 16px; overflow: hidden;}
    .swiper-slide-active .swiper-slide-info {display: flex;}
    .swiper-slide-info {position: absolute; width: 100%; height: 100%; display: none; justify-content: flex-end; padding: 20px 16px; flex-direction: column; border-radius: 0 0 16px 16px;}
    .swiper-slide-infoHeader { font-size: 12px; text-transform: uppercase;}
    .swiper-slide-infoDesc { font-size: 16px; line-height: 20px; margin-bottom: 5px;}
    .sustainable__circleImg{ display: none;}
    .purpose__section { padding: 30px 0;}
    .purpose__section--inner { padding: 0 20px;}
    .purpose__header--main { font-size: 24px; line-height: 32px; margin-bottom: 24px;}
    .purpose__desc { font-size: 18px; line-height: 26px; margin-bottom: 30px;}
    .purpose__desc--bold { font-size: 14px; line-height: 20px;}
    .purpose__circleImg{ display: none;}
    .purpose__list{ flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; margin-top: 30px; padding: 0 20px;}
    .purpose__list--item{ width: 260px; flex-shrink: 0;}
    .swiper-slide-moreInfo{ font-size: 12px; line-height: 16px;}

    .empower__section { padding: 30px 0;}
    .empower__circleImg{ display: none;}
    .empower__noplastic--img{ display: none;}
    .empower__section--inner { padding: 0 20px; flex-direction: column;}
    .empower__section--left { width: 100%;}
    .empower__header { font-size: 24px; line-height: 32px; text-align: center;}
    .empower__desc { font-size: 14px; line-height: 20px; text-align: center; max-width: 60%; margin: 0 auto 20px;}
    .empower__section--right { width: 100%;}
    .empower__list { max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
    .empower__list--itemInner{ height: unset; width: 100%;}
    .foundation__section{ padding: 0 16px 30px 16px;}
    .swiperBtn__cont{ display: none;}

    .cs__section {padding: 30px 0;}
    .cs__globe--img{ display: none;}
    .cs__section--inner { flex-direction: column; padding: 0 20px;}
    .cs__section--left { width: 100%;}
    .cs__header--desc { font-size: 20px; line-height: 26px; text-align: center; margin-bottom: 6px;}
    .cs__header { font-size: 24px; line-height: 30px; margin-bottom: 8px; text-align: center;}
    .cs__circleImg{ display: none;}
    .cs__desc { font-size: 18px; line-height: 26px; text-align: center;}
    .cs__section--right { width: 100%; margin-top: 0;}
    .cs__list{ display: none;}
    .cs__list--mobile { display: block;}

    .cs__list--mobileImg{ width: 150px;}
    .cs__list--mobiledescDate{ font-size: 16px; line-height: 24px;}
    .cs__list--mobiledescHeader{ font-size: 20px; line-height: 26px;}
    .cs__list--mobiledescInfo{ font-size: 16px; line-height: 24px;}

    .initiative__section { padding: 30px 0;}
    .initiative__sunImg{ display: none;}

    .initiative__gridWrapper{ display: none;}
    .initiative__mobileWrapper{ display: block; padding: 20px;}

    .heroSection{ height: 300px;}
    .heroSection__inner{ padding: 0 16px 16px 16px;}
    .heroSection__inner h2{ font-size: 28px; line-height: 36px;}
    .contentWrapper{ padding: 30px 16px;}

    .mainTitle{ font-size: 24px; line-height: 32px;}
    .mainSubTitle{ font-size: 24px; line-height: 32px;}
    .subTitle{ font-size: 18px; line-height: 26px;}
    .description{ font-size: 18px; line-height: 26px;}
    .smallDescription{ font-size: 18px; line-height: 26px;}

    .climateList > li p:first-child { font-size: 24px; line-height: 28px; }
    .climateList > li p:last-child { font-size: 16px; line-height: 20px; }
    .contentSection__item { padding: 20px; }
    .imagesList { margin-bottom: 20px; }
    .contentSection__itemHdr { font-size: 22px; line-height: 28px; }

    .diversityFtrList li{ font-size: 18px; line-height: 26px;}


    .initiative__section--main-desc{ font-size: 18px; line-height: 26px; margin-bottom: 16px;}
    .initiative__header{ font-size: 24px; line-height: 32px; margin-bottom: 10px;}
    .initiative__header--desc{ font-size: 18px; line-height: 26px; margin-bottom: 16px;}
    .aboutus__featureList{ display: grid; grid-template-columns: 1fr; gap: 30px;}
    .aboutus__featureListItem{margin-bottom: unset; flex-direction: column; gap: 20px;}
    .aboutus__featureListItemHeader{ font-size: 22px; line-height: 28px;}
    .aboutus__featureListItemDesc{ font-size: 18px; line-height: 26px;}
    .aboutus__featureListItemImg{ width: 100%;}
    .initiative__socImg{ margin-bottom: 16px; height: 260px;}
    .initiative__header--descMain{ font-size: 18px; line-height: 22px;}
    .initiative__header--desc.endLine{ margin-bottom: 30px;}

    .climate__list--item{ padding: 30px; gap: 5px; height: 160px;}
    .climate__list--itemHeader{ font-size: 24px; line-height: 28px;}
    .climate__list--itemDesc{ font-size: 12px; line-height: 16px;}

    .initiative__hr-list--itemDesc{ font-size: 18px; line-height: 26px;}
    .initiative__hr-list--item::before{ width: 6px; height: 6px; top: 8px;}

    .initiative__socImgList{ display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px;}
    .initiative__socImgListItem{ height: 300px; width: 100%;}

    .news__section--header{ font-size: 20px; line-height: 28px;}
    .news__section--subheader{ font-size: 18px; line-height: 28px;}
    .governance-desc{ font-size: 18px; line-height: 26px; margin-bottom: 16px;}
    .governance-listItem{ font-size: 18px; line-height: 26px;}

    .news__list{ gap: 20px; margin-bottom: 40px; flex-direction: column;}
    .news__list--item{ width: 100%;}
    .news__list--img{ height: 260px;}
    .news__list--contentWrapper{ padding: 16px;}
    .news__list--content--header{ font-size: 18px; line-height: 22px;}
    .news__list--content--desc{ font-size: 18px; line-height: 26px;}

    .pgHeader{ font-size: 18px; line-height: 26px; margin-bottom: 6px;}
    .pgDesc{ font-size: 18px; line-height: 26px; margin-bottom: 20px;}

    .caseStudy__img{ height: 160px; margin-bottom: 12px;}
    .pgDesc.endLine{ margin-bottom: 30px;}
    
    .initiative__list{ gap: 16px; flex-direction: column; margin-bottom: 30px;}
    .initiative__listItem{ width: 100%;}
    .initiative__listItem--imgWrapper{ height: 160px;}
    .initiative__listItem--contentWrapper{ padding: 16px;}
    .initiative__listItem--header{ font-size: 18px; line-height: 24px;}
    .initiative__listItem--desc{ font-size: 18px; line-height: 26px;}

    .footerCont{ padding:0 16px 30px 16px;}
    .footerInner{ flex-direction: column; padding-top: 24px;}
    .ftrLeft{ width: 100%; max-width: unset; font-size: 18px; line-height: 24px; text-align: center; margin-bottom: 24px;}
    .ftrRight__top{ display: none;}
    .ftrRight__social{ gap: 30px; justify-content: center; border-top: 1px solid #d8d8d8; padding-top: 24px;}
    .ftrRight__social a{ width: 28px;}
    .addressEmailMob{ display: block; color: #fff; font-size: 16px;}
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .contentWrapper{ padding: 50px 20px;}
    .heroSection__inner{ padding: 0 0 30px 0;}
    .headerInner{ padding: 0 20px;}
    .topNav{ gap: 30px;}
    .hero__section--inner{ padding: 0 100px;}
    .sustainable__left{ width: 300px; flex-shrink: 0;}
    .sustainable__right{ width: calc(100% - 330px);}
    .sustainable__right .swiper{ width: 100%;}
    .sustainable__header{ font-size: 28px; line-height: 40px;}
    .swiper-button-prev{ left: 4%;}
    .swiper-button-next{ left: 12%;}
    .purpose__section{ padding: 50px 30px;}
    .purpose__header--main span{ position: relative;}
    .purpose__circleImg{ width: 200px; position: absolute; left: 0; top: 0;}
    .empower__section{ padding: 50px 30px;}
    .empower__header{ font-size: 32px; line-height: 42px;}
    .cs__section{ padding: 50px 30px;}
    .cs__header{ font-size: 42px; line-height: 54px;}
    .initiative__section{ padding: 50px 30px;}
    .initiative__gridWrapper{ padding: 0 30px;}
    .hero__header--mainImg{ display: block; margin: 0 auto;}
    .initiative__sunImg{ bottom: -50px;}
    .initiative__list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
    .initiative__listItem{ width: 100%;}
    .foundation__section{ padding: 0 20px 30px 20px;}

    .footerCont{ padding: 50px 30px;}
}