.brochures-page{
    background: var(--bs-page-background);
    height: 100vh;
}

full-height {
  height: 100%;
}

.page-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 140px 60px auto 60px;
}

.iframe-container {
  width: 65%;
  height: calc(100vh - 250px);
}

.radio-container {
  width: 25%;
}

.iframe {
  display: block;
  margin: 0 auto;
}

.radio-bg-containers {
  background-color: #FFF;
  height: 56px;
  min-width: 324px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: black;
}

.radio-inner {
  margin-left: 16px;
  font-size: 16px;
  font-family: "Gotham";
  cursor: pointer;
}

.download-button {
  height: 56px;
  width: 56px;
  background-color: #5528ff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.custom-radio {
    accent-color: #5528ff;
    height: 20px;
    width: 20px;
    margin-top: 10px;
}

.brochure-label {
    cursor: pointer;
}

.brochure-label-text {
    vertical-align: super;
    display: inline-block;
}

.brochure-row{
  width: 100%;
  align-items: center;
  height: calc(100vh - 85px);
  margin: 0 !important;
}

#brochure-iframe{
    width: 100%;
    height: 100%;
    display: block;
}


@media (min-width: 300px) and (max-width: 900px){
   
    .page-container{
        flex-direction: column-reverse !important;
        margin: 100px 0 0 0 !important;
    }
    
    .iframe-container{
        width: 95% !important;
        height: calc(100vh - 309px) !important;
    } 
    
    .brochure-label{
        height:100% !important;
    }
    
    .custom-radio {
        margin-top: 0 !important;
        transform: translateY(2px) !important;
    }
    
    .brochure-label-text {
        vertical-align: unset !important;
        display: unset !important;
    }
    
    .brochure-row{
        align-items: start !important;
    }
    
    #brochure-iframe{
        overflow-y: scroll !important;
    }
}

@media (min-width: 300px) and (max-width: 699px){
    .radio-container {
        width: 95% !important;
        margin-bottom: 15px !important;
    }
}

@media (min-width: 700px) and (max-width: 899px){
    .radio-container {
        width: 75% !important;
        margin-bottom: 15px !important;
    }
}

@media (min-width: 901px) and (max-width: 1299px){
    .radio-container{
        width: 35% !important; 
    }
}