Footer issue in reactjs application

Question

import React from 'react';
import cn from 'classnames';
import { Link } from 'react-router-dom';
import FooterTextBox from './FooterTextBox';
import LangPicker from './LangPicker';
import styles from './footer.module.css';
import {
  APP_CONFIG, FOOTER_CONFIG,
} from '@constants';
import * as availableLanguages from '@localization';

let InitialImage = '';
if (APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_VOCATIONAL) {
  InitialImage = require('@assets/images/logoWhiteFooter.png');
} else if (APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_CAMPUSINDE) {
  InitialImage = require('@assets/images/logoWhiteFooter.png');
} else if (APP_CONFIG.TEACHER_TRAINING_SUB === APP_CONFIG.SUB) {
  InitialImage = require('@assets/images/logoWhiteFooter.png');
} else if (APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_VIBGYOR || APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_MTDC) {
  InitialImage = require('@assets/images/logoWhiteFooter.png');
} else if (APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_RAWANDA) {
  InitialImage = require('@assets/images/logoWhiteFooter.png');
} else {
  InitialImage = require('@assets/images/GyanDeep_Logo_footer.svg');
}

const Footer = (props) => {
  const { selectedLanguage, isInbox } = props;
  let isVleap = false;
  let isVgyan = false;
  if (APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_VIBGYOR || APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_MTDC) {
    isVleap = true;
    isVgyan = true;
  }
  const CONSTANTS = availableLanguages[selectedLanguage];
  return (
    <footer className={cn('page-footer font-small blue', isInbox ? 'mt-20' : 'mt-50')}>
      <div className={cn('bg-footer-grey')}>
        <div
          className={cn(
            styles.div_row,
            APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_CAMPUSINDE ? 'row mb-10 mr-0' : 'row mr-0'
          )}
        >
          <div className={cn('col-12 col-lg-3 d-md-flex max-height-180 flex-column justify-content-between', styles.respImage)}>
            <div className={cn('d-flex flex-column justify-content-center min-height-150', styles.respdiv)}>
              <img className={cn('d-block', styles.backgroundWhite)} src={InitialImage} alt="company logo" width="120" />
              <p className={cn(styles.footerContent, 'fs-12 p-0 m-0')}>
                {CONSTANTS.POWERED_BY}
              </p>
            </div>
          </div>
          <div className={cn(styles.footerMargin, 'col-12 col-lg-3')}>
            <div className={cn(styles.footerTitle)}>
              {CONSTANTS.CONTACT}
            </div>
            {APP_CONFIG.HOST_TYPE !== APP_CONFIG.HOST_TYPE_CAMPUSINDE && APP_CONFIG.HOST_TYPE !== APP_CONFIG.HOST_TYPE_MTDC && (
              <div className={cn(styles.footerContent, 'fs-12')}>
                {CONSTANTS.KP_CONTACTDETAILS_LINE_1}
                <br />
                {CONSTANTS.KP_CONTACTDETAILS_LINE_2}
                <br />
                {CONSTANTS.KP_CONTACTDETAILS_STATE}
                <br />
                {CONSTANTS.KP_CONTACTDETAILS_COUNTRY}
                <br />
                <br />
                {(APP_CONFIG.HOST_TYPE !== APP_CONFIG.HOST_TYPE_VIBGYOR && APP_CONFIG.HOST_TYPE !== APP_CONFIG.HOST_TYPE_TEACHERS) && `${CONSTANTS.PHONE_NUMBER_LABEL} ${CONSTANTS.KP_CONTACTDETAILS_PHONE_NUMBER}`}
                <br />
                {`${CONSTANTS.EMAIL_LABEL} ${isVleap ? CONSTANTS.KP_VLEAP_CONTACTDETAILS_EMAILID : CONSTANTS.KP_CONTACTDETAILS_EMAILID}`}
              </div>
            )}
            {APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_MTDC && (
              <div className={cn(styles.footerContent, 'fs-12')}>
                {CONSTANTS.KP_CONTACTDETAILS_LINE_1_VGYAN}
                <br />
                {CONSTANTS.KP_CONTACTDETAILS_LINE_2_VGYAN}
                <br />
                {CONSTANTS.KP_CONTACTDETAILS_STATE_VGYAN}
                <br />
                {CONSTANTS.KP_CONTACTDETAILS_COUNTRY_VGYAN}
                <br />
                <br />
                {`${CONSTANTS.EMAIL_LABEL} ${isVgyan ? CONSTANTS.KP_VGYAN_CONTACTDETAILS_EMAILID : CONSTANTS.KP_CONTACTDETAILS_EMAILID}`}
              </div>
            )}
            {APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_CAMPUSINDE && (
              <div className={cn(styles.footerContent, 'fs-12')}>
                {CONSTANTS.CI_COTE_CONTACTDETAILS_NAME}
                <br />
                {CONSTANTS.CI_COTE_CONTACTDETAILS_EMAILID}
                <br />
                {CONSTANTS.CI_COTE_CONTACTDETAILS_PH}
                <br />
                <br />
                {CONSTANTS.CI_CAMEROON_CONTACTDETAILS_NAME}
                <br />
                {CONSTANTS.CI_CAMEROON_CONTACTDETAILS_EMAILID}
                <br />
                {CONSTANTS.CI_CAMEROON_CONTACTDETAILS_PH}
                <br />
                <br />
                {CONSTANTS.CI_RWANDA_CONTACTDETAILS_NAME}
                <br />
                {CONSTANTS.CI_RWANDA_CONTACTDETAILS_EMAILID}
                <br />
                {CONSTANTS.CI_RWANDA_CONTACTDETAILS_PH}
                <br />
              </div>
            )}
          </div>
          <div className="col-12 col-lg-2">
            <div className={cn(styles.footerTitle, styles.footerTitleResp)}>
              {CONSTANTS.QUICK_LINKS}
            </div>
            <div>
              <Link to={`${APP_CONFIG.BASE_URL}/#`} className={cn(styles.footerContent, styles.noPointEvent, 'fs-12')}>
                {CONSTANTS.ABOUT_US}
              </Link>
            </div>
            <div>
              {APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_RAWANDA
                ? (
                  <Link
                    to={`${APP_CONFIG.BASE_URL}/TermsOfUse`}
                    className={cn(styles.footerContent, styles.footerHeight, 'fs-12')}
                  >
                    {CONSTANTS.TERMS_OF_USE}
                  </Link>
                )
                : (
                  <div
                    className={cn(styles.footerContent, styles.noPointEvent, styles.footerHeight, 'fs-12')}
                  >
                    {CONSTANTS.TERMS_OF_USE}
                  </div>
                )
              }
            </div>
            <div>
              {APP_CONFIG.HOST_TYPE === APP_CONFIG.HOST_TYPE_RAWANDA
                ? (
                  <Link
                    to={`${APP_CONFIG.BASE_URL}/PrivacyPolicy`}
                    className={cn(styles.footerContent, 'fs-12')}
                  >
                    {CONSTANTS.PRIVACY_POLICY}
                  </Link>
                )
                : (
                  <div
                    className={cn(styles.footerContent, styles.noPointEvent, 'fs-12')}
                  >
                    {CONSTANTS.PRIVACY_POLICY}
                  </div>
                )
              }
            </div>
            <div>
              <Link
                to={`${APP_CONFIG.BASE_URL}/faqandcontactus/faq/contactus`}
                className={cn(styles.footerContent, 'fs-12')}
              >
                {CONSTANTS.CONTACT_US}
              </Link>
            </div>
            <div>
              <Link
                to={FOOTER_CONFIG[selectedLanguage].linkto[APP_CONFIG.HOST_TYPE]}
                className={cn(styles.footerContent, 'fs-12')}
              >
                {CONSTANTS.FAQ}
              </Link>
            </div>
            <div>
              <Link
                to={`${APP_CONFIG.BASE_URL}/help`}
                className={cn(styles.footerContent, styles.noPointEvent, 'fs-12')}
              >
                {CONSTANTS.HOW_TO}
              </Link>
            </div>
          </div>
          <div className="col-12 col-md-6 col-lg-4 mt-50 mb-30">
            <div className={cn(styles.footerContent, 'fs-24')}>
              {CONSTANTS.HAVE_A_QUESTION}
            </div>
            <div className={cn(styles.footerContent, 'fs-10')}>
              {CONSTANTS.LEAVE_A_REPLY_MESSAGE}
            </div>
            <div className="mt-3">
              <FooterTextBox selectedLanguage={props.language} />
              <LangPicker handleChange={props.handleLanguageChange} selectedLanguage={props.language} showLangPicker={props.showLangPicker} />
            </div>
          </div>
        </div>
        <div
          className={cn(
            styles.div_row,
            'row align-items-center justify-content-space-between pt-15 pb-15 mr-0',
            styles.borderTop
          )}
        >
          <div className="col-12 col-md-12 text-white text-center">
            {FOOTER_CONFIG[selectedLanguage].copyright[APP_CONFIG.HOST_TYPE]}
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

.footerTitle {
  composes: fw-700 fs-18 clr-lite-grey mb-15 mt-50 from '@scss/global.css'; }

.footerContent {
  composes: clr-white fw-300 from '@scss/global.css'; }

.div_row {
  padding-left: 85px;
  padding-right: 85px; }

.div_social {
  composes: mr-85 float-right from '@scss/global.css'; }

.a_youtube {
  composes: ml-40 fs-20 clr-white from '@scss/global.css'; }

.a_linkedin {
  composes: ml-40 fs-20 clr-white from '@scss/global.css'; }

.a_twitter {
  composes: fs-20 clr-white from '@scss/global.css'; }

.FooterInputField {
  composes: position-relative fs-14 from '@scss/global.css';
  box-shadow: none !important;
  height: 42px;
  line-height: 42px; }

.FooterSubmit {
  composes: border-0 bg-orange clr-white from '@scss/global.css'; }

.noPointEvent {
  pointer-events: none; }

.borderTop {
  border: 1px solid; }

.socialContainer {
  composes: col-12 col-md-3 d-flex from '@scss/global.css';
  justify-content: flex-end; }

@media (max-width: 767.98px) {
  .socialContainer {
    margin-top: 20px; }
  .footerMargin {
    composes: mt-0 from '@scss/global.css'; }
  .footerTitle {
    margin-top: 0; }
  .footerTitleResp {
    margin-top: 3rem; } }

@media (max-width: 991.98px) {
  .div_row {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0 !important; }
  .socialContainer {
    justify-content: center !important; }
  .pageFooter {
    margin-top: 0 !important; }
  .footerMargin {
    margin-top: 5rem; } }

@media (min-width: 768px) and (max-width: 992px) {
  .respImage {
    margin-top: 0; }
  .footerMargin {
    composes: mt-0 from '@scss/global.css'; }
  .footerTitle {
    margin-top: 0; }
  .footerTitleResp {
    margin-top: 3rem; } }

@media (min-width: 992px) and (max-width: 1200px) {
  .respImage {
    margin-top: 60px;
    align-items: center; }
  .respdiv {
    align-items: center; } }

@media (min-width: 1200px) {
  .respImage {
    margin-top: 60px;
    align-items: center; }
  .respdiv {
    align-items: center; } }

@media (max-width: 767.98px) {
  .respImage {
    composes: col-xs-6 d-flex from '@scss/global.css';
    margin-top: 0 !important; }
  .footerMargin {
    composes: mt-0 from '@scss/global.css'; }
  .footerTitle {
    margin-top: 0; }
  .footerTitleResp {
    margin-top: 3rem; } }

.footerHeight {
  line-height: 21px; }

.backgroundWhite {
  background: white; }


  

I have footer component in react where footer class is creating border or shadow on every page but in some pages it's not visible. I just want to remove that class in only one page.I tried finding the logic applied for showing or hiding this on certain pages but didn't worked out

I tried inspecting and removing the footer class then that border or block removes above the footer design but if I do so it will affect everywhere