:root{
    --font-size: 16px;
    --h1--font-size: 38px;
    --h2--font-size: 22px;
    --radios--font-size:26px;
    --font--card-size: 24px;
    --container-width: 520px;

    --color-primary: #bdea1b;
    --color-secondary: #fc6c00;
    --color-bg: #37657c;
    --header-bg: #5986a0;
    --color-text: #fff;
    --color-cards: #fc6c00;
    --warning-color: #fc6c00;
}

*{
    box-sizing: border-box;
}

html, body{
    margin:0px;
    padding:0px;
    width: 100%;
    height: 100%;
    
    background: var(--color-bg);

    text-align: center;
    
    color: var(--color-text);
    font-family: "DM Sans", sans-serif;

    font-size: var(--font-size);

    font-weight: 400;

}


.warning-text{
    color: var(--warning-color);
}


.top-floater{
    position: fixed;
    z-index: 1;
    top:0px;
    right:0px;
    width: 33%;
}
.bottom-floater{
    position: fixed;
    bottom:0px;
    left:0px;
    z-index: 1;
    width: 33%;
}

strong{
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color:var(--color-text);
}

a{
    color: var(--color-text);
}


header{

    position: relative;
    z-index: 2;

}

body > main{

    width: 100%;
    position: relative;
    z-index: 1;

    padding-top:36px;
    padding-bottom:36px;

}

body > footer{

    position: relative;
    z-index: 1;

    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    align-self: auto;

    color: var(--color-text);

    width: 100%;

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;

    padding:20px;

    p{
        text-align: center;
        width: 100%;   
        margin:0px;
    }

   

}

body > header{
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    align-self: auto;

    width: 100%;

    margin-top:0px;
    margin-bottom:0px;

    position: sticky;
    top: 0;

    background: var(--header-bg);

    padding-top:16px;
    padding-bottom:16px;

    -webkit-box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.3); 
    box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.3);

}
header .logo{
    display: block;
    margin: auto auto;
    max-width: 160px;
    width: 90%;
    height: auto;
}

footer .menu{
    background: var(--color-primary);
    a{
        padding:0px;
    }
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;

    width: 100%;
    padding:16px;
    margin:0px;

    li{
        list-style: none;
    }

    img{
        display: block;
        height: 40px;
        width: auto;
    }

    img.active{
        filter: brightness(0) saturate(100%) invert(26%) sepia(64%) saturate(1421%) hue-rotate(155deg) brightness(100%) contrast(100%);
    }

}

h1{

    font-family: "DM Sans", sans-serif;

    display: block;
    font-size: var(--h1--font-size);
    padding-top:16px;
    padding-bottom:16px;
    margin:0px;
    color:var(--color-text);
    text-align: center;

}
h2{
    font-size: var(--h2--font-size);
    color: var(--color-primary);
}

form{
    text-align: left;

    .radios-area > div{

        padding:16px;
        padding-top:0px;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .radios-area > div label{

        -webkit-order: -1;
        order: -1;
        font-size: var(--radios--font-size);
        font-weight: bold;
        padding: 8px;
        
    }

    input[type="text"],input[type="email"]{
        padding:8px;
        width: -webkit-fill-available;
        font-size: var(--font-size);
    }

}

.radios-area{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.button{

        background: var(--color-text);
        color:#fff;
        padding: 16px 64px;
        border-radius: 36px;
        border:none;
        font-size: var(--font-size);
        text-decoration: none;
    
}

.container{
    max-width: var(--container-width);
    width: 90%;
    margin: auto auto;
    text-align: left;
}


.card{
    display: block;
    background: var(--color-cards);
    color:#fff;
    padding: 16px 64px;
    width: 100%;
    margin-top: 36px;
    margin-bottom: 36px;
    border-radius: 36px;
    text-decoration: none;
    font-size: var(--font--card-size);
}


.pageImage{

    max-width: var(--container-width);
    width: 90%;
    margin: auto auto;
    margin-top:36px;
    margin-bottom:36px;

}

.container ul{
    text-align: left;
    li{
        padding-top:6px;
        padding-bottom:6px;
    }
}

.menu{


    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    .menu-item{

        border-radius: 8px;

        padding: 20px;
        color: #fff;
        font-weight: bold;
        background: var(--color-cards);
        
        aspect-ratio: 1 / 1;

        width: calc(50% - 20px);
        margin: 10px;

        text-decoration: none;
        text-align: left;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;

        svg{
            width: 40px;
            height: 40px;

            -webkit-order: 0;
            order: 0;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
            -webkit-align-self: flex-end;
            align-self: flex-end;
        }

        p{
            -webkit-order: 0;
            order: 0;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
            -webkit-align-self: flex-start;
            align-self: flex-start;
            margin:0px;
            padding:0px;
            text-decoration: none;
        }

    }

}

.with-icon{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    svg{
        margin-right:12px;
    }
}

.rating-row{
  margin: 10px 0 14px 0;
}

.rating-row .rating-label{
  display:block;
  margin-bottom: 6px;
}

.stars{
  display:inline-flex;
  flex-direction: row-reverse; /* needed for the fill logic */
  gap:6px;
}

.stars input{ display:none; }

.stars label{ cursor:pointer; line-height:0; }

.stars label svg path{
  fill:none;
  transition: fill .15s ease;
}

.stars label:hover svg path,
.stars label:hover ~ label svg path{
  fill:#f9c004;
}

.stars input:checked ~ label svg path{
  fill:#f9c004;
}




.program-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each block */
.program-item{
  padding: 10px 0 12px 0;
}

/* Time (blue) */
.program-time{
  display: block;
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--warning-color); /* blue like screenshot */
}

/* Title (bold dark) */
.program-content h3{
  margin: 0 0 4px 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-text); /* dark */
}

/* Speaker (orange) */
.program-speaker{
  margin: 0 0 3px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary); /* orange */
}

/* Hospital/center (light gray) */
.program-center{
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text); /* light gray */
}

/* Optional: tighten overall width like screenshot */
.program{
  max-width: 520px;
}

/* Optional: subtle separation (screenshot looks mostly spaced, not lines) */
.program-item + .program-item{
  margin-top: 6px;
}

/* Mobile: keep it compact */
@media (max-width: 600px){
  .program{
    max-width: 100%;
  }
}

.btn{
    background: var(--color-secondary) !important;
}