@media screen and (max-width:1700px) {
   #slider-top .bg-img {
      height: 760px;
   }
}

@media screen and (max-width:1690px) {
   #banner-home .btn-floating {
       top: 520px !important;
   }
}

@media screen and (max-width:1441px) {
   .main-menu > nav > ul > li {
      margin: 0 11px;
   }

   .main-menu > nav > ul > li > a {
      font-size: 16px;
   }

   #banner-home .btn-floating {
       top: 450px !important;
   }

   .tp-btn {
       font-size: 14px;
       padding: 6px 28px;
    }

    .tp-upcoming-title {
       font-size: 60px;
    }

    .tp-upcoming-subtitle {
       font-size: 18px;
       font-weight: 400;
       line-height: 26px;
    }

    .tp-upcoming-gap {
       padding: 155px 0;
    }

    #slider-top .bg-img {
      height: 630px;
   }
   
   #slider-top .slide-part-1 {
      min-height: 260px;
   }

   #slider-top .slide-part-3 {
      min-height: 137px; 
   }
   
   #slider-top .slide-part-2,
   #slider-top .slide-part-4 {
      min-height: 120px;
   }

   #slider-top .slide-part-3 .slide-pattern {
      top: -101%;
   }
}


@media screen and (max-width:1300px) {
   #slider-top h2 {
      font-size: 25px;
      line-height: 37px;
   }

   #slider-top .slide-part-1 {
      min-height: 190px;
   }

   #slider-top .slide-desc p {
      font-size: 16px;
      line-height: 24px;
   }

   #slider-top .slide-part-2, #slider-top .slide-part-4 {
      min-height: 90px;
   }

   #slider-top .slide-part-3 {
      min-height: 99px;
   }

   #slider-top .slide-part-3 {
      min-height: 99px;
   }

   #slider-top .slide-part-3 img {
      width: 120px;
   }

   #slider-top .slide-part-3 .slide-pattern {
      top: -90%;
   }

   #ecosystem .desc {
      width: 80%;
   }
}


@media screen and (max-width:1200px) {
   #banner-home .btn-floating {
       top: 380px !important;
   }

   #ecosystem .eco-head .item-img > div {
      height: 80px;
   }

   #ecosystem .eco-head .desc {
      width: 100%;
   }
   
   #divider .sect-content {
      width: 70%;
   }
   
   .featured-exh .item {
      padding: 40px;
   }
   
   .featured-exh .item .item-top, .featured-exh .item .item-bottom {
      gap: 20px;
   }
   
   .featured-exh .item .item-bottom {
      margin-top: 20px;
   } 
   
   .featured-exh .item-img > div {
      height: 101px;
   }

   .featured-exh .item {
      width: 100%; 
   }

   .footer2 .bottom-1 ul li img {
      width: 300px;
   }

   .footer2 .btn-foot {
      height: 40px;
      font-size: 14px;
   }

   #ecosystem .eco-head .item-inner {
      margin: 0 auto;
   }


   .value-chain-section{
      flex-direction:column;
      align-items:flex-start;
  }

  .value-chain-section .content-right{
      width:100%;
  }
}

@media screen and (max-width:1024px) {
   #slider-top {
      margin-top: 87px;
   }

   #regist-wrapper .media-card {
      width: 100%;
      height: 240px;
   }

   #regist-wrapper .media-grid {
    grid-template-columns: repeat(1, 1fr);
   }
}

@media screen and (max-width:991px) {

   .narrative-section .main-title{
      font-size:110px;
      line-height:82px;

      letter-spacing:-5px;
  }


   #banner-home .inner {
       flex-wrap: wrap !important;
   }

   #banner-home .bg-img {
       width: 100%;
   }

   #navbar .logo-co-loc {
       width: 150px !important;
   }

   
   #navbar {
       font-size: 12px;
   }

   #navbar p {
       margin-bottom: 0;
       font-size: 12px;
   }

   #navbar .logo {
       width: 50px !important;
   }

   #navbar .inner .left, #navbar .inner .right {
       flex-wrap: wrap;
       gap: 0px !important; 
   }

   #navbar .inner .right {
       justify-content: end;
       text-align: end;
   }

   .page-title {
       width: auto !important;
   }

   .list-pertanyaan .d-flex {
       flex-wrap: wrap !important;
   }

   .list-pertanyaan .d-flex > div {
       width: 100% !important;
   }

   .mob-mb8 {margin-bottom: 8px;}
   .mob-mb22 {margin-bottom: 22px;}

   .tp-instructor-wrap {
       position: unset;
   }

   .tp-instructor-title {
       color: var(--tp-heading-primary) !important;
   }
   
   .tp-profile-social a {
       color: var(--tp-heading-primary) !important;
       border: 1px solid var(--tp-heading-primary) !important;
   }  

   .tp-instructor-content {
       margin-top: 14px;
   }

  .tp-instructor-avatar img {
       height: 60px !important;
       width: 60px !important;
   }

   #user-banner .tp-dashboard-banner-bg {
       overflow: unset;
       box-shadow: unset !important;
   }

   .tp-dashboard-banner-bg::after {
       display: none;
   }

   .tp-profile-social {
       margin-top: 0px;
   }

   .tp-instructor-info {
       flex-wrap: unset !important;
   }

   .tp-instructor-avatar {

       height: 80px;
       width: 80px;
       background: #fff !important;
       padding: 10px;
       border-radius: 50%;
   }

   .tp-dashboard-banner-wrap {
       padding-bottom: 30px !important;
   }
   
   .tp-instructor-wrap { 
       transform: translateY(17px) !important; 

   }
   .tp-instructor-avatar::after {
       width: 60px !important;
       height: 60px !important;
       background-size: contain !important;
       border-radius: unset !important;
       margin: 0 auto;
       
   }

   .tp-instructor-wrap {
       padding: 0 !important;
   }

   .tp-instructor-avatar {
      padding: 0 !important;
   }

   .tp-instructor-avatar,
   .tp-instructor-avatar img {
      height: 60px !important;
      width: 60px !important;
  }

   .tp-dashboard-banner-bg::after {
      display: none;
  }

  .tp-profile-social {
      margin-top: 0px;
  }

  .tp-instructor-info {
      flex-wrap: unset !important;
  }

  .tp-instructor-avatar {

      height: 80px;
      width: 80px;
      background: #fff !important;
      padding: 10px;
      border-radius: 50%;
  }

  .tp-dashboard-banner-wrap {
      padding-bottom: 30px !important;
  }
  
  .tp-instructor-wrap { 
      transform: translateY(17px) !important; 

  }
  .tp-instructor-avatar::after {
      width: 60px !important;
      height: 60px !important;
      background-size: contain !important;
      border-radius: unset !important;
      margin: 0 auto;
      
  }

  .tp-instructor-wrap {
      padding: 0 !important;
      top: 60px;
  }

   #user-banner .tp-dashboard-banner-bg {
      overflow: unset;
      box-shadow: unset !important;
      margin-top: 80px !important;
  }

    .title-50 {
       font-size: 30px;
       line-height: 40px;
    }

    .desc-22, .desc-22 p {
       font-size: 18px;
       line-height: 27px;
    }

    #ecosystem .desc {
       width: 100%;
    } 
    
    #divider {
       min-height: 274px;
    }

    #divider .sect-content {
       width: 100%;
    }

    #divider h3 {
       font-size: 25px;
       line-height: 34px;
    }

    .footer2 .bottom-1 ul {
       flex-wrap: wrap;
    }

    .footer2 .bottom-1 ul .item:nth-child(1) {
       width: 100%;
    }

    .footer2 .bottom-1 ul li img {
       width: 200px;
    } 

    .footer2 .btn-foot {
       margin: 50px auto 0;
    }
}



@media screen and (max-width:820px) {
   #banner-home .btn-floating {
       top: unset !important;
       bottom: 20% !important;
   }

   .tp-upcoming-title {
       font-size: 40px;
   }

   .tp-upcoming-subtitle {
       font-size: 16px; 
       line-height: 24px;
   }
}

@media screen and (max-width:768px) {
   .value-chain-section{
      padding:35px 24px;
  }

  .value-chain-section .main-title{
      font-size:48px;
      line-height:50px;
  }

  .value-chain-section .description{
      font-size:17px;
      line-height:32px;
  }

  .value-chain-section .content-right{
      flex-direction:column;
  }

  .value-chain-section .info-card{
      width:100%;
      height:170px;
  }

  .value-chain-section .card-value{
      font-size:48px;
  }

   .narrative-section .main-title{
      font-size: 58px;
      line-height: 50px;
      letter-spacing:-3px;

      margin-bottom:35px;
  }

  .narrative-section .description{
      font-size:18px;
      line-height:26px;
  }

  .narrative-section .read-link {
      font-size: 14px;
  }

  .narrative-section {
      padding-top: 0px;
  }
  
   
   .visa-wrapper    .page-title{
      font-size:38px;
      line-height:46px;
  }

  .visa-wrapper .status-label{
      font-size:18px;
      line-height:28px;
  }

  .visa-wrapper  .status-badge{
      width:100%;

      text-align:center;

      font-size:20px;
  }

  .visa-wrapper  .status-desc{
      font-size:16px;
      line-height:30px;
  }

   .footer-detail {
      padding-top: 30px;
   }

   #slider-top .item {
      padding-bottom: 250px;
      position: relative;
   }

   #slider-top .slide-inner {
      flex-wrap: wrap;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0px;
   }

   #slider-top .left-part,
   #slider-top .right-part {
      width: 100%;
   }

   #slider-top .slide-part-3 img {
      display: none;
   }

   #slider-top .right-part {
      flex-wrap: wrap;
   }

   #slider-top .right-part .right-part-1 {
      width: 50%;
   }

   #slider-top .right-part .right-part-2 {
      width: 50%;
   }

   #slider-top .slide-part-4 {
      width: 100%;
   }

   #slider-top .right-part {
      align-items: start;
   }

   #slider-top .slide-part-2 {
      min-height: 99px;
   }
}

@media screen and (max-width:600px) {
   .page-title {
      font-size: 20px;
      line-height: 25px;
   }

   input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea, .form-select, .form-control {
      min-height: 44px;
   }

   .main-title{
      font-size:56px;
      line-height:48px;
  }

  .description{
      font-size:18px;
      line-height:30px;
  }

      .form-select, 
      input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea {
          height: 44px;
          line-height: 33px;
          font-size: 14px;
      }

      .open-popup {
          padding: 12px 26px;
          height: 54px;
      }

      .reg-submit {
          padding: 16px 35px;
      }

      .event-wrapper {
      flex-wrap: wrap;
      }
      .event-wrapper > div {
          width: 100%;
      }

  
   #banner-home .btn {
       width: 200px;
       font-size: 12px;
   } 
    

   .tp-instructor-wrap {
       display: none !important;
   }

   .footer2 .top-2 img {
      width: 220px;
      max-width: 100%;
   } 

   .footer2 .bottom-1 ul {
      flex-wrap: wrap;
      row-gap: 10px;
      column-gap: 20px;
   }

   .footer2 .bottom-1 ul li img {
      width: 100%;
   }

   .title-50,
   .footer2 h2 {
      font-size: 22px;
      line-height: 27px;
   }

   .desc-22, .desc-22 p {
      font-size: 14px;
      line-height: 20px;
   }

   #ecosystem {
      padding-top: 40px;
   }
   #ecosystem .desc {
      margin-top: 0px;
   }

   .tp-campus-choose-content {
      margin-bottom: 20px;
   }

   .footer2 .top-1 {
      padding-bottom: 30px;
   }

   .footer2 .top-2 {
      padding-bottom: 30px;
   }

   .footer2 .top-1 p {
      font-size: 16px;
      line-height: 25px;
      width: 100%;
   }

   .footer2 h4 {
      font-size: 18px;
   }

   .footer2 .copyright p {
      font-size: 12px;
      line-height: 20px;
      margin: 0;
   }

   .footer2 .bottom-2 {
      padding: 16px 0 13px;
   }

   .footer2 .bottom-1 {
      padding: 30px 0;
   }

   .footer2 .btn-foot {
      width: 200px;
      margin: 40px auto 0;
   }

   .footer2 .footer-top {
      padding-top: 60px;
   }

   .tp-header-logo img {
      width: 230px !important;
   }

   #slider-top {
      margin-top: 67px;
   }

   #ecosystem .eco-head .item-img > div {
      height: 130px;
   }

   #ecosystem .eco-head .item-inner {
      width: 100%;
   }

   #ecosystem .item .title {
      font-size: 22px;
   }

   #ecosystem .item .sub {
      font-size: 18px;
      margin-top: 10px;
   }

   #divider h3 {
      font-size: 18px;
      line-height: 25px;
   }

   #divider {
      min-height: 220px;
   }

   .featured-exh .item {
      padding: 20px;
   }

   .featured-exh .item .item-top, .featured-exh .item .item-bottom {
      flex-wrap: wrap;
   }

   .featured-exh .item .item-title, .featured-exh .item .item-info,
   .featured-exh .item .item-cta, .featured-exh .item .item-img {
      width: 100%;
   }

   .desc-16, .desc-16 p {
      font-size: 14px;
      line-height: 20px;
   }

   .featured-exh .main-title {
      font-size: 20px;
      margin-bottom: 10px;
   }

   .featured-exh .item-cta a {
      font-size: 14px;
      height: 35px;
      width: 150px;
   }

   .footer-pattern {
      height: 80px !important;
   }

   #slider-top .right-part .right-part-2,
   #slider-top .right-part .right-part-1 {
      width: 100%;
   }

   #slider-top .slide-part-1 {
      padding: 0 31px;
   }

   #slider-top .slide-part-2 {
      min-height: 68px;
      justify-content: start;
      padding: 0 31px;
   }

   #slider-top .slide-part-3,
   #slider-top .slide-part-4 {
      padding: 0 31px;
   }

   #slider-top .item {
      padding-bottom: 400px;
   }

   #slider-top .bg-img {
      height: 200px;
   }

   #slider-top .slide-part-1 {
      min-height: 150px;
   }

   #slider-top h2 {
      font-size: 22px;
      line-height: 33px;
   }

   .button-question div {
     width: 100%;
 }

 .container.v2 {
     width: 90%;
 }

 /* .mob-form-margin {
     margin-bottom: 10px;
 } */

 .btn-large {
   padding: 15px 35px !important;
 }

}


@media screen and (max-width:320px) {
   .tp-header-logo img {
      width: 180px !important;
   }
}