
@media only screen and (min-width:360px) and (max-width:640px)

{

    .navbar-1
    {
        display: block;
        justify-content: space-between;
        padding-left: 50px;
        padding-right: 50px;
        background-color:white;
        position: fixed;
        z-index: 999;
        width: 100%;  
    }
    .nav
{
    display: none;
}

.logo
{
    font-size: 23px;
    color: black;    
}

.hamb
{
    display: flex;
    padding-left: 65%;
}
.fa-bars
{
    font-size: 30px;
    color: rgb(24, 113, 207);
}
.fa-cart-shopping
{
    font-size: 25px;
}

.first-img
{
   height: 250px;
   margin-top: 30px;   
}

.bg-1
{
    background: rgb(237,149,132);
    background: linear-gradient(-30deg, rgba(237,149,132,1) 0%, rgba(24,46,160,1) 79%);
    background-size:fixed ;
    background-repeat: no-repeat;
    height:800px;
    width:100%;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 69% 100%, 0 70%);
    position: relative; 
}

.heading
{
    font-size: 30px;
    font-weight:bolder;
    color: white;
    text-align: center;
    padding-top: 30%;
    
}

.heading-1
{
    font-size: 30px;
    font-weight:bolder;
    color: white;
    text-align: center;
    padding-bottom: 30px;
    
}

.product-1
{
    padding-top: 10%;
}

.product
{
    color: white;
    font-size: 16px;
    text-align: center;
   
    padding-left: 40px;
    padding-right: 40px;
    
}

.buy-bt
{
    background:#011F5B;
    font-size: 16px;
    font-weight: 600;
    color: white;
    height: 60px;
    width: 240px;
    text-align: center;
    line-height: 60px;
    margin: auto;
    margin-top: 50px;
    border-radius: 30px;
}

.p-1
{
    color: #F88379;
    font-size: 16px;
    font-weight: bolder;
}

.p-2
{
    font-size: 20px;
    font-weight: bolder;
}

.web-tools
{
    display: block;
   margin: 50px;
   animation-name: flexbox;
   animation-duration:2s;
   animation-delay:1s;
   animation-iteration-count:1;
   animation-timing-function: ease-in;
}

@keyframes flexbox {

    from
    {
        transform:scale(0);
    }

    to
    {
        transform: scaleX(1.01);
        transition: 0.2s;
        
    }
    
}

.themes-img
{
    height:100px;
    width: 100px;
    margin-top:35px;
    
}

.themes-1, .themes-2, .themes-3,.themes
{
    height: 300px;
    width: 280px;
    background-color: white;
    box-shadow: #E5E4E2 10px 10px 70px;
    margin-top: 50px;
    border-radius: 10px;
    
}

.youtube
{
    border-radius: 20px;
    margin-top: 40px;
    opacity: 1; 
    height: 300px;
    width: 300px;
}

.elements-1
{
    margin-top: 100px;
   
    height: 900px;
    width: 100%;
    background: rgb(175,161,246);
    background: linear-gradient(0deg, rgba(175,161,246,1) 0%, rgba(255,255,255,1) 100%);
    background-repeat: no-repeat;
    background-size: fixed;
    clip-path: polygon(100% 0, 100% 93%, 53% 100%, 0 94%, 0 0);
    
}

.tool-p
{
    line-height: 25px;
    font-size: 15px;
    padding-left: 30px;
    padding-top: 20px;
}

.mobile-1
{
position: absolute;
top: 65%;
left: 6%;
z-index: 99;
height:300px;
width: 300px;  
animation-name: mobile-1;
animation-duration:2s;
animation-delay:1s;
animation-iteration-count:infinite;
animation-timing-function: ease-in;       
}

@keyframes mobile-1 {

    from
    {
        transform: translateY(0%);
    }

    to
    {
        transform: translateY(-6%);
        transition: 1s;
        
    }
    
}

.view-bt
{
    background:#011F5B;
    font-size: 18px;
    font-weight: 600;
    color: white;
    height: 60px;
    width: 280px;
    text-align: center;
    line-height: 60px;
    margin-left: 40px;
    margin-top: 35px;
    border-radius: 30px;
}

.soft, .soft-2
{
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-evenly;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
}

.soft-1
{
    display: flex;
    justify-content: space-evenly;
    font-size: 14px;
    font-weight: bold;
    padding-top: 15px;
}
.siftware-25
{
    height: 100px;
    width: 100px;
}

.box
{
    background: rgb(228,116,81);
    background: linear-gradient(-40deg, rgba(228,116,81,1) 0%, rgba(238,92,60,1) 100%);
    height: 300px;
    width: 100%;
    margin-top: 120px;
    text-align: left;
    font-size: 16px;
    padding-left:6%;
    padding-top: 10%;
    color: white;
    font-weight: bold;
    position: relative;
   
}

.got
{
    background-color: white;
    box-shadow: lightgray 6px 6px 60px;
    height:260px;
    width: 90%;
    border-radius: 10px;
    position: absolute;
    left:5%;
    top: 135%;
}

.man-1
{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    left:40%;
    top:90% ;
}

.got-1
{
    background-color: white;
    box-shadow: lightgray 6px 6px 60px;
    height:260px;
    width: 90%;
    border-radius: 10px;
    position: absolute;
    left:5%;
    top: 280%;
}

.man-2
{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    left:40%;
    top:240% ;
}

.got-2
{
    background-color: white;
    box-shadow: lightgray 6px 6px 60px;
    height:260px;
    width: 90%;
    border-radius: 10px;
    position: absolute;
    left:5%;
    top: 430%;
}

.man-3
{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    left:40%;
    top:385% ;
}

.respons-1
{
    margin-top:350%;
    
    position: relative;
    
}
.responsiv
{
    padding-top: 70px;
    padding-right: 30px;
    text-align: left; 
    height: 650px;
    
}

.software-22
{
    
 margin-top: 560px;

    
}

.join-bt
{
    background:#011F5B;
    font-size: 18px;
    font-weight: 600;
    color: white;
    height: 60px;
    width: 170px;
    text-align: center;
    line-height: 60px;
    margin-top: 50px;
    margin-left: 40px;
    border-radius: 30px;
    box-shadow: lightgray 6px 6px 30px;
}

.p-1_1
{
    color: #F88379;
    font-size: 16px;
    font-weight: bolder;
}

.p-2_2
{
    font-size: 16px;
    font-weight: bolder;
    
}

.plan
{
   
    display: block;
    margin-left: 15%;
    
    
}
.plan-box,  .plan-box-22
{
    height: 405px;
    width: 270px;
    background-color: white;
    text-align: center;
    line-height:35px;
    border-radius: 15px;
    box-shadow: lightgray 6px 6px 60px;  
    margin-top: 30px;
    
}
.plan-box-11
{
    height: 450px;
    width: 270px;
    background-color: white;
    text-align: center;
    line-height:35px;
    border-radius: 15px;
    box-shadow: lightgray 6px 6px 60px;  
    margin-top: 30px;
    
    
}

.footer
{
    background-image: url("css/assets/images/software-10.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    margin-top: 30px;
}

.heading_hh
{
    font-size: 30px;
    font-weight:bolder;
    color: white;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10px;
    
}

.product_00
{
    color: white;
    font-size: 9px;
    text-align: center;
    padding-top:5px;
    
}

.buy-bt_0
{
    background:#011F5B;
    font-size: 10px;
    font-weight: 600;
    color: white;
    height: 30px;
    width: 200px;
    text-align: center;
    line-height: 30px;
    margin: auto;
    margin-top: 15px;
    border-radius: 30px;
}

.powered
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: black;
    color: #8b8e92;
    font-size: 14px;
}

.icons
{
    font-size: 15px;
    margin: auto;
}

  
  










}
