@media only screen and (min-width: 768px) {
  html {
    font-family: "Poppins", sans-serif;
  }

  a {
    text-decoration: none;
  }

  ul {
    list-style: none;
    margin: 0;
  }

  p {
    margin: 8px 0 8px 0;
  }

  body {
    margin: 0;
  }

  #hamburger {
    display: none !important;
  }

  .mobile-nav {
    display: none !important;
  }

  .top-nav {
    width: 100%;
  }

  .top-nav ul {
    background-color: #333;
    display: flex;
    flex-direction: row;
    justify-content: end;
  }

  .web-nav li {
    margin: 10px 0 10px 10px;
    display: flex;
    align-items: center;
  }

  .top-nav ul li {
    background-color: #333;
    display: flex;
    flex-direction: row;
    margin: 2px 10px 2px 10px;
  }

  .top-nav a {
    color: #fff;
  }

  .top-nav .lastA {
    margin-right: 100px;
  }

  .web-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 10px;
  }

  .web-nav .brand {
    margin: 10px 0 10px 10px;
  }

  .web-nav ul {
    display: flex;
    flex-direction: row;
  }

  .web-nav a {
    margin: 0 10px 0 10px;
    color: #333;
  }

  .web-nav a:hover {
    color: #ef513c;
  }

  .web-nav .lastCCA {
    color: #ef513c;
    border: #ef513c 3px solid;
    padding: 8px;
  }

  .Landing_Page {
    background-image: url("../images/mobile/home-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px 50px 10px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hello {
    display: none;
  }

  .img {
    border: ridge 1px #ede8e8;
    margin-top: 20px;
  }

  .Landing_Page h1 {
    color: #ec5242;
    margin: 0;
    font-size: 2.5rem;
    margin-top: 4rem;
  }

  .message {
    color: rgb(98, 104, 105);
    margin: 0 20px 0 20px;
    background-color: #fff;
    text-align: center;
    font-size: small;
  }

  .place {
    text-align: center;
    color: #575757;
    padding: 0 60px 0 60px;
  }

  .date {
    font-weight: bolder;
    display: inline-block;
    text-align: left;
    letter-spacing: 0;
    color: #575757;
    margin-bottom: 100px;
    text-decoration: underline;
  }

  .program-info-wraper {
    background-color: #fff;
    height: auto;
    padding-bottom: 30px;
    border-bottom: #e1e1e1 ridge 1px;
  }

  .program-info-wraper section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    height: auto;
  }

  .partner-section h2 {
    color: #e1e1e1;
  }

  .program-info-wraper section h2 {
    font-size: 24px;
  }

  .guide-bar {
    width: 53px;
    border-top: 1px solid #ef513c;
    margin: 16px auto 25px;
  }

  .program-list {
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .program-info-wraper section .program-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 0 0 3px;
    color: #575757;
    padding: 8px;
    border: 0;
    border: #8d8282 ridge 1px;
    float: left;
    width: 70%;
    background: rgb(255 255 255 / 10%);
  }

  .footer-img {
    display: flex;
    gap: 10px;
    margin-top: 25px;
  }

  .background-color {
    background: rgb(255 0 0 / 51%);
    height: inherit;
    min-width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .partner-section {
    background-color: #333;
    height: auto;
    padding-bottom: 80px;
    border-bottom: #e1e1e1 ridge 1px;
  }

  .partner-section section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    height: auto;
  }

  .img1 {
    background-image: url("../images/img01.jpg");
    height: 12rem;
    width: 25rem;
  }

  .img2 {
    background-image: url("../images/img02.jpg");
    height: 12rem;
    width: 25rem;
  }

  .partner-div {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .partner-div p {
    gap: 10px;
  }

  .mozilla {
    color: #dfdfdf;
    font-weight: 700;
    font-size: 2rem;
  }

  .google {
    color: #8d8282;
    font-weight: 400;
    font-size: 2rem;
    margin: 10px 50px 10px 50px;
  }

  .naver {
    color: #dfdfdf;
    font-weight: 700;
    font-size: 2rem;
  }

  .last-footer {
    background-color: #fff;
    padding: 10px 10px 10px 10px;
    display: flex;
    gap: 75px;
    justify-content: space-evenly;
    align-items: center;
  }

  .last-footer-img img {
    height: 50px;
    width: 13rem;
  }
}

@media only screen and (max-width: 768px) {
  html {
    font-family: "Poppins", sans-serif;
  }

  a {
    text-decoration: none;
  }

  ul {
    list-style: none;
    margin: 0;
  }

  body {
    margin: 0;
  }

  .top-nav {
    display: none;
  }

  .web-nav {
    display: none;
  }

  .main-program i {
    color: #575757;
  }

  #hamburger i {
    font-size: 35px;
    color: rgb(145, 147, 148);
    position: absolute;
    left: 1rem;
  }

  .menu-bar {
    width: 100%;
    background-color: #837270;
    color: azure;
    height: 2px;
  }

  .mobile-nav {
    display: none;
    width: 100%;
    height: 630px;
    background-color: rgb(29, 26, 26);
  }

  .mobile-nav ul {
    display: flex;
    flex-direction: column;
    color: #fff;
  }

  .fa-bars {
    padding: 10px;
  }

  .mobile-nav li {
    margin: 8px 14px 10px 0;
  }

  .mobile-nav a {
    color: #fff;
    border-bottom: 1px ridge #fff;
  }

  .close_btn {
    display: flex;
    justify-content: flex-end;
    margin: 10px;
    padding: 10px;
  }

  .Landing_Page {
    background-image: url("../images/mobile/home-background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hello {
    color: #ec5242;
    margin-top: 8rem;
    font-size: 1.5rem;
  }

  .Landing_Page h1 {
    color: #ec5242;
    margin: 0;
  }

  .message {
    color: rgb(98, 104, 105);
    margin: 0 20px 0 20px;
    background-color: #fff;
    text-align: center;
    font-size: small;
  }

  .place {
    text-align: center;
    color: #575757;
    padding: 0 60px 0 60px;
  }

  .date {
    font-weight: bolder;
    margin-bottom: 4px;
    color: #575757;
    text-decoration: underline;
  }

  .program-info-wraper {
    background-color: #fff;
    height: auto;
    padding-bottom: 30px;
    border-bottom: #e1e1e1 ridge 1px;
  }

  .program-info-wraper section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    height: auto;
  }

  .partner-section h2 {
    color: #e1e1e1;
  }

  .program-info-wraper section h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
  }

  .guide-bar {
    width: 53px;
    border-top: 1px solid #ef513c;
    margin: 16px auto 10px;
  }

  .program-info-wraper section .program-card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 8px;
    height: auto;
    overflow: auto;
    background: rgba(255, 255, 255, 0.1);
  }

  .program-card p {
    margin: 4px;
    color: #575757;
    display: flex;
    border: #8d8282 ridge 1px;
    text-align: center;
  }

  .program-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-img {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .background-color {
    background: rgb(255 0 0 / 51%);
    height: inherit;
    min-width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px 0 15px;
  }

  .partner-section {
    background-color: #333;
    height: auto;
    padding-bottom: 80px;
    border-bottom: #e1e1e1 ridge 1px;
  }

  .partner-section section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    height: auto;
  }

  .img {
    border: ridge 1px #ede8e8;
  }

  .img1 {
    background-image: url("../images/img01.jpg");
    height: 12rem;
  }

  .img2 {
    background-image: url("../images/img02.jpg");
    height: 12rem;
  }

  .partner-div {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .partner-div p {
    gap: 10px;
  }

  .mozilla {
    color: #dfdfdf;
    font-weight: 700;
  }

  .google {
    color: #8d8282;
    font-weight: 400;
    margin: 10px 10px 10px 10px;
  }

  .naver {
    color: #dfdfdf;
    font-weight: 700;
  }

  .last-footer {
    background-color: #fff;
    padding: 10px 10px 10px 10px;
    display: flex;
    gap: 75px;
    justify-content: center;
    align-items: center;
  }

  .last-footer-img img {
    height: 50px;
    width: 13rem;
  }

  .hide {
    display: none !important;
  }
}