/* Regular */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-Regular.ttf') format('truetype');
  font-weight: 400;
}

/* Bold */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-Bold.ttf') format('truetype');
  font-weight: 700;
}

/* Light */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-Light.ttf') format('truetype');
  font-weight: 300;
}

/* Medium */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-Medium.ttf') format('truetype');
  font-weight: 500;
}

/* SemiBold */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

/* Thin */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-Thin.ttf') format('truetype');
  font-weight: 100;
}

/* Italic Versions */
@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-Italic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: 'Josefin';
  src: url('Fonts/JosefinSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin';
    font-weight: 700;
    margin-bottom: 15px;
}
li {
    margin-bottom: 12px;
}
p {
    font-family: 'Josefin';
    line-height: 1.4;
    margin-bottom: 12px;
    margin-top: 0;
}

/* Minimal Modern Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}



    :root{
      --gap: 1rem;
      --card-radius: 12px;
      --overlay-bg: rgba(0,0,0,0.55);
      --title-size: 1.125rem;
      --desc-size: 0.95rem;
      --card-height: 520px;
    }

    .vertical-section{ margin:0 auto; padding:2rem 0}
    .vertical-section h2{margin-bottom:1rem; font-size:1.3rem; font-family:system-ui}

    .vertical-cards{display:grid; gap:var(--gap); grid-template-columns: repeat(3, 1fr)}
    @media (max-width: 900px){
      .vertical-cards{grid-template-columns: repeat(2, 1fr)}
      :root{--card-height: 440px}
    }
    @media (max-width: 600px){
      .vertical-cards{grid-template-columns: 1fr}
      :root{--card-height: 380px}
    }

    .v-card{position:relative; border-radius:var(--card-radius); overflow:hidden; height:var(--card-height); box-shadow:0 8px 22px rgba(0,0,0,0.1); transition:.3s ease}
    .v-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.15)}

    .v-card img{width:100%; height:100%; object-fit:cover}

    .v-title{
      position:absolute; top:0; left:0; right:0; padding:0.8rem 1rem; color:#fff;
      background:linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
      font-size:var(--title-size); font-weight:600;
    }

    .v-desc{
      position:absolute; left:0; right:0; bottom:0; padding:1rem; color:#fff;
      background:linear-gradient(180deg, rgb(0 0 0 / 65%), rgb(0 0 0 / 72%));
      transform:translateY(100%); transition:0.35s ease;
      font-size:var(--desc-size); line-height:1.4;
    }
    .v-card:hover .v-desc{transform:translateY(0)}