/* Header ****************************** */

header{
    height: 12vw;
    background-color:#222222 ;
}

header div{
    height: 12vw;
    line-height: 12vw;
}

header img{
    width: 16%;
}

 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    header{
        height: 10vw;
        background-color:#222222 ;
    }
    
    header div{
        height: 8vw;
        line-height: 8vw;
    }
    
 }

/* End Header *************************** */
/* Section1****************************** */
.s1-btn{
    top: 81%;
    left: 24%;
}

.s1-btn a img{
    width: 50vw;
}
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    .s1 .bg{
        content: url("../image/D/Section1/section\ 1.jpg");
    }

    .s1-btn{
        top: 83%;
        left: 25%;
    }

    .s1-btn a img{
        width: 48vw;
    }
 }

/* End Section1****************************** */
/* Section2****************************** */

.s2-btn{
    top: 75%;
    left: 20%;
}

.s2-btn a img{
    width: 40vw;
}
.wrapatas{
position: relative;
height:228px

}
.Video1{
    margin: 10%;
}

.warna{
    color: rgb(245, 188, 0);
}
  .s2 img {
    position: relative;
    z-index: 1;
  }
  
  .s2 .Video1 {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-62%, -210%);
    z-index: 2;
  }


 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    .s2 .bg{
        content: url("../image/D/Section2/Section2.jpg")

    }
    .wrapatas{
        position: relative;
        height:673px
        
        }
    .s2-btn{
        top: 78%;
        left: 29%;
    }
    .s2-btn a img{
        width: 25vw;
    }
    .s2 img {
        position: relative;
        z-index: 1;
      }
      
      .s2 .Video1 {
        position: absolute;
        height:70%;
        width: 50%;
        top: 40%;
        left: 50%;
        transform: translate(-70%, -170%);
        z-index: 2;
      }
 }



/* End Section2****************************** */
/* Section3****************************** */


.s3-btn{
    top: 80%;
    left: 32%;
}

.s3-btn a img{
    width: 40vw;
}



/* 
.scroll-container {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    width: 90vw;
    height: 100%;
    }
  
  .scroll-item {
    width: 50vw;
    margin-right: 10px;
    display: inline-block;
  }

  .scroll-item img{
    width: 100%;

  } */
  .s3-container{
    top: 30%;
    left: 5%;
    }

#container3 {
    height:45vw; 
    width: 90vw;
    position:relative; 
    overflow:hidden;
  }
  #container3:hover {
    overflow: auto;
 }
 
 #container3:hover .photobanner {
    animation-play-state:paused;
 }
  .photobanner3 {
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
    white-space: nowrap;
    animation: bannermove 20s linear infinite;
  }
  
  .photobanner3 img {  
    width: 45vw;
    margin: 0 0.5em;
  }
  
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    .s3 .bg{
        content: url("../image/D/Section3/Section3.jpg")

    }
    .s3-btn{
        top: 86%;
        left: 40%;
    }
    .s3-btn a img{
        width: 25vw;
    }
    .s3-container{
        top: 30%;
        left: 5%;
        }

    #container3 {
        height:45vw; 
        width: 90vw;
        position:relative; 
        overflow:hidden;
      }

 
      
      .photobanner3 img {  
        width: 30vw;
        margin: 0 0.5em;
      }
    /* .scroll-item {
        width: 35vw;
        margin-right: 8vw;
        display: inline-block;
      }

      .scroll-container {
        display: flex;
        overflow-x: scroll;
        white-space: nowrap;
        width: 75vw;
        height: 100%;
        }
    
        .s3-container{
            top: 27%;
            left: 15%;
        } */
      



 }

/* End Section3****************************** */
/* Section4****************************** */

  .s4-btn{
    top: 80%;
    left: 32%;
}

.s4-btn a img{
    width: 40vw;
}
  .s4-container{
    top: 30%;
    left: 5%;
    }

  #container2 {
    height:45vw; 
    width: 90vw;
    position:relative; 
    overflow:hidden;
  }
  /* #container2:hover {
    overflow: auto;
 }
 
 #container2:hover .photobanner {
    animation-play-state:paused;
 } */
  .photobanner2 {
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
    white-space: nowrap;
    animation: bannermove 10s linear infinite;
  }
  
  .photobanner2 img {  
    width: 30vw;
    margin: 0 0.5em;
  }
  
  @keyframes bannermove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50%, 0);
    }
  }


   /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    .s4 .bg{
        content: url("../image/D/Section4/Section4.jpg")

    }
    .s4-btn{
        top: 83%;
        left: 38%;
    }
    .s4-btn a img{
        width: 25vw;
    }

    .s4-container{
        top: 30%;
        left: 13%;
    }

    #container2 {
        height:35vw; 
        width: 75vw;

      }
      .photobanner2 img {  
        width: 23vw;
        margin: 0 0.5em;
      }
 }


/* End Section4****************************** */
/* Section5****************************** */

.title{
    padding-top: 3vh;
}

.s5{
    height: 70vw;
}
.ss5 .img{
    width: 100%;
    height: auto;
    position: relative;
  
}
  .s5-container{
    top: 34%;
    left: 5%;
}

.scroll-container5 {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    width: 90vw;
    height: 45vw;
    }
  
  .scroll-item5 {
    width: 30vw;
    margin-right: 10px;
    display: inline-block;
  }

  .scroll-item5 img{
    width: 100%;

  }

  /* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .scroll-item5 {
        width: 31vw;

      }
 }

  /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .s5-container{
        top: 34%;
        left: 10%;
    }
    .title{
        padding-top: 4vh;
        
    }
    .title h2{
        font-size: 3.5rem !important;
    }

    .scroll-container5 {
        display: flex;
        overflow-x: scroll;
        white-space: nowrap;
        width: 80vw;
        height: 48vw;
        }
        .scroll-item5 {
            width: 30vw;
            margin-right: 10px;
            display: inline-block;
          }
        
          .scroll-item5 img{
            width: 100%;
        
          }
}




/* End Section5****************************** */
/* Section6****************************** */
.s6{
    height: 10vh;
    width: 100vw;
    background-color: #ffffff;
}
.wrapbawah{
    position: relative;
    top:20%;
    height: 52px
}

.s6-container{
    top: 10%;
    left: 5%;
    }

  #container6 {
    height:50px; 
    width: 100%;
    top: -280px;
    position:relative; 
    overflow:hidden;
  }
  #container6:hover {
    overflow: auto;
 }
 
 #container6:hover .photobanner {
    animation-play-state:paused;
 }
  .photobanner6 {
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
    white-space: nowrap;
    animation: bannermove 15s linear infinite;
  }
  
  .photobanner6 img {  
    height: 8vh;
    margin: 0 0.5em;
  }
  #container7 {
    height:58px; 
    width: 100%;
    top: -235px;
    position:relative; 
    overflow:hidden;
  }
  #container7:hover {
    overflow: auto;
 }
 
 #container7:hover .photobanner {
    animation-play-state:paused;
 }
  .photobanner7 {
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
    white-space: nowrap;
    animation: bannermove 40s linear infinite;
  }
  
  .photobanner7 img {  
    height: 10vh;
    margin: 0 0.5em;
  }
  #container8 {
    height:50px; 
    width: 100%;
    top: -190px;
    position:relative; 
    overflow:hidden;
  }
  #container8:hover {
    overflow: auto;
 }
 
 #container8:hover .photobanner {
    animation-play-state:paused;
 }
  .photobanner8 {
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
    white-space: nowrap;
    animation: bannermove 20s linear infinite;
  }
  
  .photobanner8 img {  
    height: 8vh;
    margin: 0 0.5em;
  }

 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    .s6{
        height: 20vw;
    }
.wrapbawah{
    position: relative;
    top:20%;
    height: 62px;px
}
    .s6-container{
        top: 60%;
        left: 5%;
        }
    
    .photobanner6 img {  
        height: 10vw;
        margin: 0 0.5em;
        }
        .photobanner7 img {  
            height: 14vw;
            margin: 0 0.5em;
            }
            .photobanner8 img {  
                height: 11vw;
                margin: 0 0.5em;
                }

        #container6 {
            height:110px; 
            width: 100%;
            top: -730px;
            position:relative; 
            overflow:hidden;
        }
        #container7 {
            height:110px; 
            width: 100%;
            top: -596px;
            position:relative; 
            overflow:hidden;
        }
        #container8 {
            height:110px; 
            width: 100%;
            top: -424px;
            position:relative; 
            overflow:hidden;
        }
 }


/* End Section6****************************** */
/* Section7****************************** */

.s7{
    height: 20vh;
    width: 100vw;
}

.s7 .row{
    width: 100vw;
}
.s7-text{
    text-align: center;
}

.s7 .row>* {
    padding: 0;
}

.s7 h4{
    font-weight: 700!important;
}
.s7-pic img{
    width: 95%;
}

 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
    .s7-text{
        text-align: right;
    }
    .s7-pic img{
       content: url("../image/D/Section7/Payment.png");
        width: 95%;
    }
 }


/* End Section7****************************** */
/* Footer****************************** */


.footer{
height: 10vh;
}

.fix{
    height: 10vh;
    background-color:#222222 ;
}

.footer-btn{
    top: 28%;
    left: 57%;
}

.footer-btn a img{
    width: 35vw;
}

.footer-logo{
    top: 20%;
    left: 7%;
}

.footer-logo img{
    width: 20vw;
}
.footer-toto{
    top: 20%;
    left: 30%;
}

.footer-toto img{
    width: 25vw;
}
.footer-text{
color: #ffffff;
top: 34%;
left: 7%;
}

.footer-text h6{
    font-size: 4.5vw !important;
}

  /* // Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 

    .footer-btn{
        top: 33%;
        left: 65%;
    }
    
    .footer-btn a img{
        width: 31vw;
    }

    .footer-text{    
        top: 36%;
        left: 7%;
    }

    .footer-text h6{
        font-size: 5vw !important;
    }

 }

  /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .footer{
        height: 10vw;
        }
        
        .fix{
            height: 10vw;
            
        }

    .footer-text h6{
        font-size: 1.5rem !important;
    }
    .footer-btn{
        top: 23%;
        left: 56%;

    }

    .footer-btn a img{
        width: 28vw;
    }
    .footer-logo{
        top: 20%;
        left: 17%;
    }
    
    .footer-logo img{
        width: 10vw;
    }
    .footer-toto{
        top: 20%;
        left: 30%;
    }
    
    .footer-toto img{
        width: 20vw;
    }
    .footer-text{
        top:35%;
        left: 30%;
    }

}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .footer-text{
        top: 56%;
        left: 24%;
    }
 }


/*End Footer****************************** */