*

 { 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;

 }

 .customer-support

 { position : fixed;

   width : 70px;

   height : 70px;

   bottom : 100px;

   right : 20px;

   z-index : 4;

 }



.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 : darkgreen;

 }



.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 : #1A1A1A;

   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;

    }



 }