/*large Dekstops, 1366 keatas*/



  /*Navbar*/

  .navbar {

    z-index: 2;

  }

  
  li.nav-item
  a {
    transition: ease 0.3s;
  }


  li.nav-item

  a:hover {

      font-weight: Bold;
      transition: ease 0.3s;
  }



  /*Mega Menu*/

  .dropdown {

    &:hover {

      > .dropdown-menu {

        display: block;

      }

    }

  }



  .megamenu {

    position: static;

  }

  .dropdown-menu {

    border: none;

    width: 100%;

  }

  .navbar-brand

  img {

    margin-left: 6rem;

    width: 8vh;

  }

  .col-sm-6.col-lg-3.mb-4 {

    max-width: 20%;

  }

  .nav-item {

    margin-right: 5px;

  }

  .collapse.navbar-collapse.order-sm-12#navbarContent

  .navbar-nav.ml-auto

  .nav-item#mobile {

    display: none;

  }



  /*Carousel*/

  .carousel-indicators li {

    width: 7px;

    height: 7px;

    border-radius: 15px;

  }

  /*Profile*/

  .card-img-overlay.col-md-8 p.card-text {

    line-height: 1.4;

  }



  .card-img-overlay.col-md-8 {

    max-width: 63%;

  }



  .btn.btn-outline-light {

    margin-top:10px;

    border-radius: 8px;

    border-width: 2px;

  }



  .btn.btn-outline-light a.text-light:hover {

    color: #007bff !important;

    text-decoration: none;

  }







.card-img-overlay.col-md-8 {

    padding-left: 5%;

    padding-right: 5%;

    padding-top: 5%;

    max-width: 50%;

    text-align: justify;

    text-justify: inter-word;

    background-color: #007bffad;

    border-radius: 0px;

    margin: 1rem;

  }





  /*Products*/

  .parallax {

    /* The image used */

    background-image: url("img/parallax.jpg");



    /* Set a specific height */

    min-height: 280px; 



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    margin: auto;



    padding: 5rem 4rem;

  }

.card-group#product {
  background-image: url('img/bg-prod.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 300px;
}

  .card-group {

    border-width: 0px;

  }



  .card-group .card {

    border-width: 0px;

  }



  .card-group.row-cols-4 .col.mb-4 a {

    background-color: #007bff;

    background-position: center;

    display: inline-block;

  }



  .card-group.row-cols-4 .col.mb-4 a img:hover {

    mix-blend-mode: soft-light;

    transition: ease-in-out 0.2s;

    transform: scale(1.05);

  }

hr#produk {
  width: 30px; border-width: 5px; border-color: white; border-radius: 0px; margin: 0rem 0rem 2rem 0rem; float: left;
}

  .parallax

  .card-group

  .card

  .card-body.bg-primary {

    padding: 3rem;

  }

  .card#tulisan-prod {
    background-color: #007bffaf; padding: 3rem 0rem 0rem 1.5rem; margin-right: 1.5rem; max-width: 235px;
  }

  .btn#produk {
    position: absolute; border-radius: 8px; bottom: 11%;
  }



/*customer*/

  .container#cust-mobile {

    display: none;

  }



  /*Brand*/



  .container#brand2 {

    padding: 3rem;

  }

  .card-deck#brand2 {

    padding-left: 0rem;

    -webkit-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.15);

    -moz-box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.15);

    box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.15);

  }
  .card#brand {
    width: 100%;
    padding: 0px !important;
    max-width: 720px !important;
    margin: 0px !important;
  }



  .container#brand-image {

    border-width: 0px;
    padding-top: 1rem;
    border-radius: 0px;

  }

  .owl-item.active {

    margin-left: auto !important;

    margin-right: auto !important;

    text-align: -webkit-center;

    scroll-snap-align: center;

    croll-snap-align: center;

    lign-content: baseline;

    croll-snap-align: center;

    lign-self: stretch;

    croll-snap-align: center;

  }



  .btn#brand2 {

    max-width: 150px;
    
    border-radius: 8px;
    bottom: 7rem;
    border-width: 2px;

  }

  @media (max-width: 1140px) {
    .btn#brand2 {
      bottom: 3rem;
    }
    #tagline{
      max-width: 160px !important;
    }
  }



  .btn#brand2

  a {

    text-decoration: none;

  }

  .btn#brand2

  a:hover {

    color: white !important;

  }

  .card#brand2{

    background-image: url('img/BG-brand.jpg');
    background-size: cover;
    background-repeat: no-repeat;

    

    padding: 3rem;

    margin: 0px 0px 0px 0rem;

    max-width: inherit

  }

    

  .card-body#our-brand {

    padding: 0rem 0rem 0rem 5rem;

  }

  .card-deck .card {

    max-width: 460px;

    min-width: 30%;

    margin-top: 2rem;

    border-width: 0px;

    border-radius: 0px;

  }



  .card-deck .card#brand a {

    background-image: url('img/Brand.jpg');

    background-position: center;

    display: inline-block;

  }



  .card-deck .card#brand a:hover .overlay {

    bottom: 0;

    height: 25%;

  }

  .container#brand-mobile {

    display: none;

  }



  /*Global Market Coverage*/

  div.container#GMC a {

    background-image: url('img/GMC2.jpg');
    background-repeat: no-repeat;
    background-position: center;

    display: block;

    transition: ease 0.5s;

  }

  div.container#GMC a img {
    opacity: 1;
    transition: ease 0.5s;
  }



  .overlay {

    position: absolute;

    bottom: 100%;

    left: 0;

    right: 0;

    background-color: #007bff;

    opacity: 75%;

    overflow: hidden;

    width: 100%;

    height:0;

    transition: .5s ease;

  }

  .text {

    color: white;

    font-size: 18px;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }



  div.container#GMC a img:hover {

    transition: ease 0.5s;

    opacity: 0;

  }



  div.container#GMC a img:hover::after {

    transition: ease 0.5s;

    opacity: 0;

  }



  div.container#GMC-mobile {

    display: none;

  }



  /*find us*/

  .card#find-us p a img:hover {

    transition: ease-in-out 0.25s;

    opacity: 50%;

  }

  .card#find-us p a img {

    max-width: 50px;

  }



  .carousel {

    z-index: 1;

    margin-top: -6rem;

  }





  .card-img-overlay.ml-auto {

      padding-right: 5%;

      padding-top: 5%;

  }



  /*Toggler Icon*/

  .navbar-toggler.collapsed {

    background-image: url('img/toggler-off.png');

    background-position: center;

    transition: ease-in-out 0.25s;   

  }

  .navbar-toggler.collapsed:active {

    transform: rotate(-45deg);

  }

  .navbar-toggler {

    background-image: url('img/toggler-on.png');

    background-position: center;

    transition: ease-in-out 0.25s;

  }

  .navbar-toggler:active {

    transform: rotate(45deg);

  }



/*Footer*/

.container-fluid#footer

.card-deck

.card#info {

  border-width: 0px;

  background-color: transparent;

  max-width: 45%;

  min-width: 30%;

  margin-left: auto;

}



img#sosmed {

  max-width: 35px !important;

  margin-left: 10px;

} 

.container-fluid#footer
.card-deck
.card
li
p
a img {
  transition: ease 0.3s;
  max-width: 30px;
}

.container-fluid#footer
.card-deck
.card
li
p
a img:hover {
  transform: scale(1.25);
  transition: ease 0.3s;
}


.card#contact .card-title, .card#info .card-title, .card#find-us .card-title {

  margin-bottom: 5px !important;

}



  /*Copyright*/

  



/*-------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 1280px) {

  .card#kosongan {

    display: none !important;

  }



}





/*desktops, 992px > 1365px*/

@media (min-width: 992px) and (max-width:1365px) {

  

  .navbar-brand

  img {

    margin-left: auto !important;

    width: 8vh;

  }



/*Navbar*/

  .navbar {

    z-index: 2;

  }



/*Carousel*/

  .carousel {

    z-index: 1;

    margin-top: -6rem;

  }



/*Profiles*/

  .card-img-overlay.col-md-8 {

    padding-left: 5%;

    padding-top: 1rem;

    max-width: 60%;

    text-align: justify;

    text-justify: inter-word;

    margin: 1rem;

    }

  .card-img-overlay.col-md-8 p.card-text {

    font-size: 14px;

  }


  .card-img-overlay.col-md-8 p.card-text#p3 {
    display: none;
  }


  .col-lg-3 {

    max-width: 20%

  }



  .card-img-overlay.col-md-8 h2.card-title {

    margin-bottom: 20px;

  }



  .card-img-overlay.ml-auto {

    padding-right: 5%;

    padding-top: 5%;

  }



  .parallax {

    padding: 5rem 2rem;

  }

}



/*footer*/

.container-fluid#footer

.card-deck

.card p {

font-size: 15px;

}



/*----------------------------------------------------------- TABLET VIEW -----------------------------------------------------------*/



/*Ukuran Tablet, antara 576px > 991px*/

@media (max-width: 991px) {



  .navbar-brand

  img {

    margin-left: auto !important;

    width: 8vh;

  }



/*Element*/

  h2 {

    font-size: 28px;

  }



/*navbar*/

  .collapse.navbar-collapse.order-sm-12#navbarContent

  .navbar-nav.ml-auto

  .nav-item#mobile {

    display: block;

  }



  #navbarContent

  .navbar-nav.ml-auto

  .nav-item.dropdown.megamenu {

    display: none;

  }



/*Carousel*/

  .carousel#carouselExampleIndicators {

    margin-top: 0px;

  }



/*Profiles*/

  .card-img-overlay p {

    font-size: 14px;

  }

  .card-img-overlay.col-md-8#profil {

    max-width: 60%;

    text-align: justify;

    text-justify: inter-word;

    padding-left: 7%;
    margin: 0px 2%;

  }

  br#profile, p#p3 {
    display: none;
  }

  .card-img-overlay.col-md-8 p.card-text#p2 {

    display: none;
    font-size: 14px;

  }

  .btn#profile {
    margin-top: 10px !important;
  }




/*Products*/

  .parallax {

    padding: 2rem 2rem;

    background-image: none;

  }

  hr#produk{
    border-color: #007bff !important;
    -webkit-box-shadow: none !important;

  }

  .card#tulisan-prod{
    max-width: 320px !important;
    background-color: transparent;
  }
  .card-group#product {
    background-image: none;
    height: 240px;
  }

  .btn#produk {
    bottom: 2rem;
  }


  .card#tulisan-prod

  .card-body{

    margin-left: 2rem;

    width: 100%;

  }

  .card#tulisan-prod

  .card-body p.card-text {

    color: black !important;

    text-shadow: none !important;

  }



  .btn {

    font-size: 12px;

  }

  .parallax

  .card-group

  .card

  .card-body.bg-primary {

    padding: 2rem;

    max-height: 220px;

  }

  .parallax

  .card-group

  .card {

    max-height: 219px;

  }

  .card .card-group.row-cols-4#prod {

    display: none;

  }

  .card#gambar-prod, .card#gambar-prod img {

    display: none !important;

  
  }


/*Brand*/

  .card-body#our-brand {

    padding: 0rem 0rem 0rem 0rem;

  }

  .card#brand {

    max-width: 30%;

    min-width: 20%;

    align-self: flex-end;

    background-color: transparent;

  }

  .card#brand2{
    padding: 3rem 1rem !important;
  }

  .card-body#our-brand

  a.btn.btn-outline-primary {

    margin-top: 2rem !important;

  }



.card-img#brand-morenzo, br#brand1 {

    display:none;

  }





/*footer*/

  .container-fluid#footer

  .card-deck

  .card {

  min-width: 32%;

  margin-left: 0px;

  display: flex;

  }

  .container-fluid#footer

  .card-deck

  .card p {

  font-size: 14px;

  }

}





/*----------------------------------------------------------- MOBILE VIEW -----------------------------------------------------------*/



/*Ukuran HP Standard, ukuran dibawah 575px*/

@media (max-width: 575px) {



  .navbar-brand

  img {

    margin-left: auto !important;

    width: 8vh;

  }

  h2 {

    font-size: 24px;

  }



/*Profile*/

  .card.bg-dark.text-white#profil {

    min-height: 250px;

    border-radius: 0px;

    background-color: #007bff !important;

  }

  .card.bg-dark.text-white#profil

  img {

    display: none;

  }

  .card-img-overlay.col-md-8#profil {

    max-width: 90%;

    background-color: transparent;

  }

  .card-img-overlay.col-md-8#profil

  p.card-text {

    font-size: 13px;

  }

  .card-img-overlay.col-md-8#profil

  p.card-text#p4 {

    display: none;

  }

  .card-img-overlay.col-md-8#profil

  .btn.btn-outline-light {

    float: right;  
    margin-top: 24px !important;
  }



/*Products*/

  .parallax {

    padding-left: 1.5rem;

    padding-right: 5px;

    min-height: 210px;

  }

  .parallax

  .card-group#product {

    display: -webkit-inline-box;

  }

  .parallax

  .card-group

  .card#product {

    max-width: 40% !important;

  }

  .parallax

  .card-group

  .card

  .card-body.bg-primary {

    background-color: transparent !important;

    padding: 0px;

    max-width: fit-content;

  }

  .card-group#product {
    height: 150px;
    -webkit-box-pack: justify;
  }

  .btn#produk {
    width: 125px;
    bottom: 8px;
  }

  .parallax

  .card-group

  .card

  .card-body.bg-primary

  h2 { 

    color: #007bff !important;

  }

  .parallax

  .card-group

  .card

  .card-body.bg-primary

  a {

    color: #007bff;

    border-color: #007bff;

  }

  .card#tulisan-prod {

    padding: 0px 0px 0px 30px !important;

    max-width: 60% !important;
    margin-right: 10px;

  }

  .card#tulisan-prod

  .card-body {

    max-width: fit-content;

    padding: 0px !important;

    margin-left: 0px;

  }

  .card#tulisan-prod

  .card-body

  p.card-text {

    font-size: 12px;

  }



/*Customers*/

  .container#customers {

    display: none;

  }

  .container#cust-mobile {

    padding-top: 1.5rem;

    background-color: #13293d;

    display: block;

  }

  .container#cust-mobile

  .owl-carousel-1.owl-carousel.owl-theme {

    margin-top: 1rem;

  }

  .container#cust-mobile

  .owl-carousel-1.owl-carousel.owl-theme

  .card {

    border-width: 0px;

    background-color: transparent;

    align-items: center;

  }

  .container#cust-mobile

  .owl-carousel-1.owl-carousel.owl-theme

  .card

  img {

    max-height: 120px;

    width: auto;

  }



/*Brands*/

  .card-deck#brand {

    display: none;

  }

  .container#brand2 {

    display: none;

  }

  .container#brand-mobile {

    display: block;

    padding-top: 1rem;

  }

  .container#brand-mobile

  h2#our {

    margin-bottom: 0px;

  }

  .container#brand-mobile

  .owl-carousel-1.owl-carousel.owl-theme {

    margin-top: 1rem;

  }

  .container#brand-mobile

  .owl-carousel-1.owl-carousel.owl-theme

  .card {

    border-width: 0px;

    background-color: transparent;

    align-items: center;

  }

  .container#brand-mobile

  .owl-carousel-1.owl-carousel.owl-theme

  .card

  img {

    width: 75%;

  }



/*GMC*/

  div.container#GMC {

    display: none;

  }



  div.container#GMC-mobile {

    display: block;

  }



/*Footer*/

  .container-fluid#footer {

    padding: 25px 1rem 0px 1rem !important;

  }

  .container-fluid#footer

  .card {

    margin-left: 0px !important;

  }

  img#sosmed {

    max-width: 50px;

    height: auto;

  }

}