@font-face {
   font-family: 'NewYork';
   src: url('/assets/fonts/NewYork.woff') format('woff2');
   font-weight: 400;
   /* 400 is the same as 'normal' */
   font-style: normal;
 }

 @font-face {
   font-family: 'Amandine';
   src: url('/assets/fonts/fonnts.com-Amandine_Regular.woff') format('woff2');
   font-weight: 400;
   /* 400 is the same as 'normal' */
   font-style: normal;
 }

 @font-face {
   font-family: 'BAHNSCHRIFT';
   src: url('/assets/fonts/BAHNSCHRIFT1.woff2') format('woff2');
   font-weight: 400;
   /* 400 is the same as 'normal' */
   font-style: normal;
 }

 body,
 html {
   background: #f6ef81;
   margin: 0;
   padding: 0;
   /* overflow-x: hidden; */
   font-family: "Urbanist", sans-serif;
 }

 main {
   max-width: 1200px;
   background-color: #ffffff;
   margin: 0 auto;
 }

 h3 {
   font-family: 'Amandine', serif;
   font-size: clamp(2rem, 6vw, 4rem);
   line-height: 1.2;
   letter-spacing: 1px;
 }

 p {
   font-size: 18px;
 }

 .brand-color {
   color: #f6ef81;
 }

 .brand-dark {
   color: #FFE433;
 }

 /* highlight text */
 .highlighted-text {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIgogICAgICAgICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICB3aWR0aD0iMWluIiBoZWlnaHQ9IjAuNWluIgogICAgIHZpZXdCb3g9IjAgMCAzMDAgMTUwIj4KICA8cGF0aAogICAgICAgIGZpbGw9IiNmZmUwMDAiIHN0cm9rZT0ibm9uZSIKICAgICAgICBkPSJNIDEyLjAwLDQ4LjAwCiAgICAgICAgICAgQyAxMi4wMCw1MC4wOSAxMS43OSw1NC45OSAxMi42MCw1Ni43MgogICAgICAgICAgICAgMTUuNTksNjMuMTggMjYuMDksNTYuNjQgMzMuMDAsNjMuMDAKICAgICAgICAgICAgIDMwLjg0LDYzLjE4IDIzLjA1LDYzLjg3IDIxLjgwLDY1LjAyCiAgICAgICAgICAgICAxOC4wMiw2Ny44OCAyMS4yOSw3Ni4zNSAyMS44MCw4MC4wMAogICAgICAgICAgICAgMjEuODAsODAuMDAgMjEuODAsODYuMDAgMjEuODAsODYuMDAKICAgICAgICAgICAgIDIxLjgwLDg2LjAwIDQwLjAwLDg3LjAwIDQwLjAwLDg3LjAwCiAgICAgICAgICAgICAzOS45Myw4OC44OCA0MC4wNiw5MS4wNCAzOC45OCw5Mi42OQogICAgICAgICAgICAgMzcuNTEsOTQuOTMgMzUuMTUsOTQuNzUgMzIuNTksOTYuMjAKICAgICAgICAgICAgIDI4LjMzLDk4LjYxIDI2Ljg3LDEwMi4yMiAyNy4zNCwxMDcuMDAKICAgICAgICAgICAgIDI3LjM0LDEwNy4wMCAzMC4wMiwxMjMuNDEgMzAuMDIsMTIzLjQxCiAgICAgICAgICAgICAzMS44MiwxMjUuNzUgNDAuMDEsMTI3Ljk1IDQzLjAwLDEyOC4wMAogICAgICAgICAgICAgNDMuMDAsMTI4LjAwIDg3LjAwLDEyOC4wMCA4Ny4wMCwxMjguMDAKICAgICAgICAgICAgIDg4LjA4LDEyMS41NiA5MS4xNiwxMjEuODAgOTcuMDAsMTIyLjA0CiAgICAgICAgICAgICA5Ny4wMCwxMjIuMDQgMTA5LjAwLDEyMy4wMCAxMDkuMDAsMTIzLjAwCiAgICAgICAgICAgICAxMDkuMDAsMTIzLjAwIDEyOC4wMCwxMjMuMDAgMTI4LjAwLDEyMy4wMAogICAgICAgICAgICAgMTI4LjAwLDEyMy4wMCAxODIuMDAsMTIyLjAwIDE4Mi4wMCwxMjIuMDAKICAgICAgICAgICAgIDE5NC41OCwxMjEuOTcgMTg4LjQyLDExOS4wMyAyMDEuMDAsMTE5LjAwCiAgICAgICAgICAgICAyMDEuMDAsMTE5LjAwIDI0My4wMCwxMTkuMDAgMjQzLjAwLDExOS4wMAogICAgICAgICAgICAgMjQzLjAwLDExOS4wMCAyNTguMDAsMTE4LjAwIDI1OC4wMCwxMTguMDAKICAgICAgICAgICAgIDI1OS41MywxMDkuMTAgMjY2LjAxLDExMy4zNyAyNzAuNDAsMTA5LjE1CiAgICAgICAgICAgICAyNzIuNjEsMTA3LjAzIDI3Mi4zMCwxMDAuODUgMjcyLjAwLDk4LjAwCiAgICAgICAgICAgICAyNzIuMDAsOTguMDAgMjgwLjAwLDk3LjAwIDI4MC4wMCw5Ny4wMAogICAgICAgICAgICAgMjgwLjAwLDk0LjEwIDI4MC4yNiw4OC41NSAyNzkuMjYsODYuMDIKICAgICAgICAgICAgIDI3Ni40OSw3OC45OCAyNjQuNjMsNzYuODggMjU4LjAwLDc2LjAwCiAgICAgICAgICAgICAyNjUuMTUsNjkuMTkgMjc2LjQwLDczLjAzIDI3NC44NSw2Mi4wNAogICAgICAgICAgICAgMjc0LjQ3LDU5LjM1IDI3My43Myw1OC44NSAyNzIuMDAsNTcuMDAKICAgICAgICAgICAgIDI4MS42OCw1My43NyAyODEuMDAsNTQuMjggMjgxLjAwLDQ0LjAwCiAgICAgICAgICAgICAyODEuMDAsNDQuMDAgMjU4LjAwLDQyLjM4IDI1OC4wMCw0Mi4zOAogICAgICAgICAgICAgMjUwLjAwLDQwLjg0IDI1MS40OCwzOC4wMyAyMzUuMDAsMzguMDAKICAgICAgICAgICAgIDIzNS4wMCwzOC4wMCAxODkuMDAsMzkuMDAgMTg5LjAwLDM5LjAwCiAgICAgICAgICAgICAxODkuMDAsMzkuMDAgMTc3LjAwLDM5LjgyIDE3Ny4wMCwzOS44MgogICAgICAgICAgICAgMTc3LjAwLDM5LjgyIDE1OS4wMCwzOC4wMCAxNTkuMDAsMzguMDAKICAgICAgICAgICAgIDE1OS4wMCwzOC4wMCAxMjguMDAsMzguMDAgMTI4LjAwLDM4LjAwCiAgICAgICAgICAgICAxMTYuOTAsMzguMDIgMTIwLjE2LDM5LjQwIDExMy4wMCw0MC42NwogICAgICAgICAgICAgMTEzLjAwLDQwLjY3IDk3LjAwLDQyLjE3IDk3LjAwLDQyLjE3CiAgICAgICAgICAgICA5Ny4wMCw0Mi4xNyA4Ny4wMCw0My44MyA4Ny4wMCw0My44MwogICAgICAgICAgICAgODcuMDAsNDMuODMgNTcuMDAsNDUuMDAgNTcuMDAsNDUuMDAKICAgICAgICAgICAgIDU3LjAwLDQ1LjAwIDMyLjAwLDQ4LjAwIDMyLjAwLDQ4LjAwCiAgICAgICAgICAgICAzMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCBaIiAvPgo8L3N2Zz4K');
   background-position: 50% 13%;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 5px;
   background-repeat: no-repeat;
   background-size: cover;
 }

 .lined-heading {
   position: relative;
   display: inline-block;
   /* shrink-wrap around text */
   font-size: 3rem;
   font-weight: 100;
   margin: 2rem auto;
   text-align: center;
 }

 .lined-heading::before,
 .lined-heading::after {
   content: "";
   position: absolute;
   left: 50%;
   width: 130%;
   /* slightly larger than text width */
   height: 1px;
   background: #000;
   transform: translateX(-50%);
 }

 .lined-heading::before {
   top: -1rem;
 }

 .lined-heading::after {
   bottom: -1rem;
 }

 /* Button */
 .btn-primary {
   background: #f6ef81;
   /* electric blue accent */
   color: #000;
   font-size: 0.95rem;
   font-weight: 500;
   letter-spacing: -0.5px;
   padding: 0.9rem 1.8rem;
   border: none;
   border-radius: 0.5rem;
   /* box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); */
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
 }

 .btn-primary:active {
   transform: translateY(0);
   box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
 }

 /* Ripple effect */
 .btn-primary::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 0;
   height: 0;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: width 0.4s ease, height 0.4s ease, opacity 0.8s ease;
 }

 .btn-primary:active::after {
   width: 220%;
   height: 220%;
   opacity: 0;
 }

 .mt-9 {
   margin-top: 4rem;
 }

 /* Curtain section */
 .curtain {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: #f6ef81;
   /* solid color */
   display: flex;
   justify-content: center;
   align-items: center;
   color: #ffffff;
   font-size: 10rem;
   line-height: 1;
   /* font-family: "Playfair", serif; */
   font-family: "Roboto", sans-serif;
   z-index: 10;
   font-style: italic;
 }

 /* Tablet */
 @media (max-width: 1024px) {
   .curtain {
     font-size: 6rem;
   }
 }

 /* Mobile */
 @media (max-width: 768px) {
   .curtain {
     font-size: 6rem;
   }
 }

 /* Small mobile */
 @media (max-width: 480px) {
   .curtain {
     font-size: 6rem;
   }
 }

 /*moadboard container*/
 .responsive-tabs {
   width: 900px;
   max-width: 90%;
   /* prevents overflow on smaller screens */
   margin: 0 auto;
 }

 /* 📱 For tablets and mobile */
 @media (max-width: 992px) {
   .responsive-tabs {
     width: 100%;
     max-width: 95%;
   }
 }

 /* Content section */
 .content {
   min-height: 100vh;
   padding: 80px 80px;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
 }

 .intro {
   font-size: clamp(1rem, 3vw, 1.5rem);
   font-weight: 400;
   margin-bottom: 10px;
   display: block;
   letter-spacing: 1px;
 }

 .content h1 {
   /* font-family: "NewYork", serif; */
   font-family: 'Amandine', serif;
   font-size: 3rem;
   line-height: 1.2;
   letter-spacing: 1px;
   margin-bottom: 6rem;
 }

 .content h2 {
   font-size: 1.2rem;
   font-weight: 700;
   line-height: 1.5;
   margin-bottom: 6rem;

 }

 /* .content p {
   font-size: 1rem;
   color: #4a5565;
   margin-top: 12px;

 } */

 /* meta wrapper */
 /* .meta {
   display: flex;
   flex-direction: column;

   gap: 10px;
   margin-top: 20px;
 }*/

 .meta {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 40px;
   margin-top: 20px;
 }

 .meta p {
   padding: 0 40px;
   flex-shrink: 0;
   white-space: nowrap;
   font-size: 1.5rem;
   margin-top: 12px;
 }

 @media (max-width: 768px) {
   .content {
     padding: 10px;
   }

   /* .content p {
     max-width: 700px;
   } */
   .content h1 {
     font-size: 2rem;
   }

   .content h2 {
     font-size: 14px;
     font-weight: 700;
     line-height: 1.5;
   }

   .meta {
     display: flex;
     flex-direction: row;
     gap: 10px;
     margin-top: 20px;
   }

   .meta p {
     margin-top: 0;
     font-size: 1rem;
     margin-top: 12px;
   }
 }

 /* Roller wrapper */
 .roller,
 .roller2 {
   position: relative;
   display: inline-block;
   /* size by content width */
   height: 3rem;
   /* one line height */
   line-height: 3rem;
   overflow: hidden;
   /* hides only outside lines, not inside words */
   font-size: 1.5rem;
   white-space: nowrap;
   /* prevent breaking words */
 }

 /* Inner rolling text */
 .roller span {
   display: block;
   position: relative;
   font-weight: 600;
   animation: roll8 18s infinite;
 }

 .roller2 span {
   display: block;
   position: relative;
   font-weight: 600;
   animation: roll6 16s infinite;
 }

 /* Keyframes for vertical scrolling */
 @keyframes roll8 {
   0% {
     transform: translateY(0);
   }

   12.5% {
     transform: translateY(-100%);
   }

   25% {
     transform: translateY(-200%);
   }

   37.5% {
     transform: translateY(-300%);
   }

   50% {
     transform: translateY(-400%);
   }

   62.5% {
     transform: translateY(-500%);
   }

   75% {
     transform: translateY(-600%);
   }

   87.5% {
     transform: translateY(-700%);
   }

   100% {
     transform: translateY(0);
   }
 }

 @keyframes roll6 {
   0% {
     transform: translateY(0);
   }

   16.66% {
     transform: translateY(-100%);
   }

   33.33% {
     transform: translateY(-200%);
   }

   50% {
     transform: translateY(-300%);
   }

   66.66% {
     transform: translateY(-400%);
   }

   83.33% {
     transform: translateY(-500%);
   }

   100% {
     transform: translateY(0);
   }
 }

 /* Mobile adjustments */
 /* Mobile adjustments */
 @media (max-width: 600px) {

   .roller,
   .roller2 {
     height: 2rem;
     line-height: 2rem;
     font-size: 1rem;
   }
 }


 /*work experice */

 /* Container */
 .tabs {
   /* max-width: 900px; */
   margin: 0 auto;
   padding: 40px 20px;
   text-align: center;
 }

 /* Tab buttons */
 .tab-buttons {
   display: flex;
   flex-wrap: wrap;
   /* mobile stack */
   gap: 15px;
   justify-content: center;

 }

 .tab-btn {
   font-family: 'BAHNSCHRIFT', sans-serif;
   flex: 0 0 auto;
   /* padding: 12px 16px; */
   font-size: 10px;
   font-weight: 600;
   border: none;
   background: transparent;
   color: #000;
   cursor: pointer;
   transition: all 0.3s ease;
   text-transform: uppercase;
 }

 .tab-btn.active {
   background: linear-gradient(90deg, #f6ef81, #f6ef81);
   color: #000;
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
 }

 /* Panels */
 .tab-content {
   position: relative;
 }

 .tab-panel {
   display: none;
   /* background: #fafafa; */
   /* padding: 20px; */
   /* border-radius: 16px; */
   /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); */
   text-align: left;
   animation: fadeIn 0.5s ease forwards;
 }

 .tab-panel.active {
   display: block;
 }

 /* Animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(15px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .carousel-item img {
   height: 150px;
   object-fit: cover;
   display: block;
 }

 /* Responsive tweaks */
 @media (min-width: 768px) {
   .tab-btn {
     flex: 0 0 auto;
     /* prevent stretching */
     padding: 5px 8px;
     font-size: 1.2rem;
   }

   .tab-panel {
     padding: 40px;
   }

   .carousel-item img {
     height: 450px;
     object-fit: cover;
     display: block;
   }
 }



 .carousel-col {
   flex: 0 0 31%;
   /* default: 3 per slide (mobile) */
   overflow: hidden;
   /* Prevent overlay leak */
 }

 @media (min-width: 992px) {
   .carousel-col {
     flex: 0 0 31%;
     /* 3 items on desktop */
   }
 }

 .gradient-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 20%;
   background: rgba(246, 239, 129, 0.7);
   color: #fff;
   display: flex;
   align-items: flex-end;
   padding: 10px 15px;
   opacity: 0;
 }

 .gradient-overlay p {
   font-family: 'BAHNSCHRIFT', sans-serif;
   margin-bottom: 20px;
   font-size: 1.2rem;
   font-weight: 600;
   color: #000;
   letter-spacing: 1px;
   bottom: 61px;
   text-transform: uppercase;
 }

 @media (max-width: 768px) {

   .tab-buttons {
     margin-bottom: 2rem;
     gap: 1px;
   }

   .carousel-col {
     flex: 0 0 31%;
   }

   .gradient-overlay{
    height: 24%;
   }
   .gradient-overlay p {
     font-size: 6px;
     margin-bottom: 2px;
     font-weight: 500;
   }

   .tab-btn {
     font-size: 6px;
     font-weight: 400;
   }
 }

 /* Custom carousel control buttons */
 .custom-control {

   width: 65px;
   height: 65px;
   border-radius: 50%;
   /* background: white; */
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .custom-control i {
   font-size: 50px;
   color: #000;
   line-height: 1;
 }


 /* .carousel-control-prev-icon,
 .carousel-control-next-icon {
   filter: invert(1) brightness(0);
   ;
 } */

 .outside-control {
   top: 50%;
   transform: translateY(-50%);
 }

 .carousel-control-prev.outside-control {
   left: -80px;
   /* move outside left */
 }

 .carousel-control-next.outside-control {
   right: -80px;
   /* move outside right */
 }

 /* Mobile (keep inside / closer) */
 @media (max-width: 768px) {
   .outside-control {
     display: none !important;
   }
 }

 .position-relative:hover .gradient-overlay {
   opacity: 1;
 }


 /* CTA Section */
 /* Section */
 .cta {
   margin-top: 4rem;
   text-align: center;
 }

 .cta h2 {
   font-size: 1.4rem;
   font-weight: 500;
   font-style: italic;
   letter-spacing: -0.5px;
   margin-bottom: 0.8rem;
 }

 .cta p {
   font-size: 1.1rem;
   font-weight: 400;
   letter-spacing: -0.3px;
 }

 /* Responsive */
 @media (min-width: 768px) {
   .cta h2 {
     font-size: 1.8rem;
   }

   .cta p {
     font-size: 2rem;
   }
 }

 .modern-section {
   /* background: radial-gradient(circle at 30% 30%, #fffef2 0%, #f6ef81 80%); */
   position: relative;
   overflow: hidden;
 }

 .wrap {
   max-width: 900px;
   margin: 0 auto;
   padding-top: 2rem;
 }


 .bento-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
   gap: 1.5rem;
 }

 .bento-card {
   /* background: rgba(255, 255, 255, 0.7); */
   /* border-radius: 20px; */
   padding: 1rem;
   /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); */
   border-left: 2px solid #f6ef81;
   backdrop-filter: blur(10px);
   opacity: 0;
   transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
   will-change: transform, opacity;
 }

 .bento-card.active {
   opacity: 1;
   transform: translateY(0) scale(1);
 }

 .bento-card:hover {
   transform: translateZ(20px) scale(1.04);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .bento-card h4 {
   font-weight: 300;
   margin-bottom: 0.5rem;
   font-size: 1.2rem;
   letter-spacing: 1px;
 }

 .bento-card p {
   font-size: 0.95rem;
   letter-spacing: 1.5px;
 }

 /* CTA alignment */
 .cta {
   text-align: center;
 }

 /* Responsive tweaks */
 @media (max-width: 768px) {
   .bento-card {
     padding: 1.5rem;
   }
 }

 /*social media icons*/
 .reach-section {
   text-align: center;
   margin-top: 5rem;
 }

 .reach-section h3 {
   font-family: 'Amandine', serif;
   font-size: 3rem;
   line-height: 1.2;
   letter-spacing: 1px;
   margin-bottom: 1.5rem;
 }

 .social-icons {
   display: flex;
   justify-content: center;
   gap: 6rem;
   text-align: center;
   margin-top: 12rem;
 }

 .social-icons a {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   font-size: 0.9rem;
   max-width: 220px;
   color: inherit;
   /* optional, keeps text neat */
 }

 .social-icons a p {
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
   margin: 0.4rem 0 0;
   line-height: 1.4;
   font-size: 0.95rem;
   text-align: center;
   max-width: 220px;
 }

 .icon-circle {
   width: 48px;
   height: 48px;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
   margin-bottom: 0.5rem;
 }

 .icon-circle img {
   width: 80px;
   height: 80px;
 }

 .icon-circle:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
   background: #f6ef81;
   color: #000;
 }

 .icon-circle:hover img {
   /* filter: brightness(0) invert(1); */
   /* makes icon white */
 }

 @media (min-width: 768px) {
   .reach-section h2 {
     font-size: 1.8rem;
   }
 }

 @media (max-width: 768px) {
   .social-icons {
     gap: 1rem;
     margin-top: 6rem;
     padding-left: 4px;
     padding-right: 4px;
   }

   .social-icons a p {
     font-size: 0.8rem;
   }

   .reach-section h3 {
     font-size: 2rem;
   }

   .mywork {
     font-size: 2rem;
   }
 }


 /* forced css*/
 @media (max-width: 768px) {
   .moodboard {
     font-size: 23px !important;
   }
 }


 /* download resume button */
 .portfolio-links li {
   margin-bottom: 1.5rem;
 }

 .portfolio-links a {
   color: #000;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: 400;
   letter-spacing: 1px;
   position: relative;
   display: inline-block;
   transition: all 0.3s ease;
 }

 .portfolio-links a::after {
   content: "";
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: #111;
   transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .portfolio-links a:hover::after {
   width: 100%;
   /* expands underline */
 }

 .portfolio-links a:hover {
   color: #000;
   transform: translateX(6px);
   opacity: 0.8;
   /* optional: darken on hover */
 }


 /* footer */
 footer {
   margin-top: 7rem;
 }

 .credits {
   margin: 0;
   font-size: 12px;
 }

 /*test css*/
 #pdf-frame {
   width: 100%;
   height: 70vh;
 }

 @media (max-width: 768px) {
   #pdf-frame {
     height: 60vh;
   }

   .credits {
     margin-top: 12px;
     font-size: 6px;
   }
 }

 @media (min-width: 768px) {

   /* md breakpoint */
   .fs-md-2 {
     font-size: var(--bs-font-size-2) !important;
   }
 }