.past-paper-page .choose-subject-papers {
    width: 17.8vw;
    height: 31.5vw;
    margin-left: 2.6vw;
    margin-top: 3.2vw;
    background-color: var(--c2);
    border-radius: 1.5vw;
    padding-left: 0.65vw;
    padding-top: 0.65vw;
}

.past-paper-page .choose-subject-papers .dropdown1-container,
.past-paper-page .choose-subject-papers .dropdown2-container,
.past-paper-page .choose-subject-papers .dropdown3-container {
    display: block;
    flex-wrap: wrap;
    text-align: left;
}

.past-paper-page .choose-subject-papers .dropdown1-container h1,
.past-paper-page .choose-subject-papers .dropdown2-container h1,
.past-paper-page .choose-subject-papers .dropdown3-container h1 {
    color: white;
    font-size: 1.5vw;
}

.past-paper-page .choose-subject-papers .dropdown1-container h1 {
    margin-top: 1vw;
}

.past-paper-page .choose-subject-papers .dropdown1-container .dropdown,
.past-paper-page .choose-subject-papers .dropdown2-container .dropdown,
.past-paper-page .choose-subject-papers .dropdown3-container .dropdown {
    min-width: 8vw;
    position: relative;
    margin: 1vw;
    margin-left: 0;
    background-color: var(--c1);
}

.dropdown * {
    box-sizing: border-box;
}

.select {
    background-color: var(--c1);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px #2a2f3b;
    border-radius: 0.5em;
    padding: 1;
    cursor: pointer;
    transition: background 0.3s;
}

.select-clicked {
    border: 2px #26489a solid;
    box-shadow: 0 0 0.8em #26489a;
}

.select:hover {
    background-color: red;
}

.dropdown.active .caret {
    transform: rotate(180deg);
}

.menu {
    list-style: none;
    padding: 0.2em 0.5em;
    background: var(--c1);
    border: 1px #363a43 solid;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
    border-radius: 0.5em;
    color: var(--c2);
    position: absolute;
    top: 3em;
    left: 50%;
    width: 100%;
    transform: translateX((-50%));
    opacity: 1;
    display: none;
    transition: 0.2s;
    z-index: 1;
}

.menu li {
    padding: 0.4em 0.5em;
    margin: 0.2em 0;
    border-radius: 0.5em;
    cursor: pointer;
}

.menu li:hover {
    background: var(--c2);
}

.active {
    background: var(--c2);
}

.menu-open {
    display: block;
    opacity: 1;
}

.dropdown {
    position: relative;
    min-width: 10vw;
    background: #1e1e1e;
    border-radius: 8px;
    cursor: pointer;
}

.dropdown .select {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    background: var(--c1);
    border-radius: 8px;
    transition: background 0.3s ease, border 0.3s ease;
}

.dropdown .select:hover {
    background: white;
}

.dropdown .select.active {
    border: 2px solid var(--c4);
}

.dropdown .menu {
    width: 100%; /* Make menu take full width of dropdown */
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--c1);
    border-radius: 8px;
    margin-top: 8px;
    padding: 4px 0;
    max-height: 300px; /* Replace fixed height with max-height */
    overflow-y: auto; /* Keep this to allow scrolling if needed */
}

.dropdown .menu li {
    padding: 12px 16px;
    color: #a0a0a0;
    transition: all 0.2s;
}

.dropdown .menu li:hover {
    background: white;
    color: var(--c2);
}

.dropdown .menu li.active {
    color: #ffffff;
    background: var(--c2);
}

.caret img {
    width: 10%;
}

/* Add this class when the dropdown is open */
.dropdown.active .menu {
    display: block;
}

/* Caret styling */
.caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.dropdown.active .caret {
    transform: rotate(-135deg);
}

/* Add or update these styles */
.dropdown1-container,
.dropdown2-container,
.dropdown3-container {
    width: 15vw; 
    margin-left: 0.5vw;
}

.dropdown {
    width: 100%; /* Make dropdown take full width of its container */
    background: var(--c2);
    border-radius: 8px;
    cursor: pointer;
    margin: 1em 0;
}

.dropdown .select {
    width: 100%; 
    height: 3vw;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background: var(--c1);
    border-radius: 8px;
    transition: background 0.3s;
    color: var(--c2);
}

.dropdown .menu {
    width: 100%; /* Make menu take full width of dropdown */
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--c1);
    border-radius: 8px;
    margin-top: 8px;
    padding: 4px 0;
    max-height: 300px; /* Replace fixed height with max-height */
    overflow-y: auto; /* Keep this to allow scrolling if needed */
}

.choose-subject-papers h3 {
    color: white;
    font-size: 0.9vw;
    margin-top: 1vw;
    font-weight: 300;
}

.past-paper-page .choose-paper-btn {
    width: 50%;
    height: 10%;
    color: var(--c4);
    border-radius: 5vh;
    background-color: white;
}


.past-paper-page .choose-paper-btn {
    width: 17.8vw;
    height: 4.7vw;
    background-color: var(--c2);
    position: relative;
    margin-left: 2.5vw;
    margin-top: 0.5vw;
    font-size: 1.4vw;
    border-radius: 6.25vw;
    color: white;
    padding-left: 1.5vw;
    padding-top: 0.3vw;
    display: block;
}

.past-paper-page .choose-paper-btn img {
    height: 3.7vw;
    position: absolute;
    margin-left: 12.1vw;
    margin-top: -4vw;
}

.past-paper-page .past-paper-display {
    width: 70%;
    height: 60%;
    position: absolute;
    right: 5%;
    margin-top: -37vw;
}

.past-paper-page .past-paper-display .link-to-past-paper,
.past-paper-page .past-paper-display .link-to-marking-scheme,
.past-paper-page .past-paper-display .link-to-solutions,
.past-paper-page .past-paper-display .past-paper-ratings {
    width: 100%;
    height: 15%;
    border-radius: 7.5vh;
    background-color: var(--c2);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.past-paper-page .past-paper-display .link-to-marking-scheme,
.past-paper-page .past-paper-display .link-to-solutions {
    margin-top: 2.5%;
}

.past-paper-page .past-paper-display .past-paper-ratings {
    margin-top: 8.75vw;
}

.link-to-past-paper,
.link-to-marking-scheme {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-to-past-paper a,
.past-paper-page .past-paper-display .link-to-solutions a,
.past-paper-page .past-paper-display .link-to-marking-scheme a {
    font-size: 200%;
    color: white;
    transition: color 0.3s ease;
}


.link-to-past-paper a:hover,
.past-paper-page .past-paper-display .link-to-solutions a:hover {
    color: var(--c1);
}

.past-paper-page .past-paper-display .past-paper-ratings input {
    height: 12%;
    width: 25%;
    border-radius: 4vh;
    border: 3px solid var(--c4);
    margin-left: 71.9%;
    position: absolute;
    color: var(--c2);
    outline: none;
    font-size: 200%;
    padding-left: 2.5%;
}

/* Media query for smartphone viewing */
@media screen and (max-width: 500px) {
  .past-paper-page .content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .past-paper-page .choose-subject-papers {
    width: 90%;
    height: auto;
    margin: 20px auto;
    padding: 15px;
    border-radius: 5vw;
  }

  .past-paper-page .choose-subject-papers h3 {
    font-size: 20px;
  }
  
  .past-paper-page .choose-paper-btn {
    width: 90%;
    height: auto;
    margin: 20px auto;
    padding: 15px;
    font-size: 16px;
    text-align: center;
  }
  
  .past-paper-page .choose-paper-btn img {
    display: none; /* Hide the image on mobile */
  }
  
  .past-paper-page .past-paper-display {
    width: 90%;
    height: auto;
    position: static;
    margin: 20px auto;
  }
  
  .dropdown {
    width: 100%;
    margin: 10px 0;
    position: relative;
  }
  
  .dropdown .select,
  .dropdown .menu {
    width: 100%;
    font-size: 22px;
  }
  
  .dropdown .menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    max-height: 50vh; /* Increased from 300px to 50% of viewport height */
    overflow-y: auto;
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 10px 0;
  }
  
  .dropdown .select {
    width: 100%;
    height: auto; /* Remove fixed height */
    min-height: 50px; /* Ensure minimum clickable area */
    padding: 12px 16px;
    font-size: 18px;
  }
  
  .dropdown .menu li {
    font-size: 18px;
    padding: 12px 16px;
    margin: 4px 0;
  }
  
  .dropdown.active .menu {
    display: block;
  }
  
  .past-paper-page .past-paper-display .link-to-past-paper,
  .past-paper-page .past-paper-display .link-to-marking-scheme,
  .past-paper-page .past-paper-display .link-to-solutions,
  .past-paper-page .past-paper-display .past-paper-ratings {
    width: 100%;
    height: auto;
    padding: 15px;
    margin: 10px 0;
    border-radius: 15px;
  }
  
  .past-paper-page .past-paper-display .past-paper-ratings {
    margin-top: 20px;
  }
  
  .past-paper-page .past-paper-display .past-paper-ratings input {
    width: 90%;
    height: 40px;
    margin: 10px auto;
    position: static;
    display: block;
    font-size: 16px;
  }
  
  .past-paper-page .title-box {
    width: 100%;
    height: auto;
    padding: 15px;
    text-align: center;
  }
  
  .past-paper-page .title-box h1 {
    font-size: 24px;
  }
  
  .past-paper-page .title-box h2 {
    font-size: 18px;
  }
  
  .past-paper-page .choose-subject-papers .dropdown1-container h1,
  .past-paper-page .choose-subject-papers .dropdown2-container h1,
  .past-paper-page .choose-subject-papers .dropdown3-container h1 {
    font-size: 24px;
  }
  
  .dropdown1-container,
  .dropdown2-container,
  .dropdown3-container {
    width: 100%;
    margin-left: 0;
  }
}