@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Share+Tech&display=swap');
/* 

.open-sans-<uniquifier> {
   font-family: "Open Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
   font-variation-settings:
     "wdth" 100;
 }

.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.share-tech-regular {
  font-family: "Share Tech", sans-serif;
  font-weight: 400;
  font-style: normal;
}


*/


* {
   margin: 0;
   padding:0;
}

a {
   text-decoration: none;
   text-transform: none;
}

body {
   /* width: 100%; */
   scroll-behavior: smooth;
}

nav {
   position: sticky;
   top:0px;
   font-family: "Roboto", sans-serif;
   background-color:rgba(179, 4, 135, 0.879);
   display:flex;
   align-items: center;
   justify-content: center;
   padding-top:5px;
   padding-bottom:5px;
   gap:20px;
}

.navbar-logo, .navbar-menu , .navbar-link {
   display:flex;
   flex-grow:1;
   cursor:pointer;
   align-items: center;
   justify-content: center;
   padding:5px;
}

.navbar-logo {
   justify-content: left;
   gap:5px;
   padding:4px;
   margin-left:10px;
}

.navbar-menu {
   justify-content: right;
   font-size:12px;
   gap:20px;
   height:30px;
}

.navbar-link {
   flex-grow:0;
   justify-content: center;
   font-size:12px;
   gap:15px;
   height:30px;
}

.menu-item {
   padding:4px;
   color:rgba(255, 255, 255,0.8);
}
.menu-item:hover {
   color:white;
}
.customer-kontak > a {
   color:rgba(255, 255, 255,0.8);
   margin-left:20px;
   margin-right:20px;
}
.customer-kontak:hover > a {
   color:white;
}

.btn-login-front {
   font-weight:bold;
   border:solid 1px white;
   border-radius: 6px;
   padding:5px;
   color:white;
} 

.btn-login-front:hover {
   color:rgba(255, 255, 255,0.9);
   border:solid 1px white;
} 

.nomor-info-layanan  {   
   color:rgba(255, 255, 255,0.9);
   margin-right:10px;
}

.nomor-info-layanan:hover  {   
   color:white;
}

.logo-text { 
   font-family: "Share Tech", sans-serif;
   font-size:22px;
   font-weight: bold;
   color:rgba(255, 255, 255,0.9);
}

.logo-text:hover {    
   color:white;
}

.view-on-mobile {
   display:none;
}

aside {
   position: fixed;
   display:flex;
   flex-direction: column;
   width: 200px;
   height: 100vh;
   background-color:rgb(0,0,0,0.8);
   color:white;
   right:0;
   z-index: 999;
   gap:10px;
}

.sidebar-menu ,.sidebar-link{
   padding:5px;
   display:flex;
   flex-direction: column;
   gap:20px;
}

.sidebar-menu > .menu-item {
   padding-left:10px;
   padding-top:5px;
   padding-bottom:5px;
   cursor: pointer;
}

.sidebar-link {
   flex-grow:0;
   color:white;
   align-items: end;
   margin-top: 10px;
   margin-right: 10px;
   cursor: pointer;
}

.view-on-web {
   display:block;
}

.view-on-click {
   display:none;
}

main {
   font-family: "Open Sans", sans-serif;
   color:rgba(60, 60, 60, 0.9);
   background-color:white ;
   z-index:-1;
}

.welcome {
   display: flex;
   font-family: "Roboto", sans-serif;
   min-height: 600px;
   padding:0px 50px 20px 50px;
   align-items: center;
   justify-content: center;
   line-height: 1.5em;
}

.welcome-left {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   gap:10px;
   color:rgba(84, 34, 86, 0.849);
   max-width: 750px;
}
.welcome-right {
   display: flex;
   align-items: center;
}


.welcome h1 {
   font-family: "Share Tech", sans-serif;
   color:rgba(179, 4, 135, 1);
   font-size: 55px;
   font-stretch: 100px;
   line-height: 1em;
}

.welcome h2 {
   font-family: "Share Tech", sans-serif;
   color:rgb(226, 11, 172);
   font-size: 40px;
   font-stretch: 100px;
   line-height: 1em;
}

.welcome p {
   font-family: "Share Tech", sans-serif;
   color:rgba(84, 34, 86, 0.849);
}
.section {
   display:flex;
   align-items: center;
   min-height: 200px;
   margin:30px;
   padding:20px;
   border:1px solid;
   border-color:  rgba(173, 172, 172, 0.5);
   border-radius: 20px;
   gap:20px;
}

.bg-light {
   background-color: white;
}

.bg-dark {
   /* background-color:rgba(173, 172, 172, 0.266); */
   background-color:rgba(193, 129, 205, 0.266);
   color:rgba(18, 17, 17, 0.838);
}

footer {
   display: flex;
   flex-direction: column;
   justify-content: center;
   font-family: "Share Tech", sans-serif;
   align-items:center;
   text-align:center;
   vertical-align: middle;
   background-color:rgba(179, 4, 135, 0.9);
   color:rgba(255, 255, 255,0.8);
   height: 60px;
   padding:20px;
}

.gbr-banner {
   width: 450px;
   height: 450px;
   padding:40px;
   text-align: right;
}

.gbr-section {
   width: 400px;
   height: 400px;
   margin:50px;
}

.btn-info-banner , .btn-info-daftar  {
   font-family: "Share Tech", sans-serif;
   padding:10px 20px;
   width: 120px;
   font-size: 0.9em;   
   color:rgba(84, 34, 86, 0.849);
   border:1px solid black;
   border-radius: 4px;
   margin-right: 10px;
}

.btn-info-daftar  {   
   margin-left: 10px;
   background-color:rgba(193, 129, 205, 0.266);
}
.btn-info-banner:hover, .btn-info-daftar:hover  {  
   color:rgba(179, 4, 135, 1);
   border:1px solid rgba(179, 4, 135, 1);
}

.btn-welcome  {   
   display: flex;
   flex-direction: row;
   text-align: center;
}

@media(max-width: 924px){
   /* Jika width <= 800*/
   .navbar-menu {
      display:none;
   }
   .view-on-web {
      display:none;
   }
   .view-on-mobile {
      display:block;
   }
   .welcome{
      flex-direction: column-reverse;
      gap:30px;
   }
   .section{
      flex-direction: column;
   }
   
   .gbr-banner, .gbr-section {
      width: 300px;
      height: 300px;
      padding:10px;
   }
   
   .welcome h1 {
      text-align: center;
      font-size: 45px;
      font-stretch: 100px;
      line-height: 1em;
   }

   .welcome h2 {
      text-align: center;
      font-size: 20px;
      font-stretch: 100px;
      line-height: 1em;
   }

   .welcome p {
      text-align: center;
   }   
   .btn-info-banner, .btn-info-daftar {
      margin-left: 0px;
      width: 150px;
   }
   .btn-welcome  {   
      display: flex;
      flex-direction: column;
      justify-content: center;
      vertical-align: middle;
      align-items: center;
      gap:10px;
      margin-top:10px;
   }
   .nomor-info-layanan {   
      display:none;
   }
}


@media(max-width: 400px){

}