body {
    font-family: 'Plus Jakarta Sans';
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding: 9rem;
    scroll-behavior: smooth;
}


:root {
    --container-width-lg:50%;
    --container-width-md:92%;
}

.logo{
    height: 4rem;
    width: 4rem;
    display: grid;
    margin-right: .5rem;
    
}
#logo{
    display: flex;
    flex-direction:row;
    margin-left: 6rem;
    justify-content: space-between;
    
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

nav {
    background: white;
    width: 100%;
    height: 12rem;
    display: grid;
    place-items: left;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    box-shadow:0 .5rem 1rem rgba(0 ,0 ,0, 0.1)
    
}

.nav_container{
    display: flex;
    width: var(--container-width-lg);
    height: 100%;
    justify-content: space-between;
    align-items: center;
    
}

.nav_toggle-btn{
    display: none;
}
#nav_toggle-open{
    display: none;
}

#nav_toggle-close{
    display: none;
}

.nav_links{
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 100%;
    text-decoration: none;
    font-size: small;

    
}

.nav_links li a{
    color:rgba(0, 0, 0, 0.594);
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    font-size: larger;
    text-decoration: none;

}
.nav_links li a:active { 
    color:#001341;
     
 }


 
.nav_links li a:hover{
    color: red;
}

@media screen and (max-width:1024px) {
    .nav_container{
        width: 92%;
    }
    .nav_links {
        position: absolute;
        top:100%;
        right:0;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        display: none;
    }

    .nav_links li{
        width:100%;

    }
    .nav_links li a {
        background: white;
        height: 4rem;
        width: 20rem;
        display: flex;
        align-items: center;
        padding: 0 5rem 0 2rem;
        
    }

    .nav_toggle-btn{
        display:inline-block;
        font-size: 2rem;
        border: none;
        background: transparent;
        cursor: pointer;
        color: black;

    }
    #nav_toggle-close{
        display: flex;
    }
    .btn{
        font-size: smaller;
        font-weight: 200;
        width: 12rem;
        
    }

}   


.home{
    padding: 0;
}

.home .slide{
    min-height:100vh;
    background-size:cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:-1;
}


#btn{
    background: #3E4095;
    color: white;
    width: 15rem;
    height: 4rem;
    border-radius: 5px;
}

.bgImage{
    position: relative;
    width: 100%;
    height: 100vh;
    background-image:url('./assets/page1.png') ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: bgChange 50s linear infinite;
    margin-top: 90px;
}
@keyframes bgChange{
    0%{
        background-image: url('./assets/page1.png');
    }
    20%{
        background-image: url('./assets/Property 1=Variant2.png');
    }
    45%{
        background-image: url('./assets/k11.jpg');
    }
    50%{
        background-image: url('./assets/page3.png');
    }
    


}
.ovelay{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    

}
.conten{
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
   /* justify-content: center;*/
   /* align-items: center;*/
    flex-direction: column;
    z-index: 2;


}

.conten h1{
    font-size:35px ;
    
}
.conten p{
    font-size:15px;
    padding-bottom: 10px;
    
    
}
.conten button{
    color: white;
    border: none;
    outline: none;
    font-size: 20px;
    background-color: #002580;
    height: 45px;
    width: 250px;
    border-radius: 25px;
    margin-top: 10px;
    
    
}
.content button:hover{
    background-color: rgba(0, 0, 255, 0.737);
}
/*
#content{
    position: relative;
    width: 100%;
    height: 200px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
    background-color:#FEF4F5;
    padding: 10px;

}
    */

/*contact formn*/
.Myoverlay{
    position: fixed;
    top: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(0 ,0 ,0, 0.8);
    transition: opacity 500ms;
    visibility: hidden;

}

.Myoverlay:target{
    visibility: visible;
    opacity: 1;
}
.wrapper{
    margin: 50px auto;
    padding: 20px;
    background: #e7e7e7;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 1s ease-in-out;
    width: 600px;
    
    
    
}
.wrapper h2{
    margin-bottom: 0;
    color: #333;
    justify-self: center;
    align-content: center;
    font-size: 20px;
    margin-left: 45px;
}

.wrapper .close{
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.wrapper .formcontent{
    max-height: 30%;
    overflow: auto;
    margin-top: 20px;
    align-self: center;
}

.formcontent{
    display: flex;
    flex-direction: column;
}
input{
    width: 430px;
    height: 35px;
    margin-top: 10px;
    
}
label{
    display: flex;
    font-size: 20px;
    color: #002580;
}
form .name {
    display: flex;
    flex-direction:row;

    
}
form .name input{
    width: 200px;
    margin-right: 30px;
    height: 35px;

}
.container{
    line-height: 20px;
    align-self: center;
    
}

.success-message {
    display: none;
    color: #002580;
    margin-top: 10px;
    margin-left: 20px;
    background: red;
    font-weight: bold;
    
    
}


.partners{
    /*display: flex;
    /*flex-direction: row;*/
    /*gap: 90px;*/
    /*justify-content: center;
    margin-top: 40px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 5rem;
    margin-left: 40px;
    /*text-align:justify;*/
    justify-items: center;
    display: grid;
    grid-template-columns: auto auto auto auto auto;

    


}
.grid{
    padding: 25px 50px;
    

}
#pix1{
    height: 40px;
    width: 213.96px;
}
#pix2{
    height: 60px;
    width: 155.67px;
}
#pix3{
    height: 60px;
    width: 59.5;
}
#pix4{
    height: 50px;
    width: 182.32;
}
#pix5{
    height: 80px;
    width: 110px;
}
#pix6{
    height: 61.02px;
    width: 60px;
}
#pix7{
    height: 65px;
    width: 143.86px;
}
#pix8{
    height: 60px;
}
#pix9{
    height: 65px;
    width: 120px;
}


/*services*/
.services{
    background:#ECF1FF;
     padding-left: 0;
     

}

.spix{
 display: flex;
 flex-direction:row;
 gap: 20px;
 align-content: center;
 justify-content: center;
 margin-top: 40px;
 
 

}
.services_content{
 display: flex;
 flex-direction: column;
 align-content: center;
 

 
 
}
.elbridge{
 width: 380px;
 

}
#more {display: none;}
#moreText{
 display: none;
}
.elbridge_content{
 font-size: 17px;
 margin-top: 20px;
 line-height: 2.5rem;
 
 
 

 
}
.consults{
 font-size: 17px;
 margin-top: 20px;
 width: 380px;
 line-height: 2rem;
}

.consults >h2{
 font-size: 20px;
 margin-bottom: 8px;
 color: #002581;
}
.elpay{

 width: 380px;
}
.elpay >h2{
 margin-bottom: 8px;
 font-size: 20px;
 margin-top:20px;
}
.elpay >p{
 font-size: 17px;
 margin-bottom: 20px;
 color:rgba(0, 0, 0, 0.594);
 line-height: 2.5rem;
 
}
#myBtn{
 width: 150px;
 height: 48px;
 background: #002580;
 color: white;
 border-radius: 20px;
 margin-top: 20px;
 margin-bottom: 20px;
 font-size: 20px;
 border: none;
 outline: none;
 font-style:plus Jakarta sans;
}
#MyBtn{
 width: 150px;
 height: 48px;
 background: #002580;
 color: white;
 border-radius: 20px;
 margin-top: 20px;
 font-size: 20px;
 margin-bottom: 20px;
 border: none;
 outline: none;
 font-style:plus Jakarta sans;

}
.inquiry{
 width: 150px;
 height: 48px;
 background: #002580;
 color: white;
 border-radius: 20px;
 margin-top: 20px;
 font-size: 20px;
 margin-bottom: 20px;
 border: none;
 outline: none;
}
.elpay_btn{
 width: 150px;
 height: 48px;
 background: #002580;
 color: white;
 border-radius: 20px;
 margin-top: 20px;
 margin-bottom: 30px;
 border: none;
 outline: none;
 font-style:plus Jakarta sans;

}

/*end*/

.PosSales{
    padding: 0;
    width: 100%;
    background: #F4FDF2;

    display: flex;
    justify-content: center;
    flex-direction: column;
}





.PosSales .Content{
    z-index: 888;
    color:black;
    width: 100%;
    
    display: none;
    
}
.PosSales .Content.active{
    display: flex;
    flex-direction:row;
    margin-top: 80px;
    
}

.slider-navigation{
    z-index: 888;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(80px);
    margin-bottom: 150px;
}
.slider-navigation .Nav-btn{
    width: 10px;
    height: 10px;
    background:grey;
    border-radius: 50%;
    cursor: pointer;
    /*box-shadow: 0 02px rgba(0, 0, 255, 0.737);*/
    transition: 0.3s ease;
}

.slider-navigation .Nav-btn.active{
    background: #002580;
}

.slider-navigation .Nav-btn:not(:last-child){
    margin-right: 15px;
}

.slider-navigation .Nav-btn:hover{
    transform: scale(1.2);
}

.Img-slide{
    position: absolute;
    width: 100%;
    clip-path: circle(0% at 0 50%);
}

.PosSales .slide{
    min-height:100vh;
    background-size:cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:-1;
}
.Img-slide.active{
    clip-path: circle(150% at 0 50%);
}


.slider1{
    margin-left: 40px;
    margin-right:100px ;

}
.PosSales .Content h1{
    font-size: 30px;
    font-weight: 800;
    line-height: 40px;
    color: #002580;

    

}
.content{
    gap: 80px;
}

.Content  p{
    font-size: 15px;
    color:rgba(0, 0, 0, 0.594);

}

.img-des{
    margin-top: 60px;
    font-weight: 800;
}

.device{
    display: flex; 
    flex-direction:row; 
    margin-left: 60px;
    
    
}
.device div{
    margin-left: 20px;
}

.Urovobtn{
    width: 150px;
    height: 50px;
    border: 1px;
    border-style: solid;
    border-color: #002580;
    border-radius: 20px;
    margin-top: 20px;
    font-size: 18px;
    color: #002580;
    background: #F4FDF2;
}

@media screen and (max-width:991px) {
    .PosSales .Content.active{
        display: flex;
        flex-direction: column;
        
    }
    .PosSales .Content .slider1{
        margin-bottom: 30px;
    }
}






.pos-sales{
    display: flex;
    flex-direction: row;
    gap:200px;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 80px;
    
    
    
}
.POS_SALES{
    background: #F4FDF2;
    

}

.posImg{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 60px;
}
.pos-sales >div >h1{
    font-size: 20px;
    margin-top: 60px;
    margin-bottom: 10px;
    color: #002581;
}

.pos-sales >div >p{
    font-size: 15px;
    color:rgba(0, 0, 0, 0.594);

}
.pos_model{
    margin-top: 50px;
}
.pos_model p{
    font-size: 18px;
    color:rgba(0, 0, 0, 0.594);

}
.pos_model .Urovobtn{
    width: 150px;
    height: 50px;
    border: 1px;
    border-style: solid;
    border-color: #002580;
    border-radius: 20px;
    margin-top: 20px;
    font-size: 18px;
    color: #002580;
    background: #F4FDF2;


}
.pos_model h1{
    color: #002582;
    margin-bottom: 35px;
}

.pos_model{
    font-size: 150%;
}
.Sbtn{
    width: 240px;
    height: 48px;
    background: #002581;
    color: white;
    border-radius: 25px;
    margin-top: 30px;
    font-size: 20px;
    border: none;
    outline: none;
}


#about{
    

    
    background: #FFFFFF;
}
.about_content{
    font-size: 20px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.about_content >div >h1{
    font-size: 25px;

}
.about_content >div >P{
    padding: 10px;
    
    
}

/*customer testimony */
.customer-story{
    display: flex;
    flex-direction: row;
    gap: 30px;
    background:#001341;

}
.testimony > h1{
    font-size: 25px;
}
.testimony > p{
    font-size: 25px;
    gap: 2px;
    margin-top: 20px;
    text-align: justify;
    margin-right: 15px;
    
}
.testimony{
    margin-top: 40px;
    color: #FFFFFF;
}

/*get started*/
.get_started{
    
    background:#E0E1E5;
    

}
.get_started_content{
    text-align: center;
    font-size: 160%;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #021E62;
    line-height: 5rem;
    
}
#Getting_started >h1{
    font-size: 25px;
}
#Getting_started >p{
    font-size: 20px;
}
.Gbtn{
    height: 48px;
    width: 290px;
    background:#002581;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
    color: #FFFFFF;
    font-size: 20px;
    border: none;
    outline: none;
}


/*footer*/
.footer{
    background:#001341;
    
    
  }

  .footer .box-container{
    display:grid;
    grid-template-columns: auto auto auto auto;
    gap: .2rem;
    text-align:justify;
    justify-items: center;
    
  }
  .footer .box-container .contact-box h3{
    font-size: 2.2rem;

    color: white;
  }

  .footer .box-container .contact-box{
    margin-top: 80px;
    line-height: 3rem;
    margin-bottom: 80px;
    
  }

  .footer .box-container .contact-box a{
    font-size: 1.6rem;
    display: block;
    padding: .5rem 0;

  }
  .footer .box-container .contact-box .contact-content a{
    color: #FEF4F5;
    font-size: 2rem;
    font-weight: 100;
  }

  .foot .box-container .contact-box a i{
    padding-right: .5rem;
  }
  .footer .box-container .contact-box a:hover{
    color:#ED3237;
  }
  
.share{
    
    text-align: center;
    display:flex;
    color:blue;
    gap: 3rem;
    
    
}

.footer .share a{
    color:#002580;
    font-size: 10rem;
    width: 3rem;
    height: 3rem;
    line-height: 2.2rem;
    border-radius: 15%;
    margin-top: 2rem;
    background:white;
    
    
}

.footer .share a:hover{
    color: blue;
    background:#021E62;
    transform: rotate(360deg);
}
.footer .copyright{
    font-size: 1.5rem;
    text-align: center;
    margin-top: 1rem;
    padding-top: 2rem;
    color: #ECF1FF;

}

@media screen and (max-width:991px) {
    .spix{
        display: flex;
        flex-direction: column;
        align-items: center;
    
        
    }

    .pos-sales{
        display: flex;
        flex-direction: column;
        align-self: center;
        align-content: center;
        justify-content: center;
        align-items: center;
        
    }
    .about_content{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .customer-story{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer .box-container{
        grid-template-columns: auto auto;

    }
    .partners{
        display: grid;
        grid-template-columns: auto auto;
        

    }
    .grid{
        padding: 10px 20px;
    }
    .services h1{
        margin-left: 120px;  
        }
}
@media screen and (max-width:1700px) {
    html{
        font-size: 50%;
        width: 100%;
    }
    .partners{
        grid-template-columns: auto auto auto auto;
        justify-content: center;

    }
    

}
@media only screen and (max-width: 500px){
.services{
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-self: center;
}

    


}
@media only screen and (max-width: 400px) {
    .nav {
      width: 650px;
    }

    section{
        width:100%;
    }
html{
    width: 200%;
}
.services h1{
    margin-left: 150px;  
    }

  }


  /*Slider*/

  #slider{
    height: 500px;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: center;
    background: #001341;

  }
  .slidercontainer{
    width:1600px ;
    margin: auto;
  }
  .subcontainer{
    width: 85%;
    margin: auto;
  }
  .slide-img{
     width: 100%;
    height: 375px;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s;
  }
  

  .img1{
    background-image: url(./assets/pos8-removebg-preview.jpg);
    
  }
  
  .img2{
    background-image: url(./assets/k11.jpg);
  }
  .img3{
    background-image: url(./assets/pos3.jpg);
  }
  
  .desc{
    color: white;
    font-size: 15px;
  }
 
  @media screen and (max-width:1600px) {

    .slidercontainer{
        width: 100%;

    }
  }





  .Overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(0 ,0 ,0, 0.8);
    transition: opacity 500ms;
    visibility: hidden;

}

.Overlay:target{
    visibility: visible;
    opacity: 1;
}
.Wrapper{
    margin: 50px auto;
    padding: 20px;
    background: #e7e7e7;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 1s ease-in-out;
    width: 600px;
    
    
    
}
.Wrapper div{
    line-height: 20px;
}
.Wrapper h2{
    margin-bottom: 0;
    color: #333;
    justify-self: center;
    align-content: center;
    font-size: 20px;
    margin-left: 45px;
}

.Wrapper .close{
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.Wrapper .formcontent{
    max-height: 30%;
    overflow: auto;
    margin-top: 20px;
    align-self: center;
}

.formcontent{
    display: flex;
    flex-direction: column;
}
input{
    width: 430px;
    height: 25px;
    margin-top: 5px;
    
}
select{
    height: 25px;
    width: 430px;
}
label{
    display: flex;
    font-size: 15px;
    color: #002580;
    margin-left: 30px;
}
form .nam {
    display: flex;
    flex-direction:row;
    
    
}
form .nam input{
    width: 200px;
    margin-right: 30px;
    height: 25px;
}
.container{
    
    align-self: center;
    
}
.contactbtn{
    background: #002581;
    color: #e7e7e7;
    height: 40px;
    width: 150px;
    border-radius: 5px;
    border: none;
}
.terminal-control {
    display: flex;
    align-items: center;
}

.terminal-control button {
    padding: 7px 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.terminal-control input {
    text-align: center;
    width: 30px;
    height: 30px;
}

.success-message {
    display: none;
    color: #002580;
    margin-top: 10px;
    margin-left: 20px;
    background: red;
    
}


.Container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .Container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color:white;
    border: 1px solid;
  }
  
  /* On mouse-over, add a grey background color */
  .Container:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .Container input:checked ~ .checkmark {
    background-color: #002581;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .Container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .Container .checkmark:after {
    left: 5px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }