*{
    margin: 0;
    padding: 0%;
    box-sizing: border-box;

}


.bar1, .bar2, .bar3 {
    width: 40px;
    height: 5px;
  
  
  
    margin: 6px 0;
    transition: 0.4s;
  }
  .bar1,.bar3{
    background-color: #60aa45;
  }
  .bar2{
    background-color: #f15e25;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {opacity: 0;}
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: #f15e25;
  }
  .none{
      display: none !important;
      opacity: 0;
  }

/* navbar
.navlinkitem{
    font-family: "medium";
    font-size: 45px;
    color: #A10509 !important;
    text-align: right
}
.navbar-nav{
 background-color: #dac9ab;
 margin: 2px auto;
 display: flex;
}
.navbarbackground{
    background-color: #dac9ab ;
} */

.navbar{
    background-color: #dac9ab  !important;
    position: sticky;
    top: 0%;
    z-index: 5;
    ;
}
body{
    background-color: #F4ECD5;
}
.vc{
   

    display: flex;
justify-content: space-evenly;
   }
   .navlink1{
       display: flex;
       text-align: left !important;
       justify-content: flex-start;
   }
.nav-link{
    color: #A10509 ;
    font-family: "medium";
    font-size: 30px;
  margin-right: auto;
padding-left: 10px;
}
.navbar-brand{
    color: #A10509 ;
    font-family: "medium";
    font-size: 45px;
}

/* main */
.containermaunbg{
    background-color: #F4ECD5;
padding: 0;
margin: 0%;


}
.active{
    font-weight: 900;
}
#bgimge{
    background: url("../images/bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: auto;
    margin-left: auto;
    
    background-position-x: auto;
}
.maincol2{
padding: 25px;
    display: block;
    justify-content: center;
    align-items: center;
}
.Screenshots1{
    margin-top: 25px;
    margin-bottom: 25px;
}
.maincol2p{
    font-family: "regular";
    font-size: 25px;
    text-align: justify;
    width: 180%;
    margin-left: -350px;
   
}
.Screenshots2{
    width: auto;
height: auto;
    animation: ring 4s 2s ease-in-out infinite;
}
.Screenshots21{
    width: auto;
height: 300px;
    animation: ring 4s 2s ease-in-out infinite;
}
@keyframes ring {
  
  }

  hr:not([size]) {
    height: 5px;
    color: #A10509;
}
.maincontainer2h2{
    color: #A10509;
    text-align: center;
    justify-content: center;
    font-family: "bold";
    font-size: 75px;
}
#uniq{
    position: relative;
}
#Screenshots{
    position: relative;
}
.ringbell1{
    content: "";
    position: absolute;
    top: -20px;
    left: 27%;
    width: auto;
}
.ringbell2{
    content: "";
    position: absolute;
    top: -20px;
    right: 30%;
    width: auto;   
}
.greenbel2{
    content: "";
    position: absolute;
    top: -20px;
    right: 27%;
    width: auto;   
}
.redbel2{
    content: "";
    position: absolute;
    top: -20px;
    right: 15%;
    width: auto;
}
.greenbel1{
    content: "";
    position: absolute;
    top: -20px;
    left: 27%;
    width: auto;   
}
.redbel1{
    content: "";
    position: absolute;
    top: -20px;
    left: 15%;
    width: auto;
}
.navlink1{
    padding-right: 150px !important;
}
.navlink3{
    padding-left: 150px !important;
}
.st1 {
    opacity:1;
    fill: tomato;
    stroke: #A10509;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray:1200;
    stroke-dashoffset:0;
    -webkit-animation: dash 3s linear forwards;
    -o-animation: dash 3s linear forwards;
    -moz-animation: dash 3s linear forwards;
    animation: dash 3s linear forwards;
}
@keyframes dash{
    from{
        stroke-dashoffset:2500;
        opacity:0;
    }
    to{
        stroke-dashoffset:0;
        opacity:1;
    }
}
.dowload1{
    margin-left: 55px;
    padding: 10px;
    margin-top: 200px;
    cursor: pointer;
}
.dowload{
    margin-left: 55px;
    padding: 10px;  
    cursor: pointer;
}
.marginrow{
    margin-top: 100px;
}
.fitcontainer{
    margin: 5px 30px;
    padding: 5px 35px;
}
.bgscanner{
    background: url("../images/bgscnner.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.center{

}
.margintop{
    margin-top: 150px;
}
.margintop1{
    margin-top: 150px;
}
.margintops{
    margin-top: 100px;
    margin-bottom: 150px;
}
.c{
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.a,.b{
    width: auto;

}
.peregraph{
    font-family: "regular";
}
.card{
    background-color: #A10509;
    color: white;
    position: relative;
}
.moblieview{
    display: block !important;
}
.cardsvg1{
   position: absolute;
   top: -70px;
   content: "";
   text-align: center;
   background-color: #A10509;
   padding: 50px;
   border: 5px solid white ;
   border-radius: 50%;
   background-image: url("../images/card1svg.svg");
   background-position: center;
   background-repeat: no-repeat;
   left: 95px;

 
}
.cardsvg2{
    position: absolute;
    top: -70px;
    content: "";
    text-align: center;
    background-color: #A10509;
    padding: 50px;
    border: 5px solid white ;
    border-radius: 50%;
    background-image: url("../images/search.svg");
    background-position: center;
    background-repeat: no-repeat;
    left: 95px;
 
  
 }
 .cardsvg3{
    position: absolute;
    top: -70px;
    content: "";
    text-align: center;
    background-color: #A10509;
    padding: 50px;
    border: 5px solid white ;
    border-radius: 50%;
    background-image: url("../images/Icon\ material-live-tv.svg");
    background-position: center;
    background-repeat: no-repeat;
    left: 95px;
 
  
 }
 .cardsvg4{
    position: absolute;
    top: -70px;
    content: "";
    text-align: center;
    background-color: #A10509;
    padding: 50px;
    border: 5px solid white ;
    border-radius: 50%;
    background-image: url("../images/Icon\ awesome-video.svg");
    background-position: center;
    background-repeat: no-repeat;
    left: 95px;
 
  
 }
 .cardsvg5{
    position: absolute;
    top: -70px;
    content: "";
    text-align: center;
    background-color: #A10509;
    padding: 50px;
    border: 5px solid white ;
    border-radius: 50%;
    background-image: url("../images/Icon\ awesome-sticky-note.svg");
    background-position: center;
    background-repeat: no-repeat;
    left: 95px;
 
  
 }
 .cardsvg6{
    position: absolute;
    top: -70px;
    content: "";
    text-align: center;
    background-color: #A10509;
    padding: 50px;
    border: 5px solid white ;
    border-radius: 50%;
    background-image: url("../images/setting.svg");
    background-position: center;
    background-repeat: no-repeat;
    left: 95px;
 
  
 }
.footerh3{
    color: #A10509;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;

}
footer{
    background-color: #dac9ab;
    margin-top: 50px;
   
    align-items: center;
}
.footerimg{
    margin: 0px 10px;
}
.footerrow{
    padding: 20px 0px;
}
.imgf{
    display: flex;
    align-items: center;
    justify-content: center; 
}
.logo{
    width: 90px;
    height: auto;
}


@media screen and (min-width: 310px) and (max-width:450px){
    .navlink1 {
        padding-right: 0px !important;
    }
    .Screenshots21{
        display: none;
    }
    .dowload1 {
       display: none;
    }
    .maincol2p {
        font-family: "regular";
        font-size: 25px;
        text-align: justify;
        width: auto;
        margin-left: 0px;
    }
    .dowload {
       display: none;
    }
    .maincontainer2h2 {
        
        font-size: 36px;
    }
    .footerh3 {
      
        font-size: 16px;
     
    }
    .ringbell1 {
       
        left: 7%;
        
    }
    .ringbell2 {
       
        right: 2%;
        
    }
    
    .nav-link{
        display: block;
        text-align: left;
    }
    .navlink3{
        padding-left: 0px !important;
    }
    .vc {
        display: flex;
        justify-content:flex-start;
    }
    .Screenshots2{
        display: none;
    }
    .margintop{
        margin-top: 370px;
    }
    .mobileM{
        margin-top:70px;
    }
    .marginrow {
        margin-top: 150px;
    }
    .margintops {
        margin-top: 1px;
        margin-bottom: 50px;
    }
    .fitcontainer {
        margin: 5px 0px;
        padding: 5px 20px;
    }
    .margintop1{
        margin-top: 10px;
    }
    .none{
        display: block !important;
        opacity: 1;
    }
    .dowload1 {
        margin-left: 0px;
        padding: 10px;
        margin-top: 2px;
    }
    .dowload {
        margin-left: 0px;
        padding: 10px;
    }
    .mobliedowload{
        padding: 70px;
    }
    .redbel1 {
        content: "";
        position: absolute;
        top: -20px;
        left: 3%;
        width: auto;
    }
    .redbel2 {
        content: "";
        position: absolute;
        top: -20px;
        right: 3%;
        width: auto;
    }
}
@media screen and (min-width: 765px) and (max-width:900px){
.Screenshots2{
    display: none;
}
.maincol1{


    width: 50%;
}
.navlink1 {
    padding-right: 0px !important;
}
.navlink3 {
    padding-left: 0px !important;
}
.maincol2p {
 
    width: 204%;
    margin-left: -350px;
}
.dowload1 {
    margin-left: 25px;
    padding: 10px;
    margin-top: 51px;
}
.dowload {
    margin-left: 25px;
    padding: 10px;
}
.ringbell1 {
    content: "";
    position: absolute;
    top: -20px;
    left: 9%;
    width: auto;
}
.ringbell2 {
    content: "";
    position: absolute;
    top: -20px;
    right: 11%;
    width: auto;
}
.mobileM {
    width: 50%;
}
.margintop {
    margin-top: 302px;
}
.ipadm{
    width: 100%;
    margin-top: 30px;
}
.margintop1 {
    margin-top: 87px;
}
}
@media screen and (min-width: 1000px) and (max-width:1200px){
    .navlink1 {
        padding-right: 50px !important;
    }
    .navlink3 {
        padding-left: 50px !important;
    }
    .maincol2p {
        font-family: "regular";
        font-size: 25px;
        text-align: justify;
        width: 190%;
        margin-left: -206px;
    }
    .ringbell1 {
        content: "";
        position: absolute;
        top: -20px;
        left: 10%;
        width: auto;
    }
    .ringbell2 {
        content: "";
        position: absolute;
        top: -20px;
        right: 10%;
        width: auto;
    }
    .margintop {
        margin-top: 330px;
    }
    .ipadheight{
        height: 20rem;
    }

}