@media (max-width: 1280px) {

  #section-home .hero-wrapper .hero-title .bottom-title,
  #section-home .hero-wrapper .hero-title .upper-title {
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .navbar {
    background: #000;
  }

  .desktop-only {
    display: none !important;
  }

  .pre-title {
    display: block;
    margin: auto;
    text-align: center;
    width: 50%;
    margin-top: 15px;
  }

  /* #section-home .hero-wrapper {
    height: 50vh;
  } */

  h2 {
    text-align: center;
  }

  h2:after {
    margin: auto;
    margin-top: 15px;
  }

  .pull-right {
    align-items: center;
  }

  #section-project {
    text-align: left;
  }

  .section-footer .app-logo img {
    width: 100%;
    display: flex;
    margin: 15px auto 30px;
    float: unset;
  }

  .section-footer .app-logo {
    width: 100%;
  }

  #section-home .hero-wrapper .heart-rate {
    transform: scale(0.6);
  }
}

@media (max-width: 1199px) {
  #section-about .img-wrapper .img4 {
    position: absolute;
    height: 362px;
    right: 30px;
    top: -150px;
  }

  #section-about .img-wrapper .img3 {
    position: absolute;
    height: 230px;
    left: 0px;
    bottom: 180px;
  }

  #section-project .img-wrapper .img1 {
    position: absolute;
    left: 36px;
    bottom: 106px;
    height: 183px;
    transform: rotate(18deg);
  }

  #section-project .img-wrapper .img2 {
    position: absolute;
    left: 174px;
    height: 300px;
    bottom: 50px;
  }

  #section-project .img-wrapper .img3 {
    position: absolute;
    right: 80px;
    height: 350px;
    transform: rotate(-15deg);
    top: 74px;
  }

  #section-home {
    height: auto;
  }

  #section-home h1 {
    font-size: 48px;
  }

  .navbar-brand {
    margin-right: 5px !important;
  }

  .navbar .navbar-nav .nav-link {
    font-size: 14px;
  }

  .navbar .auth-btn .btn {
    padding: 5px 20px;
  }
}

@media (max-width: 768px) {
  .navbar .navbar-brand .school-name {
    display: inline;
  }

  #section-osis .owl-carousel .item .card {
    width: 80%;
    display: flex;
    margin: auto;
  }

  #section-osis .owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  #section-osis .owl-carousel .owl-nav button.owl-prev {
    left: 0;
  }

  #section-program .owl-carousel .owl-nav button.owl-next {
    right: -15px;
  }

  #section-program .owl-carousel .owl-nav button.owl-prev {
    left: -15px;
  }

  #section-gallery .masonry-container {
    columns: 2;
  }

  .mobile-only {
    display: block !important;
  }

  h2 {
    font-size: 1.5rem;
  }

  .navbar.navbar-transparent {
    padding: 15px;
  }

  section {
    padding: 60px 0 30px 0;
  }

  #section-home {
    height: unset;
  }

  #section-home p {
    text-align: center;
  }

  #section-home .btn-main {
    margin: auto;
    display: flex;
    width: fit-content;
  }

  #section-about {
    padding-top: 60px;
  }

  .section-footer {
    padding: 30px 0;
  }

  #section-about .about__img {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .section-footer ul.footer-link {
    width: fit-content;
    direction: unset;
    list-style-type: none;
    margin: 0 auto 30px;
    padding: 0;
  }

  .section-footer ul.footer-link li {
    text-align: center;
    text-indent: -5px;
  }

  .section-footer .copyright-text {
    margin-right: 30px;
    text-align: center;
    display: block;
  }

  #section-home .hero-wrapper .hero-title .img-title {
    width: 60vw;
  }

  .section-footer .app-logo img {
    width: 100px;
  }

  #section-home .owl-carousel .owl-item .item .banner-text {
    bottom: 90px;
  }

  #section-about .about__img {
    width: 80%;
    height: 330px;
  }

  #section-about .about__img img#img-1 {
    left: -30px;
  }

  h2 {
    text-align: center;
  }

  h2:after {
    margin: 15px auto;
    display: flex;
  }

  #section-home .owl-carousel .owl-item .item .banner-item {
    height: 100vh;
  }

  #section-home .owl-carousel .owl-item .item .banner-text {
    width: 100%;
  }

  #section-home .owl-carousel .owl-item .item .banner-text .banner-title {
    font-size: 32px;
  }

  #section-program .owl-carousel .item .img-program {
    height: 180px;
    margin-bottom: 15px;
  }

  #section-program .owl-carousel .item h5 {
    font-size: 24px;
    text-align: center;
  }

  #section-program .owl-carousel .item h5:after {
    display: none;
  }

  #section-program .owl-carousel .item p {
    text-align: center;
  }

  #section-osis .owl-carousel .item .card {
    width: 100%;
  }

  #section-osis .owl-carousel .item .card .card-img {
    border-radius: 15px 15px 0 0;
  }

  .section-footer {
    text-align: center;
  }

  .navbar.scrolled {
    padding: 10px 15px;
  }

  .text-content {
    display: none;
  }

  #portfolio__1-1 {
    background: url("../img/portfolio/beras-rania@mobile.jpg")
  }

  #portfolio__1-2 {
    background: url("../img/portfolio/Portofolio_POTATOQ-POTATO-CHIPS2-mobile.jpg")
  }

  #portfolio__1-3 {
    background: url("../img/portfolio/nutririce@mobile.jpg")
  }

  #portfolio__1-4 {
    background: url("../img/portfolio/FS.jpg")
  }

  #portfolio__1-5 {
    background: url("../img/portfolio/Portofolio_AICE_mobile.jpg")
  }

  #portfolio__1-6 {
    background: url("../img/portfolio/Portofolio_SHARON-WOOL-mobile.jpg")
  }

  #portfolio__1-7 {
    background: url("../img/portfolio/karmellow.jpg")
  }

  #portfolio__2-1 {
    background: url("../img/portfolio/IceCream1.jpg")
  }

  #portfolio__2-2 {
    background: url("../img/portfolio/mochi.jpg")
  }

  #portfolio__2-3 {
    background: url("../img/portfolio/lollybear.jpg")
  }

  #portfolio__2-4 {
    background: url("../img/portfolio/IceCream2.jpg")
  }

  #portfolio__3-1 {
    background: url("../img/portfolio/arjuna.jpg")
  }

  #portfolio__3-2 {
    background: url("../img/portfolio/mrbro.jpg")
  }

  #portfolio__3-3 {
    background: url("../img/portfolio/IbuMuda.jpg")
  }

  #portfolio__3-4 {
    background: url("../img/portfolio/sparker.jpg")
  }

  #portfolio__3-5 {
    background: url("../img/portfolio/duomaskot.jpg")
  }

  #portfolio__4-1 {
    background: url("../img/portfolio/JVJ.jpg")
  }

  #portfolio__4-2 {
    background: url("../img/portfolio/SAG.jpg")
  }

  #portfolio__4-3 {
    background: url("../img/portfolio/ABA.jpg")
  }

  #portfolio__4-4 {
    background: url("../img/portfolio/WJS.jpg")
  }

  #portfolio__5-1 {
    background: url("../img/portfolio/Kalender.jpg")
  }

  #portfolio__5-2 {
    background: url("../img/portfolio/IMLEK.jpg")
  }

  #portfolio__5-3 {
    background: url("../img/portfolio/BORCHURE.jpg")
  }

  #portfolio__5-4 {
    background: url("../img/portfolio/HBS.jpg")
  }

  #portfolio__5-5 {
    background: url("../img/portfolio/shabab.jpg")
  }
}

/*# sourceMappingURL=mobile.css.map */