.open-sans {
  font-family: "Open Sans";
}

.bg--pattern {
  background-image: url('/static/images/background_banner.png');
  min-height: 614px;
}

.w-45 {
  width: 45%;
}

@media screen and (min-width: 30em) {
  .w-45-ns { width: 45%; }
}

.bg-occrp-red {
  background-color: #FFB300;
}

.b--occrp-red {
  border-color: #FFB300;
}

.book {
  perspective: 250px;
}

@keyframes almost3d {
  from {
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.5);
    transform: translateY(0deg);
    transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, border-width 0.24s ease;
    background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%);
  }

  to {
    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.5);
    transform: rotateY(5deg) rotateX(2deg);
    background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 75%);
  }
}

.book .cover {
  transform-style: preserve-3d;
  width: 282px;
  height: 200px;
  background-color: #FFB300;
  border-radius: 3px 6px 6px 3px;
  border-right: 1px solid #e23d5e;
  border-bottom: 1px solid #e23d5e;
  position: relative;
  animation: 2s infinite alternate almost3d;
}
.book .cover:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  bottom: 0;
  border-radius: 3px 0 0 3px;
  background-color: #e23d5e;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 50%, rgba(0, 0, 0, 0) 50%);
  content: '';
}

.top-banner {
  background: #FFB300;
  color: #fff;
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7rem;
}

.bg-occrp-pink {
  background-color: #E33660;
}

.header {
  background-color: black;
  border-top: 4px solid #FFC72C; /* Yellow border at the top */
  /* Make sure there's no border on the bottom */
  border-bottom: none;
}

.header .logo img {
  width: 150px; /* Adjust based on the size of your logo */
}

.header .header-text img {
  width: 130px; /* Adjust based on the size of your text image */
}

@media (max-width: 768px) {
  .header .logo img,
  .header .header-text img {
    width: 100px; /* Adjust for mobile */
  }
}

/* New design CSS */
/* Define Lora Font Family */
@font-face {
  font-family: 'Lora';
  src: url('/static/fonts/Lora/Lora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lora';
  src: url('/static/fonts/Lora/Lora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Lora';
  src: url('/static/fonts/Lora/Lora-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Lora';
  src: url('/static/fonts/Lora/Lora-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Define Inter Tight Font Family */
@font-face {
  font-family: 'Inter Tight';
  src: url('/static/fonts/InterTight/InterTight-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('/static/fonts/InterTight/InterTight-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('/static/fonts/InterTight/InterTight-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('/static/fonts/InterTight/InterTight-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular weight */
  font-style: normal;
}


/* Apply Inter Tight for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Tight', serif;
}

h1 {
  font-weight: 400; /* Bold */
  font-size: 54px; /* Exact size as per Figma */
  line-height: 54px; /* Matches Figma's line height */
}

/* Apply Lora for body text */
body, p, a, li {
  font-family: 'Lora', sans-serif;
}

/* Button example with bold font */
.browse-btn {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; /* Bold */
}

.bg--pattern {
  border: none; /* Remove border-bottom from the following section if it exists */
}

.bg--pattern {
  background-image: url('/static/images/background_banner.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
}

.left-section {
  max-width: 614px; /* Limit the width for better readability */
}

.left-section h1 {
  font-size: 3rem; /* Adjust size based on your design */
  line-height: 1.2; /* Control the space between lines */
  font-weight: 700; /* Make it bold */
}

.gold-line {
  width: 50px;
  height: 4px;
  background-color: #FFC72C; /* Yellow/Gold line */
  margin: 20px 0;
}

.left-section p {
  font-size: 1.125rem; /* Slightly larger paragraph font size */
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .bg--pattern {
    background-position: center; /* Adjust the position of the background image for mobile */
  }

  .left-section h1 {
    font-size: 2rem; /* Smaller font size for mobile */
  }
}

.browse-btn {
  background-color: #FFC72C; /* Gold button background */
  color: black;
  font-weight: normal; /* Ensure the text is not bold */
  text-transform: capitalize;text-transform: capitalize;: uppercase;
  padding: 1rem 2rem;
  display: inline-block;
  text-decoration: none; /* Remove underline */
  border-radius: 40px;
}

.bg-dark-blue {
  background-color: #2D208A; /* Dark blue background */
}

.resources-section {

}

.resources-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
  align-items: center; /* Vertically center the cards within the container */
}

.flex-ns {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Make both cards equal height */
  gap: 2rem; /* Add space between the two cards */
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1; /* Ensures cards grow equally */
}

.bg-dark-blue {
  background-color: #2b2684;
}

.dark-blue {
  color: #2b2684;
}

.black {
  color: #000;
}

.bg-dark-gray {
  background-color: #DCD9CE;
}

.bg-light-gray {
  background-color: #F4F3EC;
}


.bg-white {
  background-color: white;
}

a.link {
  font-weight: 600;
  text-transform: uppercase;
}

.small-button {
  font-size: 12px; /* Adjust as needed */
  border-radius: 40px;
  font-family: 'Inter', serif;
}

.about-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

h3.f4.gold {
  color: #FFB74D; /* Gold color for 'About ID' */
  font-family: Lora, serif;
  font-size: 44px;
  font-weight: lighter;
}

h2.dark-blue {
  color: #003366; /* Dark blue for headings */
}

.bg-light-gray {
  background-color: #f6f6f6; /* Light gray background */
}

.fw7 {
  font-weight: 700; /* Bold */
}

footer {
  background-color: #DCD9CE; /* Dark gray background */
  display: block;
  unicode-bidi: isolate;
}

.footer-font-dark {
  font-family: 'Inter Tight', serif;
  color: #000; /* Dark font color */
  font-weight: bold; /* Bold font */
}

.footer-links-custom-height {
  height: 45px;
}

.footer-font {
  font-family: 'Inter', serif;
  color: #000; /* Dark font color */
}

.padding-mobile-footer {
  padding-bottom: 0;
  padding-top: 0;
}

.footer-image {
  width: 50px; /* Set a fixed width for all images */
  height: auto; /* Maintain aspect ratio */
  margin-right: 10px;
}

.footer-logo-link {
  display: flex;
  justify-content: flex-start; /* Aligns items to the right horizontally */
  align-items: center; /* Aligns items to the center vertically */
  font-family: Inter;
  font-size: 17px;
  font-weight: 500;
  line-height: 20.57px;
  letter-spacing: -0.05em;
  text-align: left;
  color: #222222;
  text-decoration: underline;
  text-transform: capitalize !important;
}

/* Phone size */
@media (max-width: 430px) {
  .header .center {
    flex-direction: row;
    align-items: center;
  }

  .header .logo, .header .header-text {
    width: 50%;
    text-align: center;
  }

  .header .logo img, .header .header-text img {
    width: 80%;
  }

  /*banner section */
  .bg--pattern .center {
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
  }

  .bg--pattern .left-section h1 {
    font-size: 1.5rem;
  }

  .bg--pattern .left-section p {
    font-size: 1rem;
  }

  .bg--pattern .left-section .browse-btn {
    width: 100%;
    text-align: center;
  }

  /*resources section */

  .resources-section {
    padding: 2rem 1rem;
  }

  .resources-section .center {
    flex-direction: column;
    align-items: center;
  }

  .resources-section .card {
    width: 100%;
    margin-bottom: 1rem;
  }

  .resources-section .card h2 {
    font-size: 1.5rem;
  }

  .resources-section .card p {
    font-size: 1rem;
  }

  .resources-section .card .browse-btn {
    width: 100%;
    text-align: center;
  }

  .arrow {
    display: none;
  }

  /*about section */

  .about-section {
    padding: 2rem 1rem;
  }

  .about-section .flex-ns {
    flex-direction: column;
    align-items: center;
  }

  .about-section .w-30-ns, .about-section .w-70-ns {
    width: 100%;
    padding-right: 0;
  }

  .about-section .w-30-ns {
    margin-bottom: 1rem;
  }

  .about-section h2 {
    font-size: 1.5rem;
  }

  .about-section p {
    font-size: 1rem;
  }

  .about-section .w-100-ns {
    margin-top: 2rem;
  }

  .about-section .bg-light-gray {
    flex-direction: column;
    align-items: center;
  }

  .about-section .bg-light-gray .w-30-ns, .about-section .bg-light-gray .w-70-ns {
    width: 100%;
    padding-right: 0;
  }

  .about-section .bg-light-gray .w-30-ns {
    margin-bottom: 1rem;
  }

  .responsive-hide-br {
    display: none;
  }

  /*footer section */
  .footer .flex-ns {
    flex-direction: column;
    align-items: center;
  }

  .footer .w-40-ns, .footer .w-20-ns, .footer .w-60-ns {
    width: 100%;
    text-align: center;
  }

  .footer .pv4 {
    padding: 1rem 0;
  }

  .footer .bt {
    border-top: none;
  }

  .footer-image {
    width: 50px; /* Set a fixed width for all images */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px;
  }

  .footer-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .footer-images .w-40-ns, .footer-images .w-20-ns {
    width: 100%;
    text-align: left; /* Align images to the right */
  }

  .footer-image-logo {
    width: auto !important; /* Set a fixed width for the logo */
    height: 45px  !important; /* Maintain aspect ratio */
  }

  .footer-images img {
    width: 50px; /* Ensure the fixed width is applied on mobile as well */
  }

  .padding-mobile-footer {
    padding-bottom: 0;
    padding-top: 0;
  }

  .footer-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .footer-info .w-60-ns {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-info .w-20-ns {
    width: 100%;
    text-align: center;
  }

  .footer-logo-link {
    display: flex;
    justify-content: flex-start; /* Aligns items to the right horizontally */
    align-items: center; /* Aligns items to the center vertically */
    font-family: Inter;
    font-size: 17px;
    font-weight: 500;
    line-height: 20.57px;
    letter-spacing: -0.05em;
    text-align: left;
    color: #222222;
    text-decoration: underline;
    text-transform: capitalize !important;
  }

  .footer-info .w-20-ns:nth-child(2),
  .footer-info .w-20-ns:nth-child(3),
  .footer-info .w-20-ns:nth-child(4) {
    grid-column: span 1;
  }
}