*{
    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;
  }
  .m-t {
      margin-top: 100px;
  }
  .m-b{
      margin-bottom: 50px;
  }
  
  .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;*/
    
}







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



/*Software Details Section */
.details{
    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;
}

*/



/* Contacts Section */
.contact{
    text-align: center;
    background-color: #f4f4f4;
    height: 80vh;
    padding: 50px 0;
}
.contact h2{
    margin-bottom: 50px;
}
input{
    padding: 20px;
    width: 40%;
    height: 50px;
    font-size: 18px;
    border: none;
}
textarea{
    width: 40%;
    height: 200px;
    font-size: 18px;
    padding: 20px;
    resize: none;
    border: none;
    margin-bottom: 30px 0;
}


/*
button{
    border: 1px solid #333;
    padding: 20px 60px;
    text-transform: uppercase;
    color: #333;
    font-size: 18px;
}
*/


input[type="text"]{
    margin: 30px 0;
}

.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;
}





/* Footer Section */
footer{
    
    height: 100px;
    background: #eb7620;
    /*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;
}


/*  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.  */







/* 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%;
    }



    /* 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 */



}