@media (min-width: 1920px) and (max-width: 2560px) {
}

@media (min-width: 1600px) and (max-width: 1919px) {
}


@media only screen and (min-width: 1400px) and (max-width: 1599px) {
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #banner .common-container {scale: 0.9;width: 1280px;}
    .common-container { width: 1200px; }
    .smalltitle {font-size: 20px;}
    .bigtitle {font-size: 36px;line-height: 46px;}
    #innerPage h1 {font-size: 60px;}
}

/* 3. scale and layout setting at 150% */
@media (resolution: 1.5dppx) {
    
    #banner .common-container {scale: 0.9;}
    .smalltitle {font-size: 20px;}
    .bigtitle {font-size: 36px;line-height: 46px;}
    #innerPage h1 {font-size: 60px;}
  }
  


/* Extra small */
@media (min-width: 320px) and (max-width: 767px) 

{}


/* mobile,, ipad, */
@media screen and (max-width: 75rem)
{
.row { margin: 0px; }
.common-container { padding-left: 15px; padding-right: 15px; }
#header { height: auto; }
#header .common-container {padding-left:0px; padding-right:0px;}
#header .topdownload { display: none; }
#header .Sbilog { padding-left: 10px; }
#header .ham {right: 10px;top: 5px;}
#header .topdownload br { display: none; }
.bigtitle {font-size: 30px;line-height: 36px;}
.commonbt {box-shadow:none;}
#banner { text-align: center; height: auto; padding-top: 140px; text-align: center; padding-top: 100px; padding-bottom: 30px;}
#banner .bannerleft { padding-right: 0; padding-top: 0; }
#banner .bannerleft h1 {font-size: 50px;line-height: 50px; margin-top: 30px; }
#Messagefrom .messagepic img { width: 100%; }
#Messagefrom .messagepicRight {
padding-top: 40px;
}
.mt60 {
margin-top: 20px;
}

#ourPre::before,#ourPre::after { display: none; }
#ourPre .OurPresence { padding-right: 0px; }
#ourPre .OurPresence .unparalledpix { position: relative; margin-top: 30px; text-align: center; }
#ourPre .OurPresenceRight { background-color:#004587; padding: 10px; }
#ourPre .OurPresenceRight .bigtitle { margin-bottom: 20px; }
.finbox img { margin-bottom: 10px; }
#ourPre .OurPresenceRight .infono {
height: auto; margin-bottom: 30px;
}

#FinancialPerformance {padding-top: 50px;}
#FinancialPerformance .bigtitle  {padding-bottom: 30px;}
#BusinessSegments {padding-top: 30px;}
#BusinessSegments .BusinessLeft .SegmentsBox {margin-top: 50px;margin-left: 0;}
#BusinessSegments .SegmentsBox {width: 100%;}
#BusinessSegments .Businessright {padding-left: 40px;
padding-top: 0;
}

#EDE .edeBox {height: 680px;}
#EDE {
padding-top: 40px;
padding-bottom: 30px;
}

#valuectration {
padding-top: 30px;
padding-bottom: 40px;
}


#valuectration .card-header {padding: 0rem; border-top: 1px solid rgba(0,0,0,.125); border-bottom: none; }
#valuectration .card-header h5 a {font-size: 20px; color:#1B262C; font-weight:700; display: block; padding: 1rem 1rem; background: url(../images/Orange-min.svg) no-repeat 98% center; }

#valuectration .card-header h5 a.collapsed { background: url(../images/Orange-plus.svg) no-repeat 98% center; }
#valuectration .card-body {padding: 0;}
#valuectration .valuensliderBox {padding: 7px;}
#valuectration .valuensliderBox h2 {font-size: 20px;}
#valuectration .valuensliderBox ul li { font-size: 16px; }
#valuectration .responsive-tabs {
margin-bottom: 20px;margin-top: 10px;
}
#EDE .edeBox .bigtitle {font-size: 30px;line-height: 34px;}
#CSS .edeBox .bigtitle {font-size: 30px;line-height: 34px;}

#CSS {
padding-bottom: 40px;
padding-top: 20px;
}

#CSS .edeBox {height: 680px;}
#StrategyAction .lifecycle { width: 100%; }
#StrategyAction .lifecycle-management {font-size:18px; margin-bottom: 15px; }
#StrategyAction .acquisition p {margin-top: 0px;}
#StrategyAction .Pillarsgrowth {
height: auto;
padding: 20px 10px;
}

#StrategyAction {
padding-bottom: 20px;
padding-top: 30px;
}

#StrategyAction .commonbt  { margin-bottom: 30px; }
#ERG { padding-top: 30px; padding-bottom: 30px; }
#ERG .ergBox {height: auto;padding: 20px; margin-bottom: 20px; }

#ExternalEnvironment .ExternalRight .SegmentsBox,#ExternalEnvironment .ExternalRight .GoverBox {width: 100%;}
#ExternalEnvironment .ExternalRight .SegmentsBox .bigtitle,#ExternalEnvironment .ExternalRight .GoverBox .bigtitle {font-size: 32px;line-height: 36px;}
#ExternalEnvironment .ExternalLeft {height: 500px;}
#DownloadCenter {
padding-top: 0px;
}

#DownloadCenter .smalltitle { margin-bottom: 30px; }
#DownloadCenter a {font-size: 16px;}
#header .hdfclog {
padding: 10px;
}
#header .ham img { width: 76%; }
#Messagefrom { padding-bottom: 30px; }
.Pan-India-Table,.SustainabilityTable,.Mappingtable { overflow: scroll; width: 98%; margin: auto; }
#Journey #timeline:before { display: none; }
#Journey #timeline .entries .entry {width: 100%; float: none; text-align: left;}
#Journey #timeline .entries .entry .title:before { right: inherit; left: -56px; }
#Journey #timeline .entries .entry:not(:first-child) {margin-top: 0;}
#Journey #timeline .entries .entry .title:before {background-image: url(../images/redarrow.png);}
.BusinessHolder .Ouredge {transform: translate(0px, 0px);}
.BusinessHolder .BusinessBox .ex-h,.ex-h-2,.ex-h-5,.ex-h-3,.ex-h-4 {
height: auto !important;
}

.scope h4::before, .pipeline h4::before { display: none; }
#footer { text-align: center; margin-top: 20px;}
.p-5 {padding: 1.5rem!important;}
.ex-mt { margin-bottom: 30px; }
.sptable,.EmissionTable { overflow: scroll; width:98%; }

.fs24 {
font-size: 16px !important;
line-height: 32px;
}

span.num {padding: 5px 10px;}

.stories-of-parivartan {
font-size: 24px !important;
line-height: 30px;
}
#footer a {
color: #FFFFFF;
font-size: 16px;
margin-right: 3px;
}
.reduceBox.h-1,.reduceBox.h-2 {
height: auto;
}

.mm0{ margin:0px !important; }
.mmt0{ margin-top:0px !important; }
.mmt10{ margin-top:10px !important; }
.mmt20{ margin-top:20px !important; }
.mmt30{ margin-top:30px !important; }
.mmt50{ margin-top:50px !important; }
.mmb0{ margin-bottom:0px !important; }
.mmb30{ margin-bottom:30px !important; }
.mmb50{ margin-bottom:50px !important; }
.mmp10{padding-bottom:10px !important;}
.mmp20{padding-bottom:20px !important;}
#innerPage { padding-top: 100px; }
#innerPage h1 { font-size: 55px; margin-bottom: 10px; }
#innerPage .blur-text{ line-height: 25px; margin-bottom: 10px; }
.highlights{margin-bottom: 65px;}
.w10{ margin-right:10px;	}
.w90{ width:80%;	}

.employee-engagement{ padding:15px;}
.Leading .responsiblypix1 {transform: translate(0px,0px);}
#banner a { font-size: 17px; }
#leading .responsiblyimh { position: relative; left: 0px !important; top: 0px !important; bottom: 0px !important; width: 26% !important; margin:0px 5px; display: inline-block; }
#leading .responsiblyimh img { width: 100%; }
#leading {height: auto;    padding-top: 30px;}
#leading p br { display: none; }
#leading h2 {font-size: 36px;line-height: 42px;}
#chairperson { height: auto;overflow: inherit; }
#chairperson .chairmanBox, #chairperson .MessageBox { overflow: inherit; padding-top: 0; padding-bottom: 30px; }
#chairperson .chairmanBox .atanu-home,#chairperson .MessageBox .sashidhar-home { position: relative; text-align: center; }
#chairperson .chairmanBox .atanu-home img,#chairperson .MessageBox .sashidhar-home img { width: 100%; }
#chairperson .chairpersondetail,#chairperson .chairpersondetai2 { width: 100%; padding: 10px; margin-left: 0;}
.smalltitle {font-size: 18px;}
.smalltitle.hdfcicon {background-size: 15px;padding-left: 25px;}
.bigtitle.hdfcicon {
    padding-left: 25px;
}
.bigtitle.hdfcicon br { display: none; }

.extraPd {
    padding-left: 25px;
}

#OurPresence {padding-top: 30px;padding-bottom: 50px;}

.fs22 {
    font-size: 20px;
    line-height: 25px;
}

#OurPresence .common-container { padding-left: 0px; padding-right: 0px; }
#OurPresence .PresenceBox h4 {padding: 20px 0px;}
#OurPerformance {padding-top: 20px;}
#businessSegment {padding-top: 30px;}
#businessSegment .SegmentBox { margin-bottom: 20px; height: auto; padding: 14px;}
#businessSegment .SegmentBox .businessicon {position: relative; top: 0px;left: 0; }
.mt-5 {margin-top: 1rem!important;}
#businessSegment {padding-bottom: 40px;}
#CommercialTailored .CommercialBox{ background-size: 330px; background-position: top center; padding-top: 360px; }
#CommercialTailored .CommercialBox .innerbox, #CommercialTailored .TailoredBox .innerbox { width: 95%; margin: auto; overflow: inherit; }
#CommercialTailored .TailoredBox { padding-top: 40px; }
#homeesg {padding-top: 30px;padding-bottom: 10px;}
#homeesg .esgbox, #homeesg .HomeFutureReady {height: auto;}
#homeesg .esgbox {padding: 40px 20px;padding-top: 30px;height: 360px;}
#homeesg .HomeFutureReady { padding: 20px; margin-bottom: 20px; }
#valuectration .responsive-tabs { padding: 0px; }
#valuectration #collapse-B .valuensliderBox, #valuectration #collapse-C .valuensliderBox { height: auto; }
#DownloadCenter .downloadcenterbox { padding: 20px; }
#businessSegment .SegmentBox h2 {margin-top: 12px   }
#CommercialTailored { height: auto; }
#innerPage h1 {font-size: 46px;line-height: 40px;}
.mdRight  { padding-left: 0px !important; padding-right: 0px !important; }
.blue-grd {padding: 15px; margin-top: 20px;}
.org-bx,.stk-wrp { height: auto; }
.px-5 { padding: 10px !important; }
}

@media screen and (max-width: 62rem) 
{

}

/* mobile small */
@media screen and (max-width: 35.4375rem) 
{
    .nopd { padding-left: 0px; padding-right: 0px; }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1199px) and (orientation: landscape) 
{
    #ERG .ergBox,#homeesg .esgbox,#homeesg .HomeFutureReady {height: 100%;}
    .smalltitle {
        font-size: 22px;
    }
    #CommercialTailored .CommercialBox {background-size: cover;padding-top: 40px;}
    #businessSegment .bigtitle {
        margin-bottom: 0;
    }
    #businessSegment .SegmentBox,#OurPresence .PresenceBox { height: 100%; }
    #chairperson .chairmanBox .atanu-home img, #chairperson .MessageBox .sashidhar-home img {
        width: 80%;
    }
    #chairperson .chairmanBox .atanu-home, #chairperson .MessageBox .sashidhar-home {
        text-align: right;
    }
    #leading .responsiblyimh {margin: 20px 11px;}
    .mdRight  { padding-left: 0px !important; padding-right: 0px !important; }
    .overlay {padding-top: 30px;margin-top: 56px;}
    .awards-wrp { height: 95% !important; min-height: auto !important; padding-bottom: 20px !important; }
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait)

  {
    #ERG .ergBox.riskbg {height: 440px;}
    #DownloadCenter .downloadcenterbox {height: 80%;}
    .text-md-end {
        text-align: center!important;
    }
    .mdRight  { padding-left: 0px !important; padding-right: 0px !important; }
    .kgdgrids {grid-template-columns: repeat(2, 1fr);}
    .overlay {margin-top: 50px; padding-top: 50px}
    .awards-wrp { height:auto !important; min-height: auto !important; margin-bottom: 20px; }
  }