*{
    margin: 0;  
    padding: 0;
    box-sizing: border-box;
  }
  body{
      font-family: "Poppins", sans-serif;
     
  }
  :root {
      --el-color: #333;
  }
  h1,h2,h3,h4,a,p{color: var(--el-color);}
  a{
      text-decoration: none;
  }
  h1{
      font-size: 2.5rem;
  }
  h2{
      font-size: 2rem;
      /*text-transform: uppercase;*/
      font-weight: 600;
      letter-spacing: 2px;

      
  }
  h3{
  font-weight: 600;
  }
  p{
      font-weight: 300;

    /*
      text-align: justify;
      text-justify: inter-word;
    */
  }
  i{
      /*color: #eb7620;*/
      color: #333;
  }
  .m-t {
      margin-top: 100px;
  }
  .m-b{
      margin-bottom: 50px;
  }
  
  .m-sb{
    margin-bottom: 20px;
}

/*   new class for landing page top margin.  */
  .m-l {
    margin-top: 20px;
}

    .m-e {
    margin-top: 0px;
}



  .container {
      width: 70%;
      margin: auto;
      text-align: center;
  }
  
  /* the following clearfix:after style clears the boarders between the containers and makes them appear one below the other. in the index.html this class is declared and the style is declared here. withot this the services section was appearing below the image of the About section with akward look. */
  .clearfix:after{
    content:"";
    visibility: hidden;
    display: block;
    clear: both;
  }


  .img-logo {
   /* font-size: 20px;
    color: #123456;
    background: pink;
    padding: 12px 15px;
    border-radius: 50%;
    font-family: FontAwesome;*/
    font-size: 20px;

    }



  
  
  
  /* Header Section */
  nav{
      height: 100px;
      
  }
  nav h2 {
      float: left;
      display: inline;
      line-height: 100px;
  }

  nav ul {
      float: right;
      line-height: 100px;
  }
  nav ul li{
      display: inline-block;
      margin: 0 25px;
  }
  nav ul li a{
      text-transform: uppercase; 
  }


  .active{
        background-color: #eb7602;
        border-radius: 20px;
        padding: 7px 25px;
        color: #fff;
    }
  
  a:hover, a:active, a:focus {
        /* background-color: #918a83; */
        background-color: #eb7602;
        border-radius: 20px;
        padding: 7px 25px;
        color: #fff;
  }



/* For Button formatting */











  /* For Responsive Menu */
    #res-menu{
        display: none;
    }   
    #sign-one, #sign-two{
        display: none;
    }


  /* Showcase Area */
  .showcase{
    
    height: calc(100vh - 100px);
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../images/webbg1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 10px solid #eb7620;
  
  }
  .showcase-content h1{
    color: #fff;
    letter-spacing: 2px;
  }
  .showcase-content p{
    margin: 50px 0px;
    color: #fff;
  }
  .showcase-content{
      width: 50%;
      margin: auto;
      text-align: center;
      transform: translateY(30vh);
  }
  .showcase-content .btn{
      color: #fff;
      border: 2px solid #fff;
      padding: 10px 60px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: 0.5s all;
  }
  .showcase-content .btn:hover{
      background-color: #eb7620;
      border: 0px;
  }
  




  /* About Us Section*/
  
  .about-wrapper img{
    
      max-width: 100%;
      height: auto;
  }
  .about .about-image{
    width: 45%;
    float: left;
  }
  .about .about-content{
    
     /* width: 45%;*/
      /*float: right;*/
      text-align: left;
      margin-top: 60px;
  }
  .about .line{
      width: 150px;
      height: 6px;
      background-color: #333333;
      margin-top: 50px;
  }
  .about p{
      margin-top: 50px;
  }
  .about ul {
      margin-top: 50px;
      list-style: none;
  }
  .about ul li{
      margin: 10px 0;
  }
  .about .fa-li{
      margin-left: -20px;
  }
  .social-icon {
      margin-top: 50px;
  }
  .social-icon i{
  padding: 10px;
  font-size: 30px;
  border: 1px solid black;
  }







  /* Software Section*/
.software i{
    font-size: 70px;
}

.software .box{
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    width: 25%;
    margin: 40px;
    padding: 20px;
    display: inline-block;
    text-align: center;
}
  
.software h3 {
    margin: 30px 0;
}
.software p {
    margin-bottom: 30px;
}
.software a{
font-weight: 600;
border-bottom: 2px solid #3b7628;
}


.software .btn{
    font-size: 15px;
    font-weight: 600;
    text-transform:none;
    border-radius: 20px;
    padding: 7px 25px;
    border-bottom: 2px solid #3b7628;
}
.software .btn:hover{
    background-color: #eb7602;
    border-radius: 20px;
    padding: 7px 25px;
    color: #fff;
}


.trial .btn{
    font-size: 15px;
    font-weight: 600;
    text-transform:none;
    border-radius: 20px;
    padding: 7px 25px;
    border-bottom: 2px solid #3b7628;
}
.trial .btn:hover{
    background-color: #eb7602;
    border-radius: 20px;
    padding: 7px 25px;
    color: #fff;
}










/* Testimonials Section */
.testimonial .circles{
    text-align: center;
}
.testimonial .circle{
    width: 200px;
    display: inline-block;
    text-align: center;
    margin: 0 40px;
}
.testimonial img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.testimonial h3{
    margin: 30px 0;
}





/* Purchase Section */
.purchase{
    /*background-color: #353e49;*/
    background-color: #f4f4f4;
    /*height: 80vh;*/
    
}



/*Software Details Section */
.details{
    background-color: #f4f4f4;
}

.listed{

    text-align: left;
}

/*Trial Section */
.trial{
    background-color: #f4f4f4;
}
.register{
    background-color: #f4f4f4;
}
.extend{
    background-color: #f4f4f4;
}







/* Purchase Section 
.purchase .buy{
    background-color: #f4f4f4;
    width: 45%;
    float: left;
  }
  .purchase .try{
    background-color: #f4f4f4;
      width: 45%;
      float: right;
      text-align: left;
      margin-top: 60px;
  }
  input{
   
    padding: 20px;
    width: 40%;
    height: 50px;
    font-size: 18px;
    border: 1px solid #333;
}
button{
    border: 1px solid #333;
    padding: 20px 60px;
    text-transform: uppercase;
    color: #333;
    font-size: 18px;
}
input[type="text"]{
    margin: 30px 0;
}

*/

/*Purchase Section*/
.checkout-pf {
    width: 70%;
    margin: auto;
    

    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }

/* Style the submit button with a specific background color etc */
.checkout-pf input[type=submit] {
    background-color: #04AA6D;
    color: white;
   /* padding: 20px; */
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    margin:0px 20px;
    width: 80%;
    height: 50px;
    font-size: 18px;
   text-align:center;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
 .checkout-pf input[type=submit]:hover {
    background-color: #45a049;
  }
/*
  .lsize label {
    font-size: 40px;

}
*/















/* Style inputs with type="text", select elements and textareas */
input[type=text], [type=email], [type=password], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    height: 50px;
    font-size: 18px;
    
  }
  

 
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    width: 40%;
    height: 50px;
    font-size: 18px;
   
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #45a049;
  }

/* To make the password input field appear normal and the text size init a little bigger. */
  input[type='password'] {
   /* font-family: Verdana;

    font-family: "Poppins", sans-serif;*/

    font-family: Helvetica, sans-serif;

    letter-spacing: 0.125em;
}




/* Contacts Section 

input{
    padding: 20px;
    width: 40%;
    height: 50px;
    font-size: 18px;
    border: none;
}

*/
.contact{
    text-align: center;
    background-color: #f4f4f4;
    height: 80vh;
    padding: 50px 0;
   
}

textarea{
    height: 200px;
    font-size: 18px;
    padding: 20px;
    resize: none;
   /* border: none;*/
}

.contact h2{
    margin-bottom: 50px;
}

.contact .btn{
    font-size: 15px;
    font-weight: 600;
    text-transform:none;
    border-radius: 20px;
    padding: 7px 25px;
    border-bottom: 2px solid #3b7628;
    
}
.contact .btn:hover{
    background-color: #eb7602;
    border-radius: 20px;
    padding: 7px 25px;
    color: #fff;
}






/* Empty Area Section to maintain a distance between Contact form submit button and the Footer Area.*/
.emptyarea{
    text-align: center;
    background-color: #f4f4f4;
    padding: 30px 0; 
}


.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky + .content {
    padding-top: 60px;
  }






 /* Software Features Section*/
 .sfeatures i{
    font-size: 70px;
}

.sfeatures .box1{
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    width: 25%;
    margin: 40px;
    padding:20px;
    display: inline-block;
    text-align: left;
}
  
.sfeatures h3 {
    margin: 20px 0;
}
.sfeatures p {
    margin-bottom: 20px;
}


 /* Style the submit button with a specific background color etc */
.sfeatures input[type=submit] {
    background-color: #04AA6D;
    color: white;
   /* padding: 20px; */
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    margin:0px 20px;
    width: 80%;
    height: 50px;
    font-size: 18px;
   text-align:center;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
 .sfeatures input[type=submit]:hover {
    background-color: #45a049;
  }




/* Installation Instructions Section*/
.sinstall i{
    font-size: 70px;
}

.sinstall .box2{
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    width: 40%;
    margin: 40px;
    padding:20px;
    display: inline-block;
    text-align: left;
}

.sinstall h2 {
    margin: 20px 0;
}

.sinstall h3 {
    margin: 20px 0;
}
.sinstall p {
    margin-bottom: 20px;
}












/* Footer Section */
footer{
    
    height: 100px;
    background: #eb7620;
   /* background: #6522F5;*/
    /*background-color: #275070;*/
    /*background-color: #353e49;*/
    text-align: center;   
   
}

footer p{
    color: #fff;
    line-height: 50px;/* when this was 100, after adding privacy and refund links the footer was going up to the extent of the height of links. When the paragraph line-height is reduced to 50, while the footer height is 100, it fixed the issue and the foote is down below. */
}


footer li{
    display: inline-block;
    margin: 0 25px;
    
}


footer li a{
    text-transform: uppercase;
    color: #472727;
}

footer li a:hover{
    color: #fff;
    
}


/*  The following css code for the myBtn is copied from w3school.com webpage link given in index.html page to create a button that takes to the top of the page anytime.   */
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
   /* border-radius: 10px;  Rounded corners */
    font-size: 18px; /* Increase font size */
    

     /* To introduce the background image to the button instead of TOP text, we have added the following four lines of code in this block and another line of code that changes the bg image in the next block of code. First image is dull and the next bright blue. These images are taken from a wordpress pulgin for this method go to the top, after downloading that plugin we copied the two images from the images folder of that plugin and added to our images folder here. It works fine. Other wise we may resort to what W3schools.com provide a bright pink colour button that changes to dark greay on mouse hover. */
    height: 64px;
    width: 64px;
    border-radius: 50%; 
    background:transparent url('../images/36.png') no-repeat;
    
  }
  
  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */

    background:transparent url('../images/114.png') no-repeat;
  }

/*  The above css code for the myBtn ended here.  */







/*Some floating image css for landing page experiments. */

.eyel  {
    float: left;    
    margin: 0 10 0 0;    
}

.eyer  {
    float: right;    
    margin: 0 10 0 0;  
    
}

#girl  {
    float: left;    
    margin: 0 15px 0 0;   
    /* The right margin keeps the distance of the text content from the image. */    
    }

#hen {
    float: right;    
    margin: 0 15px 0 0;
    /* The right margin keeps the distance of the text content from the image. In this case it brings hen a bit closer to the text which is observed to be desirable. */
    }


.verticalLine {
   /* border-left: thick solid #0000ff;*/
    border-left: 2px solid black;
    padding: 0 10px;

    }

    .parent {
        height: 325px;
      /* background: #CCCCCC; */
        display: flex;
        align-items: center;
        justify-content: center;
        }

    .child {
     /*  background-color: #FFFF00;*/
        width: 600px;
        height: 200px;
        justify-content: left;     
      /*  margin: 20 25 10 50;*/
        text-align: left;
        }


        .lp_button {
            background-color: #04AA6D; /* Green */
            border: none;
            color: white;
            padding: 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
          }

        .lp_button1 {border-radius: 50%;}



         /* bottom div element for the image hyperlinks eyes.*/
        .bot_div {
            height: 225px;
           /* display: flex;*/
            align-items: center;
            display:inline-flex;
            }

        .bot_div > a:hover, a:active, a:focus {
                /* background-color: #efedf8; 
                background-color: red;
                background-color: #32CD32;
                background-color: black;*/
                background-color: #eb7620;
                border-radius: 50%;         
            }
            
            p.ex1 {
                margin-left: 50px;
                margin-right: 50px;
              }

















/* new css for telephone*/

/*
body {
    font-family: Helvetica, sans-serif;
  }
  
  .container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }

*/ /*
              #phone, .btn {
                
                padding-top: 6px;
                padding-bottom: 6px;
                border: 1px solid #ccc;
                border-radius: 4px;
                */

                /* README.md it is learnt that the followig line makes the input field 100%. Earlier it was small.*/
                .iti { width: 100%; }

                
                #phone {   
                width: 100%; /* Full width */
              /*  padding: 12px;  Some padding */ 

                padding-top: 6px;
                padding-bottom: 6px;
                
                padding-right: 6px;

                border: 1px solid #ccc; /* Gray border */
                border-radius: 4px; /* Rounded borders */
                box-sizing: border-box; /* Make sure that padding and width stays in place */
                margin-top: 6px; /* Add a top margin */
                margin-bottom: 16px; /* Bottom margin */
                resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
                height: 50px;
                font-size: 18px;


              }
              
              #mobile {
                width: 100%; /* Full width */
              /*  padding: 12px;  Some padding */ 

                padding-top: 6px;
                padding-bottom: 6px;
                
                padding-right: 6px;

                border: 1px solid #ccc; /* Gray border */
                border-radius: 4px; /* Rounded borders */
                box-sizing: border-box; /* Make sure that padding and width stays in place */
                margin-top: 6px; /* Add a top margin */
                margin-bottom: 16px; /* Bottom margin */
                resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
                height: 50px;
                font-size: 18px;


              }
             /*
              .btn {
                color: #ffffff;
                background-color: #428BCA;
                border-color: #357EBD;
                font-size: 14px;
                outline: none;
                cursor: pointer;
                padding-left: 12px;
                padding-right: 12px;
              }
              
              .btn:focus, .btn:hover {
                background-color: #3276B1;
                border-color: #285E8E;
              }
              
              .btn:active {
                box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
              }
              
*/

                #error-msg {
                    color: red;
                }
                #valid-msg {
                    color: #00C900;
                }
                input.error {
                    border: 1px solid #FF7C7C;
                }
                .hide {
                    display: none;
                }

                
              .alert {
                padding: 15px;
                margin-top: 10px;
                border: 1px solid transparent;
                border-radius: 4px;
              }
              
              .alert-info {
                border-color: #bce8f1;
                color: #31708f;
                background-color: #d9edf7;
              }
              
              .alert-error {
                color: #a94442;
                background-color: #f2dede;
                border-color: #ebccd1;
              }

/* new css for telephone*/


            /*   Marqee experiments: Examples from: https://csshint.com/html-css-marquee-examples/    
                         https://stackoverflow.com/questions/50147688/text-marquee-is-cutting-off
            */
            .rightCSS { 
                /*
                background: #a35dc1;   
                background-color: rgba(255, 255, 255, .1);  
                background: #ffffff00;
                */

                background: #ffffff00;
                overflow: hidden;
                white-space: nowrap;
            } 
            .rightCSS div {
                position: relative;
                /*animation: CSSright linear 18s infinite;*/
                animation: CSSright linear 18s infinite;
            } 

            /*
            @keyframes CSSright {
                0% { right: -100% }
                100% { right: 100% }
            }
            */

            @keyframes CSSright {
                0% { right: -30% }
                100% { right: 100% }
            }



            .rightCSS:hover div {
                animation-play-state: paused;
            }
            .li {

                /*float: left;*/
                /*width: 80%;*/
                /*width: 100%;*/
                /*width: auto;*/
                width:fit-content;

                /*padding: 1%;*/
                padding:10px;
                /*margin: 1% 10%;*/
                /*height: 20px;*/
                height: 33px;
                /*Remove Box and Shadow effect. Plain is good. 
                border-radius: 0.5em;
                box-shadow: 0 0.1em 0.5em;
               */
            }
            
            /*   Marqee experiments css code: ends here   */




























/* Media Query for Responsive Website Section */
/* Through this medial query in case of media screens of less than 768px the css written here would apply. We are declaring hamburger and cross signs which will not show up in case of media having screen size of above 768px and would appear in case of media less than 768px. Apart from that the css decalred here would apply to media with less screen sizes.*/
@media only screen and (max-width:768px){

    .container{
        width: 100%;
    }

    nav h2{
        font-size: 2rem;
        padding-left: 20px;
    }

    #sign-one, #sign-two{
        font-size: 30px;
        float: right;
        line-height: 100px;
        margin-right: 30px;
        color: #333;
        cursor: pointer;
    }

    #sign-one{
        display: block;
    }

    nav ul{
        width: 100%;
        position: absolute;
        top: 100px;
        background: #fff;
        text-align: center;
        z-index: 10;
        display: none;
        margin-right: 0;
    }
    nav ul li{
        display: block;
        border-bottom: 1px solid;
    }
    nav ul li a{
        font-size: 20px;
    }

    #res-menu:checked ~ ul {
        display: block;
    }
    #res-menu:checked ~label #sign-one {
        display: none;
    }
    #res-menu:checked ~label #sign-two {
        display: block;
    }




    /* Showcase Area */
    .showcase-content{
        width: 90%;
        transform: translateY(20vh);

        
    }




    /* About Us Section*/
    .about .about-image {
        width: 100%;
    }
    .about .about-image img{
        width: 70%;
    }
    .about .about-content{
        width: 100%;
        padding: 20px;
    }
    .about h2{
        text-align: center;
    }
    .social-icon i{
        margin: 0 20px;
    }
    

    /* Software Section*/
    .software .box{
        width: 80%;
    }

    .sfeatures .box1{
        width: 80%;
    }

    .sinstall .box2{
        width: 80%;
    }




    /* Testimonials Section */
    .testimonial .circle{
        margin: 20px 0;
    }










   /* Contacts Section */
    .contact {
        height: 80vh;
    }
    .contact h2{
        margin-bottom: 20px;
    }
    .contact input, .contact textarea {
        width: 75%;
    }   
    .contact button{
        margin-top: 5px;
    }

    


    /* Footer Section */

 
}