html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    body {
        font-family: 'Montserrat';
        font-size: 16px;
    } 
    h7 {
        font-size: 17px;
    }
}
@media only screen and (max-device-width: 820px) {  
    /* mobile */
    body {
        font-family: 'Montserrat';
        font-size: 40px;
    } 
    h7 {
        font-size: 44px;
    }
}

.logo {
    top: 0px;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 220px;
    background-color: white;
}

.logo_web {
    height: 220px;
}

.logo_mobile {
    height: 290px;
}

div.navmenu_web {
    top:162px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    font-size: 17px;
} 

div.navmenu_mobile {
    top:0px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    font-size: 44px;
} 

top {
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.middle {
    top: 30px;
    float: left;
}

.hero {
    position: relative;
    text-align: center;
    color: white;
    font-weight: bold;
    font-style: italic;
}

.hero_web {
    top: 220px;
}

.hero_mobile {
    top: 300px;
}

.about_top {
    top: 250px;
}

section {
    position: relative;
    text-align: center;
} 

@media only screen and (max-device-width: 820px) {  
    section {
        top: 250px;
    }
}

@media only screen and (min-device-width: 820px) {  
    section {
        top: 250px;
    }
}

@media only screen and (max-device-width: 820px) {  
    /* mobile */
    .hero {
        font-size: 18px;
    }
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    .hero {
        font-size: 30px;
    }
    .centered {
        position: absolute;
        top: 8%;
        left: 40%;
        transform: translate(-50%, -50%);
    }
}

/* events */

.button_event {
    padding: 0;
    border: none;
    border-radius: 7%;
}

.button_event_month {
    font-weight: bold;
    color: white;
    padding: 0px;
    margin: 0px;
}

.button_event_month_blue {
    color: #0E61E4;/*blue*/
}

.button_event_month_green {
    color: #079C46;/*green*/
}

.button_event_month_purple {
    color: #5949E4;/*purple*/
}

.button_event_day {
    color: black;
    padding: 0px;
    margin-bottom: -2px;
}

.button_event_name {
    color: grey;
    padding: 0px;
}

.button_event_time {
    font-size: 14px;
    color: grey;
    padding: 0px;
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    .button_event_green {
        background: url(img/button_event_green.png) 0px 0px no-repeat;
    }
    .button_event_blue {
        background: url(img/button_event_blue.png) 0px 0px no-repeat;
    }
    .button_event_purple {
        background: url(img/button_event_purple.png) 0px 0px no-repeat;
    }
    .button_event {
        height: 55px;
        width: 55px;
        border-radius: 7%;
    }
    .button_event_month {
        font-size: 12px;
    }
    .button_event_day {
        font-size: 24px;
        margin-bottom: -2px;
    }
    .button_event_name {
        font-size: 4px;
    }
}

@media only screen and (max-device-width: 820px) {  
    /* mobile */
    .button_event_green {
        background: url(img/button_event_110x110_green.png) 0px 0px no-repeat;
    }
    .button_event_blue {
        background: url(img/button_event_110x110_blue.png) 0px 0px no-repeat;
    }
    .button_event_purple {
        background: url(img/button_event_110x110_purple.png) 0px 0px no-repeat;
    }
    .button_event {
        height: 110px;
        width: 110px;
        border-radius: 7%;
    }
    .button_event_month {
        font-size: 24px;
    }
    .button_event_day {
        font-size: 48px;
        margin-bottom: -2px;
    }
    .button_event_name {
        font-size: 8px;
    }
}

/** Menu **/
@media only screen and (max-device-width: 820px) {  
    /* mobile */
    /* show navmenu_mobile and hide navmenu_web */

    div.navmenu_web {
        display: none;
    }
    div.logo_web, div.donate_web, div.hero_web {
        display: none;
    }

    /* vertical menu */

    .menu2 {
        display: block;
        margin: 50px auto;
        position: relative;
        top: 92px;
        float: right;
        right: 70px;
        width: 200px;
    }

    .menu2 li {
        list-style-type: none;
    }

    .menu2 li li {
        width: 250px;
        background-color: #0E61E4;/*blue*/
        list-style-type: none;
        right: 200px;
    }

    .menu2 li li a.active {
        background-color: #079C46;/*green*/
        color: white;
    }

    .menu2 li li a.inactive {
        background-color: #0E61E4;/*blue*/
        color: white;
    }

    .submenu2:has(a:not(.active)){
        opacity: 0;
    }

    .menu2 ul li a:hover:not(.active) {
        background-color: #5949E4;/*purple*/
        color: white;
    }

    .menu2 > li > a {
        display: block;
        color:  #0E61E4;/*white*/
        padding: 8px 16px; 
        text-align: right;
        text-decoration: none;
        font-size: 84px;
    }
    
    .menu2 li ul {
        margin-top: 70px;
    }

    .menu2 ul {
        height: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        transition: all .5s ease;
        top: 35px;
        width: 100%;
    }
    
    .menu2 li:hover ul {
        height: 200px;
        opacity: 1;
        transform: translateY(0);
    }

    .menu2 ul a {
        color: white;
        display: block;
        padding: 5px 20px;
        text-decoration: none;
    }    
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    /* show navmenu_web and hide navmenu_mobile */
   
    div.navmenu_mobile {
        display: none;
    }
    div.logo_mobile, div.donate_web, div.hero_mobile {
        display: none;
    }
    /* horizontal menu */

    .wave {
        position: relative;
        width: 95%;
        top: 150px;
    }

    /* Only apply the blue background to menu ul elements */
    div.navmenu_web ul, 
    div.navmenu_mobile ul {
        list-style-type: none;
        margin-top: 10px;
        padding: 0;
        padding-right: 50;
        width: 97%;
        overflow: hidden;
        background-color: #0E61E4; /*blue*/
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        border-radius: 120px 10px / 100px;     
    }
      
    div.navmenu_web li, 
    div.navmenu_mobile li {
        float: left;
    }
      
    li a {
        display: block;
        color: white;/*white*/
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        border-radius: 120px 10px / 100px;
    }      
      
    li a:hover {
        background-color: #5949E4;/*purple*/
    }
      
    .active {
        background-color: #079C46;/*green*/
    }
}

/* Default ul styles for other parts of the body */
body ul {
    list-style-type: disc; /* or any other desired style */
    padding-left: 20px;
    margin: 10px 0;
    background-color: transparent; /* No background */
}
 
/** gallery **/

@media (max-width: 820px) {
    .gallery_min {
        flex: 20%;
        display: block;
        padding: 2px;
        border-radius: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        width: 330px;
    }
}

.gallery_min {
    flex: 20%;
    padding: 2px;
    border-radius: 10%;
    width: 350px;
}

.gallery_container {
    position: relative;
    text-align: center;
    color: white;
    font-weight: bold;
}

@media only screen and (max-device-width: 820px) {  
    /* mobile */
    .gallery_container {
        font-size: 12px;
    }
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    .gallery_container {
        font-size: 20px;
    }
}

.gallery_text {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.class-card {
  max-width: 850px;
  margin: 30px auto;
  padding: 28px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.class-card-robotics {
  border-top: 7px solid #1769d2;
}
.class-card-aerialdrones {
  border-top: 7px solid #079C46;
}
.class-card-3dprinting {
  border-top: 7px solid #5949E4;
}


.class-schedule-link {
  display: block;
  max-width: 330px;
  margin: 0 auto 24px;
  text-decoration: none;
}

.class-header {
  margin-bottom: 22px;
  text-align: center;
}

.class-header h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

.class-robotics {
  color: #1769d2;
}

.class-aerialdrones {
  color: #079C46;
}

.class-3dprinting {
  color: #5949E4;
}


.class-tagline {
  margin: 8px 0 0;
  color: #444;
  font-size: 1.15rem;
  font-weight: 600;
}

.class-image {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  margin: 0 auto 25px;
  border-radius: 14px;
}

.class-details {
  margin-bottom: 25px;
  padding: 18px 22px;
  background: #f2f7ff;
  border-radius: 10px;
}

.class-details-robotics {
    border-left: 5px solid #1769d2;
}

.class-details-aerialdrones {
    border-left: 5px solid #079C46;
}

.class-details-3dprinting {
    border-left: 5px solid #5949E4;
}


.class-details p {
  margin: 7px 0;
  line-height: 1.5;
}

@media only screen and (min-device-width: 820px) {  
    .class-description {
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
    }

    .class-description h3 {
    margin: 22px 0 10px;
    font-size: 1.2rem;
    }
}
@media only screen and (max-device-width: 820px) {  
    .class-description {
    color: #333;
    font-size: 2rem;
    line-height: 1.7;
    }

    .class-description h3 {
    margin: 22px 0 10px;
    font-size: 2.4rem;
    }
}

.class-color-robotics {
    color: #1769d2;
}

.class-color-aerialdrones {
    color: #079C46;
}

.class-color-3dprinting {
    color: #5949E4;
}

.class-skills {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.class-skills li {
  margin: 9px 0;
  padding: 10px 14px;
  background: #f8f9fb;
  border-radius: 8px;
}

.class-registration {
  margin-top: 28px;
  text-align: center;
}


/* Larger button text on mobile */
@media only screen and (min-device-width: 820px) {  
    .register-button {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
    }
}
@media only screen and (max-device-width: 820px) {  
    .register-button {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 3.0rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
    }
}


.register-button-blue {
  background: #1769d2;
  box-shadow: 0 5px 14px rgba(23, 105, 210, 0.28);
}

.register-button-blue:hover,
.register-button-blue:focus {
  background: #0d55b2;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(23, 105, 210, 0.35);
}

.register-button-green {
  background: #079C46;
  box-shadow: 0 5px 14px rgba(7, 156, 70, 0.28);
}

.register-button-green:hover,
.register-button-green:focus {
  background: #05813a;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(7, 156, 70, 0.35);
}

.register-button-purple {
  background: #5949E4;
  box-shadow: 0 5px 14px rgba(89, 73, 228, 0.28);
}

.register-button-purple:hover,
.register-button-purple:focus {
  background: #4536c7;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(89, 73, 228, 0.35);
}


@media (max-width: 600px) {
  .class-card {
    margin: 20px 12px;
    padding: 20px 16px;
  }

  .class-header h2 {
    font-size: 2.4rem;
  }

  .class-details {
    padding: 15px;
  }

  .register-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 768px) {
  .class-header h2 {
    font-size: 2.8rem !important;
    line-height: 1.2;
  }

  .class-description h3 {
    font-size: 1.25rem !important;
    line-height: 1.3;
  }
}