@media (min-width: 1200px) {
  .hero_area {
    height: 100vh;
    background-size: cover;
  }
  .container {
    max-width: 1170px;
  }

  .event {
    height: 800px;
  }

  .hidediv {
    background-color: transparent;
    width: 100%;
    height: 49%;
    position: absolute;
  }

  .hidediv2 {
    background-color: transparent;
    width: 100%;
    height: 48%;
    position: absolute;
    bottom: -81px;
    display: block;
  }

  .slider_section .detail-box h1 {
    font-size: 3rem;
    letter-spacing: 1px;
  }

  .intro_video {
    max-height: 760px;
  }

}

@media (max-width: 1120px) {
  .event {
    height: 1080px;
  }
  .hero_area {
    height: 45vh;
    background-size: 1100px;
  }
  .slider_section .detail-box h1 {
    font-size: 2.5em;
  }

}

@media (max-width: 992px) {
  .hero_area {
    height: 60vh;
    background-size: 990px;
  }

  header.header_section {
    padding-top: 10px;
  }

  .navbar-nav {
    align-items: center;
    padding-top: 10px;
  }

  .custom_nav-container .navbar-toggler {
    margin-right: -15px;
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 15px;
    margin: 5px 0;
  }

  .custom_nav-container .form-inline {
    padding: 0;
    justify-content: center;
  }

  .custom_nav-container .nav_search-btn {
    background-position: center;
  }

  .slider_section .detail-box {
    margin-top: 75px;
  }

  .slider_section .detail-box h1 {
    font-size: 2rem;
    letter-spacing: 0.5rem;
  }

  .slider_section .carousel-indicators {
    bottom: 25px;
  }

  .special_section .special_container {
    flex-direction: column;
  }

  .special_section .special_container .box {
    padding: 15px 0;
  }

  .special_section .special_container .box.b2 {
    border: none;
    border-top: 1px solid #4e6e6f;

    border-bottom: 1px solid #4e6e6f;
  }

  .course_section .side_img {
    width: 25px;
  }

  .event_section .event_container {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .event_section .event_container .box {
    flex-direction: column;
    margin: 15px 5px;
  }

  .event_section .event_container .box .detail-box {
    padding: 15px;
    border: none;
    border-top: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
  }

  .event_section .btn-box {
    justify-content: center;
  }

  .contact_section::before {
    width: 53%;
  }

  .event {
    height: 930px;
  }

  .header_section .container-fluid {
    height: 57px;
  }

  .navbar-collapse .ml-auto .collapse .show {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
  }

}

@media (max-width: 768px) {
  .hero_area {
    height: 41vh;
    background-size: 768px;
  }

  .slider_section .detail-box h1 {
    font-size: 2em;
    letter-spacing: 0.1rem;
  }

  .info_section .info_form .social_box {
    justify-content: center;
  }

  .info_section .info_form .social_box a {
    margin: 0 10px;
  }

  .footer_section p {
    padding: 20px 30px;
  }

  .about_section .side_img {
    width: 25px;
  }

  .course_section .course_container .course_content .box {
    -ms-flex-preferred-size: 45%;
    flex-basis: 46%;
    margin: 2%;
  }

  .course_section .course_container .course_content .box h5 {
    font-size: 20px;
    left: 15px;
    bottom: 5px;
  }

  .course_section .course_container .course_content .box a {
    left: 15px;
    bottom: 75px;
  }

  .login_section .detail-box {
    margin-bottom: 45px;
  }

  .client_section #carouselExampleControls {
    flex-direction: column;
    align-items: center;
  }

  .client_section #carouselExampleControls .btn-box {
    flex-direction: row;
    width: 100px;
    justify-content: space-between;
    margin-top: 25px;
  }

  .contact_section .detail-box {
    text-align: center;
    width: auto;
    margin: 45px;
  }

  .contact_section .detail-box .heading_container {
    align-items: center;
  }

  .contact_section::before {
    width: 100%;
    height: 25%;
    clip-path: polygon(0% 5%, 100% 5%, 85% 100%, 15% 100%);
  }

  .info_section .row > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .info_section .info_course {
    margin: 35px 0;
  }

  .info_section .info_news .info_contact {
    align-items: center;
  }

  .event {
    height: 700px;
  }

  .header_section .container-fluid {
    height: 57px;
  }


}

@media (max-width: 576px) {
  .hero_area {
    height: 33vh;
    background-size: 570px;
  }
  .slider_section .detail-box h1 {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }

  .course_section .course_container .course_content .box {
    flex-basis: 92%;
  }

  .course_section .side_img {
    width: 20px;
  }

  .event_section .event_container {
    display: flex;
    justify-content: space-between;
  }

  .event_section .event_container {
    flex-direction: column;
    align-items: center;
  }

  .client_section .box {
    flex-direction: column;
    align-items: center;
  }

  .contact_section::before {
    clip-path: polygon(0% 2%, 100% 2%, 85% 100%, 15% 100%);
  }

  .event {
    height: 530px;
  }

  .header_section .container-fluid {
    height: 57px;
  }

  .profileImageBox {
    flex-basis: 48%!important;
  }
}

@media (max-width: 480px) {
  .hero_area {
    height: 29vh;
    background-size: 470px;
  }
  .special_section .special_container .box .detail-box h4 {
    font-size: 1.2rem;
  }

  .slider_section .detail-box h1 {
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-top: -93px
  }

  .slider_section .detail-box a {
    padding: 8px 35px;
  }

  .about_section .side_img {
    width: 20px;
  }

  .about_section .detail-box {
    margin-top: 35px;
  }

  .event {
    height: 430px;
  }

  .header_section .container-fluid {
    height: 57px;
  }

  .profileImageBox {
    flex-basis: 48%!important;
  }
}

@media (max-width: 400px) {
  .hero_area {
    height: 23vh;
    background-size: 390px;
  }
  .slider_section .detail-box h1 {
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-top: -93px
  }

  .event {
    height: 350px;
  }

  .header_section .container-fluid {
    height: 57px;
  }

  .profileImageBox {
    flex-basis: 50%!important;
  }
}

@media (max-width: 360px) {
  .hero_area {
    height: 21vh;
    background-size: 350px;
  }

  .slider_section .detail-box h1 {
    font-size: 1rem;
    letter-spacing: 1px;
    margin-top: -93px
  }

  .contact_section::before {
    height: 26%;
  }

  .event {
    height: 300px;
  }

  .header_section .container-fluid {
    height: 57px;
  }

  .navbar-collapse .ml-auto .collapse .show {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
  }

  .profileImageBox {
    flex-basis: 55%!important;
  }
}