*
 { margin : 0px;
   padding : 0px;
 }

body
 { background-color : #f8f8f8;
 }

@font-face {
  font-family: 'rigascreen_bold';
  font-style: normal;
  src: url('../fonts/rigascreen/RigaScreen-Bold.ttf');
}

.contact-whatsapp
 { position : fixed;
   width : 70px;
   height : 70px;
   bottom : 20px;
   right : 20px;
   z-index : 3;
 }
.contact-whatsapp1 
{ position : fixed;  
  width : 70px;   
  height : 70px;   
  bottom : 100px;   
  right : 20px;   
  z-index : 3; 
}

.header
 { position : fixed;
   z-index : 16;
   width : 100%;
   height : 60px;
   margin-bottom : 60px;
 }

.header .header-dark #navbar
 { background-image : url('../images/header-banner.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow : 1px 1px 3px darkblue;
 }

.header-content img
 { width : 80px;
   height : 95px;
   vertical-align : middle;
   margin-right : 10px;
 }

.product
 { width : 100%;
   background-color : #F8F8F8;
   position : relative;
 }

.product .content
 { min-height : 10px;
   max-width : 1170px;
   margin-left : auto;
   margin-right : auto;
   left : 0px;
   right : 0px;
   padding-top : 20px;
   padding-bottom : 70px;
   padding-left : 20px;
   padding-right : 20px;
   position : relative;
 }

.product .content .footer
 { text-align : center;
   margin-top : 30px;
 }

.product .content h1
 { text-align : center;
   padding-bottom : 10px;
   border-bottom : 3px solid #7695b8;
   margin-bottom : 30px;
   margin-top : 0px;
   font-weight : bolder;
 }

.product .content .news
 { display : grid;
   grid-template-columns: repeat(3, 1fr);
   gap : 30px;
 }

.product .content .news .news-item
 { background-color : white;
 }

.product .content .news .news-item img
 { width: 100%;
 }

.product .content .news .news-item .deskripsi
 { padding : 20px;
   line-height : 1.2;
 }

.product .content .news .news-item .deskripsi h3
 { margin-bottom : 20px;
   margin-top : 0px;
 }

.product .content .news .news-item .deskripsi p
 { color : #968888;
   font-size : 14px;
   margin-bottom : 1em;
 }

.product .content .news .news-item .deskripsi footer
 { border-top : 1px solid #e4e4e4;
   padding-top : 1em;
   color : #968888;
 }

.product .content .news .news-item .deskripsi footer .fa
 { color : #7695b8;
 }

.service
 { width : 100%;
   background-color : white;
   position : relative;
   text-align : center;
   cursor : pointer;
 }

.service .content
 { min-height : 10px;
   max-width : 1170px;
   margin-left : auto;
   margin-right : auto;
   left : 0px;
   right : 0px;
   padding-top : 20px;
   padding-bottom : 70px;
   padding-left : 20px;
   padding-right : 20px;
   position : relative;
 }

.service .content h1
 { text-align : center;
   margin-top : 20px;
   padding-bottom : 10px;
   border-bottom : 3px solid #7695b8;
   margin-bottom : 30px;
   font-weight : bolder;
 }

.service .content .news
 { display : grid;
   grid-template-columns: repeat(3, 1fr);
   gap : 30px;
 }

.service .content .news .news-item
 { background-color : #eef3f6;
 }

.service .content .news .news-item:hover
 { background-color : #1a2d4e;
   animation-name : changeBackgroundColor;
   animation-duration : 0.5s;
 }

.service .content .news .news-item:hover .deskripsi h3
 { color : white;
   animation-name : changeTextColor1;
   animation-duration : 0.5s;
 }

.service .content .news .news-item:hover .deskripsi p
 { color : #bcc1c7;
   animation-name : changeTextColor2;
   animation-duration : 0.5s;
 }

.service .content .news .news-item .deskripsi
 { padding : 30px;
   line-height : 2;
 }

.service .content .news .news-item .deskripsi h3
 { margin-bottom : 20px;
   color : #0084e3;
 }

.service .content .news .news-item .deskripsi p
 { color : #7c838f;
   font-size : 20px;
 }

@keyframes changeBackgroundColor {
  0%
   { background-color : #eef3f6;
   }
  100%
   { background-color : #1a2d4e; 
   }
}

@keyframes changeTextColor1 {
  0%
   { color : #0084e3;
   }
  100%
   { color : white;
   }
}

@keyframes changeTextColor2 {
  0%
   { color : #7c838f;
   }
  100%
   { color : #bcc1c7;
   }
}

.testimoni
 { width : 100%;
   min-height : 10px;
   background-color : black;
   position : relative;
   background-image : url('../images/testimonials.jpg');
   background-repeat : no-repeat;
   background-position : 50% 20%;
   background-size :  cover;
   background-color : black;
   background-attachment : fixed;
 }

.testimoni .content
 { min-height : 10px;
   max-width : 1130px;
   margin-left : auto;
   margin-right : auto;
   left : 0px;
   right : 0px;
   padding-top : 20px;
   padding-bottom : 20px;
   color : white;
   position : relative;
   overflow-x : hidden;
 }

.testimoni .content .slider1
 { position : relative;
   left : 0px;
   transition : left 2s;
   -webkit-touch-callout : none;
   -webkit-user-select : none;
   -khtml-user-select : none;
   -moz-user-select : none;
   -ms-user-select : none;
   user-select : none;
 }

.testimoni .content .slider1 .slider1-item
 { min-height : 360px;
   float : left;
   text-align : center;
 }

.testimoni .content .slider1 .slider1-item img
 { display : inline-block;
   margin-top : 80px;
   margin-bottom : 50px;
   border-radius : 100%;
   box-shadow : 0 0 0 5px #7695b8, 0 0 0 15px rgba(118,149,184,0.15), 0 0 0 25px rgba(118,149,184,0.15);
   width : 80px;
   height : 80px;
 }

.testimoni .content .slider1 .slider1-item p
 { padding-left : 150px;
   padding-right : 150px;
   font-size : 20px;
   font-style : italic;
   margin-bottom : 20px;
 }

.testimoni .content button
 { display : block;
   margin-bottom : 20px;
   margin-left : auto;
   margin-right : auto;
 }

.button1
 { background-color : #7695b8;
   color : white;
   padding : 20px;
   border : 0px;
   border-radius : 3px;
 }

.button1:active
 { background-color : #5c799a;
 }.partners
 { width : 100%;
   min-height : 10px;
   background-color : white;
   position : relative;
 }

.partners
 { background-color : #d3efff;
 }

.partners .content
 { min-height : 10px;
   max-width : 1130px;
   margin-left : auto;
   margin-right : auto;
   left : 0px;
   right : 0px;
   padding-top : 60px;
   padding-bottom : 80px;
   position : relative;
 }

.partners .content h2
 { font-weight : bold;
   font-size : 28px;
   text-align : center;
 }

.partners .content p
 { font-size : 20px;
   color : #888888;
   margin-top : 15px;
   text-align : center;
 }

.partners .content .container-slider2
 { width : 100%;
   overflow-x : hidden;
 }

.partners .content .container-slider2 .slider2
 { margin-top : 50px;
   display : grid;
   grid-template-columns : repeat(6, 1fr);
   position : relative;
   left : 0px;
 }

.partners .content .container-slider2 .slider2 .slider2-item
 { display : flex;
 }

.partners .content .container-slider2 .slider2 .slider2-item img
 { width : 100%;
   margin-top : auto;
   margin-bottom : auto;
 }

.footer1
 { width : 100%;
   min-height : 300px;
   background-color : #EEF3FF;
   position : relative;
 }

.footer1 .content
 { min-height : 10px;
   max-width : 1170px;
   margin-left : auto;
   margin-right : auto;
   left : 0px;
   right : 0px;
   padding-top : 140px;
   padding-bottom : 140px;
   position : relative;
   padding-left : 20px;
   padding-right : 20px;
 }

.footer1 .content .kolom
 { display : grid;
   grid-template-columns : 3fr 1fr;
   gap : 40px;
   line-height : 2;
 }

.footer1 .content .kolom h3
 { color : white;
 }

.footer1 .content .kolom p
 { color : #888888;
   text-align : justify;
 }

.footer1 .content .kolom ul
 { color : #888888;
   padding-left : 20px;
 }

.footer2
 { width : 100%;
   background-color : black;
   position : relative;
 }

.footer2 .content
 { min-height : 10px;
   max-width : 1170px;
   margin-left : auto;
   margin-right : auto;
   left : 0px;
   right : 0px;
   padding-top : 30px;
   padding-bottom : 30px;
   position : relative;
   padding-left : 20px;
   padding-right : 20px;
   text-align : center;
   color : #7695b8;
   line-height : 2;
 }

.footer2 .content a
 { border : 2px solid #7695b8;
   padding : 15px;
   width : 15px;
   height : 15px;
   border-radius : 100%;
   display : inline-block;
   margin : 5px;
 }

.footer2 .content div
 { margin : 30px;
   color : #888888;
 }

.footer2 .content div a
 { border : none;
   padding : 0px;
   width : auto;
   height : auto;
   border-radius : 0;
   margin : 0;
   color : #7695b8;
   text-decoration : none;
 }

.footer2 .fa 
 { position : relative;
   top : -8px;
   left : -6px;
   font-size : 14px;
 }

@media only screen and (min-width : 300px)
 {
   .product .content .news
    { grid-template-columns: repeat(1, 1fr);
    }

   .service .content .news
    { grid-template-columns: repeat(1, 1fr);
    }

   .testimoni .content .slider1 .slider1-item p
    { padding-left : 20px;
      padding-right : 20px;
    }

   .partners .content .container-slider2 .slider2
    { grid-template-columns : repeat(2, 1fr);
    }

   .footer1 .content .kolom
    { grid-template-columns : auto;
    }

 }


@media only screen and (min-width : 600px)
 {
   .product .content .news
    { grid-template-columns: repeat(2, 1fr);
    }

   .service .content .news
    { grid-template-columns: repeat(2, 1fr);
    }

   .testimoni .content .slider1 .slider1-item p
    { padding-left : 20px;
      padding-right : 20px;
    }

   .partners .content .container-slider2 .slider2
    { grid-template-columns : repeat(4, 1fr);
    }

   .footer1 .content .kolom
    { grid-template-columns : auto;
    }

 }

@media only screen and (min-width : 900px)
 {
   .product .content .news
    { grid-template-columns: repeat(3, 1fr);
    }

   .service .content .news
    { grid-template-columns: repeat(3, 1fr);
    }

   .testimoni .content .slider1 .slider1-item p
    { padding-left : 150px;
      padding-right : 150px;
    }

   .partners .content .container-slider2 .slider2
    { grid-template-columns : repeat(6, 1fr);
    }

   .footer1 .content .kolom
    { grid-template-columns : 3fr 1fr;
    }

 }