/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media screen and (min-width: 2500px) {

  /* CSS */

  .social_wrap {
    bottom: 3%;
  }

  .service_wrap {
    bottom: 15%;
  }

  .stories .our_story_seoWrap_text p,
  .our_story_seoWrap_text p {
    font-size: 2.5rem;
  }

  .stories .our_story_seoWrap_title,
  .our_story_seoWrap_title {
    font-size: 3rem;
  }

  .our_story_seoWrap_text ul {
    font-size: 3rem;
  }

  .services h3.main-title {
    font-size: 2.8rem;
  }

  .services h3 {
    font-size: 3rem;
  }

  .services h4 {
    font-size: 2.6rem;
  }

  .services p {
    font-size: 2.3rem;
  }

  .what-we-do h3 {
    font-size: 2.8rem;
    font-weight: bold;
  }

  .what-we-do p {
    font-weight: 300;
    color: #1a1a1a;
    font-size: 2.3rem;
  }



  .timeline-nav {
    top: 78%;
  }

  .stories_timeline {
    top: 80%;
    left: 92%;
  }

  .we-do-it h3 {
    font-size: 2.8rem;
    font-weight: bold;
  }

  .we-do-it p,
  .nice-words .clients-name {
    font-size: 2.5rem;
  }

  .we-do-it .grow-timeline {

    top: 18%;
  }


  .nice-words h3 {
    font-size: 2.8rem;
    font-weight: bold;
  }

  .nice-words p {
    font-size: 4.3em;
  }

  .our-works .arrow {
    left: 20%;
  }

  .our-works .arrow .right-btn,
  .our-works .arrow .prev-btn {
    height: 250px;
  }

  .about_us p {
    font-size: 2.4em;
  }

  .about_us h2 {
    font-size: 7em;
  }

  .usa .services .menu>li {
    font-size: 2.5em;
  }

  .nav_container {
    width: 94%;
  }

}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1470px) {

  /* CSS */
  .h2,
  h2 {
    font-size: 35px;
  }

  .wrapper p {
    font-size: 1.3rem;
  }

  .what-we-do h3 {
    font-size: 1.8rem;
  }

  .what-we-do p {
    font-size: 1.3rem;
  }

}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {

  /* CSS */

  .home_slider .hero-text {
    font-size: 3em;
  }
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  /* CSS */



}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {

  /* CSS */

}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {

  /* CSS */

}

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

  .content {
    padding: 30px;
  }

  .wrapper {
    height: 100% !important;
    margin: 30px !important;
    padding-top: 0 !important;
  }

  .small_menu .small_menu_btn__wrapper {
    position: fixed;
    width: 30px;
    top: 28px;
    right: -7px;
    height: 30px;
    border: 1px red;
    padding-top: 12px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    cursor: pointer;
  }

}

@media (max-width: 480px) {

  .our_story_seoWrap_title {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
  }

  .our_story_seoWrap_text ul {
    font-size: 1.2rem;
  }

  .stories .our_story_seoWrap_text p {
    margin-top: 20px;
  }

  ul.nav_menu {
    grid-template-columns: auto;
    padding-left: 10px;
  }

  .nav_container .nav_menu__container .nav_menu .nav_menu__item {
    font-size: 24px;
    padding: 10px 0;
    margin: 0;
  }

  .nav_container .nav_menu__container .nav_menu .nav_menu__item a {
    font-weight: 400;
    text-transform: initial
  }

  .nav_menu__item:nth-child(7),
  .nav_menu__item:nth-child(9) {
    display: none
  }

  .nav_menu__item .sub-menu {
    position: relative;
  }

  .nav_container {
    background-color: #52bcc8;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .nav_container .nav_menu__container {
    padding: 0 120px;
    margin-top: 13%;
  }

  .nav_container .nav_menu__container .nav_menu .nav_menu__item--number,
  .nav_menu__item--number--sub {
    display: none !important;
  }

  p {
    font-size: 18px !important;
  }

  .wrapper h3.main-title {
    font-size: 24px;
  }

  .wrapper h4 {
    font-size: 22px;
  }

  .wrapper .practics_title h2 {
    font-size: 3rem;
  }

  /*CSS*/
  .small_menu {
    background-color: transparent;
  }

  .small_menu .small_menu_logo {
    width: 28px;
    top: 30px;
    left: 0;
  }

  .small_menu .small_menu_logo img {
    transform: rotate(0);
    width: 24px;
  }

  .home_slider h2 {
    font-size: 2rem;
  }


  .home_slider .hero-image--container {
    order: 1;
  }


  .home_slider .hero-image {
    max-width: 350px;
    margin: 0 auto;
  }

  .home_slider .hero-text {
    z-index: 2;
    position: relative
  }

  .home_slider .down_arrow {
    bottom: 0;
  }

  .down_arrow {
    left: 40%;
    height: 70px;
    width: 70px;
    bottom: -30px;
  }

  .down_arrow img {
    height: 30px;
  }

  .stories_timeline__logo {
    display: none;
  }


  .services .wrapper {
    background-color: #4942AF;
    background-image: none;
  }

  .services .m-illustration {
    width: 80%;
    height: auto;
    display: block;
    float: right;
    z-index: 1;
    position: relative;
  }

  .we-do-it .quote {
    position: relative;
  }

  .what-we-do .practics_title {
    text-align: left;
  }

  .what-we-do .quote {
    max-width: 250px;
    position: relative;
    bottom: 0;
  }

  .we-do-it .grow-timeline {
    top: 47%;
  }

  .what-we-do .are-you-ready {
    object-fit: contain;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -9%;
  }

  .timeline-nav {
    top: 90%;
  }

  .stories_timeline {
    top: 92%;
    left: 72%;
  }

  .nice-words .arrow {
    position: relative;
    margin: 40px auto;
  }



  .about_us .usa,
  .about_us .jakarta {
    padding-left: 50px;
  }


  .about_us .jakarta {
    background-image: url('../footer/m-map-ina.png');
    background-color: rgb(5 5 5 / 60%);
  }

  .about_us .usa {
    background-image: url('../footer/m-map-usa.png');

  }

  .about_us .jakarta .m-jakarta {
    object-fit: contain;
    height: 400px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  .about_us .usa .m-los-angeles {
    object-fit: contain;
    height: 300px;
    width: 100%;
    margin: 0 auto;
    display: block;
    mix-blend-mode: multiply;
  }

  .about_us .usa .services {
    position: relative;
    bottom: 0;
    padding-top: 0;
    margin-left: 0;
    color: #ececec;
    left: auto;
    right: 10%;
  }

  .usa .services .socmed {
    text-align: left;
  }


  .our-works .left-wrapper {
    height: 200px;
  }

  .our-works .arrow {
    top: 25%;
  }

  .our-works .plus-icon {
    left: 39%;
  }

  .our-works .arrow .right-btn,
  .our-works .arrow .prev-btn {
    height: 100px;
  }

  .our-works .slick-slider .slick-track,
  .our-works .slick-slider .slick-list {
    height: 400px;
    object-fit: cover;
  }

  .our-works .works-slider .slick-list img {
    height: 400px;
    width: 400px;
    object-fit: cover;
  }

  .fancybox__toolbar.is-absolute,
  .is-compact .fancybox__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
  }

  .small_menu {
    z-index: 2;
  }

}