* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Prompt;
    /* background-color: green; */
}

.menu {
    width: 100%;
    background-image: linear-gradient(to left, rgb(133, 156, 2),rgb(180, 209, 15),rgb(139, 245, 53),rgb(133, 156, 2),rgb(180, 209, 15),rgb(139, 245, 53)); ;
    height: auto;
}
.logo {
    width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.logo img {
    width: 10rem;
}
.ctn {
    margin: auto;
}

nav {
    max-width: 1200px;
    width: 100%;
    height: 35px;
    background: #b6dd0a;
    box-shadow: 0px 0px 20px 5px rgb(151, 151, 150) ;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.btn-hamburger {
    font-size: 1.5rem;
    padding: 1px;
    background: none;
    border: none;
    display: none;
    cursor: pointer;
}
nav ul {
    display: flex;
    padding-top: 15px;
    justify-content: center;
}
nav ul li {
    list-style: none;
}
nav ul li a{
    text-decoration: none;
    color: #06126b;
    padding: 35px 60px;
    transition: .4s ease;
    font-weight: 700;
    font-size: 1.0rem;
}
nav ul li a:hover{
    color: #049204;
}
/* ---------------------End Menu------------------------- */


.bg-text-run {
    background-color: #9b9a9acb;
}
.text-run{
    width: 1200px;
    margin: auto;
    padding-top: 5px;
}

/* end text run */



.slide-autoplay {
    width: 100%;
    height: 600px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background-image: linear-gradient(to left, rgb(133, 156, 2),rgb(180, 209, 15),rgb(139, 245, 53),rgb(133, 156, 2),rgb(180, 209, 15),rgb(139, 245, 53)); ;
}

.slider {
    overflow: hidden;
    margin: auto;
    position: relative;
    width: 200%;
    display: grid;
    place-items: left;

}
 .slide-track {
    display: flex;
    width: calc(350px * 18);
    animation: scroll 40s linear infinite;
 }

 .slide-track:hover {

    animation-play-state: paused;
 }
@keyframes scroll {
    0% {
        transform: translateX(5);
    }
        100% {
            transform: translateX(calc(-250px * 8));
        }
    
}



 .slides {
    height: 650px;
    width: 550px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    perspective: 100px;
 }

.slides img {
    width: 100%;
    padding-bottom: 50px;
    transition: transform 0.5s;
}

.slides img:hover {
    transform: translateZ(10px);
}

/* Start Tab */
.login {
    display: flex;
    width: 100%;
    justify-content: space-around;
    list-style: none;
    padding: 30px 650px;
    background-image: linear-gradient(to left, rgb(133, 156, 2),rgb(180, 209, 15),rgb(139, 245, 53),rgb(133, 156, 2),rgb(180, 209, 15),rgb(139, 245, 53)); ;
}

.login li a {
    width: 100%;
    text-decoration: none;
    color: rgb(4, 48, 4);
    font-size: 2em;
    border-radius: 30px;
    padding: .25rem 3.5rem;
    background-color: #c2af0a;
    background-image: linear-gradient(to bottom, rgb(29, 73, 3),rgb(174, 206, 87),rgb(207, 207, 207),rgb(174, 206, 87),rgb(29, 73, 3)); ;
    box-shadow: 0px 0px 20px 5px rgb(151, 151, 150);
    font-style: italic;
    font-weight: 700;
}
/* End Tab */

.content {
    width: 100%;
    background-color: rgb(4, 48, 4);
    padding: 50px 0;
    margin-top: -20px;
}
.content img {
    width: 9.5rem;
}
#text-h1 {
    color: #fff;
}
.box-text {
    color: #fff;
    width: 1200px;
    text-align: center;
    padding: 15px 0;
    margin: 15px 0;

}
/*  */

.promotion {
    background-image: linear-gradient(to bottom, rgb(29, 73, 3),rgb(174, 206, 87),rgb(207, 207, 207),rgb(174, 206, 87),rgb(29, 73, 3)); ;
    height: auto;
    text-shadow: 4px 4px #c2af0a;
}
.promotion a img {
    width: 20rem;
}
.promotion h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    padding: 20px 0;
    color: #fff;
    
}
.promotion h2 {
    font-weight: 700;
    color: #fff;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    margin: auto;
    row-gap: 10px;
    justify-items: center;
    width: 1200px;  
}
.content-grid img{
    width: 80%;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}
.content-grid img:hover {
    box-shadow: 0 0 14px 2px #c2af0a;
    transition: all 0.5s ease-in-out;
    transform: translate(-10px);
}
/* **************End Promotion************** */
.promotion-1 {
    background-image: linear-gradient(to bottom, rgb(29, 73, 3),rgb(174, 206, 87),rgb(207, 207, 207),rgb(174, 206, 87),rgb(29, 73, 3)); ;
    height: auto;
    padding-top: 50px;
    text-shadow: 1px 1px #313131;
}
.promotion-1 h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    padding: 20px 0;
    color: #1a5a05;
    
}
.promotion-1 h2 {
    font-weight: 300;
    color: #000000;
}
.grid-1 {
    display: grid;
    grid-template-columns:  1fr 1fr;
    column-gap: 20px;
    margin: auto;
    row-gap: 10px;
    justify-items: center;
    width: 1200px;  
}
.content-grid-1 img{
    width: 80%;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}
.content-grid-1 img:hover {
    box-shadow: 0 0 14px 2px #c2af0a;
    transition: all 0.5s ease-in-out;
    transform: translate(-10px);
}

/* **************End Promotion-1************** */

.promotion-2 {
    background-image: linear-gradient(to bottom, rgb(29, 73, 3),rgb(174, 206, 87),rgb(207, 207, 207),rgb(174, 206, 87),rgb(29, 73, 3)); ;
    height: auto;
    padding-top: 50px;
    text-shadow: 1px 1px #313131;

    
}
.promotion-2 h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    padding: 20px 0;
    color: #1a5a05;
    
}
.promotion-2 h2 {
    font-weight: 300;
    color: #000000;
}
.grid-2 {
    display: grid;
    grid-template-columns:  1fr 1fr 1fr;
    column-gap: 20px;
    margin: auto;
    row-gap: 10px;
    justify-items: center;
    width: 1200px;  
}
.content-grid-2 img{
    width: 80%;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    padding: 50px 0;
}
.content-grid-2 img:hover {
    box-shadow: 5px 5px 14px 2px #c2af0a;
    transition: all 0.5s ease-in-out;
    transform: translate(-10px);
}






/* **************End Promotion-2************** */
footer {
    background-color: rgb(4, 48, 4);
    width: 100%;
}
.contact-1 {
    padding-top: 50px;
   }
   .text-footer {
       color: gold;
       font-size: 30px;
   }
   .text-id {
       color: #fff;
       font-size: 20px;
   }
   .text-copy {
       color: #fff;
       padding-top: 20px;
   }
   .bank {
       width: 100%;
       max-width: 800px;
   }
   .agency {
       width: 100%;
       max-width: 800px;
   }




   /* ************ start responsive************* */

   @media only screen and (max-width: 769px) {
    .dplay-1,.dplay-2 {
            width: 50%;
            bottom: 0px;
            position: fixed;
            display: block;
            z-index: 9999;
        }
    
        .dplay-1 {
            left: 0;
        }
    
        .dplay-2 {
            left: 50%;
        }
        /* ****** */


        .menu {
            width: 100%;
            background-color: rgb(4, 48, 4);
            height: auto;
        }

        /* --------start nav------- */
        nav {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            }
            .btn-hamburger {
                display: block;
                position: fixed;
                top: 20px;
                left: 20px;
                z-index: 10;
                color: #696868;
            }
            nav ul {
                width: 100%;
                background: rgb(238, 255, 7);
                display: none;
                flex-direction: column;
                transition: .3s ease;
                justify-content: center;
                margin-bottom: 5px;
                padding: 10px 0px;
            }
            nav ul li a {
            display: flex;
            color: #333;
            padding: 10px 60px;
            justify-content: center;
            /* border-bottom: 1px solid #333;  */
            font-size: medium;
            }
            .nav-active {
                display: flex;
            }
            /*-----------end nav---------------*/
            .login {
                display: none;
            }
            /* ********* */
            .menu {
                width: 100%;
                background-color: rgb(4, 48, 4);
                height: auto;
            }
            .logo {
                width: 100%;
                height: auto;
                margin-left: auto;
                margin-right: auto;
            }
            .logo img {
                width: 8rem;
            }
            /* ********* */
            .bg-text-run {
                width: 100%;
                background-color: #9b9a9acb;
            }
            .text-run{
                width: 100%;
                margin: auto;
                padding-top: 5px;
            }
            /* ******* */
            .slide-autoplay {
                width: 100%;
                height: 250px;
            }
            .slider {
                width: 100%;        
            }
            .slides {
                height: 350px;
                width: 250px;
                display: flex;
                align-items: center;
                padding: 0px 10px;
                perspective: 100px;
             }
            
            .slides img {
                width: 100%;
                margin-bottom: 50px;
            }
            /* ********** */
            .content {
                width: 100%;
            }
            .content img{
                width: 10%;
            }
            /* ************ */
            .promotion a img{
                width: 100%;
            }
            .content h1 {
                width: 100%;
            }
            .content h5 {
                width: 100%;
            }
            /* ******** */
            .grid {
                width: 100%;  
            }
            .grid-1{
                width: 100%;
            }
            .promotion-1 h2 {
                font-size: medium;
            }
            .grid-2{
                width: 100%;
            }
            .promotion-2 h2 {
                font-size: medium;
            }
            /* ************************** */
        }