@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,400;1,700&display=swap");

* {
  padding: 0;
  margin: 0;
  font-family: "lato", sans-serif;
}

body {
  background-color: #d3d3d3;
}

a {
  text-decoration: none;
}

.link:hover,
.link-1,
.hello,
.sub-title,
.logo,
#first-icons:hover,
.section-title {
  color: #ec5242;
}

@media (max-width: 1024px) {
  .logo,
  #first-nav-bar,
  .second-one,
  .forth-nav,
  #partner,
  #footer,
  .hamburger-container,
  .middle {
    display: none;
  }

  .hamburger {
    padding: 30px 0 0 20px;
  }

  .hamburger-container {
    background-color: #d3d3d3;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .extended {
    display: block;
  }

  .main {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-style: normal;
    gap: 50px;
    padding: 10px 10px;
    transition: ease-in-out 1s;
  }

  .menu {
    color: #272a31;
    list-style: none;
    text-align: left;
    padding: 10px;
    margin: 10px;
  }

  .close {
    margin: 30px;
    display: flex;
    justify-content: end;
  }

  .heading {
    background-image: url("./images/background.png");
    background-repeat: no-repeat;
    background-color: #d3d3d3;
  }

  .hello {
    font-size: 30px;
    padding: 150px 0 0 20px;
  }

  .sub-title {
    font-size: 40px;
    padding-left: 20px;
  }

  .description {
    color: #272a31;
    font-size: 16px;
    text-align: left;
    width: 80%;
    margin: 0 20px;
    padding: 10px;
    border: 3px solid white;
  }

  .date {
    font-size: 30px;
    padding-left: 20px;
    color: #3b3b3b;
    font-weight: bolder;
  }

  .location {
    font-size: 18px;
    padding-left: 20px;
    color: #3b3b3b;
  }

  #main-pro {
    display: flex;
    flex-direction: column;
    background-color: #272a31;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%2321242d' fill-opacity='1' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z'%3E%3C/path%3E%3C/svg%3E");
    color: rgb(211, 211, 211);
    padding-bottom: 5%;
  }

  .sections-title {
    text-align: center;
    color: white;
    padding-top: 50px;
  }

  .sections-title::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 20%;
    padding-top: 1rem;
    border-bottom: 2px solid #ec5242;
  }

  .sections {
    display: grid;
    margin: 0 20px;
    justify-content: center;
  }

  #main-pro .sub-section {
    display: flex;
    justify-content: stretch;
    align-items: center;
    margin-bottom: 20px;
    padding: 1rem;
    gap: 0.5rem;
    text-align: start;
    background-color: #fcfcfc1f;
  }

  .sub-image {
    width: 50px;
  }

  .section-title {
    color: #ec5242;
    font-weight: bold;
  }

  #main-pro .sub-description {
    font-size: 15px;
    color: white;
  }

  #see-pro {
    color: #d3d3d3;
    width: 60%;
    text-align: center;
    margin: auto;
    border: 1px solid #ec5242;
    background-color: #ec5242;
    padding-top: 15px;
    height: 30px;
    margin-bottom: 30px;
  }

  .feature-speaker-container {
    background-color: white;
    padding: 0 10%;
  }

  .feature-box-container {
    display: grid;
    gap: 20px;
    justify-content: center;
    padding: 20px 0 50px;
  }

  .featuring {
    text-align: center;
    font-size: 30px;
    margin-top: 0;
    padding-top: 40px;
  }

  .featuring::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 8%;
    padding-top: 1rem;
    border-bottom: 2px solid #ec5242;
  }

  .feature-box {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    min-height: 100px;
  }

  .speaker-image {
    width: 100%;
    position: relative;
  }

  .bottom-image {
    width: 100%;
    height: 100%;
  }

  .feature-box-text {
    color: #272a31;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
  }

  .feature-box-text1 {
    color: red;
    font-size: 14px;
    border-bottom: 1px solid grey;
    margin-right: 50px;
    margin-bottom: 5px;
  }

  .feature-box-text2 {
    color: #272a31;
    font-size: 12px;
  }
}

@media (min-width: 1025px) {
  .hamburger,
  .hamburger-container {
    display: none;
  }

  .header {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 5px 200px;
    gap: 20px;
    background-color: #272a31;
  }

  #first-icons {
    text-decoration: none;
    font-size: 14px;
    transition: ease-in-out 0.5s;
  }

  .logo {
    font-weight: bold;
    font-size: 24px;
    margin-left: 95px;
  }

  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 5px;
  }

  .second-one {
    display: flex;
    list-style: none;
    gap: 30px;
    margin-right: 200px;
  }

  .link,
  .link-1 {
    color: #272a31;
    font-size: 18px;
    transition: ease-in-out 0.5s;
  }

  .heading {
    background-image: url("./images/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fcfcfcd8;
  }

  .hello {
    font-size: 50px;
    padding-top: 90px;
  }

  .sub-title {
    font-size: 70px;
    font-weight: bolder;
    width: 60%;
  }

  .description {
    font-size: 16px;
    text-align: justify;
    margin-left: 90px;
    width: 45%;
    padding: 15px;
    border: 3.5px solid white;
  }

  .date {
    font-size: 30px;
    font-weight: bold;
  }

  .location {
    font-size: 20px;
    padding-bottom: 30px;
  }

  .description,
  .date,
  .location {
    color: #272a31;
  }

  .hello,
  .sub-title,
  .location,
  .date {
    margin-left: 90px;
    text-align: left;
  }

  #main-pro {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%2321242d' fill-opacity='1' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z'%3E%3C/path%3E%3C/svg%3E");
    background-color: #272a31;
    padding-bottom: 5%;
  }

  .sub-image {
    width: 70px;
    height: 50px;
  }

  h2 {
    text-align: center;
    font-size: 25px;
    color: white;
    padding-top: 40px;
    margin: 0 50px;
  }

  h2::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 6%;
    padding-top: 1rem;
    border-bottom: 3px solid #ec5242;
  }

  .sections {
    display: flex;
    margin: 0 20px;
    justify-content: center;
    gap: 10px;
  }

  .sub-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fcfcfc1f;
    width: 140px;
    padding: 12px;
  }

  .sub-section:hover {
    border: 3px solid #fcfcfc;
  }

  .section-title {
    font-size: 22px;
    text-align: center;
    padding: 7px 0;
  }

  .sub-description {
    font-size: 14px;
    text-align: center;
    padding-bottom: 10px;
  }

  #see-pro {
    display: flex;
    margin-top: 50px;
    justify-content: center;
  }

  #first-icons,
  .sub-description,
  #see-pro {
    color: #d3d3d3;
  }

  .feature-speaker-container {
    background-color: white;
  }

  .feature-box-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-content: center;
    margin-left: 9%;
    padding: 20px 0 90px;
  }

  .featuring {
    text-align: center;
    font-size: 40px;
    padding-top: 40px;
  }

  .featuring::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 6%;
    padding-top: 1rem;
    border-bottom: 2px solid #ec5242;
  }

  .feature-box {
    display: flex;
    gap: 20px;
    min-height: 180px;
  }

  .speaker-image {
    width: 30%;
    position: relative;
  }

  .bottom-image {
    width: 100%;
    height: 100%;
  }

  .feature-box-text {
    color: #272a31;
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
  }

  .feature-box-text1 {
    color: red;
    font-size: 14px;
    border-bottom: 1px solid grey;
    margin: 0 50px 5px 0;
  }

  .feature-box-text2 {
    color: #272a31;
    font-size: 12px;
    width: 300px;
  }

  #partner {
    background-color: #272a31;
  }

  .partner-title {
    text-align: center;
    color: white;
    font-size: 40px;
    padding: 20px 0;
    margin: 0 70px;
  }

  .partner-title::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 6%;
    padding-top: 1rem;
    border-bottom: 2px solid #ec5242;
  }

  .partner-list {
    width: 50px;
  }

  .partner-lists {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 40px;
    list-style: none;
    opacity: 0.5;
    padding-bottom: 40px;
    gap: 40px;
  }

  .middle {
    color: #272a31;
    font-size: 17px;
    padding: 20px 0;
    text-align: center;
  }
}