AtharvaTejale/website

1 2/*--------------------------------------------------------------3# General4--------------------------------------------------------------*/5body {6  font-family: "Open Sans", sans-serif;7  color: #444444;8}9 10a {11  color: #ffc451;12  text-decoration: none;13}14 15a:hover {16  color: #ffd584;17  text-decoration: none;18}19 20h1,21h2,22h3,23h4,24h5,25h6 {26  font-family: "Raleway", sans-serif;27}28 29/*--------------------------------------------------------------30# Back to top button31--------------------------------------------------------------*/32.back-to-top {33  position: fixed;34  visibility: hidden;35  opacity: 0;36  right: 15px;37  bottom: 15px;38  z-index: 996;39  background: #ffc451;40  width: 40px;41  height: 40px;42  border-radius: 4px;43  transition: all 0.4s;44}45 46.back-to-top i {47  font-size: 28px;48  color: #151515;49  line-height: 0;50}51 52.back-to-top:hover {53  background: #151515;54}55 56.back-to-top:hover i {57  color: #ffc451;58}59 60.back-to-top.active {61  visibility: visible;62  opacity: 1;63}64 65/*--------------------------------------------------------------66# Preloader67--------------------------------------------------------------*/68#preloader {69  position: fixed;70  top: 0;71  left: 0;72  right: 0;73  bottom: 0;74  z-index: 9999;75  overflow: hidden;76  background: #151515;77}78 79#preloader:before {80  content: "";81  position: fixed;82  top: calc(50% - 0px);83  left: calc(50% - 30px);84  border: 6px solid #ffc451;85  border-top-color: #151515;86  border-bottom-color: #151515;87  border-radius: 50%;88  width: 60px;89  height: 60px;90  animation: animate-preloader 1s linear infinite;91}92 93@keyframes animate-preloader {94  0% {95    transform: rotate(0deg);96  }97 98  100% {99    transform: rotate(360deg);100  }101}102 103/*--------------------------------------------------------------104# Disable aos animation delay on mobile devices105--------------------------------------------------------------*/106@media screen and (max-width: 768px) {107  [data-aos-delay] {108    transition-delay: 0 !important;109  }110}111 112/*--------------------------------------------------------------113# Header114--------------------------------------------------------------*/115#header {116  transition: all 0.5s;117  z-index: 997;118  padding: 15px 0;119  background: rgba(0, 0, 0, 0.8);120}121 122#header.header-scrolled,123#header.header-inner-pages {124  background: rgba(0, 0, 0, 0.8);125}126 127#header .logo {128  font-size: 32px;129  margin: 0;130  padding: 0;131  line-height: 1;132  font-weight: 700;133  letter-spacing: 2px;134  text-transform: uppercase;135}136 137#header .logo a {138  color: #fff;139}140 141#header .logo a span {142  color: #ffc451;143}144 145#header .logo img {146  max-height: 40px;147}148 149/*--------------------------------------------------------------150# Navigation Menu151--------------------------------------------------------------*/152/**153* Desktop Navigation 154*/155.navbar {156  padding: 0;157  color: #fff;158}159 160.navbar ul {161  margin: 0;162  padding: 0;163  display: flex;164  list-style: none;165  align-items: center;166}167 168.navbar li {169  position: relative;170}171 172.navbar a,173.navbar a:focus {174  display: flex;175  align-items: center;176  justify-content: space-between;177  padding: 10px 0 10px 30px;178  font-size: 15px;179  font-weight: 600;180  color: #fff;181  white-space: nowrap;182  transition: 0.3s;183}184 185.navbar a i,186.navbar a:focus i {187  font-size: 12px;188  line-height: 0;189  margin-left: 5px;190}191 192.navbar a:hover,193.navbar .active,194.navbar .active:focus,195.navbar li:hover>a {196  color: #0cc0df;197}198 199.navbar .dropdown ul {200  display: block;201  position: absolute;202  left: 14px;203  top: calc(100% + 30px);204  margin: 0;205  padding: 10px 0;206  z-index: 99;207  opacity: 0;208  visibility: hidden;209  background: #fff;210  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);211  transition: 0.3s;212}213 214.navbar .dropdown ul li {215  min-width: 200px;216}217 218.navbar .dropdown ul a {219  padding: 10px 20px;220  font-size: 14px;221  text-transform: none;222  color: #151515;223  font-weight: 400;224}225 226.navbar .dropdown ul a i {227  font-size: 12px;228}229 230.navbar .dropdown ul a:hover,231.navbar .dropdown ul .active:hover,232.navbar .dropdown ul li:hover>a {233  background-color: #ffc451;234}235 236.navbar .dropdown:hover>ul {237  opacity: 1;238  top: 100%;239  visibility: visible;240}241 242.navbar .dropdown .dropdown ul {243  top: 0;244  left: calc(100% - 30px);245  visibility: hidden;246}247 248.navbar .dropdown .dropdown:hover>ul {249  opacity: 1;250  top: 0;251  left: 100%;252  visibility: visible;253}254 255@media (max-width: 1366px) {256  .navbar .dropdown .dropdown ul {257    left: -90%;258  }259 260  .navbar .dropdown .dropdown:hover>ul {261    left: -100%;262  }263}264 265/**266* Mobile Navigation 267*/268.mobile-nav-toggle {269  color: #fff;270  font-size: 28px;271  cursor: pointer;272  display: none;273  line-height: 0;274  transition: 0.5s;275}276 277@media (max-width: 991px) {278  .mobile-nav-toggle {279    display: block;280  }281 282  .navbar ul {283    display: none;284  }285}286 287.navbar-mobile {288  position: fixed;289  overflow: hidden;290  top: 0;291  right: 0;292  left: 0;293  bottom: 0;294  background: rgba(0, 0, 0, 0.9);295  transition: 0.3s;296  z-index: 999;297}298 299.navbar-mobile .mobile-nav-toggle {300  position: absolute;301  top: 15px;302  right: 15px;303}304 305.navbar-mobile ul {306  display: block;307  position: absolute;308  top: 55px;309  right: 15px;310  bottom: 15px;311  left: 15px;312  padding: 10px 0;313  background-color: #fff;314  overflow-y: auto;315  transition: 0.3s;316}317 318.navbar-mobile a,319.navbar-mobile a:focus {320  padding: 10px 20px;321  font-size: 15px;322  color: #151515;323}324 325.navbar-mobile a:hover,326.navbar-mobile .active,327.navbar-mobile li:hover>a {328  color: #151515;329  background-color: #0cc0df;330}331 332.navbar-mobile .getstarted,333.navbar-mobile .getstarted:focus {334  margin: 15px;335}336 337.navbar-mobile .dropdown ul {338  position: static;339  display: none;340  margin: 10px 20px;341  padding: 10px 0;342  z-index: 99;343  opacity: 1;344  visibility: visible;345  background: #fff;346  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);347}348 349.navbar-mobile .dropdown ul li {350  min-width: 200px;351}352 353.navbar-mobile .dropdown ul a {354  padding: 10px 20px;355  color: #151515;356}357 358.navbar-mobile .dropdown ul a i {359  font-size: 12px;360}361 362.navbar-mobile .dropdown ul a:hover,363.navbar-mobile .dropdown ul .active:hover,364.navbar-mobile .dropdown ul li:hover>a {365  background-color: #ffc451;366}367 368.navbar-mobile .dropdown>.dropdown-active {369  display: block;370}371 372/*--------------------------------------------------------------373# Hero Section374--------------------------------------------------------------*/375#hero {376  width: 100%;377  min-height: 100vh;378  background: url("../img/Designer\ \(2\).png") top center;379  background-size: cover;380  position: relative;381}382 383#hero:before {384  content: "";385  background: rgba(0, 0, 0, 0.6);386  position: absolute;387  bottom: 0;388  top: 0;389  left: 0;390  right: 0;391}392 393#hero .container {394  position: relative;395  padding-top: 74px;396  text-align: center;397}398 399#hero h1 {400  margin: 0;401  font-size: 56px;402  font-weight: 700;403  line-height: 64px;404  color: #fff;405  font-family: "Poppins", sans-serif;406}407 408#hero h1 span {409  color: #ffc451;410}411 412#hero h2 {413  color: rgba(255, 255, 255, 0.9);414  margin: 10px 0 0 0;415  font-size: 24px;416}417 418#hero .icon-box {419  padding: 30px 20px;420  transition: ease-in-out 0.3s;421  border: 1px solid rgba(255, 255, 255, 0.3);422  height: 100%;423  text-align: center;424}425 426#hero .icon-box i {427  font-size: 32px;428  line-height: 1;429  color: #edba17;430}431 432#hero .icon-box h3 {433  font-weight: 700;434  margin: 10px 0 0 0;435  padding: 0;436  line-height: 1;437  font-size: 20px;438  line-height: 26px;439}440 441#hero .icon-box h3 a {442  color: #fff;443  transition: ease-in-out 0.3s;444}445 446#hero .icon-box h3 a:hover {447  color: #0cc0df;448}449/* Box Outline */450#hero .icon-box:hover {451  border-color: #0cc0df;452}453 454@media (min-width: 1024px) {455  #hero {456    background-attachment: fixed;457  }458}459 460@media (max-width: 768px) {461  #hero h1 {462    font-size: 28px;463    line-height: 36px;464  }465 466  #hero h2 {467    font-size: 20px;468    line-height: 24px;469  }470}471 472/*--------------------------------------------------------------473# Hero Section 1474--------------------------------------------------------------*/475 476#hero1 {477  width: 100%;478  min-height: 100vh;479  background: url("../img/Designer\ \(3\).png") top center;480  background-size: cover;481  position: relative;482}483 484#hero1:before {485  content: "";486  background: rgba(0, 0, 0, 0.6);487  position: absolute;488  bottom: 0;489  top: 0;490  left: 0;491  right: 0;492}493 494#hero1 .container {495  position: relative;496  padding-top: 74px;497  text-align: center;498}499 500#hero1 h1 {501  margin: 0;502  font-size: 56px;503  font-weight: 700;504  line-height: 64px;505  color: #fff;506  font-family: "Poppins", sans-serif;507}508 509#hero1 h1 span {510  color: #ffc451;511}512 513#hero1 h2 {514  color: rgba(255, 255, 255, 0.9);515  margin: 10px 0 0 0;516  font-size: 24px;517}518 519#hero1 .icon-box {520  padding: 30px 20px;521  transition: ease-in-out 0.3s;522  border: 1px solid rgba(255, 255, 255, 0.3);523  height: 100%;524  text-align: center;525}526 527#hero1 .icon-box i {528  font-size: 32px;529  line-height: 1;530  color: #edba17;531}532 533#hero1 .icon-box h3 {534  font-weight: 700;535  margin: 10px 0 0 0;536  padding: 0;537  line-height: 1;538  font-size: 20px;539  line-height: 26px;540}541 542#hero1 .icon-box h3 a {543  color: #fff;544  transition: ease-in-out 0.3s;545}546 547#hero1 .icon-box h3 a:hover {548  color: #0cc0df;549}550/* Box Outline */551#hero1 .icon-box:hover {552  border-color: #0cc0df;553}554 555@media (min-width: 1024px) {556  #hero1 {557    background-attachment: fixed;558  }559}560 561@media (max-width: 768px) {562  #hero1 h1 {563    font-size: 28px;564    line-height: 36px;565  }566 567  #hero1 h2 {568    font-size: 20px;569    line-height: 24px;570  }571}572 573 574/*--------------------------------------------------------------575# Hero Section 2576--------------------------------------------------------------*/577 578#hero2 {579  width: 100%;580  min-height: 100vh;581  background: url("../img/Brahmi-book.jpg") top center;582  background-size: cover;583  position: relative;584}585 586#hero2:before {587  content: "";588  background: rgba(0, 0, 0, 0.6);589  position: absolute;590  bottom: 0;591  top: 0;592  left: 0;593  right: 0;594}595 596#hero2 .container {597  position: relative;598  padding-top: 74px;599  text-align: center;600}601 602#hero2 h1 {603  margin: 0;604  font-size: 56px;605  font-weight: 700;606  line-height: 64px;607  color: #fff;608  font-family: "Poppins", sans-serif;609}610 611#hero2 h1 span {612  color: #ffc451;613}614 615#hero2 h2 {616  color: rgba(255, 255, 255, 0.9);617  margin: 10px 0 0 0;618  font-size: 24px;619}620 621#hero2 .icon-box {622  padding: 30px 20px;623  transition: ease-in-out 0.3s;624  border: 1px solid rgba(255, 255, 255, 0.3);625  height: 100%;626  text-align: center;627}628 629#hero2 .icon-box i {630  font-size: 32px;631  line-height: 1;632  color: #edba17;633}634 635#hero2 .icon-box h3 {636  font-weight: 700;637  margin: 10px 0 0 0;638  padding: 0;639  line-height: 1;640  font-size: 20px;641  line-height: 26px;642}643 644#hero2 .icon-box h3 a {645  color: #fff;646  transition: ease-in-out 0.3s;647}648 649#hero2 .icon-box h3 a:hover {650  color: #0cc0df;651}652/* Box Outline */653#hero2 .icon-box:hover {654  border-color: #0cc0df;655}656 657@media (min-width: 1024px) {658  #hero2 {659    background-attachment: fixed;660  }661}662 663@media (max-width: 768px) {664  #hero2 h1 {665    font-size: 28px;666    line-height: 36px;667  }668 669  #hero2 h2 {670    font-size: 20px;671    line-height: 24px;672  }673}674 675 676/*--------------------------------------------------------------677# Sections General678--------------------------------------------------------------*/679 680 681 682 683section {684  padding: 60px 0;685  overflow: hidden;686}687 688.section-title {689  padding-bottom: 40px;690}691 692.section-title h2 {693  font-size: 14px;694  font-weight: 500;695  padding: 0;696  line-height: 1px;697  margin: 0 0 5px 0;698  letter-spacing: 2px;699  text-transform: uppercase;700  color: #aaaaaa;701  font-family: "Poppins", sans-serif;702}703 704.section-title h2::after {705  content: "";706  width: 120px;707  height: 1px;708  display: inline-block;709  background: #ffde9e;710  margin: 4px 10px;711}712 713.section-title p {714  margin: 0;715  margin: 0;716  font-size: 36px;717  font-weight: 700;718  text-transform: uppercase;719  font-family: "Poppins", sans-serif;720  color: #151515;721}722 723/*--------------------------------------------------------------724# About725--------------------------------------------------------------*/726.about .content h3 {727  font-weight: 700;728  font-size: 28px;729  font-family: "Poppins", sans-serif;730}731 732.about .content ul {733  list-style: none;734  padding: 0;735}736 737.about .content ul li {738  padding: 0 0 8px 26px;739  position: relative;740}741 742.about .content ul i {743  position: absolute;744  font-size: 20px;745  left: 0;746  top: -3px;747  color: #ffc451;748}749 750.about .content p:last-child {751  margin-bottom: 0;752}753 754 755/*--------------------------------------------------------------756# Features757--------------------------------------------------------------*/758.features {759  padding-top: 20px;760}761 762.features .icon-box {763  padding-left: 15px;764}765 766.features .icon-box h4 {767  font-size: 20px;768  font-weight: 700;769  margin: 5px 0 10px 60px;770}771 772.features .icon-box i {773  font-size: 48px;774  float: left;775  color: #ffc451;776}777 778.features .icon-box p {779  font-size: 15px;780  color: #848484;781  margin-left: 60px;782}783 784.features .image {785  background-position: center center;786  background-repeat: no-repeat;787  background-size: cover;788  min-height: 400px;789}790 791 792/*--------------------------------------------------------------793# Team794--------------------------------------------------------------*/795.team {796  background: #fff;797  padding: 60px 0;798}799 800.team .member {801  margin-bottom: 20px;802  overflow: hidden;803  border-radius: 5px;804  background: #fff;805  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);806}807 808.team .member .member-img {809  position: relative;810  overflow: hidden;811}812 813.team .member .social {814  position: absolute;815  left: 0;816  bottom: 30px;817  right: 0;818  opacity: 0;819  transition: ease-in-out 0.3s;820  text-align: center;821}822 823.team .member .social a {824  transition: color 0.3s;825  color: #151515;826  margin: 0 3px;827  border-radius: 4px;828  width: 36px;829  height: 36px;830  background: rgba(255, 255, 255, 0.8);831  transition: ease-in-out 0.3s;832  color: #484848;833  display: inline-flex;834  justify-content: center;835  align-items: center;836}837 838.team .member .social a:hover {839  color: #151515;840  background: #ffc451;841}842 843.team .member .social i {844  font-size: 18px;845  line-height: 0;846}847 848.team .member .member-info {849  padding: 25px 15px;850}851 852.team .member .member-info h4 {853  font-weight: 700;854  margin-bottom: 5px;855  font-size: 18px;856  color: #151515;857}858 859.team .member .member-info span {860  display: block;861  font-size: 13px;862  font-weight: 400;863  color: #aaaaaa;864}865 866.team .member .member-info p {867  font-style: italic;868  font-size: 14px;869  line-height: 26px;870  color: #777777;871}872 873.team .member:hover .social {874  opacity: 1;875  bottom: 15px;876}877 878/*--------------------------------------------------------------879# Learn880--------------------------------------------------------------*/881 882@font-face {883  font-family: 'Noto Sans Brahmi';884  src: url(../fonts/NotoSansBrahmi-Regular.otf) format('opentype');885}886@font-face {887  font-family: 'Noto Sans Grantha';888  src: url(../fonts/NotoSansGrantha-Regular.otf) format('opentype');889}890@font-face {891  font-family: 'Noto Sans Sharada';892  src: url(../fonts/NotoSansSharada-Regular.otf) format('opentype');893}894@font-face {895  font-family: 'Noto Sans Siddham';896  src: url(../fonts/NotoSansSiddham-Regular.otf) format('opentype');897}898@font-face {899  font-family:Noto Sans Tirhuta;900  src: url(../fonts/NotoSansTirhuta-Regular.otf) format('opentype');901}902@font-face {903  font-family:Mithilakshar;904  src: url(../fonts/MithilaUni.ttf) format('truetype');905}906.brahmi{907  font-family: 'Noto Sans Brahmi';908}909.grantha{910  font-family: 'Noto Sans Grantha';911}912.devanagari{913  font-family: 'Noto Sans';914}915.sharada {916  font-family: 'Noto Sans Sharada';917}918.siddham {919  font-family: 'Noto Sans Siddham';920}921.tirhuta {922  font-family: 'Mithilakshar';923  font-size: 1.1em;924}925.btn-lipi{--bs-btn-color:#000;926  --bs-btn-bg:#9fe2ee;927  --bs-btn-border-color:#9fe2ee;928  --bs-btn-hover-color:#000;929  --bs-btn-hover-bg:#0cc0df ;930  --bs-btn-hover-border-color:#ffc720;931  --bs-btn-focus-shadow-rgb:217,164,6;932  --bs-btn-active-color:#000;933  --bs-btn-active-bg:#ffcd39;934  --bs-btn-active-border-color:#ffc720;935  --bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);936  --bs-btn-disabled-color:#000;937  --bs-btn-disabled-bg:#9fe2ee;938  --bs-btn-disabled-border-color:#0cc0df}939 940 941/*--------------------------------------------------------------942# Learn2943--------------------------------------------------------------*/944 945.brahmi{946  padding-top:0.2em;947  line-height:19px;948}949 950.separator{951  line-height:10px;952}953.letter{954 padding: 0 0;955 text-align:center;956 background: #ffffff;957 border-radius: 2px;958 display: inline-block;959 margin: 0.5rem 0;960 position: relative;961 height: 90px;962 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);963 width: 90px;964}965.letter-lg{966 width: 130px;967 height: 100px;968}969.letter-xs{970 width: 80px;971 height: 75px;972}973.letter div{974-webkit-user-select: none; /* Safari 3.1+ */975-moz-user-select: none; /* Firefox 2+ */976-ms-user-select: none; /* IE 10+ */977user-select: none; /* Standard syntax */978 979}980.listWord{981 margin-top:0.1em;982 margin-left:0;983 padding-left:0.5em;984 padding-right:0.5em;985 min-width: 84px;986 padding-bottom:10px;987}988.listWord-lg{989 min-width: 124px;990 padding-bottom:20px;991}992.listWord-xs{993 min-width: 75px;994 min-height: 70px;995 padding-top:22px;996}997 998/*--------------------------------------------------------------999# Footer1000--------------------------------------------------------------*/1001#footer {1002  background: black;1003  padding: 0 0 30px 0;1004  color: #fff;1005  font-size: 14px;1006}1007 1008#footer .footer-top {1009  background: #151515;1010  border-bottom: 1px solid #222222;1011  padding: 60px 0 30px 0;1012}1013 1014#footer .footer-top .footer-info {1015  margin-bottom: 30px;1016}1017 1018#footer .footer-top .footer-info h3 {1019  font-size: 28px;1020  margin: 0 0 20px 0;1021  padding: 2px 0 2px 0;1022  line-height: 1;1023  font-weight: 700;1024  text-transform: uppercase;1025}1026 1027#footer .footer-top .footer-info h3 span {1028  color: #ffc451;1029}1030 1031#footer .footer-top .footer-info p {1032  font-size: 14px;1033  line-height: 24px;1034  margin-bottom: 0;1035  font-family: "Raleway", sans-serif;1036  color: #fff;1037}1038 1039#footer .footer-top .social-links a {1040  font-size: 18px;1041  display: inline-block;1042  background: #292929;1043  color: #fff;1044  line-height: 1;1045  padding: 8px 0;1046  margin-right: 4px;1047  border-radius: 4px;1048  text-align: center;1049  width: 36px;1050  height: 36px;1051  transition: 0.3s;1052}1053 1054#footer .footer-top .social-links a:hover {1055  background: #ffc451;1056  color: #151515;1057  text-decoration: none;1058}1059 1060#footer .footer-top h4 {1061  font-size: 16px;1062  font-weight: 600;1063  color: #fff;1064  position: relative;1065  padding-bottom: 12px;1066}1067 1068#footer .footer-top .footer-links {1069  margin-bottom: 30px;1070}1071 1072#footer .footer-top .footer-links ul {1073  list-style: none;1074  padding: 0;1075  margin: 0;1076}1077 1078#footer .footer-top .footer-links ul i {1079  padding-right: 2px;1080  color: #ffc451;1081  font-size: 18px;1082  line-height: 1;1083}1084 1085#footer .footer-top .footer-links ul li {1086  padding: 10px 0;1087  display: flex;1088  align-items: center;1089}1090 1091#footer .footer-top .footer-links ul li:first-child {1092  padding-top: 0;1093}1094 1095#footer .footer-top .footer-links ul a {1096  color: #fff;1097  transition: 0.3s;1098  display: inline-block;1099  line-height: 1;1100}1101 1102#footer .footer-top .footer-links ul a:hover {1103  color: #ffc451;1104}1105 1106#footer .footer-top .footer-newsletter form {1107  margin-top: 30px;1108  background: #fff;1109  padding: 6px 10px;1110  position: relative;1111  border-radius: 4px;1112}1113 1114#footer .footer-top .footer-newsletter form input[type=email] {1115  border: 0;1116  padding: 4px;1117  width: calc(100% - 110px);1118}1119 1120#footer .footer-top .footer-newsletter form input[type=submit] {1121  position: absolute;1122  top: 0;1123  right: -2px;1124  bottom: 0;1125  border: 0;1126  background: none;1127  font-size: 16px;1128  padding: 0 20px;1129  background: #ffc451;1130  color: #151515;1131  transition: 0.3s;1132  border-radius: 0 4px 4px 0;1133}1134 1135#footer .footer-top .footer-newsletter form input[type=submit]:hover {1136  background: #ffcd6b;1137}1138 1139#footer .copyright {1140  text-align: center;1141  padding-top: 30px;1142}1143 1144#footer .credits {1145  padding-top: 10px;1146  text-align: center;1147  font-size: 13px;1148  color: #fff;1149}1150 1151 1152 1153.clickable-box {1154  1155  display: inline-block; /* Allow multiple boxes on a line */1156  width: 400px; /* Adjust as needed */1157  height: 400px; /* Adjust as needed */1158  margin: 10px; /* Add spacing between boxes */1159  border: 2px solid #ccc; /* Set border style and color */1160  border-radius: 5px; /* Add rounded corners to the box */1161  text-align: center; /* Center the image horizontally */1162}1163 1164.clickable-box:hover {1165  border-color: #007bff; /* Change border color on hover */1166}1167 1168.clickable-box img {1169  max-width: 100%; /* Scale image to fit within box */1170  max-height: 100%; /* Scale image to fit within box */1171}