:root {
  --paper: #fff;
  --frame: #eeeeee;
  --ink: #111;
  --rule: #9f9f9f;
  --blue: #2c4e9f;
  --orange: #ef6423;
  --max: 1024px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--frame); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.25; }
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--orange); }
h2 { margin: 0 0 2.5rem; font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
h4 { margin: 2rem 0 .6rem; font-size: 1rem; }

#container { width: min(100%, var(--max)); min-height: 100vh; margin: 0 auto; background: var(--paper); overflow: hidden; }
#header { width: 100%; height: 158px; padding: 48px 47px 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; background: #fff; }
#sharmalahead { width: 310px; height: 73px; flex: 0 0 310px; background: url(../images/sharmalahead_03.jpg) left top / contain no-repeat; }
#sharmalaheadtwo { width: 239px; flex: 0 0 239px; font-size: 10px; line-height: 1.1; }
#sharmalaheadtwo img { display: block; width: 239px; height: 73px; object-fit: contain; }
#sharmalaheadtwo a { color: #000; text-decoration: none; }
#logo { width: 296px; height: 73px; flex: 0 0 296px; background: url(../images/logo_05.jpg) right top / contain no-repeat; }
#ruler { width: 100%; height: 21px; background: #000; }

#navbar, #bottomnavigation { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; }
#navbar { min-height: 58px; border-bottom: 1px solid var(--rule); }
#navbarbtn { width: auto; height: auto; padding: 18px .5rem 14px; margin: 0; float: none; text-align: center; font-size: 16px; }
#navbarbtn a { color: #000; text-decoration: none; }
#navbarbtn a:hover { color: var(--blue); }
#bottomnavigation { min-height: 108px; margin-top: 2rem; padding-top: 1.1rem; background: #fff url(../images/bottomnavbarslice_16.jpg) repeat-x; }
hr, #spacingforrule { display: none; }

#mainpic { width: 100%; height: auto; padding: 34px 46px 0; background: #fff; }
#mainpic > #spacing, #pictureslideshow + br { display: none; }
#pictureslideshow { position: relative; width: 100%; height: auto; aspect-ratio: 932 / 406; overflow: hidden; background: #111; }
#header2, #header2 > div { width: 100% !important; height: 100% !important; }
#header2 img { width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; }

#summary { width: 100%; padding: 2rem 47px 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 47px; background: #fff; }
#summary > br, #summary > #spacing, #summary > #bullets { display: none; }
#summary > h3 { grid-column: 1 / -1; margin: 0 0 2rem; }
#Information { width: auto; height: auto; float: none; font-size: 12px; line-height: 1.35; }
#Information a { font-size: 11px; }
#bottomindex { width: 100%; min-height: 300px; padding: 0 47px 3rem; background: #fff; font-size: 10px; }
#bottomindex > h3 { margin: 0; }
#bottomindex #spacing { display: none; }
#logosatindex { width: 100%; height: 85px; background: url(../images/logosforindex_29.jpg) left center / contain no-repeat; }
#bottomindex a { font-size: 9px; text-decoration: none; }

#content { width: 100%; padding: 54px 47px 2rem; display: grid; grid-template-columns: minmax(0, 661px) minmax(180px, 235px); align-items: start; gap: 46px; background: #fff; }
#content > #spacing { display: none; }
#profildetails { width: auto; grid-column: 1; grid-row: 1 / span 80; float: none; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
#profildetails p { margin: 0 0 1.2rem; }
#profildetails a { font-size: 13px; }
#picture { width: 100%; grid-column: 2; float: none; text-align: center; }
#picture:not(:has(img)) { display: none; }
#picture img { display: block; margin: 0 auto 1.25rem; }
#backtotop { width: 100%; height: 90px; padding: 2rem 47px; float: none; text-align: right; font-size: 12px; }
#backtotop #spacing { display: none; }
#backbtn { width: auto; height: auto; float: none; background: none; }

@media (max-width: 760px) {
  body { font-size: 16px; background: #fff; }
  #header { height: auto; padding: 28px 22px 24px; align-items: center; gap: 1rem; }
  #sharmalahead { width: 190px; height: 50px; flex-basis: 190px; }
  #sharmalaheadtwo { width: 175px; flex-basis: 175px; }
  #sharmalaheadtwo img { width: 175px; height: auto; }
  #logo { width: 165px; height: 52px; flex-basis: 165px; }
  #ruler { height: 12px; }
  #navbar { min-height: 52px; }
  #navbarbtn { padding: 16px .4rem 13px; font-size: 15px; }
  #mainpic { padding: 22px 0 0; }
  #pictureslideshow { width: 100%; }
  #summary { padding: 2.3rem 22px 3rem; grid-template-columns: 1fr; row-gap: 2rem; }
  #summary > h3 { margin-bottom: 0; }
  #Information { font-size: 15px; line-height: 1.5; }
  #bottomindex { padding: 0 22px 2.5rem; }
  #logosatindex { height: 60px; }
  #content { padding: 38px 22px 2rem; grid-template-columns: 1fr; gap: 2rem; }
  #profildetails { grid-column: 1; grid-row: auto; font-size: 16px; line-height: 1.4; }
  #picture { grid-column: 1; }
  .profile-page #picture, .contact-page #picture { grid-row: 1; max-width: 235px; justify-self: center; }
  .profile-page #profildetails, .contact-page #profildetails { grid-row: 2; }
  .projects-page #picture { display: inline-block; width: min(45%, 235px); }
  #backtotop { height: auto; padding: 1.5rem 22px; }
  #bottomnavigation { min-height: 80px; }
}

@media (max-width: 430px) {
  #header { align-items: flex-start; padding-inline: 18px; }
  #sharmalahead { width: 160px; height: 44px; flex-basis: 160px; }
  #sharmalaheadtwo { width: 145px; flex-basis: 145px; }
  #sharmalaheadtwo img { width: 145px; }
  #logo { width: 145px; height: 45px; flex-basis: 145px; }
  #navbarbtn { font-size: 14px; }
  #summary, #content, #bottomindex { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }